En actividades anteriores, aprendiste lo siguiente:
- Conceptos básicos sobre los elementos y las etiquetas HTML
- Cómo estructurar una página web
- HTML semántico y prácticas recomendadas
En este artículo, continuarás ampliando tus conocimientos de HTML y abarcarás elementos HTML adicionales.
Elementos de contenido de texto
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Estos elementos contribuyen a la creación de contenido de texto y agregan estructura, estilo y significado. Hay varios tipos de contenido de texto que pueden incorporar los siguientes elementos.
El elemento blockquote
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
En este ejemplo, se muestra cómo usar el elemento <blockquote>, que muestra una cita famosa de Mahatma Gandhi. Hay muchísimas citas excelentes que ofrecen un significado y contenido memorables. Piensa en algunas de tus figuras inspiradoras favoritas y sus citas.
Usa el elemento <blockquote> cuando uses comillas y hagas referencia a información de una fuente. El elemento <blockquote> crea una sangría y alineación únicas en la presentación, y usa una etiqueta de apertura y una de cierre. Un elemento <blockquote> resulta especialmente útil cuando se usan comillas más largas que cubren varias líneas de texto.
También puedes utilizar varios elementos dentro de un elemento <blockquote>, como un encabezado, un párrafo o una lista.
El elemento <details>
<details>
<summary>Details</summary>
Additional Information
</details>
A menudo, una página web tendrá una sección de Preguntas frecuentes e información adicional disponible para el usuario. Hay secciones de Preguntas frecuentes comunes sobre la información del producto, el itinerario de viaje o cualquier tipo de situación de preguntas y respuestas.
El elemento <details> es útil porque usa un widget divulgado que contiene información adicional. El elemento incluye una funcionalidad de activación integrada, y el usuario puede abrir y cerrar el botón de activación. Cuando el botón de activación está abierto, se expande el contenido adicional y el usuario puede leerlo. Cuando se cierra el botón de activación, se oculta el contenido de información adicional para el usuario. Para nombrar el widget <details>, usa el elemento <summary>.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Este es el elemento <figure> en acción. Aquí puedes ver que <figure>, que se usa junto con el elemento <figcaption>, se puede usar para mejorar la experiencia visual.
Ves imágenes en toda la Web y otros datos visuales útiles todo el tiempo. Los elementos visuales ayudan a atraer la atención del visitante y a crear una excelente experiencia del usuario. El elemento <figure> es una forma de etiquetar una imagen, una tabla, un gráfico, etc. Se crea contenido independiente en relación con el contenido principal.
El elemento <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
El elemento <time> proporciona significado y significado semántico, lo que permite una mejor funcionalidad con actividades como programar una cita en línea, publicar una fecha y hora para un artículo de blog, archivos, etc. Algunos ejemplos de sitios web que usan el elemento <time> incluyen usar el Calendario de Google, publicar un artículo en una plataforma o leer archivos históricos en línea del sitio web de una biblioteca.
El elemento <time> hace referencia a la hora y puede representar la hora de un reloj de 24 horas o una fecha específica que se puede ajustar para la zona horaria y la ubicación. Este elemento requiere una etiqueta de apertura y una de cierre, <time> y </time>. Puedes agregar el atributo datetime para que las fechas se lean en un formato legible por máquina.
Metadatos de documentos
<title>Sarah's Favorite Food Recipes</title>
Cada vez que escribas la URL de un sitio web, se mostrará el nombre <title> en la barra del navegador o en la pestaña de la página web. Es el título que se le asigna a una página web. Este elemento es importante y lo usa el motor de búsqueda para mostrar una lista de páginas web relacionadas en los resultados de la búsqueda. La longitud del título puede variar de breve y descriptiva a más larga y descriptiva.
Situación: tiene una página web en la que está pensando, pero no puede recordar la URL específica del sitio web. Escribe las palabras clave en un motor de búsqueda. El motor de búsqueda te ayuda a encontrar la página web que buscas y te permite ver que el nombre de <title> aparece en la búsqueda.
Elementos de contenido incorporados
Además del contenido de texto, hay una variedad de elementos de contenido adicionales para usar.
El elemento <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Cuando termines de comprar artículos en línea y haces clic en tu opción de pago, como PayPal o Apple Pay, estas funciones suelen agregarse a una página web con un <iframe>. Ver un mapa en línea para buscar una empresa local es otra experiencia común. Estos tipos de experiencias del usuario en una página web se pueden agregar con un iframe. En el ejemplo anterior, puedes ver la URL de Wikipedia dentro de un iframe, llamado "Wikipedia".
El elemento <iframe> te permite insertar contenido de otra fuente e incorporar un marco dentro de una página web. Crea un marco con forma rectangular y muestra contenido en el navegador. Un marco permite presentar un diseño con forma de ventana dentro de un elemento <iframe>. Es una excelente forma de agregar contenido a tu página web para mejorar la experiencia.
Elementos de formulario
<progress max="100" value="30"> 30% </progress>
Cuando miras un video más largo, una clase o completas una solicitud, tener una barra de progreso visual puede ser útil para hacer un seguimiento de tu progreso. El elemento <progress> es útil para este tipo de situaciones.
Este elemento se representa como una barra visual con un color de fondo. La barra visual puede variar en tamaño y color de fondo. Con la barra de progreso, puedes usar los atributos max y value de manera opcional. El atributo max establece el número de punto flotante, y el atributo value indica cuánto progreso se realizó en una tarea.
Guion
<canvas id="canvas"></canvas>
Para poder dibujar gráficos y animaciones en tiempo real, usa el elemento <canvas>. Coloca el elemento <canvas> en tu página web HTML para crear un lienzo. Este elemento requiere código JavaScript para que la funcionalidad dibuje y cree gráficos.
Elementos de contenido de la tabla
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
El elemento <table>
El elemento <table> crea una tabla. Este es el punto de partida para agregar elementos adicionales con filas y columnas. Las tablas aparecen a menudo en las páginas web y son una forma útil de organizar y mostrar información. Un caso de uso para usar el elemento <table> es presentar información tabular al usuario, como el tipo de información que puedes encontrar en una hoja de cálculo.
El elemento <th>
El elemento <th> es el encabezado de un grupo de celdas.
El elemento <tr>
El elemento <tr> define una fila de celdas en una tabla. Desde aquí, puedes agregar datos específicos de las celdas.
El elemento <td>
El elemento <td> crea la celda y agrega el contenido necesario.
Conclusión
En este artículo, descubriste elementos HTML adicionales y aprendiste sobre la base de tus habilidades de programación. Aprendiste más sobre contenido, texto intercalado, contenido incorporado y elementos de tablas. Ahora sabes cómo crear elementos HTML adicionales. ¡Sigue así!