¿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 explicarlo de forma simple, hacer más cosas. Así tenemos más opciones que con las etiquetas a secas.

Listas html ordenadas por defecto

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, como 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 de las listas html

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. Todo esto, 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%2
	C40.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. No obstante, 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 es 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

  1. Crea una lista con seis elementos y ordénala en orden inverso.
  2. Crea un iframe con una ubicación cualquiera utilizando OpenStreetMap. Este nuevo iframe será de 600 (px) de ancho por 400 (px) de alto.
  3. 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.