Para insertar una imagen dentro de una página debemos utilizar el
elemento HTML <img>, la misma no tiene una marca de finalización
(similar a la marca <br>).
Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.
La sintaxis de esta marca es:
Otra propiedad obligatoria es alt, donde disponemos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto (o con un navegador que tenga desactivada la opción de descarga de imágenes). El texto debe describir el contenido de la imagen.
Confeccionemos una página que muestre una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página)
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será:
Si queremos subir dos carpetas luego escribimos:
<img> viene de image
src viene de source
alt viene de alternative
Ejercicio 6:
Desarrolla una página que muestre dos imágenes lalamdas foto2.jpg y foto3.jpg, las mismas se encuentran almacenadas en la misma carpeta donde se almacenará la página. Disponer un título a cada imagen.
Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.
La sintaxis de esta marca es:
<img src="foto1.jpg" alt="Pintura geométrica">Linux es sensible a mayúsculas y minúsculas por lo que recomiendo que siempre utilicen minúsculas para los nombres de archivos.Como la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas).
Otra propiedad obligatoria es alt, donde disponemos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto (o con un navegador que tenga desactivada la opción de descarga de imágenes). El texto debe describir el contenido de la imagen.
Confeccionemos una página que muestre una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página)
<html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geométrica"> </body> </html>
Si la imagen se encuentra en una subcarpeta llamada imágenes, luego la sintaxis para recuperarla será:
<img src="imagenes/foto1.jpg" alt="Pintura geométrica">
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será:
<img src="../foto1.jpg" alt="Pintura geométrica">Es decir, le antecedemos .. y la barra / al nombre de la imagen
Si queremos subir dos carpetas luego escribimos:
<img src="../../foto1.jpg" alt="Pintura geométrica">Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel:
<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.
<img> viene de image
src viene de source
alt viene de alternative
Ejercicio 6:
Desarrolla una página que muestre dos imágenes lalamdas foto2.jpg y foto3.jpg, las mismas se encuentran almacenadas en la misma carpeta donde se almacenará la página. Disponer un título a cada imagen.
No hay comentarios.:
Publicar un comentario