Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores. Aquí veremos una introducción al uso de las imágenes con HTML, que tiene algo más de miga de lo que a priori parece.
¿Qué encontrarás aquí?
¿Eres propietario de las imágenes?
Lo primero que hay que quedar claro es que podemos pensar (y, de hecho, mucha gente lo piensa) que cualquier imagen que está en Internet o que se encuentra en cualquier buscador como Google no tiene derechos de autor. Y esto no es así. De hecho, lo más normal es lo contrario, que las imágenes de Internet tengan derechos de autor. Utilizar una imagen que tiene derechos de autor en tu página web es ilegal.
Y ahora me preguntarás… ¿Y de dónde saco yo imágenes que pueda utilizar en mi página web de forma gratuita? Podría entrar en explicarte los distintos tipos de licencia que existen, pero creo que es sumergirse demasiado en algo que realmente quiero que sea más práctico. Tu pregunta es… ¿Qué imágenes puedo utilizar y cuáles no?
Pues bien, hay un montón de bancos de imágenes gratis en Internet: algunas te piden que cuando utilices una imagen cites al autor, otras ni siquiera te piden eso etc. Algunos de los más conocidos son Unsplash, Pexels etc. Te aconsejo que cuando te descargues una imagen te fijes en las condiciones de uso (si debes citar al autor de la imagen o no, si es de uso libre para uso comercial o no etc.) y te recomiendo que busques siempre las imágenes en inglés (por ejemplo, si vas a buscar imágenes de una playa, búscalo en inglés, es decir, usa como palabra de búsqueda «beach», ya que encontrarás más, al ser webs internacionales.
Y, por supuesto, aunque esto ya tiene que ver con temas de rendimiento y lo veremos más adelante, no se te ocurra utilizar en una página web una imagen recién descargada, ya que suelen tener (al menos las de los bancos de imágenes que te he comentado) un tamaño considerable que ralentizará la carga de tu página web (recuerda que la página web es un archivo que te tienes que descargar desde el servidor al que haces la petición a tu cliente-que es el navegador de tu PC- y que a mayor tamaño de la página web más tardará, y el tamaño de la página web-del archivo que te descargas-puede crecer por muchos factores, entre ellos el tamaño de sus imágenes). Yo te recomiendo que las utilices comprimidas. A mí me gusta mucho en concreto TinyJPG, que te comprime imágenes tanto en formato JPG como PNG, sin sacrificar calidad (o si la sacrifica es de forma imperceptible).
Más adelante veremos los tipos de formato de imagen que existen en desarrollo web (al menos los más utilizados) así como los algoritmos de compresión de imagen, para que al menos los conozcas.
Rutas relativas y absolutas
Veamos. Recapitulemos. Una página web es uno o muchos ficheros HTML (por ahora, más adelante veremos como podemos enriquecer este fichero con CSS) que yo me descargo en mi PC. Y HTML ya sabemos que sólo da estructura: puedo introducir texto, puedo introducir listas etc. No es bonito como tal. Simplemente es la estructura de mi web: qué será un encabezado, qué será texto etc. Genial.
Ahora con código yo le digo a mi fichero HTML: oye, aquí va una imagen, me la tienes que cargar de este sitio. ¿Y cómo le indico de dónde la tiene que cargar, o mejor dicho, importar? Pues indicándole a HTML la ruta de la que tiene que importar la imagen.
La ruta no es otra cosa que el lugar dónde está almacenada la imagen (en este caso), que en nuestros proyectos la tendremos normalmente en una carpeta, que es dónde tendremos todas las imágenes juntas. Pero tranquilidad, eso lo veremos un poco más adelante.
Ahora mismo simplemente quiero enseñarte un concepto básico para esto, que es el concepto de ruta. La ruta es la dirección de dónde un determinado recurso (en este caso, una imagen) se encuentra, para que así mi programa pueda importarla y mostrarla en mi página web (que es lo que yo quiero).
Hay dos formas de escribir una ruta: la absoluta y la relativa. Ambas son válidas. Pero son distintas en cuánto a la forma de escribirla.
En la ruta absoluta indicamos la dirección completa de la ruta. Es decir, pongamos que tengo una imagen en una carpeta que se llama verano2019, que a su vez está en una carpeta que se llama misfotos, que a su vez se encuentra en la unidad C de mi PC, y la imagen se llama playa.jpg. Pues su ruta absoluta sería: C:\misfotos\verano2019\playa.jpg.
En la ruta relativa lo que se indica es la ruta desde la carpeta en la que estamos situados actualmente. Es decir, digamos que yo ahora mismo me encuentro dentro de la carpeta verano2019. La ruta relativa sería: verano2019\playa.jpg.
La ruta relativa tiene la ventaja de que es más corta que la absoluta, y es el tipo de ruta que se suele utilizar (o al menos yo siempre lo utilizo y es el que siempre he visto que se utiliza) a la hora de importar imágenes (u otro tipo de ficheros, como CSS, por ejemplo) en el desarrollo web moderno.
Cómo insertar imágenes en HTML.
Las imágenes se insertan con la etiqueta <img>. Esta etiqueta tiene que tener obligatoriamente un atributo src que indica la ruta de la imagen (absoluta o relativa, normalmente se pone relativa). Si la ruta está mal puesta, al no encontrar la imagen, como si no hubieras puesto nada, ya que la imagen no se mostrará. Eso sí, te ocupará algo del espacio de la pantalla, provocándote efectos raros pero sin mostrarte nada. Algo así:
He coloreado el espacio que ocupa cada línea con CSS, eso ya lo veremos más adelante. En medio tengo puesto una etiqueta <img>, pero como no le he puesto el atributo src, no sabe en qué ruta buscar la imagen, no muestra nada, pero sí que ocupa el espacio. En resumen: algo que no queremos que pase. Vamos a ponerle el atributo src en condiciones y vamos a ver el resultado:
Ahí podemos ver dónde tengo mi imagen (en la misma carpeta que mi fichero index.html) y el código con el que he insertado la imagen en mi web. Indicar que <img> es una de esas etiquetas de autocierre, es decir, no hace falta en este caso poner <img></img>, sino que funciona tanto poniendo <img src="teclado-pc-gaming.jpg"> como poniendo <img src="teclado-pc-gaming.jpg"/>.
Pero esto es un poco feo, porque la imagen es tan grande que no puedo verla en condiciones, ya que es mucho más grande que mi pantalla. Para eso usaremos los atributos height y width. Con height determino la altura de mi imagen y con width su ancho. Me parece importante destacar que sólo vemos estos atributos con fines educativos y hasta que aprendamos CSS, porque en la actualidad nadie hace esto así a día de hoy, todo el mundo determina el tamaño de las imágenes con CSS. Veamos que tal nos queda:
Aquí puedes consultar el código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teclados PC</title>
</head>
<body>
<h1>Mi teclado gaming</h1>
<h2>El teclado que estabas esperando</h2>
<img src="teclado-pc-gaming.jpg" width="20%" height="20%">
</body>
</html>Con los porcentajes en los atributos width y height, siendo el mínimo 0 y el máximo 100, puedes aumentar o decrementar el tamaño de la imagen. Con que sepas eso ahora mismo me es suficiente. Más adelante en CSS veremos con más profundidad las unidades de medida que aplicamos a las imágenes y, en realidad, a cualquier cosa que ocupe un espacio en una interfaz (o pantalla, si te resulta más fácil comprenderlo así) de una página web.
Hay más atributos que debieras de conocer relacionados con imágenes, pero vamos poco a poco, los veremos un poco más adelante.
Imágenes: ¿con HTML o CSS?
Aunque este es un contenido que cuando empecemos con CSS, comprenderás con mayor profundidad, por ahora necesito que te quedes con la siguiente idea: si la imagen es sólo decorativa y no aporta significado (por ejemplo, una imagen que realmente es un patrón que sirve de imagen de fondo de tu página web) más allá de una mera intención estética, la maquetaremos con CSS.
Ahora bien, si la imagen tiene un contenido semántico y realmente aporta significado a nuestra página web (imaginemos que es una web sobre turismo en Extremadura, y hablamos de Mérida y colocamos al lado una foto del Teatro Romano de Mérida). En ese caso sí aporta significado, ilustra o aporta valor al texto que hayamos puesto turístico. En ese caso hemos de insertar la imagen con HTML. ¿Por qué? Porque tendrá relevancia para el SEO. ¿No te acuerdas qué era el SEO ni por qué era importante? Puedes recordarlo aquí.
Ejercicios
Ejercicio 1
Inserta una imagen en una página web, manejando el ancho y la altura para que quede estéticamente bien (como hemos visto en esta clase). Si quieres, de cara a practicar, puedes meterle algunos elementos que hemos visto en clases anteriores (encabezados, texto, listas etc.). Este ejercicio no te lo voy a dar resuelto, porque quiero que repases las clases anteriores y dado que la forma de inserción de imágenes es tremendamente fácil (y tienes un ejemplo que podría servir como solución en esta misma clase) prefiero dejarte dar rienda suelta a tu creatividad. Puedes compartir tu web en Twitter con el hashtag #SoySalvajeHTMLCSS.
Acceso al índice del curso
Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!
Si has podido realizar el ejercicio 1, perfecto. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo) por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.