28
1 HTML Text Tables Lecture HTML: Text and Tables
| Date post: | 21-Dec-2015 |
| Category: |
Documents |
| View: | 238 times |
| Download: | 1 times |
1HTML Text Tables
Lecture
HTML: Text and Tables
2HTML Text Tables
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>
3HTML Text Tables
Browser Output
4HTML Text Tables
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.
5HTML Text Tables
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>
6HTML Text Tables
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 planet-sized 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>
7HTML Text Tables
Browser Output - Paragraph Alignment
8HTML Text Tables
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>– <list item tag>– <list item tag>– </ end tag of list>
• directory and menu lists are deprecated
9HTML Text Tables
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>
10HTML Text Tables
Example - Unordered Lists
<HTML><HEAD><TITLE>Example of Unordered Lists</TITLE></HEAD><BODY><H1>planets and moons</H1><UL><LI>Mars <UL><LI> deimos
<UL> <LI>orbit: 23,459 km from Mars<LI>diameter: 12.6 km<LI>mass: 1.8e15 kg
</UL> <LI>phobos </UL><LI>Jupiter<UL><LI>callisto<LI>europa<LI>ganymede<LI>io</UL></UL></BODY></HTML>
11HTML Text Tables
Browser Output of Unordered Lists
12HTML Text Tables
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, ii, iii
I upper roman I, II, III,
13HTML Text Tables
Example - Ordered Lists<HTML><HEAD><TITLE>
Example of Ordered Lists</TITLE></HEAD>
<BODY><H1>Planets and Moons as Ordered Lists</H1>
<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.8e15 kg
</OL>
<LI>phobos
</OL>
<LI>Jupiter
<OL type=A><LI>callisto<LI>europa<LI>ganymede
<LI>io</OL></OL></BODY></HTML>
14HTML Text Tables
Browser Output
15HTML Text Tables
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
16HTML Text Tables
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
17HTML Text Tables
Example - 3 rows x 2 cols
<HTML>
<HEAD>
<TITLE>Table: 3 rows 2 Cols</TITLE>
</HEAD>
<BODY>
<H1>Table: 3 Rows 2 Cols</H1>
<TABLE BORDER>
<CAPTION>MIME Content-Types</CAPTION>
<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>
18HTML Text Tables
Browser Output
19HTML Text Tables
Table Example Rowspan colspan
<HTML><HEAD>
<TITLE>Table: Rowspan and Colspan</TITLE>
</HEAD>
<BODY>
<H1>Table: RowSpan and ColSpan</H1>
<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>
20HTML Text Tables
Browser Output
21HTML Text Tables
Example - Cell Alignment<HTML><HEAD>
<TITLE>Table: Aligning Cell Data</TITLE>
</HEAD><BODY>
<H1>Table: Aligning Cell Data</H1>
<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/x-pdf</TD><TD>Adobe Acrobat Format</TD>
</TABLE></BODY></HTML>
22HTML Text Tables
Browser Output - Cell Alignment
23HTML Text Tables
Example cell padding and spacing
<HTML><HEAD>
<TITLE>Table: Cell Padding and Spacing</TITLE>
</HEAD><BODY>
<H1>Table: Cell Padding and Spacing</H1>
<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/x-pdf</TD><TD>Adobe Acrobat Format</TD>
</TABLE></BODY></HTML>
24HTML Text Tables
Browser Output- cell padding and spacing
25HTML Text Tables
Table Example: Surprise Quiz<HTML><HEAD><TITLE>Table: Pop Quiz</TITLE>
</HEAD><BODY><H1>Table: Pop Quiz</H1>
<H2>Draw the table described here</H2>
<TABLE BORDER>
<TR><TD>Datal</TD><TD rowspan=2>Data2</TD>
<TD>Data3</TD>
<TR><TD>Data4</TD><TD>Data5</TD></TABLE>
<H2>Draw the table described here</H2>
<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>P1</TH><TD>100</TD><TD>7</TD>
<TR><TH>P2</TH><TD>250</TD><TD>15</TD>
</TABLE></BODY></HTML>
26HTML Text Tables
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.
27HTML Text Tables
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>
28HTML Text Tables
Browser Output of Character References
