| Many Dreamweaver MX 2004 users might not have a clear understanding of the building blocks of HTML and XHTML: elements, attributes, and values. The following sections help clarify those building blocks. Elements All standard element identifiers are contained within angle brackets, as follows : <link>
Note that there are no spaces between the symbols and the tag and no spaces between the letters that denote the tag. Elements that appear in the body of a document are defined by the concepts of block or inline . Block Block-level elements are structural. They can contain other block-level elements (as in a division containing paragraphs) and inline elements. Usually, block-level elements are rendered by browsers as beginning on a new line. Inline Inline elements, also referred to as text-level elements, contain content. They can also contain other inline elements, but they should not contain block-level elements. Inline elements typically work within the content of a document without causing any line breaks. In transitional HTML and XHTML, inline elements can appear alone. However, in strict HTML and XHTML, all inline elements must be contained within a reasonable block-level element. So, say you are using the img element and you do not place it within a division, paragraph, or other block-level element. In a transitional document, you have no problems with validation, but in a strict document, you get an error. Attributes Many elements can act perfectly fine alone, but some tags must have attributes to function properly. An attribute consists of two properties: name and value. Many attributes in HTML have historically had to do with modifying the way something on a page looks. (In the strict DTDs of HTML 4 and XHTML, any attribute that defines a style is not allowed; instead, you must use style sheets. However, you can use these attributes and their companion values in transitional HTML 4.01 and XHTML 1.0.) Other attributes are fundamental to the proper interpretation of an element and have nothing to do with presentation at all. Examples would be src , alt , and href . Attribute names can be whole words, partial words, abbreviations, or even acronyms. Some whole word attributes include align , color , link , and face . Partial word examples include src for "source" and vlink for "visited link." Attributes follow the tag and are separated by at least one space: <body bgcolor...
These are then set by the attribute value before the tag is closed. A tag can have more than one attribute, and some tags take on many attributes at the same time. In this case, the syntax follows the same concept: first the tag, then a space, then an attribute. The attribute receives a value, and then a space is again introduced before the next attribute: <body bgcolor="#ffffff" text="#000000">
and so forth, until all the attributes and their values are included. Values Values , like attributes, can be made up of a whole word. All values are preceded by an = symbol (the equal sign), and the value is within quotation marks. If you're using the div , or division, element and want to align all the information in that division in a transitional HTML or XHTML document, you can select from several values that modify the align attribute. Such values include left , right , center , and justify . A resulting statement would be <div align="right"> </div>
Some attribute values are numeric, referring to pixels, percentages, browser-defined sizes, or hexadecimal numbers to define color. A pixel value example is well described by the width attribute: <table width="768">
Using a percentage value in the same instance looks like this: <table width="100%">
Browser-defined sizes are those sizes that the browser selects. In other words, you can't predetermine the exact size, such as with pixels, but you can approximate the size . The best example of this is with the deprecated font tag attribute size . The size attribute can opt to take a value ranging from 1 to 7, with 1 being the smallest and 7 the largest: <font size="5">
Any text between this and the closing font tag takes on the browser's interpretation of a size 5 . An example of a numeric type of value is hexadecimal color codes: <body bgcolor="#FFFFFF">
There are other kinds of values you should be aware of. One such value is a relative or absolute link to another document, meaning that a directory, series of directories, and specific filename can be included in certain attributes to fulfill a value: <a href="http://www.molly.com/">Go to My Home Page</a>
This markup creates a link that, when activated, goes to Molly's home page. The a , or anchor element, creates a link; the attribute is href , or hypertext reference; and the value is the URL, http://www.molly.com/ . Similarly, I can point to a directory and an image: <img src="images/molly.gif" />
In this case, the tag is img , or image (which, again, is an empty element and must be terminated in XHTML); the attribute is src ("source"); and the value is a combination of the path to the images directory and the specific file, molly.gif . Another interesting example is alt . This appears in image or object tags and offers a description of the image or object for those who can't or don't want to see the image or object: <img src="molly.gif" alt="picture of Molly" />
In this situation, the value assigned to the alt attribute is actually a series of words used to describe the picture. You can also see in this example how a tag can have multiple attributes with corresponding values. | 