ITEC 745

1
ITEC 745

• Instructional Web Authoring I
• Instructor Ray Cole

Week 5
2
Recall from Last Week

• Tags
• Open lttaggt
• Close lt/taggt
• All at once (no separate open and close tags)
  lttag /gt
• Attributes
• Specify additional features of tags
• Always of the form attribute_nameattribute_valu
  e
• Example ltimg srcmyphoto.jpg altMy photo /gt

tag is img 1st attribute is srcmyphoto.jpg
2nd attribute is altMy photo
3
Unordered (Bulleted) Lists

• Bulleted lists are technically called unordered
  lists in HTML/XHTML
• ltulgt
• ltligtThis is the first List Itemlt/ligt
• ltligtThis is the second List Itemlt/ligt
• ltligtThis is the third List Itemlt/ligt
• lt/ulgt
• ltpgt Although I refer to the list items as
  first, second, and third, this is an
  unordered list, so the items are preceded by
  bullets, not numbers.lt/pgt

4
Ordered (Numbered) Lists

• Numbered lists are technically called Ordered
  lists in HTML/XHTML
• ltolgt
• ltligtThis is the first List Itemlt/ligt
• ltligtThis is the second List Itemlt/ligt
• ltligtThis is the third List Itemlt/ligt
• lt/olgt
• ltpgt Since this is an ordered list, each list
  item is preceded by a number, instead of a
  bullet.lt/pgt

5
Definition Lists

• Definition lists are intended for marking lists
  of terms and definitions
• ltdlgt
• ltdtgtThis is term 1lt/dtgt
• ltddgtThis is term 1s definitionlt/ddgt
• ltdtgtThis is term 2lt/dtgt
• ltddgtThis is term 2s definitionlt/ddgt
• lt/dlgt
• ltpgtTo maintain the structure, not layout
  philosophy of the web, you should only use
  definition lists for terms and definitions, not
  for managing indents.lt/pgt

6
HTML/XHTML Comments

• You can place comments in your HTML/XHTML code
• Anything between the comment markers is ignored
  by the web browser, but can still be useful as a
  way to provide notes to human readers of your
  code (or to yourself)
• lt!-- begins a comment
• --gt ends a comment
• Comments can span multiple lines of code and
  content
• Example
• lt!-- This is a comment. It
  will be ignored by the web browser. --gt

7
Cascading Style Sheets (CSS)

• Lets look at a simple CSS file. Suppose the
  following CSS code is saved in a file called
  itec745.css
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff

Sets the background color to a dark burgundy red
Sets the font to Arial (PC) or Helvetica (Mac)
Sets font color to white
8
Cascading Style Sheets (CSS)
9
Cascading Style Sheets (CSS)

• A closer look at the elements of this CSS entry
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff
• Color specifications (cont.)
• The first two hexadecimal digits specify how much
  red you want 00 none, FF the maximum amount
• The second two hex digits specify how much green
  you want 00 none, FF the maximum amount
• The last two hex digits specify how much blue you
  want 00 none, FF the maximum amount
• The final color is the result of mixing the
  specified amounts of red, green and blue.

10
Cascading Style Sheets (CSS)

• A closer look at the elements of this CSS entry
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff
• Font-size specifications
• Lots of ways to specify font-size
• Pixels 20px
• Point Size 12pt
• Percentage 120
• Ems 1em

Fixed size, cant be changed in users browser
Relative size, can be changed in users browser
more friendly to the visually impaired
11
Cascading Style Sheets (CSS)

• A closer look at the elements of this CSS entry
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff
• Font-size specifications
• Lots of ways to specify font-size
• Pixels 20px
• Point Size 12pt
• Percentage 120
• Ems 1em

Increasingly, the differences between fixed and
relative font size specifications are
disappearing. For example, in Internet Explorer
8, View?Text Size is unable to resized fonts
specified in px or pt units. However, View?Zoom
is able to resize these fonts.
Fixed size, cant be changed in users browser
Relative size, can be changed in users browser
more friendly to the visually impaired
12
Cascading Style Sheets (CSS)

• A closer look at the elements of this CSS entry
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff
• Font-family lists
• Fonts must be identified by their names on the
  destination system. Spell them exactly as they
  are spelled on the computer where the page will
  be viewed.
• The browser will try each font in your list, in
  order from first-listed to last-listed, until it
  finds one that is installed and available to it.
  So effectively, it is a list of alternates,
  presented in order from most desired to least.

13
Cascading Style Sheets (CSS)

• A closer look at the elements of this CSS entry
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff
• Font-family lists (cont.)
• Two kinds of font-families
• Specific names a particular font family (e.g.,
  MS Comic Sans)
• Generic names a generic family to which many
  specific fonts belong

14
Cascading Style Sheets (CSS)

• A closer look at the elements of this CSS entry
• body
• background-color 990033
• font-size 20px
• font-family Arial, Helvetica, sans-serif
• color ffffff
• Font-family lists (cont.)
• Three generic font-families
• Serif fonts that have feet such as Times New
  Roman and Georgia
• Sans-serif fonts that have no feet such as
  Arial, Helvetica, and Trebuchet
• Monospace fonts whose letters are not
  proportionally spaced (i.e., an i takes up as
  much horizontal space as an m) such as Courier
  New and Andele Mono
• Generic font-families make good defaults, in case
  none of the specific font-families listed earlier
  in the list are present. Any font on the system
  that belongs to the generic font-family can be
  used to satisfy the CSS request.

15
Cascading Style Sheets (CSS)

• Any HTML/XHTML tag can be given a CSS
  specification in the CSS file, e.g.
• blockquote
• font-family Times New Roman, Times,
  Georgia, serif
• font-style italic
• color 0033ff
• p
• font-family Arial, Helvetica, sans-serif

16
Cascading Style Sheets (CSS)

• Attach your CSS code to your HTML file with the
  ltlinkgt tag
• ltlink hrefitec745.css relstylesheet
  typetext/css /gt
• The ltlinkgt tag must be placed in the head section
  of your page
• ltheadgt
• ltlink hrefitec745.css relstylesheet
  typetext/css /gt
• lttitlegtTitle of My Page Using CSSlt/titlegt
• lt/headgt

17
This Week
CSS for anchor tags,HTML/XHTML Tables
18
CSS for Anchor (ltagt) Tags

• Recall that any XHTML tags look can be redefined
  by giving it an entry in your CSS file.
• In particular, the anchor tag can be given, say,
  a new color by giving it a CSS entry
• a
• color 0000ff
• However, links (anchors) have different states
  (e.g., visited or not). What to do about them?

19
CSS for Anchor (ltagt) Tags

• Pseudo-classes let you individually address each
  of the possible states of a link
• alink
• color 0000ff
• avisited
• color ff0000
• ahover
• color 00ff00
• aactive
• color cccc00

20
CSS for Anchor (ltagt) Tags

• Youre not limited to just changing the color
• alink
• color 0000ff
• text-decoration none
• avisited
• color ff0000
• text-decoration none
• ahover
• color 00ff00
• text-transform uppercase
• font-weight bold
• background-color cc0099
• aactive
• color cccc00
• text-decoration none

21
CSS for Anchor (ltagt) Tags

• alink and avisited must come before ahover in
  the CSS definition in order to be effective!!
• ahover must come before aactive in the CSS
  definition in order to be effective!!
• This means there are only 2 correct orders
• OK OK
• alink color 0000ff avisited
  color ff0000
• avisited color ff0000 alink
  color 0000ff
• ahover color 00ff00 ahover
  color 00ff00
• aactive color cccc00 aactive
  color cccc00

22
Broken CSS Support in IE

• For reasons known only to Microsoft, Internet
  Explorer has been designed to ignore all CSS tags
  after the 30th. Only the first 30 tag rules will
  be applied in Internet Explorer (vers. 4 8).
  Microsoft documents this at their knowledge base
  without further explanation as to why this limit
  is in place http//support.microsoft.com/kb/26216
  1
• Keep this limit in mind if you need your page to
  render properly in IE. Unfortunately, thats most
  public-facing web sites because IE is so
  prevalent. And even many corporate intranets have
  set IE as their standard browser. ?

23
Tables
XHTML/XHTML Tables
24
Displaying Tabular Data

• Tim Berners-Lee invented the World Wide Web with
  the express purpose of creating an
  information-sharing infrastructure.
• Frequently, information is most conveniently
  captured in a table.
• How can you present tabular data in HTML/XHTML?
• Answer With HTML/XHTML tables!

25
Displaying Tabular Data (cont.)
table width 300px border-style
solid border-color 000000
border-width 2px th border-style
solid border-color 000000
border-width 1px background-color
0066ff color ffffff font-family
Helvetica, Arial, sans-serif font-weight
bold font-style italic td
border-style solid border-color 000000
border-width 1px avisited color
ff0000 text-decoration none

• lthtmlgt
• ltheadgt
• ltlink href"itec745.css" rel"stylesheet"
  type"text/css" /gt
• lttitlegtTables for Displaying Tabular
  Datalt/titlegt
• lt/headgt
• ltbodygt
• lth1gtTables for Displaying Tabular Datalt/h1gt
• ltpgtHere's an example of a table used for
  displaying tabular datalt/pgt
• lttablegt
• lttrgt
• ltthgtStatelt/thgt
• ltthgtJuly 2005 Populationlt/thgt
• lt/trgt
• lttrgt
• lttdgtAlabamalt/tdgt
• lttdgt4,557,808lt/tdgt
• lt/trgt
• lttrgt

26
Displaying Tabular Data (cont.)

• Tables consist of 4 main tags
• lttablegt and lt/tablegt mark the beginning and end
  of the table, respectively.
• lttrgt and lt/trgt mark the beginning and end of each
  table row of the table, respectively.
• ltthgt and lt/thgt mark the beginning and end of each
  table header cell, respectively.
• lttdgt and lt/tdgt mark the beginning and end of each
  table data cell, respectively.

27
Displaying Tabular Data (cont.)

• Although the web browser doesnt care what your
  indenting looks like, keeping your tags neatly
  organized is critical otherwise, you will
  quickly get lost when creating tables!

28
Displaying Tabular Data (cont.)

• Recommended table code format
• lttablegt
• lttrgt
• ltthgtheader for column 1lt/thgt
• ltthgtheader for column 2lt/thgt
• lt/trgt
• lttrgt
• lttdgtdata r1c1lt/tdgt
• lttdgtdata r1c2lt/tdgt
• lt/trgt
• lt/tablegt

Let the lttablegt and lttrgt tags be at the same
indentation level.
Indent the ltthgt or lttdgt tags 4 spaces from the
lttrgt tags that contain them.
For ltthgt and lttdgt cells that have small amounts
of content, place the open tag, cell content, and
close tag for each cell together on their own
line.
29
Displaying Tabular Data (cont.)

• For cells that contain multi-line data, put the
  lttdgt and lt/tdgt tags on their own lines, with the
  multi-line content on the lines between them,
  indented 4 additional spaces
• lttrgt
• lttdgt
• Multi-line content goes here,
• indented an additional 4 spaces.
• lt/tdgt
• lt/trgt

30
In-class Exercise
Note table width500px table header
background color339900

• In-class Exercise
• Go to http//www.factmonster.com/ipka/A0004986.htm
  l and create a web page that displays the 2004
  populations of all the states that begin with the
  letter C, along with their 2004 population
  rankings.

31
More CSS
CSS Classes
32
CSS Classes

• In the previous in-class example, you set the
  tables width to 500 pixels by creating a table
  entry in your CSS file
• table
• width 500px
• Does anyone see a problem with this?

33
CSS Classes

• In the previous in-class example, you set the
  tables width to 500 pixels by creating a table
  entry in your CSS file
• table
• width 500px
• Does anyone see a problem with this?
• What if you want some tables to be 500 pixels
  wide, and others to be 300 pixels wide?

34
CSS Classes

• The problem with re-defining the look of a basic
  HTML/XHTML tag is that it affects all instances
  of the named tag the same way. You often will
  want to have more control than that.
• The solution? CSS Classes!

35
CSS Classes

• In your CSS file, create an entry that begins
  with a dot (.), e.g.,
• .wide
• width 500px
• .narrow
• width 300px

36
CSS Classes

• CSS
• .wide
• width 500px
• .narrow
• width 300px
• .red-on-blue
• background-color 0000cc
• color cc0000
• .white-on-green
• background-color 006600
• color ffffff

• HTML
• lttable classwidegt
• lttrgt
• ltth classred-on-bluegtcol heading 1lt/thgt
• ltth classred-on-bluegtcol heading 2lt/thgt
• lt/trgt
• lttrgt
• lttd classwhite-on-greengtr 1, c 1lt/tdgt
• lttd classwhite-on-greengtr 1, c 2lt/tdgt
• lt/tdgt
• lt/tablegt

37
More CSS
CSS Colors
38
CSS Colors

• Colors can always be specified using the
  hexidecimal notation youve already learned
• ff003a max red, no green, small amount of blue
• There are also 16 pre-defined color names that
  you can use directly aqua, black, blue, fuchsia,
  gray, green, lime, maroon, navy, olive, purple,
  red, silver, teal, white, and yellow.

39
CSS Colors

• CSS
• .wide
• width 500px
• .narrow
• width 300px
• .red-on-blue
• background-color blue
• color red
• .white-on-green
• background-color green
• color white

• HTML
• lttable classwidegt
• lttrgt
• ltth classred-on-bluegtcol heading 1lt/thgt
• ltth classred-on-bluegtcol heading 2lt/thgt
• lt/trgt
• lttrgt
• lttd classwhite-on-greengtr 1, c 1lt/tdgt
• lttd classwhite-on-greengtr 1, c 2lt/tdgt
• lt/tdgt
• lt/tablegt

40
For Next Week

• Read lessons 5 and 6 of HTML.NETs free CSS
  tutorial at http//www.html.net/tutorials/css/
• Read SFSUs instructions for how to obtain space
  on the SFSU web server http//www.sfsu.edu/traini
  ng/ (next week well start uploading web pages to
  the remote server)
• Purchase Adobe Dreamweaver if you havent
  already. Well start using it next week.