XHTML Primer
Podcast!
I did a podcast for my N451 game programming course roughly based on
these notes. You can listen to it by downloading the xhtmlPrimer.mp3 file. You can play
this on any mp3 player or mp3-capable mobile device. (66MB)
Table of Contents
- Basic XHTML
- Justification
- Doctype
- template
- Essential tags
- <head> heading area
- <body> body area
- <p> paragraph
- <h1>..<h6> header tags
- Basic markup
- Adding a style
- color
- background-color
- font-family
- font-size
- text-align
- Basic web colors
- Borders
- border-width
- border-style
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- border-color
- combined borders
- Data Formatting
- lists
- Ordered vs. unordered
- Nested Lists
- list-style type
- custom bullets
- tables
- table borders
- table headers
- table rows
- table data
- CSS styles and tables
- using tables for layout
- links
- defining standard links
- defining visited links
- using the hover pseudo-selector
- links and useability
- Advanced CSS
- Using background images
- repeated images
- image borders and frames
- Using Selectors
- selecting by class
- selecting by id
- nested elements
- Making link buttons
- adjusting the list
- adjusting the links
- managing the hover state
- Page Layout with CSS
- Using float for layout
- Indicating element width
- Two-column layout using float
- Adding Headers and footers
Basic XHTML
Justification
Doctype
template
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang = "EN" xml:lang = "EN" dir = "ltr">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<title></title>
<style type = "text/css">
</style>
</head>
<body>
</body>
</html>
Essential tags
<head> heading area
<body> body area
<p> paragraph
<h1>..<h6> header tags
Basic markup
Adding a style
color
background-color
font-family
font-size
text-align
Basic web colors
| color name |
color value |
| aqua |
|
| black |
|
| blue |
|
| fuchsia |
|
| gray |
|
| green |
|
| lime |
|
| maroon |
|
| navy |
|
| olive |
|
| purple |
|
| red |
|
| silver |
|
| teal |
|
| white |
|
| yellow |
|
Borders
border-width
border-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-color
combined borders
Data Formatting
lists
Ordered vs. unordered
Nested Lists
list-style type
custom bullets
tables
table borders
table headers
table rows
table data
CSS styles and tables
using tables for layout
links
defining standard links
defining visited links
using the hover pseudo-selector
links and useability
Advanced CSS
Using background images
repeated images
image borders and frames
Using Selectors
selecting by class
selecting by id
nested elements
Making link buttons
adjusting the list
adjusting the links
managing the hover state
Page Layout with CSS
Using float for layout
Indicating element width
Two-column layout using float
Adding Headers and footers