• 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 how HTML works 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 you select a tag or attribute and then find out more about how it works.

Two code-editing tools, the Snippets panel and the Tag Inspector panel (Figure 4.9), offer methods of adding blocks of code or attributes from lists that Dreamweaver provides. There's also an improved tag-editing menu you can access by right-clicking (Ctrl+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 (see Tables 4.1 and 4.2 on the next page). 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.

Table 4.2. Tags That Take Attributes, with Examples
<A><A href="http://www.nasa.gov/"> Mars-3, Earth-2</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>

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 (see Figure 4.10 on the next page), as well as in the Quick Tag editor. You'll also learn how you can format the HTML code to your taste using the Options menu.

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.

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.

When you open a file, you may get a window letting you know that Dreamweaver has fixed such common errors as improperly overlapped or unclosed tags (see Figure 4.96). You can decide whether to let it do so by setting Code Rewriting Preferences. There, you can also decide whether Dreamweaver should override the case of a page's tags and attributes when you open a file. To modify Dreamweaver's corrective features, see Cleaning Up HTML, later in this chapter.

Figure 4.96. When you open a file with errors in it, you can get a prompt like this one that tells you what's being fixed. This is the file that I trashed for Figure 4.11.

The program also will not remove proprietary tags. 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 badly written file created in another program, Dreamweaver will visibly 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 or the Code inspector (Figure 4.11) by selecting Highlight Invalid HTML from the Options menu. Click on a yellow mark in either window to read a brief description of the error in the Property inspector. Dreamweaver works a bit differently since version MX—not all errors are marked in Design view as they have been in previous versions. And unfortunately, Dreamweaver 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's code cleanup features, as well as its ability to work simultaneously with external text editors, are together 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