Dentro del cuerpo
El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue finalizada, pero aún tenemos que trabajar en el contenido. Los elementos HTML5 estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar un propósito intrínseco a cada una de ellas, pero lo que es realmente importante para nuestro sitio web se encuentra en el interior de estas secciones.
La mayoría de los elementos ya estudiados fueron creados para construir una estructura para el documento HTML que pueda ser identificada y reconocida por los navegadores y nuevos dispositivos.
Aprendimos acerca de la etiqueta <body> usada para declarar el cuerpo o parte visible del documento, la etiqueta <header> con la que agrupamos información importante para el cuerpo, la etiqueta <nav> que provee ayuda para la navegación del sitio web, la etiqueta <section> necesaria para contener la información más relevante, y también <aside> y <footer> para ofrecer información adicional de cada sección y del documento mismo. Pero ninguno de estos elementos declara algo acerca del contenido. Todos tienen un específico propósito estructural.
Más profundo nos introducimos dentro del documento más cerca nos encontramos de la definición del contenido. Esta información estará compuesta por diferentes elementos visuales como títulos, textos, imágenes, vídeos y aplicaciones interactivas, entre otros. Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura.
Para este articulo, estaremos trabajando solo las etiquetas <SECTION>....</SECTION> que son en las cuales se posicionan el contenido de nuesto sitio, esto tambien es para ahorrar muchas lineas de código realmente innecesario si solo estaremos utilizando una parte de este.
Si as seguido los artículos anteriores lograras seguir la secuencia en el que se desarrollara en esta oportunidad.
Sin mas que agregar, vamos a empezar!!!
<article>
El diseño considerado en artículos anteriores es el más común y representa una estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla. Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de estas partes:
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
Como dijimos anteriormente, la estructura de un documento HTML puede ser descrita como un árbol, con el elemento <html> como su raíz.
Otra forma de describir la relación entre elementos es nombrarlos como padres, hijos y hermanos, de acuerdo a la posición que ocupan dentro de esa misma estructura.
Por ejemplo, en un típico documento HTML el elemento <body> es hijo del elemento <html> y hermano del elemento <head>. Ambos, <body> y <head>, tienen al elemento <html> como su padre.
Y al igual que cada elemento hijo del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como es mostrado en la Figura
Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia estructura.
Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y <footer> estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento:
<section>
<article>
<header>
<h1>TITULO DE MI ARTICULO</h1>
</header>
<P>ESTE ES MI CONTENIDO</P>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos elementos <h1> para declarar un título.
Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular.
De hecho, el elemento <header> fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o textos cortos y logos
Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
Lo que llamamos “información adicional” dentro de la cabecera en nuestra descripción previa es conocido como Metadata.
Metadata es un conjunto de datos que describen y proveen información acerca de otro grupo de datos. En nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado.
<figure> y <figcaption>
La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento.
Antes de que este elemento sea introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc…
Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de información, las etiquetas <figure> pueden ser usadas para identificarla:
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src=”hubicacion del archivo .jpg, .png que se quiera utilizar”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
Con todo lo expuesto en todos los artículos anteriores, tenemos el código básico como crear ya nuestra primera plantilla HTML5, bastara agregarles algunas lineas de código de CSS3 para agregarle algunos estilos, que sera de lo que tratara los próximos artículos.
Como referencia a continuación les dejare un pequeño diccionario con todas las etiquetas que se han visto hasta ahora, y algunas que no tienen relevancia en el desarrollo de contenido, pero que si son una alternativa cuando el navegador no muestra el contenido apropiadamente, como son las "ñ" o si queremos subrayar algo, poner en negritas, cursiva, resaltar texto o poner algunas citas en nuestros artículos.
Ademas les proporcionares el código completo de la platilla con todas las etiquetas que hemos aprendido.
Referencia rápida
En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito. La especificación también incluye algunos elementos con la única tarea de proveer estilos.
Esta es una lista de los que consideramos más relevantes:
- <header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…
- <nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.
- <section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…
- <aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…
- <footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.
- <article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.
- <hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
- <figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.
- <figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.
- <mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.
- <small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).
- <cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).
- <address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.
- <time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación.
El siguiente codigo, representa todas las etiquetas HTML5 estudiadas en los articulos anteriores, formando en conjunto lo que seria una plantilla base para poder desarrollar nuestros sitios web.
Solo tendrán que copiar el código y pegarlo en su editor de texto de preferencia y guardarlo con extensión .html por ejemplo: modelo_caja.html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript"
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src=”hubicacion del archivo .jpg, .png que se quiera utilizar”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<p>publicado 15-12-2011</p>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados MYDWEB © 2017
</footer>
</body>
</html>
Hasta un próximo articulo.!!!
La mayoría de los elementos ya estudiados fueron creados para construir una estructura para el documento HTML que pueda ser identificada y reconocida por los navegadores y nuevos dispositivos.
Aprendimos acerca de la etiqueta <body> usada para declarar el cuerpo o parte visible del documento, la etiqueta <header> con la que agrupamos información importante para el cuerpo, la etiqueta <nav> que provee ayuda para la navegación del sitio web, la etiqueta <section> necesaria para contener la información más relevante, y también <aside> y <footer> para ofrecer información adicional de cada sección y del documento mismo. Pero ninguno de estos elementos declara algo acerca del contenido. Todos tienen un específico propósito estructural.
Para este articulo, estaremos trabajando solo las etiquetas <SECTION>....</SECTION> que son en las cuales se posicionan el contenido de nuesto sitio, esto tambien es para ahorrar muchas lineas de código realmente innecesario si solo estaremos utilizando una parte de este.
Si as seguido los artículos anteriores lograras seguir la secuencia en el que se desarrollara en esta oportunidad.
Sin mas que agregar, vamos a empezar!!!
<article>
El diseño considerado en artículos anteriores es el más común y representa una estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla. Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de estas partes:<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
Como dijimos anteriormente, la estructura de un documento HTML puede ser descrita como un árbol, con el elemento <html> como su raíz.
Otra forma de describir la relación entre elementos es nombrarlos como padres, hijos y hermanos, de acuerdo a la posición que ocupan dentro de esa misma estructura.
Por ejemplo, en un típico documento HTML el elemento <body> es hijo del elemento <html> y hermano del elemento <head>. Ambos, <body> y <head>, tienen al elemento <html> como su padre.
Y al igual que cada elemento hijo del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como es mostrado en la Figura
Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y <footer> estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento:
<section>
<article>
<header>
<h1>TITULO DE MI ARTICULO</h1>
</header>
<P>ESTE ES MI CONTENIDO</P>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos elementos <h1> para declarar un título.Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular.
De hecho, el elemento <header> fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o textos cortos y logos
Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
Lo que llamamos “información adicional” dentro de la cabecera en nuestra descripción previa es conocido como Metadata.
Metadata es un conjunto de datos que describen y proveen información acerca de otro grupo de datos. En nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado.
<figure> y <figcaption>
La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento.Antes de que este elemento sea introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc…
Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de información, las etiquetas <figure> pueden ser usadas para identificarla:
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src=”hubicacion del archivo .jpg, .png que se quiera utilizar”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
Con todo lo expuesto en todos los artículos anteriores, tenemos el código básico como crear ya nuestra primera plantilla HTML5, bastara agregarles algunas lineas de código de CSS3 para agregarle algunos estilos, que sera de lo que tratara los próximos artículos.
Como referencia a continuación les dejare un pequeño diccionario con todas las etiquetas que se han visto hasta ahora, y algunas que no tienen relevancia en el desarrollo de contenido, pero que si son una alternativa cuando el navegador no muestra el contenido apropiadamente, como son las "ñ" o si queremos subrayar algo, poner en negritas, cursiva, resaltar texto o poner algunas citas en nuestros artículos.
Ademas les proporcionares el código completo de la platilla con todas las etiquetas que hemos aprendido.
Referencia rápida
En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito. La especificación también incluye algunos elementos con la única tarea de proveer estilos.Esta es una lista de los que consideramos más relevantes:
- <header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…
- <nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.
- <section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…
- <aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…
- <footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.
- <article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.
- <hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
- <figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.
- <figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.
- <mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.
- <small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).
- <cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).
- <address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.
- <time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación.
Solo tendrán que copiar el código y pegarlo en su editor de texto de preferencia y guardarlo con extensión .html por ejemplo: modelo_caja.html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript"
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src=”hubicacion del archivo .jpg, .png que se quiera utilizar”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<p>publicado 15-12-2011</p>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados MYDWEB © 2017
</footer>
</body>
</html>
Hasta un próximo articulo.!!!
No hay comentarios:
Publicar un comentario