Lecture HTML Text and Tables HTML Text Tables
Lecture HTML: Text and Tables HTML Text Tables 1
Structured Text <P>The nine planets of the solar system are <SAMP>mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto. <SAMP></P> <P><I>Galileo</I> discovered moons of jupiter and saturn. </P> As <CITE>Galileo</CITE> once said, <I>The milky way is not a gas, but a mass of stars so numerous as to be beyond belief. </I> For more information examine <CITE>[World Book Encyc 99]</CITE>. To order this book, please refer to the following reference number: <STRONG>ISBN 0 -7166 -0081 -1</STRONG> HTML Text Tables 2
Browser Output HTML Text Tables 3
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 4
Paragraphs • The paragraph indicator <P> – 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: <P> This is the start of a paragraph containing a single sentence that makes use of three lines. </P> • there is an alignment attribute, but setting alignment via the style attribute is preferred <P ALIGN=left, center, right, justify> HTML Text Tables 5
Example - Paragraph and Alignment <html><head><title>Example of Paragraph tag</title> </head> <body> <P align=left> Callisto is the outermost of Jupiter’s four planetsized moons and is dominated by impact craters. Despite this, a few more interesting features are also visible. <P align=center> Among the most interesting features on Callisto are impact scars from tidally disrupted comets. Callisto is nearly as large as the planet Mercury. <P align=right> This indicates that the interior is approximately half water ice as well. </body></html> HTML Text Tables 6
Browser Output - Paragraph Alignment HTML Text Tables 7
Lists • There are five kinds of lists: definition, directory, menu, ordered, and unordered • All lists follow the same pattern: – <start tag of list> – <list item tag> – </ end tag of list> • directory and menu lists are deprecated HTML Text Tables 8
Definition Lists <DL> <DT>light year<DD>the distance light travels in one year <DT>asteroids<DD>are small, irregular shaped objects, mostly occurring between Mars and Jupiter </DL> HTML Text Tables 9
Example - Unordered Lists <HTML><HEAD><TITLE> Example of Unordered Lists</TITLE></HEAD> <BODY><H 1>planets and moons</H 1> <UL> <LI>Mars <UL><LI> deimos <UL> <LI>orbit: 23, 459 km from Mars <LI>diameter: 12. 6 km <LI>mass: 1. 8 e 15 kg </UL> <LI>phobos </UL> <LI>Jupiter <UL><LI>callisto<LI>europa<LI>ganymede<LI>io</UL></BODY></HTML> HTML Text Tables 10
Browser Output of Unordered Lists HTML Text Tables 11
Ordered Lists • Has the general form <OL><LI> first list item<LI> second list item</OL> • 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, iii I upper roman I, III, HTML Text Tables 12
Example - Ordered Lists <HTML><HEAD><TITLE> Example of Ordered Lists</TITLE></HEAD> <BODY><H 1>Planets and Moons as Ordered Lists</H 1> <OL START=4> <LI>Mars <OL type=A><LI>deimos <OL type=I><LI>orbit: 23, 459 km from Mars <LI>diameter: 12. 6 km <LI>mass: 1. 8 e 15 kg </OL> <LI>phobos </OL> <LI>Jupiter <OL type=A><LI>callisto<LI>europa<LI>ganymede <LI>io</OL></BODY></HTML> HTML Text Tables 13
Browser Output HTML Text Tables 14
Table Elements • <TABLE>, a tag used to define a table • <CAPTION>, a tag to label a table – Its attributes are ALIGN = top, bottom, left, right • <TH></TH> or <TD></TD>, 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 • <TR>, a tag that identifies a container for a row of table cells – Same attributes as TH and TD HTML Text Tables 15
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 16
Example - 3 rows x 2 cols <HTML> <HEAD> <TITLE>Table: 3 rows 2 Cols</TITLE> </HEAD> <BODY> <H 1>Table: 3 Rows 2 Cols</H 1> <TABLE BORDER> <CAPTION>MIME Content-Types</CAPTION> <TR><TD>application/postscript</TD><TD>Postscr ipt</TD> <TR><TD>application/rtf</TD><TD>MS Rich Text Format</TD> <TR><TD>application/x-pdf</TD><TD>Adobe Acrobat Format</TD> </TABLE></BODY></HTML> HTML Text Tables 17
Browser Output HTML Text Tables 18
Table Example Rowspan colspan <HTML><HEAD> <TITLE>Table: Rowspan and Colspan</TITLE> </HEAD> <BODY> <H 1>Table: Row. Span and Col. Span</H 1> <TABLE BORDER> <CAPTION>MIME Content-Types</CAPTION> <TR><TH ROWSPAN=4>Items</TH><TH colspan=2>Types and Their Meaning</TH> <TR><TD>application/postscript</TD><TD>Postscript </TD> <TR><TD>application/rtf</TD><TD>MS Rich Text Format</TD> <TR><TD>application/x-pdf</TD><TD>Adobe Acrobat Format</TD> </TABLE></BODY></HTML> HTML Text Tables 19
Browser Output HTML Text Tables 20
Example - Cell Alignment <HTML><HEAD> <TITLE>Table: Aligning Cell Data</TITLE> </HEAD><BODY> <H 1>Table: Aligning Cell Data</H 1> <TABLE BORDER> <CAPTION>MIME Content-Types</CAPTION> <TR><TH ROWSPAN=4 valign=top>Items</TH><TH colspan=2>Types and Their Meaning</TH> <TR><TD>application/postscript</TD><TD align=right>Postscript</TD> <TR><TD align=center>application/rtf</TD><TD>MS Rich Text Format</TD> <TR><TD align=right>application/xpdf</TD><TD>Adobe Acrobat Format</TD> </TABLE></BODY></HTML> HTML Text Tables 21
Browser Output - Cell Alignment HTML Text Tables 22
Example cell padding and spacing <HTML><HEAD> <TITLE>Table: Cell Padding and Spacing</TITLE> </HEAD><BODY> <H 1>Table: Cell Padding and Spacing</H 1> <TABLE CELLPADDING=5 CELLSPACING=20 BORDER> <CAPTION>MIME Content-Types</CAPTION> <TR><TH ROWSPAN=4 valign=top>Items</TH><TH colspan=2>Types and Their Meaning</TH> <TR><TD>application/postscript</TD><TD align=right>Postscript</TD> <TR><TD align=center>application/rtf</TD><TD>MS Rich Text Format</TD> <TR><TD align=right>application/xpdf</TD><TD>Adobe Acrobat Format</TD> </TABLE></BODY></HTML> HTML Text Tables 23
Browser Output- cell padding and spacing HTML Text Tables 24
Table Example: Surprise Quiz <HTML><HEAD><TITLE>Table: Pop Quiz</TITLE> </HEAD><BODY><H 1>Table: Pop Quiz</H 1> <H 2>Draw the table described here</H 2> <TABLE BORDER> <TR><TD>Datal</TD><TD rowspan=2>Data 2</TD> <TD>Data 3</TD> <TR><TD>Data 4</TD><TD>Data 5</TD></TABLE> <H 2>Draw the table described here</H 2> <TABLE BORDER> <TR><TH Rowspan=2 colspan=2></TH> <TH colspan=2>Average</TH> <TR><TH>Cost</TH><TH>Time</TH> <TR><TH Rowspan=2>Projects</TH> <TH>P 1</TH><TD>100</TD><TD>7</TD> <TR><TH>P 2</TH><TD>250</TD><TD>15</TD> HTML Text Tables </TABLE></BODY></HTML> 25
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 26
Example - character references <HTML><HEAD><TITLE>Example of Character References</TITLE></HEAD> <BODY> 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. </BODY></HTML> HTML Text Tables 27
Browser Output of Character References HTML Text Tables 28
- Slides: 28