A Crash Course in HTML

A crash course in HTML
1
www.techrepublic.com

Introduction
So youre in charge of setting up a Web site. While this might sound simple, it isnt quite as easy as it
seems. In order to create a Web page, you need to know how to write HTML. If you arent able to do that,
your site will never get off the ground.
HTML, or Hyper Text Markup Language, is used to create a Web site. Among other things, it tells your
Web browser what text to display, what images will appear, and what color a table border should be as
well as dictating how everything is laid out. Without HTML, the Internet as we know it today would not
exist. The tricky part is that you have to create HTML with nothing but your brain and a text program, such
as Microsoft Notepad.
Feeling a bit anxious? Dont be! TechRepublic has brought together a compilation of articles by Jason
Smith titled A crash course in HTML. These articles will help you gain a better understanding of HTML,
its purpose, and how it works. After this crash course, and a little imagination, you just might be able to
create the Web page of your dreams!
Good luck!
2


In my article on writing cleaner HTML, I referred to coding hypertext markup language (HTML) as
programming. Several TechRepublic members wrote to say that HTML isn't a programming language, per
se. Strictly speaking, they're rightas its name implies, HTML is a markup language.

I also heard from many people in IT support who wanted to know how to learn to use HTML. Of course,
you can find hundreds of books and Web sites dedicated to HTML. But to help you get started, I decided
to put together this crash course on how HTML works. So pull up a seat, because class is about to begin.
The basics
HTML is nothing but text and tags. The text is simpleto create it, just type or paste it in. Tags, on the
other hand, are a different story. Unless you work with HTML code every day, you can't possibly have all
the tags memorized.

There are two main parts to an HTML document: the head and the body. In that sentence, I mentioned
three HTML tags: HTML, HEAD, and BODY. You must begin every HTML document with the tag <html>
(normally read "open HTML") and end every document with </html> (read "end HTML").

The process of creating an end tag is also known as closing the tag. In your HTML document, you must
also open and close head and body tags. The basic skeleton for an HTML file is as follows:

<html> Open HTML
<head> Open HEAD
</head> End HEAD
<body> Open BODY
</body> End BODY
</html> End HTML

The HEAD section of an HTML document allows you to title your document and include other pieces of
data, such as META tags and scripts (I'll save those for another lesson).

The title of your document will appear in the Title Bar of the browser window. To title your document,
simply place the title between the opening and closing TITLE tags, like this:

<title>This is the title of my HTML document</title>

Another good idea is to put comments in the HEAD section. You begin a comment by using <! --, and end
it by using -- >. Here's a sample comment:



Nothing between the comment tags will show up in the browser window, and you can place them
anywhere within the HTML document. Confused yet? I hope not. We're just getting warmed up.
The BODY section
The BODY section of an HTML document is where all the action occurs. Here is where you get to put
your HTML writing skills to the test. (Don't worry; the test won't be given until the end of the lesson.)
3

The BODY tag can consist of other keywords placed in the same tag. Such words, called parameters,
include BACKGROUND, BGCOLOR, TEXT, LINK, ALINK, and VLINK. These parameter names don't
leave much to the imagination when trying to figure out what they mean, which is one of the reasons why
HTML is so easy to understand.

The following sample should help you understand a basic open BODY tag.

<body bgcolor="#0099FF" text="#FFFF00" link="#FF0000" alink="#0000FF" vlink="#008000">

Here's what each of the components mean:
bgcolor="#0099FF" tells you that the background of the Web page will be blue
text="#FFFF00" lets you know the text of the Web page will be yellow
link="#FF0000" means that the links will be red before clicked on
alink="0000FF" indicates that the links will be blue when clicked on (the active link)
vlink="008000" means the links will be green after the HTML document that is referred to has
been visited (visited link)
I know, what a hideous color scheme. By altering these parameters, you can control the appearance of
specific elements of the Web page.

If you would like to leave these options to the defaults of the browser (in most cases gray for the
background, black for the text, and blue for the links), then all you need to do is open the BODY tag with
no parameters.

A word about hexadecimals
When you're defining the color of the background, a link, or a block of text, you can use basic word names for
colors, such as red, blue, green, or yellow. However, if you want to use a specific shade, you will have better luck
using the hexadecimal system of colors.

Adding a picture
If you would like a picture file as the background of your Web page, the BACKGROUND parameter
should be used. Here's an example:

<body background="background.gif">

This instruction will display the file background.gif as wallpaper for the Web page.
The HTML skeleton
Now let's take a new look at what our HTML skeleton looks like.

<html>
<head>
<title>Title goes here</title>
</head>
<body background="back.jpg" link="#FF0000" alink="#0000FF" vlink="#008000">
</body>
</html>
4

You'll notice that adding parameters to the open BODY tag does not dictate closing them. You do not
have to close parameters, only the first tag keyword, in this case </body>.
Getting down to the nitty-gritty
HTML provides a variety of tools that let you do nifty things to spruce up the text on a Web page. You
control the appearance of the text on a Web page in much the same way that you format text in a word
processing document. The difference is, of course, that there's no "bold" button in pure HTMLyou have
to know what tags or codes to use to format your text.

Let's review some simple tags and their functionality. Table 1 shows some of the tags you'll use most
often.
Table 1: Some common HTML tags
<b> bolds text </B>
<i> italicizes text </I>
<center> centers text on a page </center>
<p align="center"> Another way to center </p>
<p align="left"> Aligns text to left (default) </p>
<p align="right"> Aligns text to the right </p>
<h1> Makes text "Heading 1" </h1>

I didn't stop typing headings because my carpal tunnel was acting up; there are only six headings in
HTML. These styles are specifically used to make text stand out. You can create your own styles by using
the FONT tag.
Introducing the FONT tag
The FONT tag is probably the most versatile when it comes to altering the style of your text. Just like the
BODY tag, the FONT tag has a few parameters that can be used. Some of these parameters include
SIZE, COLOR, and FACE.

Let's say that you wanted your text to be big, blue, and in an Arial font. The following line of code would
produce such a result.

<font face="arial" size="5" color="blue">This is sample text.</font>

You'll need to remember a couple of important notes concerning the FONT tag. First, unlike the text
heading styles, with FONT, the larger the number, the larger the text is going to be. Again, you don't have
to close the parameters, only </font>.

In addition, not all browsers will be able to display all fonts that you want to use. For this reason, if you are
going to use font faces, you should use a group of fonts that are similar. This way, if the end user's
5

browser won't display one font in the group, it might display another. Based on recommendations by the
folks who make Dreamweaver, here are some of the "good" font face groups:
Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
You can group these fonts by separating them with a comma inside the tag:

<font face="Georgia, Times New Roman, Times, serif ">
Paragraphs and line breaks
You define paragraphs of text in HTML with the paragraph tag (<p>). Paragraphs will line-wrap according
to the size of the browser window. By default, a blank line will appear between paragraphs. So, if you set
up your HTML document with three paragraphs like the example below, a blank line will appear in
between each.

<p>This is paragraph 1.</p>

Suppose you want to force a line break at a particular point in the text. To do so, you must use the break
tag (<br>). Since <br> will cause the next line of text to move down to a new line, it's also a great way to
insert blank lines in your document.

Keep in mind that if you are using HTML's predefined heading styles, each heading tag also acts as a
paragraph tag. If you have three different lines of text, all in different heading styles, a blank line will
separate each of the lines of text.

For example, the following HTML commands result in the display shown in Figure A.

<h1>this is a line of code</h1>
<h2>this is a line</h2>
<h3>this is a line</h3>

Figure A

6

Closing a heading style has the same effect as closing a paragraph tag.

Putting it all together
Let's review what we've covered so far. Figure B shows what the Web page will look like when your
browser displays the following HTML:

<html>
<head>
<title>Title Goes Here</title>
</head>
<body bgcolor="white">
<center><h1>This title will be centered and use Heading 1.</h1></center>
<p><font face="verdana" size="2">This is my first paragraph. This one will be font size 2 and use a
Verdana font. <b>This sentence will be bold.</B></font></p>
<p><font color="blue">This is my second paragraph. This one will be in all blue. <i>This sentence will be
in italics.</I></font></p>
<p>This is my third paragraph.<br>
But, I want this on a separate line.</p>
</body>
</html>
Figure B

Here's what our sample HTML document looks like under Internet Explorer 4.

7

Tackling lists
Lists make an attractive addition to a Web page. Fortunately, they are also easy to create. There are two
types of lists in HTMLan ordered list (numbered) and an unordered list (bullets). The tag for an ordered
list is <ol>. The tag for an unordered list is <ul>. Between the point where you open the list and where you
end it, simply place the list items to be displayed in between the list item tags <li> and </li> like this:

<ol>
<li>list item 1</li>
</ol>

<ul>
</ul>
Linking to other pages
Of course, one thing you must know how to do is link to other Web sites. To link to another HTML
document or another Web site, you'd use something like this sample code:

<a href="this is where you place the URL or HTML file name"> this is what will appear in the browser
window</a>

An actual line of code might look like this:

<a href="page2.html">Click here</a>
Displaying an image
Of course, you can't just put up a page of flat text and expect to impress your friends, family, and co-
workers. You can display an image on your Web page by using this sample code:

<img src="Image file name goes here">

In this case, img src stands for "image source."

Here is what that code might look like:

<img src="pic1.gif" width="250" height="200">
Note: You can specify the exact height and width of the image. It is recommended, however, that
you alter the dimensions of the image in an image editor and exclude the width and height
parameters. Otherwise, the image might become distorted.
Displaying an image that links to another page
If you would like to be able to click on an image and have it take you to another HTML document or
another Web site, simply embed the image source tag inside the hyperlink tag like so:

<a href="page2.html"><img src="next.gif"></a>

8

Fun extras
Here are some additional tips for formatting your HTML document that are sure to come in handy.

Indented text or lists. You can indent an entire paragraph or list inward into the Web page by using the
blockquote tag <blockquote>.

Scrolling marquee. You can place a non-JavaScript scrolling marquee board on your Web page by
using the <marquee> tag. You can even alter the appearance of the text and the background color. The
following line of code would result in a marquee with a red background and yellow words (displayed in
bold):

<b><font color="yellow"><marquee bgcolor="red">Type the message you wish to be displayed
here.</marquee></font></b>
Putting your HTML on the table
Now that we've covered the basics of HTML formatting, you should be able to design a Web page to suit
your needs. However, there is a lot more to HTML than meets the eye. For this short lesson, I saved the
best for last. Once you've mastered formatting techniques discussed in this three-part series, you're ready
to tackle tables.

Tables can be used for a variety of different purposes. First and foremost, it is extremely easy to organize
charts using simple tables. You can also use tables to insert graphics with captions in convenient places
within your text. You can even design some very attractive layouts with the use of tables.

But, enough about what tables are good for (I'll leave that to your creative imagination), and on to how
tables work. Here is the HTML that creates a simple table with two rows and three columns. I'll discuss
the tabs below.

<table border="0">
<tr>
<td> This is text in column 1 row 1</td>
<td>This is text in column 2 row 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

9

Table anatomy
Each table consists of rows and columns. You must start coding the table by opening the table tag and
defining any parameters. In this example, the table has no border (the default border is 1, a visible, yet
thin border line). A table is defined primarily by using rows. You must open the table row tag <tr> and
within that tab, define the columns. The sample code above will result in the table shown in Figure C.

Figure C

Here's what our sample table looks like.

If you would like to change the style of the text within the table, you can open a font tag before you open
the table. If you would like to center the table horizontally on a Web page, open the center tag before
opening the table and close it afterwards. If you would like to center the information in the individual cells,
open the center tag after the <td> and end the center tag before the </td>.

In addition to centering tables horizontally, you can align the table to the right. Doing so makes it easy to
insert a graphic and text all along the side of itjust like in magazine page layouts. For example, the
following section of code placed within the body of an HTML document will result in the aesthetically
pleasing layout shown in Figure D.

<table border="0" align="right">
<tr>
<td><img src="me.jpg"></td>
</tr>
</table>
<p>Here is some sample text. Here is some sample text. Here is some sample text.
Here is some sample text. Here is some sample text. Here is some sample text.
</p>
<p>Here is some sample text. Here is some sample text. Here is some sample text.
</p>

10

Figure D

Here's our revised sample table with a picture of your HTML tutor!

Class dismissed
Once you've completed all three HTML 101 lessons, you're ready to take your test: Design a Web page
using the information that you have learned here. Fill it up with all the HTML you know. Doing so will help
you better understand how all the tags are supposed to be used. If you design a Web page up on the
Internet with the assistance of this article, please send me an e-mail with the URL in it. I'd love to see it!
11

Using special characters in HTML

Have you ever wanted to put a little Franais on your Web page? Perhaps you are interested in changing
those dull bullets to some exciting characters to spruce up your site? In this lesson, I will cover all that I
know about those special little characters in HTML, known as character entity references.
We'll start with some of the major languages
Do you know German, Spanish, French, or Italian? If so, you know that there are special characters that
are contained within each language's alphabet that do not make up part of the English language. Such
examples include the German umlaut, or the Spanish tilde.

There is a tilde key on your keyboard in the upper left-hand corner, under the [Esc] key. However, you
would be hard pressed to find the key anywhere near the home-row keys. So, we have to improvise
when adding special characters to our Web sites.
The dissection
So how can you put a special character in your Web page? I'll explain the basic character entity reference
by using this example:

ä

This little piece of code is all you need. When you type this small snippet of code into your HTML file, the
result will be an umlaut.

The ampersand (&) seen in the code above is a must. That is the clue to the HTML gods that the rest of
the text is code for a special character. You'll see that the letter following the ampersand is the letter "a."
This will be the letter we will perform the magic on. The characters located after the "a" represent what we
are doing to the letter. In this particular case, we are putting an umlaut (uml) over the "a" character. Now
to every beginning, there must be an end. This is where the semicolon comes into play. The semicolon
tells the gods that you are done with the special character and ready to move on to normal text.

Keeping that in mind, to place an umlaut over a capital "a," the code would be:

Ä

12

I bet you never thought it would be this easy. But that's just the tip of the iceberg. Table 2 features most
of the special characters for some of the most common languages.
Table 2
ä Ä
ë Ë
ï Ï
ö Ö
ü Ü
ß
ç Ç
á Á
é É
í Í
ó Ó
ú Ú
ç Ç
ã Ã
õ Õ
ñ Ñ
¡ ¿
A special character chart for common languages

IT person in math land
There is also hope for all of you mathematicians out there. There is a slew of mathematical symbols that
can be used in HTML, most of which I have never comprehended (save the simple buttons on my
calculator). If you are creating a Web page that contains some mathematical formulas, you might find that
some of these characters could come in handy.
Table 3
°
±
²
µ
¼
×
÷
°
A mathematical symbol chart for mathematicians
13

It's time to get creative. By looking at the table above, you'll notice that using &frac14 creates the
character 1/4. Wouldn't it stand to reason that you could display 3/4 by using &frac34? You bet it would! If
you play around with these entities a little bit, you might be surprised as to what you can and will discover.
After all, the light bulb was an invention of experimentation; just think of what you might come up with! As
one of my most memorable teachers once said, "The key to understanding is not memorization; it's
understanding."
Time for a little pop quiz!
All right, boys and girls, it's quiz time! See if you can figure out how to display the following samples. The
answers will be given at the end of the lesson.

1/23252=10
Alternatives to ordered and unordered lists
Although ordered and unordered lists do provide a more aesthetically pleasing look to your Web site, you
may not like the numbers or bullets that are supplied when you type up your lists. Here are some HTML
entities that you could use in place of the bulleted lists that you hold so dear to your heart.
Table 4
&rsaquo;
" »
&dagger;
&Dagger;
Above is a list of alternative characters than can be used in place of bullet lists.

If you don't like any of these, then create your own! That's right, what's stopping you? Simply create your
version of "the bullet" in MS Paint, Photoshop, or some other piece of artistic software, save the file as a
.jpg, and insert that image into your document every time you want a bullet to appear. Take a look at this
sample.

<img src="mybullet.jpg">Item 1<br>
Pop quiz solutions
Table 5
&Yuml;
1/2 ½
32 32°
52=10 5×2=10
Pop quiz solutions using special characters
14

Now it's your turn
I hope you enjoyed this HTML entity lesson; but keep in mind that the samples I provided for you here
aren't the only HTML character entities at your disposal. If there is a particular character you have in mind
that you would like to put on your Web page, I encourage you to search the Web for HTML character
entities until you find it. Here is a good place to start and find a more concise listing of these special
characters: HTML 4.0 Entities.

This document is provided for informational purposes only and TechRepublic makes no warranties, either expressed or
implied, in this document. Information in this document is subject to change without notice. The entire risk of the use or
the results of the use of this document remains with the user. The example companies, organizations, products, people
and events depicted herein are fictitious. No association with any real company, organization, product, person or event is
intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without
limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval
system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for
any purpose, without the express written permission of TechRepublic.
The names of actual companies and products mentioned herein may be the trademarks of their respective owners.

A Crash Course in HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A Crash Course in HTML

Uploaded by

Copyright:

Available Formats

A crash course in HTML

You might also like