/es/curso-basico-de-html/listas-en-html/content/
Después de los elementos de texto, los más usados son los elementos de enlaces e imágenes. Cada vez que entras a una nueva página web, haces clic en un enlace para poder navegar en ella y, si te das cuenta, la mayoría de los sitios web que visitas están llenos de imágenes, incluido éste.
Al principio, puede parecer que no tienen ninguna relación y que cada uno funciona de forma independiente, pero, en esta página te mostraremos que tienen una característica en común: a diferencia de los elementos que has visto hasta ahora, los links y las imágenes dependen de los atributos HTML para ser útiles.
¿Quieres saber de qué se tratan los atributos HTML? ¡Sigue leyendo!
Un atributo es una información adicional que puede incluirse junto a un elemento para indicarle a la etiqueta qué hacer o cómo debe verse. En la mayoría de los casos, consiste en un nombre y un valor incluidos en la etiqueta de inicio con el siguiente formato:
name="value"
Por ejemplo, este es un elemento de párrafo con un atributo HTML cuyo nombre es "id" y el valor es "miPárrafo":
Recuerda que la mayoría de las etiquetas HTML se escriben en inglés y no se pueden traducir porque, por defecto, los navegadores solo las interpretan en este idioma.
Cualquier elemento HTML puede tener atributos y hay una gran variedad de ellos con diferentes funciones, pero te los mostraremos más adelante.
El elemento HTML para un enlace se llama elemento ancla. Normalmente, se ve así:
<a>Haz clic aquí</a>
Si añadieras el código anterior a tu archivo "index.html" y lo cargaras en el navegador, solo verías el texto "Haz clic aquí". Sin embargo, sin un atributo HTML, tu elemento ancla no haría nada, solo sería un texto más. Por ejemplo, si quieres vincularlo a nuestro sitio web para que al seleccionarlo te dirija a nuestra página de inicio. El elemento completo se vería así:
<a href="https://edu.gcfglobal.org/">Haz clic aquí</a>
Aquí se añadieron dos piezas:
La parte que realmente se vería en la página no cambiaría: sólo aparecerán las palabras "Haz clic aquí". Sin embargo, si alguien hace clic en ella, el navegador lo llevaría a nuestra página de inicio.
Puedes poner la URL de cualquier sitio web como valor de un atributo href, es decir, cualquier dirección web que veas en la barra de direcciones de tu navegador para hacer un enlace que te lleve hacia él.
Puedes añadir un elemento de anclaje HTML solo o anidado dentro de otro elemento, como los elementos de formato de texto de la lección anterior. Por ejemplo:
<p>Sin duda me encanta <a href="https://edu.gcfglobal.org/es/como-usar-internet/">aprender a usar la web</a>. ¡Pronto navegaré por muchas páginas como una experta!</p>
Pruébalo aquí:
Un elemento de imagen sin atributos se ve así:
<img>
Observa que la etiqueta <img> no tiene su correspondiente etiqueta </img>. Esto se debe a que el elemento imagen no es realmente un contenedor como los elementos que has visto hasta ahora, no tiene textos asociados y no hay nada que poner dentro de él. En su lugar, utiliza un atributo HTML para añadir la URL de una imagen, que está disponible en línea. De esta manera:
<img src="https://media.gcflearnfree.org/global/coding/html-basico/resources/img/perro-basquetbolista.png">
Al igual que el elemento anterior, se añadieron dos piezas: un nombre y un valor. En este caso, el valor es una URL que te lleva a una imagen guardada en algún lugar de internet y, gracias al atributo, el navegador comprende que debe cargar el elemento <img>.
La imagen puede estar en tu propio sitio web o en otro, pero siempre debe existir una dirección que el navegador cargará automáticamente para mostrarla en la página donde se haya colocado.
La URL de una imagen no se diferencia de las URL normal. Por ejemplo, este enlace corresponde a la URL de la imagen que está en el ejemplo anterior, solo fue añadida.
Puedes introducir cualquier imagen que encuentres para probarla. Por ejemplo, usa la imagen que hemos estado usando:
<img src="https://media.gcflearnfree.org/global/coding/html-basico/resources/img/perro-basquetbolista.png">
Ahora, copia el código en la caja de abajo y haz clic en "Ver resultado" para ver lo que pasa:
Abre el archivo "index.html" que se encuentra en la carpeta "Tutoriales Programación GCF", la cual guardaste en tu navegador.
Hasta el momento, tu archivo debe tener una serie de elementos de texto que no vas a cambiar. En su lugar, busca el encabezado <h2> que añadiste en el ejercicio de la página textos HTML:
<h2>Reseña: El perro basquetbolista (2008)</h2>
Debajo del elemento <h2>, antes de cualquier elemento de párrafo, introduce este elemento de imagen:
<img src="https://media.gcflearnfree.org/global/coding/html-basico/resources/img/perro-basquetbolista.png">
La imagen te servirá para dar una introducción más llamativa a tu reseña.
Busca el último elemento de párrafo que incluiste:
<p>Encuentra el listado completo del reparto en la página web de "El perro basquetbolista".</p>
Vamos a hacer que las palabras "El perro basquetbolista" enlacen con la página de inicio de nuestro sitio. Para eso, debes añadir un elemento de anclaje. Necesitas un atributo href con un valor de la dirección de este sitio. Debería quedarte de esta manera:
<p>Encuentra el listado completo del reparto en la página web de <a href="https://edu.gcfglobal.org">El perro basquetbolista</a></p>
Una vez que hayas hecho todo esto, tu documento HTML completo deberá tener toda esta información:
<html>
<body>
<h1>Clásicos del cine - Reseñas de películas</h1>
<h2>Reseña: El perro basquetbolista (2008)</h2>
<img src="https://media.gcflearnfree.org/global/coding/html-basico/resources/img/perro-basquetbolista.png">
<p><i>4 de 5 estrellas<i></p>
<p>De la directora <b>Vicki Fleming</b>, llega la conmovedora historia de un niño llamado Pete (Trent Dugson) y su perro Rover (el actor Brinson Lumblebrunt es el encargado de hacer su voz). Al principio, parece la típica historia en la que un niño y su perro aprenden el verdadero valor de la amistad, pero hay un giro que hace que esta película sea diferente: Rover juega al baloncesto, ¡y lo hace muy bien!</p>
<p>Esta película tiene todo lo que puedes pedir:</p>
<ul>
<li>Un deporte</li>
<li>Un perro</li>
<li>Suspenso para morderse las uñas</li>
</ul>
<p>Aunque no se incluyen los 150 minutos de un partido de campeonato completo,"El perro basquetbolista" logra captar tu atención durante las 4 horas que dura el film. Al final, cualquier amante de los perros puede llorar. Si te gusta el baloncesto o las mascotas, esta es la película para ti.</p>
<p>Encuentra el listado completo del reparto en la página web de <a href="https://edu.gcfglobal.org">El perro basquetbolista</a></p>
</body>
</html>
Guarda los cambios.
Ahora, carga el archivo "Index.html" que está en tu carpeta "Tutoriales Programación GCF", deberá aparecer esto.
¡Felicitaciones!, tu página web ahora tiene una linda imagen y otras funciones básicas como los links.
¡Sigue conectado a nuestro Curso básico de HTML!
/es/curso-basico-de-html/elementos-interactivos-en-html/content/
