HTML Text Tables 1 Lecture HTML: Text and Tables

HTML Text 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

HTML Text Tables 3 Browser Output

HTML Text Tables 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.

HTML Text Tables 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

HTML Text Tables 6 Example - Paragraph and Alignment Example of Paragraph tag Callisto is the outermost of Jupiter’s 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.

HTML Text Tables 7 Browser Output - Paragraph Alignment

HTML Text Tables 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

HTML Text Tables 9 Definition Lists light year the distance light travels in one year asteroids are small, irregular shaped objects, mostly occurring between Mars and Jupiter

HTML Text Tables 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

HTML Text Tables 11 Browser Output of Unordered Lists

HTML Text Tables 12 Ordered Lists Has the general form first list item 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 TypeName Style 1arabic 1, 2, 3,... alower alpha a, b, c,... Aupper alpha A, B, C,... ilower roman i, ii, iii Iupper roman I, II, III,

HTML Text Tables 13 Example - Ordered Lists Example of Ordered Lists Planets and Moons as Ordered Lists Mars deimos orbit: 23,459 km from Mars diameter: 12.6 km mass: 1.8e15 kg phobos Jupiter callisto europa ganymede io

HTML Text Tables 14 Browser Output

HTML Text Tables 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

HTML Text Tables 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

HTML Text Tables 17 Example - 3 rows x 2 cols Table: 3 rows 2 Cols Table: 3 Rows 2 Cols MIME Content-Types application/postscript Postscr ipt application/rtf MS Rich Text Format application/x-pdf Adobe Acrobat Format

HTML Text Tables 18 Browser Output

HTML Text Tables 19 Table Example Rowspan colspan Table: Rowspan and Colspan Table: RowSpan and ColSpan MIME Content-Types Items Types and Their Meaning application/postscript Postscript application/rtf MS Rich Text Format application/x-pdf Adobe Acrobat Format

HTML Text Tables 20 Browser Output

HTML Text Tables 21 Example - Cell Alignment Table: Aligning Cell Data Table: Aligning Cell Data MIME Content-Types Items Types and Their Meaning application/postscript Postscript application/rtf MS Rich Text Format application/x- pdf Adobe Acrobat Format

HTML Text Tables 22 Browser Output - Cell Alignment

HTML Text Tables 23 Example cell padding and spacing Table: Cell Padding and Spacing Table: Cell Padding and Spacing MIME Content-Types Items Types and Their Meaning application/postscript Postscript application/rtf MS Rich Text Format application/x- pdf Adobe Acrobat Format

HTML Text Tables 24 Browser Output- cell padding and spacing

HTML Text Tables 25 Table Example: Surprise Quiz Table: Pop Quiz Draw the table described here Datal Data2 Data3 Data4 Data5 Draw the table described here Average Cost Time Projects P P

HTML Text Tables 26 Character references Character references in HTML may appear in two forms: –Numeric character references (either decimal or hexadecimal) å (in decimal) represents the letter "a" with a small circle above it (used, for example, in Norwegian). < represents left angle bracket > represents right angle bracket & represents ampersand sign " represents double quote –Character entity references. "<" represents the < sign. ">" represents the > sign. "&" represents the & sign. "" represents the " mark.

HTML Text Tables 27 Example - character references Example of Character References An unordered list in HTML starts with <UL>, ends with </UL> and every list item should begin with <LI>. The </LI> is optional. For an attribute such as START="5" the double quotes are optional.

HTML Text Tables 28 Browser Output of Character References