You have "index.htm" ready and an installed browser, plus a Desktop Icon for your Text Editor. The browser should have been 'Associated' automatically when installed and will start when your .htm file names are double clicked, and if multiple browsers are installed then only one will be the default. All text that you have to enter is displayed in red. while Tags will be Bold.

Be patient and take in all of the explanations as you go and please, do not permanently alter the objects except as instructed, because they will be needed while you progress towards the final tasks.

In case you really get stuck, I have included the current HTML text changes. Realise that simply copying these will not assist your learning very much at all. Learn to enter, read and check the code your self at an early stage.

Drag the index.htm file to your Text Editor Icon and open it ready for code entry (if not already open). Every step will be explained after the code is entered so you can refer to it, and please read each paragraph fully before attempting any of the tasks.

**The first "Must Have" tags**
01	When a contacted server identifies a file it contains as the one your browser has applied for, that server sends a simple? text file down the telephone line into your computer. Your browser then intelligently "reads" the file and if it contains familiar codes, it attempts to reconstruct a page according to the tag instructions. So lets make sure all browsers know that this is indeed an HTML coded file which they are to parse for tags and familiar commands. Enter this tag <html> at the top of the open text file, hit the [Enter Key] 9 or 10 times to make a little room for other entries and then enter </html> on the bottom line. Not all browsers need this tag pair but it is very risky coding to leave it out. All tags must appear in left '<' and right '>' arrows so the browser will notice them and try to understand the contents. Note that the bottom tag (</html>) is a Closing Tag. That is, it contains the forward slash '/' before the tag command. Nearly all tags require closing tags because they help the browser know where it is at in the code.
	Nothing to see so far but bear with me, as there are plenty of descriptions needed as we go. Remember, you came to learn and learn you will if you keep reading!

Enter this tag, <head>, directly under the <html> tag and on the next line enter <title>This is my first HTML page</title> as one complete line of text. Then follow on the very next line with </head>. You should now have four lines entered plus the closing </html> tag at the bottom.

These new entries introduce three important topics.

Firstly, the <head> tag can include very useful options, only one of which we see here, the <title> tag. (1) The <title> tag holds the information that is displayed on the top bar of the browser, (2) is the text that is saved when a www surfer 'Bookmarks' or 'Favourites' lists the page and, (3) if the page has been successfully indexed into a Search Engine data base, the title will appear with other information in the search results lists, infact topic / interest words in the title can improve your chances of being listed.

Secondly, none of the information contained in the <head> tag will show on the page. Another tag usually included is the advanced <meta> tag that can be listed repeatedly for various purposes. Important <meta> tag usage is for the 'Description' and 'Keywords' values that are used to attract the attention of Search Engines and consequently the searching web surfer.

Third and perhaps most important of the topics introduced by these entries is the concept of Nesting. Nothing to do with dressing up and having a night on the town, but a system that if abused, will most likely display the page as little more than a confused mess. Look at the entries on your text page and notice that <html> </html> has the complete <head> opening and closing </head> tag pair within it. Then the <title> and </title> tag pair is enclosed by the <head> tag pair.

i.e. <head> <title> ..... </title></head> is cool, but <head><title>.....</head></title> is a big no-no! and the browser will certainly let you know if any of the paired tags are abused like this. Remember, NEST the tags correctly. (In time you will learn of just a few tags that do not have or do not always need closing tags).

No doubt you want see some results so the next entries will at last produce something to view and alter.

**Something to see, at last**
03	Enter <body> on the next line and then </body> immediately above the </html> closing tag at the foot of the text page. <html> <head> <title>This is my first HTML page</title> </head> <body> </body> </html> This is the MINIMUM code that should be used to start a Web page. Now enter <center>www.mypage.com</center> immediately after the <body> tag. Then on the next line enter <h1>My Smart Page is Here</h1>. (That's the number one after the <h, not the letter "l") Be patient, just two more and then you can test it after which I will explain the entries. This next entry is purposely long so enter it all. On the next line after the </h1> tag, enter <p>This is the first HTML page that I have ever seriously attempted in my life. The teachers name is Ron and so far he has bored me to tears, but he promised that it will all come together soon.</p>. (You can use the [Enter Key] to chop up the long text line as you type if you want to see it all on the screen at once. As long as the opening and closing tags encompass the text as shown then all will be OK and the browser will understand your fussiness) Finally, on the next line and still well above the closing </body> tag enter <hr> by itself without a closing tag. And before I get my pony-tail in a knot, and if you are currently "Online", view Browser Background Defaults. Save the file. The file all ready has a name and home folder so just 'Save,' don't choose 'Save As' and do not close it, leave it on the screen. The code will now be accessible from the desktop shortcut so Double Click on the file or shortcut and it should auto start your browser. If it does not do this then you will have to start the browser manually, and 'Open' the file from its home folder. (You may be using a system that does not automatically associate during program installations) Keep the browser open, view the page and come back here - please!!!! "How do I do that if I am viewing my work"? I hear you ask. Well all browsers have a 'Back' arrow or button at the top. Just click it to bring you back to this tutorial or use the 'Forward' arrow to see your page again.
	So, isn't it pretty! - or did I hear a distant "oops". If things do not look right, then check your entries in the text file, which is still open but possibly hidden behind the browser. If possible move the browser, do not close it because this will speed up the process as we progress and if you make further changes, 'Save' the file, leave it open and then click on the 'Refresh' or 'Reload' button on the browser to load the latest changes. All quite simple really - (ahem!). • The first line "www.mypage.com" should appear at the top and in the middle of the page. • The "My Smart Page is Here" text should be on the next line, in very large text and aligned at the left of the page. • The long text entry will probably be displayed as several lines, again aligned at the left. • And finally a graphic line should appear right across the page. <html> <head> <title>This is my first HTML page</title> </head> <body> <center>www.mypage.com</center> <h1>My Smart Page is Here</h1> <p>This is the first HTML page that I have ever seriously attempted in my life. The teachers name is Ron and so far he has bored me to tears, but he promised that it will all come together soon.</p> <hr> </body> </html>
	As you get used to this quick method of text entry, save and view (reload) etc. I will assume you know how to when suggested. This will save me a lot of typing and make these already large pages about 2 feet shorter!

Back into the serious stuff. The <center> ... </center> tag can be used to center page objects that do not have an inbuilt option to do this. Try moving ONLY the </center> closing tag to a line immediately above the <hr> tag and view the results, then replace it as it was and return here - Back Arrow please!.

Moving the </center> closing tag should have automatically centred all three objects above the horizontal line, but in complex code we might have endless <center> </center> tags avoiding object options best controlled by other means. We will soon start to look at these other methods further down the track.

The <h1> ... </h1> tag is a built-in HTML option that always displays text between the tag pair in Bold and at a preset size ranging between 1and 6, where 6 is the smallest "heading" as you will see in the next section.

Keep in mind this "heading" size reference is reversed compared to the basic font [size="?"] size attribute we look at later where 1 is the smallest.

Copy and paste the <h1>....</h1> tag pair AND the text inbetween five times below the <h1> tag pair and then change the copied tag values (1) from 2 down to 6, not forgetting to change both tags of each pair. View the results, smile a lot and then remove the copied lines so that the code is as it was before. Then return here - Back Arrow please!

Neat effect aye! The "Heading" tag has been with HTML pretty well since the start and will reliably highlight headings etc. in any browser.

NOTE text defined as "heading" text ( <h?> ) will ALWAYS appear on a line by itself. That's the nature of the beast. PS: heading tagged texts feature as special page objects with search engines too!

The <p> </p> tag is for Paragraph control and has a couple of options that we will see at an advanced stage. Note right now that this tag sets text for Auto Wrapping, where the browser decides how many words will fit on the page before the paragraph is wrapped to continue on another line, BUT also note the line spacing will be closer than the normal default space for separate text objects on separate lines.

1

2

3

4

5

6

**Understand TEXT WRAPPING**
06	Go back to the browser and change the size of the browser window sideways a couple of times and observe the auto changing wrapping affect, and then return here - Back Arrow please! (Note that any text incorrectly left uncontrolled by proper tags will simply appear on the page like a left aligned paragraph.)
The <hr> tag is one of the few tags that does not have a closing tag, and in its simplest form will create a 3 dimensional line across the page - which will change width dynamically with the browser like the <p> .... </p> objects.
Let us dress this simple page up a bit before we add more objects because, lets face it, it looks pretty uninteresting and I think that introducing a few simple options to the current tags will make a big difference.

**Centreing using TAG ALIGNMENT options**
07	Add this one extra object into the text and copy it exactly as is immediately above the </body> closing tag. I will comment on it briefly but hyperlinks will be covered in detail later on. <center><a href="#top">go to Page Top</a></center>. This will prepare you for the next changes. important - do not view any changes in the browser yet.
08	Insert align="center" to the <h1> tag. i.e. <h1 align="center">. Note the space between the tag command and the option but no other spaces within the option (this rule must be adhered to), and also note the full quotes around the option value ("").
09	Insert align="center" to the <p> tag. i.e. <p align="center">.
10	Insert align="center" width="75%" to the <hr> tag. i.e. <hr align="center" width="75%">. Note again the extra space between each option but never within the option itself.
11	Insert bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080" to the <body> tag. i.e. <body bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080">. Note the hash sign (#) included with the strange Hexadecimal values. (These values are described in the HTML Colour pages tutorial)

Not Yet - Read First! An explanation before you view the changes. I have given you quite a handful here to make you work a little harder reading and checking the code if anything goes wrong. When you do view these changes all objects should be centred by the new included tag options plus the horizontal line should only cover 3/4 of the page.

Also, although it will not do much, not yet anyway, when you click on the new Hyperlink added to the bottom of the page at the start of these additions, it should change colour and if it does not then view possible cause. If you have trouble finding errors, look carefully along each line for required spaces between options only and left or right arrows plus the "/" that may have been accidentally deleted.

Now you can 'Save' the text changes, use the 'Reload' button in the browser and view the altered page. When all appears well as described above, return here - Back Arrow please!

The page should look similar to the screen capture (@ 800X600 monitor resolution) displayed on the right. Sit back and consider how the additions to the basic tags used on the first attempt, have now transformed this simple page - only by the use of 'options' included in those tags.

The align= and width= options will be self evident. If you want to convince yourself of your new-found power, try changing the width= in the <hr ... > tag a couple of times - but reset the value to 75% before you continue.

When you added the <a href="#top">go to Page Top</a> tag pair you included a HYPERLINK that would redisplay the page from the top - if the page had been too deep and had to be scrolled down to the bottom. So far the page is very short and I doubt that this did much at all.

Added to the <body> tag was:

the bgcolor= option which changed your page: background to blue (#000099),
the text= option which set the body text of the page to white (#FFFFFF),
the link= option which set the colour of highlighting hyperlinks to a lighter blue (#CCFFFF),
and the vlink= option which set the colour of hyperlinks that have been successfully visited (#800080).

This last option, vlink, is the one that changed the "go to Page Top" text to a purple colour when you clicked on it. Because these options are included in the <body> tag, the values are now set as defaults for the whole page.

<html>
<head>
<title>This is my first HTML page</title>
</head>
<body bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080">
<center>www.mypage.com</center>
<h1 align="center">My Smart Page is Here</h1>
<p align="center">This is the first HTML page that I have ever seriously attempted in my life. The teachers name is Ron and so far he has bored me to tears, but he promised that it will all come together soon.</p>
<hr align="center" width="75%">

<center><a href="#top">go to Page Top</a></center>
</body>
</html>

If this did not happen and you are currently "Online", then view possible cause.

**STRONG but BREAKABLE**
13	Now we are going to add more objects to the page, more than we did before. By now you will be getting a good idea of how this HTML stuff works although I am not expecting you to remember all the code. This will require separate study and lots of practice after you finish this tutorial so why not write them down as you go to assist recolection at a later time. The more objects we add, the more difficult it can be carefully reading the many lines of code, so I start to place this minor pressure on you at an early stage and up the tempo a little. Stay with me and don't impatiently run off doing your own thing, yet!.
14	Insert the new <strong> tag immediately after the <p> tag and before the first word. <p><strong>This is the....
15	Insert the closing </strong> tag plus the new <br> tag into the long <p> paragraph text at the point shown. This is where it goes without my showing the whole paragraph of text each time. ....first HTML page</strong><br>that I have ever....(note the nested <strong> tag pair placed correctly within the <p> tag pair)
16	Insert the <br> tag into the long <p> paragraph text at the point shown. ....in my life.<br>The teachers name ....
17	Insert the <br> tag into the long <p> paragraph text at the point shown. ....so far he has<br>bored me to .... Note: The <br> tag does not have a closing paired tag.
18	Insert the new tag, <font> with an option before the <h1> tag. <font color="#FFCC66"> and after the closing </h1> tag enter </font>. (make sure you nest the <h1> tag pair inside the <font> pair correctly)
19	Add the <h3>This is my first list</h3> tag pair as a new line immediately after the <hr> tag. <h3>This is my first list</h3>.
20	Add on the next line. My thoughts so far: (there are no tags for this line, yet.
21	Add on the next line. Now I am starting to see the light. (there are no tags for this line, yet.
22	Add on the next line. HTML coding may not be so hard after all. (there are no tags for this line, yet.
23	Add on the next line. I will soon be able to read and understand other source code. (there are no tags for this line, yet.
24	Add this single <hr> tag on the next line. <hr width=75%>.
25	Now, before you add a couple of special tags to this new lot, Save the text and Reload into your browser and view the results. Do not make your own changes but return here - Back Arrow please!
25	Nothing much to see really but from here you will learn how simple lists are formatted, as seen on many WWW pages. Note the four lines of the supposed list appeared as one long paragraph, but not for long though!. Also the default Horizontal Line width option centres the <hr> line without the align= option. If a <hr> tag width is less than 100% the line auto centres, however we then have to use align="left" or align="right" if needed - align="center" is not required for the <hr> tag in many browsers. (it is good policy to include the align="center" option anyway) No doubt you have noticed the long paragraph nicely broken into four lines and the yellow Header etc. The <br> tag (no closing tag) will break a line where ever you command it and close wrap most following text / objects underneath. To make any plain text object appear bold, then use a correctly nested <strong> tag pair as you have for the first two lines of the once long paragraph. We will look at the <font> tag pair more closely in session 2 but here we see how the simple color="#??????" option can be used to override the body text default colour. <html> <head> <title>This is my first HTML page</title> </head> <body bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080"> <center>www.mypage.com</center> <font color="#FFCC66"><h1 align="center">My Smart Page is Here</h1></font> <p align="center"><strong>This is the first HTML page<br>that I have ever seriously attempted in my life.</strong><br>The teachers name is Ron and so far he has<br>bored me to tears, but he promised that it will all come together soon.</p> <hr width="75%" align="center"> <h3>This is my first list</h3> My thoughts so far: Now I am starting to see the light. HTML coding may not be so hard after all. I will soon be able to read and understand other source code. <hr width=75%> <center><a href="#top">go to Page Top</a></center> </body> </html> Now go-for-it while we look at three different ways we can cleverly format the lines of text currently appearing incorrectly as one long paragraph, and really start to see some useful object control.

**LIST Control**
26	Make space for a new line directly after the <h3> tag. Add the new <ul> tag on this new line. <ul>
27	Insert the new <li> tag in front of the first list item words. <li>My thoughts.....
28	Insert the new <li> tag in front of the second list item words. <li>Now I am.....
29	Insert the new <li> tag in front of the third list item words. <li>HTML coding.....
30	Insert the new <li> tag in front of the fourth list item words. <li>I will soon be.....
31	Make space for a new line directly after the <li>I will soon be able... text. Add the new </ul> closing tag on this new line. </ul>
31	Now, Save the text and Reload into your browser and view the results. Do not make your own changes but return here - Back Arrow please! An Unordered List (<ul>) will display List Items (<li>) with Bullets and close space each item line (in most browsers). It is time to have a good look at what you have done so far and consider the consequences of the tags and options used from the start. Feel comfortable with what you see in the browser and how each object appears the way it does, or refresh if needed before continuing. <html> <head> <title>This is my first HTML page</title> </head> <body bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080"> <center>www.mypage.com</center> <font color="#FFCC66"><h1 align="center">My Smart Page is Here</h1></font> <p align="center"><strong>This is the first HTML page<br>that I have ever seriously attempted in my life.</strong><br>The teachers name is Ron and so far he has<br>bored me to tears, but he promised that it will all come together soon.</p> <hr width="75%" align="center"> <h3>This is my first list</h3> <ul> <li>My thoughts so far: <li>Now I am starting to see the light. <li>HTML coding may not be so hard after all. <li>I will soon be able to read and understand other source code. </ul> <hr width=75%> <center><a href="#top">go to Page Top</a></center> </body> </html>

33	Change the <ol> and </ol> tag pair to <dl> and </dl>. <dl> and </dl>.
34	Change the first only <li> tag to <dt>. <dt>.
35	Change the other three <li> tags to <dd>. <dd>.
	Now, Save the text and Reload into your browser and view the results. Do not make your own changes but return here - Back Arrow please! Magic! A Defined List (<dl>) will display a Defined Term (<dt>) as a leading line followed by indented Definition Data items (<dd>) (in most browsers). You can have as many <dt> and <dd> items in a list as you need. Not a bad option for indexing etc. <dl> <dt>My thoughts so far: <dd>Now I am starting to see the light. <dd>HTML coding may not be so hard after all. <dd>I will soon be able to read and understand other source code. </dl>
	If, before and after List tags and list items etc., you entered a <center> .... </center> tag pair in an effort to place a controlled list in the middle of the page, the result would show that the formatting had disappeared, replaced by close spaced centred lines of text. This would render the use of formatted lists useless!. Want to try it to learn by observation? Add a new line with the <center> tag above the first <ul>/<ol>/<dl> tag then add a new line with the </center> closing tag below the last list item. Save, Reload into the browser and observe the mess. Once observed, delete the <center>...</center> tags returning the text to the way it was ready for the next session of the tutorial (almost). Finally for this session, to wet your appetite a little and help you tidy up the list, we will add tags that are best described in a later session because of their complexity.

**Finish Lesson 1 and Overview**
36	Make space for a new line directly above the <h3>..... tag Add the <center> tag on this new line. <center>
37	Make space for a new line directly after the <h3>..... tag. Add the new <Table> tag and option on this new line. <Table border="0"> Thats a zero not the letter 'o'
38	Make space for a new line directly after the <table> tag. Add the new <tr> tag on this new line. <tr>
39	Make space for a new line directly after the <tr> tag. Add the new <td> tag and option on this new line. <td align="left">
40	Make space for a new line directly below the </dl>..... tag Add these </td></tr></table></center> closing tags on this one new line. </td></tr></table></center>.
	The next line should be the bottom <hr width=75%> horizontal rule.
	Now, Save the text and Reload into your browser and view the results. Then return here - Back Arrow please! The page should display the <h3> tag pair centred on the page above a now centred Definition list. The definition list is still left aligned by default but it is carried in a box, so to speak, that is itself centred on the page. The <table>, <tr> and <td> tag pairs are Table controls that you will look at in more detail in session 3. Tables can appear as 3D borders or invisible as is the case on your page. When kept invisible they allow us to position images and text over the page using complex layouts otherwise impossible to achieve. Most pages viewed on the Internet probably use Tables. There is a full listing of Table tags and table design options on the 'Using Tables' page via the 'HTML Code Lab'. <html> <head> <title>This is my first HTML page</title> </head> <body bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080"> <center>www.mypage.com</center> <font color="#FFCC66"><h1 align="center">My Smart Page is Here</h1></font> <p align="center"><strong>This is the first HTML page<br>that I have ever seriously attempted in my life.</strong><br>The teachers name is Ron and so far he has<br>bored me to tears, but he promised that it will all come together soon.</p> <hr width="75%" align="center"> <center> <h3>This is my first list</h3> <table border="0"> <tr> <td align="left"> <dl> <dt>My thoughts so far: <dd>Now I am starting to see the light. <dd>HTML coding may not be so hard after all. <dd>I will soon be able to read and understand other source code. </dl> </td></tr></table></center> <hr width=75%> <center><a href="#top">go to Page Top</a></center> </body> </html>

This first session has been quite lengthy and I hope you patiently followed the steps,
and most importantly, read the many explanations.
Session 2 will be a little shorter describing the inclusion of Images (Bitmaps)
and extending your knowledge of colour and font controls.

This page was set with the Lucida Sans font. Other preferences are Arial and Helvetica.


Over 120 pages: All major topics divided into Classrooms
Free Backgrounds & Buttons!	DTP and HTML			"My First Page" HTML lessons
Tutorial Text Search		Perl CGI Scripts	Typography & Layout
4 pages of Links		Visitors Book	Perl Scripts Forum n/a
Free Links page		Feedback Form	Q/A contact Forum

	pages Designed & Published - Ron F Woolley
e-mail	©1997 '98. Last Revised: Friday, 31 October 2003 22:04