HTML Help & Tutorials

Web Building Software

Now it is time to actually create the website. This is where you need to make some choices:

You can start from scratch and write html code, or use free template on this site. Maybe you just don't really care to learn HTML? Just download the zip file for the free HTML template you want to use for your site. Then add your own content and graphics inside the coding where indicated.

I would recommend using an free editor like CoffeeCup or KompoZer to edit the HTML templates, but you can use any program that can read .html files. I prefer to use Dreamweaver. That is what I use to maintain this website.

Using the Templates

1) Create a new folder on your PC and call it whatever you want.

2) Open the zip folder you just downloaded. This contains all the template files you need. Copy and paste all files inside into the folder you just created.

Leave the folder structure "as is". So inside your new folder, you should have an index.html file, a CSS folder (for most) and an images folder.

3) Open your HTML editor of choice. Feel free to use my free editor.

4) Use the "File", "Open" command and navigate to your new folder where the template files are stored.

5) Open the file named index.html

6) Now you can begin editing and customizing the template to your liking.

It is so easy to just select the right Web Builder and Hosting company right from the start and it will make your life so much easier. HostMonster will provide you with the tools necessary to create a great website.

HTML Tutorials

This HTML Tutorial is for beginners. It teaches you HTML from the ground up - starting with the basics. Coding HTML is actually quite easy - as this tutorial will show you.

HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web Consortium (W3C).

Here you will learn how to make a website with basic HTML codes.

Basics HTML

Before I get started, you should know that HTML code almost always uses beginning and ending tags. These tags surround the text that will be affected by the code.

For example, if you want to bold a portion of a sentence, then you would use <b> for the opening tag and </b> for the closing.

Let’s say you want to bold the word "Hy!" in the sentence below. Then your HTML code would look like this: <b>Hy!</b> My name is Ron.

The output would be: Hy! My name is Ron.

Only the word "Hy!" is bolded because the tags surround that word. If you wanted to bold the entire sentence, then you would have put the closure tag, </b>, after the word "Ron". Be sure to always include your closing tag because if you forget, your entire page will be affected by the tag.

Basic Text & Font Tags

1. New Paragraph: <p> Starts a new paragraph and creates a blank line between your new paragraph and the one above it. The closing tag is </p>, but is not mandatory.

2. Line Break: <br> This will break your text to the next line. Two <br> tags is equivalent to one <p> tag. There's no closing tag needed for this one.

3. Underline: <u> Closing tag is </u>

4. Italics: <i> Closing tag is </i>

5. Bold: <b> Closing tag is </b>

6. Changing font face: <font face="Arial">

7. Change font size: <font size="3">

8. Centering text: <center> Closing tag is </center>

9. Left aligning text: <p align="left"> Just use </p> for the closing tag and

Right aligning text: <p align="right"> Just use </p> for the closing tag

10. Change text color: <font color="red"> The ending for any font tag is </font>

If you want more colors, you can also use this codes .

HTML Elements

HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<p>I've created my first homepage!</p>
</body>
</html>

Explanation of the above code:

The <!DOCTYPE... > element tells the browser which version of HTML the document is using.

The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).

The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser's title bar (right at the very top of the browser).

The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.

The <p> tag declares a paragraph. This contains the body text.

Headings

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Results in this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Hiper Links

Hyperlinks are links that take you to another page or web site. You create them by using the code below:

<a href="http://youtube.com/">Broadcast Yourself</a>

This results in: Broadcast Yourself

Opens the URL in a new browser window:

<a href="http://youtube.com/" target="_blank">Broadcast Yourself.</a>

This results in: Broadcast Yourself

Email Links

You can create a hyperlink to an email address. To do this, use the mailto attribute in your anchor tag.

Example HTML Code:

<a href="mailto:info@website2beginners.com">Email me </a>

This results in: Email me

HTML Images

Once you have the image you want to use you can insert it into your web page.

Next you’ll need to do is upload the graphic to your web server. Your web hoster will either provide the environment for you to upload your images or you'll have to use an FTP program.

When you upload the graphic, make sure you pay attention to what folder you’re putting it into because that will affect how you write the HTML.

Let’s say you upload the graphic called "picture1.gif" to your "images" folder on your web server. The image folder is located inside your "root" directory.

Your HTML code will look like this:

Now let’s say you have uploaded the graphic to the "my picture" folder/directory that is located inside of the images folder then the code would appear as:

Creating a Clickable Image

Linking images is helpful if you have buttons or banners on your site and you want the visitor to be taken to another web page or site when they click on the image. To accomplish this, use the following code:

The first part of the code tells the browser which site to go to and the second part, of course, tells it where the image is located.

Setting Horizontal Line Width, Size and Color

To set the width of your line, simply add a "width" attribute. For example,
<hr width="250"> will create a line that is 250 pixels wide. See below...

You can also set the size of the line by inserting a value. So if you wanted a line that is 250 pixels wide and 6 pixels thick, you'd use the following code:

This will produce the line below:

Lastly, you can control the color of the line by inserting the color attribute:

HTML Meta Tags

Meta tags allow you to provide metadata about your HTML pages. This can be very useful for search engines and can assist the "findability" of the information on your website.

What is Metadata?

Metadata is information about, or that describes, other data or information.

If we relate this to a web page, if you think about it for a moment, you could probably come up with a lot more information about a web page than what you're actually displaying to the reader. For example, there could be a number of keywords that are related to the page. You could probably give the page a description. The page also has an author - right? All these could be examples of metadata.

Metadata on the Web

Metadata is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes:

Example HTML Code:

Description: <meta name="description" content="Contains info about meta tags" />

Keywords: <meta name="keywords" content="HTML, meta tags, metadata" />

Revision date (last time the document was updated):

Refresh the page every 10 seconds:

The above examples are some of the more common uses for the meta tag.

HTML Tables Tutorial

So now you've got some basics, let's make our webpage look nice with tables.

Tags you'll use for this lesson:

<table></table> The Table tag.

<tr></tr> The Row tag creates a row (or as many as you want) in a table

<td></td> The Cell tag divides the rows into "cells". The td stands for table data (the stuff you put in the cells...i.e. images and text). But lets just call them cells.

What is a table?

Tables are like boxes that hold text and graphics together on a webpage. Because the contents of a table is contained within cells, it makes aligning text and images possible. It also gives you greater control over the finished look of the page.

This is a table.

These areas are called "cells"	We can put text and/or graphics in cells.
See the border all round the table and between the cells? I set the "border" attribute to 1 pixel, so you can see what's going on. Oftentimes, you won't want borders showing.	Because text and graphics fit so nicely in these little boxes, everything is kept neat and tidy.

Now, let's make a table

Open up the file you made in the last lesson "first.html" or start a new one, and type the following text, just as you see it:

Save the file and once again, open it in a browser

It should look like this:

1st Cell	2nd Cell
3rd Cell	4th Cell

Notice that Tables start with the <table> tag and for every row, there's a <tr> tag, for every cell, a <td> tag.