Session 3 Examples
HTML and Color | Using Fonts | Foreground and Background Colors | Images | Image Alignment | Background Images | Image Maps
To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here
Note that each <html> block has to be saved as a separate htm file.
HTML and Color
<html>
<head>
<title>HTML and Color</title>
</head>
<body>
<p><font color="red">This text is RED</font></p>
<!-- Using a named color. HTML provides 147 named colors -->
<p><font color="#0000FF">This is blue, but defined using an RGB triplet</font></p>
<!-- In an RGB triplet, the colors are defined in an RRGGBB hex format - allowing us 16777216 (256 x 256 x 256) diff't combinations -->
</body>
</html>
<html>
<head>
<title>HTML and Color with inline style</title>
</head>
<body>
<p style="color: red">This text is RED</p>
<p style="color: #0000FF">This is blue, but defined using an RGB triplet</p>
</body>
</html>
Using Fonts
<html>
<head>
<title>Fonts</title>
</head>
<body>
<p><font face="Arial, Helvetica, sans-serif">This paragraph uses the Arial font</font></p>
<p><font face="Courier New, Courier, monospace">This paragraph uses the Courier New font</font></p>
<p><font size="7">This text is as big as it can be</font></p>
<p><font size="1">While this text is itty bitty</font></p>
<p><font size="+2">This is two sizes bigger than the default font,</font>
<font size="-1">while this is one size smaller.</font></p>
<p><font face="sans-serif" color="#660099" size="4">This font tag defines the face, color, and size</font></p>
</body>
</html>
<html>
<head>
<title>Controlling fonts with inline styles</title>
</head>
<body>
<p style="font-family:Arial, Helvetica, sans-serif">This paragraph uses the Arial font</p>
<p style="font-family: Courier New, Courier, monospace">This paragraph uses the Courier New font</p>
<p style="font-size: 72pt">This text is big</p>
<p style="font-size: 8pt">While this text is itty bitty</p>
<p style="font-size: larger">This is bigger than the default font, <span style="font-size: smaller">while this is smaller.</span></p>
<p style="font-family: sans-serif; color: #660099; font-size: 16px;">This font tag defines the face, color, and size</p>
</body>
</html>
Foreground and Background Colors
<html>
<head>
<title>Foreground and Background Colors</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p>This text is white on a black background</p>
</body>
</html>
<html>
<head>
<title>Foreground and Background Colors</title>
<style>
body{
color: #FFFFFF;
background-color: #000000;
}
</style>
</head>
<body>
<p>This text is white on a black background</p>
</body>
</html>
Images
Supporting Files
(Right-click and save to your desktop)
<html>
<head>
<title>Images</title>
</head>
<body bgcolor="green">
<p><img src="animation.gif" width="131" height="162"></p>
<!-- Here's an animated GIF -->
<p><img src="transparent.gif" width="157" height="122"></p>
<!-- This has a transparent background -->
<p> <img src="transparentJPG.jpg" width="212" height="140"></p>
<!-- Jpegs cannot be transparent -->
<h2>JPEG Compression</h2>
<p><img src="farmhouseLow.jpg" width="400" height="267"></p>
<!-- Maximum compression (2.62kb) -->
<p><img src="farmhouseHigh.jpg" width="400" height="267"></p>
<!-- Minimum compression (107kb) 40x the file size -->
</body>
</html>
Image Alignment
(Right-click and save to your desktop)
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<p><img src="smallTrain.jpg" width="100" height="67" align="left">
<!-- Try other alignments... absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, and top -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p><img src="smallTrain.jpg" width="100" height="67" align="right">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p><img src="smallTrain.jpg" width="100" height="67" align="bottom">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Background Images
(Right-click and save to your desktop)
<html>
<head>
<title>Background Images</title>
</head>
<body background="coyote.gif" bgcolor="yellow">
<!-- substitute plaid.gif to see the effect -->
<p>Try to avoid noisy backgrounds</p>
</body>
</html>
Image Maps
(Right-click and save to your desktop)
<html>
<head>
<title>Image Maps</title>
</head>
<body bgcolor="gold">
<img src="imageMap.gif" width="396" height="479" border="0" usemap="#myMap">
<!-- this image uses the map named "myMap" which is located in this document -->
<map name="myMap">
<area shape="rect" coords="50,50,147,77" href="../index.htm">
<!-- define upper left and lower right corners of the rectangle -->
<area shape="circle" coords="147,156, 60" href="about.htm">
<!-- define the center and radius of the circle -->
<area shape="poly" coords="251,248,280,308,346,317,298,363,309,429, 251,398,192,429,203,363,155,317,221,308,251,248" href="somePage.htm" title="Star Hot Spot" alt="Star Hot Spot">
<!-- define the coordinates of each "bend" in the polygon -->
</map>
</body>