HTML Essentials

1
HTML Essentials

• Part 2

2
Cascading Style Sheets

• Attribute inheritance
• Each level inherits properties from the previous
  level
• Highest level style defined in an external file
• ltlink rel stylesheet typetext/css
  hrefexternal.cssgt
• Written in the header and links to an external
  doc called external.css
• External.css if written like the example below

body background ffcc33 color663300
font-familyhelvitica
3
Cascading Style Sheets

• Second level styles defined in a page header
• ltstylegt
• lt!
• body
• background ffcc33
• color663300
• font-familyhelvitica
• --gt
• lt/stylegt

4
Cascading Style Sheets

• Third Level block and text level styles
• Block Level
• ltbody stylebackground ffcc33 color663300
  font-familyhelviticagt
• Attributes are separated by semi-colons and
  assigned with a colon
• All grouped within the same quotation value
• ltdiv stylebackgoundccccffgt some block of
  contentlt/divgt
• Text Level
• ltspan stylefont-size20ptgttwenty point
  textlt/spangt
• Spans a certain style over a specified amount of
  content

5
Cascading Style Sheets

• Example External CSS File

body background ffcc33 color663300
font-familyhelvitica p font-family
century schoolbook h1 font-family
verdana
6
Cascading Style Sheets

• Selectors in a CSS File
• called using ltspan class selectorNamegt
• lt/spangt

.i font-style italic .highlight bac
kground ccccff
7
Cascading Style Sheets

• Measurement in CSS

p font-family century schoolbook font-size
12pt line-height 14pt or 140(relative to
text size) text-indent 1.5em This will
style all paragraphs with 12 point font, about
1.5 line spacing, and indent the first line like
a tab.
8
Tables

• Tables in HTML start and end with the following
  tags
• lttablegt .. lt/tablegt
• Within the lttablegt tags there are row tags
• lttrgt lt/trgt
• Within the row tags there are column tags
• ltthgt .. lt/thgt for column headers
• lttdgt .. lt/tdgt for normal columns

9
Tables

• Here is an example of a HTML table with 3 columns
  and 2 rows
• lttablegt
• lttrgt
• ltthgtrow 1, column 1lt/thgt
• ltthgtrow 1, column 2lt/thgt
• ltthgtrow 1, column 3lt/thgt
• lt/trgt
• lttrgt
• lttdgtrow 2, column 1lt/tdgt
• lttdgtrow 2, column 2lt/tdgt
• lttdgtrow 2, column 3lt/tdgt
• lt/trgt
• lt/tablegt

10
Forms

• Forms in HTML start and end with the following
  tags
• ltform methodpost actiongtlt/formgt
• To get text input use the following (ex. Get a
  users first name)
• ltinput namefirstName typetextgt
• For a radio button that allows a user to choose
  between more than on item use the following
• ltinput nameage typeradio value18-20gt
• For a list of checkbox items that allow a user to
  select multiple values use the following
• ltinput namesalary typecheckboxgt

11
Forms

• To give a large text input area use the following
  tag
• lttextarea cols30 rows5 namecommentsgtlt/textarea
  gt
• To create a submit button for your form use the
  following
• ltinput typebutton namesubmitgt

12
JavaScript Rollovers

• At this point in the course you will be given an
  HTML file that contains most of the javascript
  code and images that are needed. When we cover
  javascript in more detail you will create your
  own.
• The javascript element starts in the header tag
  with the following
• ltscript typetext/javascript languagejavascrip
  tgt
• lt/scriptgt

13
JavaScript Rollovers

• First we will look at a highlighting rollover
  that will include the following images
• "one-on.gif", "one-off.gif",
• "two-on.gif", "two-off.gif",
• "three-on.gif", "three-off.gif",
• "four-on.gif", "four-off.gif",
• "five-on.gif", "five-off.gif
• Notice that each image has an on and off version.
  The javascript rollover will basically tell the
  browser to switch from the on and off images.
  This creates the rollover highlight effect.

14
JavaScript Rollovers

• Now here is the table cell that contains the
  javascript that executes the rollover.
• lttdgt lta href""
• onMouseOver"swap('one',
  'one-on.gif')"
• onMouseOut"swap('one',
  'one-off.gif')"
• gtltimg src"one-off.gif" alt""
  nameone border0 width100 height15
• gtlt/agt
• lt/tdgt
• This would be repeated for each image where we
  only modify the swap source file and name in the
  image tag.