AnOwnSite header

Learn HTML. Quick Beginners Tutorial.


This HTML Guide is compiled to make you learn HTML quickly. By no means it pretends to be complete or the best.
It's just a fast way to get familiar with this easy to learn language. If you want better, more complete and the latest versions of HTML tutorials, please perform a search in your favorite engine and look for "HTML tutorial".

HTML is the language to create web pages. HTML stands for Hyper Text Markup Language. It's not a program, it's just a simple language that allows you to place your text and graphics where YOU exactly want it and it allows you to specify HOW your text and graphics will look like.

You see, your webpage actually is flat text and all you need to do is enclose it by HTML coding for the markup.
You can see how this is done, by viewing the 'source' code of a page.
In your browser menu bar, click View then select 'Page Source' or 'Source'. You will then see the text of that page, surrounded by HTML coding.

If you do that right now, it may seem like garbage to you, but once you're done reading this page, you will better understand what's happening there.

Take a look at this page (opens a new window; close it when you're done).
Here's that same page WITH HTML coding.
BIG difference huh?
By the way (in geek terms abbreviated to BTW), read that page carefully, it contains valuable information.

To use this language, all you need is a text editor. That is a little program that handles flat text, like NotePad (which is probably installed at your PC), Note Tab Light, TextPad or something similar.
Do NOT use a word processor like Word or Office. Because these programs, similar to what HTML does for a web page, will markup the text you use. They add a lot of coding to do so and it's this coding that you don't want in your web pages.

So ... do NOT use a word processor, instead a simple text editor will do.

What I did to the sentence above is, I put an XHTML tag <strong> before the text 'do NOT use a word processor' and closed it with </strong>. That's what you need to do with a text editor.

Alternatively, there also are HTML-editors.
Programs, like Word, that handle your flat text, but have all the HTML-coding pre-defined in a menu or toolbar.
They make your HTML-life somewhat easier, as you don't have to type out all the HTML coding.
In the example above, all I had to do was highlight the text (left mous click and drag) and press the 'strong'-button. That inserted the resulting HTML automatically.

There are some great HTML editors available for free.
I've used Arachnophilia and ACE HTML, but there are more of them.

Get one, so you can use it in conjunction with this tutorial. Experiment!. That's where the real fun is!
Enjoy.


Introduction.
Every HTML-code is between 'tags', that is between < and >. Most codes begin with their name between tags and end with the same name preceded by a / (also between tags).

All XHTML coding must be done in lower case. Since it's wise to use XHTML, we have to tell the browsers that we do so.
Therefore, before anything else, we have to start our webpages with the following line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

All HTML pages have a certain structure that tells the browsers where the pages start and end. Therefore every HTML page has to begin with <html> and has to end with </html>.

Right after the <html> there's a header section that you have to start with <head> and end with </head>.

In between the <head>-statement you can define some 'Meta tags'. These are 'behind the scene' tags that are used by search engines to find out what your page is all about. The most important ones are:
The keyword tag has seem to have lost its importance, but I always use one. Maybe, some day, it will become important again.

Finally the HTML-structure must be completed by the <body>-statement, that tells the browser where the details of the page begins and ends.

So now we know the structure of every HTML-page . It goes like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Your short descriptive page title</TITLE>
<meta name="description" content="Your short page description">
<meta name=""keywords" content="your list of keywords">
</head>
<body>

<!--here you place all other HTML-statements-->

</body>
</html>

Text, Fonts, and Colors.
We can specify the way our text will look like in a seperate part of our webpage. It's called CSS and that stands for Cascading Style Sheets. It's is a mechanism to add style and lay-out (e.g. fonts, colors, spacing) to Web pages and here's a brief introduction to CSS.

Headers and Special Characters
You can also make headers with the command <hx> header </hx>, where x is a number from 1 to 6. This number defines the dimensions of the header. 1 is very big, 6 is small.
Examples:

This is a h3-header

And this one is h6
Mind you, a header always skips the next line. You can specify the header size and colors in your CSS.

Special characters , like >, <, " and & are typically used by HTML. If you want to use these kind of characters in your text, you must describe them as follows:
&lt; (= <); &gt; (= >), &amp; (= &) and &quot; (= ").
Other special characters are &ouml; (=ö), &ntilde; (=ñ), &copy; (=©) and &reg; =(®).

Styles .
The most common styles statements are:

Structures.
With structures you can make a perfect lay-out.

Links.
(Hyper)Links give you the opportunity to jump to other (parts of) pages or URL's (Uniform Resource Locators, just a fancy way to say web address). This statement gives you FREEDOM. It lets you refer to anything you want. It's what the hyperlinked structure of the Internet is based on. In fact, the name of this statement is Anchor (it begins with an A) and it can be used in 2 ways:

  1. To create an Ancor in a document. Define a (usefull) name with <a nam="name"></a> Try it. Click this LINK.
  2. Reference to another Anchor. This little sentence 'Reference to another Anchor' is loaded with POWER! That Anchor can be anywhere in the world! It can refer to a webpage or an Email address.
    The syntax (description) is:

    <a href ="address">descriptive text or picture</A>

    a href is Anchor Hyperlink REFerence. You always have to use this when making a link. 'address' is the addres of a web page or an Email address.
    A web address has the following composition:

    http://host/(path/page.htm(l))
    The host is the computer that has to handle this request for a hyperlink. If you are linking to, let's say, Yahoo, than http://www.yahoo.com would be sufficient. The request goes to the computer where Yahoo is on and searches in the home directory for a page with the name 'index.html' or 'default.html', which is the home page. However, if you want to make a link to some subdirectory, than you have to add the path and the page name you want to go to, for instance: http://www.yahoo.com/directory1/subdirectory1/page1.html. If you want to link to another page on your website, that you can leave the http://host out. The browser assumes, that you want to link to the current website.
    (Note: most web pages have an extension 'html'. You also see 'htm' which comes from older system versions when extensions were limited to 3 characters. If you see 'shtml', than you know you are on a secure server where your data is encrypted for safety reasons.)

    Now, if you want to link to an Email address, you type: mailto:emailaddress and give a valid Email address. That's easy right?

    The descriptive text can be any text you want. It will be underlined to show that it's clickable, but a lot of people miss that. So if you want people to click on it, you better make it descriptive. Instead of text you can also use a picture here (we'll talk about pictures in a moment). Because it's between the a and /a it will be clickable too. But you better make it a picture that explains itself, otherwise no one would ever click it.
    Some examples:
    <a href ="http://www.yahoo.com/">Click here to go to Yahoo</a> is a link to the home page of Yahoo.
    <a href ="mailto:info@anownsite.com?subject=thbk">Email Me</a> is a link to mail me a message.
    (Ah, these examples won't work. They're just examples. You better try to make a link yourself!)


Some tips:
Use your links careful and neat. Nothing is as disturbing as links all over the place. Keep your site well organized, not too cluttered.
Always remember this: if your visitor clicks on a link to another site, he/she is GONE! Internetters are FAST and see a lot of pages in one session. Do you think your visitor remembers you and returns? Now there's a little trick to overcome this problem. After "address" type a space and than target="_blank". This will open a new browser window for the link. After closing this window, your visitor is back on your site.
Always make a neat little row of links to other pages on your site. Your visitor will appreciate well organized sites. Make it look like:
[Home Page | About Us | Guestbook | Orderform] or something like that.
If you make an error (wrong address, typo or whatever), your link will not work. This is called 'a dead link'. Internetters HATE dead links. So you better test them before you expose them!

Graphics or Pictures.
Graphics or Pictures can be shown by using the following statement:

<img src="picname" (width="xx" height ="xx" align="place" border="no" alt="text")>.
All between parenthesis "()" is optional.

The parameters here are as follows:
As I wrote before, graphics is an industry on itself. You can make a business in graphics!
Grab some graphics from the links on the Resource page.
If you create pictures yourself, optimize them. If you don't know how to do that, than visit a Graphics Optimizer Site that you find on the Resource page.
If you do not know how to create pictures, just take your photo's to a copy or print shop and have them scanned. It won't cost you much. Remember the info I gave you here: resolution 72, jpg for lots of colors, gif for few colors, small file sizes and explain the dimensions.

Some other warnings here.
Do NOT overload your site with pictures. It's slows down the loading of your page. Use them carefully to enhance your message on your page.
Do NOT place big pictures on the top of your page, since it would take time to load. Better is to have some text on the top of you page, so the interested Internetter visiting your site has something to do while your pictures load.
If you want to show large pictures, you better give your visitor an option by first showing a small one and than say: click here to view enlarged picture. This way it's the choice of the visitor to wait while the big picture is loading.
If you use large pictures or a lot of them, place the following sentence on top of your page:
Please be patient while this page with beautiful pictures is loading.
That's all for now about pictures, folks.

Tables.
Tables give you a way of deviding your pages into separated parts.
<table> </table> defines a table.
<tr> </tr> defines a Table Row.
<td> </td> defines a Table Dolumn eh.... Column. (The D is for Data)
And you have to use them in this order!

Example:
<table>
<tr><td>Row1 Column1</td><td>Row1 Column2</td> </tr>
<tr><td>Row2 Column1</td><td>Row2 Column2</td> </tr>
</table>
will show like this:
Row1 Column1 Row1 Column2
Row2 Column1 Row2 Column2


There are several options you can include in the Table statement:

Another example:
<table border="1" cellspacing="20" cellpadding="10" align="center" width="50%">
<tr><td> see the spacing 1? </td> <td> see the spacing 2? </td> </tr>
<tr> <td> see the spacing 3? </td> <td> see the spacing 4? </td> </tr>
</table>
will show:

See the spacing 1? See the spacing 2?
See the spacing 3? See the spacing 4?


Forms.
Forms give you the possibility to interact with your visitors. They can fill out the fields you present and send them back to you. The Form statement creates a form in the document and is as follows:

<form action="action" method="post"></form>

Action here means the reference to a certain document, program or Email address. The browser will send the information to this reference. To keep it simple for this moment we use an Email address here, so action is "mailto:you@yoursite.com".
To get some information in this form, we need another statement: INPUT. This statement creates an entry box in which the user can enter data. Other elements of this statement are: Now, that's a lot of information all together. So let's look at an example that will explain a lot:

<form action="mailto:info@anownsite.com" method="post"><br>
your first name: <input name="firstname" type="text" size="10" maxlength="20"><br>
last name:<input name="lastname" type="text" size="15" maxlength="25"><br>
email address:<input name="email" type="text" size="10" maxlength="20"><p>
<input type="submit" value="send it!"> <input type="reset" value="start over"><br>
</form>

These statements will bring up the following in your document:
Your first name:
Last name:
Email address:



You will see, that if the length of the box is not sufficient, it will scroll on until you have reached the MAXLENGTH. If your visitor fills out these boxes and submits, than you will receive an Email that looks like this:

(Normal Email headers)
firstname=firstname user entered
lastname=lastname user entered
email=user's email address entered

So, this way you can catch visitor's data and that will be VERY important if you want to build a data base of prospects. It's called 'The List'. If you ever want to sell through the Internet, you better try these people on The List, because they have showed interest in your business.

Colors.
In some HTML statements you can use colors. However, in XHTML you specify all of your colors in CSS.
You can make any color with the colors Red, Green and Blue, in short RGB. To define a certain color, you have to use a RGB-code. How does this work?
In 'normal' life we use ten numbers to count, 0 to 9. This is called 'decimal system'. But in computer language we use 16 numbers, from 0 (zero) to 9 and than A, B, C, D, E and F and this is called 'hexadecimal (16) system'.
Every colorcode is a combination of hexadecimal values for red, green and blue in this order. Each of these colors has 2 digits from 00 (no color) to FF (maximum color). So:
The colorcode can also be a name, e.g. "black" or "blue", which is easier to use, but the disadvantage is that not all colors are defined by a name. Colors can be used almost everywhere. Specify them in your CSS file or, if you have to create an individual style, use style="color: colorcode;"

Use colors carefull. If you set a background color, choose a 'soft' one, so the eyes of the reader won't get tired looking at it, and make your fonts stand out to the background. The best colors still are white (or a slightly different one) for background and black for fonts.
Don't overload your pages with colors. Use them functionally and with care to emphasize certain parts of your text. Lots of colors on a page makes it hard to read.


Some general info.
Well, that's it for now. Please study these statements. It's easy to learn.
And than: experiment. This is the fun part. Get your editor and make a page, using these statements one by one. And experiment with each statement until you get a feeling to what they do. Take some ACTION and you wil be amazed how fast you will learn this simple language.

Again, this tutorial is meant to get you acqainted with the subject. It doesn't cover all options or even all statements. Use your browser to search your favorite engine for "HTML tutorial" and study them.
Here's a great XHTML 1.0 Reference Guide.

If you want to become an expert, you have to study all other statements and all options. If you just want to know how to build and maintain a page, the statements mentioned in this tutorial should be sufficient. However you may want to study their other options.

You can have your pages made by an expert. There are a lot of them on the Internet. You have to pay them for their work, but some of them are really good (no recommendations here) and some of them expose all the latest technical knowledge with all available tips and trics. But remember: keep it simple is the best way to build pages. If you let some one else build your pages, it will pay off to know what the statements are doing. You can easily make minor changes yourself instead of waiting for others to do the maintenance.

Using HTML to build pages requires discipline. You can easily forget to end a statement or an end tag. Than your page won't work right. You have to search your page to find the errors. Some good editors (Ace HTML) do that for you.



Enjoy!

(The message below was used to demonstrate the Anchor statement)



Hi there! Just before 'Hi' there's the following statement: <a name="bottom"></a>. And you got here, because you clicked LINK and were sent to this Anchor named 'bottom".
Want to go back to where you came from? There's an Anchor that says <a name="back"></a>. And if you click on this link, you will return to that Anchor. Try it NOW.


You are here:
Web Design - Click HERE to return to Web Design
affordable online strategies
Navigation
Internet Marketing Strategies Home
Make Money Online
Internet Marketing Strategies
Our Products
Product Reviews
Articles
How To Generate Web Site Traffic
Webmaster Resources
Partners
Your Local Business
Affordable Online Strategies Newsletter
About Case Stevens
Contact An Own Site

Subscribe to our newsfeed Subscribe to News Feed

Affordable Internet Marketing Blog

Internet Marketing News
Latest Google News
Latest reviews
Ultimate Guide To Spam And Anti-Spam Management
Inside the Media Mindset
Gmail, Google's free email service
Spyware Nightmare! (mini-course)
Software Products Reviews
MySpace Questions Answered
Affiliates
AnOwnSite Affiliate Program Sign Up
AnOwnSite Affiliate Log In