DWise1's "Quick-and-Dirty" Beginner's Guide to HTML

HARD HAT AREA

WATCH YOUR STEP

I wrote this in response to a number of questions I was getting from people who are curious about HTML. I'm sure that there are lots of "HTML for Dummies"-type of sites around, but I decided to go ahead and write my own. For one thing, If nothing else, it should be easier for them to follow than my trying to explain it without visual aids.
First things first:

DON'T PANIC!

This stuff really is simple and easy to get started in. I honestly believe that this is the easiest and cheapest way to do something creative on your computer. OK, so maybe drawing pictures in Paint is easier, but not by much.

It does not require any programming skill. All you are doing is telling the computer how you want to present your content.

It does not require any special software nor any extra cost. Your computer should already have everything that you need:

A text editor. Any old text editor. Every Windows and Linux system comes with at least a couple text editors. I don't know about Macs, but they should have at least have the SimpleText editor.
A web browser. Again every Windows and Linux system comes with at least one. Indeed, if you are reading this page, then you must have a web browser. And in the highly improbable case that you don't have one, then one can be downloaded for free off the Web.

It doesn't matter what kind of computer you use (within reason). Windows, Mac, Linux. As long as it can run a web browser and a text editor, you can develop HTML on it.

You don't have to be on-line to develop and view HTML files. Your browser can just as easily point your browser to files on your own computer as you can to files on a computer half-way across the world. Indeed, many software products provide their documentation as HTML files.
For that matter, some computers may come with web servers built in, such as the Apache server on Linux and Internet Information Services (IIS) on more recent versions of Windows (XP and later), with which you can set up your own "web site" on your computer. In both of the examples just cited, the server will have a webroot directory into which you copy your HTML files. This kind of set-up will be especially helpful when you graduate up to writing dynamic web pages by using Common Gateway Interface (CGI) techniques, active server pages (ASP), or the like.

Using a webserver on your own computer will allow you to set up an intranet site, a web site that can only be accessed within a local area network (LAN), but to post it on the Web you will need to go through a web hosting provider.
It used to be that many Internet Service Providers (ISPs) provided disk space on their server for you to post your web site at no extra charge, but many ISPs dropped that service; eg, AOL, where I had originally posted my site. But there are many sites that offer web hosting services and even domain name services. In some cases, web hosting is offered for free, but normally at the cost of their placing advertising banners and links on your web pages. At least if you pay for the service, you should be able to have some control over that.
I chose to use Go Daddy.com, with which I've been satisfied so far; the only caveat I would offer is that if you choose a lower monthly rate by committing to a full one or two years, then you will be charged for that entire period up front -- no problem for me, but be aware. And do feel free to shop around for a provider that satisfies your own particular needs. And, of course, this step only comes when you've decided that your site is ready for prime time.

Objective:

To present you with enough information to successfully start writing simple static web pages.
I only intend to give you enough information so that you can start writing web pages and so that you can read the source of somebody else's page and be able to recognize basically what you are looking at and to start to understand it.
I do not intend to:

Teach you different styles in which to layout your web pages or to organize your web site.
Give you the history of the Web or of HTML.
Discuss just what the differences are between different browsers.
Discuss how the HTTP protocol works or what specific steps the server and your browser go through to display a web page.
Cover dynamic HTML or cascading style sheets (CSS) or extensible markup language (XML).
Cover scripting languages, like JavaScript, VBScript, and PerlScript.
Cover Common Gateway Interface (CGI) programming.
Cover Java applets programming.
While these topics are needed for many of the gee-whiz effects that you see on other web pages, they still depend on your having a basic knowledge of HTML. It is that basic knowledge of HTML that I intend to give you. I am not trying to keep you from being able to run; I just want to help you learn to walk first. There are several sources available on those advanced topics, which you can start to use after you have a base of knowledge in basic HTML.

What HTML Is:

HTML is an acronym which stands for "Hyper-Text Mark-up Language". Hyper-text is a computer concept that the entire World-Wide Web and the help files of most Windows applications are based on.
Basically, hyper-text extends the notion of linear text -- eg, reading a book through from the first page to the last -- by linking related portions of text together so that you can move freely from portion to portion, determining your own path through the book instead of being forced along the path that the author had given you. We already use this method to some degree with textbooks: e.g., jumping to the glossary to look up an unfamiliar term and then returning to where we were, jumping from a math problem back to the example in the chapter, seeing a subject mentioned in the text then using the index to find that subject and quickly reading up on it before continuing with the original text, etc.
With hyper-text, the author can create all those links for you to use, but you are the one who decides which links to use and hence which path to take. With HTML's "anchors", you will link your pages together and to pages written by other web developers. Each link will be one of the myriad threads that form the "Web". HTML is the means by which web authors create those hyper-text links and so much more.
HTML consists of special commands called "tags" that you embed in the text file that contains your content, the information that you wish to present. These tags not only describe hyper-text links, but also special text formatting, uses of color, inclusion of graphics, sound, video, etc. Most tags also have special modifiers, called "attributes". The tags themselves are simple; the complexity only lies in the wide variety of different tags to choose from and all their attributes. However, most of the time you will only use a handful of the more common tags, most of which I list below (NOTE: this is an example of a hyper-text link, which sends you to another section on this same page).
Once HTML tags have been added to a text file, it is called an "HTML file". When a browser reads your HTML file, it uses those HTML tags to determine how to format and present your content and where to get any special objects from, such as graphics.
Your objective when you write an HTML file is to tell the browser how you want it to present your content. That's really all that you are doing.

Static HTML vs Dynamic HTML:

Normally, the pages that your browser gets from the server are static. That is to say that the entire content of page was written before-hand and will not change until that HTML file is replaced on the server. All a static web page does is present the same content to all users every time.
On the other hand, dynamic HTML pages interact with the users and change their content in response to the user's inputs. These pages use embedded scripts, usually written in JavaScript, or CGI programs, usually written in PERL, to dynamically create content and its associated HTML on-the-fly. The most familiar example of dynamic HTML is the visitor counter on most web pages. The second most familiar example is the pages of hits that Yahoo and other search engines present in response to your search string; in this case, the content that was created was the entire web page.
You will probably want to learn dynamic HTML eventually. However, the rule still applies that before you can create HTML dynamically, you need to know what that HTML does. Therefore, you still need to first learn static HTML.

Authoring By-Hand vs Using Authoring Tools:

Personally, I prefer writing a web page by hand instead of using an authoring tool. But then I am not doing this professionally.
If you write web pages professionally, you need to be able to produce professional-looking dynamic web pages quickly. As personally satisfying as it may be to carve away with hand tools, production work usually requires power tools. That is where DreamWeaver, HotDog, Flash, and the other authoring tools come into play. If you are going to work professionally at this, you will eventually need to learn to use authoring tools.
The basic problems I see with authoring tools are:

Even though these tools generate HTML files, they also isolate you from that HTML. You could work with them for years and never see HTML code -- a computer magazine cartoon showed a web designer lying on the floor in shock, a co-worker explaining to the others that his authoring tool had accidentally displayed the HTML code to him.
It is very rare for an automated code generator to produce efficient code. I have seen some of them, especially Word, throw in a lot of extra and totally unnecessary tags. It may not be enough to slow up downloads and processing noticably, but I find it aesthetically displeasing. And a fellow student who accessed my previous site did commment on how quickly the pages loaded.
Too often, you find that the tool won't quite let you do what you want to do and you find yourself having to work around the tool, which is rarely easy to do.

If you need to clean up an HTML file or the HTML that was generated doesn't quite do what you want it to do, then you will need to edit the HTML file and modify the code, also known as "tweaking" it. In order to do that, you need to be able to read and understand the HTML that has been generated. You still need to develop the basic skill of authoring HTML by hand.
So, in case I haven't beaten it to death already, you should start off coding HTML by hand in order to learn it and then graduate on to an authoring tool when you want to do serious web development work.

Recommended Development Tools & Methodology:

First, to write the HTML files, use whatever text editor you are most comfortable with, such as NotePad, WordPad, EDIT, vi, SimpleText, or a third-party editor. Just be sure that you can save the file as a text file with a file extension of either .html or .htm. In Windows, I would recommend WordPad over NotePad as being easier to work with; just be sure to save it as a text file instead of the default Word or RTF format. Also avoid saving it as Unicode.
There are a couple caveats:

NotePad often appends the ".txt" extension on the end of a new text file, so your "myfile.html" becomes "myfile.html.txt". To prevent this from happening, enclose the file name in double-quotes when you save it for the first time.

Do not use Word! Word will interpret the HTML and display it as a browser would, thus hiding the HTML from you. Then it will generate its own HTML code which can be quite messy. Furthermore, Word 2000 also generates XML code, with doubles the size of the HTML file.
If you really must use Word, then change the file name extension to ".txt" before you open it in Word. Save the file as a text file (".txt") and then change its extension to ".html" or ".htm".

Second, to view the resultant HTML file as a web page, load it into your favorite web browser. The two most common ways of doing this is:

In your file manager (eg, Windows Explorer), find the file and either double-click on it (assuming that its file extension is associated with the web browser) or right-click and choose Open With ....

or start up your browser and use its menu item or toolbar button for opening a file. There are so many browsers now that I'll leave it up to you how exactly to do that.

That's it. Nothing to it. For practice you might want to save a web page you find on-line (yes, every browser I've used let me do that) and then open it from your computer. The URL that the browser contains should be the filepath name on your computer; eg, on Windows it should start with "C:\" instead of with "http://". That's one quick way you can verify whether you're looking at a page on-line or locally.

Development Methodology:

Write the HTML file in the text editor and save it with a file extension of ".html" or ".htm".
Keep the editor open.

Load the HTML file into your browser and view it.

In the text editor, make some changes and save the file to disk.

In the browser, refresh/reload the local web page. Until you do this, the browser will still have the old page and you won't see your changes. This may seem like a no-brainer, but when I was first starting -- and it was a group exercise -- we didn't realize that and it came as a surprise.

Repeat Steps 3 and 4 as needed.

Part of what this method will do for you is that you will be able to see immediately what effect your changes have on how the page is displayed. Play with it! Get inventive! As you read about new tags and attributes and techniques, try them out! You can't break anything. Playing with it not only helps you learn, but it makes it fun!
Lastly, look for example HTML code in other pages. See what others are doing and learn from them. Every browser I've ever used has had a "View Source" (or some similiarly named) function which displays the "raw HTML" of the current HTML file. Don't let what you see frighten you; many authoring tools generate mountains of code jammed together in not-very-readable form. But as you learn basic HTML, you will start to pick out what they are doing. If you are looking for how a particular bit of formatting was done, search the source for the text you see next to what you're looking for. The browser usually opens the HTML source file in a text editor, so a search function is built-in. And if you save the HTML file from that editor, then you have a copy of the file saved on your local disk, almost as if you had saved it from the browser; the difference is that when you save it from the browser, then graphics files are also saved in a subdirectory, which does not happen when you save a "viewed source."

Basic General HTML Theory:

HTML is the means by which web authors format the page's content and create hyper-text links.

CAVEAT: There's no guarantee just exactly how your page will appear. Not all browsers interpret HTML exactly the same, so that different browsers may display your page differently.
Therefore, the general practice among professional web designers is to install several different browsers and even different versions of each browser in order to view the same web page on each one to make sure that it works. This becomes especially important when you use more advanced features, such as cascading style sheets (CSS -- a way to specify a standard look and layout to each page) and Javascript, because not every browser supports all features, nor in the exact same way.

HTML files are text files that contain HTML tags.

An HTML tag has the general format: <TAG_NAME ATTRIBUTES>. The "<>" enclosing an HTML tag are often refered to as "angle brackets".

Most, but not all, tags can have attributes which modify their effect. Most attributes have the general format: ATTRIBUTE="value" . The quotes around the value are not always required in all cases; you should experiment to find where they are needed. A tag can have more than one attribute and often does.

Most tags occur in pairs, which are used to bracket in the content that they affect. The first tag starts the tag's effect and the second tag ends it. The first tag is called the "start tag" or the "open tag" or the "begin tag", while the second tag is called the "stop tag" or the "close tag" or the "end tag." The format of the second tag is </TAG_NAME>. Only the first tag can contain attributes.

Some tags only occur alone. Some others may occur in pairs, but may also occur alone. These tend to be among the most common tags and will be noted below.

Tags can be "nested", in which a new tag-pair is placed within another tag-pair. For instance, to both bold and italicize some text, you would write: <B><I>the content</I></B> to get the content.
It is a good rule to close the inner tag before the outer tag, as I did above, and not something like: <B><I>the content</B></I>. Most browsers can handle such poor nesting, but some would not recognize that "italicize" had been turned off and it would mess up the rest of the page.

Tags and attributes are "case-insensitive". This means that it does not matter whether you write them in upper or lower case.

If a browser does not support a given tag or attribute, it will simply ignore it. Of course, this also applies to any tag or attribute that you misspell, so if you made a change that didn't seem to take, the first thing to check is whether you had misspelled it.

Colors may be specified in either one of two ways:

With a color name, like "white" or "red". There are about 140 different color names, of which 16 are defined in the HTML standard: aqua, black, blue, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, yellow, and white.
However, not all browsers support all color names and different PCs may display the same color name differently. A list of the color names may be found at HTML Color Names; the list also includes the color's RGB code (see immediately below) and a color swatch.
With a color value which specifies the RGB code, ie the amounts of red, green, and blue that constitute the color. The format is "#RRGGBB", in which "RR" is a two-digit hexadecimal value for the amount of red (00 to FF hex translates to 0 to 255 decimal) and similarly "GG" for the amount of green and "BB" for the amount of blue. Some examples are: #000000 = black, #FFFFFF = white, #FF0000 = red, #C0C0FF = light blue. Refer to the list given immediately above, HTML Color Names, for more examples. A more complete discussion of color values may be found at HTML Goodies: A Quick Color Explanation.

CAVEAT: Just as different browsers may format your HTML differently, different browsers and even different computers may display your colors differently. There's no guarantee just exactly how your page will appear.

You will undoubtedly find it easier to work with the color names at first, but you should at least understand the RGB code format so that you can read someone else's HTML and understand basically what is going on.

Special characters may be specified. They are called entities and include both symbol entities and character entities Their general format is &name; ; ie, it starts with an ampersand (&), ends with a semicolon (;), and contains a name. Entities are case-sensitive, which means that if you capitalize the name when you shouldn't, or don't when you should, the browser will not recognize it. Some examples are:   for a "non-blank space", é for é, ñ for ñ, ± for ±, ¿ for ¿.
A list of symbol entities can be found at HTML Symbol Entities Reference.
Instead of a name, the symbol's ASCII or Unicode value could be used, which is called its entity number. Using an entity number is required when there is no entity name; eg, most foreign alphabets, Chinese characters. The general format is the same as with the entity name, except it contains the number preceded by a number sign (#) instead of a name; ie, &#nnnn;. The number can be either in decimal or in hexadecimal; if in hex, then the number is also preceded by an 'x'; ie, &#xhhhh;. That reference linked to immediately above also contains the entity number for each symbol listed.
Symbol and character entities can be very useful, including for the display of math symbols, Greek letters used in science, and accented vowels and other letters peculiar to foreign languages (eg, German's ß, French's ç, Spanish's ñ). I have also made extensive use of the symbol entities < and > to display the tag "angle brackets", < and >, as well as the entity & in order to display the entities in this section -- you can use your browser's View Source feature to see how I did that. If I had used the actual symbols, then your browser would have interpreted them instead of displaying them.

The general structure of an HTML file is:
<HTML>
<HEAD>
The contents of the header. Contains useful information, but not actually displayed by the browser.
</HEAD>
<BODY>
The body of the page. The content that is displayed by the browser.
</BODY>
</HTML>

Note the nesting of the tag pairs.

You put comments into an HTML file by placing the commented-out text with two symbols:
 . The browser will ignore everything placed into a comment. You will see examples of comments in my index pages.

When displaying an HTML file, the browser will remove all leading and extra spaces, tabs, and newlines. The advantage for you is that you don't have to format the HTML file itself, just mark up the content with how you want the browser to display it; eg, you can break up long sentences or write each sentence on a separate line. The disadvantage is that a block of properly formatted text that you don't mark up with HTML will end up being displayed as a single run-on unreadable mess. Unless you enclose it with <PRE> tags, in which case its "previous" format is preserved and it gets displayed in a monospace font, such as Courier New; this tag is especially useful if you want to display a code listing.

HTML supports basically two kinds of graphic files: GIF and JPEG.

Resources (eg, HTML files, graphics files) are given by their Uniform Resource Locator (URL). Basically, a URL represents a file name in a directory on a server. If the server name is not given, then the browser assumes that the file is on the same server as the page. If the directory is also not given, then the browser assumes that the file is in the same directory as the page.

It is a good idea to give your web site a directory structure. For example, my programming site has only the home page on top and then a sockets directory for my pages on network programming with sockets, a web directory for pages on web programming, including this one you're reading now (look at the URL), and a misc directory for miscellaneous topics. Many web sites keep a special img for the site's graphics files and a cgi-bin for the site's CGI scripts. This help you to keep your site organized.
Also, as you develop your site on your computer, you can and should use that same directory structure locally. And use relative URL addressing in your links. For example, to link to the Web Programming home page from my Programming home page, I wrote:
        <a href="web/index.html">Web Programming</a>
which linked down into the web directory. While in that directory, the link to this page was:
        <a href="QnD_HTML.html">My "Quick-and-Dirty" Beginner's Guide to HTML</a>
which, by just giving the filename, told the web server that it was in the same directory. Then to return back up to the parent directory (without using the back-arrow), I wrote:
        <A HREF="../index.html">Return to DWise1's Programming Home Page</A>
That's basically how relative addressing is done.
You should also note that URLs use the "forward slash" (/) as UNIX does, instead of the "back slash" (\) as Windows/DOS does. Since the Internet and the Web were developed primarily on UNIX, this should come as no surprise. Just be sure you remember to use the "forward slash".

When you type in a URL that does not give the file name, but rather only consists of the domain name and maybe a directory path, then the web server will go to that directory (the top directory if none was given) and look for a HTML file that has one of the default names. These files are called index files because two very common names are index.html and index.htm. If you look at the URL when in my home page, you should see that I use index.html.
What happens when you don't make your home page an index file is that you then require your visitors to know that name and to type it in. Using an index file makes it easier for visitors and search engines to find your site. And if you don't want them to find your site, then why put one up?

The More Common Tags and their More Common Attributes

These are the more common tags. For a more complete list and more detailed explanations, there are many sources on-line, such as w3schools.com. This page is only intended to get you started. Use these other sites to learn even more.

Page Structure Tags:

These tags are used to lay out the entire HTML page and define its major sections.

<HTML> </HTML>

Tells the browser that this is an HTML file.
These tags are placed at the very beginning and at the very end of the file.

<HEAD> </HEAD>

Denotes the page header, which contains the page title and META tags used by the browser and by search engines.
The header is placed immediately after the <HTML> tag.

<TITLE> </TITLE>

This contains the page's title and is placed in the page header. When you see a page listed by a search engine, such as Google, this is the title that is listed. This title is not displayed on the web page itself, but will show up when you print the page.

<BODY> </BODY>

The body of the page which does get displayed by the browser.
The body is placed immediately after the page header. The </HTML> tag is placed immediately after the end of the body, which is marked by the </BODY> tag.
Attributes:

BGCOLOR -- the color that the background will be set to.
BACKGROUND -- the URL of the graphics file that will be displayed in the background.
BGPROPERTIES -- if set to "fixed", keeps the BACKGROUND graphic from scrolling.
LINK, ALINK, VLINK -- sets the color of the hyper-text links.
TEXT -- sets the color of the regular text.

HyperText Tags:

This tag is the workhorse that makes the World Wide Web a web. It is used to link to other pages on the web, both on its own site and on any other site available.

<A> </A>

Anchor (so named for historical reasons). These are the hyper-text link tags.
A link is normally indicated by a distinctive color, such as blue or magenta, and an underline. When the mouse cursor is placed over a link, it changes to a pointing hand.
Attributes:

HREF -- the URL or anchor-point to jump to when this link is taken. If jumping to an anchor-point specified by NAME, the name is preceded by a point sign (#) and must match the case of the NAME exactly.
NAME -- marks an "anchor-point" (ie, somewhere to HREF to) within the body of a document. Useful in defining a hyper-text table of contents in a long document, as well as to link another page to a specific place within the page; eg, Wikipedia's section on the history of hypertext at http://en.wikipedia.org/wiki/Hypertext#History, which is inside its article on hypertext.

Text Formatting Tags:

These tags are used to format the textual content of the page.

<BR>

Line Break. Indicates where to start a new line.
You really do have to tell the browser this. Without it, all the text in the document would be scrunched together in one big ugly messy paragraph.

<P> </P>

Paragraph. Can be used as a single tag.
Same as <BR>, except it adds an extra blank line.

<CENTER> </CENTER>

Centers the text between the left and right margins.

<BLOCKQUOTE> </BLOCKQUOTE>

This tag indents the block of text it encloses, thus visually setting apart a block of text, such as a quotation, from the rest of the context.
Each group of tag descriptions on this page was indented using <BLOCKQUOTE> </BLOCKQUOTE>.

<PRE> </PRE>

Preformatted. Preserves the preexisting formatting of the bracketed section of text, such as columns of numbers from a text file. Also changes the font to monospace (eg, Courier New) in order to preserve column alignment.
Can be used as a quick-and-dirty way to insert text into a web page.
Text formatting tags to underline, bold, or italisize letter may be used within a pre-formatted block.

<H1> through <H6> (e.g., <H1> </H1>)

Identifies a header, the title of a section in the document.
The number indicates relative text size of the header, with 1 be the largest and 6 the smallest.

<B> </B>

Displays the bracketed text in bold. Sometimes replaced by the <STRONG> tag.

<I> </I>

Displays the bracketed text in italics. Sometimes replaced by the <EMP> tag.

<U> </U>

Underlines the bracketed text.

<FONT> </FONT>

Changes the font that is being used to display the text.
Attributes:

FACE -- specifies the font to use. If that font is not installed on the client, then the browser will substitute one that it thinks will come close, which means that your page will be screwed up. Try not to use this one.
COLOR -- specifies the color of the text. Assign either a color name or color value.
SIZE -- set the font size to an absolute value from 1 to 7 (ascending) or relatively down to -2 or up +4:
eg, SIZE=+2 increases the font size up 2 levels from the document's default font size.

Non-textual Formatting Tags:

These tags are used to format and decorate the page by drawing horizontal lines and inserting graphics.

<HR>

Horizontal Rule. Used alone.
Draws a horizontal line. Useful for visually dividing sections of the document.

Attributes:

WIDTH -- sets the horizontal length of the line. The value is in pixels (eg, WIDTH=150) or percentage of the page width (eg, WIDTH="50%"). Note that you use quotation marks in one case and not in the other.
SIZE -- sets the vertical thickness of the line. The value is in pixels.
ALIGN -- positions the line to LEFT, CENTER, or RIGHT of the page.

<IMG>

Inserts a graphics image into the document. Used alone.
Attributes:

SRC -- the URL of the graphics file.
ALT -- text to be displayed if the browser fails to display the graphics file. As a service to your readers, it is highly advisable to use this attribute.
HEIGHT -- the height of the image in pixels. Allows a graphic to be resized or stretched.
WIDTH -- the width of the image in pixels. Allows a graphic to be resized or stretched.
ALIGN -- a fairly complex set of alignment options placing the graphic to the left, center or right of the page and aligned vertically to the text in a variety of manners.
VSPACE, HSPACE -- the number of pixels space between the image and the surrounding text, both vertically and horizontally.

An image may be inserted within an anchor and used as a hyperlink hot-spot; e.g.:
<A HREF="main.html"><IMG SRC="main_button.gif"></A>

List Tags:

These tags are used to create lists and outlines. They handle the numbering of the list items for you.

<LI> </LI>

List Item. Can be used as a single tag.
Indicates the next item in a list (see below). The close-LI tag, </LI>, is commonly not used except by authoring tools; the list item is understood to end at the beginning of the next list item or the end of the list itself.

<OL> </OL>

Ordered List. Creates a list of items which are numbered sequentially. Each list item is created with an <LI> tag. Slightly more advanced tag, yet very useful. The "Basic General HTML Theory" section above was done as an ordered list.
Attributes:

TYPE -- defines the type of enumerator, eg "1", "A", "a", "I", "i".
START -- sets the enumerator of the first item if the list doesn't start at 1.

<UL> </UL>

Unordered List. Creates a list of items which are indicated by a "bullet". Each list item is created with an <LI> tag. Slightly more advanced tag, yet very useful. The attribute lists in this section are examples of unordered lists.
Attributes:

TYPE -- defines the shape of the bullet as "disc", "circle", or "square".

<DL> </DL>

Definition List. Used primarily to build a glossary in which a "data term" is followed by a "data definition". Instead of using the list-item tag (<LI>), the definition list uses the data-term tag (<DT>) and the data-definition tag (<DD>).
This section is organized as a definition list.

<DT> </DT>

The data term of a definition list (see above). This item is aligned to the left margin of the display area (which could have been indented by another tag). The tags listed in this section are examples of data terms.

<DD> </DD>

The data definition of a definition list (see above). This item is indented to the right. The tag descriptions listed in this section are examples of data definitions.

More Common Advanced Tags You Should Know About:

I mention these more advanced tags because you will find it in other pages and you should at least recognize what they are.

<TABLE> </TABLE>

This tag and its associated tags enable you to present data in a tabular form in rows and columns. A row-column cell can contain practically any kind of content (eg, list, image, link, different background color, different fonts). Tables are also often used to lay out sections of web pages or even entire web pages. My "Hard Hat Area" header on this page was done as a table.
This subject is too advanced for this page, but should be the next HTML subject for you to study.
Actually, a table is a suite of tags working together, all enclosed within the <TABLE>-</TABLE> tag-pair. Each of those tags can have a wealth of attributes that affect the display of the table. The more common table tags are listed below for recognition purposes.
Associated Tags:

<TR> </TR> -- Table Row. Designates a new row in the table. Contains <TH> and/or <TD> tags.
<TH> </TH> -- Table Header. Special row-column cell displayed in bold to label a row or column.
<TD> </TD> -- Table Data. Contains the actual content of that row-column cell.

<APPLET>

Loads and runs a Java applet. Does not occur in pairs.
A Java applet is a special short program written in the Java language which is run within an HTML page.

<SCRIPT> </SCRIPT>

This tag contains interactive scripting code, such as JavaScript. The actual JavaScript code is placed within an HTML comment so that a browser that does not support scripting will not try to interpret it.

<NOSCRIPT> </NOSCRIPT>

This tag indicates the HTML that is to be used if the browser does not support a scripting language; eg, Javascript.

<META>

Only appears in the page header. Does not occur in pairs.
It supports an entire suite of functions, including keyword lists for search engines, page refresh rates, page redirection (automatically opening another page after so many seconds), and special effects (fade-in/out, display in a hole opening up in the center of the old page, etc). For more information, go to HTML <meta> Tag.

<FRAMESET> </FRAMESET>

If the site uses frames, this replaces the <BODY> tag with a definition of how the frames are laid out. Frames is an entire topic in itself.

<FRAME> </FRAME>

This tag is only found in a <FRAMESET> and defines an individual frame. Each frame then acts as a separate web page with its own document.

Return to Top of Page
Return to DWise1's Web Programming Page
Return to DWise1's Programming Home Page

Contact me.

Share and enjoy!

First uploaded on 2001 April 21.
Updated on 2011 July 18.