HTML Tutorial 02
Ok, so you've created your first HTML page. Although it is blank, you can easily add some text to the page. So far the page 'first.html' should look like this (view the source code in Explorer or Netscape, or open the file using Notepad to see the code):
<html> <head> </head> <body> </body> </html>
To add text, all you have to do is place text between the <body> and </body> tags like so:
<html> <head> </head> <body> This is some text on the page. </body> </html>
Once you save the change (in Notepad click Ctrl+S or 'File'-> Save) and refresh the page you should see the changes. I generally keep Notepad open with the source of a page and Explorer open on the page as well. That way I can type changes in Notepad, hit 'Save' and refresh Explorer to see the changes.
By now you should notice that almost all tags in HTML have an open and a close tag. They are usually exactly the same in appearance except for the addition of a '/' character in the close tag. For instance the <body> tag starts the 'Body' portion of the page and the </body> tag closes it. The opening tags are also used to hold any optional properties of the tag, but we'll get into that a bit later. For now, lets add another line of text to our page, change the code so it reads:
<html> <head> </head> <body> This is some text on the page. This is the second line of text. </body> </html>
After saving the change, refresh Explorer and notice that the text on the page reads:
This is some text on the page. This is the second line of text
You'll notice that HTML ignored the line break that we included in the source of the HTML. The reason for this is that any line breaks must be coded by hand. The simplest way to include a line break is to use the 'Break' tag, which is coded as <BR>. Update your code so that it reads:
<html> <head> </head> <body> This is some text on the page. <BR> This is the second line of text. </body> </html>
And the text will display properly with the line break. You can add multiple <BR> tags to add additional line breaks. The other way to include line breaks is to add a 'Paragraph' tag, which looks like this: <P>. Update your code to read:
<html> <head> </head> <body> This is some text on the page. <P> This is the second line of text. </body> </html>
and you will notice that the line break is slightly larger. Using the <BR> and <P> tags you can create breaks in your code. This is probably also a good time to point out that HTML isn't case sensitive, so a <P> tag and a <p> tag will be read as the same thing by HTML.
Ok, so by now you've noticed that when you look at your page on the top of the blue title bar at the very top of the Explorer window, 'Untitled - Microsoft Internet Explorer' is listed. To actually add a title to our page all we have to do is add a <title> and </title> tag and include our page's title between them. Let's title our page 'First' so that the Explorer title bar lists 'First - Microsoft Internet Explorer'. To do this code your page so it looks like this:
<html> <head> <title>First</title> </head> <body> This is some text on the page. <BR> This is the second line of text. </body> </html>
and save it. Now you should show the correct title in the Explorer title bar.
I'll go ahead and show you how to include tags to mark up your text in simple fashion now so that you can bold, italicize and underline the text in your page. To bold a word or phrase in your text simply add a <b> tag where you want the bold to begin and a </b> tag where you want the bolding to end. Update your source so that it reads:
<html> <head> </head> <body> This is some <b>text</b> on the page. <BR> This is the second line of text. </body> </html>
Once you refresh your page you'll notice the bolding of the word 'text'. The italics (<i> and </i>) and underline (<u> and </u>) tags work in exactly the same way. Another simple tag is the horizontal rule tag. The <HR> or horizontal rule tag is a stand alone tag without a close (like the <BR> tag) and creates a single horizontal line across the page and puts breaks before and after the line. Modify your code so that it looks like:
<html> <head> </head> <body> This is some text on the page. <HR> This is the second line of text. </body> </html>
To see how the horizontal rule tag works. At this point you should be able to create a simple page with formatted text. However, we still haven't gotten to one of the most useful aspects of HTML, and that is the hyperlink. In order to use a hyperlink we have to specify a page to hyperlink to. The first step to doing this is to create a second HTML file (using Notepad) named 'second.htm'. Create the file with the following code:
<html> <head> </head> <body> This is the second page. </body> </html>
And save it as 'second.htm' using the same method as used to save 'first.htm' Save the file right next to 'first.htm' (in the same directory). Now update the code for 'first.htm' to look like the following:
<html> <head> </head> <body> This is some text on the page. <BR> This is the second line of text. <BR> <a href="second.htm">This is a link to the second page</a>. </body> </html>
You'll notice the addition of the code <a href="second.htm"> and </a>. We're using the anchor tag (<a> and </a>) to create a hyperlink from 'first.htm' to 'second.htm'. The anchor tag takes an optional parameter for hypertext reference, or href. The href property of the anchor tag tells the anchor where to point users if they click on the anchor. Thus the portion:
<a>This is a link to the second page</a>
Which is a static anchor (if you click the text nothing will happen). Becomes:
<a href="second.htm">This is a link to the second page</a>
Which instructs the browser to redirect users if they click on the text to 'second.htm'. Go ahead and refresh your page and try it out. Try adding the following line to your 'second.htm' page's source to allow users to click back and forth between the pages:
<a href="first.htm">This is a link to the first page</a>
You'll notice that all the text between the <a> and </a> tags become hyper linked. You can use this to hyperlink simple words, phrases, or entire paragraphs. Be sure to close your anchor tags so you don't end up hyper linking all the text on your page by accident.
So far we're using 'relative' links between our pages which works great if all our .htm files are in the same directory. If we want to link to an outside page, say to Madirish.net, we'll have to use an 'absolute' link. Add the following code to your 'first.htm' page:
<u>Links:</u><br> <a href="http://www.madirish.net">Madirish.net</a><br>
To create a link to the Madirish.net site on your page 'fist.htm'. You can use links to connect your pages to other pages in your site, or to connect to pages across the world wide web.
Ok, that’s enough for this lesson. Enjoy, and practice with the various tags. Feel free to drop me a line if you have any questions regarding learning HTML, hopefully I'll finish up the next several tutorials some time soon.