Tag Structure | Text Tags | Paragraphs & Headings | Align | HRs | Common Problems
Anchors | Targets | Name/Bookmark | Link Colors
Images | Images That Link | BR with Image | Optimizing Graphics

How Does HTML Work?

Hypertext Markup Language -- HTML -- is the basic building block of the World Wide Web page; basically a Web document formatting language. It uses a pre-defined set of tags to format text, create hyperlinks to other places, and insert graphic images. When a web browser opens an HTML file, it displays the page based on the tags.
 

HTML files live on a Web server. Typically the Web server belongs to your Internet Service Provider (ISP) or your company -- whoever is hosting your pages. The Web server is hooked into the Internet and when people type in the URL of your page, they are actually calling the file from that Web server.
 

When someone requests an HTML page, the Web server sends one long unbroken string of ASCII text across the Internet to the reader's computer. The reader's browser turns the long string of text into a viewable page.
 

The browser displays only your text and the tags that it can understand. Any formatting, extra spaces, or unrecognizable characters that you put into your HTML file will be completely ignored by the browser. It turns anything it doesn't understand into a single spaceband.
 

It is important to know that HTML is evolving. New additions to HTML are addressing some of the layout control issues and adding new features. For example:

The browser manufacturers, however, are not completely consistent in their support of the newer standards such as CSS, JavaScript, and DHTML, so once you go beyond basic HTML you'll need to remember that your pages might not look exactly the same in all browsers.  Also, your pages could look different on different computers because of different resolutions, fonts not loaded, tags not supported by all browsers and plugins that might not be loaded.

Plug-ins are another way of adding additional functions to your pages. These applications let you incorporate additional features from other programs seamlessly within your HTML pages. Adobe's Acrobat, Macromedia's Shockware and Flash, Apple's QuickTime and QuickTime VR, and Real Audio's streaming audio player are all examples of ways you can extend your site beyond straight HTML to add graphic control, sound, video and other features -- but remember, not everyone on the Web has or can use these plug-ins.

Before you starting worrying about CSS and plug-ins and any of the other newer features, get a good handle on the basic HTML tags. If you understand them well, it will be much easier to understand the potential of the web and all of its technologies.

Important Notes:

HTML Tag Structure

You mark up your HTML pages using HTML tags. Each tag describes a certain type of element, such as a paragraph. Within each tag you can also set attributes for the element, such as aligning the paragraph to the center of the page.

The basic HTML tag has four parts:

1.      An opening delimiter, the < symbol. This tells the browser that it is encountering a tag.

2.      The tag name.

3.      One or more attributes (sometimes called "switches") that set variables for the tag.

4.      A closing delimiter, the > symbol. This marks the end of the tag.

A typical HTML tag might look something like this:

<p align=center>

In this example, the tag is the paragraph tag and the attribute align says that the paragraph will be centered. Notice that the tag starts with an opening delimiter and ends with a closing delimiter. The tag and attribute are separated with a single space.

Here are a few guidelines for using HTML tags:

<img src="logo.gif">

Starting Tags and Closing Tags

As HTML evolves, all tags are becoming containers that describe some portion of the page rather than tags that stand alone and simply insert an element into the page. As of this writing, we are in a transitional stage, but it is a good idea to start getting used to using tag sets -- one tag begins the container and the other ends it.

It might help to think of tags as creating a state that stays in effect until you turn off the tag. For example, the bold tag turns the text that follows it bold. The text stays bold until you enter a bold off tag. In most cases, the closing tag is exactly the same as the ending tag, except that it begins with a slash. For example, the following tags turn bold on and off. They bold tags are highlighted in color to make them stand out:

<b>Here's some text I want in bold</b>

Even paragraphs are containers. You begin a paragraph with a paragraph tag. Then, you type the text that makes up the paragraph. At the end of the paragraph, you enter a close paragraph tag, like this:

<p>
Once upon a time there was a frog who lived in a big blue pond. The frog was cursed with intelligence. It was a curse because instead of living like a frog and eating bugs from day to day and just being happy in his pond, he thought about the meaning of life. And he wasn't sure what it meant to be a frog.
</p>

We'll talk more about opening and closing tags as we introduce each of the specific tags.

HTML Basics: Basic Text Tags

Required Tags

Each HTML file needs a certain set of tags to define it as an HTML page that the browser will display.

This is what the basic page template looks like. Click on any of the three sections to learn more about those tags.

<html>
 

<head>
<title>Title of the Page</title>
</head>
 

<body>
Here's where the body content goes, the material that your readers see in their browser windows.
</body>
 

</html>
 

Note:  <br/> is a line break
 

Paragraph

In its simplest form, the paragraph tag tells the browser to display the text that follows it on a separate line, and to add extra space above it. So, this file:

<p>
Hello World!
</p>
<p>
How Are You?
</p>

displays like this in a web browser:

Hello World!

How Are You?

Make sure to end each paragraph with the end tag </p>. Everything between the start and end paragraph tags is the contents of that particular paragraph. Any attributes you specify in the paragraph apply to the entire paragraph between the open and close tags.

The most common paragraph attribute is align. You can align the paragraph in three ways:

1.      The default is left. If you don't use the align attribute the text automatically aligns to the left margin.

2.      align=right sends the text to the right margin.

3.      align=center centers the text across the page.

Headings

The heading tag tells the browser to display the text that follows it as the specified type of heading.

Heading Levels

There are six different levels of headings, from H1 to H6. In their default format, H1 is larger than H2; H2 is larger than H3, and so on. Some levels of heading are bold, some are not. The exact default size and attribute you see depends on your browser. In addition, people who use a feature called Cascading Style Sheets (CSS), a text attribute tag, or the font tag can change the way you see different levels of headings.

You'll always need to close the heading tag, with an end heading tag, </h1-6>

Here's an example of a heading tag in use. This is a heading level 4:

<h4>Hello World!</h4>
<p>
How Are You?
</p>

It displays like this in a web browser:

Hello World!

How Are You?

Here are samples of the six different level of headings. We have used CSS to define how some of the headings look. The way they actually appear may vary from browser to browser.

·         Head 1

·         Head 2

·          Head 3

·         Head 4

·         Head 5

·         Head 6

Align

The heading tag has one commonly-used attribute, align. Like the paragraph tag, you can align headings in three ways:

1.      The default is left. If you don't use the align switch, the text automatically aligns to the left margin.

2.      align=right sends the text to the right margin.

3.      align=center centers the text across the page.

You can also align page elements using the P tag or the DIV tag, as shown below:

Notes:  Tags to format text

<b>Some text</b> makes some text bold

<i>some text</i> makes some text italicized

<tt>some text</tt> makes some text monospaced, like a typewriter font

Text Tags

Basic HTML provides some rudimentary ways of changes the appearance of your text. As HTML matures, some of these tags are used less and less often. New methods, such as Cascading Style Sheets are beginning to replace them. But as you are first learning HTML theses tags provide you with a simple way to make small stylistic changes.

There are three sets of tags that let you make these changes. Click on the one you want to learn more about:

Horizontal Rules

The horizontal rule tag lets you insert a horizontal rule into your page.

The default rule is two pixels thick, stretches across the entire page, and is an outlined light grey. You can change this by using the tag's attributes: width, size, and noshade.

Width

You can specify width of the page the line should fill, either in pixels or as a percentage of the page (it is usually best to use a percentage, unless you have a specific reason for measuring pixels).

<hr width="100">

<hr width="50%">

Size

You can specify thickness of the rule in pixels with the size= attribute.

<hr width="50%" size="1">

<hr width="50%" size="15">

Noshade

You can specify that the rule be solid instead of having a grey outline by using the noshade attribute. This attribute doesn't have a value. If it is in, the rule is solid. If you leave it out, the rule is the default grey.

<hr width="50%" size="5" noshade>

Remember, when you are using rules, don't go overboard. Use them in logical places to visually separate information. Don't let them overpower your page or use so many of them that your poor readers are left wondering if they're reading a zebra or a Web page.

Common Problems

When you're first learning HTML -- even after you've been doing it for a while -- there are some easy-to-make mistakes.

Common Problem #1: Missing Delimiter

Ooops! That tag just isn't working. The first thing to check is: does it have both the opening (<) and closing (>) delimiter. It's easy to accidentally forget or delete one as you edit your page.

Common Problem #2: Missing Quotation Mark

Are things just disappearing from you page? Check to be sure that every place you've used an open quote in a tag, there is also a closing quote. If a browser doesn't find a close quote, it will think everything on the page is part of the tag attribute value rather than content to be displayed.

Common Problem #3: Missing End Tag

Suddenly you have some odd indents. Or all the text is bold. You probably entered an opening tag, but forgot to enter the ending tag.

Common Problem #4: Good Old Typos

The tag isn't working as you expected. Go back to your file and double check for old fashioned typos. It's almost embarrassing how often a <br> tag-typing finger can slip a little and create a <bf> tag instead. The browser just ignores that alien <bf> tag because it doesn't understand it.

This web site is for use of the Brazoswood Web Mastering classes.  If you have questions,  you may contact Pat Hubert. 

GIF Source: BestAnimations.com. "Dog animation." [online image] 9-15-1999. http://www.bestanimations.com/Animals/Mammals/Dogs/Dogs.html .