Basic HTML Tags.



In HTML these are the basic tags that you come across in most WebPages:

These tags can be written in either UPPER or lower case it dose not matter.

<html></html>
These are placed at the begining and end of your document. To show the browser where the document begins & ends.

This <head> is placed directly under the <html> tag and the end tag </head> is place directly above the <body> tag. These form the head of the document. These tags form the head of the document and in here are place the <title>, <meta> and <style> tags. Any links to .CSS sheets (Cascading Style Sheet) or .JS sheets (Java Script) and most of your Scripts.

This <body> is placed directly under the </head> & this </body>is placed directly above the </html> tag. These form the body of the document. In here is placed what you want to be seen on your web page.

The <title>---</title> tags are for the tile of your document shown in the top left side of your browser & is placed directly under the <head> tag.

The <meta> tags are placed directly under the <title> tag & is used by search engines to find out the information about the page. For more on <meta> tags Click Here.

The <style>---</style> are placed directly under the <meta> tags & are used to style your tables, links, paragraphs, heading and just about anything else in the body of your document. For more about Styles Click Here.

These <p></p> are at the begining and end of a paragraph.

These <font>---</font>control the size, type and colour of the text used on your page.

These <b>---</b>bold the text either individually, in sentences, divisions or paragraphs.

These <i>---</i> italic the text either individually, in sentences, divisions or paragraphs.

These <u>---</u> underline the text either individually, in sentences, divisions or paragraphs.

This <img>is used to insert an image into your document.
EG. This <img src="../Smileys/CoolSmiley_Big.gif" width="190" height="200" alt="CoolSmiley_Big.gif" title="Cool Smiley" >would give you this.

CoolSmiley_Big

This <div>--</div>is a division tag and has a assortment of uses far to many to list here. E.G. <div align="center" style="font-family: Comic Sans MS, Courier New; font-size:40px; font-weight: bold; word-spacing:10px; letter-spacing:8px; line-height:55px;"> <p>This is paragraph 1</p> <p>This is paragraph 2</p> <p> This is paragraph 3</p></div> will give you this:

This is paragraph 1

This is paragraph 2

This is paragraph 3

This <span>---</span>it also has myriad of uses but is mainly used in styling individual words or phrases .
EG. <span style="background-color: #ffa87d;">This </span>
<span style="background-color: #ccffcc;">is </span>
<span style="background-color: #ffa87d;">one </span>
<span style="background-color: #ccffcc;">
way </span>
<span style="background-color: #ffa87d">
to </span>
<span style="background-color: #ccffcc">
change </span>
<span style="background-color: #ffa87d">
the </span>
<span style="background-color: #ccffcc">
background </span>
<span style="background-color: #ffa87d">
colour </span>
<span style="background-color: #ccffcc">
for </span>
<span style="background-color: #ffa87d">
each </span>
<span style="background-color: #ccffcc">
word</span>.

This is one way to change the background colour for each word.

These <a>---</a> are used to create links to other sites, pages or anchors. EG. <a href="Jokes/TongueTwister.htm" target="_blank" class="boxed">Click Here</a>.

These<center>---<center>simply centre the text, tables or forms.
E.G. <center>This is centered.</center>

This is centered.

<table>, <tr>, <td> These all belong to the table. It is used for many reasons but mainly as placement of text. E.G.
<table width="200" height="150" border="6" align="center" cellpadding="6" cellspacing="6" bordercolor="#ff0000" bgcolor="#000000">
<tr valign="top">
<td><font color="#ffff00">
Cell 1</font></td>
<td><font color="#ffff00">
Cell 2</font></td>
</tr>
<tr valign="top">
<td><font color="#ffff00">
Cell 3</font></td>
<td><font color="#ffff00">
Cell 4</font></td>
</tr>
</table>
would give us this.

Cell 1 Cell 2
Cell 3 Cell 4

<ul>, <ol>, <li>, <dl>, <dt>, <dd>These all belong to lists. To find out about them Click Here.

This is <sub>sub text</sub> and this is<sup>sup text</sup> text.
This is sub text and this is sup text.

There are Six (6) Headings tags:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>
<h6>Heading 6</h6>

With the increase in screen sizes since these tags were written most these seem a little small today. But a solution is this. In the <STYLE> tags in the <HEAD> tags of you document you can do this:
h1.head {color:#ff0040; font-size: 60px; font-weight: bold; letter-spacing: 10px; font-family: Comic Sans MS, Times New Roman; text-align: center;}
To get this:

Your Text

Or if you prefer put it in the <H?> tag like this <h1 style="color:#ff0040; font-size: 60px; font-weight: bold; letter-spacing: 10px; font-family: Comic Sans MS, Times New Roman; text-align: center;"> for the same result.

Your Text

If you were wondering about the .head it is to separate it from other H1 tags you may have in your page. You can call this by <h1 class="head">

The <hr> (Horizontal Rule) Tag Attributes are:
width, align, size, noshade & color.
Therefore this <hr width="250" align="center" size="10" color="red" noshade> will give us this.


This works in IE 4+, Firefox 1.5+ & Google Chrome 4 but not in Opera 8 but dose in Opera 10.

The <marquee>---</marquee> Tag Attributes are:
behaviour, direction, dir, scrolldelay, scrollamount, truespeed, alternate, scroll, slide, up, down, left, right, height, width.
E.G. Table at the top of the Page. For more Click Here

Finally but by no the least is the good old <br> tag. This would proberly be the most used of all the tags and it simply creates a line brake. EG.
This<br>is<br>what<br>a<br>line<br>brake
<br>does.
This
is
what
a
line
brake
does.


The CLEAR attribute (left, right, all) tells the browser how to treat the next line of text following a BR element if the current text is wrapping around a floating images or another Object.
<br clear="All"> as seen here. The value you use depends on the side of the page to which one or more inline images are pegged and how you want the next line of text to be placed in relation to those images.

For a list of XHTML Tags and thier Attributes. Click Here.

C U
May your life be filled with Peace and Joy.
Gary

 

 

BlueBar.gif


              Visitor N°
               
Free Text Counter.
Counter added 05/02/2014.

Top