HTML, XHTML, and CSS All-in-One For Dummies

From HTML, XHTML, and CSS All-in-One Desk Reference For Dummies by Andy Harris, Chris McCulloh

Building Web pages starts with basic HTML, but it doesn't end there. By combining XML and HTML into XHTML, and through the design power of CSS (Cascading Style Sheets), you can create dynamic, well-designed Web pages with a greater amount of control and speed.

Template for Starting a Web Page in XHTML

XHTML combines the strength of HTML with the flexibility of XML, so you’re free to create the Web pages of your dreams. As with any language, it helps to start out right, so use this template with every XHTML page you create:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
    <title></title>
  </head>
  <body>
  
  </body>
</html>

Selected CSS Attributes

CSS (Cascading Style Sheets) helps you create dynamic Web pages and gives you more control over how a Web page looks and acts. Knowing CSS attributes and how to use them is key to making your Web page designing life a little easier. The table here shows commonly used attributes and their functions:

Attribute	Function
margin	Defines space between element border and parent (left, right, top, bottom variations)
padding	Defines space between contents and border (with variants)
border: size color style	Defines a border. Styles: none, dotted, dashed, solid, double, groove, ridge, inset, and outset.
color	Foreground color: color name or hex value
background-color	Background color: color name or hex value
background-image: url(filename)	Sets image indicated by filename as background image
background-repeat	Indicates how background image will repeat: repeat, repeat-x, repeat-y, and no-repeat
font-family	Font name: sans-serif, serif, monospace, cursive, and fantasy
font-size	Font size (best specified in ems or percent)
font-style	Set italics: none, italic, and oblique
font-weight	Set boldness: lighter, normal, bold, and bolder (100–900)
text-align	Alignment: left, right, center, and justify. Works on content, not a block
text-decoration	Adds decoration to text: none, underline, overline, line-through, and blink
display	Defines how element is displayed: none, block, and inline
position	Describes positioning scheme: absolute and relative
left, top, right, bottom	Indicates position of element (must set position absolute or relative first)
float	Removes element from normal layout and floats it in a direction: left and right
height, width	Specifies the height and width of an element. Important for floated elements.
clear	Force this floated element to position: left, right, and both

Common XHTML Tags

To create Web pages with XHTML, you need to know the HTML tags to place and where to place them so that your pages look like the masterpieces you created. This table lists commonly used XHTML tags and explains where they go and whether they’re necessary.

Tag	Function
<html></html>	Required for all pages
<head></head>	Required for all pages — must be inside HTML tags
<title></title>	Must be in head
<body></body>	Required for all pages — must be inside HTML tags
<link rel = "stylesheet" type = "text/css" href = "address" />	Link to external style sheet. Replace address with URL of style sheet
<style type = "text/css"></style>	Page-level style sheet declaration
<h1></h1>...<h6></h6>	Defines headline from most prominent (h1) to least prominent (h6)
<p></p>	Paragraph
<div></div>	Generic block-level component
<span></span>	Generic inline component
<em></em>	Emphasis (default: italics)
<strong></strong>	Strong emphasis (default: bold)
<br />	Line break
<ol></ol>	Defines an ordered list
<ul></ul>	Defines an unordered list
<li></li>	List item — must be inside ol or ul pair
<dl></dl>	Definition list — a list of terms and definitions
<dt></dt>	Definition term — found in dl groups
<dd></dd>	Definition data — usually paired with a dt set inside a dl
<a href = "address">content</a>	Displays content as a link and sends browser to address when activated
<img src = "filename" alt = "alternative text" />	Displays image referenced by filename. Alternative text is required for non-visual browsers.
<table></table>	Define an HTML table
<tr></tr>	Table row
<th></th>	Table header — must be inside tr
<td></td>	Table data — must be inside tr
<script> //<![CDATA[ //]]> </script>	Internal JavaScript code
<script src = "filename"></script>	Load external JavaScript code
<!--[if IE]> <![endif]-->	Conditional comment. Code inside these tags will only be executed by Internet Explorer. It’s possible to indicate specific versions as well (<!--[if IE < 7]>).