HTML Tutorial for Beginners 3 - What is HTML and how to use it HTML Tutorial for Beginners 3
What is HTML and How to Use It



May 1st, 2009:

HTML Tutorial for Beginners 3

  • How To Add an Email Link to My Web Site?
  • How To Structure Links?
  • How To Use Graphics?
  • How To Organize Graphic Files, HTML Files and Other Files?
  • What Else Should My Website Have?

In this tutorial you will learn how to take advantage of your HTML skills in terms of site construction and search engine optimization most efficiently. It is not only necessary to build a graphically appealing site for the people who visit your website. Your website will also be visited by so called "spiders" or "robots",

which will scan your HTML code and determine the importance of your website in regards to search engine ranking. Thus, your HTML code, your link placement and link structure, the user friendliness of your web site (how easy it is to navigate through your website, and will your visitors be able to find what they are looking for easily), and last but not least, how will search engines see your site, are issues of great importance to your web site or online business!

I can't stress these issues enough. Most web design beginners make the same mistake. They invest most of their time into the graphic design of their website, and how their website looks on the surface. I have seen websites, which were packed with pictures, graphics, and animations to the point where the web browser would crash. Besides the fact that those practices are defeating the purpose of displaying information on the internet (fast), such sites usually just look unprofessional and irritate visitors.

In HTML Hands-On Tutorial 3 I will show you how to create a professional website from ground up. I will focus on the HTML layout design of your web site and how other computers, like search engines for example, see your site. You can always add graphics and images later if you feel like improving the graphic design of your web site. However, for 99% of all search engines, link directories, and other sources of traffic, it simply does not matter what your web site's graphic design looks like.

Create a new directory on your hard drive and name it /mybusiness/. Open a new document in your HTML editor. (If you do not have a HTML editor you can use Notepad to write your HTML code) Name this new document index.html and save it to your /mybusiness/ directory, that's right, save the blank document.

Lets start out with the HTML layout of the website: First we start with the head part of the web page: Please visit HTML Tutorial I for more information about the HTML document's head or visit the HTML head tutorial. 
<html>
<head>
<title>Your Web Page's Title Here</title>
<meta name="description" content="Your description here">
<meta name="keywords" content="your, keywords, here">
</head>
<body bgcolor="#FFDEAD">
Now create a table with two columns and two rows. The table width should be "750" pixels wide, and specify the border with "1". Now we add cellspacing and cellpadding attributes to this table. This will give the content inside the table a little extra space. This table will contain your site's logo, a navigation menu, and your text. 
<html>
<head>
<title>Your Web Page's Title Here</title>
<meta name="description" content="Your description here">
<meta name="keywords" content="your, keywords, here">
</head>
<body bgcolor"#FFDEAD">
<table align="center" width="750" cellspacing="5" cellpadding="5" border="1">
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</table>
Now close the body and the HTML document like this: 
</body>
</html>
All your website's content will now be entered into the 4 sections between the <td></td> of this table. This table will be the base structure for your web page and your web site.

The first <td></td> section will contain your logo: (always add an "alt" tag to the image source tag. This is essential with XHTML and for search engine optimization)
<td><img src="graphics/logo.jpg" alt="This is the website's logo"></td>

The second <td></td> section will contain some information like headlines or other main information you would like to display. The third <td></td> section will contain your link menu: 
    <td>
    <a href="webpage1.html">Link to Webpage 1 Here</a><p>
    <a href="webpage2.html">Link to Webpage 2 Here</a><p>
    <a href="webpage3.html">Link to Webpage 3 Here</a><p>
    <a href="webpage4.html">Link to Webpage 4 Here</a><p>
    <a href="index.html">Link to Home</a>
    </td>
The fourth <td></td> section will contain your text. Here is what your page's HTML code should look like now: 
<html>
<head>
<title>Your Web Page's Title Here</title>
<meta name="description" content="Your description here">
<meta name="keywords" content="your, keywords, here">
</head>
<body bgcolor"#FFDEAD">
<table align="center" width="750" cellspacing="5" cellpadding="5" border="1">
<tr>
    <td><img src="graphics/logo.jpg" alt="This is the website's logo"></td>
	<td>main asdfj asd;lfaskldfja;sdkmain asdf;jasd main a main</td>
</tr>
<tr>
    <td>
    <a href="webpage1.html">Link to Webpage 1 Here</a><p>
    <a href="webpage2.html">Link to Webpage 2 Here</a><p>
    <a href="webpage3.html">Link to Webpage 3 Here</a><p>
    <a href="webpage4.html">Link to Webpage 4 Here</a><p>
    <a href="index.html">Link to Home</a>
    </td>
    <td>asdfasd asdfasdfa sd as df as df asd f asd 
	fa sdf a sdf a sdf a asdfasdfa sd fa sdf a sdf 
	sdfas df as df asdf asdfasdfasdfasdfasdfa aa sd
	asd f a sdfa sd fa</td>
</tr>
</table>
</body>
</html>
Now you need to make some additions to your HTML code in order to improve the web site design.

The logo is by default left aligned. If you want your logo to align to the center of this part of the table, edit the <td> right in front of your logo image source <img src="logo.jpg"> and add this attribute:

<td align="center">
However, I will leave the logo as is and do not modify the alignment, so the logo image will by default align to the left.

Alignment and Align Attributes:

Lets move forward to the second <td></td> containing the headlines. I want the text within this part of the table to be bold. Add this tag <strong> right behind the <td> and the beginning of your text. At the end of the text, but before the </td> close the tag like this: </strong> 
<strong>your text here</strong>
Now I want to align the same text to the right side of the table. Add the attribute align="right" to the <td> of the table: <td align="right">

Now your text in this part of the table should align to the right.

Now I want the same text to align to the bottom of this part of the table. Add this attribute to the <td align="right"> of the table:
<td align="right" valign="bottom">
Now your text in this part of the table should align to the right bottom.

Now I want the links and text in the two bottom cells of the table to align to the top of the table cell, just to make sure that the links and text in this table row always align to the top.

Now replace the table row (!) <tr> for the two bottom cells with:
<tr valign="top"> 
<html>
<head>
<title>Your Web Page's Title Here</title>
<meta name="description" content="Your description here">
<meta name="keywords" content="your, keywords, here">
</head>
<body bgcolor"#FFDEAD">
<table align="center" width="750" cellspacing="5" cellpadding="5" border="1">
<tr>
    <td><img src="graphics/logo.jpg" alt="This is the website's logo" 
	width="150" height="75"></td>
	<td align="right" valign="bottom"><b>Headline here<br>
	Some more information about this page here<br></b></td>
</tr>
<tr valign="top">
    <td>
    <a href="webpage1.html">Link to Webpage 1</a><p>
    <a href="webpage2.html">Link to Webpage 2</a><p>
    <a href="webpage3.html">Link to Webpage 3</a><p>
    <a href="webpage4.html">Link to Webpage 4</a><p>
	<a href="index.html">Link to Home</a>
    </td>
    <td>asdfasd asdfasdfa sd as df as df asd f asd fa sdf 
	a sdf a sdf a sdf as df as df as dfa sdfasdfasdfa sd fa sdf 
	a sdf as df a sdf as df as df as df as dfas dfasdfasdfa sdfas 
	</td>
</tr>
</table>

<table align="center" width="750" cellspacing="5" cellpadding="5" border="0">
<tr>
    <td align="center"></td>
</tr>
</table>

</body>
</html>
You may now add as many links to your menu as you like, or add as much text as you like to your text section, the table will always expand towards the bottom in order to fit the content. The link menu and the text will always align towards the top of this table row.

How to Create the Footer of My Website

Create another centered table with the same width, cellspacing, cellpadding, and set the border to "0". This table only needs one column and one row. Insert this table into the bottom part of your HTML code right below the </table> and above the </body> tag. Set the <td> alignment to align="center". 
<table align="center" width="750" cellspacing="5" cellpadding="5" border="0">
<tr>
    <td align="center"></td>
</tr>
</table>
As with the previous table, your information will be entered between the <td> and </td> tags of this new table.

What Information Should I Enter Into The Footer Table?

Well, basically you can enter any information you please into this table, but in this tutorial I will show you how to enter the links from your link menu in a slightly different way, and how to enter an email link to the bottom of your web site. Your HTML code should now look like this: 
<html>
<head>
<title>Your Web Page's Title Here</title>
<meta name="description" content="Your description here">
<meta name="keywords" content="your, keywords, here">
</head>
<body bgcolor"#FFDEAD">
<table align="center" width="750" cellspacing="5" cellpadding="5" border="1">
<tr>
    <td><img src="graphics/logo.jpg" alt="This is the website's logo" 
	width="150" height="75"></td>
	<td align="right" valign="bottom"><b>Headline here<br>
	Some more information about this page here<br></b></td>
</tr>
<tr valign="top">
    <td>
    <a href="webpage1.html">Link to Webpage 1</a><p>
    <a href="webpage2.html">Link to Webpage 2</a><p>
    <a href="webpage3.html">Link to Webpage 3</a><p>
    <a href="webpage4.html">Link to Webpage 4</a><p>
	<a href="index.html">Link to Home</a>
    </td>
    <td>asdfasd asdfasdfa sd as df as df asd f asd fa sdf a sdf a sdf a 
	sdf as df as df as dfa sdf asdfasdfa sd fa sdf a sdf as df a 
	df as df as dfas dfasdfasdfa sdfas df as df asdf 
	</td>
</tr>
</table>

<table align="center" width="750" cellspacing="5" cellpadding="5" border="0">
<tr>
    <td align="center"></td>
</tr>
</table>

</body>
</html>
Now copy the links only from your navigation menu 
   
 <a href="webpage1.html">Link to Webpage 1 Here</a><p>
    <a href="webpage2.html">Link to Webpage 2 Here</a><p>
    <a href="webpage3.html">Link to Webpage 3 Here</a><p>
    <a href="webpage4.html">Link to Webpage 4 Here</a><p>
    <a href="index.html">Link to Home</a>
and paste those links into the table you have just created. Delete the <p> tags! After the bottom link "Link to Home" add a <p> tag!

How To Add an Email Link To My Website?

The email link basically looks just like any other link on your website. It starts out just like a regular link. However, when someone clicks on this link, the attribute "mailto" will open an email client, and the email address specified in this email link will automatically be added to the "Mail To:" field. Here is the syntax for an email link: 
 
<a href="mailto:yourname@youremail.com">YourName@YourEmail.com</a>
You have now finished your website's layout, although you have only created one web page yet. You can now use this HTML layout to create all other pages in your web site. Just save your current document 4 times to your /mybusiness/ directory and name those files as follows:

webpage1.html
webpage2.html
webpage3.html
webpage4.html

The index.html should still be in your /mydirectory/.

Open the index.html and you should be able to click through all links, and navigate through your raw web site. Now modify each .html page of your web site and add each page's content, text, and graphics.

Use your skills to change font sizes and colors, create new tables (create tables inside tables - nested tables), add images, graphics, and photos and try to be creative with your web site layout and graphic site design.

More information about web site design to come ...

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:


Copy the code below and paste into your web page 
<a href="http://www.webmasterseminar.com/htmltutorial3.php">
Webmaster Seminar</a><br />
HTML Tutorial for Beginners III

HTML Related Links:




HTML Tutorial for Beginners 3 - © WebmasterSeminar 2000 - 2008 Terms Of Use