How to use microformats to enhance a set of contact details.

1. Add a surrounding div. Open using-microformats.
html, and place a div with a class value of vcard
around the contact details content, as shown (truncated)
following:
<h1>Contact details</h1>
<div class="vcard">
<h2>Mail</h2>
[...]
Mobile/cell: +1 (0)7000 555555</p>
</div>

2. Structure the address. Marking up the address is fairly
simple, and few changes are required to the general
structure of the code. However, because each individual set of information requires
its own container, and the best way of creating a container for the address is to
place it within a block element of its own, the company name and the address each
need their own paragraphs, rather than a line break separating the two. The organization’s
paragraph is then given a class value of fn org. Here, fn stands for “full
name” and org defines that the name belongs to an organization, rather than a
person.
The address paragraph’s class value is adr, and each line of the address is placed
within a span element. The various class values assigned to the spans denote
which element of the address the content refers to, and those are all straightforward
to understand. However, address books—and therefore microformats—
enable you to distinguish between different types of data. For example, you can
have a work address or a home address. This can be defined by adding the relevant
word (e.g., work) and wrapping it in a span with a class value of type, thereby
defining the type for the parent property. In this case, the address is being defined
as a work address.
For cases when you don’t want this information shown on the web page (which will
likely be most of the time—after all, adding a lowercase “work” in front of the
street name hardly looks great), add a second class value, hidden. Later, CSS will
be used to make content with a hidden value invisible.
<h2>Mail</h2>
<p class="fn org">Company name</p>
<p class="adr">
<span class="type hidden">work</span>
<span class="street-address">00, Street Name</span><br />

<span class="locality">Town or City</span><br />
<span class="region">County or Region</span><br />
<span class="postal-code">Postal/ZIP code</span>
<span class="country-name">Country name</span>
</p>

3. Structure the telephone/fax details. Each definition for a telephone number
requires its own container, and so the single paragraph must be split into three, as
shown in the following code block. Each paragraph’s class value should be tel. As
with the address, a span with a class value of type hidden is used to define the
type for each parent property. For tel, there are various options available, including
work, home, fax, cell, pager, and video. Should duplicate types be required
(such as for a work fax), two type spans are added. As for the contact number
itself, that’s placed in a span element with a class value of value.
<h2>Telephone/fax</h2>
<p class="tel">
Tel: <span class="type hidden">work</span>
<span class="value">+1 (0)0000 555555</span></p>
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
<p class="tel">
Mobile/cell: <span class="type hidden">cell</span>
<span class="value">+1 (0)7000 555555</span></p>
4. Style headings and paragraphs. The style sheet,

using-microformats.css, already has some
defined styles, which do the usual removal of
margins and padding and setting of the default
font size. The body rule also adds some padding
to the page content so that it doesn’t hug the
browser window edges. To this, add the following
three rules, which style the headings and paragraphs.
Both headings are rendered in uppercase
Arial, helping them to stand out, aiding visual
navigation of the contact details.
h1 {
font: bold 1.5em/1.2em Arial, Helvetica
å sans-serif;
margin-bottom: 1.2em;
text-transform: uppercase;
}

h2 {
font: bold 1.25em/1.44em Arial, Helvetica sans-serif;
text-transform: uppercase;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}

5. Hide hidden elements. As noted in steps 2 and 3, some information requires a type
to be defined for it, but as you can see in the previous image, this is displayed
onscreen like any other content. This is why the hidden value was also applied to
the relevant span elements. By adding the following rule, these spans are made
invisible.
.hidden {
display: none;
}

6. Deal with margin issues. Because the telephone
details are each in an individual paragraph, they
each have a bottom margin, and this makes the layout
look awful. The same problem also affects the
company name paragraph. However, because each
paragraph has its own class attribute value, it’s
easy to remove the bottom margins from the relevant
paragraphs using the following rule:
.tel, .fn {
margin-bottom: 0;
}

7. Embolden the company name. Balance-wise, the
company name could do with standing out more. This is within a paragraph that
has a class value of org, so making the contents bold is child’s play—just add the
following rule.
.org {
font-weight: bold;
}

8. Finally, style the vcard div via the following rule. This sets a background color,
width, border, and padding, but perhaps the most important property here is
margin-bottom. This is required because the margins from paragraphs with a tel
class were removed in step 6. When you add a bottom margin to the vcard div, the
typical spacing you’d expect after a paragraphs returns.
.vcard {
width: 200px;
background: #eeeeee;
border: 1px solid #cccccc;

padding: 8px;
margin-bottom: 1.5em;
}
Note that further simplification of some elements of the code shown in the exercise is
possible. For example, where you have the Fax line, the type span could be directly
wrapped around the relevant label, and the hidden class removed.
Where before you had the following:
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
you’ll now have this:
<p class="tel">
<span class="type">Fax</span>:
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
The same is also true for the Mobile/cell line.
Note also that this is a relatively new technology, so it’s not without its drawbacks. As mentioned
earlier, some details are not carried through to some address books. Also, the need
to hide extra data is problematic, since under some circumstances (such as in text readers),
it will be displayed, which could lead to confusion. However

Css Tutorial : How to create a fixed-width div

1. Set things up. Rename the boilerplate documents to create-a-fixed-widthwrapper.
html and create-a-fixed-width-wrapper.css. Link the CSS document
to the web page by amending the url value of the style element.
@import url(create-a-fixed-width-wrapper.css);

2. Add some content. The web page already has a div element with an id of wrapper.
Within it, add a bunch of paragraphs and test the web page. You’ll see that the content
stretches with the browser window and goes right up to its edges—this is a
basic liquid design. If the browser window is very wide, this makes the content all
but unreadable. 3. Restrict the wrapper’s width. In CSS, add the following rule:
#wrapper {
width: 600px;
margin: 0 auto;
}
The width setting defines a width in pixels for the wrapper div. The margin setting
provides automatic margins to the left and right of the div, which has the effect of
centering the layout in the browser window,

Adding separator stripes with PHP

Adding separator stripes with PHP
If you’re creating a table from data stored in a database, automating separator stripes is a
relatively simple process. After the PHP for retrieving data and the opening table markup
(including headers), you add the following:
$alternate = TRUE;
while ($row = mysql_fetch_object($sqlresult)) :
if($alternate) :
$class = ' class="alt"';
$alternate = FALSE;
else :
$class = "";
$alternate = TRUE;
endif;
echo '<tr'.$class.'>';
echo '<td>' . $row->field1 . '</td>';
echo '<td>' . $row->field2 . '</td>';
echo '</tr>';
endwhile;
This is then followed by the markup to close the table. Note that in this example, the alt
class value is applied to alternate table rows, so the CSS from the previous exercise should
still work fine

How to create a table: CssTutorial

1. Structure the table element. In order to emulate the structure of the iTunes
playlist, set the table’s width to a percentage value. This means the table will
stretch with the browser window. As explained earlier, you should also use the
summary attribute to succinctly detail what the table’s all about.
<table width="90%" border="1" cellspacing="0"
å summary="Music selected by Craig Grannell, with details of song,
å playing time, artist, album and play count.">
</table>

2. Add a caption. Immediately after the table start tag, add a caption element to provide
the table with a title.

<caption>A playlist of great music</caption>
3. Add the basic table structure. Use row groups to provide the table with its basic
structure.
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>

4. Using table header cell elements, add the content for the table head (the column
headers) as in the following code block, remembering to include relevant scope
attribute/value pairs:
<thead>
<tr>
<th scope="col">Song Name</th>
<th scope="col">Time</th>
<th scope="col">Artist</th>
<th scope="col">Album</th>
<th scope="col">Play Count</th>
</tr>
</thead>
There’s no need to add any styling—not even strong tags. By default, most
browsers display table header cell content in bold (and centered) to differentiate it
from table data; also, in the following section, you’ll be using CSS to style everything,
anyway.

5. Add table foot content. As mentioned, the footer for this table is to essentially be
a signature, stating who’s at fault for this selection of music. Because this is a single
line of text that could potentially span the entire table width, simply include a
single table cell, set to span five rows (using the colspan attribute).
<tfoot>
<tr><td colspan="5">Music selection by:
å www.snubcommunications.com</td></tr>
</tfoot>

6. Add table body content. Finally, add the table’s body content via the usual method,
using table row and table cell elements. This table will have nearly 20 rows, so to
save on trees, only the first two rows are detailed in the following printed code
block—you can add all the others in the same way, or just copy across the content
of building-the-table-body.txt from the download files, to save inputting the
data yourself.
<tbody>
<tr>
<td>In The Art Of Stopping</td>
<td>3:34</td>
<td>Wire</td>
<td>Send</td>
<td>3</td>
</tr>
<tr>
<td>Electron John</td>
<td>3:18</td>
<td>Worm Is Green</td>
<td>Push Play</td>
<td>42</td>
</tr>
</tbody>

How tables work

In this section, we’re going to look at how tables are structured, and some of the table
element’s attributes, which enable you to define the table’s dimensions and borders, along
with the spacing, padding, and alignment of its cells.
Tabular data works via a system of rows and columns, and HTML tables work in the same
way. The table element defines the beginning and end of a table. Within the table element
are table row elements (<tr></tr>), and nested within those are table cell elements
(<td></td>). The actual content is placed inside the td elements. Therefore, a simple table
with two rows containing two cells each is created like this:
<table>
<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>

**Note :Always ensure that you include all end tags when working with tables. If you began
working with HTML in the mid-1990s, you may have learned that it’s OK to omit the
odd end tag from tables or table cells. However, not only does this result in invalid
XHTML, but some browsers won’t render tables accurately (or at all) when end tags
are omitted. Furthermore, there’s evidence to suggest some search engines can’t
properly spider pages that contain broken tables.

How to find targets for collapsible content scripts

If you want to change your document structure when using the script from the previous
section in this chapter, you need to find the parent/sibling path, in Internet Explorer and in
other browsers. If you’ve a good grasp of JavaScript, this should be simple; however, if you
don’t—or you just want to sanity-check your values—it’s simple to find out what an element’s
parent is, what it’s next sibling is, and various combinations thereof.
First, give your clickable element a unique id value:
<p><a id="linkToggler" href="#" title="Toggle section"
å onclick="toggle(this); return false;">Toggle div 1!</a></p>
Elsewhere within the web page, add the following script:
<script type="text/javascript">
//<![CDATA[
alert(document.getElementById("linkToggler").nodeName);
//]]>
</script>
Before .nodeName, add whatever combination of .parentNode and .nextSibling you
like—here’s an example:
<script type="text/javascript">
//<![CDATA[
alert(document.getElementById("linkToggler").parentNode.
ånextSibling.nextSibling.nodeName);
//]]>
</script>
When you load the web page in a browser, an alert message will be displayed. This will
detail what the target element is, based on the path defined in the previous code block.