Working with Headings

The following series of tags create document headings akin to those in newspapers and magazines. Headings indicate a subjects level of importance, note that Google robots make use of headings to index and have a impact on your ratings , so use it with care. For example heading 1 is used for main topic, heading 2 should indicate a subtopic and heading 3 should indicate subtopic of heading 2, and so on. The only property of the heading tags is align, however its deprecated and you should be using Cascading Style Sheet (CSS) instead to align text. I recommend you learn CSS as soon as you are done with learning HTML.

The attribute align can have the values, left, right, and center. To align a heading, insert the alignment attribute within the deading tag

<h1 align="center">

To format a word or phrases on a heading, place an opening heading in front of it with its corresponding close tag, below is the code and its resulting phrases



<h1>This is a Heading 1</h1>

`This is a Heading 1`





<h2>This is a Heading 2</h2>

`This is a Heading 2`





<h3>This is a Heading 3</h3>

`This is a Heading 3`





<h4>This is a Heading 4</h4>This is a Heading 4




<h5>This is a Heading 5</h5>This is a Heading 5




<h6>This is a Heading 6</h6>This is a Heading 6

Browser and source code

All major browsers allow you to view the source code of pages. Its a great way for you to learn the Ropes ant trix of HTML. How you view the source code in each of the major browser differs, I will show you how to do it in Mozilla Firefox since this is the browser of choice for me, however you should not have a problem to fins out how to do it in your browser. After all, you must have an inquisitive nature since you are at my site!

While you view a document that you like in Firefox, go to the View menu and select "Page source". From here you can examine, copy and then past it in your editor if you like
To save it, select File menu -> Save Page As end enter a filename of choice.

Controlling the document background

You can specify the document background color or image using two different attributes of the <body> tag. Background color simply fills the entire document. Background images are titled by the browser, meaning they are repeated left to right, top to bottom, filling up the visible space of the document.

To define a background color for a document, add the bgcolor attribute to the <body> tag
Set the bgcolor attribute to a hexadecimal color value of predefined color name. The following example shows you how to set a white background with white text.ß

Example:
------------------------------------



<html>

<head>

<title>Controlling the document background</title>

<meta name="keywords" content="Controlling background, bgcolor, background HTML" />

<meta name="description" content="Controlling background - how to set the background of your document" />

  </head>



 <body bgcolor="#000000" text="white">



<h1>Controlling the background</h1>



</body>

</html>

------------------------------------

To specify a background images, add the background attribute to the <body> tag
Set the attribute equal to the path name of the image that you want to use. The following example make use of a titling image

Example:
------------------------------------

  <html>

<head>

<title>Controlling the document background</title>

<meta name="keywords" content="Controlling background, bgcolor, background HTML" />

<meta name="description" content="Controlling background - how to set the background of your document" />

</head>



 <body background="images/bg.png">



<h1>Controlling the background</h1>

</body>

</html>

------------------------------------

Defining Meta tag Robot value

A robot is a type of program that search engines use to search the Web site documents and update their databases. Robots use the meta information to index if for the engine. You as a developer can use control how much a robot reads of your site.

Enter a meta tag in your head section. use the name attribute and set it to robots. Instruct robots to read the entire page and follow all the links within it, by setting the content to all, follow

Example:
------------------------------------



<head>

<title>Defining Meta tag Robot value</title>

<meta name="keywords" content="Ray´s Guide to HTML, Guide, HTML, Hypertext Markup Language, HTML Tutorial" />

<meta name="descrition" content="Ray´s Guide to HTML - An introductory guide for the beginner" />

<meta name="author" content="yourname" />

<meta name="expires" content="wed, 15 June 2011 02:00:00:00 GTM" />

<meta http-equiv="refresh" content="5" />



<meta name="robots" content="all, follow" /">



</head>

------------------------------------
Don´t forget the forward slash at the end of meta tag

Note - The reason for allowing a robot to crawl your site are obvious. However there are times you don´t want this to happen; for example a document you don´t want the world to se yet and pages for only a limited audience.

To instruct robots to read all, but retain from following links:

<meta name="robots" content="all, nofollow" />

To instruct robots not to read at all:

<meta name="robots" content="none" />

Refreshing page content using the Meta tag

This tags has the same effect as refreshing your browser´s refresh button. You will also se how the code to force the browser to load another document

In the head section of your document enter the meta tag. Add the http-equiv attribute and equal it to refresh. Write the content value and set it to the number of seconds you want the page to remain static before refreshing

Example:
------------------------------------
<head><title></title>
<meta name="keywords" content="Ray´s Guide to HTML, Guide, HTML, Hypertext Markup Language, HTML Tutorial" />
<meta name="descrition" content="Ray´s Guide to HTML - An introductory guide for the beginner" />
<meta name="author" content="yourname">
<meta name="expires" content="wed, 15 June 2011 02:00:00:00 GTM" />

<meta http-equiv="refresh" content="5" />

</head>
------------------------------------
Don´t forget the forward slash at the end of meta tag

Note use the http-equiv instead of name when the action is being taken retrieves data using the Hypertext Transport Protocol (http;//)

To force the browser to lead another document after the refresh time elapse follow the refresh rate value with a semicolon and enter url="path_name", where path_name equals the file path to a document on your Web server or complete URL to another document on the web.

Example:
------------------------------------
<head><title></title>
<meta name="keywords" content="Ray´s Guide to HTML, Guide, HTML, Hypertext Markup Language, HTML Tutorial" />
<meta name="descrition" content="Ray´s Guide to HTML - An introductory guide for the beginner" />
<meta name="author" content="yourname">
<meta name="expires" content="wed, 15 June 2011 02:00:00:00 GTM" />

<meta http-equiv="refresh" content="5"; url="path_name" />
</head>
------------------------------------
Don´t forget the forward slash at the end of meta tag

Defining Meta Tag Expiration Dates

The default behavior of most browsers is to cache (save) the pages you visit so that it can pull the pages from your computer instead of the internet. This takes much less time. You can specify the behavior on most browsers, however as a developer you can specify the date on which the current content of your page expires, From that point, the browser visiting must connect to your server to get the latest version. You can also instruct the browser not cache at all.

Insert a <meta> tag in the head section, setting the name and content property/value pair to expires/your_date. Date should be in Greenwich Mean Time (GTM) format.

Example:
-------------------------------------
<head>
<title></title>
<meta name="keywords" content="Ray´s Guide to HTML, Guide, HTML, Hypertext Markup Language, HTML Tutorial">
<meta name="description" content="Ray´s Guide to HTML - An introductory guide for the beginner" />
<meta name="author" content="yourname">

<meta name="expires" content="wed, 15 June 2011 02:00:00:00 GTM /">

</head>
-------------------------------------
Don´t forget the forward slash at the end of meta tag

To prevent browser from caching at all. Enter the value of property/value to pragma/no-cache (name="pragma" content="no-cache")

Note - Greenwich Mean Time (GTM) format uses the three-character abbreviations for the days of the week (Mon, Tue, Wed, Thu, Fri, Sat, Sun), followed by the day, month, full year, and time in hours:minutes:seconds. It helps to know what your local time translates in to.
You can look up your GMT at wwp.greenwichmeantime.com

Caution - To get your site listed on a search engine you must register with them. Typically, you submit your sites URL, (your_site.something) and at some later point they will scan your site. Remember - some search engines don´t use meta data to rank sites (like Google)!

Defining the Author Meta Tag

If you want to put your name on your document, <meta> tag gives you the power to do so. None of the search engines today make use of it, however you might like to add it anyway for the future or for other programmers.

Enter the <meta> tag into the head section, setting the name attribute to author and the content attribute to your name

Ex:
-----------------------------------
<head>
<title>
</title>
<meta name="keywords" content="Ray´s Guide to HTML, Guide, HTML, Hypertext Markup Language, HTML Tutorial">
<meta name="descrition" content="Ray´s Guide to HTML - An introductory guide for the beginner" />

<meta name="author" content="yourname">

</head>
-----------------------------------

Don´t forget the forward slash at the end of meta tag!

Note

You can find sites that offer to maintain your metadata for a small fee. This will give you better ranking and the increase the chances of your site to be the result of specific search. You should know that Google do not make use of metadata at all, being the most popular search engine today!

tip

You can also include an email address for the content value

Defining Meta Tag Descriptions

Search engines use the meta tags description of the document for indexing and ranking purpose. Some search engines also display the description entries underneath the links on the result pages. Make sure to write it i way that entices people to click on your link

In the head section of your document, below the document title, insert another <meta> tag
Add the name attribute to your meta tag and set it equal to description

<head>
<title></title>
<meta name="descrition">
</head>

Press Spacebar and add the content attribute, which accepts your description

<head>
<title></title>
<meta name="descrition" content>
</head>

Set the content attribute to equal a short piece of descriptive text

<head>
<title></title>
<meta name="descrition" content="Ray´s Guide to HTML - An introductory guide for the beginner" />
</head>

Don´t forget the forward slash at the end of meta tag

Note

What you enter for the name and content attributes defines something called property/value pair. The name attribute defines what the property is, and the content attribute defines the value of that property

tip

Search engines make use of meta tags, it is its descriptive text, combined with the text you place between your title tags, that potential site visitors see in their search result. The primary keywords for the document should be part of your description text. You don´t want to pack the description with keywords, or be heavy-handed with text that reads like a late night informercial. Remember that this text is for human consumption: There´s a reason why infomercial aren´t regarded positively as source of object information

Defining meta tag keywords

Documents head section often contains descriptive information bout the document, referred to as metadata. Using meta tag and its various attributes, you can define such document properties as the author, expiration date, document key words and descriptions. When search engine read your document they can use this information to index your page.

In the head section of your document, below title tag enter the <meta> tag

Add the name attribute to the <meta> tag and set it equal to keywords

Insert a space and add the content attribute

Set the content attribute equal to a comma-separated list of keywords pertinent to your
page´s subject matter

Make sure that the code is XHTML-compliant, placing a forward slash / between the
last entry in the tag and forward slach

Caution

If you repete yourself by using simalt keywords some search engines view this as spamming tactic
and may not rank your page low or not at all

tips

The object is not to supply every keyword you can think of but to tailr your keywords to the specific information contained in the document.
Work your keywords into your document titles and body text. The first word in your document title should be referenced early in your list of keywords, too, so you should not start a page title with the word "The". Any keyword in that appears in the text of your document shouldn´t be repeated more than seven times on that page.

Structuring an HTML Document

The simple document template that you can do following the instructions on this page can be used again and again. Simply save the file to blank.html and then you can reuse it whenever you need to construct a new HTML document.

Open your text editor (notepad for windows, texteditor for mac)
Type the tag <html> at the top of the document.
the tag needs a closing </html> tag

Example:

<html>

</html>

Place your cursor on the line between the opening <html> tags and end tag </html>. Type the tag <head> and make the closing tag </head>. Within the head tags comes special tags for search engines and for declaring different attributes to your document

Example:

<html> <head> </head>

</html>

to create the document title, which appears in the title bar of the browser window, enter <title> and is end tag </title> between the head tags

Example:

<html>

<head>

<title>
</title>
</head>

</html>

the last tag you need to add is the <body> tag. Within this tag is where you write your content that you want to appear on your page. Don´t miss out on the closing tag </body>
Example:

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

Save your document. A good idea is to save it to blank.html so that you can reuse this as a template. However I would rewrite the code in the beginning over and over again so that you memorize this simple format.

If you open the document your browser will open it. However you will not see anything as you have only constructed the containing elements! Follow the rest of the tutorials and you will have a blistering page within no-time!

Ray´s Guide to HTML

This site is for people interested in learning HTML.

HTML is the first you need to learn when you want to start out as a web designer/developer. Its a must for the designer and a great way to get the feel for coding. Its simple and yet you get a great understanding of a hight-level programming language.

You can follow this blog fram start to finish if its your first encounter with HTML, or if you only have a little experience of the language. If you already know HTML and just want to refresh your memory about a specific subject I have divided all subjects in the smallest of elements so that you can jump directly to the subject of mater.

Best of luck!

Andrée Ray