HTML and DreamweaverHTML and DreamweaverOctober 21st

OverviewOverviewElement Attributes ReviewSemantic HTMLHTML Elements for Layouts

◦Tables◦Block-Level Elements, DIV element

Grid Layout Demo

Element AttributesElement AttributesAs we know elements have

various attributes, which can be set with your markup or left to their default values.<p align=“left” id=“paragraph”

class=“blue”></p>Let’s dive deeper, what are some

common attributes and how can we use them effectively?

AttributesAttributesID

◦Used with:Elements inside the body of the document.

◦Description:The ID attribute is a common attribute used for, you guessed it, distinguishing elements from each other with a unique identifier. That last part is important. The ID attribute value should always be unique.

AttributesAttributesCLASS

◦Used with:Elements inside the body of the document.

◦Description:The class attribute is a common attribute used to group elements. The class element is similar to the ID element except for one distinction; a class is generally used on multiple elements.

AttributesAttributesSTYLE

◦Used with:All elements contained within body

◦Description:Style is used to set inline CSS style information. Generally style information should be separate from your markup but using the style attribute is a valid way of ensuring a specific style for an element as it will override any CSS for the specified styles.

AttributesAttributesTITLE

◦Used with:All elements contained within body

◦Description:The title element is a common way of establishing a relevant title for an element. Think of this as meta data for elements and use it when possible in <a> elements.

AttributesAttributesALIGN

◦Used with:IMG, INPUT, TABLE

◦Description:Align positions an element with respect to surrounding context. For example, to align an image to the right of a text use align=“right”. This attribute is not useful for positioning block elements. More on that later.

AttributesAttributesALT

◦Used with:IMG, INPUT

◦Description:A short description to describe the element. This is required to be set with the IMG tag and is important in order to establish context for search engines.

AttributesAttributesBORDER

◦Used with:IMG, TABLE

◦Description:Establishes a border for images and table elements. Some browsers default border to 1 pixel around images that are linked so it is important to set border=“0” to images you do not want borders around.

AttributesAttributesHEIGHT, WIDTH

◦Used with:IMG,TABLES

◦Description:Height and width are used to establish dimensions for image elements. These will be assumed based on the image dimensions or can be applied to force sizing constraints.

AttributesAttributesThese are just a few examples.

To view all possible attributes for an element consult w3.org’s master list.◦http://www.w3.org/TR/REC-html40/in

dex/elements.html

Semantic HTMLSemantic HTMLAs we have covered before, writing

semantic HTML is important not only for readability but for search engine optimization.

Because HTML is a broad standard developers tend to contract their own styles and uses for elements, which can make it difficult to work in a group environment.◦ Bad Example: <div id=“header”></div>◦ Good Example: <h1></h1>

By using the appropriate element for a given task we can not only write accessible code but provide a professional product that is easily interpreted by other developers and web browsers.

Semantic HTMLSemantic HTMLHere is a great guide to semantic

use of HTML elements.◦http://www.joedolson.com/articles/

2008/04/guide-to-semantic-html/

Block-Level ElementsBlock-Level ElementsMost elements within the body of an

HTML document are either block-level elements or inline elements. The main difference between block-level and inline elements is that block-level elements usually start on a new line and can generally have a defined height and width.

Some examples of block level elements:<div>,<h1>,<p>,<hr>,<ul>,<table>

Block-Level ElementsBlock-Level ElementsBecause block-level elements

can have defined heights and widths they are commonly used to lay out content on a page.

For creating layouts the most common block-level element is the DIV element.

DIV ElementDIV ElementThe DIV element is a generic block-

level container for content on a web page. By default a DIV element has no defined height, width, padding or margin, which makes it a great element to build a site around.

The in-line equivalent of a div is the SPAN tag.

For more information on the DIV element.http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV

TablesTablesOne of the most common

elements for displaying content in grid or tabular format is the TABLE element.

The TABLE element consists of rows and columns.◦A table contains at least one TR

(table row), which must contain at least one TD (Table Cell).

◦A table may also contain header cells with the TH element.

TablesTablesA simple table example.

<table border="1">  <tr> 

<th>Month</th> <th>Savings</th>

</tr>  <tr>

<td>January</td><td>$100</td></tr>

</table>

TablesTablesA simple table in action:

◦http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_table_test

TablesTablesTables also have a variety of other

useful attributes.◦ BORDER: adds a border around the table,

set as pixel value.◦ CELLSPACING: adds a padding between

cell contents and the borders of each cell.◦ FRAME: specifies how the outer border

should appear.◦ RULES: specifies horizontal and vertical

column lines.◦ SUMMARY: summarizes the table for

accessibility.◦ WIDTH: specifies the width of the table in

either a pixel or percentage value.

TablesTablesThe TR and TD elements also have some

useful attributes.◦ TR

ALIGN: aligns the content of the rows horizontally, left, center or right.

VALIGN: aligns the content of the rows vertically either top, middle, or bottom.

◦ TD ALIGN: aligns the content of the rows horizontally,

left, center or right. VALIGN: aligns the content of the rows vertically

either top, middle, or bottom. COLSPAN: tells the cell to expand across the

defined number of cells. ROWSPAN: makes the cell extend across the

specified number of rows.

TablesTables Tables can provide accessibility issues for search

engines and people with sight disabilities. To accomplish this you can use additional elements to define headers, footers and a caption.

<table border=“1”> <caption>This is a caption</caption> <thead> <tr><th>Artist</th><th>Title</th></tr> </thead> <tfoot> <tr><th colspan=&quot;2&quot;>This is my CD collection</th></tr> </tfoot> <tbody> <tr><td>Fred Smith</td><td>Greatest Songs</td></tr> <tr><td>Randy Connolly</td><td>Hot HTML Hits</td></tr> </tbody></table>

More Table ExamplesMore Table Exampleshttp://

www.mountaindragon.com/html/tables2.htm

Tables vs DIVsTables vs DIVsThere are a few things tables do that DIVs do

not, much to the dismay of HTML developers.

While the valign attribute works in tables it does not work in DIVs, which can present a problem when data needs to sit vertically in the middle of the DIV.

Percentage width. One of the biggest advantages to tables is the ability to set a percentage value for dimensions. This allows you to share spacing dynamically where as with a DIV you either have to let the DIV size itself or set a specific pixel amount (there is a min-width CSS property for DIV elements but its’ support is relatively new and will not work in older browsers).

Tables vs DIVsTables vs DIVsWhile tables can be used for building

entire sites, and have been many times, this lends itself to clumsy code that is hard to maintain and defeats the ability to separate the HTML document structure from it’s visual style.

In order to produce friendly, semantic HTML tables should be used only for displaying tabular data (or in rare cases when percentage width or valign attributes are absolutely required).

DIVs and the 960 grid DIVs and the 960 grid systemsystemThe 960 grid system uses DIVs, which it

assigns specific widths and margins to, allowing you to create designs that are clean and can easily be updated and transformed as requirements change (and they always do).

Since DIVs are block-level elements they like to occupy their own line, which can make placing them next to each other difficult. To overcome this the 960 grid system uses CSS to ‘float’ the elements in place. Overcoming the block-level nature of the DIV element is the biggest deterrent to using DIVs for layouts and often results in inexperienced developers resorting to tables for layouts.