Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square The Basics
square What are tags?
Square Making a first page
Square Basic formatting
Square Fonts-color and size
Square Styling your text
Square Writing 'good' HTML
Square Adding comments
 
The HTML tag
The HEAD tag
The TITLE tag
The BODY tag

Now that you know a little about how HTML works, it's time to write your first page. We'll only be using four tags in this page, so it's nice and simple -

<html>, <head>, <title> and <body>

The HTML tag

Every HTML page or document starts with the tag <html>. This tells the browser that this is written in HTML, and so to interpret the rest of the document as such. At the very end of the document (so the last tag), we close the tag using </html> E.g. -
<html>
</html>
Start Notepad and type the above code into it. HTML is a case-insensitive language, which means it doesn't actually matter whether you use capital or lowercase letters in your code, they mean the same. However, it's good practice to use lowercase.
Now save the file as 'test.html' (use whatever name you want for the file, as long as you remember to use the extension .html). If you don't, it'll be saved as a plain text file, and you won't be able to view your work!

The HEAD tag

Now we need to add the first section to the file. The first section of any HTML file is called the head or header section. This part of the file contains information such as the title of the page, scripts (such as Javascripts) and other 'invisible' elements (i.e. the user doesn't see them when the page is displayed).
To do this we use the <head> tag. Both the opening and closing tags go between, or nested within the <html> tags, like this -
<html>
<head>
</head>
</html>
Add the code, as above, to test.html and save it.

The TITLE tag

Now we need to add a title to the page. We'll use the <title> tag. This tag tells the browser what to display in the title bar of the browser. It's also what will appear in the favorites menu if someone bookmarks your page. The <title> tag belongs in the head section of the document. We need to put our desired title between the opening and closing title tags -
<html>
<head>
<title>
Our first HTML page
</title>
</head>
</html>
Add the code, as above, to your document and save.
Our page has a title now, but it doesn't have any content.

The BODY tag

The actual content of any page belongs in the body section of the document. You can probably guess that the tag needed is <body>. The opening and closing tags of the body goes after the closing tag of the head section and before the closing tag of the HTML tag. E.g. -
<html>
<head>
<title>
Our first HTML page
</title>
</head>
<body>
</body>
</html>
Now we can add some text to the page. Any text that isn't a tag that the browser finds between the body tags, will be displayed on the screen as text. So, let's add some text to our page -
<html>
<head>
<title>
Our first HTML page
</title>
</head>
<body>
This is my first HTML page. I now know how to use the html, head, title and body tags.
</body>
</html>
Add some text to your document, like above, and save it away. You've now written your first HTML page!
Now that you've done that, you can view it with your browser. Start up Explorer (or another browser). Click File>Open>Browse and locate the file on your hard-drive. Then click ok and the browser should open your file and you can view your handiwork!
If you are having trouble finding your file, make sure you save it with the extension .html. If you didn't, it will have been saved as a plain text file. If you still can't seem to find it, click Start>Find>Files Or Folders and type in the filename there.
Congratulations on making your first web-page! Let's move on now and see how to use some simple tags to format/structure your page..

TopTop of page - BackBack to What Are Tags? - Next - Basic formattingNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference