<class home>  <graphics>   <back   next>

Graphics For the Web: getting the image onto an html page

Image Tag: text wrapping
•you can wrap text around your image either to the left or right with the align attribute.
•<img src="your image" align="right" />
•to stop wrapping text use the CLEAR attribute added to the BREAK tag. You can set it to either right, left, or all. <br clear="left" />

example>>>text wrapped to the right of an image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pony Pony Pony</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img src="pony.gif" align="right" />
<h3> Here is my pony</h3>Isn't she lovely. She likes to eat grass and carrots and all sorts of things. Sometimes she nibbles on my fingers.
</body>
</html>

example>>>without stopping wrapping text
example>>>stopping wrapping text

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pony Pony Pony</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img src="pony3.gif" align="right" />
<h3> Here is my pony</h3>
<img src="../images/pony2.gif" align="left" />
<br clear="left" />
Isn't she lovely. She likes to eat grass and carrots and all sorts of things. Sometimes she nibbles on my fingers.
</body>
</html>