Insertar imágenes en HTML

Insertar imágenes en HTML

En este capítulo, te voy a mostrar como insertar imágenes con html. Además, hablaré de los elementos de bloque y línea.

Los elementos de bloque y línea en HTML

En HTML tenemos dos grandes tipos de elementos. De bloque y en línea.

Los elementos de bloque ocuparán todo el ancho de la página. Y los de línea, no.

Por ejemplo, los encabezados son elementos de bloque, ocupan todo el ancho de la página.

En cambio, los elementos como b, strong, i, em, etc son de línea y no crean un nuevo bloque, los podemos utilizar en la misma línea tal y como he indicado en otros capítulos con un párrafo, un encabezado, etc.

En cambio, los párrafos y encabezados, ocupan todo el ancho de la página. Aquí tienes un pequeño ejemplo:

<h2><u>Servicio de ventas</u></h2>

<p>Contamos con un <mark>excelente servicio de ventas</mark> con unos precios increíbles.</p>
formatear texto html

El elemento <h2>, genera un nuevo bloque (ocupa todo el ancho de la página). El elemento <p> también. Sin embargo, el elemento <mark> es de línea y no ocupa todo el bloque.

Insertar imágenes en una página HTML

Las imágenes, en html, son elementos de línea. Eso quiere decir, que podemos colocar otros elementos a sus lados en la misma línea.

Vamos a añadir un logo para la página web de prácticas que estamos realizando en el curso. Te dejo la página por aquí por si no has seguido el curso hasta este capítulo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>La tienda de PC Máster</title>
</head>

<body>
    <h1>Informática PC MÁSTER</h1>

    <h2><u>Servicio técnico</u></h2>
    
    <p><ins>Contamos con el mejor servicio técnico para todo tipo de equipos informáticos</ins>. <b>PCs, laptops, smart TV, smartphones...</b></p>

    <h2><u>Servicio de ventas</u></h2>

    <p>Contamos con un <mark>excelente servicio de ventas</mark> con unos precios increíbles.</p>

    <h3>Contacto</h3>

    <p>Puede contactarnos a través de <em>nuestro número de teléfono</em>, email o visitándonos en nuestra tienda física.</p>
</body>

Quiero que la imagen aparezca en la parte de arriba del todo, encima del título <h1>. Tú colócala donde prefieras en tu proyecto.

Para especificar una imagen en html, debes utilizar la etiqueta <img>. Esta no cuenta con etiqueta de cierre.

<img>

Esta etiqueta por si sola, no sirve de nada, ya que le decimos al navegador que hay una imagen, pero no qué imagen. Por lo tanto, por primera vez en el curso, vas a tener que utilizar los atributos html que te describí anteriormente.

Primero de todo, vamos a añadir una carpeta para imágenes en el proyecto. Recuerda no poner acentos.

Insertar imágenes en HTML

Esta carpeta no es obligatoria para guardar las imágenes, pero sí que es necesaria en cuanto a tener un orden, ya que un sitio web completo puede llegar a tener miles de archivos y carpetas.

Ahora, crea una imagen o descarga cualquiera de internet. Usaré esta misma. Te la dejo por si lo quieres hacer igual que yo.

Logo PC MASTER

Una vez tienes la imagen en la carpeta es el momento de indicarle su ruta a la etiqueta <img> con el atributo "src". El atributo "alt" es una pequeña descripción en texto de lo que es la imagen. Se especifica siempre. Es opcional, pero en el estándar de html5 se indica que hay que ponerlo en todas las imágenes. Sirve para que los buscadores puedan mostrar tus imágenes en las búsquedas y para temas de accesibilidad, por ejemplo, para quién no puede ver y utiliza el audio para leer todo lo que hay en la página web, incluidas las imágenes.

Por lo de los buscadores, imagina que busco, fotos de perros. Ahí, me irán apareciendo imágenes con descripciones "alt" que contengan la palabra perro. El asunto es un poco más complicado que esto, pero de forma simplificada, sirva para estos cometidos.

Fíjate en la ruta. Le pongo primero el nombre de la carpeta y después el nombre de archivo con la extensión.

<img src="imagenes/logo.png" alt="Logo PCMASTER">
Insertar imágenes en HTML

Si la imagen no te carga, es que tienes algo mal en la ruta o en el formato de imagen.

Formatos de imagen para web

Los formatos de imagen admitidos por el navegador son .gif, .jpg, .png, .svg y .webp. Puedes ver más información sobre estos en esta página.

Dejemos el capítulo aquí y en el siguiente, empezamos ya a añadir estilos con CSS, para que esta página empiece a verse más decente.

No te pierdas nada este enorme curso de desarrollo web.

Deja una respuesta

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

formatear texto html Entrada anterior Formatear el texto en HTML
curso de Python Entrada siguiente Variables, salida y entrada de datos – 100 días de Python #1