HTML and CSS Reference
In-Depth Information
Step 1:
The HTML File—Structure and Content
EXAMPLE
15.25
<html>
<head><title>Vietnam Slide Show</title>
1
<link rel="stylesheet" type="text/css" href="vietnam_trip.css" />
2
<script type="text/javascript" src="vietnam_trip.js"></script>
</head>
<body>
<div class="title">Vietnam Trip Gallery</div>
3
<img class="mainpic"
id="vietnam_pic"
src='file:///C:/wamp/www/images/DSCN1232.jpg'
alt="vietnam travelog"
width='492' height='370'/>
4
<div class="caption" id="description">
Tour boats in the Mekong Delta<br />
</div>
5
<div class="divbuttons">
<form>
<input type=button id="startButton"
value="Start Slideshow"/>
<input type=button id="stopButton"
value="Stop Slideshow"/>
</form>
</div>
</body>
</html>
EXPLANATION
1
The external CSS style sheet is linked to the HTML document.
2
The external JavaScript program is included in this document.
3
This is the image that is initially displayed on the page.
4
The
<div>
uses a class defined in the external CSS file to display a caption under
the image.
5
Two buttons are defined to start and stop the slideshow. Their positions on the
page are defined by the
divbuttons
class in the external style sheet. Figure 15.49
shows the result.
