Reading Assignment - HTML 2 4 General Structure of HTML 4 headings, setting style 4 Text,...

Reading Assignment - HTML 2 General Structure of HTML headings, setting style Text, paragraphs, and lists Anchors, Names and Links Images Tables frames and miscellaneous NOTE: Some of slides are extracted from the course notes of USC CS571 and Deitel & Associates.

These documents are copyrighted according to: either "Copyright © Ellis Horowits or PrenticeHall. All Rights Reserved.

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>

Browser Output

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. DFN: Indicates that this is the defining instance of the enclosed term. CODE: Designates a fragment of computer code. SAMP: Designates sample output from programs, scripts, etc. KBD: Indicates text to be entered by the user. VAR: Indicates an instance of a variable or program argument.

ABBR: Indicates an abbreviated form (e.g., WWW, HTTP, URI,

Mass., etc.).

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>

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>

Browser Output - Paragraph Alignment

Example of Pre-formatted Text

<HTML><HEAD><TITLE>Worstsort program</TITLE> </HEAD><BODY><H1>Worstsort program</H1>

<PRE>void worstsort (element list[], int n)

/* this may be the shortest sorting algorithm to write, but it is not very efficient*/

{ int i;

element temp;

100: for (i=0, i < n-1; i++)

if (list[i] > list[i+1])

{ temp=list{i};

list[i]=list[i+1];

list[i+1]=temp;

go to 100;

}

}</PRE></BODY></HTML>

Browser Output of Preformatted Text

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

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>

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>

Browser Output of Unordered Lists

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, Alternately one can use the <STYLE> tag

<STYLE type="text/css">

OL.withroman {list-style-type: lower-roman}</STYLE>

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>

Browser Output

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

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

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>

Browser Output

Table Example Rowspan colspan

<HTML><HEAD>

<TITLE>Table: Rowspan and Colspan</TITLE>

</HEAD>

<BODY>

<H1>Table: RowSpan and ColSpan</H1>

<TABLE BORDER>


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


Browser Output

Example - Cell Alignment

<HTML><HEAD>

<TITLE>Table: Aligning Cell Data</TITLE>

</HEAD><BODY>

<H1>Table: Aligning Cell Data</H1>

<TABLE BORDER>


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


Browser Output - Cell Alignment

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>


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


Browser Output- cell padding and spacing

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>


Frames

Frames permit you to divide the viewing area into a number of independent areas, each of which can contain its own HTML document

Frames can be resized The <FRAMESET> tag describes the rows or columns; the

<FRAME> tag describes the contents of the frame A multiframe document typically does not have a

<BODY> layout; <FRAMESET> is not recognized if placed after a <BODY> tag

Frame is a very useful tool to organize the contents of HTML (Similar effect of using menu)

Examples of Frames

• <FRAMESET ROWS="25%,50%,25%> <FRAME SRC="top.html"> <FRAME SRC="middle.html"> <FRAME SRC="bottom.html"></FRAMESET>

• <FRAMESET COLS="50%,50%"> <FRAME SRC="left.html"> <FRAME SRC="right.html"></FRAMESET>

• <FRAMESET ROWS="25%,50%,25%"> <FRAMESET COLS="50%,50%"> <FRAME SRC="left1.html"> <FRAME SRC="right1.html"> </FRAMESET> <FRAMESET COLS="50%,50%"> <FRAME SRC="left2.html"> <FRAME SRC="right2.html"> </FRAMESET> <FRAMESET COLS="50%,50%"> <FRAME SRC="left3.html"> <FRAME SRC="right3.html"> </FRAMESET></FRAMESET>

Targets of Frames

To create targeted links, give frames a name using the NAME attribute of the <FRAME> tag<FRAME SRC="menu1.html" NAME="main">

An anchor that displays a new page in a frame might appear as<A HREF="menu2.html" TARGET="main">Load Second menu</A>

The TARGET attribute has several special values

– _SELF: loads file into current frame

– _PARENT: loads file into enclosing frame of current frame

– _TOP: loads file into current window

– _BLANK: opens a new window and loads the file

Accommodating Frameless Browsers

<NOFRAME> tag

– Goes inside the <FRAMESET> tag

– Contains a frameless HTML <BODY>

– Its use is optional, but recommended Example

<FRAMESET ROWS="50%,50%">

<FRAME SRC="toc.html">

<FRAME SRC="main.html">

<NOFRAMES>

<BODY BGCOLOR="#FFFFFF">

<H1>Welcome to my Home Page</H1>

. . . more HTML here

</BODY>

</NOFRAMES>

</FRAMESET>

Generic Frames Page

<FRAMESET ROWS="10%,80%,10%">

<FRAME SRC="title.html” name=title>

<FRAMESET COLS="10%,90%">

<FRAME SRC="menu.html” NAME=menu>

<FRAME SRC="content.html” NAME=content>

</FRAMESET>

<FRAME SRC="copyright.html” name=copyright>

</FRAMESET>

Contents of the Frames

Content.html

<H1>Introduction</H1> The World Wide Web was originally conceived by Tim Berners-Lee while he was working at CERN.

Title.html

<center>Programming the World Wide Web</center> menu.html

<UL><LI><A HREF=chapter1.html TARGET=content>Chapter 1</A>

<LI><A HREF=chapter2.html TARGET=content>Chapter 2</A>

<LI><A HREF=chapter3.html TARGET=content>Chapter 3</A></UL> copyright.html

<center>copyright 1999, All Rights Reserved</center>

Appearance of Generic Frames Page

Attributes of <FRAME> Tag

name = . . . assigns a name to the current frame. This name may be used as the target of subsequent links.

src = uri specifies the location of the initial contents to be contained in the frame.

Noresize, When present, this boolean attribute tells the browser that the frame window must not be resizeable.

scrolling = auto|yes|no

– auto: browser should provide scroll bars when necessary. This is the default value.

– yes: browser should provide scroll bars for the frame window.

– no: browsers should not provide scrolling for the frame window.

Attributes of <FRAME> Tag (cont’d)

frameborder = 1|0

– 1: tells the browser to draw a separator between this frame and every

adjoining frame. This is the default value. – 0: tells the browser not to draw a separator between this frame and every

adjoining frame. Note that separators may be drawn next to this frame nonetheless if specified by other frames.

marginwidth = pixels, specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than one pixel. The default value depends on the browser.

marginheight = pixels, specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than one pixel. The default value depends on the user

agent.

<META> Tag

Allows you to insert Name/Value pairs describing document properties, e.g.

<META NAME="Author" CONTENT="Ellis Horowitz"> USC CS dept home page header

<META name = "description" content = "The Computer Science Department at the University of Southern California, Los Angeles (USC) provides education leading to the Bachelors, Masters and Ph.D. degrees in Computer Science.">

<META name = "keywords" content = "USC, computer science, computer science research, computer science teaching">

<META name = "author" content = "Ellis Horowitz">

<META> Tag

Moving a Web page to a new site

<HTML><HEAD>

<META HTTP-EQUIV="REFRESH" CONTENT=”5; URL=http://www.usc.edu/dept/cs/">

<TITLE>This site has moved</TITLE></HEAD>

<BODY><CENTER>This site has moved to a new location which is:

<A HREF="http://www.usc.edu/dept/cs/">http://www.usc.edu/dept/cs/</A> <BR>

Your browser should automatically move to the correct URL in five seconds.

</CENTER></BODY></HTML>

<APPLET> Tag

This element is supported by all Java-enabled browsers allows designers to embed a Java applet in an HTML

document It has been deprecated in favor of the OBJECT element There are many pre-defined Java applets that can be used,

e.g.

<H2>An example of Java applets</H2>

<APPLET CODE=CURTIME WIDTH=140 HEIGHT=40></APPLET>

<APPLET CODE=CURDATE WIDTH=140 HEIGHT=40></APPLET>

<APPLET> Tag Browser Output

Objects

The <OBJECT> tag is a generalization of the IMG and APPLET tags

Inserting an image

<BODY><P>Below is a photo showing what I looked like as a baby

<OBJECT data=babypic.gif type=image/gif>

</OBJECT></BODY> Inserting a Java applet

<OBJECT classid=java:program.start></OBJECT>

Updating Text Example: DHTML INPUT

<HTML> <HEAD><TITLE>Text Updating Using DHTML</TITLE></HEAD>

<BODY><FONT SIZE=2><H2>Entry Box</H2>

<div id=ReplaceMe>What you type in below will replace this HTML</div><BR>

<input id=T1 type=text style="width: 400"><P>

<input type=button value="Click me to change"

onclick="ReplaceMe.innerHTML = T1.value">

<ul>

<li>Type anything in the box and click the button to

replace the text with what you have typed.</li>

<li>Dynamic HTML replaces text with user-defined content, without a server round trip or reloading the page.</li>

</ul></BODY></HTML>

Updating Text Example: Browser Outputdhtml3.html

Reading Assignment - HTML 2 4 General Structure of HTML 4 headings, setting style 4 Text,...

Documents

Transcript of Reading Assignment - HTML 2 4 General Structure of HTML 4 headings, setting style 4 Text,...