Una de las preguntas más comunes que me hacen es: ¿Cómo puedo poner una imagen en HTML? Aquí te platicaré sobre ello y algo más.
En el artículo anterior, denominado Curso De HTML Desde Cero: Crea Páginas Web Con Este Curso Práctico De HTML, te expliqué un poco acerca de HTML, qué necesitamos para empezar a trabajar, las mejores extensiones de Visual Studio Code y empezamos a revisar la estructura básica de un documento HTML los Headings y párrafos.
Ahora te quiero contar un poco de 3 componentes HTML bastante útiles a la hora de estar trabajando: Las Listas, los enlaces y las imágenes en HTML
Con lo primero que empezaremos a trabajar son las listas, en principio, debes de saber que existen dos tipos de listas: las ordenadas que también son denominadas numeración en los procesadores de texto y las siguientes son las desordenadas, que también son denominadas viñetas en los procesadores de texto.
¿cómo usar la etiqueta ul en html?
Empezaremos con las listas desordenadas o etiqueta ul en HTML (Unorder List), las cuales nos servirán para poder incluir viñetas dentro de nuestro document HTML. Las etiquetas
- se deben de abrir y cerrar y dentro de ellas deberán contener los elementos de la lista dentro de una etiqueta
- , ejemplo:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>HTML
Normalmente son utilizadas para poder enlistar elementos que no cuenten con algún orden o jerarquía, por ejemplo, los Hobbies que podemos tener o caracteristicas que podamos mencionar.
Cada etiqueta
- será un elemento de la lista, además, es importante mencionar que pueden existir listas dentro de listas, estas se denominan listas anidadas en HTML o nested List HTML por su traducción al inglés.
Para poder crear una lista anidada en HTML, será necesario agregar la etiqueta
- dentro de una etiqueta
- , Aquí te muestro un ejemplo. Imagina que estamos explicando como se divide el Software y el Hardware, podríamos tener una lista como esta
<ul> <li>Software <ul> <li>Aplicación</li> <li>Sistema</li> <li>Programación</li> </ul> </li> <li>Hardware <ul> <li>Entrada</li> <li>Salida</li> <li>Almacenamiento</li> </ul> </li> </ul>HTML
Como puedes observar tenemos una lista superior con dos elementos que a su vez, cada elemento tiene una lista con sus propios elementos.
Por otro lado, si lo que queremos es saber como se usa ol, pues básicamente es la misma sintaxis, lo único que tendríamos que reemplazar es la etiqueta
- por
- curso-html
- img
- imagen2.webp
- pages
- about.html
- img
- tanto al inicio como al cierre de la etiqueta.
¡Inténtalo! Añade esta sintaxis en tu código HTML, recuerda que todo este código debe de ir dentro de la etiqueta BODY y si aún tienes dudas, te pido revises el artículo anterior del curso.
¿Cómo poner enlaces en HTML?
El siguiente elemento que revisaremos serán la etiqueta anchor en HTML, se representa mediante y por si sola no puede trabajar, ya que necesita de un atributo denominado href ya que este atributo permitirá enlazar un documento de nuestro proyecto o una URL externa. veamos un ejemplo
<a href="pagina.html">Ir a la siguiente página</a> <a href="https://www.google.com" target="_BLANK">Ir a google</a>HTML
En la parte superior he agregado dos ejemplos de enlaces o hipervinculos en HTML, el primero se denomina enlace interno, ya que si observas, estoy escribiendo dentro del atributo html el valor de pagina.html (Ahora no existe, pero si existiera, sería otra página de nuestro sitio).
Además, puedes observar que dentro de la etiqueta anchor en HTML, agregué la frase Ir a la siguiente página, ya que esta información es la que será visualizada por el visitante de nuestra página.
En la segunda línea tenemos un enlace externo, se denomina externo porque como puedes ver, no forma parte de nuestro proyecto, sino que es una URL de otro sitio o dominio, también agregué algo interesante que es el atributo target y seguramente te estés preguntando ¿Cómo usar target en HTML?
Target lo utilizaremos cuando querramos que el enlace se ejecute en otra ventana o pestaña de nuestro navegador, es decir, al añadir esta propiedad en tu etiqueta le estás diciendo al navegador que ese enlace quieres que se abra en otra pestaña.
Si combinamos un poco las dos nuevas etiquetas que hemos aprendido, tanto las listas desordenadas como los enlaces o hipervinculos, lograremos una tarea común en el desarrollo web, la cual es generar un menu de navegación o Navbar, te dejo un ejemplo:
<ul> <li><a href="index.html">🏠 Home</a></li> <li><a href="php.html">PHP</a></li> <li><a href="javascript.html">Javascript</a></li> <li><a href="html.html">HTML</a> <ul> <li><a href="curso-html.html">Curso HTML CSS paso a paso</a></li> </ul> </li> <li><a href="herramientas.html">Herramientas</a></li> <li><a href="contacto.html">Contacto</a></li> </ul>HTML
En la parte superior hay una simulación de como está estructurado el menú de mi sitio, observa que cada elemento de la lista tendrá un enlace y dentro del enlace el nombre de la página hacia donde queremos dirigirnos, Algo importante también será que si tenemos Submenús, los podemos agregar como si fueran una lista anidada.
¿Cómo poner una imagen en HTML?
El último componente que analizaremos el día de hoy serán las imágenes dentro de HTML, una imagen en HTML al igual que con la etiqueta , no puede trabajar sola, ya que necesita de su atributo src para poder hacer referencia a la imagen, sin embargo, a diferencia de la etiqueta , una imagen en HTML no tiene etiqueta de cierre, veamos un ejemplo:
<img src="imagen.webp"> <img src="img/imagen2.webp"> <img src="https://loremflickr.com/640/360">HTML
En este código te muestro 3 formas de poder agregar una imagen en HTML y aquí te platicaré cada una de ellas.
En principio, para poder agregar una imagen en HTML basta con que dentro del atributo src escribas el nombre de la imagen y su extensión (puede ser JPG, PNG, GIF, SVG, etc.), pero algo que es de suma importancia que tendremos que tener en consideración la ruta de la imagen.
En el primer ejemplo estamos suponiendo que la imagen se encuentra en el mismo directorio o carpeta que el archivo que la está llamando, para ejemplificar mejor, recordemos que nuestro proyecto se encuentra dentro de la carpeta curso-html y tenemos un archivo que se llama index.html
Esto quiere decir que si quisieramos agregar una imagen a nuestro proyecto, sería necesario que la imagen.webp se encontrara dentro de la carpeta curso-html, a un lado de index.html
Si la imagen se encontrará dentro de otra carpeta, por ejemplo, si creamos una carpeta que se llame img y añadimos una imagen2.webp, entonces debemos agregarla de la misma forma que en la línea 2, añadiendo dentro de que carpeta se encuentra y de nuevo, su nombre y extensión. Recuerda, todo esto está adentro de la carpeta curso-html.
Si quisieramos agregar una imagen en html en donde el archivo se encuentra en directorios distintos, tendremos que añadir los símbolos ../ para cambiar entre directorios, te doy un ejemplo, imagina que tenemos la siguiente estructura de archivos:
Como puedes observar la página about.html está dentro de la carpeta pages y la imagen2.webp se encuentra dentro de la carpeta img, entonces, si quisieramos hacer referencia desde about.html a la imagen, tendríamos que escribir el siguiente código dentro de about.html:
<img src="../img/imagen2.webp">HTML
Lo que le decimos a HTML con este código es: con ../ subimos un nivel, es decir, salimos de la carpeta pages, después nos vamos a la carpeta img y por último le decimos que queremos agregar la imagen2.webp, como podrás imaginar, si quieres añadir una imagen en html que se encuentre dentro de más carpetas, tendremos que ir subiendo de nivel hasta llegar al punto correcto.
En la parte superior teníamos otro ejemplo más, el cual es que podemos añadir una imagen desde un contenido externo, es decir desde una url, existen herramientas como lorem pixel o lorem flickr que nos permiten tener imágenes aleatorias cuando estamos haciendo pruebas con HTML.
Al igual que lo hicimos con las listas y los hipervinculos, también podemos combinar un hipervinculo en HTML con una imagen en HTML, es tan sencillo como agregar la imagen dentro de la etiqueta de hipervinculo. Ejemplo:
<a href="curso-html.html"> <img src="https://loremflickr.com/640/360"> </a>HTML
En este punto, puedes observar que le hemos agregado a la imagen en HTML un hipervinculo, el cual al presionar la imagen llevará a la página curso-html.
En resumen:
En cada artículo vamos avanzando y aprendiendo nuevas etiquetas, aún nos falta recorrido, pero el objetivo es que logres aprender y analizar todas las formas en las que se pueden utilizar estas etiquetas.
Recuerda que existen 2 tipos de listas: Ordenadas
- y Desordenadas
También recuerda que para poder añadir Hipervinculos es necesario agregar la etiqueta con su atributo href
Además, para poder agregar una imagen en HTML utilizamos la etiqueta
con su atributo href
Por último, recuerda que podemos hacer combinaciones entre cada una de las etiquetas para añadir funcionalidades y/o casos de uso.
Sin más, ¡nos vemos la próxima!
- curso-html
- , Aquí te muestro un ejemplo. Imagina que estamos explicando como se divide el Software y el Hardware, podríamos tener una lista como esta
