Images in HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Section 2.5

Basic Facts

Three main formats of images that are good for the Web:

The <img /> Tag

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>image test</title></head>
<body>
<h2>UCLA Royce Hall</h2>
<img alt="UCLA Royce Hall" src="http://www.laphotos.com/ucla_royce_hall_small.jpg" /> 
</body>
</html>



UCLA Royce Hall

UCLA Royce Hall
You have to download 2 images file (ice.gif and post.gif) and save them in images folder.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Cute Cats</title></head>
<body>
<h2>Cute Cats</h2>
<img alt="[Ice Cat]" src="images/ice.gif" />
<br />
<img alt="[Post Cat" src="images/post.gif" />
</body>
</html>


Cute Cats

[Ice Cat]
[Post Cat


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Cute Cats</title></head>
<body>
<h2>Cute Cats</h2>
<img alt="[Ice Cat]" src="images/ice.gif"/>
<h2>Smaller</h2>
<img alt="[Ice Cat]" src="images/ice.gif" width="125" height="178"/>
<br />
</body>
</html>


Cute Cats

[Ice Cat]

Smaller

[Ice Cat]