ISP 523: Fundamentals of Information Technology

1
ISP 523 Fundamentals of Information Technology

• Instructor Stephen Lackey
• September 14, 2005

2
Todays class

• Chapters 10 13
• Check the Wiki to read (and write!) additional
  lecture notes
• http//cgi.albany.edu6060/sl239263/wiki.cgi?ISP5
  23/Week3
• Coverage the body of an HTML document
• Lab paragraphs, links, lists try it out!
• Homework due before next class

3
The HTML container

• The HTML root contains two nodes (branches)
• ltheadgt
• ltbodygt
• These comprise the two basic structural elements
  of an HTML document
• ltHTMLgt
• ltHEADgtlt/HEADgt
• Contains document metadata (data about the
  document)
• ltBODYgtlt/BODYgt
• Contains document itself
• lt/HTMLgt

4
HTML Head (ch.9), Body (ch.10)

• ltHEADgt
• ltTITLEgtMy First Web Pagelt/TITLEgt
• ltMETA/gt
• ltBASE/gt
• ltLINK/gt
• ltSCRIPT/gt
• ltSTYLE/gt
• lt/HEADgt

• ltBODYgt
• ltH1gtMy main headinglt/H1gt
• ltpgtHello World!lt/pgt
• ltolgt
• ltligtfirst thing on listlt/ligt
• ltligtsecond thing on listlt/ligt
• lt/olgt
• lt/BODYgt

5
Other Structural Elements for Documents

• Logical Styles vs. Physical Styles
• Try to avoid physical styles
• Avoid ltFONTgt
• Use ltCENTERgt, ltbgt,lti gt sparingly
• styles best managed with Cascading Style Sheets
  (ch. 17)
• Use logical styles when possible

6
Block-level vs. inline elements

• Distinction is the elements impact on flow of
  document.
• Block-level elements begin and end with a new
  line. Examples
• Headings
• Paragraphs
• Lists
• Div (division)
• Inline elements do not change the flow of text
  (no new lines)
• Abbreviation
• Anchors (links)
• Span

7
Typical logical styles

• ltH1gtlt/H1gt through ltH6gtlt/H6gt
• headings up to 6 levels (use them logically, NOT
  to get the desired font size)
• ltpgtlt/pgt
• Paragraph general container for text
• ltcodegt
• ltblockquotegt

8
Lists

• Why lists?
• Represent hierarchal, nonlinear structure of
  typical data
• ltolgtlt/olgt ordered lists container (numbered, etc)
• ltulgtlt/ulgt unordered lists container (bulleted
  marker)
• Great for displaying complex or nonlinear
  information
• Each list item contained in ltligtlt/ligt tags

9
Special case Definition Lists

• Suited to listing keywords, definitions for a
  glossary
• Helps make web pages more accessible for visually
  impaired users, or other text-to-speech
  applications

10
Less common logical styles

• Why use these? Indicates meaning of content
• Makes web pages accessible
• Typically used with CSS styles (see ch. 17)
• Examples
• ltacronymgt marks an acronym
• ltcodegt programmer source code

11
Typical physical styles

• ltpregt preformatted text (keeps whitespace,
  including linefeeds, monospace font.)
• ltbr/gt break in text (line feed)
• lthr/gt horizontal line (break in text)
• ltbgt boldface
• ltIgt italics
• ltsubgt subscript ( I.e. the 2 in H2O)
• ltsupgt superscript (I.e.the 2 in emc2)
• Its preferable to use CSS whenever possible

12
What do div and span do?

• Create logical groups with a document spanning
  multiple elements and dividing it into sections
• apply styles to groups of tags
• ltdivgt vs. ltstylegt
• Div block-level

13
Chapter 11 Links

• ltLINKgt - always contained in ltheadgt tag
• ltagt - anchor always contained in ltbodygt
• Basic linking mechanism on the web
• Can be used to link to other documents on web
  site, or another web site
• Can be used to create a bookmark
• Can be used to jump to a bookmark on the current
  page, or to a bookmark on another web page

14
More about links

• Anchor tags always have an attribute (target of
  link)
• Href refers to target URL of anchor
• Hrefwww.albany.edu
• Hrefmybookmark
• Hrefmailtosl23923_at_albany.edu
• Anchors are containers
• lta hrefwww.albany.edu gtMy schoollt/agt

15
Image maps

• An image can be used to create HTML anchors
  (links)
• Regions of the image can be associated with
  specific URLs
• Not considered to be good for accessibility
  issues.

16
Special case the Head/Link tag

• The ltlinkgt tag in the ltheadgt portion of HTML
  associates the page with another resource
• Cascading Style Sheet
• (new) RSS file
• It does not appear in the body directly.
  However, its reference to (or failure to
  reference) the cascading style sheet can alter
  the appearance of the entire document.

17
Ch. 12 Adding images, hr

• Two HTML graphical elements
• Image ltimg/gt tags
• Allow the insertion of photos, other graphical
  images into HTML document
• Control presentation via attributes OR CSS
• Horizontal rule lthr/gt tags
• Add horizontal divider to page
• Non-structural presentation tag better replaced
  by CSS when possible

18
The Image ltimg/gt tag - required

• Required attributes
• Source (srcurl)
• Alttext description of image for non-graphical
  browsers
• Example
• ltimage src"images/HomeComputer.jpg"
  altfuturistic home computer/gt

19
The Image ltimg/gt tag

• Strongly Recommended
• Name (good for CSS or other DHTML)
• Height (in pixels)
• Width (in pixels)
• Example
• ltimage src"images/HomeComputer.jpg" height100
  width200 altfuturistic home computer
  namebwimage/gt

20
The Image ltimg/gt tag - imagemaps

• Some user interfaces use images for menus
• Click areas over image behave same as anchor lta
  HREFgt tags
• see Chapter 11 156-160
• Image defines usemapmymap
• ltMAP name mymapgt
• ltarea shaperect coords1,100,100,100
  hrefhttp//www.mytarget.comgt
• lt/MAPgt
• Usage decreasing in favor of other methods, such
  as table-based images, and, even better, VML /
  SVG

21
The Image ltimg/gt tag - misc

• Presentation attributes better left to CSS
• Bottom
• Center
• Left
• middle
• Right
• Top
• vspace

22
Horizontal rule lthr/gt

• Add horizontal divider to page
• Non-structural presentation tag better replaced
  by CSS when possible
• Can specify width in percent and pixels
• lthr width50 /gt
• lthr width300 /gt
• Can align left, right, center
• lthr width50 aligncenter/gt

23
Chapter 13 tables

• Basic structure for rectilinear (tabular) data
• Organized in rows and columns
• However coded as rows and row cells
• Each row must define the same number of cells
  throughout the table
• Exception a cell can span more than one column,
  or more than one row

24
Sample table
lttablegt
lttrgt lttdgt First cell lt/tdgt lttdgt lt/tdgt
lttrgt
lt/tablegt