Html Tutorial Part One *Tags

Morphmaster · 14-05-2005, 15:18

Chapter 1: The Basics

Tags...

You can have bold and italicized, Larger and Smaller, or it could look type-written.

Of course, the HTML code for this can look confusing...

You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look <tt>type-written</tt>.

So what are all these "<" and ">" things doing here? When you place a certain thing within these you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document.

<b>This Text is Bold</b>
^^^--Opening Tag ^^^^--Closing Tag

Here are two pieces of HTML code, the second of the two has an error in it, what is it?

#1 - Bob jumped OVER the fence.
#1 - Bob jumped <b>OVER</b> the fence.
#2 - Bob jumped UNDER the fence.
#2 - Bob jumped <b>UNDER<b> the fence.

You should have noticed that the second code is missing a slash (/) in the tag after the word UNDER, which causes the web browser to interpret the code as leaving the bold face on! This is a common error, so be careful of it!

Note: Tags in HTML are NOT case sensitive. For example... <title> and <TitLE> both mean the same thing and are interpreted as being the same. Document Structure...

HTML files are just normal text files... they usually have the extension of .htm, .html, or .shtml. HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document's title and similar information, and the body contains most everything else.

Example of basic HTML document Structure...

<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>

You may find it easier to read if you add extra blank lines such as follows...

<html>

<head>
<title>Title goes here</title>
</head>

<body>
Body goes here
</body>

</html>

Note: Extra spaces and line breaks (blank lines) will be ignored when the HTML is interpreted... so add them if you wish to do so.

Whatever falls between the TITLE tags will be the title of the document, when the page is viewed it is usually found in the title bar at the top of the screen. [Note: You may NOT use other tags within the TITLE tags (Example: You cannot have the code read: <title><b>title goes here</b></title>.]

Example of how titles are viewed...

In Netscape Navigator...
Netscape - [Title goes here] OR Title goes here - Netscape [depending on version]

In Microsoft Internet Explorer...
Title goes here - Microsoft Internet Explorer

Whatever you place between the BODY tags will fall into the major area of the document window, and therefore it is the largest part of your HTML document.

Your own HTML page...

To begin writing your own HTML page, type the following into a new text file:
<html>
<head><title>My Home Page</title></head>
<body>
</body>
</html>

Chapter 2: The Common Tags

Headings...

Headings are some of the most important tags within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <hy> and the closing tag is </hy> with y being the size of the heading... from 1 to 6. (1 being largest, and 6 being smallest)

Example of heading tags...
H1: Bob fell over the chicken.
<h1>H1: Bob fell over the chicken.</h1>

H2: Bob fell over the chicken.
<h2>H2: Bob fell over the chicken.</h2>

H3: Bob fell over the chicken.
<h3>H3: Bob fell over the chicken.</h3>

H4: Bob fell over the chicken.
<h4>H4: Bob fell over the chicken.</h4>

H5: Bob fell over the chicken.
<h5>H5: Bob fell over the chicken.</h5>

H6: Bob fell over the chicken.
<h6>H6: Bob fell over the chicken.</h6>

Horizontal Ruled Lines...

Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is <hr>. The horizontal ruled line DOES NOT have a closing tag. You may also add certain attributes to the <hr> tag, such as WIDTH=n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off. A plain <hr> with no attributes will make the line the full width of the screen.

Example of horizontal ruled lines... <hr width=50> <hr width=50%> <hr size=7> <hr noshade>

You may also use several attributes within one tag... <hr width=50% size=10 noshade>

Chapter 3: More Common Tags

Paragraphs...

You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. The closing tag for a paragraph is not always needed, but I recommend using it anyway.

Example of a paragraph...

Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!
<p>Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!</p>

Text Formatting Properties...

If you had an entire web page without formatted text, it would look rather dull and boring. This is why we use text formatting tags. Some common text formatting tags are:
<b> and </b> for bold,
<i> and </i> for italics,
<u> and </u> for underlined, and
<tt> and </tt> for typewriter.

Text Formatting Properties...Font Tags

The <font size=n> and </font> tags come in handy.
n is the number of font points by which to change the size of the current font.
n can be positive or negative: a positive number will increase the font size, and a negative number will decrease it.
n can also be an absolute number, indicating an absolute size for the font (not a relative size).

Example of font tags...

Bob is a Cool Guy isn't he?

<font size=+1>Bob</font> <font size=+2>is</font> <font size=+3>a</font> <font size+2>Cool</font> <font size=+1>Guy</font> isn't <font size=-1>he?</font>

ALIGN attributes...

Many tags support ALIGN attributes... if you want something to be aligned from the left margin, from the center, or from the right margin. The ALIGN attribute is placed in the opening tag before the >.
Left Align
<h1 align=left>Left Align</h1>
Center Align
<h1 align=center>Center Align</h1>
Right Align
<h1 align=right>Right Align</h1> The Line Break...

When your HTML document is viewed, normally the text will do a word-wrap at the end of a line. If you want to have the text BREAK (go to another line) you will use the <br> tag. This tag has no closing tag.

Example WITHOUT line Break...

Sentence One. Sentence Two. Sentence Three.

Sentence One.
Sentence Two.
Sentence Three.

Example WITH line Break...

Sentence One.
Sentence Two.
Sentence Three.

Sentence One.<br>
Sentence Two.<br>
Sentence Three.<br>
Preformatted Text...

If you wish to have text line up properly (a.k.a. fixed width text) that will include line breaks without the use of the <br> you may find the <pre> and </pre> tags helpful.

Example of text WITHOUT preformatting...

The cat ran after the dog. ^ ^-verb ^noun ^-noun

The cat ran after the dog.
^ ^-verb ^noun
^-noun

HTML ignores the extra line breaks, so the text does not line up properly.
Example of text WITH preformatting...

The cat ran after the dog.
^ ^-verb ^noun
^-noun

<pre>
The cat ran after the dog.
^ ^-verb ^noun
^-noun
</pre>

Your own HTML page...

Add the following to your HTML page ("Home.htm"), between the lines <body> and </body>:

<h1>YOURNAME's Home Page</h1>
<hr>
This is the home page of <b>YOURNAME</b>.
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>

Chapter 4: A little more tags

The CENTER tag...

The center tag pretty much explains itself. The opening center tag is <center> and the closing center tag is </center>. Whatever you put between will be centered on the current line!

Example of CENTER tag...

Center Works
<center><h1>Center Works</h1></center>

The BODY attributes...

In Chapter 1 you learned the BODY tag. The BODY tag has many attributes... here are a the most useful ones...

* BACKGROUND="location_of_image" - Background Image
* BGCOLOR="#hexadecimal_here" - Background Colour
* LINK="#hexadecimal_here" - Colour of Links
* VLINK="#hexadecimal_here" - Colour of Links the User has Already Visited
* TEXT="#hexadecimal_here" - Text Colour
* Click Here to Learn how to specify Colours

Your own HTML page...

Right click in the centre of the image below, and select "Save Image As" / "Save Picture As", or similar. Save it as "image.gif" in the same directory where your home page "Home.htm" is stored.

Background Image image.gif

Add the following to your HTML page ("Home.htm"): (the blue text is what to add)

<html>
<head><title>My Home Page</title></head>
<body background="image.gif">
<center><h1>YOURNAME's Home Page</h1></center>
<hr>
This is the home page of <b>YOURNAME</b>.
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
</body>
</html>

This is all tags for now.
This tutorial may not be redistributed or taked by anyone without prior written permission from morphmaster.

permission from robertall

14-05-2005, 15:18	#1 (permalink)
Morphmaster Ultimo Supremo Join Date: May 2005 Location: /public_html/Cgi-bin/ Posts: 1,417 iTrader: 0 / 0%	*Html Tutorial Part One Tags** Chapter 1: The Basics Tags... You can have bold and italicized, Larger and Smaller, or it could look type-written. Of course, the HTML code for this can look confusing... You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look <tt>type-written</tt>. So what are all these "<" and ">" things doing here? When you place a certain thing within these you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document. <b>This Text is Bold</b> ^^^--Opening Tag ^^^^--Closing Tag Here are two pieces of HTML code, the second of the two has an error in it, what is it? #1 - Bob jumped OVER the fence. #1 - Bob jumped <b>OVER</b> the fence. #2 - Bob jumped UNDER the fence. #2 - Bob jumped <b>UNDER<b> the fence. You should have noticed that the second code is missing a slash (/) in the tag after the word UNDER, which causes the web browser to interpret the code as leaving the bold face on! This is a common error, so be careful of it! Note: Tags in HTML are NOT case sensitive. For example... <title> and <TitLE> both mean the same thing and are interpreted as being the same. Document Structure... HTML files are just normal text files... they usually have the extension of .htm, .html, or .shtml. HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document's title and similar information, and the body contains most everything else. Example of basic HTML document Structure... <html> <head><title>Title goes here</title></head> <body>Body goes here</body> </html> You may find it easier to read if you add extra blank lines such as follows... <html> <head> <title>Title goes here</title> </head> <body> Body goes here </body> </html> Note: Extra spaces and line breaks (blank lines) will be ignored when the HTML is interpreted... so add them if you wish to do so. Whatever falls between the TITLE tags will be the title of the document, when the page is viewed it is usually found in the title bar at the top of the screen. [Note: You may NOT use other tags within the TITLE tags (Example: You cannot have the code read: <title><b>title goes here</b></title>.] Example of how titles are viewed... In Netscape Navigator... Netscape - [Title goes here] OR Title goes here - Netscape [depending on version] In Microsoft Internet Explorer... Title goes here - Microsoft Internet Explorer Whatever you place between the BODY tags will fall into the major area of the document window, and therefore it is the largest part of your HTML document. Your own HTML page... To begin writing your own HTML page, type the following into a new text file: <html> <head><title>My Home Page</title></head> <body> </body> </html> Chapter 2: The Common Tags Headings... Headings are some of the most important tags within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <hy> and the closing tag is </hy> with y being the size of the heading... from 1 to 6. (1 being largest, and 6 being smallest) Example of heading tags... H1: Bob fell over the chicken. <h1>H1: Bob fell over the chicken.</h1> H2: Bob fell over the chicken. <h2>H2: Bob fell over the chicken.</h2> H3: Bob fell over the chicken. <h3>H3: Bob fell over the chicken.</h3> H4: Bob fell over the chicken. <h4>H4: Bob fell over the chicken.</h4> H5: Bob fell over the chicken. <h5>H5: Bob fell over the chicken.</h5> H6: Bob fell over the chicken. <h6>H6: Bob fell over the chicken.</h6> Horizontal Ruled Lines... Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is <hr>. The horizontal ruled line DOES NOT have a closing tag. You may also add certain attributes to the <hr> tag, such as WIDTH=n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off. A plain <hr> with no attributes will make the line the full width of the screen. Example of horizontal ruled lines... <hr width=50> <hr width=50%> <hr size=7> <hr noshade> You may also use several attributes within one tag... <hr width=50% size=10 noshade> Chapter 3: More Common Tags Paragraphs... You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. The closing tag for a paragraph is not always needed, but I recommend using it anyway. Example of a paragraph... Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity! <p>Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!</p> Text Formatting Properties... If you had an entire web page without formatted text, it would look rather dull and boring. This is why we use text formatting tags. Some common text formatting tags are: <b> and </b> for bold, <i> and </i> for italics, <u> and </u> for underlined, and <tt> and </tt> for typewriter. Text Formatting Properties...Font Tags The <font size=n> and </font> tags come in handy. n is the number of font points by which to change the size of the current font. n can be positive or negative: a positive number will increase the font size, and a negative number will decrease it. n can also be an absolute number, indicating an absolute size for the font (not a relative size). Example of font tags... Bob is a Cool Guy isn't he? <font size=+1>Bob</font> <font size=+2>is</font> <font size=+3>a</font> <font size+2>Cool</font> <font size=+1>Guy</font> isn't <font size=-1>he?</font> ALIGN attributes... Many tags support ALIGN attributes... if you want something to be aligned from the left margin, from the center, or from the right margin. The ALIGN attribute is placed in the opening tag before the >. Left Align <h1 align=left>Left Align</h1> Center Align <h1 align=center>Center Align</h1> Right Align <h1 align=right>Right Align</h1> The Line Break... When your HTML document is viewed, normally the text will do a word-wrap at the end of a line. If you want to have the text BREAK (go to another line) you will use the <br> tag. This tag has no closing tag. Example WITHOUT line Break... Sentence One. Sentence Two. Sentence Three. Sentence One. Sentence Two. Sentence Three. Example WITH line Break... Sentence One. Sentence Two. Sentence Three. Sentence One.<br> Sentence Two.<br> Sentence Three.<br> Preformatted Text... If you wish to have text line up properly (a.k.a. fixed width text) that will include line breaks without the use of the <br> you may find the <pre> and </pre> tags helpful. Example of text WITHOUT preformatting... The cat ran after the dog. ^ ^-verb ^noun ^-noun The cat ran after the dog. ^ ^-verb ^noun ^-noun HTML ignores the extra line breaks, so the text does not line up properly. Example of text WITH preformatting... The cat ran after the dog. ^ ^-verb ^noun ^-noun <pre> The cat ran after the dog. ^ ^-verb ^noun ^-noun </pre> Your own HTML page... Add the following to your HTML page ("Home.htm"), between the lines <body> and </body>: <h1>YOURNAME's Home Page</h1> <hr> This is the home page of <b>YOURNAME</b>. <p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p> Chapter 4: A little more tags The CENTER tag... The center tag pretty much explains itself. The opening center tag is <center> and the closing center tag is </center>. Whatever you put between will be centered on the current line! Example of CENTER tag... Center Works <center><h1>Center Works</h1></center> The BODY attributes... In Chapter 1 you learned the BODY tag. The BODY tag has many attributes... here are a the most useful ones... * BACKGROUND="location_of_image" - Background Image * BGCOLOR="#hexadecimal_here" - Background Colour * LINK="#hexadecimal_here" - Colour of Links * VLINK="#hexadecimal_here" - Colour of Links the User has Already Visited * TEXT="#hexadecimal_here" - Text Colour * Click Here to Learn how to specify Colours Your own HTML page... Right click in the centre of the image below, and select "Save Image As" / "Save Picture As", or similar. Save it as "image.gif" in the same directory where your home page "Home.htm" is stored. Background Image image.gif Add the following to your HTML page ("Home.htm"): (the blue text is what to add) <html> <head><title>My Home Page</title></head> <body background="image.gif"> <center><h1>YOURNAME's Home Page</h1></center> <hr> This is the home page of <b>YOURNAME</b>. <p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p> </body> </html> This is all tags for now. This tutorial may not be redistributed or taked by anyone without prior written permission from morphmaster. permission from robertall Last edited by Morphmaster; 14-05-2005 at 15:25.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
meta tags	benf	Search Engine Optimisation (SEO)	0	12-06-2005 22:56
Html Tutorial Part Three*frames	Morphmaster	Programming Articles	1	14-05-2005 21:56
Html Tutorial Part Five *Forms	Morphmaster	Programming Articles	0	14-05-2005 21:54
Html Tutorial Part Four *search engines	Morphmaster	Programming Articles	0	14-05-2005 21:52
Html Tutorial Part Two *Text and Images	Morphmaster	Programming Articles	2	14-05-2005 15:40

Html Tutorial Part One *Tags

Html Tutorial Part One *Tags

Similar Threads

**Html Tutorial Part One *Tags**