¿Qué son los atributos en html? ¿Qué es un iframe? - HTML5 básico - Capítulo 6


En este capítulo te enseño lo que son los atributos HTML, además, también verás una nueva etiqueta, iframe.

Los atributos html son valores adicionales que podemos darle a las etiquetas para explicado de forma simple, hacer más cosas. Así tenemos más opciones que con las etiquetas a secas.

Aquí tienes una lista ordenada como la que viste en el capítulo 4:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Atributos html</title>
</head>

<body>

    <ol>

        <li>Manzana</li>
        <li>Fresas</li>
        <li>Limón</li>
        <li>Naranja</li>

    </ol>

</body>
</html>

Resultado en el navegador

Lista ordenada html

Como ves en la imagen, la lista por defecto aparece numerada en orden ascendente (1, 2, 3, 4...). Con las etiquetas así tal cual, no puedes controlar este comportamiento y por ejemplo, escribir la lista del número 4 al 1, o letras de la "a" a la "d" o al revés, de la "d" a la "a", etc.

Aquí es donde entran en juego los atributos html, que son opciones extra para personalizar lo que hacen las etiquetas por así decirlo.

El atributo reversed

El atributo reversed aplicado a la etiqueta <ol> es capaz de invertir el orden de la numeración de la lista ordenada. Mira como cambia la lista anterior.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Atributos html</title>
</head>

<body>

    <ol reversed>

        <li>Manzana</li>
        <li>Fresas</li>
        <li>Limón</li>
        <li>Naranja</li>

    </ol>

</body>
</html>

Resultado en el navegador

Los elementos aparecen en el mismo orden, en cambio, la numeración de los elementos ahora va a la inversa, en orden descendente.

tabla ol reversed

Pasemos a ver un ejemplo más complejo con atributos, vamos a probar una etiqueta nueva, iframe.

¿Qué es un iframe?

Los iframe son marcos que cargan una página externa en un trozo de la página, podemos especificarle una dirección web, un tamaño, etc. gracias a los atributos.

Para crear un iframe lo tienes que hacer con su apertura <iframe> y cierre </iframe>.

Los atributos que añadas en cualquier etiqueta html van siempre en la etiqueta de apertura, por lo que los del iframe también. Veamos un ejemplo:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mapa de Manhattan</title>
</head>

<body>

<iframe
    id="manhattan"
    title="Mapa Manhattan"
    width="700"
    height="700"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-74.02716636657716%2C40.75453936473234%2C-73.9387607574463%2C40.81030130389261&">
</iframe>

</body>
</html>

Resultado en el navegador

OpenStreetMap embebido

La URL (dirección web) que enlaza al mapa o a cualquier otra página que quieras que se visualice en el marco iframe, la debes escribir en el atributo src.
Esta dirección, la he sacado de OpenStreetMap, he buscado una ubicación cualquiera y he ido al apartado de compartir. Ahí podrás generar la URL para ponerla en el iframe, o bien, puedes copiar todo el código que te dan para no tener que hacer nada, pero para practicar, estaría bien que lo intentaras solo copiando la URL. cualquier duda que tengas estoy encantado de resolverla.

Aquí es donde tienes que copiar esta URL:

URL para el atributo src de iframe

El tamaño del iframe se puede modificar con los atributos width para el ancho y height para el alto especificando un número.

Atributos width y height

El atributo title ess para ponerle el título que quieras al iframe, esto no aparece visible al usuario.
Por último (aunque un iframe puede llevar más atributos todavía) el id es un identificador único, es decir, el nombre que le des a ese id no se podrá repetir en la misma página (o no debería, puede causarte problemas cuando hagas cosas más avanzadas). Por el momento no te voy a explicar más sobre los id, esto ya lo verás más adelante, aún no lo necesitas.

Por último, te dejo aquí el iframe cargado directamente sobre esta página para que veas que se puede hasta manejar el zoom y moverte por el mapa.


Ejercicios de html

12- Crea una lista con 6 elementos y ordénala en orden inverso.

13- Crea un iframe con una ubicación cualquiera utilizando OpenStreetMap. Este nuevo iframe será de 600 de ancho por 400 de alto.

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.