Chapter 10 Databases and the Web

1
Lecture
HTML Text and Tables
2
Structured Text

• The nine planets of the solar system are
  mercury, venus, earth, mars, jupiter,
  saturn, uranus, neptune and pluto.
• Galileo discovered moons of jupiter and
  saturn.
• As Galileo once said, The milky
  way is not a gas, but a mass of stars so numerous
  as to be beyond belief.
• For more information examine World Book
  Encyc 99.
• To order this book, please refer to the
  following reference number ISBN
  0-7166-0081-1

3
Browser Output
4
Phrase Elements

• Phrase elements let the browser determine the
  presentation style
• EM Indicates emphasis.
• STRONG Indicates stronger emphasis.
• CITE Contains a citation or a reference to
  other sources.

5
Paragraphs

• The paragraph indicator
• Usually attached at the end of the paragraph
• Causes a new line and whitespace to be generated
• Pairs of paragraph indicators can also be used
• This is the start of a paragraph
• containing a single sentence that makes
• use of three lines.
• there is an alignment attribute, but setting
  alignment via the style attribute is preferred

6
Example - Paragraph and Alignment

• Example of Paragraph
  tag
• Callisto is the outermost of Jupiters four
  planet-sized moons and is dominated by impact
  craters. Despite this, a few more interesting
  features are also visible.
• Among the most interesting features on Callisto
  are impact scars from tidally disrupted comets.
  Callisto is nearly as large as the planet
  Mercury.
• This indicates that the interior is approximately
  half water ice as well.

7
Browser Output - Paragraph Alignment
8
Lists

• There are five kinds of lists definition,
  directory, menu, ordered, and unordered
• All lists follow the same pattern
• directory and menu lists are deprecated

9
Definition Lists

• light yearthe distance light travels
  in one year
• asteroidsare small, irregular shaped
  objects, mostly occurring between Mars and
  Jupiter

10
Example - Unordered Lists

• Example of Unordered Lists
• planets and moons
• • Mars
  • • deimos
    • • orbit 23,459 km from Mars
      • diameter 12.6 km
      • mass 1.8e15 kg
    • phobos
  • Jupiter
  • • callisto
    • europa
    • ganymede
    • io

11
Browser Output of Unordered Lists
12
Ordered Lists

• Has the general form
• 1. first list item
  2. second list
     item
• START attribute can initialize the sequence to a
  number other than 1
• TYPE attribute can be used to select the
  numbering style
• Type Name Style
• 1 arabic 1, 2, 3, ...
• a lower alpha a, b, c, ...
• A upper alpha A, B, C, ...
• i lower roman i, ii, iii
• I upper roman I, II, III,

13
Example - Ordered Lists

• Example of Ordered Lists
• Planets and Moons as Ordered Lists
• 2. Mars
  3. 1. deimos
     2. 1. orbit 23,459 km from Mars
        3. diameter 12.6 km
        5. mass 1.8e15 kg
     4. phobos
  5. Jupiter
  6. 1. callisto
     2. europa
     3. ganymede
     5. io

14
Browser Output
15
Table Elements

• , a tag used to define a table
• , a tag to label a table
• Its attributes are ALIGN top, bottom, left,
  right
• or , tags that identify a
  table header cell and table data cell
• Headers are the same as data except they use bold
  font and are centered
• , a tag that identifies a container for a row
  of table cells
• Same attributes as TH and TD

16
Facts about Tables

• Table data can be text, lists, images, forms,
  figures, or even tables
• Table headers are typically rendered in boldface,
  and table data is typically rendered in the
  regular font and point size
• A table has an optional caption followed by rows
• Table rows are said to contain table headers and
  table data
• The browser will set the number of columns to be
  the greatest number of columns in all of the rows
• Blank cells are used to fill extra columns in the
  rows

17
Example - 3 rows x 2 cols

• Table 3 rows 2 Cols
• Table 3 Rows 2 Cols
• MIME Content-Types
• application/postscriptPostscript/TD
• application/rtfMS Rich Text
  Format
• application/x-pdfAdobe Acrobat
  Format

18
Browser Output
19
Table Example Rowspan colspan

• Table Rowspan and Colspan
• Table RowSpan and ColSpan
• MIME Content-Types
• ItemsTypes
  and Their Meaning
• application/postscriptPostscript/TD
• application/rtfMS Rich Text
  Format
• application/x-pdfAdobe Acrobat
  Format

20
Browser Output
21
Example - Cell Alignment

• Table Aligning Cell Data
• Table Aligning Cell Data
• MIME Content-Types
• Itemscolspan2Types and Their Meaning
• application/postscriptalignrightPostscript
• application/rtfMS
  Rich Text Format
• application/x-pdfAdob
  e Acrobat Format

22
Browser Output - Cell Alignment
23
Example cell padding and spacing

• Table Cell Padding and Spacing
• Table Cell Padding and Spacing
• MIME Content-Types
• Itemscolspan2Types and Their Meaning
• application/postscriptalignrightPostscript
• application/rtfMS
  Rich Text Format
• application/x-pdfAdob
  e Acrobat Format

24
Browser Output- cell padding and spacing
25
Table Example Surprise Quiz

• Table Pop Quiz
• Table Pop Quiz
• Draw the table described here
• DatalData2
• Data3
• Data4Data5
• Draw the table described here
• Average
• CostTime
• Projects
• P11007
• P225015

26
Character references

• Character references in HTML may appear in two
  forms
• Numeric character references (either decimal or
  hexadecimal)
• 229 (in decimal) represents the letter "a"
  with a small circle above it (used, for example,
  in Norwegian).
• 60 represents left angle bracket
• 62 represents right angle bracket
• 38 represents ampersand sign
• 34 represents double quote
• Character entity references.
• "lt" represents the
• "gt" represents the sign.
• "amp" represents the sign.
• "quot represents the " mark.

27
Example - character references

• Example of Character
  References
• An unordered list in HTML starts with
  ltULgt, ends with 60/UL62 and every
  list item should begin with ltLIgt. The
  lt/LIgt is optional. For an attribute such as
  START"534 the double quotes are optional.

28
Browser Output of Character References