Monday, August 31, 2009

Adding Style to Your (X)HTML Document

The <link> Tag

There are a few ways to add CSS style information to an (X)HTML document, but it’s almostalways a best practice to use the <link> tag. The tag’s purpose is simple: to associate one document with another. For our purposes, let’s use it to associate a CSS document with an XHTML
document, like so:

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />

This simply tells the XHTML document to use the file styles.css as a source of CSS information. We call CSS documents referenced in this way external style sheets. Link tags that reference external style sheets must be placed inside the head element of your (X)HTML document (but not inside any other element).
     The attributes of the <link> tag are fairly straightforward. The rel, or relation, attribute, describes the sort of relationship the linked file has to the (X)HTML file calling it. For CSS stylesheets, its value will always be stylesheet. The type attribute defines the file type of the linked file, and its value should always be text/css for CSS style sheets. As you might expect, the href attribute declares the URL of the style sheet file you’d like to attach to your document. This
   URL may be absolute or relative. The final attribute, media, states for which presentation media the styles contained in the external style sheet should be applied.

Using Multiple Style Sheets

You can also attach multiple style sheets to a single (X)HTML document with the <link> tag. The browser will use all linked style sheets and render the page accordingly.
                                                    
     Also, there exists the concept of an alternate style sheet. In some browsers (notably those powered by the Gecko rendering engine, such as Mozilla, Firefox, and recent versions of (Netscape), these alternate visual presentations of your document will appear in a menu for the visitor to select between. For example:

<link rel="stylesheet" type="text/css" href="styles.css" media="all" title="Default" />
<link rel="alternate stylesheet" type="text/css"
href="low_vision_styles.css" media="all" title="Low vision" />

Here, we’ve defined references to two different style sheets. Because the second one has the value alternate stylesheet for the rel attribute, it will not be used when the page is first presented but will be offered to the user as a choice (only in those browsers that support it, though). Note the use of the title attribute to give each style sheet a name (which will appear in the visitor’s menu of choices). Alternate style sheets are not widely used, probably because of their
limited browser support.
     It’s important to note that any <link> tag with both a title attribute and a rel value of stylesheet will be considered a preferred style sheet. Only one preferred style sheet will be used when the page is initially loaded. Therefore, it’s important that you don’t assign multiple <link> tags both a title attribute and a rel attribute value of stylesheet. <link> tags without a title attribute are designated as persistent style sheets— which means they’ll always be used in the display of the document. More often than not, this is the behavior you’ll want. Because of this, you should only apply a title attribute to your <link> tags if you are referring
to an alternate style sheet.

Thursday, August 27, 2009

IE 7 problem with Table

Since I had a problem with table in IE, I spent much time to deal with it. Now I have found something very helpful for those who work with css and apply with table HTML tag. Here is what IE 7 act:

Internet Explorer 7 does not support table,
table-cell, table-row, table-header-group, table-footer-group,
table-row-troup, table-column-group, table-column, and table-caption.

DOCTYPE: The Most Underappreciated Tag of All

DOCTYPE is an (X)HTML string created primarily as a validation mechanism.
List of Doctype
  •  HTML 4.01 Strict
  •  HTML 4.01 Transitional
  •  XHTML 1.0 Strict
  •  XHTML 1.0 Transitional
HTML 4.01 Strict
  • Allows for a trimmed-down version of HTML 4.01
  • Emphasizes structure over presentation
  • It does not contain deprecated and presentational elements (such as font, center, or u), nor does it allow for frames or link targets.
  • You intend to write only 100 percent clean markup, free of presentational clutter
  • Declare:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
  • Includes all elements and attributes of HTML 4.01 Strict but also supports older presentational attributes, deprecated elements, and link targets.
  • Dealing with legacy files that may still contain some presentational markup (you can always change the DOCTYPE to Strict once you completely clean up your legacy code)
  • Declare:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
  • Emphasizes structure by removing all presentational tags and attributes, and being XHTML
  • Enforces the strict rules of XML on your markup
  • Intend to write only 100 percent clean markup, free of presentational clutter
  • Declare:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
  • Allows for some presentational markup, although again, the XML rules are enforced
  • Dealing with legacy files that may still contain some presentational markup(you can always change the DOCTYPE to Strict once you completely clean up your legacy code)
  • Declare:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wednesday, August 26, 2009

How Does Writing Semantic Markup Help You in the Real World?

  • Good semantic (X)HTML markup helps to promote the accessibility of your site to visitors.
  • Your markup provide the semantic context necessary
    for comprehension of your content.
  • Semantic markup gives the device the information
    it needs to make contextual decisions, and saves you from having to think about all the possible contexts where your content will be consumed (now or in the future)
  • Search engine crawlers also rely on your markup to determine context and weight of vari-
    ous keywords.
  • Facilitates the proper use of CSS and JavaScript by providing many “hooks” on which to apply styles and behaviors.

Tuesday, August 25, 2009

What Is Semantic Markup?

CSS relies completely on the (X)HTML that references it. If you want to use CSS to its fullest potential, it’s imperative that you provide it with clean, structured content marked up with (X)HTML. Before you can do that, you need to understand (X)HTML’s purpose in life. According to the World Wide Web Consortium (W3C), an organization that develops specifications for many of the interoperable technologies used on the Web, “HTML is the lingua franca for publishing hypertext on the World Wide Web . . . HTML uses tags such as h1 to structure text into headings, paragraphs, lists, hypertext links etc.” (www.w3.org/MarkUp/). 
   In simpler terms, (X)HTML is a way of adding structure and meaning (or “semantics”) to textual content. It’s a way of saying, “This line is a header, and these lines make up a paragraph. This text is a list of items, and this text is a link to another document on the Web.” Note that it is not the job of HTML to say, “This text is blue, and this text is red. This section is a column that is to the right of everything else, and this line is in italics.” That presentational information is CSS’s job. When developing for the modern Web—especially if you come from the old school—always remember this: (X)HTML tells us what a piece of content is (or what it means), and not what it looks like.  
   When we refer to “semantic markup,” we are talking about (X)HTML that is free of presentational information and chock-full of meaningful tags that define the structure of the document.

Monday, August 24, 2009

Advantages of Using CSS for Style

  • Easy to add, remove, or update content without to worry about breaking your layout.
  • Easy to change font used for the entire site without having to dig through your content in search of every single tag.
  • Separating the two layers allows a web team to work efficiently; your
    visual designers can focus on design while your content producers focus on content—and neither has to worry about the other getting in their way.
  • Separating the two layers makes it possible to do an entire site redesign
    without touching the content at all—you only need to create a new CSS style sheet.
  • By using external style sheets, separate from your HTML structure, you can make all modifications to the visual presentation of the site by editing just one file rather than the numerous files (possibly numbering in the hundreds!) that make up your content.