HTML, The Basics and Clean Code!

Many speak of writing HTML code as programming, but in the strict sense it isn’t. HTML stands for Hypertext Markup Language. While HTML can be used to have a browser do many things, it doesn’t perform the types of tasks programming in C+ or some other form of programming language would. Once you begin adding Java into your web page HTML, then we are moving closer to programming, but that’s a whole other topic.

Many people, such as support technicians, sales people, inter-office personnel for example, who only a few short years ago couldn’t have cared less about HTML, now find themselves needing and wanting to learn how to use it. There are literally hundreds of books and Web sites dedicated to teaching you how to write HTML code, however for those of you new (or almost new) to the subject, Microsoft’s FrontPage will go a long way in helping you understand just what HTML code does. If you follow along with the basics we have provided here and then review the concepts of writing code in a specific format, you will find that not only will you be able to write and then read the code, but when the time comes to update that page you wrote a year ago, you’ll be able to read through the code quickly and updating will be a snap.

HTML basics

HTML is nothing but text and tags. The text is simple—to 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 (normally read “open HTML”) and end every document with (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:

	Open HTML
	Open HEAD
	End HEAD
	Open BODY
	End BODY
	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:

This is the title of my HTML document

Another good idea is to put comments in the HEAD section. You begin a comment 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? 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.) 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.

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)

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.

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: 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.

Title goes here

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 .

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 HTML—you have to know what tags or codes to use to format your text.

Let’s review some simple tags and their functionality. Table A shows some of the tags you’ll use most often.

Table A: Some common HTML tags

	bolds text
	italicizes text
	centers text on a page
	Another way to center
	Aligns text to left (default)
	Aligns text to the right
	Makes text “Heading 1”
	Makes text “Heading 2”
	Makes text “Heading 3”
	Makes text “Heading 4”
	Makes text “Heading 5”
	Makes text “Heading 6”

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.

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.

This is sample text. 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 .

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 browser won’t display one font in the group, it might display another. 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:

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.

Paragraphs and line breaks

You define paragraphs of text in HTML with the paragraph tag (

). 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.

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

Suppose you want to force a line break at a particular point in the text. To do so, you must use the break tag (
). Since
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.

this is a line of code

this is a line

this is a line

Figure A

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

What we’ve covered so far. Figure B shows what the Web page will look like when your browser displays the following HTML:

Title Goes Here

This title will be centered and use Heading 1.

This is my first paragraph. This one will be font size 2 and use a Verdana font. This sentence will be bold.

This is my second paragraph. This one will be in all blue. This sentence will be in italics.

This is my third paragraph.

But, I want this on a separate line.

Figure B:

This is my first paragraph. This one will be font size 2 and use a Verdana font. This sentence will be bold. This is my second paragraph. This one will be in all blue. This sentence will be in italics. This is my third paragraph. But, I want this on a separate line.

Uh Oh, Lists Lists make an attractive addition to a Web page. Fortunately, they are also easy to create. There are two types of lists in HTML—an ordered list (numbered) and an unordered list (bullets). The tag for an ordered list is

. The tag for an unordered list is
. 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
• and

like this:

1. list item 1
2. list item 2
3. list item 3

• list item 1
• list item 2
• list item 3

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:

this is what will appear in the browser window

An actual line of code might look like this:

Click here

Display Image

Of course, you can’t just put up a page of flat text and expect to impress your friends, family, and coworkers. You can display an image on your Web page by using this sample code:

In this case, img src stands for “image source.”

Here is what that code might look like:

• 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.

Display an image and link 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:

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

.

Scrolling marquee. You can place a non-JavaScript scrolling marquee board on your Web page by using the 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):

Type the message you wish to be displayed here.

HTML in the table

We’ve covered the basics of HTML formatting, now you should be able to design a Web page to suit your needs. There is, however, allot more to HTML than meets the eye. We have saved the best for last. Once you’ve mastered formatting techniques discussed here, 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.

How tables work

Here is the HTML that creates a simple table with two rows and three columns. I’ll discuss the tabs below.

This is text in column 1 row 1	This is text in column 2 row 1
This is text in column 1 row 2	This is text in column 2 row 2
This is text in column 1 row 3	This is text in column 2 row 3

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 and within that tab, define the columns. The sample code above will result in the table shown in Figure A.

Figure A

This is text in column 1 row 1 This is text in column 2 row 1 This is text in column 1 row 2 This is text in column 2 row 2 This is text in column 1 row 3 This is text in column 2 row 3

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 .

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 it—just 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 B.

and end the center tag before the

FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks!

FrontPage Rocks! FrontPage Rocks! FrontPage Rocks!

FrontPage Rocks! FrontPage Rocks! FrontPage Rocks!

FrontPage Rocks! FrontPage Rocks! FrontPage Rocks!

FrontPage Rocks! FrontPage Rocks! FrontPage Rocks!

FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks! FrontPage Rocks!

 

Tired of not having it your way when it comes to the links on your Web page? Well, if you are sick of the default blue links on your Web site, and you want to spruce things up a bit, the following tips will allow you to take control of your links.

By default, when you create a link to another Web page or site, it is blue and underlined, indicating that it is indeed a hyperlink. However, you aren’t locked into this default setting. You can use the power of HTML to make your Web page look just the way you want it to look. Let’s change the colors.

Let’s say you don’t mind that all of the links are blue, but you have one link that you would like to stand out, and you want to make it a red link, instead of the default blue.

Don’t fall for this red herring

It would seem to make sense just to place a font color tag in front of the link as it has been done here: Click here However, if you give this snippet of code a try, you will soon realize that it does not accomplish your goal at all.

Rather than placing the font color tag in front of the link, you must place it in front of the words that represent the link, as shown here.

Click here

Changing all your links

Let’s say you want to go a step further and make all of the links in the entire document red. You can add some extra code to your body tag to accomplish this task. By using link, alink, and vlink, you can define which colors your links are before they are clicked on (let’s make them green), while they are being clicked on (how about purple), and after the Web page has been visited (yellow—why not?). If you want to follow my psychedelic color scheme, then you would change your body tag to look like the code snippet below.

Have you ever wanted to put a little Français on your Web page? Perhaps you are interested in changing those dull bullets to some exciting characters to spruce up your site?

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. Therefore, we have to improvise when adding special characters to our Web sites.

Then how do you put a special character in your Web page? This will explain the basic character entity reference by using an 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:

Ä

I bet you never thought it would be this easy. But that’s just the tip of the iceberg. Here is a chart for most of the special characters for some of the most common languages.

Table 1

ä	ä		Ä	Ä
ë	ë		Ë	Ë
ï	ï		Ï	Ï
ö	ö		Ö	Ö
ü	ü		Ü	Ü
ß	ß
ç	ç		Ç	Ç
á	á		á	Á
é	é		é	É
í	í		Í	Í
ó	ó		Ó	Ó
ú	ú		Ú	Ú
ç	ç		Ç	Ç
ã	ã		Ã	Ã
õ	õ		Õ	Õ
ñ	ñ		Ñ	Ñ
¡	¡		¿	¿

A special character chart for common languages

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 B

°	°
±	±
²	²
µ	µ
1/4	¼
×	×
÷	÷
°	°

A mathematical symbol chart for mathematicians

By looking at the table above, you’ll notice that using ¼ creates the character 1/4. Wouldn’t it stand to reason that you could display 3/4 by using ¾? 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.”

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 C

›	›
“	»
†	†
‡	‡

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! 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.

Item 1

Item 2

Item 3

Now that you have the basics, it’s your turn! Here is a good place to start and find a more concise listing of these special characters: HTML 4.0 Entities.