• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

About HTML

HTML evolved from a language called SGML (Standard Generalized Markup Language). In ye olden days of digital book and CD-ROM production, an editor used little pieces of SGML code called tags to mark, say, where the italics in a sentence started and stopped. Microsoft Word uses similar tags in its language RTF (Rich Text Format) to indicate the formatting the user creates with buttons and menus.

A tag generally has two parts: an opening and a closing (Figure 4.4). The stuff in between any pair of tags is what the tags modify, whether that's text, images, or other tags. Tags generally operate in pairs, like quotation marks and parentheses do, and they can be overlapped, or nested, just like multiple sets of quotation marks (Figure 4.5).

Figure 4.4. This text is enclosed by the two halves of a tag. The tag in this case is the <b> tag, which marks text as bold.

Figure 4.5. Notice that the tags envelop the text in order. The opening <i> tag is closest to the text, as is the closing </i> tag. The <b> tag envelops the <i> tag in the same way, and is called the parent tag for that reason.

For instance, you may have a sentence with a link in it. All the text, including the link, may be included in a paragraph tag. The paragraph may be in a table cell, which is in a table row, which is in a table (Figure 4.6). The table, and everything else on the page, is included in the basic tag structure of a page, which tells the Web browser that this is a bona fide Web page and where to go from there.

Figure 4.6. The highlighted tag is the <a> tag, which makes a link. The <a> tag includes an attribute, href, which means that it's a Web link, and a value (in quotation marks), which is the address of the Web site.

The browser reads all the tags on a page and then draws the page, filling in the contents and shaping the text based on what the tags have to say.

HTML is an easy language to learn because the tags it uses are self-explanatory for the most part (see Table 4.1 on page 108). P is for paragraph, B is for bold, I is for italic, IMG means image, and so on. Not all the tags are that transparent, but if you follow along using Dreamweaver's code tools as you modify your page, you can pick up quite a bit. (See the section Working with Code, later in this chapter, for more information).

Table 4.1. Common HTML tags
<TITLE>Page TitleDocumentY
<H1>, <H2>...<H7>HeadingsText BlockY
<P>ParagraphText BlockN
<BLOCKQUOTE>BlockquoteText BlockY
<CENTER>CenterText BlockY
<PRE>Preformatted TextText BlockY
<BR>Line BreakTextNever
<UL>Bulleted ListListY
<OL>Numbered ListListY
<LI>List ItemListN
<DL>Definition ListListY
<DD>, <DT>Definition ItemsListY
<IMG>[*]ImageImage PathsN
<TR>Table RowTableY
<TD>Table CellTableY
<INPUT>[*]Form FieldFormN
<SELECT>[*]Form MenuFormY

[*] Indicates tags that usually take attributes

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint