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



May 1st, 2009:

HTML Tutorial for Beginners 2

HTML Hands-On Tutorial for Beginners II

In HTML Tutorial for Beginners I you have learned how to create a web page with most basic HTML commands and their functions. In HTML Tutorial for Beginners II, I will show you how to add photos or images to your web page, how to add links to other HTML pages within your web site, and how to add links to other web sites. I will also show you how to add tables and table attributes like "left", "right" and "center" to specify text alignment. This tutorial will also show you how to set background colors and how to use background images.

Create a new directory on your computer and name it /mywebsite/. In the directory /mywebsite/ create a new blank .html page and name it index.html

Why Should I Name It index.html?

All server hosts (where your web site will be hosted once it is online) look for the "index" file by default, when your web site's address or domain name is being called up by a web browser (or internet user). In other words, when someone types in your web site address or URL, the browser will automatically look for a file called index.html first. Therefore, the index.html is your start- or home page.

Now put some HTML into the index.html using the HTML code example from HTML Tutorial I: (just copy and paste the code below into your index.html) 

<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>
<center>Welcome to my home page</center>
<br />
<table>
<tr>
    <td>Text for the left column goes here</td>
    <td>Text for the right column goes here</td>
</tr>
</table>
</body>
</html>
You will notice that the following new tags and elements have been added:
<center></center> - center start and center end - centers text or images
<br /> - indicates a new line break
<table></table> - table start and table end - table
<tr></tr> - table row start - table row end
<td></td> - table cell start - table cell end

Right click on the "This is a Test Image" image below and save it as "image.gif" to your /mywebsite/ directory.

Rigth click and save this image as image.gif

You should now have the following 3 files in your /mywebsite/ directory:

  • index.html
  • image.gif
  • webpage.html

How To Add an Image, Graphic or Photo to Your HTML Page:

This is the HTML code (image source) which will insert the image file to your HTML layout: 
<img src="image.gif">
Copy the HTML code above and paste it into your index.html right below the end of the table </table> and above the </BODY> tag. Go to Browse View and see if you can see the image there (you should be able to read this: "This is a Test Image".

There are two major types of image files which can be read by most web browsers
.jpg and .gif

More Information About Website Design

How To Add a Link to an HTML Page:

Now lets add a link to the HTML page. Here is the HTML code for a link: 
<a href="webpage.html">Click here to go to web page</a>
Here is what the correct index.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>
text text text text text text text text text text text text text 
text text text text text text text text text text text text text
<table border=1>
<tr>
    <td>Text for the left column goes here</td>
    <td>Text for the right column goes here</td>
</tr>
</table>
<img src="image.gif">
<a href="webpage.html">Click here to go to web page</a>
</body>
</html>
You have just created your first website with 2 web pages, which are connected through a link from the index.html to the webpage.html.

A single HTML file is considered a web page, and many web pages linked together are considered a website, just to make sure I get the correct terminology across.

Now try to add a link to the file named website.html, which links back to index.html 
<a href="index.html">

What are Internal and External Links:

There are two different kinds of links, internal and external. An internal link means that the link points to a web page within your website. An external link (which usually starts with "http://") means that the link points to another website. Here is what this looks like in comparison:

Aligning Tables, Text and Images:

In this part of HTML Tutorial II, I will show you how to align tables and how to add table attributes like "left", "right" and "center" to specify text alignment. If no "align" attribute is specified, the text (or table) is left aligned by default. Lets go back to the index.html page. To move the table to the right side of the screen add the following command to the first line of code in your table:
align=right 
<table align="right" border="1">
<tr>
    <td>Text for the left column goes here</td>
    <td>Text for the right column goes here</td>
</tr>
</table>
You will see in your browse view that the table has moved to the right side. Now move the table to the center of the page:
align=center 
<table align="center" border="1">
<tr>
    <td>Text for the left column goes here</td>
    <td>Text for the right column goes here</td>
</tr>
</table>
The same code can be added to the inside of the table. For Example: To right align the text in the right column of the table add this attribute to the fourth line of your HTML code:
align=right 
<table align="center" border="1">
<tr>
    <td>Text for the left column goes here</td>
    <td align="right">Text for the right column goes here</td>
</tr>
</table>

How To Specify Width and Height of a Table:

To the first line of your table code add:
width="600" height="300"
(Width and Height are usually specified in pixels or percent. width="600", which is equal to 600 pixels on your computer screen. height="300", which is equal to 300 pixels on your screen. Width and height can also be specified in percent. For Example: width="50%" equals half of your available web page's width. (or column width) width="100%" equals 100% of your available width. 
<table width="600" height="300" border="1">
<tr>
    <td>Text for the left column goes here</td>
    <td align="right">Text for the right column goes here</td>
</tr>
</table>
View this table in your browse view now and you will be able to notice the right alignment of the text on the right side of the table.

How to Specify Background Colors:

To specify a background color for the entire web page add this code to the <body> tag:
bgcolor=red or
bgcolor=#FF0000 (this is the color code for red)
<BODY bgcolor="#FF0000">
Copy the above HTML code and replace it with the <body> tag in your index.html file. 
<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="#FF0000">
 text text text text text text text text
To change the background color of a table, or part of a table, add this string of code to the first line of your table (to set the table color to blue)
bgcolor=blue or
bgcolor=#0000FF (this is the color code for blue) 
<table width="600" height="300" border="1" bgcolor="#0000FF" >
<tr>
    <td>Text for the left column goes here</td>
    <td align="right">Text for the right column goes here</td>
</tr>
</table>
or, add the code to a specific column in the table to make only this specific column's background blue: 
<table width="600" height="300" border="1" >
<tr>
    <td>Text for the left column goes here</td>
    <td align="right" bgcolor="#0000FF" >Text for the right column goes here</td>
</tr>
</table>

How To Make an Image Appear As Background

Instead of writing bgcolor=FF0000 to specify a particular background color, you can specify an image to act as the background of your entire web site or for a particular table (or part of a table), just like a background color. To specify an image for your background add this code:
background=image.gif
For Example: 
<table width="600" height="300" border="1" background="image.gif">
<tr>
    <td>Text for the left column goes here</td>
    <td align="right" bgcolor="#0000FF" >Text for the right column goes here</td>
</tr>
</table>
To set an image as your entire web site's background replace the current <BODY> tag with this:
<BODY background="image.gif">

These are the most important basic HTML tags and syntaxes. Try out any combination of tags, tables, and attributes. Don't be shy. It's not like you could break anything!

In this tutorial you have learned how to create a basic web site with links connecting two or more pages, you know how to insert a graphic, image, or photo. You have learned how to make a table, how to align text within a table, and how to align the table itself.

These are basically the most important HTML commands you need to know in order to create a basic web site. Let your imagination go wild and try to create your own web site design. Or, visit HTML Tutorial III for more useful website design tips & tricks. HTML Hands-On Tutorial III focuses on the following issues:

More information about web design and search engine optimization. What you should know before you start your web site or internet presence.



© 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/htmltutorial2.php">
Webmaster Seminar</a><br />
HTML Tutorial for Beginners II

HTML Related Links:




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