HTML Lessons  

  1. HTML Introduction

  2. HTML Tags

  3. HTML Page Structure

  4. HTML Backgrounds

  5. HTML Formatting Text

  6. HTML Formatting Fonts

  7. HTML Headings

  8. HTML Entities

  9. HTML Line Breaks

  10. HTML Lists

  11. HTML HR- Horizontal Rule

  12. HTML Images

  13. HTML Links

  14. Table Introduction

  15. Table Rows & Columns

  16. Table Width

  17. Table Alignment

  18. Table Border Color

  19. Table Background Color

  20. Table Background Image

  21. Cell Alignment

  22. Cell Padding

  23. Cell Spacing

  24. Cell Spanning
 

Page Structure

All Webpages are made up of a head and a body.
HEAD
BODY

First we need to let the browser know we will be using HTML by using the HTML tags. Open Notepad and start with this.
<html>
</html>

As mentioned above all pages have a head section.
<html>
<head>
</head>
</html>

The only tags within the head tags that we need to worry about right now are the title tags.
<html>
<head>
<title></title>
</head>
</html>

All pages have  body section as well.
<html>
<head>
<title></title>
</head> 
<body>
</body>
</html>

Notice how the tags are nested. It is very important to ALWAYS nest your tags. Meaning, whichever tag was opened last should be closed first. If tags aren't nested they are overlapping and overlapping tags may appear distorted in some browsers.

The following code would be an example of overlapping tags.
<b> <i> </b> </i>

The following code would be an example of nested tags:
<b> <i> </i> </b>

Ok. Now let's give this page a title. To do this, type My First Page in between the opening title (<title>) and the closing title (</title>) tags.

Now lets put some actual text into your page. To do this, type Hello World! in between the opening body (<body>) and the closing body (</body>)tags.

Your code should now look like this:

<html>
<head>
<title> My First Page </title>
</head>
<body> Hello World!
</body>
</html>

Save the file as mypage.html.  Alternatively, you can name the file mypage.htm. Both names are equally acceptable. If you are not sure how to save a file the please go to our Saving Pages Lesson.

Open the file in your browser.  To do this, go to the folder where you have just saved the mypage.html and double click it. The icon should look something like this:

Your page should look like this:

Congratulations! You did it! You've just built your very first webpage.

Next Lesson

© Copyright Studio6000 2006. All rights Reserved.