HTML, the Basics of How to Start

The Head

The head section of a basic web page contains just one part that is typically seen by your page visitor. Most of the rest of the content is for computers to use when handling your web page. This is part of a tutorial which already covered the body tag in part one. Assuming you are comfortable with the body, we can move on and cover the head.

Again we are using a plain text editor to prepare our basic html page. We prefer to use all lower case tags and close our tags so we can go to the next level easily in the future. We now insert <head></head> tags immediately after the opening html tag and before the body tag. Our page will now look like this:

       	 <html>

	 <head>

	 </head>

       	 <body>
	 <p>
       	 Hello
	 </p>
	 <p>
       	 This is the second paragraph!<br />
	 It has two lines.
	 </p>
       	 </body>

	 </html>

There are three tags we will learn that insert into the head section. The title, the keywords and the description tags. There are many more that can be used in the head section, but these are the main three.

The Title Tag

The title tag contains phrase that will be visible to your readers in the title bar (the part at the top of the open window, often in blue if you have not customized your screen settings). It will also be used if the person favorite place/bookmarks your page. Because of this it is important to make it topical to the content of the page and be as descriptive as possible. Nothing except plain text should be used in the title tag. It would look like this:

       	 <html>

	 <head>
	 <title>
	 HTMLfixIt.com Basic HTML Tutorial
	 </title>
	 </head>

       	 <body>
	 ... code continues

The Keyword Tag

The keyword tag is actually called a meta tag. Meta tags are special tags which go in the head section of an html page. The keywords are read by many search engines in an effort to make your page findable by a person who is interested in the subject covered by your page. The keywords should be specific to your page and each word should be separated by a comma or a space. It is generally thought that it is best to make keywords lower case, except for names of specific places or persons. Some people also include typical mispellings of their keywords to assist people who mistype find the page.

       	 <html>

	 <head>
	 <title>
	 HTMLfixIt.com Basic HTML Tutorial
	 </title>

	 <meta name="keywords" content="HTML, page, basic, tutorial" />

	 </head>

       	 <body>
	 ... code continues

Like the paragraph and line break tags, meta tags can be self closed by using a space and slash just before the greater than sign. In HTML terminology the parts which are "name" and "content" in this meta tag are called attributes of the meta tag. The parts contained in the quotes after each equals signs are called attribute values. As you learn more tags you will find that many can accept quite a number of attributes.

The Description Tag

The description tag contains a one-to-two sentence description of what is on the page. It should, like the keyword tag, be carefully crafted to help a person who is interest in your page know what is contained in the page. Some search engines will display the content of this tag in their results to help a reader decide whether to visit your page. It is also a meta tag which instead of the value of keyword uses the value description as the name attribute value, thus:

       	 <html>

	 <head>
	 <title>
	 HTMLfixIt.com Basic HTML Tutorial
	 </title>

	 <meta name="description" content="This is my tutorial page." />

	 <meta name="keywords" content="HTML, page, basic, tutorial" />

	 </head>

       	 <body>
	 <p>
       	 Hello
	 </p>
	 <p>
       	 This is the second paragraph!<br />
	 It has two lines.
	 </p>
       	 </body>

	 </html>

This gives you a good start on a basic web page. What makes our site different than the many others out there is if you get stuck, we hope to help you out. Give us a shout if we can help you get going.

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Franki is trying to buy a bigger hard disk to support this site.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

Time in Don's part of the world is: Sun, December 22, 2024 at 05:23 AM
Time in Franki's part of the world is: Sunday, December 22, 2024 at 6:23 PM
Don't worry neither one sleeps very long!