domingo, 20 de enero de 2013

Elementos de bloque

Hay varios elementos de bloques primarios utilizados en HTML5. Vamos a ver algunas etiquetas nuevas y antiguas que complementan el dúo de <head> y <body>.

  • <header>
  • <nav>
  • <article>
  • <aside>
  • <footer>
  • <blockquote>

<header>

La etiqueta <header> es un contenedor para materiales de introducción de un documento o de la sección. <header> puede ser utilizado varias veces en un documento y por lo general contiene al menos un  elemento <h1>-<h6> (con el fin de validar).
<header>
  <h1>Cabecera del documento</h1>
  <p>Una breve descripción de este documento</p>
</header>

Para leer más:

<nav>

La etiqueta <nav> es utilizado para demarcar una sección que contiene los anclajes de navegación (enlaces) a otros contenidos o secciones. Los anclajes se pueden anidar dentro de una lista, como una lista desordenada <ul>.
<nav>
  <h1>Navegación</h1>
  <ul>
    <li><a href="#home">Inicio</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

Para leer más:

<article>

La etiqueta <article> designa una región de un documento que es auto-contenido. <article> puede ser un artículo, entrada de blog, noticia, etc.
<article>
  <img src="imagen.webp" alt="Una imagen." />
  Este es el contenido del artículo.</article>

Para leer más:

<aside>

La etiqueta <aside> contiene información que está tangencialmente relacionado con el contenido primario. Algunos ejemplos pueden incluir anécdotas, barras laterales, enlaces externos, definiciones de palabras clave, etc.
<article>
  <p>Este es un artículo HTML5</p>
  <aside>
    HTML5 se utiliza a menudo en conjunción con CSS y JavaScript.
  </aside>
</article>

Para leer más:

<footer>

El elemento <footer> se encuentra al final de una sección de contenido, como <html>, y contendrá la información incluyendo detalles de licencias, direcciones e información de contacto y enlaces a todo el sitio, documentos como un community aggreement.
<html>
  <article>Contenido del artículo.</article>
  <footer>
  Creative Commons license.
  </footer>
</html>

Para leer más:

<blockquote>

La etiqueta <blockquote> es usado para indicar una cita o una citación. El atributo de citar es utilizado dentro de una etiqueta <blockquote> para hacer referencia al origen de la cita.
<blockquote cite="Yuichi">en el ultimo elemento te aparece 'bockquote', debe ser blockquote</blockquote>

Para leer más:

  1. Armar un reportaje con cada una de las etiquetas anteriores y con cualquier etiquetas descritas en las tareas anteriores.
  2. Enviar un enlace a su artículo de noticias en el área de discusión a continuación.
  3. Asegúrese de revisar los artículos de los demás noticias y comentarios sobre las técnicas y contenido que se desea :-)

Sugerencia: Utilice el siguiente diagrama como un ejemplo de cómo los elementos de bloque se anidan.

Nota: Se requiere CSS para obtener el diseño en el siguiente diagrama.




Mi trabajo

Podéis ver mi trabajo aquí: https://thimble.webmaker.org/p/fkwn

No hay comentarios:

Publicar un comentario