Basic HTML Tutorial For Beginners

Creating web pages for the newmillennium.

The Internet is growing at an incredible pace, and we want everybody to be a part ofthis growth. Basic HTML was created for the beginner to learn about designing webpages from the ground up and for the advanced web designers that want to revise afew HTML tricks.

This downloadable tutorial is designed to help you learn about HTML and web pagedesign. If you want to have more information about HTML, the DHTMLHub blog isupdated more often than this tutorial. I hope this free resource will help you satisfyyour basic web page needs.

Because these resources are free, I would appreciate any feedback (both good and bad)you have about Basic HTML. With this feedback I will continue to be motivated toprovide with the opportunity to learn HTML and web development for free. Feel free toemail me at [email protected] or visit the web site to send feedback from there.My main home website remains www.dhtmlextreme.net

I encourage everybody to tell people about this free web page design help that BasicHTML offers. However, no part of this file may be reproduced, decompiled, or edited,in any form or by any means, without permission.

http://dhtmlhub.com

mailto:[email protected]

http://dhtmlhub.com

http://www.dhtmlextreme.net

Creating web pages for forbeginners!

Home : Basics : 1) Your first HTML file

HTML stands for Hypertext Markup Language, the bare bones of the Internet. If youtruly want to understand web pages well, a basic understanding of HTML is a necessity.You can purchase programs like Microsoft Front Page or Netscape Composer to help youin designing web pages, but if you want to get the most out of HTML, basic knowledgeof it is required.

To make a web page, all you need is a text editor (like Notepad) and a little knowledge.HTML is a text file made up of 'Tags.' A tag is a command inside of less than andgreater than symbols (ex <html> ). Most tags also have a closing tag that tells thecomputer when to stop doing the command. Closing tags are written with a / in them.(ex </html> ).

Here are explanations of a few of the most basic HTML tags:

<html></html>

Defines the text file as being in HTML format. This is found on thebeginning and end of each web page.

<head></html>

The heading area of a the page. The space between these two tagsis used for special commands that does not have any connection tothe actual formatting of the page.

<title></title>

Defines the title displayed at the title bar of the browser window.

<body></body>

Found after the <head> tag and is used to define the area of the filewhich formats the way the web page is seen.

<b></b>

Makes text Bold

To make your first web page, open up Notepad and type in the following:

<html><head><title>My First Page</title></head>

<body>Regular Text <b>Bold Text</b></body></html>

Save this file as something.html (not something.txt). Next, open up the file by doubleclicking on it or typing the location into the location bar on your web browser (ex c:\mydocuments\something.html). Note the "My First Page" in the title bar of the screen.

You should see something like the following:

Regular Text Bold Text

Every web page has a HTML file like the one you just made that goes with it. To see theactual HTML of a web page, open up a page in your browser and select VIEW | SOURCEin Internet Explorer or VIEW | PAGE SOURCE in Netscape. Try it right now! Anythingyou see on a site, you can "steal" to put on your own site, with a small amount ofknowledge.

NEXT: Learn more about editing HTML files.

< back to basics main page


Home : Basics : 2) Editing HTML

Now, open your first HTML file in Notepad again. This time, add a couple returns after"Regular Text" so it looks like this:


<body>Regular Text

<b>Bold Text</b></body></html>

To a first time user, it would seem like now there should be a space between "RegularText" and "Bold Text" when you view this file in your browser. But this is not the case.Web browsers do not care how many spaces are in your HTML file, you must usecommands to change the text in any way.

To put these two phrases on different lines, we need to use the <p> (paragraphcommand).


<body><p>Regular Text</p> <p><b>Bold Text</b></p></body></html>

Now your web page will look as follows:

Regular Text

Bold Text

You can also make the paragraph be centered in the window by using <palign="center"> instead of <p>. Or you can right justify a paragraph by using <palign="right">.

What if you do not want a space between the two lines, like using <p> does, you mustuse the <br> (break) tag. Example:


<body><p align="center">Regular Text<br> <b>Bold Text</b></p></body></html>

This will give you a page that look like the following:

Regular TextBold Text

These are just a few of the many tags used in HTML.

NEXT: Learn about adding color to your web pages.



Home : Basics : 3) Adding Color

Adding colors to web pages is relatively simple. Each color has a six digit code assignedto it with a number sign in front of it. This code is the Hexadecimal (Hex) Triplet value.Instead of using a number system that goes from 0 to 9, Hex uses a system that startswith 0 goes to 9 and then from A-F. This allows one digit to stand for 16 values insteadof just ten.

The first two numbers of the code is the amount of red. #FF0000 is red. The second twonumbers is the amount of green. #00FF00 is green. The last two numbers representsthe amount of blue. #0000FF is blue. Any combination of these codes can be used tocreate any color. A list colors and their codes is found on the colors page in thereference area.

To change the default colors on the whole page, you need to change an attribute to the<body> tag. The following are some attributes you can have inside the body tag:

bgcolor="..." Sets the background color of the page.text="..." Sets the color of the text.link="..." Color of links.vlink="..." Visited link color.alink="..." Active link color.

Note that you do not have to define all of these attributes. If you do not set a color for avisited link, for example, the color of visited links will be set by the browser looking atthe file.

An example of a page with blue background, white text and with red links. (we'll learnmore about link tags next)

<html><head><title>My Colorful Page</title></head>

<body bgcolor="#0000FF" text="#FFFFFF" link="#FF0000"><p>Regular Text<br><a href="link.html">Link</a></p> </body></html>

Try it yourself!

NEXT: Making a Link



Home : Basics : 4) Creating Links

Making a link requires have two HTML pages. So make two and name them"page1.html" and "page2.html" (make sure you save them in the same folder). The linktag, <a> is often called an anchor tag, we'll talk more about anchors later.

In "page1.html" put the following someplace between your <body> and </body> tags.

Link to <a href="page2.html">page 2</a>.

The <a href="page2.html"> means to make a link to page2.html when you click on theinformation following it. The </a> part of the link tells the browser to stop the linkcontinue with regular text. The link you just made should look something like thefollowing:

Link to page 2.

Try it and see if the link goes to the other HTML file.

There are a couple different kinds of links, relative and absolute. Most of the links youmake, like the one we just made, will be relative. Relative pathnames point to filesbased on their locations relative to the current file, while absolute pathnames point tofiles based on their absolute location on the file system. We could make our linkabsolute by changing it to

Link to <a href="c:\my docs\page2.html">page 2</a>.

This link will work on your computer but when you put it up on a site or try it onanother computer and the files are no longer on the c: in the "my docs" folder, it willnot work. Here are a few examples of relative links:

href="file.html" file.html is in the current directory or folder.

href="folder/file.html"file.html is located in the directory calledfolder (and the folder directory is located inthe current directory)

href="folder/morefiles/file.html"file.html is located in the more filesdirectory, which is located in the currentdirectory.

href="../file.html"file.html is located in the directory one levelup from the current directory (a.k.a. the"parent" directory)file.html is located two directory levels up, in

href="../../files/file.html the directory files.

To link to another page on the web, not one on your site, you simply need to put theaddress for the site inside href="...".

A link to <a href="http://www.yahoo.com/">Yahoo!</a>

Or to make a link for someone to send you an email:

Click <a href="mailto:[email protected]">here</a> to email me!

You can also use the <a> tag to create an anchor on a page. You can use an anchor linkto let a person click on your link to take you to a different place on the page, like thetop for example. The next example will have a link up on bottom of the page that willmove you to the top of the page when you click on it. (to make this work, you needenough information on your page to fill up at least one screen).

<html><head><title>Anchors</title></head>

<body>

<a name="top">

<p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <p>Paragraph 6</p> <p>Paragraph 7</p>

<a href="#top">To top</a>

</body></html>

I put an anchor on the top of this page so when you click on this link, it will take you tothe top of the page. You can put as many anchors on a page as you want, but youshould remember that your actual link should have # symbol in it (example: <ahref="#something">). But you do not need the # symbol in your actual anchor(example <a name="something">).

NEXT: Using images



Home : Basics : 5) Images

Images are probably the most fun part of web pages. You can put pictures of anythingon your web site, from photographs to animations. To have make good graphics foryour website, a good graphics program is a must. I recommend JASC Software's PaintShop Pro. You can "steal" pictures from other people's web sites, but without a goodgraphics program, you can not customize the graphics to make your site personalized.Window's Paint will get you nowhere and Microsoft Photo Editor isn't much better.

When considering what images you should put up on your site, you must think aboutthe size of the graphic. Keep your graphics as small as possible. I do not recommendhaving any graphics on a page that are more than 30KB unless the user chooses to seeit.

There are two main types of images on the web: JPG and GIF. These types of formatsare highly compressed, if you take a JPG file and save it as a BMP file, the size of thefile increases tremendously. JPG compresses photographs or large pictures best, whileGIF is good for small pictures with a few colors, transparency or animations.

When you work with GIF files, make sure you have the least number of colors in thepicture as possible. You can do this by decreasing the size of the palette or decreasingthe number of colors from 256 to 16, for example. You can make these changes with agood graphics editor.

Lastly, weather your image is a JPG or GIF, make sure the physical size (length andhieght) of it is reasonable. You can change this by using a crop tool or resize tool in agraphics program.

Now to the HTML side of images. Putting a image onto a page is relatively easy. <imgsrc="person.jpg" width="50" height="50" border="0" alt="Person" align="left">

Will give you this:

Note that when you use align left, the text "wraps" around the picture. Remember thatyou do not have to define all of the attribute I have just defined. The code above willgive you the picture, person.jpg (in the same directory...remember relative/absolutepaths?). The picture will be 50 pixels tall and wide. While the picture is loading the word"Person" will show up. The word "Person" will also show up if rest your mouse over thepicture (on most browsers). You can also have the browser put a border around thepicture, this is usually done when you use the picture as a link. To make this pictureinto a link, just put the picture inside the link code: <a href="somefile.html"><img src="person.jpg" width="50" height="50" border="1" alt="Person"></a>

Here is an example of a transparent GIF image:

You can tell the center of the circle is transparent because when you put it into a tablewith a background color (we'll talk about making tables later), the center of the circle isclear.

Remember, this is just a crash course on HTML, to find out more about images, searchfor some help on the web, or just practice. HTML just takes a little practice everyday.There are countless "quirks" in HTML that just take time and experience to learn about.

NEXT: Text attributes.



Home : Basics : 6) Text Appearance

There are many tags that have to do with changing the appearance of text. Here is alist of the tags, a example of what they look like, and an explanation of what it does.

<FONT size="2"color="#FFFF00"face="arial">...</font>

Example

Changes the size, color, and face(font). Size can be a number from 1 -7 or a relative number like +1 (onesize bigger than what is already set).Color sets the color of the font usingcolor codes. Face is the font used. Thefont should be a standard font foundon most computers like Arial, TimesNew Roman, Helvetica, Tahoma, orCourier. You can list different fontsfor the computer to try until it findsone that works. Example: <fontface="verdana, arial black, arial">

<BASEFONT size="2"color="#FFFF00"face="arial">

-

Sets the base (default font size, color,and face for a page). However, oftenthis does not work for all text on apage, for example, text in a table(which we'll cover later).

<BIG>...</BIG> Example Makes text big<SMALL>...</SMALL> Example Makes text small<B>...</b> Example Bold text<I>...</I> Example Italicized text<S>...</S> Example Strikethrough text<STRIKE>...</STRIKE> Example Strikethrough text

<U>...</U> Example Underlined text. Warning: Underlinedtext is easily confused with a link!

<TT>...</TT> Example Teletype (or monospaced) text

<H1>...</H1> Heading #1

Example

<H2>...</H2> Heading #2

Example

<H3>...</H3> Example Heading #3




Try some of these text attributes for yourself!

NEXT: Making a List and checking it twice.



Home : Basics : 7) Lists

HTML provides an easy way to create lists, ordered (numbered) or unordered (notnumbered). There are several other different kinds of lists, but we will cover only acouple of them that will be able to be used for most of anybody's needs.

The ordered list tag is <ol>...</ol>. Inside these tags, you must define the individuallist items, <li>...</li>. Here is an example:

<ol><li>List item #1</li><li>List item #2</li><li>List item #3</li><li>List item #4</li></ol>

This HTML should give you the following result when viewed in a browser:

1. List item #12. List item #23. List item #34. List item #4

The unordered list tag <ul>...</ul> is very similar, except the end result will have"bullets" instead of numbers.

<ul><li>List item #1</li><li>List item #2</li><li>List item #3</li><li>List item #4</li></ul>

Will give you:

List item #1List item #2List item #3List item #4

NEXT: Horizontal Rules



Home : Basics : 8) Horizontal Rules

HTML also has a simple way of making a horizontal rules (or lines) to divide separateparts of a page up. Horizontal Rule <hr> has several attributes which you can define:

align="..." Changes the alignment of the rule. It can be left, right, or center.size="..." The size or height of the rule.

width="..."The width of the rule. This can be written as the number of pixelswide (<hr width="400">) or as a percent of the width of thescreen (<hr width="75%">).

color="..." The color of the rule (this only works with Internet Explorer).

<hr align="center" size="5" width="80%">

Will give you a horizontal rule as follows:

NEXT: The most useful HTML command, the table.



Home : Basics : 9) Tables

Tables are probably the most helpful tool in HTML when you are trying to change thelayout of a page or trying to make a page look exactly as you want it (which can bevery difficult). However, tables can be one of the most complicated parts of HTML, sowe'll start simple and get complex.

While we are using tables, remember that table can be any size, from the size of thewhole page, to just enough for a word to fit into it. Using tables effectively will allowyou to be able to put things exactly where you want them.

<table>...</table> is the basic table tag. <tr>...</tr> is used to set a row in thetable. <td>...</td> is used to define the data inside each cell from left to right. (note:the tag  is a comment and is not shown when viewed through a browser.)

<table border="1">

<tr> <td>Cell 1, Row 1</td><td>Cell 2, Row 1</td><td>Cell 3, Row 1</td></tr> 

<tr> <td>Cell 1, Row 2</td><td>Cell 2, Row 2</td><td>Cell 3, Row 2</td></tr> 

</table>

You should get the following table:

Cell 1, Row 1 Cell 2, Row 1 Cell 3, Row 1

Cell 1, Row 2 Cell 2, Row 2 Cell 3, Row 2

Setting the border to 0 is a great way to use tables to format text and pictures withoutbeing noticeable.

Here are some of the attributes that work with these tags:

<TABLE>

width="..."Width of the table, either in percent (ex. 90%) or

pixels (ex. 500)border="..." Width in pixels of a border around the tablecellspacing="..." Spacing between individual cells

cellpadding="..." Spacing inside cells between data and the edge of thecell

align="..." Sets alignment (left, right, center, justify)

bgcolor="..." Sets background color of table (only works on somebrowsers)

bordercolor="..." Sets the border color (only works on some browsers)

bordercolorlight="..." Sets border highlight color (only works on somebrowsers)

bordercolordark="..." Sets the border shadow color (only works on somebrowsers)

<TR> = Table Row

align="..." Horizontally aligns the contents of the cells inside therow (left, center, right, justify)

valign="..."Vertically aligns the contents of the cells inside the row(top, middle, bottom). Note: This does not work insome browsers)

bgcolor="..." Sets the background color of the row (only works onsome browsers)

<TD> = Table Data (cell)

rowspan="..." The number of rows spanned by a cell.colspan="..." The number of columns spanned by a cell.

align="..." Horizontally aligns the contents of the cell (left, center,right, justify)

valign="..." Vertically aligns the contents of the cell (top, middle,bottom). Note: This does not work in some browsers)

Rowspan and colspan are complicated but useful tools which are important tounderstand. Lets say we want to make a table that looks like this:

Title

LeftA B

C D

The code for this table is as follows:

<table border="1">

<tr> <td colspan="3">Title</td></tr> 

<tr> <td rowspan="2">Left</td><td>A</td> <td>B</td> </tr> 

<tr> <td>C</td> <td>D</td> </tr> 

</table>

You can make this table even more complicated by adding in background colors,alignments, and widths.

Like many things with HTML, you can embed tales inside of each other! You have tokeep your HTML logically organized and pretty to make this work, or you will be easilyconfused. Here is an example of the tables and then the code: (Note: Here I use . This stands for nothing. :-) Literally nothing, or a non breaking space. If youleave a cell blank don't use you might get undesired results! Try it yourself.)

<table width="75%" border="4" cellspacing="0"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td>

<table align="center" width="90%" border="1" bordercolor="#FF00FF"> <tr> <td> </td> <td> </td> </tr> <tr>

<td> </td> <td> </td> </tr> </table>

</td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table>

Note that the inside table has a width of 90% but does not take up 90% of the screen.The inside table uses 90% of the space it has available, not total space of the screen.Remember that you can put anything inside a table, text, pictures, or links.

NEXT: Do's and don'ts of web design



Home : Basics : 10) Do's and Dont's

1. Think about tags before you use them, some tags only work in some browsers.2. Look at your pages on different computers with different browsers. You might be

surprised at the differences browsers, operating systems, and screen sizes effectyour pages!

3. Organize you pages for quick scanning1. Use headings2. Use lists3. Make a menu with all the links on one place

4. Important information should stand out!5. But don't use too much emphasis, people won't know where to look

4. Make each page be independent. People might jump to a specific page whilemissing information on the pages between.

5. Check your spelling and grammar. Some free HTML editors have spell check builtin! If you use Notepad, make sure you double check your spelling.

6. Group related information. Use tables, graphics, or horizontal rules to split upseparate areas on a page.

7. Be consistent. This will create a general "feel" for your site.8. Describe links when possible.9. Don't use too many links in your text, it gets distracting.

10. Think about your links before you make them. Is it useful?11. Avoid using phrases like: click this link or click here.12. Don't use too many images, these pages take a long time to load. Also, keep

images as small as possible.13. Use the same image twice when possible, the computer doesn't have to download

it each time you use it, it keeps recent images close by.14. Always use the ALT attribute of <img> in case someone has pictures turned off, or

doesn't have time to wait for the page to load.15. Be cautious with backgrounds and colored text. Everything should be easily

readable.16. Each page should have a link back to your home page in case someone gets "lost."17. Each page should also have a standard signature on the bottom of each page. This

can provide contact or copyright information18. Don't say "Under Construction." Every web page is always under construction.



Home : Basics

This course of pages will teach you the basics of web design. No previous knowledge ofHTML or web design is required. Remember that HTML is really learned by practice,always try to practice everything you learn. There are only a few basic examples here,but with practice, you should be able to combine all of these skills to create a good webpage.

1) Your first HTML file - Learn the foundation of HTML and make your first web page.

2) Editing HTML - More information about how HTML works.

3) Adding Color - Add some color to your page.

4) Creating Links - Make a link to another page.

5) Images - Add graphics to your page.

6) Text Appearance - Using fonts, bold, italics, etc.

7) Lists - Make lists easily.

8) Horizontal Rules - Learn to make dividers between different sections.

9) Tables - The most useful HTML command.

10) Do's and Don'ts - Learn good habits when designing pages.

Technology

Basic HTML Tutorial For Beginners