Basic HTML Tutorial For Beginners

Creating web pages for the new
millennium.
The Internet is growing at an incredible pace, and we want everybody to be a part of
this growth. Basic HTML was created for the beginner to learn about designing web
pages from the ground up and for the advanced web designers that want to revise a
few HTML tricks.
This downloadable tutorial is designed to help you learn about HTML and web page
design. If you want to have more information about HTML, the DHTMLHub blog is
updated more often than this tutorial. I hope this free resource will help you satisfy
your 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 to
provide with the opportunity to learn HTML and web development for free. Feel free to
email me at support@dhtmlhub.com 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 Basic
HTML offers. However, no part of this file may be reproduced, decompiled, or edited,
in any form or by any means, without permission.

Creating web pages for for
beginners!
Home : Basics : 1) Your first HTML file
HTML stands for Hypertext Markup Language, the bare bones of the Internet. If you
truly 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 you
in designing web pages, but if you want to get the most out of HTML, basic knowledge
of 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 and
greater than symbols (ex <html> ). Most tags also have a closing tag that tells the
computer 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 the
beginning and end of each web page.
<head>
</html>
The heading area of a the page. The space between these two tags
is used for special commands that does not have any connection to
the 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 file
which 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 double
clicking on it or typing the location into the location bar on your web browser (ex c:my
documentssomething.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 the
actual HTML of a web page, open up a page in your browser and select VIEW | SOURCE
in Internet Explorer or VIEW | PAGE SOURCE in Netscape. Try it right now! Anything
you see on a site, you can "steal" to put on your own site, with a small amount of
knowledge.
NEXT: Learn more about editing HTML files.
< back to basics main page

beginners!
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:
<html>
<head>
</head>
<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 "Regular
Text" 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 use
commands to change the text in any way.
To put these two phrases on different lines, we need to use the <p> (paragraph
command).
<html>
<head>
</head>
<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 <p
align="center"> instead of <p>. Or you can right justify a paragraph by using <p
align="right">.
What if you do not want a space between the two lines, like using <p> does, you must
use the <br> (break) tag. Example:

<html>
<head>
</head>
<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 Text
Bold Text
These are just a few of the many tags used in HTML.
NEXT: Learn about adding color to your web pages.

beginners!
Home : Basics : 3) Adding Color
Adding colors to web pages is relatively simple. Each color has a six digit code assigned
to 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 starts
with 0 goes to 9 and then from A-F. This allows one digit to stand for 16 values instead
of just ten.
The first two numbers of the code is the amount of red. #FF0000 is red. The second two
numbers is the amount of green. #00FF00 is green. The last two numbers represents
the amount of blue. #0000FF is blue. Any combination of these codes can be used to
create any color. A list colors and their codes is found on the colors page in the
reference 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 a
visited link, for example, the color of visited links will be set by the browser looking at
the file.
An example of a page with blue background, white text and with red links. (we'll learn
more 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

beginners!
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 link
tag, <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 the
information following it. The </a> part of the link tells the browser to stop the link
continue with regular text. The link you just made should look something like the
following:
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 you
make, like the one we just made, will be relative. Relative pathnames point to files
based on their locations relative to the current file, while absolute pathnames point to
files based on their absolute location on the file system. We could make our link
absolute by changing it to
Link to <a href="c:my docspage2.html">page 2</a>.
This link will work on your computer but when you put it up on a site or try it on
another computer and the files are no longer on the c: in the "my docs" folder, it will
not 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 called
folder (and the folder directory is located in
the current directory)
href="folder/morefiles/file.html"
file.html is located in the more files
directory, which is located in the current
directory.
href="../file.html"
file.html is located in the directory one level
up 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 the
address 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:name@domain.com">here</a> to email me!
You can also use the <a> tag to create an anchor on a page. You can use an anchor link
to let a person click on your link to take you to a different place on the page, like the
top for example. The next example will have a link up on bottom of the page that will
move you to the top of the page when you click on it. (to make this work, you need
enough 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 to
the top of the page. You can put as many anchors on a page as you want, but you
should remember that your actual link should have # symbol in it (example: <a
href="#something">). But you do not need the # symbol in your actual anchor
(example <a name="something">).
NEXT: Using images

beginners!
Home : Basics : 5) Images
Images are probably the most fun part of web pages. You can put pictures of anything
on your web site, from photographs to animations. To have make good graphics for
your website, a good graphics program is a must. I recommend JASC Software's Paint
Shop Pro. You can "steal" pictures from other people's web sites, but without a good
graphics 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 about
the size of the graphic. Keep your graphics as small as possible. I do not recommend
having any graphics on a page that are more than 30KB unless the user chooses to see
it.
There are two main types of images on the web: JPG and GIF. These types of formats
are highly compressed, if you take a JPG file and save it as a BMP file, the size of the
file increases tremendously. JPG compresses photographs or large pictures best, while
GIF 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 the
picture as possible. You can do this by decreasing the size of the palette or decreasing
the number of colors from 256 to 16, for example. You can make these changes with a
good graphics editor.
Lastly, weather your image is a JPG or GIF, make sure the physical size (length and
hieght) of it is reasonable. You can change this by using a crop tool or resize tool in a
graphics program.
Now to the HTML side of images. Putting a image onto a page is relatively easy. <img
src="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 that
you do not have to define all of the attribute I have just defined. The code above will
give you the picture, person.jpg (in the same directory...remember relative/absolute
paths?). 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 the
picture (on most browsers). You can also have the browser put a border around the
picture, this is usually done when you use the picture as a link. To make this picture
into 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 table
with a background color (we'll talk about making tables later), the center of the circle is
clear.
Remember, this is just a crash course on HTML, to find out more about images, search
for 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.

beginners!
Home : Basics : 6) Text Appearance
There are many tags that have to do with changing the appearance of text. Here is a
list 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 (one
size bigger than what is already set).
Color sets the color of the font using
color codes. Face is the font used. The
font should be a standard font found
on most computers like Arial, Times
New Roman, Helvetica, Tahoma, or
Courier. You can list different fonts
for the computer to try until it finds
one that works. Example: <font
face="verdana, arial black, arial">
<BASEFONT size="2"
color="#FFFF00"
face="arial">
-
Sets the base (default font size, color,
and face for a page). However, often
this does not work for all text on a
page, 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: Underlined
text 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.

beginners!
Home : Basics : 7) Lists
HTML provides an easy way to create lists, ordered (numbered) or unordered (not
numbered). There are several other different kinds of lists, but we will cover only a
couple 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 individual
list items, <li>...</li>. Here is an example:
<ol>
<li>List item #1</li>
</ol>
This HTML should give you the following result when viewed in a browser:
1. List item #1
2. List item #2
3. List item #3
4. List item #4
The unordered list tag <ul>...</ul> is very similar, except the end result will have
"bullets" instead of numbers.
<ul>
</ul>
Will give you:
List item #1
List item #2
List item #3
List item #4
NEXT: Horizontal Rules

beginners!
Home : Basics : 8) Horizontal Rules
HTML also has a simple way of making a horizontal rules (or lines) to divide separate
parts 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 pixels
wide (<hr width="400">) or as a percent of the width of the
screen (<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.

beginners!
Home : Basics : 9) Tables
Tables are probably the most helpful tool in HTML when you are trying to change the
layout of a page or trying to make a page look exactly as you want it (which can be
very difficult). However, tables can be one of the most complicated parts of HTML, so
we'll start simple and get complex.
While we are using tables, remember that table can be any size, from the size of the
whole page, to just enough for a word to fit into it. Using tables effectively will allow
you 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 the
table. <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>
</tr> 
</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 without
being 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 table
cellspacing="..." Spacing between individual cells
cellpadding="..."
Spacing inside cells between data and the edge of the
cell
align="..." Sets alignment (left, right, center, justify)
bgcolor="..."
Sets background color of table (only works on some
browsers)
bordercolor="..." Sets the border color (only works on some browsers)
bordercolorlight="..."
Sets border highlight color (only works on some
browsers)
bordercolordark="..."
Sets the border shadow color (only works on some
browsers)
<TR> = Table Row
align="..."
Horizontally aligns the contents of the cells inside the
row (left, center, right, justify)
valign="..."
Vertically aligns the contents of the cells inside the row
(top, middle, bottom). Note: This does not work in
some browsers)
bgcolor="..."
Sets the background color of the row (only works on
some 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 to
understand. Lets say we want to make a table that looks like this:
Title
Left
A B
C D

The code for this table is as follows:
<table border="1">
<td colspan="3">Title</td>

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

<td>A</td> 
<td>B</td> 
</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 to
keep your HTML logically organized and pretty to make this work, or you will be easily
confused. 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 you
leave 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

beginners!
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 effect
your pages!
3. Organize you pages for quick scanning
1. Use headings
2. Use lists
3. 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 while
missing information on the pages between.
5. Check your spelling and grammar. Some free HTML editors have spell check built
in! If you use Notepad, make sure you double check your spelling.
6. Group related information. Use tables, graphics, or horizontal rules to split up
separate 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 information
18. Don't say "Under Construction." Every web page is always under construction.

beginners!
Home : Basics
This course of pages will teach you the basics of web design. No previous knowledge of
HTML 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 web
page.
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.

Basic HTML Tutorial For Beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to Basic HTML Tutorial For Beginners

Similar to Basic HTML Tutorial For Beginners (20)

Recently uploaded

Recently uploaded (20)

Basic HTML Tutorial For Beginners