Special Characters

Some characters are not on the keyboard

Foreign letters, math symbols
Others have a special meaning in HTML
<>&
These can be displayed using an ampersand followed by:
The HTML name of the character
&lt; &gt; &amp; &radic; or
A pound sign and the numeric code for the symbol
&#60; &#62; &#38; &#8730;
Complete list found at www.w3schools.com
Colors
17 standard named colors
123 nonstandard named colors (all browsers support)
All other colors can be displayed using numerical values
Color by Number
256 (0-255) intensity levels for each primary color (RGB)
Precede number with pound sign
Numbers must be in hexadecimal (base 16)
16.5 million possible colors
Color should be selected using styles such as color and background color
Lists
Unordered lists use bullets
Ordered lists use numbers or letters
Definition lists are used for glossaries
Unordered Lists
<ul></ul> tags enclose entire list
<li></li> tags enclose each list item
List-style-type style determines bullet disc (default), circle, or square
List-style-type can be applied to entire list or just one item
Any text after <ul> but not enclosed by <li></li> is indented (no bullet)
Ordered
<ol></ol> tags enclose entire list
<li></li> tags enclose each list item
List-style-type determines ordering
List-style-type codes:
Upper-alpha upper case letters
Lower-alpha lower case letters
Upper-roman
upper case roman numerals
Lower-romanlower case roman numerals
Decimal
numbers (default)
Definition lists
<dl></dl> tags enclose entire list

<dt></dt> tags enclose term to be defined

<dd></dd> tags enclose definition
Nested lists
Very useful for creating outlines (ordered list)
By default all ordered lists will be numbered use type attribute or style
Each nested unordered list will use a different bullet by default (disc, then circle,
then square)
Tables
Intended for displaying rows and columns of data
As with lists, tables use a series of nested tags
Nesting is deeper (more levels) than lists
Table Tags
<table></table> tags enclose entire table
Border style adds borders to the table
Specify an external border width in pixels border: 1 px solid black
Float style is used to wrap text around table (left of right) or to center the table
<caption></caption> tags display a caption for the table
Text-align and caption-side styles move caption around table (left, right, top,
bottom)
Each row is enclosed in <tr></tr> tags
Each cell is enclosed in <td></td> tags
If the cell contains a heading you can use <th></th> instead
Background-color style can be applied to a row, cell, or the whole table to change
the background color
Table and cell width is automatically calculated to fit the data but
Width style can be applied to the table or cell
Specified in pixels or as % of the browser window or table
Additional Table Settings
Borders to display
Spacing between and around cells
Merging blocks of cells
Tables can be nested
Table Uses
Tables are mostly used for generating complex layouts
W3C recommends styles for this
We will use tables for page layout later in the course (Java Script section)
Mail Link
Anchor tags can be used to create mail links instead of links to web pages
Mail links use a special URL in the href attribute href=mailto: email address
When clicked, mail links open the default email client
Adding Sound
Browsers cannot play sound files on their own
Plug-ins are used to play popular formats

Popular formats include .mp3 and .wav

<object tag> is one recommended method but very hard to use
<audio> tag is new in HTML 5 but limited
Use <embed/> tag instead
Embed Tag Attributes
Src=web address
Autostart = true or false
Loop = true or number of times to play
width and height specify size of controller
Not a god idea to loop without a controller
Adding Video
Use <embed/> as with sound files
<video> tag new in html 5 but limited
Some sites provide object tags or iframes to copy (YouTube)
Pages which use these tags download the video file from the original site