<header> </header> <nav></nav> <footer></footer>

Texto completo

(1)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

DESCRIPCIÓN DE LA ACTIVIDAD

En esta actividad se analizará la estructura del cuerpo (dentro del <body> del documento), a través del uso de etiquetas semánticas: header, nav, section, article, aside, footer, analizando a detalle la finalidad de cada una de ellas, permitiendo añadir un valor semántico y estructural a un documento web

<header> </header>

<nav></nav> <section></section>

<aside></aside>

<footer></footer>

Uso de la etiqueta <header> en HTML

El elemento <header> no debe ser confundido con el encabezado principal de la página <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a <head> en su alcance.

Recordemos que el elemento <head> tiene el propósito de proveer información acerca de todo el documento al motor de búsqueda, el elemento <header> es utilizado solo para el cuerpo o secciones específicas dentro del cuerpo del documento HTML5.

(2)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Hemos utilizado entre las etiquetas <header>, un elemento <h1> es usado para definir títulos, el número indica la prioridad del título.

El elemento <h1> es el más importante y <h6> el de menor importancia, entonces en el ejercicio <h1> será utilizado para mostrar el título principal y los demás para subtítulos.

Uso de la etiqueta <nav> en HTML

Siguiendo con nuestro ejemplo, la siguiente sección es la barra de navegación. Esta barra es generada en HTML5 con el elemento <nav>.

El elemento <nav> se encuentra dentro de las etiquetas <body>, pero es ubicado después de la etiqueta de cierre de la cabecera <header>, no dentro de la etiquetas <header>. Ya que no es parte de la cabecera sino que es una nueva sección dentro del documento HTML5.

Aunque se suele en algunas ocasiones dentro del <header>. Sin embargo, siempre se debe considerar que estas etiquetas fueron creadas para brindar información a los

navegadores y proveer a dispositivos en el mercado a identificar las partes más relevantes de un documento HTML5.

Para generar en ustedes las buenas practicas recomiendo seguir los estándares y mantener todo tan claro como sea posible en el documento.

(3)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

La principal función de la etiqueta <nav>, es ofrecer ayuda para los navegación entre un documento, ya sean menús principales o páginas externos y enormes.

En este ejemplo entre las etiquetas <nav>, hemos utilizado dos elementos nuevos la etiqueta <ul> y <li>.

Esto comúnmente se conoce como listas no ordenadas, el propósito del elemento <ul> es definir la lista y las etiquetas <li> son usadas para definir un ítem de la lista.

Existen dos tipos de listas, las ordenadas y no ordenadas.

En las listas ordenadas se usan la etiqueta <ol> y <li>. En los próximos ejercicios utilizaremos ejemplos de ellos.

Aún nos falta algo para darle funcionalidad a nuestra barra de navegación, y de ejemplo agregaremos los enlaces con la etiqueta <a>.

(4)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Comprobemos el resultado de dichos cambios aplicado a nuestro documento HTML5. Te darás cuenta que cuando pases el cursor del mouse sobre dicho enlace, tendrás la posibilidad de ingresar a él.

(5)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Realiza los siguientes cambios a tu documento y verifica el resultado obtenido a través de un navegador web.

(6)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Uso de la etiqueta <section> en HTML

Hace referencia a la columna de información principal, ya que contiene la información más relevante del documento HTML5, y puede ser encontrada de varias formas (por ejemplo dividida en varios bloques o grupo de columnas dentro del mismo documento).

El propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente <section>.

Veamos un ejemplo de uso en un documento de HTML5.

Al igual que barra de navegación, la columna de información principal es una sección aparte. Por este motivo, la sección de información principal de después de la etiqueta de cierre </nav>.

(7)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

De momento hemos realizado los cambios correspondientes en las etiquetas <section>, agregando mejorar la organización de la información con base a la etiqueta <article> que nos permite identificar cada una de estas partes.

Uso de la etiqueta <article> en HTML

(8)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Como puedes observar en el ejemplo las etiquetas <article> se encuentran ubicados dentro del elemento <section>.

Las etiquetas <article> en nuestro ejemplo pertenecen a esta <section>, son sus hijos, del mismo modo que cada elemento dentro de las etiquetas <body> es hijo del cuerpo. Y así como muchos elementos hijos del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como en el ejemplo.

Este elemento fue creado con la intención de contener unidades independientes de

contenidos, así pues el contenido de cada elemento <article> tendrá su propia estructura. Podemos hacer uso dentro de ellas la versatilidad de los elementos <header> y <footer>. Estos elementos pueden ser usados no solo para definir los límites del cuerpo sino

también en cualquier sección de nuestro documento. Veamos un ejemplo de uso.

(9)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Puede que te confunda esta definición, pero veamos un ejemplo jerárquico de las etiquetas ya utilizadas hasta el momento.

Uso de la etiqueta <aside> en HTML

La etiqueta <aside> representa una sección dentro de nuestro documento, cuyo contenido está relacionado con el resto de contenido del documento, pero que al mismo tiempo, es independiente y puede ser excluido sin que esto altere la lectura del resto de contenido. Por lo cual si lo eliminamos, el resto del documento no debe perder sentido alguno.

Su aplicación es referenciada a noticias del pasado, banner de publicidad, barras laterales, entre otras secciones de complemento.

(10)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Verifiquemos el resultado a obtener en la etiqueta <aside>.

Uso de la etiqueta <footer> en HTML

Esta etiqueta se utiliza para contener información relativa al pie de página o a una sección. Siempre es relativa al padre, es decir a la etiqueta en la que se encuentre anidada.

(11)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

Entre la información que puede contener esta la mención del contacto de la empresa, autor de la página web, derechos legales, mapa del sitio, enlaces de redes sociales, etc. Veamos a continuación un ejemplo de uso.

(12)

ING. WILSON MARTÍNEZ MARTÍNEZ

ASESOR INVESTIGADOR DEL BIC 14 SAN JUAN JALTEPEC DE CANDAYOC

En hora buena muchas felicidades si has culminado sin ningún inconveniente en el ejercicio.

Figure

Actualización...

Referencias

Actualización...

Related subjects :