Additional Topics

Drop Caps

Drop caps can be used to make a Web page look more like a published page in a magazine or newspaper. Creating drop caps was once a very complicated process back when computerized typesetting first became available. Back in the early 1980s, typographers had to create two different line lengths, and manually set the drop cap to a larger size, then move over to the second section following the drop cap and type the text for the first line or two, then, change the line length to the full line width for text that included the width of the drop cap and the adjacent text. This process was manually repeated for each paragraph that had a drop cap. And, if any text changed in the first couple of lines next to the drop cap, the process was repeated since there was no way to allow it to wrap to the next line, like we can using CSS.

Using drop caps gives your Web page a more finished look and is quite simple to do with CSS. We can create drop caps with two simple steps. The first step is to create a style for the first letter of a paragraph that has drop caps. Keep in mind that this style can be reused over and over. Next, we will code the HTML part of the page, using the style we created. In this example, I created a class name firstletter with the following style.

.firstletter {     float: left;     font-size: 3.3em;     line-height: 1;     font-weight: bold;     margin-right: 0.2em; }

Next, we code our HTML for the first letter with the following HTML tags.

<p><span class="firstletter">D</span>rop caps can be used, etc.

Next time we want to create a drop cap, we can reuse our firstletter class.

When to use <id> or <class>

Use id for unique objects (styled as #idname). Use class for multiple elements on a page (styled as .idname). We can not have two objects with the same id value in a page. Use class for multiple identical objects such as paragraphs.

When to use <div> tag

Use <div> tag when <p> is used to structure paragraphs, <div> is used to determine larger zones within the document, <h1> ... <h6> are for the levels of titles, <ul> is for lists and menus, and so on and so forth.

The whole idea is to realize that there are other tags than <div> that can be used to create blocks, such as <p>, <ul>, <li>, <h1>...<h6>, <blockquote>...

using too many <div> will create difficulties for updating your site, they will make your code too heavy

Using <div> layers associated with CSS is the new integration and layout format for all documents.

Mobile Devices

As Mobile devices come down in price, they will be come more popular. For example, T-Mobile is offering the new Dash phone for $149 after rebates (Nov. 06). We can use CSS to serve up a lighter Web page for these new devices. The W3C is addressing the constraints of mobile devices at http://www.w3.org/TR/css-mobile. We can specify the following media types.

@media print { body {font-size: 10pt;} } @media screen { body {font-size: 12pt;} }

See this link http://www.htmldog.com/ptg/archives/000056.php.

Also, we can link to external style sheets for different media with

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

See http://www.westciv.com/style_master/academy/css_tutorial/advanced/media.html.

Media types from W3C - http://www.w3.org/TR/REC-CSS2/media.html.
http://www.alistapart.com/articles/pocket
http://my.opera.com/community/dev/device/

http://www.webteacher.ws/2006/10/tip-want-to-write-css-for-handheld.html

http://www.colly.com/index.php?/weblog/comments/7_steps_to_better_handheld_browsing/

http://www.oreillynet.com/pub/a/wireless/2004/02/06/mobile_browsing.html

http://www.openmobilealliance.org/

http://www.developershome.com/wap/xhtmlmp/

Validating Your Site

W3C has a free markup validation service at http://validator.w3.org that checks Web documents in HTML or XHTML for conformance to W3C standards.

You can also place a link on your page for visitors to check your page. See

You can also validate your CSS in XHTML documents at http://jigsaw.w3.org/css-validator.

Search Engine Optimization

Let's check Wikipedia for a definition of Search Engine Optimization (SEO).

Here's what Google says about SEOs. Google has a Webmaster Help Center link that explains how to improve your site's ranking. Finally, here is Google's Webmaster Guidelines

CSS Links