HTML Basics in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

When you create a new web page in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver lots of code is created to help your web browser recognize HTML and which version of HTML it uses. Dreamweaver works in the background to ensure that your page works in most all recent versions of common web browsers, such as Firefox, Internet Explorer, and Safari.

HTML code, though easy, is just like any other language, in that you must figure out the syntax (the proper sequence and formation of the code) and vocabulary (memorize lots of tags). You don’t have to have gobs of tape on your glasses to build good, clean web pages, but you do have to review the following HTML basics.

If you’re an experienced user, you know that by copying and pasting code, you can figure out a lot about HTML code. If you’re a new user, copying and pasting code can help you understand the code that others have implemented on their pages and perhaps give you some ideas.

In general, HTML tags are composed of three parts:

  • Tag: The main part of the HTML information, for example, <strong> for strong or bold, <font> for the font tag, or <table> for an HTML table. A tag is always constructed of a keyword enclosed in a set of brackets, such as <p>, or <blockquote>.

    Because most tags come in pairs, you must enter an opening tag (<p>) and a closing tag (</p>). In XHTML 1.0 Transitional (the standard used for all new pages created in Dreamweaver), all tags must be closed. You can either close a tag or create a self-closing tag by including the slash before the closing bracket: <br/>.

    For example, if you make text bold by adding the tag <strong>, tell the text where to stop applying boldface by inserting a closing tag </strong>. Otherwise, the text continues to appear bold throughout the remainder of the page.

  • Attribute: Allows you to fine-tune the appearance of a specific HTML tag. An attribute is always added to an opening tag and can take different values to control attributes such as the link color, size, and destination. For example, align is an attribute of the <p> (paragraph) tag that specifies how text inside of the paragraph should align.

    Here’s an example of a paragraph (<p>) tag with an attribute added: <p align=center>This is centered text</p>

  • Value: The color, size, and link destination, for example, specified in an attribute. For example, you can specify a hexadecimal number as the value for a color attribute. An example of a value for the bgcolor attribute of the <body> tag (which controls overall page appearance) could be red or #CC0000.

  • Nesting is the order in which tags appear. If a <strong> tag is applied, it looks like this: <strong>This text is bold</strong>. Add an italic tag and you see <strong><em>This text is bold and italic.</em></strong>. Notice the in-to-out placement of the tags: You work your way from the inside to the outside when closing tags.