Lecture 7

A Further Look at 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>

 

TODAY:

• Unordered Lists

• Nested and Ordered Lists

• Tables

• Forms

• Internal Linking
 


 

Yet To Come:
 
Image Maps
<META> Tags
Frames

 


But First a Review of Some Important Ideas
 
 

The Process:

(1) Use a Text Editor to create a file with content and HTML tags

(2) Save this file as a TEXT only TYPE with a descriptive name and a .html suffix in your folder.

(3) Use a Browser to view the .html file

(4) Make changes in .html file using the text editor.
 
 

Let's Look at a Typical "web site" home:

http://s01.middlebury.edu/Cx103a/Students/GeorgeW
http://s01.middlebury.edu/Cx103a/Students/GeorgeW/index.html
 

http://s01.middlebury.edu/Cx103a/Students/GeorgeW/WebPage.html


 

<HTML>

<!-- WebPage.html  in GeorgeW-->

<HEAD>

<TITLE>Embedded Files</TITLE>

</HEAD>

<BODY BGCOLOR = "papayawhip">

<H1>

<P>

There may be many files named <EM>index.html</EM> in one person's folder.

</P>

<P> Main: <A HREF = "index.html">Top Level </A> </P>

<P> Inside: <A HREF = "Files/index.html">Middle Level</A> </P>

<P> Deeper Inside:<A HREF = "Files/RealStuff/index.html">Deep Level</A> </P>
 
 
 
 

</H1>
 
 

</HTML>
 
 

WebPage
 
 

Unordered Lists

<HTML>

<!--Creating an unordered list in HTML -->

<!--ulist.html -->

<HEAD>

<TITLE>Unordered List</TITLE>

</HEAD>

<BODY BGCOLOR = lightyellow>

<H1>The Best U.S. Colleges</H1>

<UL> <!-- Starts a list -->

<FONT COLOR= blue SIZE = +3>

<LI>Middlebury</LI>

<LI>Amherst</LI>

<LI>Swarthmore</LI>

<LI>Williams</LI>

<LI>Carleton</LI>

</UL> <!--Ends a list -->

</BODY>

</HTML>

ulist.html
 
 

Nested and Ordered Lists

<HTML>

<!--Creating an orderd list in HTML -->

<!--orderedlist.html -->

<HEAD>

<TITLE>ordered List</TITLE>

</HEAD>

<BODY BGCOLOR = lightyellow>

<H1>The Best U.S. Colleges</H1>

<OL TYPE = a> <!-- Starts a list -->

<FONT COLOR= blue SIZE = +3>

<LI>Middlebury</LI>

<LI>Amherst</LI>

<LI>Swarthmore</LI>

<LI>Williams</LI>

<LI>Carleton</LI>

</OL> <!--Ends a list -->

</BODY>

</HTML>

<HTML>

orderedlist.html

<!--Creating a Nested List in HTML -->

<!--nestedlist.html -->

<HEAD> <TITLE>Nested List</TITLE> </HEAD>

<BODY BGCOLOR = lightyellow>

<H1>A Nested List</H1>

<UL> <!-- Starts a list -->

<FONT COLOR= blue SIZE = +3>

<LI>Section X</LI>

<UL>

<LI>Annalise Erkinen</LI>

<LI>Veljko Linta</LI>

</UL>

<LI>Section Y</LI>

<UL>

<LI>Louisa Conrad</LI>

<LI>Megan Michelson</LI>

<LI>Colin Rodgers</LI>

</UL>

<LI>Section Z</LI>

<UL>

<LI>Matt Burke</LI>

<LI>Missy Krempa</LI>

<LI>Bob Wannop</LI>

</UL>

</UL> <!--Ends a list -->

</BODY>

</HTML>

nestedlist.html

TABLES





<HTML>

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

<!-- Basic_Table.html -->

</HEAD>

<BODY>

<CENTER>

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

</CENTER>

<TABLE BORDER = "2" ALIGN = "right" WIDTH = "60%">

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

<THEAD>

<TR><TH>This is the head.</TH><TR>

</THEAD>

<TOBODY>

<TR><TD ALIGN = "center">This is the body.</TD></TR>

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

</TBODY>
 
 

</TABLE>
 
 

</BODY>
 
 

</HTML>
Basic_Table.html

<HTML>

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

<!-- Complex_Table.html -->

</HEAD>

<BODY>

<CENTER>

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

</CENTER>

<TABLE BORDER = "1" ALIGN = "center">

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

<COLGROUP>

<COL ALIGN = "right">

<COL SPAN = "4" ALIGN = "center">

</COLGROUP>

<THEAD>

<TR BGCOLOR = "yellow">

<TH ROWSPAN = "2">

<IMG SRC = "Bush.jpg" ALT ="President Bush" >

</TH>

<TH COLSPAN = "4" VALIGN = "top">

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

<P>Totally Fictitious? <P>

</TH>

<TR BGCOLOR = "khaki" VALIGN = "bottom">

<TH>one</TH>

<TH>two</TH>

<TH>Three</TH>

<TH>Four</TH>

</TR>

</THEAD>
 
 

<TOBODY>

<TR>

<TH>Camels</TH>

<TD>2</TD>

<TD>Africa/Asia</TD>

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

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

</TR>

<TR>

<TH>Llamas</TH>

<TD>1</TD>

<TD>Andes Mountains</TD>

</TR>

</TBODY>
 
 

</TABLE>
 
 

</BODY>
 
 
 
 
 
 

</HTML>
Complex_Table.html

<HTML>

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

<!--Standings.html-->

</HEAD>

<BODY>

<TABLE BORDER = "4" WIDTH="400" >

<COLGROUP> <COL SPAN = "4" ALIGN = "center"> </COLGROUP>

<THEAD BORDER = "1"></THEAD>

<TBODY></TBODY>

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

<TR>

<TH COLSPAN="4">

<H2>Atlantic Conference</H2>

</TH>

</TR>

<TR>

<TH>Team</TH>

<TH>Wins</TH>

<TH>Losses</TH>

<TH>Percentage</TH>

</TR>

<TR>

<TH>Philadelphia</TH>

<TD>42</TD>

<TD>15</TD>

<TD>.737</TD>

</TR>

<TR>

<TH>Miami</TH>

<TD >33</TD>

<TD>.23</TD>

<TD>.582</TD>

</TR>

<TR>

<TH>Knicks</TH>

<TD>32</TD>

<TD>23</TD>

<TD>.582</TD>

</TR>

<TR>

<TH>Orlando</TH>

<TD>28</TD>

<TD>26</TD>

<TD>.519</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Standings.html