Scribd
Upload
264 views192 pages

HTML Slides

Headings in HTML provide an outline of the text that forms the body of the document. Using META Elements s Wait 60 seconds and then load a new document. The BODY Element s s LEFTMARGIN Sets the width of the left margin in pixels.

Uploaded by

Bernard Kobbina
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
264 views192 pages

HTML Slides

Headings in HTML provide an outline of the text that forms the body of the document. Using META Elements s Wait 60 seconds and then load a new document. The BODY Element s s LEFTMARGIN Sets the width of the left margin in pixels.

Uploaded by

Bernard Kobbina
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 192

Website Development

MR BERNARD KOBBINA

Basic HTHL Structure


s s s

s s s

s s

<HTML> <HEAD> <TITLE>A Very Basic HTML Document</TITLE> </HEAD> <BODY> This is where the text of the document would be. </BODY> </HTML>

The TITLE Tag


s s

<HEAD> <TITLE>This is an example document</TITLE> </HEAD>


x

Appear on the title bar

The Document Heading


s

Elements within the head element do the following: Provide a title for the document. Lay out the relationships between multiple documents. Tell a browser to create a search form. Provide a method for sending special messages to a specific browser or other viewer.

s s

Using META Elements


s

<META HTTPEQUIV=refresh" CONTENT="60" URL="www.fdline.org/hom epage.html">


x

Wait 60 seconds and then load a new document.

<META HTTPEQUIV=refresh" CONTENT="60">

Using META Elements


s

<META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic, War Between the States"> <META NAME="Description" CONTENT="A listing of the general officers of the US Army in the Civil WAR">

The BODY Element


s s

ALINK Defines the color of an active link. BACKGROUND Points to the URL of an image to use for the document background. BGCOLOR Defines the color of the document background. BGPROPERTIES If this is set to FIXED, the background image does not scroll.

The BODY Element


s s

s s

LEFTMARGIN Sets the width of the left margin in pixels. LINK Defines the color of an unvisited link. TEXT Defines the color of the text. TOPMARGIN Sets the width of the top margin in pixels. VLINK Defines the color of an already visited link.

Example of BODY tag


s

<BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="RED" VLINK="GREEN" ALINK="YELLOW" >

The Address Element


s s

s s s

<ADDRESS> Created by Winfred Yaokumah<BR> The Webmaster <BR> Last Modified on 16 Dec 1996 </ADDRESS>

Text Formatting
s

ALIGN Values and Their Functions


LEFT Aligns the text with the left margin of the viewer. CENTER Centers the text between the viewer margins. RIGHT Aligns the text with the right margin of the viewer.

Paragraph and Line Breaks


s
s s s s s s s s

Showing the Use of the <BR> and <P> Tags


<BODY> <P>A very intelligent turtle<BR> Found programming UNIX a hurdle<BR> The system, you see,<BR> Ran as slow as did he,<BR> And that's not saying much for the turtle.<BR> <CITE>Mercifully anonymous</CITE> </BODY>

Adding Headings <H1> to <H6>


s
s s s s s s s s s

Headings in HTML provide an outline of the text that forms the body of the document
</HEAD> <BODY> <H1>Level <H2>Level <H3>Level <H4>Level <H5>Level <H6>Level </BODY> 1 2 3 4 5 6 Heading</H1> Heading</H2> Heading</H3> Heading</H4> Heading</H5> Heading</H6>

Adding Horizontal Lines <HR>


s s s s s s s

s s s s

<BODY> <H1 ALIGN=CENTER>Manned Space Craft</H1> <BR> <H2 ALIGN=LEFT>Soviet</H2> Soyuz<BR> <HR> <H2 ALIGN=LEFT>American</H2> <HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=RED> Mercury<BR> Gemini<BR> <HR > </BODY>

<HR> Attributes
s s

ALIGN Can be set to LEFT, CENTER, or RIGHT. WIDTH pixels or percentage of the viewer window width.

<HR> Attributes
s

SIZE

The height of the ruled line in pixels.

NOSHADE The viewer does not see a threedimensional effect. COLOR An RGB hexadecimal value or a standard color name can be used.

Preformatted Text <PRE>


s

Text in a <PRE> container is basically free-form with line feeds causing the line to break at the beginning of the next clear line. Another common use of the <PRE> element is to display large blocks of computer code

The <DIV> Tag


s

The <DIV></DIV> container (DIV stands for division) can be used to enclose and define the alignment for an entire block of page elements.

s s s s

<DIV ALIGN=CENTER> <H1>This header is centered.</H1> <IMG SOURCE="somepic.gif"><BR> So are the images above and this line of text.<BR> <P ALIGN=RIGHT>But this text is rightaligned.</P> </DIV

Character Formatting
s

They are divided into


Logical Formatting x Physical Formatting
x

Logical Formatting
s

Documents should be laid out in a logical and structured manner

Logical Formatting
s

These logical format elements are as follows:


x

<CITE>The citation element is used to indicate the citation of a quotation. It can also be used to indicate the title of a book or article. An italic font is normally used to display citations.
3

<CITE>Tom Sawyer</CITE> remains one of the classics

Logical Formatting
x

<CODE>The code element is used to indicate a small amount of computer code. It is generally reserved for short sections, with longer sections noted by using the <PRE> tag described later. Code normally appears in a monospaced font.
One of the first lines that every C programmer learns is:<BR> 3 <CODE>puts("Hello World!");</CODE>
3

Logical Formatting
x

<EM>The emphasis element is used to indicate a section of text that the author wants to identify as significant. Emphasis is generally shown in an italic font.
3

The actual line reads, "Alas, poor Jojo. I knew him, EM>John</EM>."

Logical Formatting
s

<KBD>The keyboard element is used to indicate a user entry response. A monospaced typewriter font is normally used to display keyboard text
3

To run the decoder, type <KBD>Restore</KBD> followed by your password.

Logical Formatting
x

<SAMP>The sample element is used to indicate literal characters. These normally are a few characters that are intended to be precisely identified. Sample element text normally is shown in a monospaced font.
3

The letters SAMP>AEIOU</SAMP> are the vowels of the English language.

Logical Formatting
x

<STRONG>The strong element is used to emphasize a particularly important section of text. Text using strong emphasis is normally set in a bold font.
3

The most important rule to remember is <STRONG>Don't panic</STRONG>!

Logical Formatting
x

<VAR>The variable element is used to indicate a dummy variable name. Variables are normally viewed in an italic font.
3

The sort routine rotates on the <VAR>I</VAR>th element.

Logical Formatting
x

<DFN>The defining instance element is used to create a sub-definition in a defining list. Variables are normally viewed in an italic font.
3

<DFN>The aardvark is an ant-eating animal.</DFN>

The <BLOCKQUOTE> Tag


s

s s

s s

You may have the opportunity to quote a long piece of work from another source in your document. <BLOCKQUOTE> Wit is the sudden marriage of ideas which before their union were not perceived to have any relation. </BLOCKQUOTE>

Physical Format Elements


s

Physical formatting elementst will change the appearance of the text in the viewer

Physical Formatting
x

<B>The bold element uses a bold font to display the text.


3

This is in <B>bold</B> text.

Physical Formatting
x

<I>The italic element renders text using an italic font.


3

This is in <I>italic</I> text

<TT>The teletype element displays the contents with a monospaced typewriter font.
3

This is in <TT>teletype</TT> text.

Physical Formatting
x

<U>The underline element causes text to be underlined in the viewer.


3

This text is <U>underlined</U>.

<STRIKE>The strikethrough element draws a horizontal line through the middle of the text.
3

This is a <STRIKE>strikethough</STRIKE > example.

Physical Formatting
x

<BIG>The big print element uses a larger font size to display the text.
3

This is <BIG>big</BIG> text.

<SMALL>The small print element displays the text in a smaller font size.
3

This is <SMALL>small</SMALL> text.

Physical Formatting
x

<SUB>The subscript element moves the text lower than the surrounding text and (if possible) displays the text in a smaller size font.
3

This is a SUB>subscript</SUB>.

Physical Formatting
x

<SUP>The superscript element moves the text higher than the surrounding text and (if possible) displays the text in a smaller size font.
3

This is a <SUP>superscript</SUP>.

The FONT Element - FACE, SIZE,


COLOR,
s s s s

<FONT FACE="Verdana", "Arial", "Helvetica"> <FONT SIZE=-1>Size 2</FONT><BR> <FONT SIZE=3>Size 3</FONT><BR> <FONT COLOR="#FF0000">This text is red</FONT><BR> <FONT COLOR="GREEN">This text is green</FONT><BR>

The <BASEFONT> Tag


s

The <BASEFONT> tag is used to establish the standard font size, face, and color for the text in the document

An Example of the <BASEFONT> Tag


s s s

s s

<BODY> This text is before the BASEFONT tag.<BR> <BASEFONT SIZE=6 FACE="GEORGIA"> This text is after the BASEFONT tag.<BR> Size changes are relative to the BASEFONT <FONT SIZE=-3>SIZE</FONT>.<BR> </BODY>

Creating Special Characters


s s s s

&cent, &pound, &yen , #, &copy, &reg ", &deg &frac12, &frac13, &frac34 &divide &pi [Pi] &le, &ge <> &amp & &dagger [dagger] &spades, &clubs, &hearts, &diams

1/2 , 1/3, 3 /4

s s s s s s

, , ,

Special Characters Example


s

I like bread &amp butter, and for dessert I like &pi.


x

The &amp will be displayed as an ampersand ("&") and the &pi will show up as the mathematical symbol for pi.

Linking Documents Together


s

These are two:


Hypertext x Hypermedia
x

Hypertext
s

A hypertext document is a document that contains links to other documents, allowing you to jump between them by clicking the links

Hypermedia
s

Hypermedia is based upon hypertext but contains more than text. It contains multimedia such as pictures, videos, and audio. In hypermedia documents, pictures are frequently used as links to other documents.

Anchors
s s

They are two types: Text Anchors


x

A text anchor is one or more words the browser underlines to indicate the fact that it represents a link.

Text Anchors Example


s

<A HREF="vero.html">Vogon Earth Reconnaissance Office</A>

Anchors
s

Graphical Anchors
x

When you click a link's graphical anchor, the browser loads the Web page that the link references

Graphic Anchors Example


x

<A HREF="whatsnew.htm"><IMG SRC="whatsnew.gif" BORDER=0></A>

Internal Links Example


s s

<A NAME=MIDDLE>Middle Section in Web Page</A> <A HREF="#MIDDLE">Jump to the middle</A>

Link to E-Mail
s

<A HREF="mailto:[email protected] h">Send me E-mail</A>

Link to Usenet News


s

<A HREF="news:news.newusers.quest ions">news.newusers.questions< /A>

Making FTP Available on Your Site


s

Putting in a link to an FTP site allows users to get a specific file from a particular location

FTP Example
s

You can get the FAQ <A HREF="ftp://ftp.mysite.com/pub /FAQ">here</A>

Linking Your Home Page to a Gopher Site


s

For more information, go <A HREF="gopher://gopher.mysite.c om">here</A>.

Summary of creating links


s s

Web page http://sitename/ http://www.mysite.com/ E-mail mailto:address mailto:[email protected] Newsgroup news:newsgroupname news:news.newusers.questions

Summary of creating links


s s s

FTP ftp://sitename/ ftp://ftp.mysite.com/ Gopher gopher://sitename/ gopher://gopher.mysite.com/ WAIS wais://sitename/ wais://wais.mysite.com/ Telnet telnet://sitename/ telnet://bbs.mysite.com/

URL References
s

They are two types:


Relative References x Absolute References
x

Relative References
s

An URL reference to a file on the same computer is known as a relative reference.


<BASE HREF="http://www.tuna.com/ ~mypages"> x <A HREF="index.htm">
x

Absolute References
s

An URL reference that specifies the exact computer, directory, and file for a Web page is an absolute reference. Whereas relative references are common for links to Web pages on the same computer, absolute references are necessary for links to Web pages on other computers.

Tables
s

They're used to present data in rows and columns

Table Structure
s s s s s s s s

s s

<TABLE > <TR> <TH> </TH> <TR> <TD></TD </TR> <TR> <TD>Green</TD><TD>Blue</TD><TD>Violet </TD> </TR> </TABLE>

Basic HTML table tags


s

<TABLE></TABLE>--These HTML tags are the containers for the rest of the table data. <TR></TR>--Each row in the table is contained by these tags. You can optionally leave off the closing </TR> tag.

TABLE attributes
s

The <TABLE> tag, borders are put around the table. You set the value of this attribute to the number of pixels wide you want the border, like this: BORDER=1. If you set this attribute to 0, the browser will not display a border.

TABLE attributes
s

ALIGN attribute--The ALIGN attribute can be specified in the <TABLE> tag with possible values of LEFT, RIGHT, and CENTER (the default is LEFT).

Borderless Tables Example


s s

<TABLE> <TR><TH>FRUITS</TH><TH>VEGETABLES</TH></ TR>

<TR><TD>Apple</TD><TD>Broccoli</TD></TR> </TABLE>

Table Example Borders


s s

<TABLE BORDER> <TR><TH>FRUITS</TH><TH>VEGETABLES</TH ></TR>

<TR><TD>Apple</TD><TD>Broccoli</TD></ TR> </TABLE>

Basic HTML table tags


s

<TD></TD>--Defines a cell. Table data is contained within these tags. You can also nest additional tables within a single cell. You can optionally leave off the closing </TD> tag.

<TH></TH>--These table header tags are used to define headers, usually in the first row or column of the table. You can optionally leave off the closing </TH> tag.

Aligning Table Elements


s

<CAPTION>--The ALIGN attribute can be specified for this element with possible values of TOP and BOTTOM (the default is TOP); this places the table caption above or below the table

Aligning Table Elements


s

TR>--The ALIGN attribute can be specified for this element with possible values of LEFT, RIGHT, and CENTER, and the VALIGN attribute can be specified with possible values of TOP, BOTTOM, MIDDLE, and BASELINE (the default is MIDDLE).

Aligning Table Elements


s

<TH>--The ALIGN attribute can be specified for this element with possible values of LEFT, RIGHT, and CENTER (the default is CENTER), and the VALIGN attribute can be specified with possible values of TOP, BOTTOM, and MIDDLE (the default is MIDDLE).

Aligning Table Elements


s

<TD>--The ALIGN attribute can be specified for this element with possible values of LEFT, RIGHT, and CENTER (the default is LEFT), and the VALIGN attribute can be specified with possible values of TOP, BOTTOM, and MIDDLE (the default is MIDDLE).

Spanning Rows and Columns


s

Rows and columns can be spanned--combined with adjacent cells to create larger cells for the data

Rows Span Example


s

To span two adjacent cells on a row, use the ROWSPAN attribute with <TH> or <TD>, as follows: <TD ROWSPAN=2>

Columns Span Example


s

To span two adjacent cells in a column, use the COLSPAN attribute with <TH> or <TD>, as follows: <TD COLSPAN=2>

Understanding Empty Cells


s

<TR><TD>Barley </TD><TD>Rye </TD><TD>&nbsp</TD></TR>

Basic HTML Color Code.


s s s s s s s s s

BLACK #000000 SILVER #C0C0C0 GRAY #808080 WHITE #FFFFFF MAROON #800000 RED #FF0000 PURPLE #800080 FUCHSIA #FF00FF GREEN #008000

Basic HTML Color Code


s s s s s s s

LIME OLIVE YELLOW NAVY BLUE TEAL AQUA

#00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF

Other TABLE attributes


x

WIDTH attribute--This enables you to specify the width of the table, either in pixels or as a percentage of the width of the browser window. You can also use this attribute with individual cells.

Other TABLE attributes


s

HEIGHT attribute--This enables you to specify the height of the table, either in pixels or as a percentage of the height of the browser window. You can also use this attribute with individual cells

Other TABLE attributes


s

BORDER attribute--This attribute puts a border around the table. You specify the width of the border in pixels, like this: BORDER=2.

Other TABLE attributes


s

CELLPADDING and CELLSPACING attributes--These numerical attributes include extra space within each cell in the table and/or within the borders of the table. If the border is not being displayed, they are equivalent.

Using Color in Tables


s

The <TABLE>, <TD>, <TH>, and <TR> tags all support BGCOLOR and BORDERCOLOR attributes. Thus, you can apply colors to the entire table, an individual cell, or an individual row of the table

Table Color Example


s

<TABLE BORDER BORDERCOLOR=BLACK BGCOLOR=WHITE> <TR BORDERCOLOR=BLACK BGCOLOR=WHITE><TD>1one</TD>

HTML Forms Tags


s

When you create a <FORM> tag, you also define the script it uses and how it sends data using the ACTION and METHOD attributes

HTML Forms Tags


s

ACTION This attribute points the form to an URL that will accept the form's information and do something with it. If you don't specify an ACTION, it sends the information back to the same URL the page came from.

HTML Forms Tags


s

METHOD This attribute tells the form how to send its information back to the script. The most common method is POST, which sends all the information from the form separately from the URL. The other option for METHOD is GET, which attaches the information from the form to the end of the URL.

FORM example
s

s s

<FORM METHOD="POST" ACTION="/cgibin/comment_script"> ... </FORM>

HTML Forms Elements


s

<TEXTAREA> This tag defines a field in which the end user can type multiple lines of text.

HTML Forms Elements


s

<SELECT> This tag enables the end user to choose among a number of options in either a scroll box or pop-up menu.

HTML Forms Elements


s

<INPUT> This tag provides all of the other types of input: single lines of text, radio buttons, check boxes, and the buttons to submit or clear the form.

<TEXTAREA> Tag
s

With <TEXTAREA>, you can provide a field for someone to enter multiple lines of information The options for the <TEXTAREA> tag are as follows: NAME This is required. It defines the name for the data. ROWS This sets the number of rows in the field. COLS This sets the width of the field in characters.

<TEXTAREA>Exa mple
s s

s s

<FORM> <TEXTAREA NAME="comments" ROWS=4 COLS=40>Default text 1 2 3 ... </TEXTAREA>

<SELECT> Tag
s

The <SELECT> element shows a list of choices in either a pop-up menu or a scrolling list.

The options for the <SELECT> element:


s

NAME This is required. It defines the name for the data. SIZE This attribute determines how many choices to show. If you omit SIZE or set it to 1, the choices are shown as a drop-down list. If you set it to 2 or higher, it shows the choices in a scroll box.

The options for the <SELECT> element: allows MULTIPLE This


s

multiple selections. If you specify multiple, a scrolling window displays--regardless of the number of choices or the setting of SIZE.

The <OPTION> tag of <SELECT> tag


s

VALUE This is the value to be assigned for the choice, which is what is sent back to the script, and doesn't have to be the same as what is presented to the end user. SELECTED If you want one of the choices to be a default, use the SELECTED option in the <OPTION> tag.

SELECT Example
s
s s s

Drop-Down List
<FORM> <SELECT NAME="network"> <OPTION SELECTED VALUE="ethernet"> Ethernet <OPTION VALUE="token16"> Token Ring - 16MB <OPTION VALUE="token4"> Token Ring - 4MB <OPTION VALUE="localtalk"> LocalTalk </SELECT> </FORM>

s s

SELECT Example
s
s s s s

Scrollable List
<FORM> What type of Connection: <SELECT MULTIPLE NAME="network"> <OPTION SELECTED VALUE="ethernet"> Ethernet <OPTION VALUE="token16"> Token Ring - 16MB <OPTION VALUE="token4"> Token Ring - 4MB <OPTION VALUE="localtalk"> LocalTalk </SELECT>

<INPUT> Tag
s

For simple text fields, password fields, radio buttons, check boxes, and the buttons to submit and reset the form.

<INPUT> Tag Attributes


s s

NAME This defines the name for the data. SIZE This is the size of the input field in number of characters for text or password. MAXLENGTH This specifies the maximum number of characters to be allowed for a text or password field.

<INPUT> Tag Attributes


s

VALUE For a text or password field, it defines the default text displayed. For a check box or radio button, it specifies the value that is returned to the server if the box or button is selected. For the Submit and Reset buttons, it defines the text inside the button.

<INPUT> Tag Attributes


s

CHECKED This sets a check box or radio button to on. It has no meaning for any other type of <INPUT> tag. TYPE This sets the type of input field you want to display.

Text Input Example


s s

<FORM> A Phone Number: <INPUT TYPE="text" NAME="Phone" SIZE="15" MAXLENGTH="12"> </FORM>

Text Input Box with Password


s s

<FORM> Enter the secret word: <INPUT TYPE="password" NAME="secret_word" Size="30" MAXLENGTH="30"> </FORM>

CHECKBOXTag
s

CHECKBOX displays a simple check box that can be checked or left empty

Check Box Form Input Example


s s

s s

<FORM> <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1"> A checkbox <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED>A pre-selected checkbox

RADIO Tag
s

RADIO is a more complex version of a check box, allowing only one of a related set to be chosen

Radio Button Form Input Example


s s s

s s s s

<FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1"> Yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No. </FORM> <HR> <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> Yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No. </FORM>

RESET Tag
s

RESET displays a push button with the preset function of clearing all the data in the form to its original value

Form Reset Button Example


s s s s

<FORM> <INPUT TYPE="reset"> <BR> <INPUT TYPE="reset" VALUE="Clear that form!"> </FORM>

SUBMIT Tag
s

SUBMIT displays a push button with the preset function of sending the data in the form to the server to be processed by a server-side script.

Form Submit Example


s s s s

<FORM> <INPUT TYPE="submit"> <BR> <INPUT TYPE="submit" VALUE="Send in the data!"> </FORM>

Forms Without Line Breaks Example


s s

<FORM> Name: <INPUT NAME="name" SIZE="30"> E-Mail Address: <INPUT NAME="email" SIZE="40"> </FORM>

Line Breaks Within Forms


s s

s s

<FORM> Name: <INPUT NAME="name" SIZE="30"> <BR> E-Mail Address: <INPUT NAME="email" SIZE="40"> </FORM>

Using the Preformatted Text Tag to Line Up Forms

s s

<FORM> <PRE> Name: <INPUT TYPE="text" NAME="name" SIZE="50"> E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50"> Street Address: <INPUT TYPE="text" NAME="street1" SIZE="30"> <INPUT TYPE="text" NAME="street2" SIZE="30"> City: <INPUT TYPE="text" NAME="city" SIZE="50"> State: <INPUT TYPE="text" NAME="state" SIZE="2"> Zip: <INPUT TYPE="text" NAME="zip" SIZE="10"> </PRE>

Creating an Ordered List


s s

<OL> <LH><EM>Colors of the Spectrum:</EM><BR> <LI>Red <LI>Orange <LI>Yellow <LI>Green </OL>

s s s s s

Creating Nested Ordered List


s s s s s s s s

<OL> <LH><EM>Planets of the Solar System:</EM><BR> <LI>Mercury <OL> <LI>57.9 million kilometers from the sun <LI>no satellites </OL> </OL>

Additional <OL> Attributes


s

TYPE=A TYPE=a

Sets markers to uppercase letters Sets markers to lowercase letters

s s

TYPE=I Sets markers to uppercase Roman numerals TYPE=i Sets markers to lowercase Roman numerals TYPE=1 Sets markers to numbers START=n Sets beginning value of item markers in the current list

Analyse this Example

s s

s s

<OL TYPE=A> <LI>227.9 million kilometers from the sun <LI>two satellites <OL> <LI>Phobos

Creating an Unordered List


s s

<UL > <LI>108 million kilometers from the sun <LI>no satellites </UL>

Additional <UL> Attributes


s

You can manually control the appearance of item markers as either circles, squares, or discs

Analyse this Example


s s

<UL TYPE=CIRCLE> <LI>108 million kilometers from the sun <LI>no satellites </UL>

Creating Menu Lists


s s s s s s s

<MENU> <EM>Planets - Solar System:</EM><BR> <LI><A HREF="mercury.htm">Mercury</A> <LI><A HREF="venus.htm"> Venus </A> <LI><A HREF="earth.htm"> Earth </A> <LI><A HREF="mars.htm"> Mars </A> </MENU>

Creating Directory Lists


s s s s s s s s s s

<DIR> <LH><EM>Colors :</EM><BR> <LI>Red <LI>Orange <LI>Yellow <LI>Green <LI>Blue <LI>Indigo <LI>Violet </DIR>

Creating Definition Lists


s s s s

<DL> <DT>Term <DD>Definition of term </DL>

The Frames Concept


s s

Frames organize your browser's display window Frames break up the window into individual, independent frames. Each frame holds its own HTML file as content, and the content of each frame can be scrolled or changed independently of the others.

The FRAMESET Container


s

Frames are contained in a structure called a FRAMESET, which takes the place of the BODY container on a framesformatted page The <FRAMESET></FRAMESET> container surrounds each block of frame definitions. Within the FRAMESET container you can only have

Defining ROWS and COLS


s

<FRAMESET ROWS= COLS= > </FRAMESET> <FRAMESET ROWS="100,240,140"> <FRAMESET ROWS="25%,50%,25%">

Defining ROWS and COLS


s

<FRAMESET COLS="*, 2*, 3*"> <FRAMESET ROWS="*, 2*, *" COLS="2*, *">

The <FRAME> Tag


s s s s

<FRAMESET ROWS="*, 2*"> <FRAME> <FRAME> </FRAMESET>

Complete FRAME Tag


s

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE> <FRAME SRC="sample.htm">

Providing Alternate Content


s

<NOFRAMES> <BODY> content... </BODY> </NOFRAMES>

Simple Frame Examples


s

A Simple Page with Two Frames


<HTML> <HEAD> </HEAD> <FRAMESET COLS="*, 2*"> <FRAME SRC="label.htm"> <FRAME SRC="info.htm"> </FRAMESET> </HTML>

s s s s s s s s

A Simple Frame
s

s s s s s s s

<FRAMESET ROWS="*, 2*" COLS="20%, 30%, 40%"> <FRAME SRC="labela.htm"> <FRAME SRC="labelb.htm"> <FRAME SRC="labelc.htm"> <FRAME SRC="infoa.htm"> <FRAME SRC="infob.htm"> <FRAME SRC="infoc.htm"> </FRAMESET>

A Complex Frame
s s s s s s s s

<FRAMESET ROWS="25%,50%,25%"> <FRAME SRC="header.htm"> <FRAMESET COLS="25%,75%"> <FRAME SRC="label.htm"> <FRAME SRC="info.htm"> </FRAMESET> <FRAME SRC="footer.htm"> </FRAMESET>

Another Example
s

s s

<FRAMESET COLS="25%,75%"> <FRAME SRC="label.htm"> <FRAME SRC="info.htm"> </FRAMESET>

Frame MARGINS
s

<FRAME MARGINHEIGHT="5" MARGINWIDTH="7">

Frame Scrollbars
s

<FRAME SCROLLING="yes|no| auto"> <FRAME SCROLLING=YES>

Frame Resizing
s

<FRAME NORESIZE>

Frame Borders
s

You use the BORDER, FRAMEBORDER, and BORDERCOLOR attributes to set the look and feel of the borders for your frameset. <FRAMESET BORDER="5">

The FRAMEBORDER attribute


s

The FRAMEBORDER attribute can be used with either the <FRAMESET> or <FRAME> tag. It has two legitimate values, YES and NO. If FRAMEBORDER="YES", then frame borders are drawn with a 3-D look. If FRAMEBORDER="NO", frame borders are invisible.

The BORDERCOLOR attribute


s

The BORDERCOLOR attribute can be used with the FRAMESET tag or with the FRAME tag. BORDERCOLOR can be assigned a named color value, or a hexadecimal RGB color value.

BORDERCOLOR example:
s

s s

<FRAMESET BORDERCOLOR="red" ROWS="*,*"> <FRAME SRC="info.htm" BORDERCOLOR="#FF00FF"> <FRAME SRC="info.htm"> </FRAMESET>

Targeted Hyperlinks
s
s

Naming and Targeting Frames


<FRAME SRC="info.htm" NAME="Joe"> <A HREF="moreinfo.htm" TARGET="Joe">Click Here to Jump to Joe</A>

Reserved Implicit Frame Names


s

_blank Load content directed to this name into a new, unnamed window. This name is used to completely wipe out the current frameset and start with a new, blank window. _self Load content directed to this name into the calling frame.

Reserved Implicit Frame Names

_parent Load content directed to this link to the calling frame's parent frameset window. If it has no parent frameset, this is the same as using the name _self.
s

_top Load content directed to this link to the top level frameset related to the calling frame. If the calling frame is already the top level, this is the same as using the name _self.

Reserved Implicit Frame Names Example


s s

<A HREF="stuff.htm" TARGET="_blank"> <A HREF="stuff.htm" TARGET="_self"> <A HREF="stuff.htm" TARGET="_parent"> <A HREF="stuff.htm" TARGET="_top

Adding Graphics to a Web Page


s

Images can make your HTML document more compelling than text alone

What Should I Know When Using Images?

Graphics files are slow to download. The average user with a 14.4KBps modem can wait several seconds or even several minutes while a graphics file downloads. Search engines don't know what to do with images. Search engines such as AltaVista and Excite can't index your images. Thus, if you depend heavily on

What Should I Know When Using Images?

Many users don't have graphical browsers. Thousands of folks are still using Lynx, for example, which is a UNIX-based, text-only browser. In addition, Internet Explorer and Netscape users might disable inline images in order to open Web pages faster. Images aren't always internationalized. Such a big word, internationalized. Because HTML documents published on the Web have a worldwide audience, internationalized images might be

What Should I Know When Using Images?

Color images aren't always portable. A color image that looks good on your computer might not look quite as good on another user's computer. Thus, you need to pay particular attention to how you use colors in an image.

Picking the Right Graphics File Format

GIF, JPEG, PCX, PNG, WMF, and so on

Picking the Right Graphics File Format

GIF compresses without losing any detail. Thus, if you're concerned more with maintaining detail than download speed, use GIF. PNG also compresses without losing any detail. PNG is a good alternative to GIF, except that it's not directly supported by most Web browsers. JPEG causes an image to lose detail when saved. If you're concerned more with file size than with detail, however, use JPEG.

Adding Inline Images to Your HTML

<IMG SRC="filename"> <IMG SRC="book.gif">

Aligning Text with an Inline Image

<P> <IMG SRC="book.gif" ALIGN=TOP> This text is aligned with the top of the image. </P> <P> <IMG SRC="book.gif" ALIGN=MIDDLE> This text is aligned with the middle of the image. </P> <P> <IMG SRC="book.gif" ALIGN=BOTTOM> This text is aligned with the bottom of the image. </P>

Building Navigational Imagemaps


s s s

Two different types of imagemaps: Server-side Client-side

Server side
s

The browser sends the mouse pointer's coordinates to the Web server when the user clicks somewhere on the imagemap. Then the server looks up the coordinates and determines the region on which the user clicked. With this information, the server looks up the corresponding URL and returns it to the browser. As a result, the browser opens the URL.

Client side

You define an imagemap's region within the Web page. When the user clicks somewhere on the imagemap, the browser looks up the region in the HTML file, determines the associated URL, and opens that URL. The browser doesn't communicate with the Web server at all

Using Server-Side Imagemaps


s

In order to add a server-side imagemap to your Web page, you need four things: The imagemap graphic The imagemap definition file The imagemap program or script HTML tags

Building Client-Side Imagemaps


s

The syntax of an imagemap definition in HTML looks like: x <MAP NAME="mapname"><AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="URL"][NOHREF]></MAP>

The <AREA> Tag's Attributes


s s

s s

SHAPE Defines the shape of the region. Just like the server-side imagemap definition files, you can use rect, poly, circle, or default. If this attribute is missing, the browser assumes rect. When two regions overlap, the browser uses the first one in the list. COORDS Defines a comma-separated list of coordinates. Note there is a comma between each set of coordinates.

The <AREA> Tag's Attributes


s s

s s

HREF Defines the URL of the Internet resource to which the region is linked. All relative links are relative to the document containing the MAP tag, not the one containing the USEMAP attribute, if different. If you use a BASE tag in the HTML file containing the MAP tag, that URL is used. NOHREF Specifies the region is a dead area within the imagemap. That is, that area is not linked to any Internet resource. Note HREF and NOHREF are mutually exclusive.

A Client-Side Imagemap Example


s

s s s

<MAP NAME=mymap><AREA SHAPE=RECT COORDS="0,0,100,100" HREF=item1.html><AREA SHAPE=RECT COORDS="101,0,200,100 HREF=item2.html><AREA SHAPE=RECT COORDS="201,0,300,100" HREF=item3.html> </MAP> <IMG SRC=mymap.gif USEMAP=#mymap>

Referencing the ClientSide Imagemap Definition


s

<IMG SRC=mymap.gif USEMAP=#mymap>

Using Alternatives to Imagemaps


s
s

An Imagemap Created from Individual Images


<A HREF=item1.html><IMG SRC=item1.gif WIDTH=50 HEIGHT=50 BORDER=0></A> <A HREF=item2.html><IMG SRC=item2.gif WIDTH=50 HEIGHT=50 BORDER=0></A><BR> <A HREF=item3.html><IMG SRC=item3.gif WIDTH=50 HEIGHT=50 BORDER=0></A> <A HREF=item4.html><IMG SRC=item4.gif WIDTH=50 HEIGHT=50 BORDER=0></A>

Inserting Objects into a Web Page


s

Two ways to embed plug-ins into your Web page


<EMBED> tag x <OBJECT> tag
x

<EMBED> tag

Use the <EMBED> tag if you're concerned with compatibility across a variety of Web browsers. This Netscape extension has been in place since Navigator 2.0 and thus many other Web browsers have adopted its use.

<OBJECT> tag

Use the <OBJECT> tag if you want to be hip to the latest HTML technology

<EMBED> tag

ALIGN=value LEFT--align text flush left RIGHT--align text flush right TOP--align text with top BOTTOM--align text with bottom BORDER=num Width of frame's border in pixels

<EMBED> tag

FRAMEBORDER=value NO--do not draw border around frame HEIGHT=num Height of frame as defined by UNITS

<EMBED> tag

HIDDEN Makes the plug-in invisible on the page HSPACE=num Width of left and right margin in pixels NAME=name Name of the embedded object

<EMBED> tag

PALETTE=value FOREGROUND--foreground colors BACKGROUND--background colors PLUGINSPAGE=URL URL of the Web page that contains instructions for installing the plug-in if the user does not have it installed SRC=URL URL that indicates the location of the embedded multimedia data file; if you don't use this attribute, use TYPE

<EMBED> tag

TYPE=type MIME type of the embedded object, which determines the plug-in that loads; use TYPE for plug-ins that require no data UNITS=value PIXELS--use pixels as a unit of measurement, while EN--use half the normal display font point size

<EMBED> tag

VSPACE=num Width of top and bottom margin in pixels WIDTH=num Width of frame as defined by UNITS

<OBJECT>Tag

BORDER=num Width of frame's border in pixels CLASSID=URL URL of the plug-in, on the Internet, for installing the plug-in if the user does not have it installed DATA=URL URL of the object's data file

<OBJECT>Tag

HEIGHT=num Height of frame as defined by UNITS HSPACE=num Width of left and right margin in pixels ID=name Name of the embedded object

<OBJECT>Tag

TYPE=type MIME type of the embedded object, which determines the plug-in that loads; use TYPE for plug-ins that require no data TYPE=type MIME type of the object's data file VSPACE=num Width of top and bottom margin in pixels

<OBJECT>Tag

WIDTH=num Width of frame as defined by UNITS

Embedding Audio Using <EMBED>

<EMBED SRC=EXAMPLE.WAV HEIGHT=60 WIDTH=144>

Embedding Audio Using <OBJECT>

<OBJECT DATA=EXAMPLE.WAV WIDTH=144 HEIGHT=60> </OBJECT>

LiveAudio's Private Attributes


AUTOSTART=value TRUE--plays automatically FALSE-doesn't play automatically AUTOLOAD=value TRUE--load clip automatically FALSE-don't load clip automatically

LiveAudio's Private Attributes


STARTTIME="mm:ss" Start time from beginning of clip ENDTIME="mm:ss" End time from beginning of clip VOLUME=num Initial value as a percentage

LiveAudio's Private Attributes

CONTROLS=value

CONSOLE--display the console SMALLCONSOLE--display small console PLAYBUTTON--display play button PAUSEBUTTON--display pause button STOPBUTTON--display stop button VOLUMELEVER--display volume slider

Embedding a Video Using <EMBED>


<BODY> <EMBED SRC=EXAMPLE.AVI WIDTH=150 HEIGHT=100> </BODY>

Embedding a Video Using <OBJECT>

<OBJECT DATA=EXAMPLE.AVI WIDTH=150 HEIGHT=100> <IMG SRC=EXAMPLE.GIF WIDTH=150 HEIGHT=100> </OBJECT>

AVI Files (LiveVideo)Live Video


AUTOSTART=value TRUE-- video starts automatically FALSE-video doesn't start automatically LOOP=value TRUE--video plays repeatedly FALSE-video plays one time CONTROLS=value TRUE--plug-in shows video controls FALSE--plug-in doesn't show video controls

QuickTime's Private Attributes


AUTOPLAY=value TRUE--automatically start FALSE--don't automatically start CONTROLLER=value TRUE--display a toolbar FALSE--don't display a toolbar LOOP=value TRUE--play video repeatedly FALSE--play video a single time

QuickTime's Private Attributes


PLAYEVERYFRAME=value TRUE--play while downloading FALSE-don't play while downloading HREF=URL URL to which the video is linked TARGET=FRAME Targeted link for the video

You might also like