Manual Básico HTML – Cap 4 – Imagenes

  • INCLUSIÓN DE IMÁGENES EN HTML

Vamos a aprender a incluir imágenes en nuestro documeto HTML, algo muy sencillo y que guarda cierta similitud con los enlaces en su sintáxis.

La etiqueta que usaremos será <IMG SRC>, la cual no tiene etiqueta de cierre.

Es decir, si queremos incluir en nuestro documento HTML una imagen, por ejemplo, imagen1.gif (de nuevo hago uso de mi excelsa imaginación), la cual se encuentra en el mismo directorio que nuestro documento HTML, la estructura será la siguiente:

<IMG SRC=”imagen1.gif”>

Sencillo, ¿verdad?, pues como ya aprendimos en el tema de los enlaces, si queremos cargar una imagen que esté en otro directorio sólo tendremos que usar la misma estructura que con dichos enlaces, por ejemplo:

  • Queremos cargar una imagen de nombre imagen2.gif que se encuentra en el directorio imagenes dentro del directorio principal:

<IMG SRC=”imagenes/imagen2.gif”>

  • Queremos cargar una imagen de nombre imagen-externa.gif que se encuentra en un sitio web externo al nuestro, en la URL http://ricalco.com

<IMG SRC=”http://ricalco.com/imagen-externa.gif>

Ya lo vamos teniendo más claro…

Bien, uno de los comandos más importantes, al menos a mi parecer, al incluir una imagen es el comando ALT, usándolo, cuando nuestra imagen no se vea por cualquier circunstancia, en su lugar saldrá el texto que incluyamos en ese ALT. Un ejemplo:

<IMG SRC=”imagen1.gif” ALT=”imagen de muestra 1″>

Con esta estructura, cuando por alguna circunstancia el archivo imagen1.gif no esté disponible, se mostraría en su lugar el texto imagen de muestra 1.

  • POSICIÓN DE LA IMAGEN EN EL DOCUMENTO HTML

En principio, sólo vamos a tocar las tres posiciones básicas donde colocar una imagen con respecto al texto en un documento HTML, para ello, usaremos el comando ALIGN.

El comando ALIGN lo acompañaremos de TOP, MIDDLE o BOTTOM, dependiendo si queremos que el texto del documento HTML quede por encima, en medio o por debajo de nuestra imagen. Un ejemplo:

<IMG SRC=”imagen1.gif” ALT=”imagen de muestra 1″ ALIGN=TOP> El texto estará alineado encima de la imagen.

  • ENLACES E IMAGENES

Para terminar el capítulo de hoy, vamos a unirlo con el capítulo anterior, el de los enlaces y vamos a aprender a enlazar imágenes con otros documentos HTML o viceversa.

Imaginemos que queremos que, al clicar sobre la imagen (imagen1.gif) que se encuentra incluida en nuestro documento HTML, ésta nos lleve a la página oficial de google, por poner un ejemplo, la estructura sería la siguiente:

<A HREF=”http://www.google.es”><IMG SRC=”imagen1.gif”></A>

Como podéis comprobar, hemos usado la etiqueta <A HREF> con su correspondiente cierre </A> y entre ambas, en lugar de escribir un texto, hemos incluido nuestra imagen. Pues bien, no hay más misterio en enlazar imágenes y documentos HTML, seguiremos siempre el mismo esquema.

También nos puede interesar que al clicar en un texto de nuestro documento HTML, éste nos lleve a una imagen, nada más sencillo:

<A HREF=”imagen1.gif>si clicas en este texto nos enviara a la imagen 1</A>

Como comprobais, tan sólo se trata de un enlace común pero, en vez de enlazar con un documento HTML, lo hacemos con una imagen…

Por último, un detalle que quizá os interese será el eliminar el borde que aparece alrededor de las imágenes cuando la usamos para enlazar, para ello hay que usar el atributo BORDER, es decir:

<A HREF=”http://www.google.es”><IMG SRC=”imagen1.dif” BORDER=0></A>

Ya hemos terminado la lección de hoy, espero que no se os haya hecho pesada.

You may also like...

3 Responses

  1. PAYOLA dice:

    MUY BUEN INSTRUCTIVO, FACIL Y SENCILLO.
    PUDE ACLARAR MIS DUDAS Y COMPRENDI MUY BIEN.
    GRACIAS!

  2. webmaster Aulatutorial dice:

    Si queréis saber más acerca de este tema podéis echar una ojeada a los cursos de Informática en Madrid: http://www.infocurso.com/cursos-informatica-madrid.html

  3. Tristan dice:

    Recuerda algo sobre los estandares la etiqueta img se cierra con /> “” y otra cosa para tener en cuenta debe tener siempre alt=””; para su identificacion.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>