Lecture 8

Intermediate Level Features of HTML:

Hypertext Markup Language

So Far...

Introduction Markup Languages

Editing HTML Common Tags

Headers Text Styling (U, EM, STRONG)

Linking Images

Images as Links Text Format with FONT

Background Color Hexadecimal Notation

Horizontal Rules Line Break <BR>

Unordered List <UL> Ordered List <OL>

TODAY:

• Internal Linking

• Tables

• Forms

• Image Maps

Yet To Come:

Frames

<META> Tags

But First Another Look at Navigating Files

<HTML>

<HEAD><TITLE>SubFlders and SuperFolders</TITLE>

</HEAD>

<H1> Links to Embedded Folders </H1>

<P>

Bringing in an image from the basic folder (IMG SRC = "LauraBush.gif)

<P>An image from an Embedded folder (IMG SRC = "Files/gore.jpg"):

<P> Even deeper(IMG SRC = "Files/RealStuff/nader.jpg):

<P>From an external source (IMG SRC = "http://www.middlebury.edu/~molinick/bushgore.jpg"):

<P>From another student's folder(IMG SRC = "http://s01.middlebury.edu/Cx103a/Students/HomerSimpson/homhead.jpg"):

<P>Another way to do this (IMG SRC = "../HomerSimpson/homhead.jpg"):

<P>From another spot(IMG SRC = "../../images/hockey.jpg"):

</FONT>

<BODY>

</BODY>

</HTML>

embedded.html

Internal Links

<HTML>
<HEAD>
<TITLE>Internal Links</TITLE>
</HEAD>

<BODY>
<A NAME = "firstline"> </A>
<CENTER>
<H1>How to Leap from Place to Place</H1>
</CENTER>
<P>
<A HREF = "#rules"> Find mention of rules </A>
</P>
<H1>I. RESIDENTIAL COLLEGE POLICIES</H1>

<P> <H2>A. Principles for Residential Life</H2></P>
<P>The following principles for residential life were adopted by the Community Council, following the recommendation of the Student Government Association, in 1991. They were presented to the Board of Trustees in March 1991.</P>
<P>1. Students at a residential college are part of a community of learners. Residential life supports and complements the academic programs and educational mission of the College.</P>
<P>2. Cultural and social activities support and complement the educational mission of the College. Residential life gives students substantial opportunities and responsibilities to initiate, organize, and direct the cultural and social life of the College.</P>
<P>3. As Middlebury attracts students from diverse backgrounds, it is crucial that the residential system nurture the educational and personal development of all students. While maintaining options for individual needs and preferences, every residential unit is open to all students without regard to race, sex, religion, ethnic origin, sexual orientation, or disability.</P>
<P>4. Residential life encourages tolerance, understanding, mutual respect, and lasting friendships.</P>
<P>5. Residential life gives students substantial control over their own lives. In their residences, students should create structures for self-government that will complement and strengthen campuswide student government.</P>
<P>6. Residential life assures every student a comfortable and private environment.</P>
<P>7. Residential life encourages first-year students to become active and contributing members of the College.</P>
<P>8. The smaller houses, including those descending from the fraternities, offer varied and attractive living options for a limited number of students. These houses are expected to make distinctive contributions to the life of the campus and local community.</P>
<P>9. The same <A NAME = "rules">rules</A> apply to all students and residences.</P>
<P>10. Residential life should facilitate student participation in the larger community beyond the College.</P>
<P>11. Residential life creates opportunities for significant faculty, staff, and town participation in the life of the College. </P>

<A HREF = "#firstline">Return to Top</A>
<BODY>
</HTML>

Internal_Links.html

TABLES

<HTML>

<HEAD> <TITLE> Basic Table </TITLE>

</HEAD>

<BODY>

<H2> An Example of a Simple Table </H2>

</CENTER>

<CAPTION> Here is where the caption goes</CAPTION>

<THEAD>

</THEAD>

<TR><TD ALIGN = "leftr">This is another row of the body.</TD></TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

Basic_Table

<HTML>

<HEAD> <TITLE> Basketball Standings </TITLE>

</HEAD>

<BODY>

<CAPTION><EM>Eastern Teams</EM></CAPTION>

<TR>

<H2>Atlantic Conference</H2>

</TH>

</TR>

<TR>

<TH>Losses</TH>

<TH>Percentage</TH>

</TR>

<TR>

<TH>Philadelphia</TH>

</TR>

<TR>

<TH>Miami</TH>

</TR>

<TR>

<TH>Knicks</TH>

</TR>

<TR>

<TH>Orlando</TH>

</TR>

</TABLE>

</BODY>

</HTML>

Standings.html

<HTML>

<HEAD> <TITLE> Complex Table </TITLE>

</HEAD>

<BODY>

<H2> An Example of a Complex Table </H2>

</CENTER>

<CAPTION> Here is a more complicated table </CAPTION>

</COLGROUP>

<THEAD>

</TH>

<H1>Presidential Facts</H1><BR>

<P>Totally Fictitious? <P>

</TH>

<TH>States Won</TH>

<TH>Electoral Votes</TH>

<TH>Key State</TH>

<TH>Regret</TH>

</TR>

</THEAD>

<TR>

<TH>George W. Bush</TH>

<TD ROWSPAN = "2">Florida</TD>

<TD ROWSPAN ="2">Chads</TD>

</TR>

<TR>

<TH>Albert Gore</TH>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

Complex_Table.html

<HTML>

<HEAD>

<TITLE>Creating and Using Image Maps

</TITLE>

</HEAD>

</MAP>

</CENTER>

<BODY>

</BODY>

</HTML>

imagemap.html

How We Set The Coordinates

<HTML>

<HEAD> <TITLE>Creating and Using Image Maps </TITLE>

</HEAD>

</MAP>

</CENTER>

<P>

<H1>Click on the nose of a person to see a related web site: where he/she works or studies</H1></P>

</CENTER>

</BODY>

</HTML>

family.html

<HTML>

<HEAD><TITLE>Forms</TITLE></HEAD>

<BODY>

<H1> Feedback Form </H1>

<P> Please fill in the following form to help us improve our

website </P>

<INPUT TYPE = hidden NAME = redirect VALUE = "http://midlebury.edu/~molinick"

<P> <STRONG>Comments:</STRONG>

</TEXTAREA> </P>

</FORM>

</BODY>

</HTML>

form.html

Introduction	Markup Languages
Editing HTML	Common Tags
Headers	Text Styling (U, EM, STRONG)
Linking	Images
Images as Links	Text Format with FONT
Background Color	Hexadecimal Notation
Horizontal Rules	Line Break <BR>
Unordered List <UL>	Ordered List <OL>