objectives: 1. creating and working with lists 2. creating and working with tables 3. creating and...
DESCRIPTION
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. : Unordered List : List Item : Ordered List - PowerPoint PPT PresentationTRANSCRIPT
Objectives: 1. Creating and Working with Lists2. Creating and Working with Tables3. Creating and Working with Frames4. Creating and Working with Style Sheets
Advanced HTML
Lists
<UL>: Unordered List
<LI>: List Item
<OL>: Ordered List
<LI>: List Item List item style (type of bullet or number) can
be modified with style sheets.
Example Lists
Example Lists, continued
Definition Lists
<DL>: Definition List <DT>: Definition Term <DD>: Definition Description
Example Definition List
Tables
Arrange data into columns and rows of cells
Data types include text, images, links, forms, form fields, and other tables
Tables may also have a caption
Table Tags and Attributes
The tag <TABLE>: start and end tags are required
The tag <CAPTION>: start and end tags are required
Row Elements
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
The tag <COLGROUP>: start tag required, end optional
The tag <COL>: start tag required, end forbidden
Cell Elements
The tag <TH>: start tag required, end optional
The tag <TD>: start tag required, end optional
Borders and Rules
frame rules border=pixels align valign charoff
Cell Margins
cellspacing=pixels cellpadding=pixels Example: <TABLE cellspacing =“20” cellpadding=“20%”>
<TR> <TD>Data1 <TD>Data2 <TD>Data3</TABLE>
Tables Example 1
Tables Example 2
Tables Example 3
Frames
Divide the screen into multiple screens Use special HTML file for the frame
definitions (no <BODY>) Display other HTML files or images in
each frame Frames can be user resizable
FRAMESET Tag
Divides the left or top of the screen like attributes
rows= Divides the page or current frame into multiple rows
cols= Divides the page or current frame into multiple columns
FRAMESET Tag, continued
If both rows and cols are set, the page or current frame is divided into a grid
Can be nested, subdividing the current frame
FRAME Tag
Can be named (see Specifying the target frame)
Defines the content of the current frame Defined as a URL Can be a web page, picture, or some other
valid URL
FRAME Tag Attributes
name src (URL) frameborder (1|0) scrolling (yes|no|auto)
FRAME Tag Attributes, continued
marginwidth (pixels) marginheight (pixels) noresize
NOFRAME Tag
Alternate content for browsers that do not support frames
Specified just before the <FRAMESET> tag
Use the Frameset DTD
Specifying the Target Frame
Frame must be named if its URL is to be changed
Used in elements that create links (A,LINK), (AREA), and (FORM)
Syntax: target=NameOfTargetFrame
Example Frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html40/frameset.dtd">
<HTML><HEAD> <TITLE>Frame Example 1</TITLE></HEAD>
<FRAMESET cols="200, 80%">
Example Frames
<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
<FRAME src="MyAd.htm" marginwidth="0" marginheight="0">
</FRAMESET> <FRAME src="p1.htm" name="Detail">
</FRAMESET></HTML>
Example Frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">
<HTML><HEAD><TITLE>Index</TITLE></HEAD>
<BODY><H1 ALIGN=center>Product Index</H1>
Example Frames
<P><A HREF="p1.htm" target="Detail">Product 1</A>
<P><A HREF="p2.htm" target="Detail">Product 2</A>
</BODY></HTML>
Example Frames
<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
Provides for URL’s (pages, images, etc.) within a web page
Does not divide the page Borders and scroll bars are optional Margins around the frames are settable
Example IFrames
Style Sheets
Allow HTML writers to provide more exact specs for page layout and general appearance
The general look of one or more web pages can be changed by changing the current style sheet
Style sheets can be inline, or in separate files
Style Sheets, continued
The combination of style sheets and scripting enables a page to make considerable changes to its appearance without contacting the server
Many HTML 2.0 and 3.2 tags and attributes have been replaced by style sheets
Style Sheet Media Dependencies
Style sheets can be specified by the type of browser being used
Current web pages are only written for large GUI displays
Initial web pages can be quickly rolled out for one type of media, and others added as needed
Cascading Style Sheets (CSS)
Many external style sheets may be used at a time
Order of style sheets is important: if two sheets conflict, the last definition is the one used
Allow for consistency in large web sites, while preserving department uniqueness
Applying Style Sheets
All objects on a page can have individual style tags
Objects can also be classified by class, tag type, and object ID
Applying Style Sheets
Two main uses for CSS: 1. Positioning Elements 2. Modifying HTML Tag Definitions
Layers and Styles
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
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
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
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
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>
Topics Covered: 1. Lists2. Tables3. Frames
4. Style Sheets
Summary