HTMLPPT (Autosaved)

What HTML Is
It isn't a programming language.

HTML is exactly what it claims to be--a markup
language.
You use HTML to mark up a text document, just
as you would if you were an editor with a red
pencil.
The marks you use indicate which format (or
presentation style) should be used when
displaying the marked text.
It is a tag-oriented text markup language that
works with standard ASCII text.
Creating Basic HTML Documents

The entire document is enclosed in the
<HTML></HTML> container tags.
The first part of the document is
encapsulated in the <HEAD></HEAD>
container, which itself contains a
<TITLE></TITLE> container.
Finally, the body of the page is contained
in a <BODY></BODY> container.
The Simplest HTML Document

<HTML>
<HEAD>
<TITLE>A Very Basic HTML Document</TITLE>
</HEAD>
<BODY>
This is where the text of the document would be.
</BODY>
</HTML>
The </HTML> end tag is just as important

as the start tag. It is becoming possible to
include HTML documents within e-mail
messages and news postings. Without the
</HTML>, the viewer does not know when
to stop interpreting the text as HTML code.
The Document Heading

The document head container is not a required
element, but a proper head can greatly increase
the usefulness of a document.
The purpose of the head is to provide
information to the application that is interpreting
the document.
With the exception of the TITLE element, the
reader of the document does not see the
elements within the head element.
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.
A Fairly Detailed HEAD Element

<HEAD>
<TITLE>General Officers of the US Army in the Civil
War</TITLE>
<LINK HREF="mailto: rmeegan@ia.net" REV="made">
<BASE HREF="http: //www.ia.net/~rmeegan/civil">
<ISINDEX PROMPT="Enter the desired name">
<META HTTP-EQUIV="EXPIRES" CONTENT="31 Dec
1997">
<META NAME="Last Modified" CONTENT="16 Dec 1996">
<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">
</HEAD>
The BASE element is used to specify the full

original URL of the document.
This allows relative links to work, even if a
document has been moved to another directory
(or even to another machine!).
In this way, a BASE element allows the viewing
software to find a document link, even when
directed from a parent in a different location.
The BASE element has a single required
attribute, which provides the full URL of the
document: HREF.
The LINK Element - If the BASE element

allows a browser to locate a document,
there still exists the question of what the
relationship between two documents might
be.
To connect documents together logically,
HTML includes the LINK element.
Table: LINK Attributes and Their

Functions
Attribute
Function
HREF
Points to the URL of the other
document.
REL Defines the relationship between the
current document and persons who have
contributed to its existence.
REV Defines the relationship between another
HTML document and the current document.
TYPE
Specifies the type and parameters for a
linked style sheet.
<HTML>
<HEAD>
<TITLE>Using the Satellite Identification and Tracking
System (SITS)</TITLE>
<LINK REV="made" HREF="mailto: rmeegan@ia.net">
<LINK REL="toc" HREF="contents.htm">
<LINK REL="index" HREF="index.htm">
<LINK REL="copyright" HREF="copyright.htm">
<META NAME="Description" CONTENT="An on-line
manual for the SITS">
</HEAD>
<BODY>
</BODY>
</HTML>
The META element allows a document author to

define information that is outside of HTML
Example of how the META element can be used
to have the browser perform an action.
<META HTTP-EQUIV=refresh" CONTENT="60"
URL="www.fdline.org/homepage.html">
<META HTTP-EQUIV=refresh"
CONTENT="60">
META Attributes and Their Functions

Attribute
HTTP-EQUIV
NAME
URL
CONTENT
Function
defines the property for the
element.
Provides an additional description
of the element. If this attribute is
missing, it is assumed to be the
same as HTTP-EQUIV.
Defines a target document for the
property.
Provides the response value for the
property.
<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the
Civil War</TITLE>
<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">
</HEAD>
<BODY BGCOLOR="NAVY" TEXT="WHITE"
LINK="RED" VLINK="BLUE" ALINK="GREEN">
</BODY>
</HTML>
BODY Attributes and Their Functions

Attribute
Function
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.
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.
Color Definitions
Colors are defined in HTML using a hexadecimal
coding system.
16 Standard Colors and Their Value:
Color
Value
Black
#000000
Maroon
#800000
Green
#008000
Olive
#808000
Navy
#000080
Purple
#800080
Teal
Gray
Silver
Red
Lime
Yellow
Blue
Fuchsia
Aqua
White
#008080
#808080
#C0C0C0
#FF0000
#00FF00
#FFFF00
#0000FF
#FF00FF
#00FFFF
#FFFFFF
The Address Element

<HTML>
<HEAD>
<TITLE>Amateur Astronomy on the World Wide
Web</TITLE>
</HEAD>
<BODY >
<ADDRESS>
Created by Robert Meegan<BR>
Last Modified on 16 Dec 2007
</ADDRESS>
</BODY>
</HTML>
Breaking Text into Paragraphs

Place a paragraph start tag, <P>, at the
beginning of each new paragraph, and the
viewer knows to separate the paragraphs.
Adding a paragraph end tag, </P>, is optional,
as it is normally implied by the next start tag that
comes along.
The paragraph element has one attribute that is
supported by both Netscape Navigator and
Microsoft Internet Explorer. This is the ALIGN
attribute.
Attribute Function
LEFT
Aligns the text with the left margin
of the viewer. The right edge is
ragged.
CENTER Centers the text between the
viewer margins.
RIGHT Aligns the text with the right
margin of the viewer. The left
edge is ragged.
Adding and Preventing Line Breaks

Use the line break tag, <BR>, to end a line
where you want.
If you think you might need a break inside
a <NOBR> element, you can suggest a
breaking point with a <WBR> tag (soft line
break). The viewer will only use the
<WBR> if it needs it.
the line break element is not a container, it
does not have an end tag.
Creating a Text Outline

Adding Headings
The heading element is a container and
must have a start tag (<H1>) and an end
tag (</H1>).
HTML has six levels of headings: H1 (the
most important), H2, H3, H4, H5, H6 (the
least important).
Adding Horizontal Lines

You can create a horizontal line using the
horizontal rule element, <HR>.
<HTML>
<HEAD>
<TITLE>Manned Space Craft</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Manned Space Craft</H1>
<BR>
<H2 ALIGN=LEFT>Soviet</H2>
Vostok<BR>
Voskhod<BR>
Soyuz<BR>
<HR>
<H2 ALIGN=LEFT>American</H2>
Mercury<BR>
Gemini<BR>
Apollo<BR>
Shuttle<BR>
<HR >
</BODY>
</HTML>
<HR> Attributes and Their Functions

Attribute
Function
ALIGN
Can be set to LEFT, CENTER, or
RIGHT.
WIDTH
Can be entered in pixels or as a
percentage of the viewer window
width. If a percentage is desired, add a
percent time to the number.
SIZE
The height of the ruled line in pixels.
NOSHADE If this attribute is present, the
viewer does not use a three-dimensional
effect.
COLOR
Specifies the color of the ruled line. An RGB
hexadecimal value or a standard color name
can be used.
The <DIV></DIV> container (DIV stands for division) can

be used to enclose and define the alignment for an entire
block of page elements. It supports the ALIGN attribute,
so you could use it to align a block of text and graphics
to CENTER, as in this example:
<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 right-aligned.</P>
</DIV
Physical Format Elements

This is in <B>bold</B> text.
This is in <I>italic</I> text.
<TT> The teletype element displays the
contents with a monospaced typewriter
font.
<U> The underline element causes text to
be underlined in the viewer.
<STRIKE> The strikethrough element
draws a horizontal line through the middle
of the text.
<BIG> The big print element uses a larger

font size to display the text.
<SMALL> The small print element
displays the text in a smaller font size.
<SUB> The subscript element moves the
text lower than the surrounding text and (if
possible) displays the text in a smaller size
font.
<SUP> The superscript element moves

the text higher than the surrounding text
and (if possible) displays the text in a
smaller size font.
The FONT Element

The FONT element is a container that is opened
with the <FONT> start tag and closed with the
</FONT> end tag.
<HTML>
<HEAD>
<TITLE>Font Selection Example</TITLE>
</HEAD>
<BODY>
<FONT FACE="Tolkien">
This is an example of font selection. </FONT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Font Selection Example</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana", "Arial", "Helvetica">
This is an example of font selection. </FONT>
</BODY>
</HTML>
The SIZE Attribute

<HTML>
<HEAD>
<TITLE>Font Size Example</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Size 1</FONT><BR>
<FONT SIZE=-1>Size 2</FONT><BR>
<FONT SIZE=+2>Size 5</FONT><BR>
<FONT SIZE=+4>Size 7</FONT><BR>
</BODY>
</HTML>
The COLOR Attribute

<HTML>
<HEAD>
<TITLE>Font Color Example</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is red</FONT><BR>
<FONT COLOR="GREEN">This text is
green</FONT><BR>
</BODY>
</HTML>
The <BASEFONT> Tag

<HTML>
<HEAD>
<TITLE>BASE Font Example</TITLE>
</HEAD>
<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>
</HTML>
Creating Special Characters

Entity
&cent, &pound, &yen
&copy, &reg
&deg
&frac14, &frac12, &frac34
&divide
&pi
&le, &ge
&amp
&dagger
Symbols
, #,
,
1/2 , 1/3, 3 /4
[Pi]
<>
&
[dagger]
Adding Graphics to a Web Page

<IMG SRC="filename">
<HTML>
<HEAD>
<TITLE>Using the IMG tag</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif">
This text immediately follows the image.
</P>
<P>
This text is interrupted
by the image.
</P>
<P>
In this case, the image appears inline after this text.
</P> </BODY> </HTML>
Values for the ALIGN Attribute

Value
TOP
MIDDLE
BOTTOM
LEFT
RIGHT
Description
Aligns the text with the top of the image
Aligns the text with the middle of the image
Aligns the text with the bottom of the image
Displays image on left side and
surrounding content flows around the image
Displays image on the right side of the
window and surrounding content flows around
the image
Using HEIGHT and WIDTH to Give

Size Hints
<HTML>
<HEAD>
<TITLE>Using HEIGHT and WIDTH to give size
hints</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" WIDTH=320 HEIGHT=240>
</BODY>
</HTML>
Using the ALT Attribute

<HTML>
<HEAD>
<TITLE>Using the ALT attribute</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" WIDTH=320 HEIGHT=240
ALT="A picture of my latest book's cover">
</BODY>
</HTML>
Framing an Image with a Border

<HTML>
<HEAD>
<TITLE>Using the BORDER attribute</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" BORDER=0>
<BR>
<BR>
</BODY>
</HTML>
Giving an Image Space

<HTML>
<HEAD>
<TITLE>Using the BORDER attribute</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" VSPACE=20 HSPACE=20 ALIGN=LEFT>
This text will wrap around the image.
</BODY>
</HTML>
Using an Image as an Anchor

<A HREF="http://www.mysite.com"><IMG
SRC="image.gif"></A>
Internal Links
First, you must create an anchor in the HTML file
that indicates the location to which you're linking.
<A NAME=MIDDLE>Middle Section in Web
Page</A>
Second, Instead of setting the HREF attribute to
the URL of another Web page, set it to the
anchor's name, prefixing the anchor's name with
a pound sign (#).
<A HREF="#MIDDLE">Jump to the middle</A>
Creating a Link to E-Mail

<A HREF="mailto:me@mycom.com">Send
me E-mail</A>.
Creating an Ordered List

<HTML>
<HEAD>
<TITLE>ordered List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Colors of the Spectrum:</EM><BR>
<LI>Red
<LI>O range
<LI>Yellow
<LI>Green
<LI>Blue
<LI>Indigo
<LI>Violet
</OL>
</BODY>
</HTML>
Nested Ordered List Example

<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>
<LI>Venus
<OL >
<LI>108 million kilometers from the sun
<LI>No satellites
</OL>
<LI>Mars
<OL>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<OL>
<LI>Phobos
<LI>Deimos
</OL
</OL>
</OL>
Additional <OL> Attributes

Attribute
COMPACT
TYPE=A
TYPE=a
TYPE=I
TYPE=I
TYPE=1
START=n
Description
Renders the list in a more compact form
Sets markers to uppercase letters
Sets markers to lowercase letters
Sets markers to uppercase Roman numerals
Sets markers to lowercase Roman numerals
Sets markers to numbers
Sets beginning value of item markers in the
current list
Creating an Unordered List

You use the TYPE attribute to change the
bullet used in the list. Its value can be one
of disc, square, or circle.
Creating Definition Lists

The <DL> element provides both a
beginning and ending line break.
In the <DL> container, the <DT> tag
marks the term and
the <DD> tag defines the paragraph.
The standard format of a definition list is

as follows:
<DL>
<DT>Term
<DD>Definition of term
</DL>
Formatting Content with Tables

The <TABLE> element is the container for
the table's data and layout.
HTML tables are composed row by row:
you indicate a new row with the <TR>
(table row) tag, and
you separate the data with either the
<TH> (table header) or <TD> (table data)
tags.
The basic HTML tags are

<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.
<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.
<HTML>
<HEAD>
<TITLE>Basic Table Examples</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH>Colors</TH><TH>Of</TH><TH>The Rainbow</TH>
<TR>
<TD>Red</TD><TD>Orange</TD><TD>Yellow</TD>
</TR>
<TR>
<TD>Green</TD><TD>Blue</TD><TD>Violet</TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER>
<CAPTION>My Favorite Groups</CAPTION>
<TR><TH>Rock</TH>
<TD>Pink Floyd</TD>
<TD>Led Zepplin</TD>
<TD>The Dobbie Brothers</TD>
</TR>
<TR><TH>Soft</TH>
<TD>Simon and Garfunkel</TD>
<TD>Peter, Paul, & Mary</TD>
<TD>Neil Young</TD>
</TR>
<TR><TH>New Age</TH><TD>Enya</TD>
<TD>Clannad</TD>
<TD>Steamroller</TD>
</TR>
</TABLE>
</BODY>
</HTML>
BORDER attribute--the number of pixels

wide you want the border,
like this: BORDE R=1
ALIGN attribute Possible values of LEFT,
RIGHT, and CENTER (the default is LEFT)
Aligning Table Elements

ALIGN and VALIGN attributes, can be
used to align table elements within their
cells in many different ways.
These attributes can be applied in various
combinations to the <CAPTION>, <TR>,
<TH>, and <TD>
<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.
<TR>--The ALIGN attribute can be specified for

this element with possible values of LEFT,
RIGHT, and CENTER (the default is LEFT for
table data elements and CENTER for table
header elements), and
the VALIGN attribute can be specified with
possible values of TOP, BOTTOM, MIDDLE, and
BASELINE (the default is MIDDLE).
Working with Advanced Tables

The FRAME attribute specifies which sides of a
frame to render. It has the following possible
values:
VOID ----- No Frame
ABOVE -----Top Side
BELOW ----- Bottom Side
HSIDES ------ Horizontal Sides
LHS ------ Left-Hand Side
RHS ----- Right-Hand Side
VSIDES ---- Vertical Sides
BOX or BORDER ---- All Four Sides
The value BORDER is included for

backwards-compatibility with HTML 3.2.
<TABLE FRAME=BORDER> is the same
as the older <TABLE BORDER>.
In addition to the new FRAME attribute for
TABLE, there is also a new RULES
attribute.
Here are the values for RULES, and their meanings:

NONE
GROUPS
ROWS
COLS
ALL
No rules
Horizontal rule between all row groups and a
vertical rule between all column groups
GROUPS rulings, plus horizontal rules
between all rows
GROUPS rulings, plus vertical rules between
all columns
Rules between all rows and all columns
<HTML>
<HEAD>
<TITLE>Table Borders</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TH>FRUITS</TH><TH>VEGETABLES</TH><TH>WHOLE
GRAINS</TH></TR>
<TR><TD>Apple</TD><TD>Broccoli</TD><TD>Barley</TD></TR>
<TR><TD>Orange</TD><TD>Cauliflower</TD><TD>Weat
Berries</TD></TR>
<TR><TD>Kiwi</TD><TD>Sugar Snap
Pea</TD><TD>Millet</TD></TR>
<TR><TD>Pineapple</TD><TD>Bell
pepper</TD><TD>Quinoa</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Table Borders</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><IMG SRC="lion.gif"></TD>
<TD>
The rampant lion is a symbol from Scottish heraldy. It symbolizes
a duty and willingness to defend one's ideals and values, such as
aret&ecirc. The color of the lion, White, is for the purity of the
brotherhood of PEZ, void of the negativity associated with some
fraternities. This White symbolizes how PEZ is a practice of the
pure theory of brotherhood. This brotherhood has its roots in common
ties and support rather than hazing and the like.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Spanning Rows and Columns

To span two adjacent cells on a row, use
the ROWSPAN attribute with <TH> or
<TD>, as follows:
<TD ROWSPAN=2>
To span two adjacent cells in a column,
use the COLSPAN attribute with <TH> or
<TD>, as follows:
<TD COLSPAN=2>
<HTML>
<HEAD>
<TITLE>Row and Column Spanning</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TH COLSPAN=3>DC nationals</TH><TR>
<TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR>
<TR>
<TD>Husmann</TD><TD>O'Donnell</TD><TD ROWSPAN=5>Weinberg</TD>
</TR>
<TR>
<TD COLSPAN=2>Popplewell</TD>
</TR>
<TR>
<TD>McGilly</TD><TD>Longo</TD>
</TR>
<TR>
<TD>Donahue</TD><TD>Seymour</TD>
</TR>
<TR>
<TD>Camillo</TD><TD>Walsh</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Grouping Rows and Columns

COLGROUP assigns width and alignment attributes for a
group of columns.
For example, if you had a table with six columns and you
wanted each of the first three columns to be 50 pixels
wide and left-aligned, each of the second two columns to
be 100 pixels wide and character-aligned on a decimal
point, and the last column to take up the remainder of
the screen width and right-aligned, you could accomplish
all of this formatting with just the following three lines of
HTML:
<COLGROUP WIDTH="50px" ALIGN=LEFT SPAN=3>
<COLGROUP WIDTH="100px" ALIGN=CHAR CHAR="."
SPAN=2>
<COLGROUP WIDTH="100%" ALIGN=RIGHT>
TBODY, THEAD, and TFOOT perform

functions similar to COLGROUP, but they
group rows instead of columns.
THEAD and TFOOT define a group of
rows to form a header or footer for a table,
respectively. TBODY is used to group rows
in the body of the table.
Each is a container--that is, it is made up
of corresponding begin and end tags, as in
<TBODY></TBODY>--but the end tags for
THEAD and TFOOT are optional, as long
as a TBODY tag immediately follows.
<TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX>

<THEAD><TR> <TH>Weekday</TH> <TH>Date</TH>
<TH>Manager</TH> <TH>Qty</TH> </TR></THEAD>
<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>
<TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD>
<TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>
<TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>
<TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>
<TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD>
<TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>
<TD>272</TD> </TR>
</TBODY>
<TFOOT><TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH>
<TH>4923</TH> </TR></TFOOT>
</TABLE>
Controlling Table Layout
Controlling Table Layout

<HTML>
<HEAD>
<TITLE>Formatting Example></TITLE>
</HEAD>
<BODY>
<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10
WIDTH=100%>
<TR>
<TD>Width 100%</TD>
<TD>Border<BR>CellPadding = 10<BR>CellSpacing</TD>
</TR>
<TR>
<TD>
<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5 WIDTH=75%>
<TR>
<TD>Width 75%</TD>
<TD>Border<BR>CellPadding = 5<BR>CellSpacing</TD>
</TR>
</TABLE>
</TD>
<TD>Have a nice day!</TD>
</TR>
</TABLE>
<BODY>
The attributes are as follows:

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.
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.
BORDER attribute--This attribute puts a border around
the table. You specify the width of the border in pixels,
like this:
BORDER=2.
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

You use the BGCOLOR attribute to
change the color of a cell's background,
before any text or images are placed into
the cell.
You use the BORDERCOLOR attribute to
change the color of the border around the
cell. Both Netscape and Internet Explorer
support these attributes.
<HTML>
<HEAD>
<TITLE>Foramtting Example</TITLE>
<HEAD>
<BODY>
<TABLE BORDER BORDERCOLOR=BLUE BGCOLOR=WHITE>
<TR><TD>1-one</TD><TD>2-two</TD><TD>3-three</TD></TR>
<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>
</TABLE>
Changing the entire table's color
<HR>
<TABLE BORDER>
<TR BORDERCOLOR=GREEN BGCOLOR=WHITE><TD>1-one</TD>
<TD>2-two</TD><TD>3-three</TD></TR>
</TABLE>
Changing a single row's color
<HR>
<TABLE BORDER>
<TR><TD BORDERCOLOR=RED BGCOLOR=YELLOW>1-one</TD><TD>2-two</TD>
<TD>3-three</TD></TR>
</TABLE>
Changing a single cell's color
</BODY>
</HTML>
Framing Your Web Site

The Frameset Container:
Frames are contained in a structure called
a FRAMESET, which takes the place of
the BODY container on a framesformatted page.
An HTML document that contains a
FRAMESET definition has no BODY
section in its HTML code, and a page with
a BODY section cannot use the
<FRAMESET> tag.
A simple Frame
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="*, 2*">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
Simple Frame Grid

<HTML>
<HEAD>
</HEAD>
<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>
</HTML>
Complex Grid of Frames

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
Modifying a Frame's Look and Feel

Frame Margins
The FRAME attributes MARGINWIDTH and
MARGINHEIGHT give you control over the width
of the frame's interior margins.
<FRAME MARGINHEIGHT="5"
MARGINWIDTH="7">
Frame Scrollbars
<FRAME SCROLLING="yes|no|auto">
Frame Resizing
<FRAME NORESIZE>
Frame Borders
You use the BORDER, FRAMEBORDER,
and BORDERCOLOR attributes to set the
look and feel of the borders for your
frameset.
The BORDER attribute is used only with
the <FRAMESET> tag.
It is assigned a value in pixels,
like this:
<FRAMESET BORDER="5">
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, which really means that they
are drawn in the default background color
of the browser.
The BORDERCOLOR attribute can be used

with the FRAMESET tag or with the FRAME
tag. For example<FRAMESET BORDERCOLOR="red" ROWS="*,*">
<FRAME SRC="info.htm"
BORDERCOLOR="#FF00FF">
</FRAMESET>
Targeted Hyperlinks
Naming and Targeting Frames
The NAME attribute assigns a name to a frame
that can be used to link to the frame, for eg.
<FRAME SRC="info.htm" NAME="Joe">

creates a frame named "Joe," which can be
referenced via a hyperlink like this:
<A HREF="moreinfo.htm"
TARGET="Joe">Click Here to Jump to
Joe</A>
Collecting Input with Forms

There are three types of tags for creating
fields:
<TEXTAREA>,
<SELECT>, and
<INPUT>.
You can put any number of these tags
between the <FORM> and </FORM>
container tags.
<FORM>
The <FORM> tag comes at the beginning
of any form.
When you create a <FORM> tag, you also
define the script it uses and how it sends
data using the ACTION and METHOD
attributes:
<FORM METHOD="POST"
ACTION="/cgi-bin/comment_script">
...
</FORM>
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.
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.
With <TEXTAREA>, you can provide a

field for someone to enter multiple lines of
information.
By default, a <TEXTAREA> form shows a
blank field four rows long and 40
characters wide.
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.
Default text
Any text between the <TEXTAREA> and
</TEXTAREA> tags is used as default text and
shows up inside the field.
Example:
<HTML>
<HEAD>
<TITLE>TEXTAREA.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME="comments" ROWS=4
COLS=40>Default text
1 2 3 ...
</TEXTAREA>
</FORM>
</BODY>
</HTML>
The <SELECT> element shows a list of

choices in either a pop-up menu or a
scrolling list.
It's set up as an opening and closing tag
with a number of choices listed in
between.
The options for the <SELECT> element are as follows:

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.
If you set SIZE larger than the number of choices you have
within <SELECT>, a nothing choice is added. When the end
user chooses this, it's returned as an empty field.
MULTIPLE
This allows multiple selections. If you specify multiple,
a scrolling window displays--regardless of the number of
choices or the setting of SIZE.
Example of Selection:
<HTML>
<HEAD>
<TITLE>SELECT1.HTM</TITLE>
</HEAD>
<BODY>
What type of connection:
<FORM>
<SELECT NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
</BODY>
</HTML>
Selection via Scrollable List

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
What type of Connection:
<SELECT MULTIPLE NAME="network">
</SELECT>
</FORM>
</BODY>
</HTML>
Selection with Other Option:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
What type of Connection:
<SELECT MULTIPLE NAME="network">
<OPTION VALUE="other"> Other...
</SELECT>
<BR>
If other, please specify:<INPUT TYPE="text" NAME="network_other">
</FORM>
</BODY>
</HTML>
<INPUT>
<INPUT>, unlike <TEXTAREA> and
<SELECT>, is a single tag option for
gathering information.
<INPUT> contains all of the other options
for acquiring information, including simple
text fields, password fields, radio buttons,
check boxes, and the buttons to submit
and reset the form.
The attributes for the <INPUT> tag are the

following:
NAME
This defines the name for the data. This field is
required for all the types of input except Submit
and Clear.
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.
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.
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, the default input type, gathers a simple line of text.

<HTML>
<HEAD>
<TITLE>INPUT1.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
A Phone Number: <INPUT TYPE="text" NAME="Phone"
SIZE="15"
MAXLENGTH="12">
</FORM>
</BODY>
</HTML>
PASSWORD, a modified TEXT field, displays typed

characters as bullets instead of the characters actually
typed.
<HTML>
<HEAD>
<TITLE>INPUT2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
Enter the secret word: <INPUT TYPE="password"
NAME="secret_word"
Size="30" MAXLENGTH="30">
</FORM>
</BODY>
</HTML>
CHECKBOX displays a simple check box that can be checked or left

empty; Possible attributes to include with the TYPE text include NAME
(required),VALUE, and CHECKED (which defaults the check box as
checked).
<HTML>
<HEAD>
<TITLE>CHECKBOX.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="checkbox1"
VALUE="checkbox_value1"> A checkbox
<INPUT TYPE="checkbox" NAME="checkbox2"
VALUE="checkbox_value2 CHECKED>A pre-selected checkbox
</FORM>
</BODY>
</HTML>
RADIO is a more complex version of a check box,

allowing only one of a related set to be chosen.
Possible attributes to include with the TYPE text
include NAME (required), VALUE, and CHECKED.
<HTML>
<HEAD>
<TITLE>RADIO1.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio" NAME="choice"
VALUE="choice1"> Yes.
<INPUT TYPE="radio" NAME="choice"
VALUE="choice2"> No.
</FORM>
RESET displays a push button with the preset function of

clearing all the data in the form to its original value.
You can use the VALUE attribute with the RESET tag to
provide text other than Reset (the default) for the button.
<HTML>
<HEAD>
<TITLE>RESET.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="reset">
<BR>
<INPUT TYPE="reset" VALUE="Clear that form!">
</FORM>
</BODY>
</HTML>
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.
You can use the VALUE attribute with SUBMIT to provide text other
than Submit Query (the default) for the button.
<HTML>
<HEAD>
<TITLE>SUBMIT.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="submit">
<BR>
<INPUT TYPE="submit" VALUE="Send in the data!">
</FORM>
</BODY>
</HTML>
Form Example: Without Pre Tag

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Not Using PRE tags</H1>
<FORM>
Name: <INPUT TYPE="text" NAME="name" SIZE="50"><BR>
E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50"><BR>
Street Address: <INPUT TYPE="text" NAME="street1"
SIZE="30"><BR>
<INPUT TYPE="text" NAME="street2" SIZE="30"><BR>
City: <INPUT TYPE="text" NAME="city" SIZE="50"><BR>
State: <INPUT TYPE="text" NAME="state" SIZE="2"><BR>
Zip: <INPUT TYPE="text" NAME="zip" SIZE="10">
</FORM>
</BODY>
</HTML>
Form Example with Pre Tag:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Using PRE tags</H1>
<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>
</FORM>
</BODY>
</HTML>
Form Design with Table:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Using HTML Tables</H1>
<FORM>
<TABLE>
<TR><TD>Name:</TD><TD><INPUT TYPE="text"
NAME="name" SIZE="50"></TD></TR>
<TR><TD>E-Mail:</TD><TD><INPUT TYPE="text"
NAME="email" SIZE="50"></TD></TR>
<TR><TD>Street Address:</TD><TD><INPUT
TYPE="text"
NAME="street1" SIZE="30"></TD></TR>
Cont..
<TR><TD></TD><TD><INPUT TYPE="text" NAME="street2"
SIZE="30"></TD></TR>
<TR><TD>City:</TD><TD><INPUT TYPE="text" NAME="city"
<TR><TD>State:</TD><TD><INPUT TYPE="text"
NAME="state"
SIZE="2"></TD></TR>
<TR><TD>Zip:</TD><TD><INPUT TYPE="text" NAME="zip"
</TABLE>
</FORM>
</BODY>
</HTML>
Using List Tags

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Descriptive List Tags</H1>
<FORM>
<DL>
<DT>How would you like to pay for this?
<DD><INPUT NAME="pay" TYPE="radio" VALUE="cash"
CHECKED>Cash
<DD><INPUT NAME="pay" TYPE="radio"
VALUE="check">Check
VALUE="debit">Debit Card
Cont..
<DL>
<DT>Credit Card
<DD><INPUT NAME="pay" TYPE="radio" VALUE="mc">Mastercard
<DD><INPUT NAME="pay" TYPE="radio" VALUE="visa">Visa
<DD><INPUT NAME="pay" TYPE="radio" VALUE="disc">Discover
VALUE="ae">American Express
</DL>
</DL>
</FORM>
</BODY>
</HTML>
Check Box and Radio Button Layouts

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
What size would you like?<BR>
<INPUT NAME="size" TYPE="radio" VALUE="sm">Small
<INPUT NAME="size" TYPE="radio" VALUE="md">Medium
<INPUT NAME="size" TYPE="radio" VALUE="lg">Large
<INPUT NAME="size" TYPE="radio" VALUE="x">X-Large
<INPUT NAME="size" TYPE="radio" VALUE="xx">XX-Large
</FORM>
</BODY>
</HTML>
Final Notes on Form Layouts

When you're creating forms, it's always a good idea to
keep the form on a single page.
If your form is very short, keep it under 14 lines. This
ensures that it will fit on one page in most browsers.
It doesn't always work, but it does create a compact
page that's easy for most people to see.
A good trick for keeping the pages compact is using
<SELECT> tags with the size set to 1 (to show a pop-up
menu) or 3 or 4 (for a small scrolling window
for
multiple choices) instead of having large numbers of
check boxes and radio buttons.
If your form is large (more than two pages on any
browser), don't put the Submit or Reset buttons in the
middle of the form.
New Tag Attributes

ACCESSKEY is a new attribute for use
with the LABEL, A, and CAPTION tags.
With it, you can define a single caseinsensitive hotkey for activating a forms
element.
For example,
<LABEL ACCESSKEY="N">Name<INPUT
TYPE="TEXT" NAME=USER></LABEL>
The new DISABLED attribute for INPUT,

TEXTAREA, SELECT, OPTION, OBJECT,
LABEL, and BUTTON turns off an element
and grays it out on the screen. (The
element is also skipped when tabbing
between elements.)
It should be used when a form element is
currently inappropriate or if you want to
skip a field for some reason.
Once DISABLED, the only way to turn an
element back on is by using an associated
script, such as JavaScript.
The TEXTAREA tag and the INPUT tag's

TEXT and PASSWORD types have a new
READONLY attribute that can be used to
prohibit user input in those fields.
If you want to pass back some data that
you've preset for a user, this is one way to
do it.
At the same time, you're making sure that
data is known to the end user but is not
modifiable by him. Again, you can use a
script to change this state dynamically if
you wish.
ONCLICK, ONFOCUS, ONBLUR, ONSELECT,

and ONCHANGE are new attributes that
function as placeholders for scripts that run
when each of the indicated events occurs.
The ONCLICK script runs when a mouse click occurs
over an element,
ONFOCUS when it becomes the input focus,
ONBLUR when the focus moves away from the
element,
ONSELECT when chosen, and
ONCHANGE when data in the field has changed.
These exciting new attributes open up a world of new
possibilities. Again, the specifics of their
implementation await browsers that can interpret
these new attributes.
Now you'll be able to, thanks to the new

TITLE attribute, which is available for use
with all form input elements. Just specify
TITLE="ToolTip Here" for any element.
Under HTML 3.2, there was no specified order

for tabbing through elements.
You hit the Tab key and the form's input focus
advanced to whatever element was next in line
by virtue of where it appeared in the HTML
source.
The new HTML 4.0 TABINDEX attribute,
TABINDEX=n to each element, where n is equal
to its place in the tabbing sequence.
n must be an integer, but it can also have a
negative value, which indicates that the element
should be left out of the tabbing sequence.
The new LABEL tag is used to associate a

label with a form element. It is useful for
creating a user interface for selecting a
form control. For example,
<LABEL FOR=NAME>Name</LABEL>
Lots of stuff goes here...
<INPUT TYPE=TEXT NAME=YOURNAME
ID=NAME>
Clicking the NAME link in the LABEL will jump the end
user to the text input field with the ID of NAME, as
indicated by the FOR=NAME attribute of the LABEL
tag, and will shift the focus to that field.
HTML 3.2 forms supported only the

Submit and Reset buttons.
HTML 4.0 forms improve on this with a
user-definable BUTTON element.
The BUTTON tag works in conjunction
with the new ONCLICK attribute, which
associates clicking the button with
executing a script.
The DISABLED, TABINDEX, ONFOCUS,
and ONBLUR attributes are also
supported by BUTTON.
<BUTTON ONCLICK="script.scp">
<IMG SRC="ButtonImage.gif">
Click this button to do something great!
</BUTTON>
Finally, the new FIELDSET container is used in

conjunction with a new CAPTION container to
group form elements, as in this example:
<FIELDSET>
<CAPTION ACCESSKEY=N
TABINDEX=1>Name Fields</CAPTION>
<LABEL ACCESSKEY=F><INPUT TYPE=TEXT
NAME=FirstName>First Name</LABEL><BR>
<LABEL ACCESSKEY=L><INPUT TYPE=TEXT
NAME=LastName>Last Name</LABEL>
</FIELDSET>
What is JavaScript?
Javascript is an easy-to-use scripting
language that can be embedded in the
header of your web pages.
It can enhance the dynamics and
interactive features of your page by
allowing you to perform calculations, check
forms, write interactive games, add special
effects, customize graphics selections,
create security passwords and more.
The <SCRIPT> tag

To assist the browser in recognizing lines
of code in an HTML document as
belonging to a script, you surround lines of
script code with a <SCRIPT>...</SCRIPT>
tag set.
This is common usage in HTML, where
start and end tags encapsulate content
controlled by that tag, whether the tag set
be for a form or a bold font.
Depending on the browser, the <SCRIPT>

tag has a variety of attributes you can set
that govern the script.
One attribute shared by Navigator and
Internet Explorer is the LANGUAGE
attribute.
This attribute is essential because each
browser brand and version accepts a
different set of scripting languages.
One setting that all scriptable browsers
accept is the JavaScript language, as in
<SCRIPT LANGUAGE=JavaScript>
Tag positions
Where do these tags go within a
document?
Anywhere theyre needed in the document.
Sometimes it makes sense to include the
tags nested within the <HEAD>...</HEAD>
tag set;
other times it is essential that the script be
dropped into a very specific location in the
<BODY>...</BODY> section.
Scripts in the Head

<HTML>
<HEAD>
<TITLE>A Document</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// statements
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
A Script in the Body

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE ="JavaScript" >
// statements
</ SCRIPT>
</BODY>
</HTML>
Scripts in the Head and Body

<HTML>
<HEAD>
// statements
</SCRIPT>
</HEAD>
<BODY>
// statements
</SCRIPT>
</BODY>
</HTML>
To know which browser and version you are

working on use following script:
<HTML>
<BODY>
<H1>Let's Script!</H1>
<HR>
document.write("This browser is version " +
navigator.appVersion)
document.write(" from <B>" + navigator.appName +"</B>.")
</SCRIPT>
</BODY>
</HTML>
Working with Information

JavaScript statement you write does
something with a chunk of information
data.
The chunk of data may be text information
displayed on the screen by a JavaScript
statement or the on/off setting of a radio
button in a form.
Each single piece of information in
programming is also called a value.
Variables
The most convenient way to work with
data in a script is to first assign the data to
what is called a variable.
Its usually easier to think of a variable as
a basket that holds information.
Creating a variable
Use the var keyword, followed by the name
you want to give that variable.
Ex:
var age
or
var age=25
or
var age
age=25
Example 1:
<HTML>
<HEAD>
var empid=10
var empname="Ganesha"
var bonus=12675.80
var salary=12000
document.write(Employee id="+empid)
document.write("<br>Employee Name="+empname)
document.write("<br>Employee Bonus="+bonus)
document.write("<br>Annual salary="+salary*12)
document.write("<br>Adding all 3="+empid+empname+bonus)
</SCRIPT>
</HEAD><body>
</BODY>
</HTML>
Converting strings to numbers:

parseInt( ) and parseFloat( ) built-in
functions are used.
Example :
parseInt("42")
//result = 42
parseInt("42.33")
//result = 42
3+3+"3"
//result = "63"
3+3+parseInt("3") //result = 9
parseFloat("42")
//result = 42
parseFloat("42.33") //result = 42.33
Converting numbers to strings:

By adding an empty string to a number,
you convert the number to its string
equivalent:
("" + 2500)
("" + 2500).length
//result = "2500"
//result = 4
Arithmetic Operators:
The standard math operators for addition,
subtraction, multiplication, and division (+, -, *, /)
are built into JavaScript.
Comparison operators
Another category of operator helps you
compare values in scripts whether two values
are the same, for example.
These kinds of comparisons return a value of
the Boolean type true or false.
Symbol
==
!=
>
>=
<
<=
Description
Equals
Does not equal
Is greater than
Is greater than or equal to
Is less than
Is less than or equal to
Control Structures
If constructions
if (condition) {
statement[s] if true
}
For eg:
if (yourAge < 18) {
alert(Sorry, you cannot vote.)
}
If . . . else constructions
The formal syntax definition for an if...else
construction is as follows:
if (condition) {
statement[s] if true
}
else {
statement[s] if false
}
For Eg:
var febDays = 0
var theYear = 1993
if (theYear % 4 == 0) {
febDays = 29
}
else {
febDays = 28
}
About Repeat Loops

for ([initial expression]; [condition]; [update
expression]) {
statement[s] inside loop
}
The following example displays numbers
between 1 to 10.
for ( count=1; count <=10; count++ ) {
document.write(count)
}
Functions
A function is a definition of a set of
deferred actions.
Functions are invoked by event handlers
or by statements elsewhere in the script.
Whenever possible, good functions are
designed to be reusable in other
documents.
A function is capable of returning a value
to the statement that invoked it, but this is
not a requirement.
Formal syntax for a function is as follows:
function functionName ( [parameter1]...

[,parameterN] ) {
statement[s]
}
For Eg:
<HTML>
<HEAD>
function getHalf(incomingParameter) {
return incomingParameter/2;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("Half the number of 10.6
is: ", getHalf(10.6),"<BR>");
document.write("Half the number of 12.3
is: ", getHalf(12.3));
</SCRIPT>
<P> Done.
</BODY>
</HTML>
<html>
<head><title> Example Window</title>
<script language="JavaScript">
function calc(){
var intVal=parseInt(myform.mytext.value);
sum=0;
for(i=1;i<=intVal;i++){
sum=sum+i;
}
document.write("Sum ="+sum);
}
</script>
</head>
<body>
<hr>
<form name="myform">
<p>
Enter any no.
<input type="text" name="mytext" size="10">
</p>
<input type="button" value="click here"
onClick="calc()">
</form>
<hr>
</body>
</html>
Arrays
The JavaScript array is one of the most useful
data constructions available to you.
The structure of a basic array resembles that of a
single-column spreadsheet.
Each row of the column holds a distinct piece of
data, and each row is numbered.
Numbers assigned to rows are in strict numerical
sequence, starting with zero as the first row.
This row number is called an index. To access an
item in an array, you need to know the name of
the array and the index for the row.
Creating an Array
var USStates = new Array (51)
USStates - name of the variable
new - keyword
Array(51)- how many elements eventually will
occupy the memory.
The first row of the USStates array is
addressed as USStates[0]
And to assign the string name of the first

state of the alphabet to that row, use a
simple assignment operator:
USStates[0] = Alabama
To fill in the rest of the rows, include a
statement for each row:
USStates[1] = Alaska
USStates[2] = Arizona
USStates[3] = Arkansas
...
USStates[50] = Wyoming
Example 1
<HEAD>
<TITLE> Array Program </TITLE>
<SCRIPT LANGUAGE=JavaScript">
var a=new Array(3);
a[0]=12;
a[1]="Raju";
a[2]=7.2;
for(i=0;i<3;i++)
{
document.write(a[i]+"<BR>");
}
</SCRIPT></HEAD>
Example 2
function go(t)
{
sum =0;
for(i=0;i<t.length;i++)
sum += t[i];
return sum;
}
Contd..
var arr1 = new Array (12,4,22,50);
var arr2 = new Array (45,2);
var arr3 = new Array (2);
document.write("<br>Sum of arr1 = " + go(arr1));
</script>
output:
Sum of arr1 = 88
Sum of arr2 = 47
Sum of arr3 = NaN
//Not a Number
Arrays with Mixed Element Types

function disp(text)
{
document.write("<hr>Length =",text.length);
for(i=0;i<text.length;i++)
document.write("<br>",text[i]);
}
var arr1 = new Array ("Testing",4,2.2,"50p");
var arr2 = new Array (45,"F2");
var arr3 = new Array (2);
disp(arr1);
disp(arr2);
disp(arr3);
arr1[0]=243;
disp(arr1);
</script>
output:
Length =4
Test
4
2.2
50p
_____________
Length =2
45
F2
______________
Length =2
undefined
undefined
______________
Length =4
243
4
2.2
50p
Associative array
For the case where the element is a string,
boolean, or non-integer numeric, you can
associate another variable or object with
that element and access that new variable
or object using the name of the original
array and the value stored in the element.
Associative array
my = new Array("Name","Age","Sal");
my["Name"] = "Rama";
my["Age"] = 18;
my["Sal"] = 12455.45;
document.write("<br>Name =" +my["Name"]);
document.write("<br>Age =" +(my["Age"]+3));
document.write("<br>Salary=" +(my["Sal"]+100));
document.write("<br>Token =" +(my[1]));
</script>
output:
Name =Rama
Age =21
Salary=12555.45
Token =Age
Sorting names using Arrays:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
myArray = new Array("Tom", "Dick", "Harry", "Sue");
document.write("Display myArray<BR>");
for(cnt = 0; cnt < myArray.length ; cnt++)
document.write("Element " + cnt + " = " + myArray[cnt]
+"<BR>");
document.write("<BR>Sort and display the array<BR>");
myArray.sort(); //sort() is the built in method
for(cnt = 0; cnt < myArray.length ; cnt++)
document.write("Element " + cnt + " = " + myArray[cnt]
+"<BR>");
</SCRIPT> </HEAD>
<BODY>
</BODY></HTML>
Output
Display myArray
Element 0 = Tom
Element 1 = Dick
Element 2 = Harry
Element 3 = Sue
Sort and display the array
Element 0 = Dick
Element 1 = Harry
Element 2 = Sue
Element 3 = Tom
Done.
Objects and Properties

Your web page document is an object. Any table,
form, button, image, or link on your page is also an
object. Each object has certain properties
(information about the object). For example, the
background color of your document is written
document.bgcolor. You would change the color of
your page to red by writing the line:
document.bgcolor="red"
The contents (or value) of a textbox named
"password" in a form named "entryform" is
document.entryform.password.value.
Document Object Model
Methods
Most objects have a certain collection of things that they
can do. Different objects can do different things, just as a
door can open and close, while a light can turn on and
off. A new document is opened with the method
document.open() You can write "Hello World" into a
document by typing document.write("Hello World") .
open() and write() are both methods of the object:
document.
For example:
document.bgcolor="red" is a property because I'm
changing the existing details about the document.
alert("Hello There") is a method because it creates
something new, an alert box.
Events
Events are how we trigger our functions to
run. The easiest example is a button,
whose definition includes the words
onClick="run_my_function()". The onClick
event, as its name implies, will run the
function when the user clicks on the
button. Other events include
OnMouseOver, OnMouseOut, OnFocus,
OnBlur, OnLoad, and OnUnload.
EVENTS IN A FORM
There are 3 events which are particularly
useful when working in a form.
onFocus
onBlur
onChange
<FORM>
<INPUT TYPE=TEXT SIZE=20
onFocus="window.status='Hi there';return true">
</FORM>
<FORM>
<INPUT TYPE=TEXT SIZE=20
onBlur="window.status='Bye now';return true">
</FORM>
On Change Example 1
<SCRIPT>
function getSelect(s) {
return s.options[s.selectedIndex].value
}
</SCRIPT>
<FORM>
<SELECT NAME="mylist" SIZE=1
OnChange="location=getSelect(this)">
<OPTION value="#"> Choose a search engine
<OPTION value="http://www.yahoo.com"> Yahoo
<OPTION value="http://www.lycos.com"> Lycos
<OPTION value="http://www.excite.com"> Excite
</SELECT>
<FORM>
On Change Example 2
<html>
<body>
<SCRIPT>
function getSelect(s) {
document.write(s.selectedIndex+"<br>"+s.options[s.selectedIndex].value);
}
</SCRIPT>
<FORM>
<SELECT NAME="list" SIZE=1 onChange=getSelect(this)>
<OPTION value="#"> Choose a search engine
<OPTION value="http://www.yahoo.com"> Yahoo
<OPTION value="http://www.lycos.com"> Lycos
<OPTION value="http://www.excite.com"> Excite
</SELECT>
</FORM>
</body>
</html>
Example of OnClick & Onmouseover

<HTML>
<HEAD>
function changecolor(code) {
document.bgColor=code
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type="button" name="Button1" value="RED"
onmouseover="changecolor('red')">
<input type="button" name="Button2" value="GREEN"
onclick="changecolor('green')">
</FORM>
</BODY>
</HTML>
Window and Document Objects

At the very top of the document object
hierarchy is the window object.
This object is the master container for all
content you view in the Web browser.
Accessing window properties

and methods
Script references to properties and
methods of the window object can be
worded in several ways. The most logical
and common way to compose such
references includes the window object in
the reference:
window.propertyName
window.methodName([parameters])
A window object also has a synonym when the
script doing the referencing is pointing to the

window that houses the document.
The synonym is self. Reference syntax then
becomes
self.propertyName
self.methodName([parameters])
Example Creating a Window

<HTML>
<HEAD>
<TITLE>Window Opener and Closer</TITLE>
var newWindow
function makeNewWindow( ) {
newWindow = window.open("","","HEIGHT=300,WIDTH=300")
}
function closeNewWindow( ) {
if (newWindow) {
newWindow.close( )
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Create Window"
onClick="makeNewWindow()">
<INPUT TYPE="button" VALUE="Close Window"
onClick="closeNewWindow()">
</FORM>
</BODY>
</HTML>
Window Properties and Methods

1.
window.status property
<HTML><HEAD><TITLE>window.defaultStatus
property</TITLE>
window.defaultStatus = "Welcome to my Web site."
</SCRIPT>
</HEAD>
<BODY><A HREF="http://home.netscape.com"
onMouseOver="window.status = 'Go to your browser Home
page.(www.igiindia.com)';return true"
onMouseOut="window.status='';return true">Home</A><P>
<A HREF="http://home.netscape.com"
onMouseOver="window.status = 'Visit Netscape\'s Home
page.(home.netscape.com)';return true"
onMouseOut="window.status = window.defaultStatus; return
true">Netscape</A>
</BODY></HTML>
Other window methods

2. window.alert property
3. window.prompt property
4. window.confirm property
<html>
<head>
function pwd( )
{
Ret=prompt('Type Password',"");
if(Ret == xiss")
conf( )
else
alert("Wrong Password.");
}
function conf( )
{
if (confirm('Wish to open another document ?'))
location=test.html";
}
</script>
</head>
<body onload=pwd( )>
<input type="button" name="Click" value="Click Me"
onClick=pwd()>
</body>
</html>
Forms and Form Elements

Most interactivity between a Web page
and the user takes place inside a form.
Thats where text fields, buttons,
checkboxes, option lists, and so on are
present.
The Form Object

A form object can be referenced either by its
position in the array of forms contained by a
document or by name (if you assign a name to
the form in the <FORM> tag).
Even if only one form appears in the document,
it is a member of a one-element array, and is
referenced as follows:
document.forms[0]
But if you assign a name to the form, simply plug
the forms name into the reference:
document.formName
Forms are created entirely from standard

HTML tags in the page. You can set
attributes for NAME, TARGET, ACTION
and METHOD.
document.forms[0].action
document.formName.action
form.elements[] property
In addition to keeping track of each type of
element inside a form, the browser also
maintains a list of all elements within a
form.
This list is another array, with items listed
according to the order in which their HTML
tags appear in the source code.
Script to Empty the text boxes

var form = window.document.forms[0]
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].type = text) {
form.elements[i].value =
}
Text Objects
<HTML>
<HEAD>
<TITLE> Text Object value property </TITLE>
<SCRIPT LANGUAGE="javascript">
function upperMe( ){
var field = document.forms[0].converter
field.value = field.value.toUpperCase( )
}
function uppMe( ){
var field = document.forms[0].convert
field.value = field.value.toUpperCase( )
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit = "return false">
<INPUT TYPE = "text" NAME = "convert" VALUE =
"sample" onBlur = "uppMe( )"><p>
<INPUT TYPE = "text" NAME = "converter" VALUE
= "sample" onKeyUp = "upperMe( )">
</FORM>
</BODY>
</HTML>
Check Box Object

The value property of a check box is any other text you
want associated with the object.
The key property of a checkbox object is whether or not
the box is checked. The checked property is a Boolean
value: true if checked, false if not.
Example
<TITLE>Checkbox Inspector</TITLE>
function inspectBox() {
if (document.forms[0].checkThis.checked) {
alert("The box is checked.")
} else {
alert("The box is not checked at the moment.")
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="checkThis">Check
here<BR>
<INPUT TYPE="button" VALUE="Inspect Box"
onClick="inspectBox()">
</FORM>
</BODY>
</HTML>
The Radio Object

Lets us to manage the highlighting and
unhighlighting of a related group of buttons in
the browser.
You must assign the same name to each of the
buttons in the group.
The name assigned to the group becomes the
name of the array.
You can find out how many buttons are in a
group by reading the length property of the
group:
document.forms[0].groupName.length
document.forms[0].groupName[0].checked
Example
<HTML>
<HEAD>
<TITLE>Extracting Highlighted Radio Button</TITLE>
function fullName() {
var form = document.forms[0]
for (var i = 0; i < form.place.length; i++) {
if (form.place[i].checked) {
break
}
}
alert( form.place[i].value + ".")
}
Contd..
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Select your favorite City:</B>
<INPUT TYPE="radio" NAME="place" VALUE="IT capital of India"
CHECKED>Blore
<INPUT TYPE="radio" NAME="place" VALUE="Capital of India" >New
Delhi
<INPUT TYPE="radio" NAME="place" VALUE="Famous for Howrah
Bridge" >Calcutta<BR>
<INPUT TYPE="button" NAME="Viewer" VALUE="View Details..."
onClick="fullName( )">
</FORM>
</BODY>
</HTML>
Passing Form Data and Elements to

Functions and submitting form
JavaScript features a keyword this that
always refers to whatever object contains the
script in which the keyword is used.
Thus, in an onChange= event handler for a text
field, you can pass a reference to the text object
to the function by inserting the this keyword as a
parameter to the function:
<INPUT TYPE=text NAME=entry
onChange=upperMe(this)>
At the receiving end, the function defines a

parameter variable that turns that
reference into a variable that the rest of
the function can use:
function upperMe(field) {
statement[s]
}
Example
<HTML>
<HEAD>
<TITLE>Validator</TITLE>
function checkForm(form) {
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].value == "") {
alert("Fill out ALL fields.")
return false
}
}
return true
}
Contd..
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="return checkForm(this)">
Please enter all requested information:<BR>
First Name:<INPUT TYPE="text" NAME="firstName" ><BR>
Last Name:<INPUT TYPE="text" NAME="lastName" ><BR>
Password:<INPUT TYPE="password" NAME="passwd" ><BR>
Serial Number:<INPUT TYPE="text" NAME="serialNumber" ><BR>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>
Strings, Math and Date objects

Strings: A string is any text inside a quote pair.
ex : var myString = "Infotech"
In latest versions we can create a string object using new
keyword.
Ex: var myString = new String("Infotech");
Strings can be joined as follows:
var igi = "Infotech"
igi = igi + "Global" //igi += "Global"
igi = igi + "India (Ltd) " //igi += "India (Ltd)" //igi + = "India"
+ "( Ltd )"
Methods:
var result = string . methodname( )
Ex: var result = string.toUpperCase( )
var result = string.toLowerCase( )
String searches:
string.indexOf( ) - to determine whether one string
is contained in another.
<script>
var str = "Windows".indexOf("d");
document.write(str);
</script>
output : 3
Extracting characters and substrings:

string.charAt( ) - to extract a character from a position.
<script>
var str = "Windows"
var onechar = str.charAt(3);
document.write(onechar);
</script>
string.substr ( ) - to display a part of string in a string.
<script>
var str = "Windows"
var sustr = str.substr(3,3);
document.write(sustr);
</script>
Example : Changes the given string by

incrementing each character to next character
function encode(text) {
Ref="0123456789abcdefghijklmnopqrstuvwxyz.-~ABCDEFGHIJK
LMNOPQRSTUVWXYZ"
Result=""
for (Count=0; Count<text.length; Count++)
{
Char=text.substring (Count, Count+1);
Num=Ref.indexOf(Char);
EncodeChar=Ref.substring(Num+1, Num+2)
Result += EncodeChar
}
document.form1.result.value=Result
}
</SCRIPT>
Contd.
</HEAD>
<BODY bgcolor="beige">
<FORM name="form1">
Type your word <INPUT NAME="input" TYPE=Text>
<INPUT TYPE=Button VALUE="submit"
onClick="encode(this.form.input.value)">
Result:<td><INPUT NAME="result" TYPE=Text>
</FORM>
</BODY>
</HTML>
Math Object
Math . PI
Math . SQRT2
Math . max( )
Math . pow( )
Math . round( )
Math . random( )
<script>
var piValue = Math.PI
var a=10,b=20;
document.write(piValue);
// o/p: 3.141592653589793
var rootOfTwo=Math.SQRT2
document.write("<br>"+rootOfTwo);
// o/p : 1.4142135623730951
var a=10,b=20;
var largest = Math.max(a,b);
document.write("<br>",largest); // o/p : 20
var raisedto = Math.pow(a,3);
document.write("<br>",raisedto);// o/p : 1000
var roundto = Math.round(45.4);
document.write("<br>",roundto); // o/p : 45
var roundto = Math.round(45.5);
document.write("<br>",roundto); // o/p : 46
var randno = Math.random( );
document.write("<br>",randno) // o/p : 0.02253180459640247
</script>
<html><head><title> Quadratic Equation</title>

<script>
var a,b,c,f;
function check(f)
{var a=window.event.keycode;
if(!(a>=48 && a<=57)
alert(type a number between 0 & 9);
}
function calcroot(f)
{ a=parseFloat(f.a.value);
b=parseFloat(f.b.value);
c=parseFloat(f.c.value);
if (a==0)
alert(This is not a quadratic equation. Type a non zero
value for A);
else {
var d=Math.sqrt(b*b-4*a*c);
if(d>0||d==0)
{
var r1=(-b+d)/(2*a);
var r2=(-b-d)/(2*a);
alert(The roots are +r1+ & +r2);
} else
alert(The roots are imaginary);} }
</script></head>
<body>
<form bgcolor=blue>
<h2>Quadratic Equation</h2>
<pre><br> <hr>
Enter the coefficients<br>
Value of A<Input type=text name=a value=0
onkeypress=check(this.form)>
Value of B<Input type=text name=b value=0
onkeypress=check(this.form)>
Value of C<Input type=text name=c value=0
onkeypress=check(this.form)> <br>
<input type=button value=Solve onclick=calcroot(this.form)>
</form><br></pre></body></html>
<HTML>
<HEAD>
<TITLE>Image Object</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
var newIndex = 1
function checkTimer() {
document.thumbnail2.src = "moon0"+newIndex+".ico"
newIndex++;
if(newIndex==8)
newIndex=1
var timeoutID = setTimeout("checkTimer()",100)
}
</SCRIPT>
</HEAD>
<BODY onLoad=checkTimer()>
<H2>Image Object Demonstration</H2>
<IMG SRC="moon01.ico" NAME="thumbnail2"
HEIGHT=90 WIDTH=120>
</BODY>
</HTML>
PHP
PHP is a server site scripting language.
PHP is implemented by Rasmus Lerdorf,
by using C, Perl technology.
PHP stands for Personal Home Page and
also it contains an alias name i.e.
Hypertext Pre Processor.
Features of PHP
PHP is cross-platform.
PHP is cross-server.
PHP is cross DB.
PHP 5.0 is providing a MYSQLlibrary to
communicate with MySQL DB.
PHP is open source.
PHP 5.0 supports more object oriented
programming concept.
Php execution is very fast because of

Zend engine.
Php supports different types of content
management system software like
Joomla, WordPress, & Drupal.
All CMS software are open source
software.
Php is providing all security functions like
one way encryption, two way encryption,
authentication etc.
Php is maintaining by Zend organisation,

is providing no. of tools to work with PHP.
Php is supporting different types of editors
we can also use light weight editors like
notepad, edit etc.
Php is very easy to develop the
applications.
Versions of PHP
PHP 1.0 -> 1995 (not server side scripting)

PHP 2.0 -> 1997 (partially server side
scripting)
PHP 3.0 -> 1998
Zeev Suraski and Andy Gutmans have rewritten the functionality of PHP from scratch.
They started an organisation to maintain PHP
i.e. Zend organization.
Renamed it as PHP: hypertext pre-processor
Php 3.0 is cross-platform
Versions of PHP
PHP 4.0 -> 2000
It is cross-server
Zend engine 1.0 is introduced
Snarty template system
PHP 5.0 -> 2005

OOPs features are supported
Zend engine 2.0 is introduced
More xml and web services support is increased.
PHP 6.0 ->

Emphasis is on unique code support
Basics
PHP loosely typed language
No need to provide the data types at the time of
variable declaration.
Every variable name should start with $ symbol.
Php is case sensitive in variable and in sensitive in
method/function.
Every php file extension should be .php
Php code should include within the script declaration
style tag.
Php is an interpreted language.
Every line in php should end with semicolon.
Declaration Style tags of php

Universal style tag
<? Php
- ?>
Start Open tag

<?

?>
ASP style tag

<%

%>
Script style tag

<script language=php
..
</script>
Functions in php
Print
Echo
Var_dump- to print along with data type.
Printf-to display variable value with format
specifier.
Printr-to display all elements of an array
Isset()-Whether the input variable is set with any
value or not.
Unset()- to delete the value of a variable.
Sort
Functions in php
Sort($arr1);
Rsort
Arranges in descending order
Asort
Ascending order with original keys
Arsort
Descending order with original keys
Ksort
Ascending order based on keys
krsort
Descending order based on keys
Array
$arr1=Array(1,XXXX,22);
Print_r($arr1);
<?php
$age=23;
$name=Arpita;
echo "Hi!", $name;
$x= print "Welcome";
print $x;
?>
To print
<?php
echo "This is a test version";
?>
Data Access Using the ADO Data

Control
What is ActiveX Data Object?
ADO is Microsofts strategic application-level
programming interface to data and information.
It provides an easy to use application level
interface to OLEDB, which provides the
underlying access to data.
ADO is implemented with minimal number of
layers between the front end and data source
to provide a high performance interface.
Understanding OLEDB
ADO provides its functionality through
OLEDB an open standard designed to
allow access to all kinds of data.
Conceptually, OLE DB has three
components:
Data Providers
A data provider is any OLEDB provider that owns
data and exposes its data in a tabular form.
Examples of data providers include relational
DBMS, spreadsheets, file systems and email.
Contd..
Data consumers
Data consumers are applications that use the exposed by
data providers. In other words, any application that uses
ADO is an OLEDB consumer.
Service components
Although data providers can provide some database
functionality, OLE DB service components perform data
processing and transport functionality between data
consumers and data providers.
In this scenario neither the front-end application nor the
back end database is responsible for providing its own
database functionality. Instead, service components
provide functionality that any application can use when
accessing data.
MySql Connectivity through php Program

MySql_connect(servername, username,
password)
mySql_select_db(connection_id,
databasename)
mySql_query(sqlquery, connection_id)
MySql_error
MySql_Error_no
Program to connect to database

<? Php
If($con=mysql_connect(localhost, root, ))
{
Echo Connected
}
Else
Echo Mysql_error();
Program to create database

<? Php
$con=mysql_connect(localhost, root, )
If(mysql_query(create database db_test1,
$con))
echo Database Created;
else
echo Mysql_error();
?>
Program to create table

<? Php
Mysql_select_db(db_test1,$con);
If(mysql_query(create table tbl_new(roll int,
name varchar(50), $con);
echo Table Created;
else
echo Mysql_error();
?>
Program to insert data into table

<? Php
Mysql_select_db(db_test1,$con);
If(mysql_query(insert into tbl_new values(1, Rajiv)));
echo data inserted;
else
echo Mysql_error();
?>

HTMLPPT (Autosaved)

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTMLPPT (Autosaved)

Hochgeladen von

Copyright:

Verfügbare Formate

What HTML Is

It isn't a programming language.

Creating Basic HTML Documents

The Simplest HTML Document

The </HTML> end tag is just as important

The Document Heading

Elements within the head element

A Fairly Detailed HEAD Element

The BASE element is used to specify the full

The LINK Element - If the BASE element

Table: LINK Attributes and Their

The META element allows a document author to

META Attributes and Their Functions

BODY Attributes and Their Functions

The Address Element

Breaking Text into Paragraphs

Adding and Preventing Line Breaks

Creating a Text Outline

Adding Horizontal Lines

<HR> Attributes and Their Functions

The <DIV></DIV> container (DIV stands for division) can

Physical Format Elements

<BIG> The big print element uses a larger

<SUP> The superscript element moves

The FONT Element

The SIZE Attribute

The COLOR Attribute

The <BASEFONT> Tag

Creating Special Characters

Adding Graphics to a Web Page

Values for the ALIGN Attribute

Using HEIGHT and WIDTH to Give

Using the ALT Attribute

Framing an Image with a Border

Giving an Image Space

Using an Image as an Anchor

Creating a Link to E-Mail

Creating an Ordered List

Nested Ordered List Example

Additional <OL> Attributes

Creating an Unordered List

Creating Definition Lists

The standard format of a definition list is

Formatting Content with Tables

The basic HTML tags are

BORDER attribute--the number of pixels

Aligning Table Elements

<TR>--The ALIGN attribute can be specified for

Working with Advanced Tables

The value BORDER is included for

Here are the values for RULES, and their meanings:

Spanning Rows and Columns

Grouping Rows and Columns

TBODY, THEAD, and TFOOT perform

<TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX>

Controlling Table Layout

Controlling Table Layout

The attributes are as follows:

Using Color in Tables

Framing Your Web Site

Simple Frame Grid

Complex Grid of Frames

Modifying a Frame's Look and Feel