ISP 523: Fundamentals of Information Technology

1
ISP 523 Fundamentals of Information Technology

• Instructor Stephen Lackey
• September 28, 2005

2
Class Notes

• This week
• HTML Review
• CSS Review
• What to do in lab today
• Project 3 (due 10/12/2005) 2 weeks
• HTML Quiz (due 10/19/2005) 3 weeks

3
HTML Review

• HTML
• Document Structure
• Data structures
• Colors
• Cascading Style Sheets

4
Basic HTML structure

• Basic structure head, body
• Head contains metadata about document
• Body contains content (document)

5
Structured documents

• Logical vs. physical styles
• What is the purpose of logical styles?
• Examples?
• What do they accomplish?
• How are they related to CSS?
• What is the purpose of physical styles?
• Examples?
• What do they accomplish?
• How are they related to CSS?

6
HTML data structures

• Lists
• Represent complex linear data
• Can be nested
• Can be numbered or bulleted
• Can specify numbering scheme
• Best rendered with CSS

• Tables
• Represent rectilinear data
• conventional data tables
• Used to create 2-D structure of page
• Can be nested
• Simple row-based structure
• Can have highly complex layout options
• Best rendered with CSS

7
Images

• Can consist of several file types including GIF,
  JPEG, PNG (to be covered later in semester)
• Can be
• resized
• aligned with surrounding text
• placed into tables
• used as menus
• swapped (rollovers) with javascript (to be
  covered later)
• Best controlled with CSS

8
Colors

• Colors defined by name or RGB values
• RGB values using two byte 16-bit characters (i.e.
  0-9,A-F)
• 0 00
• 255 FF
• Values separated RR GG BB
• 00 00 00 (000000) black
• 255 255 255 (FFFFFF) white
• 255 00 00 (FF0000) red
• 00 255 00 (00FF00) green
• 00 00 255 (0000FF) blue

9
CSS quick overview

• CSS term Selector HTML Element
• Selector property value
• P color blue
• BODY font serif font-weight normal
• OL
• LI color red

10
CSS usage

• Within document
• ltHEADgt
• lttitlegttest CSS pagelt/titlegt
• ltSTYLE typetext/css mediascreengt
• lt!
• P color blue
• ?
• lt/stylegtlt/headgt

11
CSS DOs

• Do use CSS to specify
• Alignment
• Fonts
• Colors
• Typeface
• Borders
• And many, many others
• Use external style sheets for common properties
  in your pages (especially printable pages)
• Use internal style sheets for properties unique
  to the current page

12
CSS DONTS!

• CSS Selectors ARE NOT TAGS!!!!!
• Example
• ltSTYLE typetext/css mediascreengt
• lt!
• ltPgt color blue
• ?
• lt/stylegt
• HTML tags do not belong within the STYLE block
• Your HTML document must be well formed if you do
  not close tags correctly, CSS will not render
  properly

13
HTML Quiz

• Open Book all readings and slides
• Chapters 4, 8-13, 16-17
• Question from As We May Think
• Three sections
• Multiple choice with code samples
• Short answer (no more than 4 sentences)
• True/False

14
After the Quiz (next class)

• Content management topics
• Chapter 15 HTML Forms how to collect data
• Chapter 18 Server Side Includes (SSI) how to
  produce more complex web sites without programming

15
Lab / Homework Instructions

• Create a new page (page2.html)
• Create a fictional data table
• Label columns with titles (th)
• Utilize CSS properties to create borders around
• the table
• each cell where applicable
• These CSS properties specific to the current page
  should be in the head/style section
• Reference this page from your index page also
  use your default stylesheet on this page
• Refer to Project 3 handout for remainder of
  instructions