Chapter 10 Databases and the Web

1
Lecture
HTML Text and Tables
2
Structured Text

• ltPgtThe nine planets of the solar system are
  ltSAMPgtmercury, venus, earth, mars, jupiter,
  saturn, uranus, neptune and pluto.ltSAMPgtlt/Pgt
• ltPgtltIgtGalileolt/Igt discovered moons of jupiter and
  saturn.lt/Pgt
• As ltCITEgtGalileolt/CITEgt once said, ltIgtThe milky
  way is not a gas, but a mass of stars so numerous
  as to be beyond belief.lt/Igt
• For more information examine ltCITEgtWorld Book
  Encyc 99lt/CITEgt.
• To order this book, please refer to the
  following reference number ltSTRONGgtISBN
  0-7166-0081-1lt/STRONGgt

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 ltPgt
• 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
• ltPgt This is the start of a paragraph
• containing a single sentence that makes
• use of three lines. lt/Pgt
• there is an alignment attribute, but setting
  alignment via the style attribute is preferred
• ltP ALIGNleft, center, right, justifygt

6
Example - Paragraph and Alignment

• lthtmlgtltheadgtlttitlegtExample of Paragraph
  taglt/titlegt
• lt/headgt ltbodygt
• ltP alignleftgt
• 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.
• ltP aligncentergt
• Among the most interesting features on Callisto
  are impact scars from tidally disrupted comets.
  Callisto is nearly as large as the planet
  Mercury.
• ltP alignrightgt
• This indicates that the interior is approximately
  half water ice as well.
• lt/bodygtlt/htmlgt

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
• ltstart tag of listgt
• ltlist item taggt
• ltlist item taggt
• ltlist item taggt
• lt/ end tag of listgt
• directory and menu lists are deprecated

9
Definition Lists

• ltDLgt
• ltDTgtlight yearltDDgtthe distance light travels
  in one year
• ltDTgtasteroidsltDDgtare small, irregular shaped
  objects, mostly occurring between Mars and
  Jupiter
• lt/DLgt

10
Example - Unordered Lists

• ltHTMLgtltHEADgtltTITLEgt
• Example of Unordered Listslt/TITLEgtlt/HEADgt
• ltBODYgtltH1gtplanets and moonslt/H1gt
• ltULgt
• ltLIgtMars
• ltULgtltLIgt deimos
• ltULgt ltLIgtorbit 23,459 km from Mars
• ltLIgtdiameter 12.6 km
• ltLIgtmass 1.8e15 kg
• lt/ULgt
• ltLIgtphobos
• lt/ULgt
• ltLIgtJupiter
• ltULgtltLIgtcallistoltLIgteuropaltLIgtganymedeltLIgtiolt/ULgt
• lt/ULgtlt/BODYgtlt/HTMLgt

11
Browser Output of Unordered Lists
12
Ordered Lists

• Has the general form
• ltOLgtltLIgt first list itemltLIgt second list
  itemlt/OLgt
• 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

• ltHTMLgtltHEADgtltTITLEgt
• Example of Ordered Listslt/TITLEgtlt/HEADgt
• ltBODYgtltH1gtPlanets and Moons as Ordered Listslt/H1gt
• ltOL START4gt
• ltLIgtMars
• ltOL typeAgtltLIgtdeimos
• ltOL typeIgtltLIgtorbit 23,459 km from Mars
• ltLIgtdiameter 12.6 km
• ltLIgtmass 1.8e15 kg
• lt/OLgt
• ltLIgtphobos
• lt/OLgt
• ltLIgtJupiter
• ltOL typeAgtltLIgtcallistoltLIgteuropaltLIgtganymede
• ltLIgtiolt/OLgtlt/OLgtlt/BODYgtlt/HTMLgt

14
Browser Output
15
Table Elements

• ltTABLEgt, a tag used to define a table
• ltCAPTIONgt, a tag to label a table
• Its attributes are ALIGN top, bottom, left,
  right
• ltTHgtlt/THgt or ltTDgtlt/TDgt, 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
• ltTRgt, 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

• ltHTMLgt
• ltHEADgt
• ltTITLEgtTable 3 rows 2 Colslt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtTable 3 Rows 2 Colslt/H1gt
• ltTABLE BORDERgt
• ltCAPTIONgtMIME Content-Typeslt/CAPTIONgt
• ltTRgtltTDgtapplication/postscriptlt/TDgtltTDgtPostscriptlt
  /TDgt
• ltTRgtltTDgtapplication/rtflt/TDgtltTDgtMS Rich Text
  Formatlt/TDgt
• ltTRgtltTDgtapplication/x-pdflt/TDgtltTDgtAdobe Acrobat
  Formatlt/TDgt
• lt/TABLEgtlt/BODYgtlt/HTMLgt

18
Browser Output
19
Table Example Rowspan colspan

• ltHTMLgtltHEADgt
• ltTITLEgtTable Rowspan and Colspanlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtTable RowSpan and ColSpanlt/H1gt
• ltTABLE BORDERgt
• ltCAPTIONgtMIME Content-Typeslt/CAPTIONgt
• ltTRgtltTH ROWSPAN4gtItemslt/THgtltTH colspan2gtTypes
  and Their Meaninglt/THgt
• ltTRgtltTDgtapplication/postscriptlt/TDgtltTDgtPostscriptlt
  /TDgt
• ltTRgtltTDgtapplication/rtflt/TDgtltTDgtMS Rich Text
  Formatlt/TDgt
• ltTRgtltTDgtapplication/x-pdflt/TDgtltTDgtAdobe Acrobat
  Formatlt/TDgt
• lt/TABLEgtlt/BODYgtlt/HTMLgt

20
Browser Output
21
Example - Cell Alignment

• ltHTMLgtltHEADgt
• ltTITLEgtTable Aligning Cell Datalt/TITLEgt
• lt/HEADgtltBODYgt
• ltH1gtTable Aligning Cell Datalt/H1gt
• ltTABLE BORDERgt
• ltCAPTIONgtMIME Content-Typeslt/CAPTIONgt
• ltTRgtltTH ROWSPAN4 valigntopgtItemslt/THgtltTH
  colspan2gtTypes and Their Meaninglt/THgt
• ltTRgtltTDgtapplication/postscriptlt/TDgtltTD
  alignrightgtPostscriptlt/TDgt
• ltTRgtltTD aligncentergtapplication/rtflt/TDgtltTDgtMS
  Rich Text Formatlt/TDgt
• ltTRgtltTD alignrightgtapplication/x-pdflt/TDgtltTDgtAdob
  e Acrobat Formatlt/TDgt
• lt/TABLEgtlt/BODYgtlt/HTMLgt

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

• ltHTMLgtltHEADgt
• ltTITLEgtTable Cell Padding and Spacinglt/TITLEgt
• lt/HEADgtltBODYgt
• ltH1gtTable Cell Padding and Spacinglt/H1gt
• ltTABLE CELLPADDING5 CELLSPACING20 BORDERgt
• ltCAPTIONgtMIME Content-Typeslt/CAPTIONgt
• ltTRgtltTH ROWSPAN4 valigntopgtItemslt/THgtltTH
  colspan2gtTypes and Their Meaninglt/THgt
• ltTRgtltTDgtapplication/postscriptlt/TDgtltTD
  alignrightgtPostscriptlt/TDgt
• ltTRgtltTD aligncentergtapplication/rtflt/TDgtltTDgtMS
  Rich Text Formatlt/TDgt
• ltTRgtltTD alignrightgtapplication/x-pdflt/TDgtltTDgtAdob
  e Acrobat Formatlt/TDgt
• lt/TABLEgtlt/BODYgtlt/HTMLgt

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

• ltHTMLgtltHEADgtltTITLEgtTable Pop Quizlt/TITLEgt
• lt/HEADgtltBODYgtltH1gtTable Pop Quizlt/H1gt
• ltH2gtDraw the table described herelt/H2gt
• ltTABLE BORDERgt
• ltTRgtltTDgtDatallt/TDgtltTD rowspan2gtData2lt/TDgt
• ltTDgtData3lt/TDgt
• ltTRgtltTDgtData4lt/TDgtltTDgtData5lt/TDgtlt/TABLEgt
• ltH2gtDraw the table described herelt/H2gt
• ltTABLE BORDERgt
• ltTRgtltTH Rowspan2 colspan2gtlt/THgt
• ltTH colspan2gtAveragelt/THgt
• ltTRgtltTHgtCostlt/THgtltTHgtTimelt/THgt
• ltTRgtltTH Rowspan2gtProjectslt/THgt
• ltTHgtP1lt/THgtltTDgt100lt/TDgtltTDgt7lt/TDgt
• ltTRgtltTHgtP2lt/THgtltTDgt250lt/TDgtltTDgt15lt/TDgt
• lt/TABLEgtlt/BODYgtlt/HTMLgt

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 lt sign.
• "gt" represents the gt sign.
• "amp" represents the sign.
• "quot represents the " mark.

27
Example - character references

• ltHTMLgtltHEADgtltTITLEgtExample of Character
  Referenceslt/TITLEgtlt/HEADgt
• ltBODYgt
• 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.
• lt/BODYgtlt/HTMLgt

28
Browser Output of Character References