ETIQUETA IMAGEN
La etiqueta imagen se escribe <img></img>.
Sus atributos son ancho y altura (fijo y variable), así como el título de la imagen y el texto alternativo cuando colocamos el mouse sobre ella.
Atributos:
1.- URL de la imagen: src="imagen.jpg"
2.- Ancho: width="valor"
3.- Altura: height="valor"
4.- Título de la imagen: title="título de la imagen"
5.- Texto alternativo: alt="nombre alternativo"
URL de la imagen
Se refiere a la ruta que HTML tomara para llamar la imagen que queremos poner. Se coloca el atributo src="", donde "src" se refiere a la abreviatura de "source".
Ahora, el valor corresponde a una ruta, misma que puede ser absoluta o relativa.
Ruta Absoluta
Se refiere a la ruta "raíz" del archivo que se utiliza, entendiendo como raíz el disco duro o su equivalente en un equipo de cómputo (en PC sería C:// y en Mac sería un valor distinto, así como Linx y otro sistema operativo).
Por ejemplo, si lo ponemos dentro del atriburo "src" tendríamos:
src="C:\Users\User\Documents\Clase 4\Ejercicio Etiqueta Imagen\imagen.jpg
Ruta Relativa
Es la ruta que toma como punto de inicio la carpeta donde se encuentra el archivo donde trabajamos.
Por ejemplo:
Estamos trabajando el archivo "ejercicio_imagen.html" y queremos llamar la imagen que se encuentra en la misma carpeta. Su ruta sería
src="imagen.jpg"
Si quisiéramos llamar a la imagen que se encuentra en una carpeta creada dentro de la carpeta que contiene al archivo que estamos trabajando, quedaría:
src="carpeta_dentro/imagen.jpg"
En caso de querer llamar una imagen que se encuentra en una carpeta detrás de la carpeta donde está el archivo original, encontraríamos lo siguiente:
src="../imagen.jpg"
Ancho
Se declara con el valor width="", ya sea con un valor fijo o variable.
Alto
Se coloca height="", ya sea con un valor fijo o variable.
Valores fijos y variables
Valor fijo
Se establece en pixeles con un número. Por ejemplo:
width="200" ó height="300"
Valor variable
Se declara colocando un valor en porcentajes. Por ejemplo:
width="100%" ó height="100%"
Título
Es el título que mostrará la imagen mientras está cargando. Además será el nombre que encontrarán los buscadores, por ejemplo Google, quien en Google Images nos muestra resultados que encuentra a través de este atributo de título, además del atributo "alt".
Se escribe: title="título de la imagen".
Texto Alternativo
El texto alternativo sirve para que el navegador nos despliegue la descripción de la imagen cuando pongamos el mouse encima de ella. También servirá para que buscadores encuentren esa imagen.
La declaramos: alt="Descripción de la imagen... la longitud puede variar desde muy corta hasta muy larga"
Declaración de la etiqueta con todos los atributos atributos:
<img width="300" height="200" title="Mi imagen" alt="Esto es una imagen">
Video de la etiqueta imagen que ejemplifica muy bien como utilizarla:
HIPERVÍNCULOS
La etiqueta principal que se utiliza es <a></a>.
Sus atributos son:
1.- URL: href="documento.html"
2.- Descripción del vínculo: alt="Descripción del vínculo"
3.- Puede llevar atributos de <font> como color, tipo de fuente, alineación tamaño, etc.
URL
Se declara con href="nombre_de_documento.html".
Un sitio web es la conjunción de todos los documentos HTML de nuestro sitio web.
Por ejemplo:
Tenemos los siguientes archivos:
- "index.html"
- "servicios.html"
- "nosotros.html"
- "links.html"
- "contacto.html"
Queremos vincular el index a los otros 4 documentos HTML, lo cual nos haría poner lo siguiente:
<a href="servicios.html">Servicios</a>
<a href="nosotros.html">Nosotros</a>
<a href="links.html">Links</a>
<a href="contacto.html">Contacto</a>
ALT
Al igual que la etiqueta "imagen", este atributo nos servirá para brindar una descripción del enlace. Así mismo nos servirá para que un buscador encuentre nuestra web, por medio de dicha descripción.
Video que ejemplifica la vinculacióninterna de un sitio web:
TAREA:
Vincular los archivos HTML de la tarea 2.
GALERÍA DE IMÁGENES
Para realizar una galería de imágenes, tenemos que combinar las etiquetas "Imagen" + "Vínculos".
Lo primero que tenemos que hacer es crear un documento HTML por cada imagen. En nuestro caso, tendremos los siguientes archivos:
1.- inicio_de_galeria.html
2.- uno.html
3.- dos.html
4.- tres.html
Crearemos una carpeta de imágenes que se llamara "img", y la colocaremos en la misma carpeta que nuestro archivo principal, que se llamará "inicio_de_galeria.html"
Dentro del primer documento "inicio_de_galeria.html" tendremos lo siguiente:
1.- Vínculos a los otros documentos que contienen las imágenes:
<a href="uno.html">Imagen 1</a>
<a href="uno.html">Imagen 2</a>
<a href="uno.html">Imagen 3</a>
Dentro del cada documento HTML de las imágenes ("uno.html", "dos.html", "tres.html"), declararemos lo que sigue, pero cambiando el nombre de la imagen:
<img src="nombre_de_imagen.jpg" width="100%" height="100%" title="Imagen 1" alt="Imagen 1"></img>
<a href="uno.html">Imagen 1</a>
<a href="uno.html">Imagen 2</a>
<a href="uno.html">Imagen 3</a>
Al final tendremos una serie de documentos con imágenes, vinculados entre sí, lo cual podemos denominar galería de imágenes.
TAREA:
Realizar una galería de imágenes con hipervínculos.
FIN DE LA ENTRADA --------------------------------
