Basic HTML Tutorial

Basic HTML Part II


What is an HTML File?
An HTML file is a text file that you can create using nothing fancier than Notepad if you are usng a PC or SimpleText if you are using a Mac. It does have a certain structure that should be followed but this structure is very easy to understand. First, pages must start with something called a DTD which stands for Doc Type Definition. It tells your web browser what to expect when it looks as the rest of your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
You don't have to remember this. Just keep it handy and copy it into the top of each web page.
Think of the HTML file as a big envelope that starts with <html> and ends with </html>. This big envelope contains two smaller envelopes. One of these envelopes is the <head> section of the file and the other is the <body> section of the file.
The <head> section of the page can contain a number of advanced items that can help your page work in some pretty magical ways but for right now the only tag that we will be concerned with in the <head> section is the <title> tag. As you may have guessed from the tag's name, this sets the title of the page that appears in the top of the web browser. Fortunately for those of us with less than perfect memories, most HTML tags give you a pretty good clue as to what they are for by the name of the tag. The <title> tag is used with its closing pair, </title>, something like this:
<title>Your Page Title</title>.
This TITLE will not appear on your web page itself but will be seen in the Title bar of the web browser window.
The <body> section of the file is where you can start to add the elements that actually show up on the page. For the most part, anything that will appear on your page will be contained between the <body> opening tag and the </body> closing tag.
So, we have a very basic HTML file with a <head> section containing our <title> and a <body> section to which we can add our page content.
Below you will find the code for a very simple web page such as we have discussed in this page. When you write HTML, be sure to use lowercase for all HTML tags.
Feel free to copy the code into your text editor and experiment with adding some text between the <body> and </body> tags. When you have finished adding text, save the page, giving it a file name the ends with ".html", like mypage.html . This is important so that the web browser will "know" that this file is to be treated as a web page and that the HTML tags we have used will be interpreted properly by the browser. Remember the file name and where on your computer you have saved this file.
What will it look like in a web page? Let's see.
Grab the Code
Once the text in the box below is highlighted by clicking the Grab link, select Copy from the Edit menu. Then, switching to your text editor, select New from the File menu and Paste from the Edit menu. Feel free to copy the code into your text editor and experiment with adding some text between the <body> and </body> tags. When you have finished adding text, save the page, giving it a file name the ends with ".html", like mypage.html . This is important so that the web browser will "know" that this file is to be treated as a web page and that the HTML tags we have used will be interpreted properly by the browser. Remember where on your hard drive you have saved this file so that you can open it from your web browser and view your first web page.
Back Next
[Back] [Table of Contents] [Next]
Copyright © 2007 John H. Bolgiano, Jr. and Roberta Bush - All rights reserved
Modified with permission for educational use by Roberta Bush