Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Using ActiveX Data Objects
Document related concepts
no text concepts found
Transcript
Advanced HTML
Objectives:
1. Creating and Working with Lists
2. Creating and Working with Tables
3. Creating and Working with Frames
4. Creating and Working with Style Sheets
Lists
l
<UL>: Unordered List
<LI>: List Item
l
<OL>: Ordered List
<LI>: List Item
l
List item style (type of bullet or number) can
be modified with style sheets.
Example Lists
Example Lists, continued
Definition Lists
l
<DL>: Definition List
l
<DT>: Definition Term
l
<DD>: Definition Description
Example Definition List
Tables
l
Arrange data into columns and rows of
cells
l
Data types include text, images, links,
forms, form fields, and other tables
l
Tables may also have a caption
Table Tags and Attributes
l
l
The tag <TABLE>: start and end tags are
required
The tag <CAPTION>: start and end tags
are required
Row Elements
l
l
l
l
The tag <THEAD>: start tag required, end
optional
The tag <TFOOT>: start tag required, end
optional
The tag <TBODY>: start and end tags
optional
The tag <TR>: start tag required, end
optional
Column Elements
l
l
The tag <COLGROUP>: start tag
required, end optional
The tag <COL>: start tag required, end
forbidden
Cell Elements
l
l
The tag <TH>: start tag required, end
optional
The tag <TD>: start tag required, end
optional
Borders and Rules
l
l
l
l
l
l
frame
rules
border=pixels
align
valign
charoff
Cell Margins
l
cellspacing=pixels
l
cellpadding=pixels
Example:
<TABLE cellspacing =“20”
cellpadding=“20%”>
l
<TR> <TD>Data1 <TD>Data2
<TD>Data3
</TABLE>
Tables Example 1
Tables Example 2
Tables Example 3
Frames
l
Divide the screen into multiple screens
l
Use special HTML file for the frame
definitions (no <BODY>)
l
Display other HTML files or images in
each frame
l
Frames can be user resizable
FRAMESET Tag
l
Divides the left or top of the screen like
attributes
l
rows= Divides the page or current frame
into multiple rows
l
cols= Divides the page or current frame
into multiple columns
FRAMESET Tag, continued
l
If both rows and cols are set, the page or
current frame is divided into a grid
l
Can be nested, subdividing the current
frame
FRAME Tag
l
Can be named (see Specifying the target
frame)
l
Defines the content of the current frame
l
Defined as a URL
l
Can be a web page, picture, or some other
valid URL
FRAME Tag Attributes
l
name
l
src (URL)
l
frameborder (1|0)
l
scrolling (yes|no|auto)
FRAME Tag Attributes, continued
l
marginwidth (pixels)
l
marginheight (pixels)
l
noresize
NOFRAME Tag
l
Alternate content for browsers that do not
support frames
l
Specified just before the <FRAMESET>
tag
l
Use the Frameset DTD
Specifying the Target Frame
l
Frame must be named if its URL is to be
changed
l
Used in elements that create links
(A,LINK), (AREA), and (FORM)
l
Syntax: target=NameOfTargetFrame
Example Frames
l
l
l
l
l
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html40/frame
set.dtd">
<HTML><HEAD>
<TITLE>Frame Example
1</TITLE></HEAD>
<FRAMESET cols="200, 80%">
Example Frames
l
l
l
<FRAMESET rows="125 ,2*,*”>
<FRAME
src="images/apotheke.jpg"
scrolling="no" marginwidth="0"
marginheight="0" frameborder="0"
noresize>
<FRAME src="MyIndex.htm"
frameborder="0">
Example Frames
l
l
l
l
<FRAME src="MyAd.htm"
marginwidth="0"
marginheight="0">
</FRAMESET>
<FRAME src="p1.htm"
name="Detail">
</FRAMESET></HTML>
Example Frames
l
l
l
l
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/s
trict.dtd">
<HTML><HEAD><TITLE>Index</TITL
E></HEAD>
<BODY><H1 ALIGN=center>Product
Index</H1>
Example Frames
l
l
l
<P><A HREF="p1.htm"
target="Detail">Product 1</A>
<P><A HREF="p2.htm"
target="Detail">Product 2</A>
</BODY></HTML>
Example Frames
l
l
l
<H1 ALIGN=center>My Ad</H1>
<H1 ALIGN=center>Product One
Details</H1>
<H1 ALIGN=center>Product Two
Details</H1>
Example Frames
IFRAME Tag: In-Line Frames
l
Provides for URL’s (pages, images, etc.)
within a web page
l
Does not divide the page
l
Borders and scroll bars are optional
l
Margins around the frames are settable
Example IFrames
Style Sheets
l
Allow HTML writers to provide more
exact specs for page layout and general
appearance
l
The general look of one or more web pages
can be changed by changing the current
style sheet
l
Style sheets can be inline, or in separate
files
Style Sheets, continued
l
The combination of style sheets and
scripting enables a page to make
considerable changes to its appearance
without contacting the server
l
Many HTML 2.0 and 3.2 tags and
attributes have been replaced by style
sheets
Style Sheet Media Dependencies
l
Style sheets can be specified by the type of
browser being used
l
Current web pages are only written for
large GUI displays
l
Initial web pages can be quickly rolled out
for one type of media, and others added as
needed
Cascading Style Sheets (CSS)
l
Many external style sheets may be used at
a time
l
Order of style sheets is important: if two
sheets conflict, the last definition is the one
used
l
Allow for consistency in large web sites,
while preserving department uniqueness
Applying Style Sheets
l
All objects on a page can have individual
style tags
l
Objects can also be classified by class, tag
type, and object ID
Applying Style Sheets
l
Two main uses for CSS:
l
1. Positioning Elements
l
2. Modifying HTML Tag Definitions
Layers and Styles
l
Declared inside the <STYLE> tag:
<HEAD><TITLE>Example Style Sheet</TITLE>
<STYLE type=“text/css”>
#companyName { position: absolute; top: 20px; left: 20px }
#logo { position: absolute; top: 9px; left: 304px }
H1 { border-width: 1; border: solid; text-align: center}
I { font-size: 9 pt; font-color: #FF0000; font-family: verdana }
</STYLE></HEAD>
Layers and Styles
l
Used in the Body of the Page
<BODY>
<DIV ID=“companyName”><IMG SRC=…..></DIV>
<DIV ID=“logo”><IMG SRC=…..></DIV>
<H1>This is affected by our style</H1>
Note the style change in this italicized <I>word</I>.
</BODY>
Classes
l
Not associated with tag
<STYLE type=“text/css”>
.regular { color: red; }
.superBig { font-size: 32pt; font-weight: bold; color: green }
</STYLE><BODY>
<P CLASS=“regular”>This text is red.</P>
<P CLASS=“superBig”>These words are large…really large</P>
</BODY>
Classes
l
Can bind a Class to a Tag
<STYLE type=“text/css”>
H1 { color: red; }
H1.big { font-size: 32pt; font-weight: bold; color: green }
</STYLE><BODY>
<H1>This text is red.</H1>
<H1 CLASS=“big”>These words are large…really large</H1>
</BODY>
Applying two classes
l
Use <SPAN> tag
<STYLE type=“text/css”>
.cool { color: blue; }
P.small { font-size: 9pt; font-weight: bold; }
</STYLE><BODY>
<P CLASS=“small”>The .cool style is applied to<SPAN
CLASS=“cool”> these words </SPAN>but not to the others.
</BODY>
Summary
Topics Covered:
1. Lists
2. Tables
3. Frames
4. Style Sheets
Related documents