January 27, 2001 HTML Fundamentals - Part II 1
HTML Fundamentals- Problem Solving, Meta Tags, & Frames -
January 27, 2001 HTML Fundamentals - Part II 2
The Problem
• Create a 3X3 Table
• Insert the rose image
• Create spanned cell
• Insert links
• Insert text
• Insert tic-tac-toe table
• Break Problem Into Pieces
• Insert the teddy image
To Solve:
• What’s left?
• Create “skeleton” page
January 27, 2001 HTML Fundamentals - Part II 3
“Skeleton” Web Page
<HTML>
</HTML>
<BODY>
</BODY>
<HEAD>
</HEAD>
</TITLE><TITLE> Your Web Page Title
Your web page text
Pat, our HTML advisor
January 27, 2001 HTML Fundamentals - Part II 4
Images, Links, and Text
Links<A HREF=“http://www.bdpaolympia.org/”>BDPA Olympia</A>
<A HREF=“http://www.bdpaolympia.org/” TARGET=“_blank”> BDPA Olympia</A>
<A HREF=“#bdpa”>BDPA Olympia</A>
Images: <IMG SRC=“http://www.bdpaolympia.org/images(2)/bdpatop.gif”>
Text <H1>This is my main heading</H1> <P> This is line 1 of my paragraph <BR> This is line 2. A line will appear at the end of my paragraph <HR> </P>
January 27, 2001 HTML Fundamentals - Part II 5
A 3x3 Table
<TABLE>
</TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TD><TD></TD><TD>
<TD> </TD>Row 1 Col 2Row 1 Col 1
Row 1 Wide Col3
</TD><TD></TD><TD>
<TD> </TD>Row 2 Col 1Row 2 Col 2Row 2 Wide Col3
<TD> </TD>Row 3 Col 1
</TD><TD></TD><TD>
Row 3 Wide Col 3Row 3 Col 2
Row 1 Col 1 Row 1 Col 2 Row 1 Wide Col3
Row 2 Col 1 Row 2 Col 2 Row 2 Wide Col3
Row 3 Col 1 Row 3 Col 2 Row 3 Wide Col 3
January 27, 2001 HTML Fundamentals - Part II 6
A 3x3 Table Containing a 3X3 Table<TABLE>
</TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TD><TD> Row 1 Col 2
<TD> </TD>Row 1 Col 1
</TD><TD> Row 1 Wide Col3
<TD> </TD>Row 2 Col 1
</TD><TD> Row 2 Col 2
</TD><TD> Row 2 Wide Col3
<TD> </TD>Row 3 Col 1
</TD><TD> Row 3 Wide Col 3
</TD><TD> Row 3 Col 2
Row 1 Col 1 Row 1 Col 2 Row 1 Wide Col3
Row 2 Col 1 Row 2 Col 2 Row 2 Wide Col3
Row 3 Col 1 Row 3 Col 2 Row 3 Wide Col 3
<TABLE BGCOLOR=WHITE>
</TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TD><TD> O
<TD> </TD>X
</TD><TD> X
</TD><TD> X
</TD><TD> O
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
O
XXO
X
January 27, 2001 HTML Fundamentals - Part II 7
The META Tag
• Used in the HEAD section
• Used by search engines (like Yahoo!)
• Syntax: <META NAME={PROPERTYNAME}
CONTENT=“Property value”>
• Examples:– <META NAME=DESCRIPTION
CONTENT=“Materials and links for teaching HTML fundamentals.” >
– <META NAME=KEYWORDS
CONTENT=“web, class, instruction, html fundamentals”>
– <META NAME=OWNER
CONTENT=“John Neorr”>
January 27, 2001 HTML Fundamentals - Part II 8
First - A Word About Objects
• An object is a named thing
• Has properties (attributes) that describe the object– Property is like a variable which is assigned a value– Height = 6 feet, Weight = 200 pounds
• Has methods – Behavior or operation - what the object do– Functions performed by the object
• Objects we will be using include:– Window -- viewing “port”– Frame -- partitions a window– Document -- an HTML file
January 27, 2001 HTML Fundamentals - Part II 9
Frame Example
January 27, 2001 HTML Fundamentals - Part II 10
I’ve Been Framed!
<BODY>
</BODY>
No frames
How many rows?How many columns?How many frames?
2 vertical frames(columns)
<FRAMESET COLS=“ *,*” >
</FRAMESET>
<FRAME SRC=“doc1.html” NAME=“frame1”>
<FRAME SRC=“doc2.html” NAME=“frame2”>
<FRAMESET ROWS=“50%,50%” >
</FRAMESET>
<FRAME SRC=“doc1.html” NAME=“frame1”>
<FRAME SRC=“doc2.html” NAME=“frame2”>
2 horizontal frames(rows)
</FRAMESET>
<FRAMESET COLS=“ *,*” >
<FRAMESET ROWS=“100,* ” >
</FRAMESET>
<FRAME SRC=“doc2.html” NAME=“frame2”><FRAME SRC=“doc1.html” NAME=“frame1”>
<FRAME SRC=“doc0.html” NAME=“frame0”>
January 27, 2001 HTML Fundamentals - Part II 11
So How Do We Address a Frame?
• By default, document goes in same frame as link
• Can address frame using TARGET<A HREF=“mydoc.html” TARGET=“frame1”>My Doc</A>
• Can “bust” a frame using TARGET=“_top”<A HREF=“mydoc.html” TARGET=“_top” >My Doc</A>
• Can place a document in parent with TARGET=“_parent”<A HREF=“mydoc.html” TARGET=“_parent” >My Doc</A>
January 27, 2001 HTML Fundamentals - Part II 12
Lab/Homework• Create document which create 2 frames
• In one frame (frame 1) put a menu
• In the other frame:
– Put a form or your previous web page … or
– Put your web page from your previous exercise
• Extra credit: provide way to “bust” out of frames mode
mymenu.html
myframe.html mylab1.html
myform.html
Defines this frame
Appears in this frame
Appears in this frame
Appears in this frame
Top Related