Advanced HTML

Basic Structure of an HTML page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>The Title</TITLE>
<!- general, page-wide scripts might go here -->
</HEAD>
<BODY>
<!- the contents of the web page would go here -->
</BODY>
</HTML>

The <BODY> tag

<BODY BACKGROUND=url BGCOLOR=color TEXT=color LINE=color VLINK=color ALINK=color>

<Meta> Tag Uses

For supporting information - may be used by tools

<META NAME="generator" CONTENT="Wiley Editor">
<META NAME="Author" CONTENT="Terry E. Weymouth">
<META NAME="Copyright" CONTENT="&copy;NewScape">

Refresh

<META HTTP-EQUIV="refresh" CONTENT="5;URL=target.html">

Forestall Robots and Spiders

<META NAME=robots" CONTENT="NOINDEX,NOFOLLOW">

Page Summary and Keywords

<META NAME="description" CONTENT="This is a summary of the content of my page">
<META NAME="keywords" CONTENT="example, demo, tutorial, lesson">

Define character set used by the page

<META HTTP-EQUIV="content-type" content="text/html; charset=ISO-8859-1">

Doctype

Reference: http://www.htmlhelp.com/tools/validator/doctype.html

Standard Types

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Notes on Color

Reference: http://catless.ncl.ac.uk/Lindsay/colours.html

You can use names or color codes
Names are: red, green, blue, yellow, etc
Color code is #RRGGBB - red, green, and blue in hexadecimal encoding 00 = zero; FF = 256; digits are 0-9, A, B, C, D, E, F

Structural Tags

Every tag (unless noted) has a corresponding end tag

<BLOCKQUOTE> <Q CITE=url> <Hn> n=1-6 <EM> <STRONG> <CITE> <SAMP> <KDB> <VAR> <ADDRESS> <BIG> <SMALL> <ACRONYM> <ABBR>
<INS DATETIME="2001-10-24T13:08:02" CITE=url>
<DEL DATETIME="2001-10-24T13:08:02" CITE=url>
<SPAN> <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY>

Presentational and Positioning Tags

<B> <I> <SUB> <SUP> <TT> <PRE WIDTH=w> <CENTER> <FONT SIZE=1-7|+n COLOR=color FACE=face>
<P ALIGN=LEFT|RIGHT|CENTER|JUSTIFY> <BR> <HR SIZE=n WIDTH=n NOSHADE>

<HR> and <BR> do not have closing tags

Lists and Divisions

Basic List tags: <UL></UL>, <OL></OL>
List Elements:<LI></LI>

Definition List

<DL><DT></DT><DD></DD></DL>

Menu List

<MENU><LI></LI></MENU>

Directory List

<DIR><LI></LI></DIR>

List Tag Parameters

All Lists; makes the compact form: COMPACT

Unordered List

<UL TYPE=bullet type>

bullet type: DISC or CIRCLE or SQUARE>

Ordered List

<OL TYPE=numbering type START=n>
<LI TYPE=numbering type START=n>

numbering type: a or A or I or i

Images

<IMG SRC=url ALT=text WIDTH=n HEIGHT=n ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT BORDER=n HSPACE=n VSPACE=n>

<IMG> does not have a closing tag

Links

<A HREF=url|#label|url#label TARGET=target></A>

target is _blank | _self | _parent | _replace | _top or name of a part of a form

<A HREF=mailto:e-mailAddress></A>
<A NAME=name>

Special Characters

Reference: http://www.htmlhelp.com/reference/charset/

Tables - positioning

<TABLE ALIGN=LEFT|RIGHT|CENTER BORDER=n CELLSPACING=n CELLPADDING=n WIDTH=n HEIGHT=n>
<TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM NOWRAP COLSPAN=n ROWSPAN=n HEIGHT=n WIDTH=n BGCOLOR=color>
<TH> - same as <TD>; bold and centered

Forms - gathering data

<FORM ACTION=url METHOD=GET|POST>
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|FILE|BUTTON|HIDDEN|SUBMIT|RESET" NAME=name VALUE=value CHECKED SIZE=n MAXLENGTH=n>
<SELECT NAME=name SIZE=n MULTIPLE>
<OPTION VALUE=value SELECTED>
</SELECT>
</FORM>
<BUTTON TYPE=SUBMIT|RESET|BUTTOM NAME=name VALUE=value>image and/or text</BUTTON>
<TEXTAREA WRAP=OFF|HARD|SOFT ROWS=n COLS=n NAME=name>
text that appears in the text area
</TEXTAREA>
<FORM METHOD=POST ENCTYPE="text/plain" ACTION= "mailto:weymouth@umich.edu">
<FORM METHOD=POST ENCTYPE="multipart/form-data" ACTION="upload.cgi">
<INPUT TYPE="image" SRC="myimage.gif" NAME="coords">

Changing Tab Order TABINDEX=N
(Also links and client-side image maps)

Keyboard Shortcuts(IE only?)

<INPUT ... ACCESSKEY=c >
Disable Form Elements: DISABLE
Make Form Element Read Only: READONLY

Client side Image Maps

<MAP NAME=name>
<AREA SHAPE=DEFAULT|RECT|CIRCLE|POLY COORDS=coordinate_list HREF=url|NOHREF TARGET=target>
</MAP>
For RECT coordinate_list is left, top, right, bottom
For CIRCLE coordinate_list is center-x, center-y, radius
For POLY coordinate_list is x1,y1,x2,y2,x3,y3

Reference the map

<IMG ... USEMAP="#name">
<IMG ... USEMAP="url#name">

Example of Client-side Map

<MAP NAME="split">
<AREA SHAPE=RECT COORDS=0,0,25,25 HREF="goLeft.url">
<AREA SHAPE=RECT COORDS=25,0,50,25 HREF="goRight.url">
</MAP>
<IMG SRC="signpost.gif" USEMAP="split">

Frameset and Frame tags

<FRAMESET ROWS=i,j,k,* COLS=i,j,k BORDER=n BORDERCOLOR=color FRAMESPACING=n>
<FRAME SRC=url NAME=name MARGINWIDTH=n MARGINHEIGHT=n SCROLLING=YES|NO|AUTO NORESIZE FRAMEBORDER=YES|NO BORDERCOLOR=color>
</FRAMESET>

Requires one file for the frameset and frame tags and one file each for the content of each frame (a frameset with 4 panels requires 5 files)
Framesets can be embedded within a framesets (typically, a frameset is divided horizontally or vertically, not both)

Inline frames

Same attributes as frames with two additional to define where it is within the page <IFRAME ... WIDTH=n HEIGHT=n>

CSS

An example

<STYLE TYPE="text/css">
H1, H2, H3 {color:red}
P {color:blue}
</STYLE>

Think of each tag as a "container"

<P>Text</P> contains a paragraph
<H1>Heading</H1> contains a heading, level 1

Each container has a style:
Absolution position, relative position...
Color, font, indentation, visibility...
Each style statement in the CSS controls some of the style attributes of all containers of a particular type (e.g. all the <P> containers).

The basic syntax of a style sheet

<STYLE TYPE="text/css"> <!-- element-selector-list{style-attribute1; style-atrribute2; ...}
style-sheet-rule2
style-sheet-rule3
style-sheet-rule4
.
.
.
</STYLE>

Setting Style Rules

Imported style sheet (in between the <HEAD> and </HEAD> tags)

<LINK REL=STYLESHEET TYPE="text/css" HREF="url">

A style sheet my be in line in between the <HEAD> and </HEAD> tags as shown before inline over rides import
A style can be defined locally within a tag over rides import and in line

<P STYLE="color:normal">

Basic Rules - Background

BODY {background-color: color; background-image: url(url); background-repeat: repeat|no-repeat; background-repeat: repeat-x|repeat-y; background-position: center}
BODY {background-color: light-blue}
BODY {background-image: url("bkg.jpg")}

Basic Rules - Fonts

BODY {font-family: Verdana, Arial, Helvetica, sans-serif} h1, h2, h3, h4, h5, h6 {font-family: "Minion Web", Palatino, "Times New Roman", sans-serif}

Note the use of quotations around font names of more than one word

H1 {font-size: 140%; color: tan}
H3 {font-size: 120%; background: yellow}

Font Size

P {font-size: 10pt}
P {font-size: 10px}
P {font-size: 50%}
xx-small x-small small medium large x-large or xx-large
larger or smaller
P {font-size: large}

Font style and weight

P {font-style: normal|italic|oblique}
P {font-weight: normal|bold}
P {font-weight: bolder|lighter}
P {font-weight: 100-900}

Multiples of 100; 400 is normal; 700 is bold

Line Height

Line height is the space between lines in a paragraph

P {line-height: n} - in lines of font
P {line-height: 20%}
P {line-height: 10px}
P {line-height: 12pt}

All-in-one font specification
Size and font family are required
All others are optional

{font: style weight small-caps size/line-height list-of-font-families}
P {font: italic bold 24pt sans-serif}
ol li {font: bold 24pt/15pt sans-serif}
h3 {font: bold small-caps 24pt/15pt "Times Roman", serif}

Link States

A:link {color: #ffcccc}
A:visited {color: #ff99cc}
A:active {color: #ff66cc}
A:hover {color: #ff33cc}

Selection by ID

Rule: P#big {font: 32pt/5pt serif}
Text: <P id=big>This is big text.</P>

Selection by Class

Rule: P.intro {font: 12pt/5pt sans-serif}
Text: <P class=intro>This is an intro.</P>

Both can be generalized; for example

#big {font: 12pt/5pt serif} .intro {font: 12pt/5pt sans-serif}

Define "new tags" with DIV and SPAN

Use the <DIV> tag for "block like" structures (think <P>)
Use the <SPAN> tag for "in line" structures (think <B>)
For example...
Rule :tiny {font-size 20%} Text <div class=tiny> ...

Selectors

Any HTML element...
Class Selectors (as shown previously)
ID Selectors (as shown previously)
ID selectors usually individually assigned
This selector type should only be used sparingly due to its inherent limitations.

Contextual Selectors

Contextual selectors are for elements within elements
P EM {background: yellow}

Grouping

H1, H2, H3, H4, H5, H6 {color: red; font-family: sans-serif}

Text background

P {background: #ffcccc} P {background: url(url)}

Text spacing

P: {word-spacing: n; letter-spacing: n; text-indent: n} n is in pixels (px) or points (pt)

White space treatment

white-space: pre|nowrap|normal

Aligning Text

text-align: left|right|center|justify

Underlining Text

text-decoration: underline|overline|line-through

Lists

list-style: disk or circle or square or lower-alpha or upper-alpha or lower-roman or upper-roman or url(url) and (optionally) outside or inside

Relative Position

IMG {position:relative; top:0; left:2px; right:-40pt; bottom:0}

Absolute Position

IMG {position:absolute; top:0; left:2px; right:-40pt; bottom:10%}

Note: absolute positioned elements appear on top of other elements, unless order is specified using

z-index:n (larger numbers "on top")

Height, Width, Vertical Align

height:500; width:350

Or

width:20% vertical-align: baseline or middle or sub or super or text-top or text-bottom or top or bottom or percentage positive or negative

Border

border-type: border-size line-type border-style color

border-type is border or border-top or border-bottom or border-left or border-right
line-type is thick or medium or thin
border-style is none or dotted or dashed or solid or groove or ridge or inset or outset

Padding

padding-type: n

padding-type is padding or padding-top or padding-bottom or padding-left or padding-right
n is number of pixels or percent or element

Margins

margin-type: x

margin-type is margin or margin-top or margin-bottom or margin-left or margin-right

x is in pixels or percentage of element

Cascading - background

Rules follow containment
a <DIV> contains a <P> contains a <B>
a rule on the <DIV> applies to the contained <P> and <B>
a rule on the <P> applies to the contained <B> but not to the <DIV>
Rules follow specificity (class, id...)
Rules follow order

Cascading

Over ride all rules of what should apply with

BODY {background: url(bar.gif) white; background-repeat: repeat-x ! important}

Priority: ID, Class, regular HTML tags In file order with last most important

Controlling for different media and printing

<html>
<head>
<style>
@media screen {p.test {font-family:verdana, sans-serif; font-size:14px}}
@media print {p.test {font-family:times,serif; font-size:10px}}
@media screen,print {p.test {font-weight:bold}}
</style>
</head>
<body>
....
</body>
</html>

Media types

Used for all media type devices

aural - Used for speech and sound synthesizers
braille - Used for Braille tactile feedback devices
embossed - Used for paged Braille printers
handheld - Used for small or handheld devices
print - Used for printers
projection - Used for projected presentations, like slides
screen - Used for computer screens
tty - Used for media using a fixed-pitch character grid, like teletypes and terminals
tv - Used for television-type devices

Relevant sites

http://www.w3.org/Style/CSS
http://www.w3schools.com/css
http://www.htmlhelp.com/reference/css

Valid HTML 4.0!