How To HTML! Lesson Two


USE A BROWSER AND A TEXT EDITOR TOGETHER.

You saved index.htm into the new folder. To see it as a webpage you open it with a browser (Internet Explorer, or Netscape Navigator, etc). However, to work on the html source, you need to open it with a text editor (Notepad, etc).

Use both together when working on html. So that you can edit the html, save it, then refresh the browser to witness the changes.

To open it in a browser you can either double click the file icon, or browse to the file on your hard drive.

To open the html source, using your text editor, simply browse into the folder where you saved your file. You cannot see the correct webpage file? Ok, click on File, select Open..., where it says files of type: click on the downward pointing arrow to open up the dropdown menu, and select All files (*.*). You should now see any saved webpages in the folder, select index and open.

Shortcut. If you are using MS Internet Explorer as your default browser, simply double click on the file icon to open the webpage in the browser, then click on View, and select Source to open up the html in Notepad.

Remember, to see any changes to your webpage after editing the html, you must FIRST save the changes in the text editor, and SECOND refresh the browser.


EXERCISE TWO.

Open up index.htm in Notepad. The code should be:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p>Simple isn't it - a home made webpage in minutes.</p>
</body>
</html>

Edit the html as following (changes/additions in strong):

<html>
<head>
<title>My First HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>My First HTML Page</h1>
<p>Simple isn't it - a home made webpage in minutes.</p>
<p><em>This line will show as emphasised, I have learnt a new tag.</em></p>
<p><strong>This line will show as strong, I have learnt another new tag.</strong></p>
</body>
</html>

Now save the html in the text editor, and refresh the browser. Wow, the background has a colour! That was the addition to the body tag of bgcolor (background colour) #ffffcc (RGB code for a pale shade of yellow). Note that the close tag remains a simple </body>.

You should now be able to:

  • Use a text editor to edit html, and a browser to view the page.
  • Understand the difference between the head and body of a webpage.
  • Understand the importance of tag nesting.
  • Be able to use the following tags:
    1. <html> <html>
    2. <head> </head>
    3. <body> (including bgcolor) </body>
    4. <h1> </h1>
    5. <p> </p>
    6. <strong> </strong>
    7. <em> </em>

Well done!

NOTE! Have you noticed that if you type two spaces in Notepad, only one appears in the web page? This is because html does not recognise more than one space between characters using the space bar. If you need more, then you must type the following entity into the code for each extra space: &nbsp; (no-break space). You will learn more entities as your knowledge base increases.


NEXT: LESSON THREE.

HOME