HTML TUTORIAL EXAMPLE PAGE (built by DP)


(built by DP)


Picked up from : http://www.pageresource.com/html/usepgs.htm

Table of content

Font size and color
Table of some colors
Visibone color table
Special characters
Special characters table
Link to other pages, or in the same page
Adding images
Other text tags
Adding comment to HTML source
Using lists, unnumbered & numbered
using BODY attributes : background (image)
image as a link
Using forms
Music and Sound
META tags : keywords, description, author, generator
HR tags : width, size, align, noshade, color


Here Iam on next line in source, but not on displayed HTML page. To go to next line I need a line break:
a horizontal line:
This centers text on the page
Italics Isn't this fun? Isn't this fun?
This is some cool stuff.
This is the next line.

This is a new paragraph. Is this cool or what? Underline Me!


Headings : H1 to H6 tags

Large Heading centered !

Heading 2

Heading 3

Getting Small

Smaller Still...
You must have good vision...
This is some cool stuff.
This is the next line.

This is a new paragraph. Is this cool or what?


Manipulating Font Size and COLORS


Top of page
I'm a big sentence now! Hey, I'm Small!


Special characters


Top of page

Special characters table
Several space in source text will result in only 1 space displayed.
If one want to get several space displayed, have to use  
Hello     There!

This page Copyright © 2005 by me (using © )


Linking to Other Pages

Top of page
The Web Design Resource

Syntax of a link : <A HREF="address of the link">Label displayed for the link </A>

For a link within the same page : syntax of a link : <A HREF="#address_of_the_name_in_the_page">Label displayed for the link in page </A>

Syntax of the name tag: <A NAME="address_of_the_name_in_the_page">

Syntax of an email link : <A HREF="mailto:your_email_address">E-mail Me!</A>

E-mail to Didier

Syntax for mailto link with subject, blind copy to , copy to :
<A HREF="mailto:you@you.com?subject=Hi Didier &bcc=friend@friend.com&cc=other@other.com"> Mail Me</A>


Adding images on your page


Top of page

Syntax of an image link : <IMG SRC="http://www.pageresource.com/images/next.jpg">


Other text tags


Top of page

Syntax of indice character : <SUB>indice_characters</SUB>
Area1

Syntax of exponent character : <SUP>exponent_characters</SUP>
X2 + Y2 = 0

The <PRE> Tag

The <PRE> tag is used when you want to keep the same amount of whitespace on your web page as you have in your html code in your text editor. This is useful when you have to post programming code. Here is an example:

<PRE>
x=1;
y=2;
if (x==1)
  y=2;
</PRE>

And this somewhat redundant code gives you this:

x=1; 
y=2; 
if (x==1) 
  y=2; 

Notice how we didn't need to use <BR> or &nbsp; inside the <PRE> tags. This can save you some headaches from writing in line breaks and spaces manually so often.

<NOBR> and <WBR>

Any text you place between the <NOBR> and the </NOBR> tags will not break to the next line, even after reaching the end of someone's browser window. Here is an example:

<NOBR>
I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.
</NOBR>

When viewed on your web page, this will be one really long line, like this:


I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

Unless you had a monitor with some pretty high resolution, you probably had to scroll to the right to see the end of that line. You can use the <WBR> tag inside the NOBR tags to force a line break if you want or need to do so, like this:

<NOBR>
I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long <WBR>
long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.
</NOBR>

Now you will have two lines that are not quite as long (though still pretty long in 640x480):


I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

Adding HTML Comments

Using comments in your html code

Top of page

     Comments can be a nice way to help yourself when you are coding your web page. Comments are invisible to a web browser when it displays your web page. The only way to view comments is to look at the source (html) code of the web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. So, how is it done? To write a comment, you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). After this, you type in your coments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).

<!-- I am a comment. I feel invisible though. -->

You can comment on multiple lines, just be sure you remember to end the comment!

<!--
You can't see me....
unless you look at the page source code.
-->

To look at something more useful, you could use a comment to remind yourself that a section of code is supposed to perform a certain task:

<!-- This image should be aligned to the right, and have alt text -->
<IMG SRC="mypet.gif" align="right" alt="Look at my Kitty Cat!">


Using HTML Lists

How to add an HTML list to your page

Top of page

Have you been wanting to add lists to your page? Well, here is the way to add those html lists to your web pages.

To begin, we need a tag to begin and end the entire list. For starters, let's use an unordered list. This will create a list with bullets next to the list items. The opening tag is <UL>, and the closing tag is.....yep, you guessed it...</UL>. Now, to set off each item in your list, you use the <LI> tag, followed by your text. Here is a sample list with two list items:

<UL>
<LI>I am item one
<LI>I am item two
</UL>

This will give us the bulleted list below:

Notice the <LI> tags do not require a closing tag. Also, the list is indented somewhat from the rest of the text. You can indent further by adding more <UL> tags, as long as you remember to close every one of them. Here is a sample of indenting further into the page:

<UL>
<UL>
<UL>
<LI>I am item one
<LI>I am item two
</UL>
</UL>
</UL>

This will give us the following indented list:

You can also use an ordered list in the same way you use the unordered list. Instead of using <UL> </UL>, you would use <OL> </OL>, like this:

<OL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</OL>

This gives you a numbered list rather than the bulleted list:

  1. Item 1
  2. Item 2
  3. Item 3