HTML de Guerra. Imágenes perfectas – Clases Prácticas de HTML V

Hasta ahora hemos visto puro texto y esa no es la idea de las páginas web. Necesitamos… ¡Imágenes!

Bueno, bienvenidos a otra entrega de nuestra serie HTML de guerra, la cual si has leído las anteriores tiene el objetivo de que tengas la capacidad de hacer una página web completamente desde el código. Y si prefieres usar un generador de código, como Front Page o Dreamweaver, que al menos a la hora de insertar algo de código “crudo” no parezcas una foca en el Sahara.

Volvamos a nuestro viejo conocido, el archivo index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p>Hagamos un link</p>
  <p>Hacia TecnoHispanos</p>
 </body>
</html>  

Aqui fue donde empezamos la vez pasada, ahora digamos que tenemos en el mismo directorio una imagen que llamaremos “imagen.jpg”. El tag para introducir imágenes es <img> veamos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p><img src="imagen.jpg"></p>
 </body>
</html>  

Como ves, al tag img le metimos un “src” el cual significa source, o fuente de donde el archivo debe buscar la imagen. Ya con eso, tienes imágenes en tu página, pero hay un pequeño inconveniente y es que el documento no sabe de que tamaño es la imagen, de manera que el irá cargando en tu navegador y las cosas se irán moviendo a medida que las imágenes bajan y el navegador se da cuenta del tamaño.

Para evitar eso, le agregamos los tags width (ancho) y heigth (alto):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p><img src="imagen.jpg" width="100" height="50"></p>
 </body>
</html>  

En este caso, la imagen tenía 100pixeles de ancho y 50 de alto.

¿Qué nos falta? Nos falta el letrerito que sale en las imágenes al poner el mouse encima. Hagámoslo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p><img src="imagen.jpg" width="100" height="50" alt="Esta es mi imagen"></p>
 </body>
</html>  

Y listo, ya tienes una imagen en tu documento.


En la sesión pasada, vimos como se hacian los enlaces, o links. En aquella ocasión, enlazamos texto. Pero las imágenes también se pueden enlazar. Digamos que la imagen era un botón publicitario de TecnoHispanos y queremos que al tocar la imagen, nos lleve a este sitio. Lo que haríamos es rodear el tag de <img> con los tags de los enlaces, que son <a></a>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p><a href="http://www.tecnohispanos.com" target="_blank">
  <img src="imagen.jpg" width="100" height="50" alt="Esta es mi imagen"></a></p>
 </body>
</html>  

¡Listo! Recarga esa página a ver como se ve…

Ugh, sale un feo borde alrededor de la imagen. Hay que quitarle eso:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p><a href="http://www.tecnohispanos.com" target="_blank">
  <img src="imagen.jpg" width="100" height="50" alt="Esta es mi imagen" border="0"></a></p>
 </body>
</html>  

Ahora si :o)

Como ves, al tocar la imagen se abrirá una página nueva que te lleva a TecnoHispanos.

Si has seguido estas sesiones de HTML de guerra, ya eres capaz de:

  • Crear un esqueleto de página web, con head y body
  • Crear párrafos
  • Formatear los párrafos con CSS
  • Crear enlaces
  • Formatear los enlaces con CSS
  • Poner adecuadamente la ruta hacia un archivo
  • Poner una imagen
  • Enlazar la imagen

Como ves, ya tienes una página web:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="estilo.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <p>Esta es una página web.</p>
  <p>Contiene párrafos</p>
  <p>Contiene <a href="http://www.tecnohispanos.com/" target="_blank">enlaces</a></p>
  <p>Y contiene imágenes enlazadas:</p>
  <p><a href="http://www.tecnohispanos.com" target="_blank">
  <img src="imagen.jpg" width="100" height="50" alt="Esta es mi imagen" border="0"></a></p>
 </body>
</html>  

¿Ves que no era difícil? Ahora el código fuente empieza a tener sentido al verlo. Claro que ayudan los colores, asi que no dudes en conseguirte un editor de html que los utilice.

En la próxima sesión estaremos conversando acerca de tablas (pero no de multiplicar, no te preocupes).

Deja un comentario

A %d blogueros les gusta esto: