In the world of the Internet, the graphics, text, animation, and all the “stuff” that the visitor sees displayed in their browser is the front end of a Web page, and the power behind the page is the HTML code. The HTML code sits quietly behind the scenes, letting the front end get all the credit; however, without the code, the Internet would fall apart. It’s the cosmic glue that holds the whole thing together.

Designers, like myself, remember when there were no graphical design interfaces (like Dreamweaver), and all Web pages were designed code line, by tedious code line. I remember working by candlelight into the wee hours of the morning, until I thought my head was going to burst... okay, so maybe I didn’t use candles, but it was a lot of painstaking work. Although Dreamweaver changed all of that with its intuitive graphical design interface, the code is still there. However, we’re not the ones doing the coding, Dreamweaver is... and isn’t that nice?

HTML stands for the HyperText Markup Language. HTML code is the major language of the Internet’s World Wide Web. Web sites and Web pages are written in HTML code. With HTML code and the World Wide Web, you have the ability to bring together text, pictures, sounds, and links... all in one place! HTML code files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.

HTML documents look a lot like word processing documents. You can have text that’s bold and italicized, larger and smaller, or it can look typewritten. The HTML code might look something like this:

You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look <tt>type-written</tt>.

Most HTML code is enclosed within braces < >, and when you place the code between the braces it’s said to be a tag. An HTML tag is code inserted in a document that specifies how the document, or a portion of the document, should be formatted. For example, the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document.

HTML files are just normal text files; they usually have the extension of .htm, .html, or .shtml. HTML documents have two parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend. The head of the document contains the document’s title and similar information, and the body contains most everything else.

Here’s an example of a basic HTML document:

You may find it easier to read if you add extra blank lines such as follows...

Extra spaces and line breaks (blank lines) are ignored when the HTML is interpreted (displayed) by a Web browser, such as Microsoft Explorer or Apple Safari... so add them if you wish.

When working with HTML code, it’s all about the tags. The HTML tags instruct the text how to look and how it’s formatted. In addition, tags control graphics, animation, in short... everything. For example the following uses the <b> or bold tag:

When displayed within a browser it would look like this:

The start tag <b> instructs the text following the tag to use boldface; the end tag </b> instructs the text to stop boldface and return to normal.

Dreamweaver utilizes three document views: Design, Split, and Code. The Design view gives you a real-time view of your design, the Split view gives you a look at the visual and the code, and the Code view gives you a straight look at the HTML code of your Web page. When you work in the Code view, you’re going back to the basics of Web design... the actual code that makes it all happen. Some designers never look at the code, and some designers claim that you can’t be good at creating Web pages without knowing the code. To be honest, I’m in the second camp. I believe that to really understand the design of a Web page, you need to know how the code makes a page function. Only then do you have complete control over the design of the page. Of course, I could be wrong...

As you work in Live view, you can also view live code (New!). Similar to Live view, Live Code view is a non-editable view. Live code view appears displaying the code that the browser uses to execute the page. The non-editable code is highlighted in yellow. If you want to edit the code, all you need to do is return to Live view, and then switch to Code view, which is editable. After making your code changes, you can return to Live view and then refresh it to see your changes.

You can select Code view options to change the way code appears in Code view. When you select the Code View Options command on the View menu or click the View Options button on the Code toolbar, you can set options to set word wrapping, display line numbers, hide characters, highlight invalid code, color code, indent code automatically, and display syntax error alerts in the Info bar (New!).

You can enter HTML code in Code view like you are typing text into a word processor. However, when you type HTML code, it uses a specific structure and layout. As you type, the Code Hints popup menu appears to help you enter correct HTML code tag names, attributes, and values as you type code in Code view or the Quick Tag Editor. For example, when a tag requires the selection of a color, Dreamweaver displays a color palette. When a font is required, a font list is automatically displayed, and when a file is required a browse button magically appears allowing you to select and insert the file. If a page does contain invalid code, it appears in Design view and optionally highlights in Code view. When you select the invalid code, the Properties panel displays information as to why the code is invalid and steps to fix it.

Code hints makes it easy to insert and edit code accurately in a variety of languages. Dreamweaver supports code hinting for the following languages and technologies: HTML, CSS, DOM, JavaScript (New!), Ajax (New!), Spry, Adobe ColdFusion, JSP, PHP MySQL, ASP JavaScript, ASP VBScript, ASP.NET C#, and ASP.NET VB. As you start to type code for a particular code type, the Code Hints popup menu appears to help you enter it correctly. When you type a right angle bracket (<), code hint displays HTML tag names. When you type a period (dot operator) after an object, code hint displays JavaScript code possibilities. Dreamweaver also provides code hinting for your own or third-party custom JavaScript classes that are not built in to the language. If Dreamweaver detects problems with your code, code hints doesn’t always work properly. Use the Syntax Error Information Bar to help you fix the code problems.

Each page contains information about the document in the head section. You can set the properties of head elements to control how your pages are identified on the Web by search browsers. You can insert the following head tags: meta, keywords, description, refresh, base, or link. A meta tag records information about the current page, such as encoding, author, copyright, or keywords. The keywords and description tags record information many search engines, such as Google or Yahoo, look for to create an index for your page for use in their search results databases. For the best results, specify a few descriptive keywords and a short description for a page. The refresh tag specifies the amount of time before the page is refreshed in a browser. The base tag sets the base URL that all document-relative paths in the page use. The link tag defines a relationship between the current page and another file. After you insert a head tag, you can always make changes and adjustments by using the head content, selecting the head element, and making changes in the Properties panel.

If you’re writing large sections of code or working with other people to develop a site, it’s important to insert comments into your HTML code. An HTML comment is descriptive text that explains the purpose and process for the page’s code. The comment text only appears in Code view; the information is for internal development purposes only. You can insert comments in Code view or Design view. After you insert a comment, you can edit it directly in Code view, or select the comment marker and make changes in the Properties panel.

When you switch to Code or Split view, the Coding toolbar appears along the left side of the Code view pane. The toolbar provides easy access to the most common coding related commands. If the Code view pane is not large enough, an expander arrow appears, which you click to access additional buttons. Some of the tools allow you to collapse and expand the content between a set of opening and closing tags, select tags, insert and remove comments, format code, and highlight invalid code.

Creating Web documents in the Design view is a beautiful and elegant way to design Web pages; however, sometimes you just need to get under the hood and make changes directly to the code. Dreamweaver gives you a way to make alterations to the code using the Quick Tag Editor. When activated, the Quick Tag Editor displays as a small pop-up window and allows you to edit a tag, add a tag, or enclose the current selection within a tag. In addition, you can use a list of tags and attributes to help jog your HTML memory, and save you some typing. Dreamweaver’s Quick Tag Editor can be used in three ways: Insert HTML (used for adding new tags and code at the current cursor position), Wrap Tag (wrap one tag around one or more other tags and content) and Edit HTML (displays the entire selected tag with all the attributes). It is a great time-saver for making those small tweaks to the code of any Web document. While most designers will perform most of the creative process using the Design view, it’s nice to know that you have a powerful tool like the Quick Tag Editor when you need to get back to coding basics.

Dreamweaver’s Tag Inspector gives you control over your code by displaying a collapsible outline of the tags used on the current page. This feature allow you to quickly determine if tags are correctly nested, and to view and change tag attributes. For example, you may want to change the attributes of the <body> tag, or change the overall color and size of the default font; both these and many more options are available using the Tag Inspector. When selected, the Tag Inspector displays a collapsible structure of all the attributes within the selected Web element. This view gives you an overall view of the code and how it’s laid out. When you select a tag, all the attributes for that tag are displayed for you to view and edit.

The Tag Chooser allows you to insert any tag from the Dreamweaver tag libraries in your page. A tag library is a collection of tags for a certain type that contains tag information, code hints, target browser checks, and other features. You can insert tags from the following types: HTML, CFML, ASP.NET, JSP, JRun custom library, ASP, PHP, and WML. If you are looking for a specific tag in a specific category, the Tag Chooser can help you insert it into your code with the right syntax.

Code Navigator (New!) displays a list of linked code sources related to a part of a page. The related codes sources include internal and external CSS rules, server-side includes, external JavaScript files, parent templates files, library files, and iframe source files. When you click a linked code source, the file appears in the related files area (if enabled) or opens as a separate file in the Document window. If the code source is an internal CSS rule, the rule appears in Split view. You can open Code Navigator from Design, Code, and Split views and the Code Inspector.

If you have a related file attached to a document, you can use the Related Files toolbar (New!) to quickly open it while keeping the main page available. When the Enabled Related Files option is selected in General Preferences, Dreamweaver displays the names of all files related to a main document in a Related Files toolbar. The related files include external CSS rules, server-side includes, external JavaScript files, parent templates files, library files, and iframe source files. The file named buttons on the Related Files toolbar appear in the order in which the related files appear in the main document. In addition, when you click a linked to a code source file in the Code Navigator, the file appears in the related files area (if enabled).

It doesn’t matter whether you’re an experienced Web designer, or a newcomer to the field. Sooner or later you’re going to need a bit of help, in the form of reference material. I’ll admit that I’m a big reader... I love to read. I have a library full of books on creativity and design. Unfortunately, I can’t carry all those books with me when I’m on a lecture tour. That’s why one of my favorite features in Dreamweaver is the Reference panel. The Reference panel gives you instant (on screen) access to 10 O’Reilly reference manuals, 2 Adobe manuals, and a UseableNet Accessibility Reference. Now that’s a lot of reading material, and instant information at your fingertips. For example, you’re coding a page, and you need a bit more information on the HTML body tag... it’s there, or you need a bit of help with the new syntax of XHTML... it’s there. As a matter of fact, when you first open the Reference panel, the information displayed is based on the selected element on the active Web page.

You can use the Code Format section of the Preferences dialog box to change the way your code looks in Code view. The options you set in the Code Format section, except the Override Case Of option, are automatically applied only to new documents or additions to documents you create in the future. If you want to reformat an existing document, you can use the Apply Source Formatting on the Commands menu.

You can use the Code Hint section of the Preferences dialog box to set options for the Code Hints popup menu. Code Hints does more than help you type in a simple HTML code tag. It helps you insert tag names, attributes, and values as you type code in Code view or the Quick Tag Editor. For example, when a tag requires the selection of a color, Dreamweaver displays a color palette. When a font is required, a font list is automatically displayed, and when a file is required, a browse button magically appears allowing you to select and insert the file.

You can use the Code Rewriting section of the Preferences dialog box to specify how and if Dreamweaver changes your code. Some of the rewriting options allow you to fix invalid nesting and unclosed tags; prevent duplicate names for form objects; ensure attributes values and URLs contain legal characters; and add the right JavaScript tags upon opening active content files. These options have no effect when you edit your code in Code view. If you disable the rewriting options, invalid HTML code that would have been rewritten is displayed in the Document window.

You can use the Code Coloring section of the Preferences dialog box to specify colors for general categories of tags and code elements, such as HTML Image or style tags, Library items, or CSS properties. For a selected tag or code element, you can specify the text color, background color, and any formatting (Bold, Italic, or Underline) you want to make it easier to work with your code.