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

Chapter 4. Editing Code > Learning HTML

Learning HTML

The best way to learn about Web pages is to view the source code 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.

A handy tool called the Reference panel (Figure 4.8) allows you to select a tag and then read about what it does. See Using the Code Reference, later in this chapter.

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

New in Dreamweaver MX are two code-editing tools, called the Snippets panel and the Tag Inspector (Figure 4.9). There's also an improved tag-editing menu you can access by right-clicking (Control+clicking) on any piece of code.

Figure 4.9. The Tag Inspector panel allows you to home in on every possible attribute for a tag that's in use.

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.10), 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.

Figure 4.10. 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, not visible in the browser but required 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.

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 attribute is—it's like an adverb that modifies the action of the tag.

Table 4.1. Common HTML tags
Tag Name Use Always Closed?
<HTML> HTML Document Y
<HEAD> Head Document Y
<TITLE> Page Title Document Y
<BODY>[*] Body Document Y
<H1>, <H2><H7> Headings Text Block Y
<P> Paragraph Text Block N
<BLOCKQUOTE> Blockquote Text Block Y
<CENTER> Center Text Block Y
<PRE> Preformatted Text Text Block Y
<BR> Line Break Text Never
<I> Italic Text Y
<B> Bold Text Y
<TT> Teletype Text Y
<FONT>[*] Font Text Y
<UL> Bulleted List List Y
<OL> Numbered List List Y
<LI> List Item List N
<DL> Definition List List Y
<DD>, <DT> Definition Items List Y
<A>[*] Anchor Links Y
<IMG>[*] Image Image Paths N
<TABLE>[*] Table Table Y
<TR> Table Row Table Y
<TD> Table Cell Table Y
<FORM>[*] Form Form Y
<INPUT>[*] Form Field Form N
<SELECT>[*] Form Menu Form Y

[*] Indicates tags that usually take attributes

Table 4.2. Tags That Take Attributes, with Examples
Tag Example
<A href="http://www.nasa.gov">
Mars-2, Earth-0</a>

<BODY bgcolor="#FFFFFF"
link="#FF3300" vlink="#CC99CC"
alink="#0000FF>Your entire visible
page goes here.</BODY>

<IMG> <IMG src="/images/doggie.gif">
<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 width="100%"
border="1"align="center" cell-
There must be rows and cells within
opening and closing 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 change the case of any of your tags or attributes, and it does not remove proprietary tags. (Improperly wrapped tags will be marked, but not changed.) Some made-up tags may be valid XML template markup created for a database application (see Chapters 17 and 18). If you write improper HTML in Dreamweaver, however, or if you open a file created in another program, Dreamweaver will mark tags that are unclosed, missing quotation marks, or badly overlapped. Error highlighting may be on automatically in Design view; you can turn it on in Code view by selecting Highlight Invalid HTML from the Options menu (Figure 4.11). Click on the yellow mark in either window to read a brief description of the error in the Property inspector. Dreamweaver MX works a bit differently—not all errors are marked in Design view as they have been in previous versions. And unfortunately, Dreamweaver MX missed my extra bold tag here—see Cleaning Up HTML for how to catch all your boo-boos.

Figure 4.11. 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 on (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