Bienvenid@s, en esta ocasión vamos a ver como incluir una imagen HTML, lo primero que tenemos que saber es que para incluir este tipo de elementos en HTML existe una etiqueta llamada "img", a través de ella podremos incluir tantas imágenes como sean necesarias.
Así que imaginemos que realizando una búsqueda por internet encontramos una imagen que nos ha gustado y queremos incluirla en nuestra página web, para ello tendremos que obtener la ruta de la imagen, es decir, la dirección física de la misma.
Ahora que tenemos la ruta podemos incluir la imagen en nuestro documento HTML utilizando la etiqueta "img" y utilizando el atributo "src" que es donde incluiremos la ruta de la imagen, el atributo "alt" nos servirá para mostrar una descripción de la imagen en caso de que la imagen no llegue a ser cargada correctamente.
<img src="https://lh3.googleusercontent.com/-zIBFjiW6Zmk/UeLGjc3K-aI/AAAAAAAAEUU/QJy6bphP1-Y/w320-h160-no/jquery-img.jpg" alt="Imagen de Google">
Ahora si váis a vuestra página web y actualizáis veréis que la imagen se ha cargado, pero, ¿y si queremos modificar sus dimensiones?, para ello podremos utilizar los atributos "width" para la anchura y "height" para la altura, prueben este ejemplo:
<img src="https://lh3.googleusercontent.com/-zIBFjiW6Zmk/UeLGjc3K-aI/AAAAAAAAEUU/QJy6bphP1-Y/w320-h160-no/jquery-img.jpg" alt="Imagen de Google" width="300" height="150">
Ahora hemos modificado las dimensiones de la imagen a la medida que deseamos.
Ahora supongamos que tenemos unas imágenes en una carpeta de nuestro PC y estamos haciendo pruebas con un documento HTML y queremos cargar dichas imágenes. Haríamos lo siguiente, copiamos la carpeta y la alojamos en la misma carpeta donde se encuentra el documento HTML, suponiendo que la carpeta se llama "imagenes" y tenemos en su interior una imagen llamada, por ejemplo, google.jpg, para incluirla haríamos lo siguiente:
<img src="imagenes/google.jpg" alt="Imagen de Google" width="300" height="150">
No hay comentarios:
Publicar un comentario