Beginning HTML, XHTML, CSS and JavaScript - Code Examples

Back to main book index

Chapter 10: Design Issues

Here are the examples for Chapter 10, which looks at how to create page layouts.

Text

ch10_eg01.htmlControlling font sizes using ems
ch10_eg02.htmlControlling font sizes using pixels
ch10_eg03.htmlSpecifying fonts
ch10_eg04.htmlLine height
ch10_eg05.htmlVertical or baseline grids
ch10_eg06.htmlSitting headings on baseline grids
ch10_eg07.htmlAligning other items to baseline grids
ch10_eg08.htmlSpacing between letters
ch10_eg09.htmlAdding white space for cleaner design
ch10_eg10.htmlUsing white space for chunking

Menus and Navigation

ch10_eg11.htmlA menu created using an unordered list
ch10_eg12.htmlText links
ch10_eg13.htmlA CSS sprite
ch10_eg14.htmlAdding Google search

Tables

ch10_eg15.htmlTable design

Forms

ch10_eg16.htmlSelect box or radio buttons
ch10_eg17.htmlUsing fieldset elements to group sections of a form
ch10_eg18.htmlImplicit labels
ch10_eg19.htmlExplicit labels using the <label> element
ch10_eg20.htmlHow to label for radio buttons and checkboxes
ch10_eg21.htmlKeeping relevant labels next to form controls
ch10_eg22.htmlTables and labels
ch10_eg23.htmlThe title attribute
ch10_eg24.htmlLarge text text inputs
Try it outA registration form

Exercise

ExerciseA second page of a registration form