Las imágenes a día de hoy más que necesarias, son imprescindibles en cualquier página web. Pueden servirnos para añadir un logo, para mostrar fotografías de nuestra última visita a Cuenca o para añadir un esquema que clarifique lo que queremos decir. También podremos utilizar CSS para añadir imágenes utilizando la propiedad background-image, pero todavía no hemos llegado a eso. Todo se andará.
Otro factor a tener en cuenta son los derechos de autor. Tenemos que tener mucho cuidado con las imágenes que utilizamos porque podemos incurrir en delitos sobre los derechos de autor al utilizarlas. De todas formas no te alertes, hay sitios web que ofrecen imágenes de forma gratuita. Te recomiendo que le eches un ojo a los siguientes:
Bueno comencemos con lo que viene siendo HTML. Para añadir una imagen a nuestra página tendremos que utilizar la etiqueta <img />. Al igual que sucedía con <br />, la etiqueta para las imágenes es vacía, es decir, no tendremos etiqueta de cierre. Para definir todos los parámetros necesarios utilizaremos una serie de atributos que vamos a analizar a continuación. Para los ejemplos, vamos a suponer que tenemos una imagen en nuestro servidor cuyo nombre es "imagen.jpg" situada dentro de una carpeta llamada images.
- src: este atributo se utiliza para indicarle al navegador dónde está ubicada la imagen que queremos mostrar. Si la imagen está ubicada en otro servidor tendremos que especificar como valor del atributo la ruta absoluta hasta la imagen. Si por el contrario la imagen está almacenada en nuestro servidor podremos utilizar una ruta relativa.
-
<img src="images/imagen.jpg" />
- alt: nos permite introducir un texto que aparecerá si por cualquier incidente no se puede cargar la imagen.
-
<img src="images/imagen.jpg" alt="No se ha podido cargar la imagen"/>
- title: este atributo permite especificar un pequeño texto descriptivo para la imagen que aparecerá si alguien pasa el puntero del ratón por encima de la imagen.
-
<img src="images/imagen.jpg" alt="No se ha podido cargar la imagen" title="Estás viendo imagen.jpg"/>
- height: permite especificar la altura de la imagen en píxeles. Generalmente se suele especificar este atributo utilizando CSS. Si queremos que nuestra imagen tenga 100 píxeles de altura:
-
<img src="images/imagen.jpg" alt="No se ha podido cargar la imagen" title="Estás viendo imagen.jpg" height="100"/>
- width: este atributo especifica la anchura de la imagen en píxeles. Al igual que sucedía antes es recomendable utilizar CSS. En cualquier caso si queremos que tenga 100 píxeles de ancho y 100 de alto:
-
<img src="images/imagen.jpg" alt="No se ha podido cargar la imagen" title="Estás viendo imagen.jpg" height="100" width="100"/>
align: Con la aparición de HTML5, la última versión de HTML, este atributo ha quedado en desuso. Mejor dicho, ha desaparecido. Como HTML5 todavía no está instaurado al 100% lo trataremos igual que al resto. Tiene como posibles valores predefinidos "left", "right" y "center". En función del valor que le demos la imagen se situará a la izquierda, a la derecha o en el centro respectivamente.
Además del atributo align, HTML5 ha supuesta la aparición de un nuevo elemento relacionado con las imágenes. Si estamos acostumbrados a utilizar un procesador de textos, veremos como algo normal e incluso deseable añadir un pie de foto con un breve texto explicativo a nuestras imágenes. Incluso el típico "Figura 1 - Blablablablaba...". Hasta la "aparición" de HTML5 esto era imposible. Ahora gracias a las etiquetas <figure> y <figcaption> lo podremos hacer. Ninguna de ellas es una etiqueta vacía por lo que tendremos que utilizar las etiquetas de cierre asociadas. Del elemento <figure> colgarán tantas imágenes como queramos siempre que todas ellas compartan un mismo pie de página. Mediante el elemento <figcaption> definiremos el pie de página. Veamos un ejemplo:
Para finalizar, comentaremos una serie de ideas/conceptos importantes respecto a las imágenes:
Para finalizar, comentaremos una serie de ideas/conceptos importantes respecto a las imágenes:
- Podemos situar la etiqueta <img /> con todos sus atributos dentro donde nos plazca. Tenemos que ser conscientes de que ubicarla en un sitio u otro hará que la imagen aparezca por ejemplo antes de un párrafo, al principio de un párrafo como si fuera la primera letra del mismo o en medio de un párrafo. Tenemos que elegir la mejor opción en función de lo que necesitemos en cada momento.
- Es recomendable guardar nuestras imágenes con el mismo tamaño con el que queremos que aparezcan en nuestra página. Así nos aseguramos de que no aparezcan distorsionadas en ningún navegador.
- Como ya hemos dicho los navegadores soportan imágenes en formatos jpeg (jpg), png y gif. Es preferible guardar las imágenes que tengan muchos colores en el primer formato de los tres. Si por el contrario la imagen que queremos mostrar tiene zonas bastante grandes con el mismo color podemos utilizar cualquiera de los dos otros formatos.
- Cuidadito con los gifs animados. Son como los chupitos. Si no te los quieres beber no pasa nada, es más que aceptable/recomendable. Si te gustan, uno o dos a lo sumo que sino se sobrecarga la cosa...
| OBJETIVOS | Vamos a ver las etiquetas necesarias para crear listas y enlaces en nuestras páginas web. |
| DIFICULTAD | Fácil |
| REQUISITOS | Tener en cuenta lo que hemos visto con anterioridad. |
| CONSEJOS | i) Hay que tener cuidado con las imágenes que utilizamos en nuestra página web. Hay sitios web que nos ofrecen imágenes gratuitas que podemos utilizar. Por regla general, si dudas si una imagen es gratuita o no, no la utilices. |
| ii) Las imágenes que añadamos tienen que ser relevantes para lo que estemos hablando. No podemos estar hablando sobre programación y meter la imagen de un conejo, no tiene ningún sentido. También es muy recomendable que los colores de la imagen que añadamos no desentonen con el estilo de nuestra página. | |
| iii) Es más que recomendable meter todas las imágenes de nuestra página en una carpeta y llamarla images o imágenes como queramos. Así conseguiremos tenerlo todo más o menos organizado. Si nuestro sitio web es realmente grande sería recomendable dividir la carpeta para las imágenes en otras carpetas. | |
| PRÓXIMAMENTE | Seguiremos viendo elementos básicos de HTML y etiquetas importantes. Más adelante comprobaremos cómo añadir fragmentos de HTML a nuestras entradas e introduciremos alguna de las herramientas más utilizadas para crear páginas web. Cuando hablemos de CSS veremos cómo cambiar la fuente y el color del texto junto a varias opciones a mayores similares. |
No hay comentarios:
Publicar un comentario