[http://creativecommons.org/licenses/by/3.0/]
This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]
This lecture covers linking in general and in header information, and a more general view of HTML layout based on the box model used by browsers. The concept of frames is introduced, which can be used in a combination of framesets and pages, or as inline frames. Finally, image maps are introduced as a way of how images can be turned not only into links, but into a set of various linked areas overlayed over the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML Syntax and Structure</title> <link href="simple.css" rel="stylesheet" type="text/css"> </head> <body> <h1>HTML Syntax and Structure</h1>
iconstylesheetstylesheettext/css)<base href="http://en.wikipedia.org/wiki/">
<a href="HTML" title="Wikipedia: HTML">HTML</a>[http://en.wikipedia.org/wiki/HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Float example</title>
<style type="text/css">
body { font-size : 300% ; }
body, p, img { margin : 1em ; }
img { float : left ; width : 50% ; }
</style>
</head>
<body>
<p>
<img src="../img/float-box.png" alt="This image will illustrate floats"/>
Some sample text that has no other purpose than to show how floating elements are moved to the side of the parent element while honoring margins, borders, and padding. Note how adjacent vertical margins are collapsed between non-floating block-level elements.</p>
</body>
</html>skeleton
<html> <head> <title>Lecture Browser</title> </head> <frameset cols="20%, 80%"> <frame src="lectures-toc.html"/> <frame name="slides" src="../intro"/> </frameset> </html>
<html> <head> <title>Lecture Table of Contents</title> </head> <body> <ul> <li><a href="../intro" target="slides">Introduction</a></li> <li><a href="../browsers" target="slides">Browsers</a></li> <li><a href="../html" target="slides">HTML</a></li> <li><a href="../html-advanced" target="slides">Advanced HTML</a></li> <li><a href="../css" target="slides">CSS</a></li> </ul> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>IFrames Lectures</title>
</head>
<body style="height : 100%">
<table style="width : 100% ; height : 100% ; ">
<tr style="height : 50%">
<td><iframe src="../intro" width="100%" height="300">Intro</iframe></td>
<td><iframe src="../browsers" width="100%" height="300">Setup</iframe></td>
</tr>
<tr style="height : 50%">
<td><iframe src="../html" width="100%" height="300">HTML</iframe></td>
<td><iframe src="../html-advanced" width="100%" height="300">Advanced HTML</iframe></td>
</tr>
</table>
</body>
</html><a href="server-side-program"><img src="grid.png" ismap="ismap"/></a>
[server-side-program]<img src="grid.png" usemap="#gridmap"> <map name="gridmap"> <a title="Square 2/2" href="square22" shape="rect" coords="60,60,96,96"/> <a title="Square 3/6" href="square36" shape="rect" coords="106,244,142,282"/> </map>