María José Rienda, esquiadora granadina, la podemos ver en la foto bajando la prueba del "Supergigante", por la que consiguió la medalla en los campeonatos del mundo de ski alpino de 2004. Página web de María José Rienda Contreras.

Ejemplo de imagen sin estilo, con el ancho y el alto de la imagen predefinidos: 

<p>
<img src="mariajoserienda1.jpg" alt="María José Rienda" />
</p>

María José Rienda

La imagen anterior con el estilo en la propia etiqueta: 

<p>
<img style="width: 250px; height: 174px; padding: 5px; border: 1px solid rgb(255,0,0); margin: 10px;" 
src="mariajoserienda1.jpg" alt="María José Rienda" />
</p>

María José Rienda

Ejemplo de imágenes con hoja de estilo en la etiqueta: 

<p>
<img style="display: inline; position: relative; float: left; 
width: 140px; height: 81px; padding: 5px; border: 1px solid rgb(255,0,0); margin: 10px;"
src="mariajoserienda1.jpg" alt="María José Rienda" />

<img style="display: inline; position: relative; float: left; 
width: 125px; height: 87px; padding: 5px; border: 1px solid rgb(255,0,0); margin: 10px;" 
src="mariajoserienda2.jpg" alt="María José Rienda" />

<img style="display: inline; position: relative; float: inherit; 
width: 250px; height: 174px; padding: 5px; border: 1px solid rgb(255,0,0); margin: 10px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />

<img style="display: inline; position: relative; float: right; 
width: 125px; height: 87px; padding: 5px; border: 1px solid rgb(255,0,0); margin:10px;"
src="mariajoserienda3.jpg" alt="María José Rienda" />
</p>

María José Rienda María José Rienda María José Rienda María José Rienda

Ejemplo de imágenes con hoja de estilo en cascada CSS: 

<p>
<img class="foto1" src="mariajoserienda1.jpg" alt="María José Rienda" />
<img class="foto2" src="mariajoserienda2.jpg" alt="María José Rienda" />
<img class="foto3" src="mariajoserienda3.jpg" alt="María José Rienda" />
<img class="foto4" src="mariajoserienda3.jpg" alt="María José Rienda" />
</p>

María José Rienda María José Rienda María José Rienda María José Rienda

Ejemplo de imágenes con lista no-ordenada: 

<ul class="horizontal">
<li>
<img style="width: 125px; height: 87px; padding: 2px; border: 0px solid rgb(255,0,0); margin: 2px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />
</li><li>
<img style="width: 125px; height: 87px; padding: 2px; border: 0px solid rgb(255,0,0); margin: 2px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />
</li><li>
<img style="width: 125px; height: 87px; padding: 2px; border: 0px solid rgb(255,0,0); margin: 2px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />
</li>
</ul>

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Imagen float en un fichero XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!−− Inicio Hoja de estilos CSS −−>
<style type="text/css">
body { 
  background: rgb(245,245,245);
  color: rgb(0,0,0); 
  font-family: Verdana, sans-serif;
  font-size: 14px;
  margin: 1%;
}
h1 {
  background: rgb(245,245,245);
  color: rgb(0,0,0); 
  width: 98%;
  font-family: Verdana, sans-serif;
  font-size: 130%; 
  text-align: justify;
  text-decoration: underline;
  margin: 1%;
}
p {
  background: rgb(245,245,245);
  color: rgb(0,0,0);
  width: 96%;
  height: auto; 
  font-family: Verdana, sans-serif;
  font-size: 100%;
  text-align: justify; 
  margin: 1%;
  padding: 12px;
  border: 1px solid rgb(255,0,0);
  clear: left;
}
span {
  background: rgb(245,245,245);
  color: rgb(0,0,0); 
  font-size: 140%; 
  font-style: italic; 
  font-weight: bold;
}
strong {
  background: rgb(245,245,245);
  color: rgb(255,0,0); 
  font-family: Verdana, sans-serif;
  font-size:  100%;
  font-weight: normal;
  text-decoration: none;
  text-align: justify; 
}
pre {
  width: 95%;
  height: auto;
  background: rgb(225,225,225);
  color: rgb(0,0,255); 
  font-family: Verdana, sans-serif;
  font-size: 12px;
  text-align: justify; 
  margin: 1% 2% 1% 2%;
  padding: 2px;
  border: 1px solid rgb(255,0,0);
} 
strong.pre {
  background: rgb(225,225,225);
  color: rgb(255,0,0); 
  font-family: Verdana, sans-serif;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
}
a:link { 
  background: rgb(245,245,245);
  color: rgb(0,0,255); 
  text-decoration: none;
}
a:visited {
  background: rgb(245,245,245);
  color: rgb(0,0,255); 
  text-decoration: none;
}
a:hover {
  background: rgb(245,245,245);
  color: rgb(0,0,255); 
  font-size: 100%; 
  text-decoration: underline;
}
ul.horizontal {
  margin: 2% 1% 2% 1%;
  padding: 1px;
  border: 0px solid rgb(0,0,255);
}
ul.horizontal li {
  list-style: none;
  display: inline;
  margin: 1% 1% 1% 1%;
  padding: 1px;
  border: 0px solid rgb(0,125,0);
}
img.foto1 { 
  display: inline;
  position: relative;
  float: left;
  width: 140px;
  height: 81px;
  padding: 5px;
  border: 0px solid rgb(255,0,0);
  margin: 10px;
}
img.foto2 {
  display: inline;
  position: relative;
  float: left;
  width: 125px;
  height: 87px;
  padding: 5px;
  border: 0px solid rgb(255,0,0);
  margin: 10px;
}
img.foto3 {
  display: inline;
  position: relative;
  float: inherit;
  width: 250px;
  height: 174px;
  padding: 5px;
  border: 0px solid rgb(255,0,0);
  margin: 10px;
}
img.foto4 {
  display: inline;
  position: relative;
  float: right;
  width: 125px;
  height: 87px;
  padding: 5px;
  border: 1px solid rgb(255,0,0);
  margin: 10px;
}
img.icono { 
  float: none;
  margin: 1px;
  padding: 1px;
  border: 0px solid rgb(0,155,0);
  width: 88px;
  height: 31px;
}
</style>
<!−− Fin Hoja de estlos CSS −−>
</head>
<body>

<p>
<span>María José Rienda</span>, 
esquiadora granadina, la podemos ver en la foto 
bajando la prueba del "Supergigante", 
por la que consiguió la medalla en los 
campeonatos del mundo de ski alpino de 2004. 
<a href="http://www.mariajoserienda.com/" title="María José Rienda">
Página web de María José Rienda Contreras</a>.
</p>
<h1>Ejemplo de imagen sin estilo, con los píxeles de ancho y alto predefinidos:</h1>
<p>
<img src="mariajoserienda1.jpg" alt="María José Rienda" />
</p>
<h1>Ejemplo de la misma imagen anterior con estilo ajustado en propia etiqueta:</h1>
<p>
<img style="width: 233px; height: 136px; padding: 5px; border: 0px solid rgb(0,0,0); margin: 10px;" 
src="mariajoserienda1.jpg" alt="María José Rienda" />
</p>
<h1>Ejemplo de imágenes con hoja de estilo en cascada CSS:</h1>
<p>
<img class="foto1" src="mariajoserienda1.jpg" alt="María José Rienda" />
<img class="foto2" src="mariajoserienda2.jpg" alt="María José Rienda" />
<img class="foto3" src="mariajoserienda3.jpg" alt="María José Rienda" />
<img class="foto4" src="mariajoserienda3.jpg" alt="María José Rienda" />
</p>

<h1>Ejemplo de imágenes con lista no-ordenada:</h1>
<ul class="horizontal">
<li>
<img style="width: 125px; height: 87px; padding: 2px; border: 0px solid rgb(255,0,0); margin: 2px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />
</li><li>
<img style="width: 125px; height: 87px; padding: 2px; border: 0px solid rgb(255,0,0); margin: 2px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />
</li><li>
<img style="width: 125px; height: 87px; padding: 2px; border: 0px solid rgb(255,0,0); margin: 2px;" 
src="mariajoserienda3.jpg" alt="María José Rienda" />
</li>
</ul>

</body>
</html>