Intermediate Dreamweaver

Basic HTML | Site management | Assets | Library of Page Elements| Find and Replace | Templates | Style Sheets | Forms | Imagemaps | Mouseovers | Flash buttons & text | Frames | Tables: Formatting & Sorting | Preview Browsers | Font Lists | Colors | Automating Tasks | Pasting in a Script

HTML for Dreamweaver Users

Because Dreamweaver is a WYSIWIG editor, creating basic webpages in Dreamweaver doesn't involve a lot of use of straight HTML unless you want it to. Even advanced features like frames and forms are comparatively simple to do. But to work with certain advanced features well, it's helpful to have a notion of HTML structure and elements.

Tags

HTML text is simply plain text with "markup" tags in it to tell the browser what to do with parts of the document. If you've ever used Wordperfect with "Reveal Codes" on, you can see what a marked-up document looks like.

Documents are marked up with tags. Tags are enclosed in angle brackets (< , >) to distinguish them from the text.
Most tags are paired -- that is, there is an opening tag and a closing tag, i.e., <X> Exed text </X>
As you can see, the closing tag is preceded by a slash (/).
A pair of tags and the material contained inside them is referred to as an element. (The example above is an X element.)
Tags can have attributes, which are inserted within the angle brackets of the tag:
<X ALIGN="center"> Exed text </X>
Tags do not have to be capitalized, but most people do in order to make reading the HTML easier.

Parts of an HTML document

The HTML document structure looks something like this: 
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
    <HEAD>
        <TITLE> [Title of document] </TITLE>
    </HEAD>
    <BODY>
        [The document itself]
    </BODY>
</HTML>
  • The doctype element tells the browser exactly what document type to expect.
  • The HTML element tells the browser that the enclosed elements are all HTML text.
  • Inside the HEAD element is the "header" information for the document.
    • The TITLE is the piece of text displayed by Netscape at the top of the screen. It does not appear in the text anywhere.
  • Everything that is part of the document and displays on the screen is part of the BODY element.

Logical and Physical Formatting Tags

Unless you put formatting tags into an HTML document, the browser will read your text as simply one long string of text, ignoring line breaks, tabs, multiple spaces, etc.

There are 4 formatting tags for creating parts to your document

Headings
<Hx> </Hx> where x is a number from 1 to 6: 1 is most important, 6 least. You may want to put the title of your page in heading tags.
Paragraphs
<P> </P>, which encloses a paragraph and includes a paragraph break/carriage return before it.
<P> tags can be used paired or unpaired.
Breaks
<BR> create a line break. This is an unpaired tag.
Horizontal Rule
<HR> creates a horizontal rule across the screen. An unpaired tag.

There are also text formatting tags. These come in two types-- logical, which describe the information in the element, and physical, which specify its appearance.
Logical Physical

Emphasis: <EM> </EM>
Strong: <STRONG> </STRONG>
BIG: <BIG> </BIG>
Small: <SMALL> </SMALL>
Citation: <CITE> </CITE>
Bold: <B> </B>
Italic: <I> </I>
Typewriter: <TT> </TT>

There are also tags to create lists.

  • Unordered lists are bullet lists.
    <UL>
    • <LI>
    • <LI>
    • <LI>
    </UL>
  • Ordered Lists are numbered lists
    <OL>
    1. <LI>
    2. <LI>
    3. <LI>
    </OL> are numbered lists.
  • Definition Lists are lists of terms with qualifying information or definitions underneath.
    <DL>
    <DT>
    <DD>
    <DT>
    <DD>
    </DL>

Links and Images

To create a link -- a piece of text or a graph that the user can click on to go to another document or part of a document, you use a hypertext anchor.
Hypertext anchors look like this:
<A HREF="URL"> Link Text </A>
The URL you use can be a full URL or partial URL, as long as it is a correct URL.

You can create a named anchor within an HTML document if you want to create a hypertext reference to it.
Named references look like this:
<A NAME="name"> Referenced Text </A>
You can create a link to such a named anchor by using a hypertext anchor:
<A HREF="URL#name"> Link Text </A> Such a combination might be used inside a page when a table of contents is desired.

To insert an image in a file, use an image tag.
Image tags are NOT paired tags, unlike hypertext anchors and named anchors.
Image tags look like this:
<IMG SRC="file.gif" ALT="Alternative Text">
The file must be a .GIF or .JPG formatted file (or it will not work).

For More Information:

In addition to regular properties of elements, elements can also have styles, either defined individually on a particular instance of the element, or globally throughout the document. CSS Styles does this.

August 4, 2003