A Second Look at HTML:
Hypertext Markup Language
Last Time:
Introduction Markup Languages
Editing HTML Common Tags
Headers Text Styling
Linking
TODAY:
• Images
• Formatting Text with <FONT>
• Special Characters, Horizontal Rules and More Line Breaks
• Unordered Lists
•
Nested and Ordered Lists
Wednesday:
| HTML Tables |
Image
Maps
|
| Forms |
<META>
Tags
|
| Internal Linking |
Frames
|
Images
<IMG SRC = Bush.jpg
HEIGHT
=
68 WIDTH = 54 ALT = President George W. Bush>
<HTML>
<HEAD>
<TITLE>How to Insert Images</TITLE>
</HEAD>
<BODY>
<!-- <BODY BACKGROUND
= MeadChapel.jpg> -->
<IMG SRC = Bush.jpg>
<P></P>
<IMG SRC = Bush.jpg HEIGHT = 68 WIDTH = 54>
<IMG SRC = Bush.jpg HEIGHT = 274 WIDTH = 216>
<CENTER>
<A HREF = http://www.whitehouse.gov>
<IMG SRC = Bush.jpg HEIGHT = 68 WIDTH = 54 ALT = President George W. Bush>
</A>
</CENTER>
</BODY>
</HTML>
<HTML>
<!-- Using images as links -->
<!--imagelinks.html -->
<HEAD>
<TITLE>Images as Links</TITLE>
</HEAD>
<BODY BGCOLOR = white>
<H1>Using Images as Links</H1>
<A HREF = http://www.nfl.com>
<IMG SRC= News_Items/nfl.gif WIDTH = 100 HEIGHT = 100><A><BR>
<A HREF=http://www.giants.com/home/giants_mainpage.cfm>
<IMG SRC = News_Items/nygiants.jpg WIDTH = 100 HEIGHT = 100 ALT = New York Giants><A><BR>
<A HREF =http://www.detroitlions.com>
<IMG SRC = News_Items/detroitlions.jpg WIDTH = 100 HEIGHT = 80 ALT = Detroit Lions><A><BR>
</BODY>
</HTML>
images
as links
Formatting Text with <FONT>
<HTML>
<!--Playing with Fonts -->
<!--fonts.html -->
<HEAD>
<TITLE>Playing with Fonts</TITLE>
</HEAD>
<BODY BGCOLOR = lightyellow>
<P><FONT COLOR = red SIZE =+7 FACE = Times>Times
<P><FONT COLOR = green SIZE =+8 FACE = New York>New York
<P><FONT COLOR = blue SIZE =+9 FACE = Symbol>Symbol
<P><FONT COLOR =
purple SIZE =+6 FACE =Geneva><EM>Geneva</EM>
</BODY>
</HTML>
fonts
<HTML>
<!--Playing with Fonts -->
<!--fointswithbreaks.html -->
<HEAD>
<TITLE>Playing with Fonts</TITLE>
</HEAD>
<BODY BGCOLOR = lightyellow>
<P><FONT COLOR = red SIZE =+7 FACE = Times>Times<BR>
<FONT COLOR = green SIZE =+8 FACE = New York>New York<BR>
<FONT COLOR = blue SIZE =+9 FACE = Symbol>Symbol<BR>
<FONT COLOR = purple
SIZE =+6 FACE =Geneva><EM>Geneva</EM>
</BODY>
</HTML>
fonts
with lin http://www.middlebury.edu/~molinick/fontswithbreaks.html
e breaks
Special Characters,
Horizontal Rules and More Line Breaks
Unordered Lists
<HTML>
<!--Creating an unorderd 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>
unordered
list
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>
Ordered
list
<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>
Nested
List