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

Chapter 4. Editing HTML > Learning HTML

Learning HTML

The best way to learn about Web pages is to view the source of pages on the Web that you like. You can save the page and open it in Dreamweaver to learn more. From your browser's menu bar, select View > Source, and you'll get a text window that shows you what's going on behind the scenes (Figure 4.7).

Figure 4.7. Viewing the source of a Web page reveals the code behind it. From your browser's menu bar, select View > Page Source (or its equivalent command). To save the page for use in Dreamweaver, from the page source's menu bar, select File > Save As.

New in Dreamweaver 4 is the Code Reference (Figure 4.8), which allows you to select a tag and then read up on what it does. See Using the Code Reference, later in this chapter.

Figure 4.8. The Code Reference allows you to select a tag or attribute and then find out more about how it works.

In most chapters of this book, I discuss specific tags and attributes and how they work (Tables 4.1 and 4.2). In order to feel comfortable working directly with the code, you need to stop thinking of HTML as a programming language. It's really not. It's more of an electronic shorthand for Post-It notes and highlighter pens.

In this chapter, I'll continue to introduce the basic principles of HTML You'll find out how to edit pages in the Code inspector or Code view (Figure 4.9), as well as in the Quick Tag editor You'll be able to format the HTML code to your taste using the Options menu. You'll also find out how to clean Up HTML mistakes made by software or humans.

Appendix D on the Web site for this book offers copious details about HTML preferences and about using external HTML editors in conjunction with Dreamweaver.

Table 4.1 introduces some common tags we'll be seeing over the course of the book. Table 4.2 shows you what an attributes is — it's like an adverb that modifies the action of the tag.

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

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

[12345678] Indicates Tags that usually take attributes

Figure 4.9. The table and its contents from Figure 4.6 are shown here in the context of the code for an entire page. The first tag on a Web page is <html> and the closing tag is </html>. All visible contents are enclosed within the <body> tag. The <head> tag, at the top of every Web page, contains defining information for the page, such as the language it's in and the title of the page.

Table 4.2. Tags That Take Attributes, with Examples
<A><a HREF="http://www.nasa.gov" Mars-2, Earth-0</a>
<BODY><BODY bgcolor="#FFFFFF" link="#FF3300" vlink="#CC99CC" alink="#0000FF>Your entire visible page goes here. </BODY>
<IMG><IMG SRC="/images/doggie.gif">
<FONT><FONT FACE="Courier, Courier New" COLOR="red" SIZE="+2">This text will appear in Courier, in red, and two sizes larger than normal text.</FONT>
<TABLE><TABLE width="100%" border="1" align="center" cellpadding="10" cellspacing="5"><TR><TD>There must be rows and cells within opening and closing table tags.</TR></TD></TABLE>

Roundtrip HTML

Dreamweaver was designed for use by both codephobes and codephiles. If you never want to see a line of code in your life, you don't have to.

On the other hand, if you know how to tweak HTML to make it work for you, you've probably experienced the frustration of opening a page in a WYSIWYG editor and having it munged to bits by the purportedly helpful code engine of a program like FrontPage.

Dreamweaver writes valid code in the first place, and it uses no proprietary tags other than the JavaScript it writes (see Chapter 16). On the other hand, if you want to use mildly illegal code (such as wrapping a single <font> tag around an entire page instead of each paragraph), Dreamweaver can be coaxed into letting that slide.

Dreamweaver will not remove proprietary tags. Some made-up tags may be valid XML template markup created for a database application (see Chapters 18 and 19). If you write HTML improperly in the Code inspector, however, Dreamweaver will mark tags that are unclosed, missing quotation marks, or badly overlapped. Error highlighting is on automatically in Design view; you can turn it on in Code view by selecting Highlight Invalid HTML from the Options menu. (Figure 4.10). Click on the yellow mark in either window to read a brief description of the error in the Property inspector.

Figure 4.10. If you forget to close a tag, or if you overlap two tags improperly, Dreamweaver will mark the bad tags in yellow in both the Code inspector and the Document window, with descriptions available from the Property inspector.

Dreamweaver does have corrective features, which you can modify or turn off (see Cleaning Up HTML, later in this chapter). And you can use Dreamweaver simultaneously with an external editor. This group of features together makes up what Macromedia calls Roundtrip HTML. More tips for Roundtrip HTML are included on the book's Web site, in Appendix B. Making Dreamweaver work with external editors is covered in Appendix D, also on the Web site.

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