Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and...
description
Transcript of Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and...
![Page 1: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/1.jpg)
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
![Page 2: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/2.jpg)
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.
![Page 3: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/3.jpg)
Example Lists
![Page 4: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/4.jpg)
Example Lists, continued
![Page 5: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/5.jpg)
Definition Lists
<DL>: Definition List <DT>: Definition Term <DD>: Definition Description
![Page 6: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/6.jpg)
Example Definition List
![Page 7: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/7.jpg)
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
![Page 8: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/8.jpg)
Table Tags and Attributes
The tag <TABLE>: start and end tags are required
The tag <CAPTION>: start and end tags are required
![Page 9: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/9.jpg)
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
![Page 10: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/10.jpg)
Column Elements
The tag <COLGROUP>: start tag required, end optional
The tag <COL>: start tag required, end forbidden
![Page 11: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/11.jpg)
Cell Elements
The tag <TH>: start tag required, end optional
The tag <TD>: start tag required, end optional
![Page 12: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/12.jpg)
Borders and Rules
frame rules border=pixels align valign charoff
![Page 13: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/13.jpg)
Cell Margins
cellspacing=pixels cellpadding=pixels Example: <TABLE cellspacing =“20” cellpadding=“20%”>
<TR> <TD>Data1 <TD>Data2 <TD>Data3</TABLE>
![Page 14: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/14.jpg)
Tables Example 1
![Page 15: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/15.jpg)
Tables Example 2
![Page 16: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/16.jpg)
Tables Example 3
![Page 17: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/17.jpg)
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
![Page 18: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/18.jpg)
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
![Page 19: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/19.jpg)
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
![Page 20: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/20.jpg)
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
![Page 21: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/21.jpg)
FRAME Tag Attributes
name src (URL) frameborder (1|0) scrolling (yes|no|auto)
![Page 22: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/22.jpg)
FRAME Tag Attributes, continued
marginwidth (pixels) marginheight (pixels) noresize
![Page 23: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/23.jpg)
NOFRAME Tag
Alternate content for browsers that do not support frames
Specified just before the <FRAMESET> tag
Use the Frameset DTD
![Page 24: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/24.jpg)
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
![Page 25: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/25.jpg)
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%">
![Page 26: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/26.jpg)
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">
![Page 27: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/27.jpg)
Example Frames
<FRAME src="MyAd.htm" marginwidth="0" marginheight="0">
</FRAMESET> <FRAME src="p1.htm" name="Detail">
</FRAMESET></HTML>
![Page 28: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/28.jpg)
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>
![Page 29: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/29.jpg)
Example Frames
<P><A HREF="p1.htm" target="Detail">Product 1</A>
<P><A HREF="p2.htm" target="Detail">Product 2</A>
</BODY></HTML>
![Page 30: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/30.jpg)
Example Frames
<H1 ALIGN=center>My Ad</H1> <H1 ALIGN=center>Product One Details</H1>
<H1 ALIGN=center>Product Two Details</H1>
![Page 31: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/31.jpg)
Example Frames
![Page 32: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/32.jpg)
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
![Page 33: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/33.jpg)
Example IFrames
![Page 34: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/34.jpg)
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
![Page 35: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/35.jpg)
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
![Page 36: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/36.jpg)
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
![Page 37: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/37.jpg)
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
![Page 38: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/38.jpg)
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
![Page 39: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/39.jpg)
Applying Style Sheets
Two main uses for CSS: 1. Positioning Elements 2. Modifying HTML Tag Definitions
![Page 40: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/40.jpg)
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>
![Page 41: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/41.jpg)
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>
![Page 42: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/42.jpg)
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>
![Page 43: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/43.jpg)
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>
![Page 44: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/44.jpg)
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>
![Page 45: Objectives: 1. Creating and Working with Lists 2. Creating and Working with Tables 3. Creating and Working with Frames](https://reader036.fdocuments.in/reader036/viewer/2022062501/56816844550346895dde1c80/html5/thumbnails/45.jpg)
Topics Covered: 1. Lists2. Tables3. Frames
4. Style Sheets
Summary