VoyForums: HTML basic reference

Quick Reference Guide:

HTML Linking
<a href="http://URL here">Title Of Link</a>

non-breaking space. (moves forward one blank space).
&nbsp;

non-breaking space 5x (moves forward 5 spaces).
&emsp;

non-breaking space 1/2x (moves slightly forward )
&thinsp;

Break (moves to next line)
<br>

new Paragraph
<p>

Opening into new tabs. (the more simple method).
target="_blank"

Outer-Text can be added.
title="outer text here"

Links can now be opened in a New-Tab (and, Outer-Text can be added when dragging cursor over link).
target="_blank" title="outer text here"

The Complete linking code (with New-Tab feature & Outer-Text activated.)
<a href="http://URL here" target="_blank" title="outer text here" >Title Of Link</a>

⭐⭐⭐✪ This is how it would look when used in a completed example: ✪⭐⭐⭐
<a href="http://URL here" target="_blank" >Title Of Link</a>

this code also allows links to be opened in a New-Tab. (complex method)
Onclick="window.open(this.href); return false"

Boldface words
<b> </b>

underline words
<u> </u>

script. (Signature)
<em> </em>

Typewriter Text
<tt></tt>

(Remember: whenever Copy / Pasting the 'New Tab' code,
either,
target="_blank"
or
Onclick="window.open(this.href); return false"

.....don't forget that it's proper to include a space separation between attributes.

when using HTML, you can also write hidden comments.
In other words, ....you'll make a few quick messages which will NOT be visible on the browser.

Hence, the following code can be used whenever you wish to write personal notations:
<!-- write hidden comments here -->

--------------------------
when using CSS, the method differs:
--------------------------
✪☆⭐ (within your CSS code, here's the best method of writing hidden material:) ⭐☆ ✪

/* add personal notes here (visibly hidden) */

This allows you to write personal notes & connotations without corrupting the CSS. So, its main function is to offer personal footnotes. While, at the same time, it basically serves no function.

the best part is, these invisible elements do not take up space

————
If you're not quite ready to release a paragraph or sentence,
you could always choose .hidden {display: none;} within your CSS,
then, just add the accompanying Class within your sentence:
<a href="http://www.amren.com/" target="_blank" class="hidden"> This will be hidden </a>

If you want to move forward several spaces, try this trick (courtesy of Ehow.com):

I want to add a huge break space......... So, here's a good method. COOL!
It's better than &nbsp;&nbsp&nbsp;&nbsp;&nbsp;

I want to add a huge break space <span style="visibility: hidden">......... </span> So, here's a good method. COOL! It's better than & nbsp ; & nbsp ; & nbsp ; & nbsp ; <p> The above technique uses a simple code implemented within <SPAN> Tags: <span style="visibility: hidden">......... </span> (thus, creating a huge break within the sentence) Ehow had applied this same method for entire sentences or several breaking lines. In this case, you'd be using DIV tags instead of SPAN. <div style="visibility: hidden">My Hidden Text </div> breaks to the next sentence (similar to <br> or <p>) This method can also be applied to entire paragraphs: <div style="visibility: hidden"> My Hidden Text line 2 line 3 line 4 etc </div> ------ONE FINAL NOTE------ (needless to say) in this instance (above), the invisible elements DO take visible space ! ....So, it obviously differs from the standard  method.

Of course, there are other methods which could be used, ....such as <p hidden> hidden comment here </p>

finally; this is how I'm enclosing commands within a text-field.
<textarea rows="5" cols="66">
add text here. etc. etc.
</textarea>

(substitute the numbers in order to resize the field)
-adding the number of rows increases the height.[vertical]
-adding Columns widens the field [horizontally]

Please refer to Bottom-of-page for more complete tutorial

Here's a more complete tutorial:
First; Here's the most basic method of creating links, using HTML:

Let's give a more detailed version of the above code:
<a href="Put The http://WWW.com/ here">THEN, place a Title here.</a>

Here's a self-explanatory example:
<a href="http://www.yahoo.com/">Yahoo!</a>
(Of course) when using this code; only the word "Yahoo!" will be visible.
And, clicking the link will direct you to http://www.yahoo.com.

Next, you might want to enable your link to open in a new TAB.
The most commonly used method:
target="_blank"

A newer and smoother method opening links in New Tabs is the following code:
Onclick="window.open(this.href); return false"
(note: — whenever pasting this code, it's considered proper to include the blank space prior to each attribute.)

Don't Do this:
ahref="http://URL here"target="_blank"title="outer text here" >Title Of Link

It's considered proper to have space between attributes.

You can also add narrative text within each highlighted link. .....we'll call this the "Outer Text Method".
A title="outer text here"

(Once again; —it's considered correct to include an empty space prior to this code.)

Also consider using " " (quotations) instead of ' '.
This allows usage of these ' (apostrophe's) within your text.

title="outer text here"

Here's an example of the finished product:
Yahoo!

______________

So, the following code gives all these features:
<a href="http://URL here" target="_blank" title="outer text here" >Title Of Link</a>
Title Of Link

These methods can be used for most types of HTML and CSS!!!
.....here's an example of these features being applied to a CSS Button: Yahoo

The most basic commands of HTML are
<br> (which begins a new line).
and
<p> (which begins a new paragraph).

[Unfortunately; the alternative version of <br /> and </p> are sometimes used.]
This became very confusing for anyone attempting to learn Tag-lines.

Additional basic functions include breaking a space. & nbsp ;
(although, this is becoming somewhat obsolete).
Also Note: — When copying&pasting the above code; please remove spaces.
So, it should display like this- &nbsp;

and, you can break 5 spaces, using the following code: & emsp ;
(Of course, when applying this code, there are no spaces). &emsp;

When using basic HTML functions: always remember to enclose your Taglines.

For example: specific words can be made BOLD by using the following code: <b>Specific words in Boldface</b>, then, normal text.

Here's the finished product: Specific words in Boldface, then, normal text.

This boldface uses the TAGS <b></b>

In order to write words in Script; <em>write words in Script</em>, then, resume your normal text.

This tagline (directly above) creates the following results: write words in Script <em>add text</em> , then, proceed with normal text.

Words and Phrases can also be underlined: <u>Underline any Phrase enclosed within these Tags</u>, then, proceed with normal text.
Here's the visible product: Underline any Phrase enclosed within these Tags, then, proceed with normal text. <u></u>

So, this method of enclosing tags applies to virtually all forms of HTML (whether they are simple or complex).
It's necessary to enclose the tags. This enables your instruction to display correctly.

The IN order to center a Paragraph (or, an entire page), use the tags: <center></center>.
Write your material between these Center lines.
Apply The <center> tag at the beginning.
and,finish with </center> when closing afterward.

for example:<center>Add Paragraph here</center>.

Now that you're familiar with Tags which surround content; this method applies to nearly every type of instruction.
for example:<body> </body>

Now, let's apply this to a more complex Code:
<div id="tswcsstabs"> <ul> <li><a href="http://www.com">title#1</a></li> <li><a href="http://www.com">title#2</a></li> <li><a href="http://www.com">title#3</a></li> </ul> </div>

(You'll notice that each different tag is properly enclosed)
<div> </div>
<ul> </ul>
<li> </li>
This is the correct procedure.

You may now add the ability to open links in new tabs, and, add outer text
<div id="tswcsstabs"> <ul> <li><a href="http://www.com" Onclick="window.open(this.href); return false" title="outer text here" >title#1</a></li> <li><a href="http://amren.com" target="_blank" title="outer text here" class="comp" >title#2</a></li> <li><a href="http://www.com">title#3</a></li> </ul> </div>

.....and, this completes your lesson in Basic HTML!

[ Contact Forum Admin ]

Forum timezone: GMT-8
VF Version: 3.00b, ConfDB:
Before posting please read our privacy policy.
VoyForums^(tm) is a Free Service from Voyager Info-Systems.
Copyright © 1998-2019 Voyager Info-Systems. All Rights Reserved.