index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Gallery</title>
<meta charset="utf-8">
<style>
ul { list-style-type: none; }
li { display: inline-block;
     width: 225px;
     padding-bottom: 10px;
     margin: 10px;
     background-color: #EAEAEA;
     text-align: center;
     font-style: italic;
     font-family: Georgia, serif; }
</style>
</head>
<body>
<h1>Image Gallery</h1>
<ul>
<li>
 <img src="photo1.jpg" alt="Golden Gate Bridge" width="225" height="168">
Golden Gate Bridge
</li>
<li>
 <img src="photo2.jpg" alt="Rocky Shoreline" width="225" height="168">
 Rocky Shoreline
</li>
<li>
 <img src="photo3.jpg" alt="Waves Crashing on the Shore" width="225" height="168">
 Waves Crashing
</li>
<li>
 <img src="photo4.jpg" alt="Ocean Sunset" width="225" height="168">
 Ocean Sunset
</li>
<li>
 <img src="photo5.jpg" alt="Waterfall on the Beach" width="225" height="168">
 Waterfall on the Beach
</li>
<li>
 <img src="photo6.jpg" alt="Fog Moving in from the Pacific" width="225" height="168">
 Fog Moving In
</li>
</ul>
</body>
</html>