January 27, 2001HTML Fundamentals - Part II1 HTML Fundamentals - Problem Solving, Meta Tags, &...

January 27, 2001 HTML Fundamentals - Part II 1

HTML Fundamentals- Problem Solving, Meta Tags, & Frames -


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


“Skeleton” Web Page

<HTML>

</HTML>

<BODY>

</BODY>

<HEAD>

</HEAD>

</TITLE><TITLE> Your Web Page Title

Your web page text

Pat, our HTML advisor


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>


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 3 Col 1 Row 3 Col 2 Row 3 Wide Col 3


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 Wide Col3



</TD><TD> Row 2 Wide Col3


</TD><TD> Row 3 Wide Col 3




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


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”>


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


Frame Example


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”>


<FRAMESET ROWS=“50%,50%” >

</FRAMESET>



2 horizontal frames(rows)

</FRAMESET>

<FRAMESET COLS=“ *,*” >

<FRAMESET ROWS=“100,* ” >

</FRAMESET>

<FRAME SRC=“doc2.html” NAME=“frame2”><FRAME SRC=“doc1.html” NAME=“frame1”>



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>


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



January 27, 2001HTML Fundamentals - Part II1 HTML Fundamentals - Problem Solving, Meta Tags, &...

Documents

Transcript of January 27, 2001HTML Fundamentals - Part II1 HTML Fundamentals - Problem Solving, Meta Tags, &...