jorgesumle
/
referencia-html


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
							.. 4.3

=======================
Secciones
=======================

El elemento ``body``
====================

Representa el contenido de un documento HTML. Sólo puede haber un elemento
``<body>`` en un documento.

El elemento ``<body>`` expone como atributos de contenidos del controlador
de eventos un número de manejadores de eventos del objeto Window.

Los controladores de eventos ``onblur``, ``onerror``, ``onfocus``, ``onload``,
``onresize`` y ``onscroll`` del objeto **Window**, expuestos en el elemento
``body``, reemplazan los manejadores de eventos genéricos por los mismos
nombres normalmente admitidos por los elementos HTML.

  .. code-block:: html

   <!DOCTYPE html>
   <html lang="es">
     <head>
       <meta charset="UTF-8">
       <title>Comprobar estado navegador</title>
       <script>
         function update(online) {
           document.getElementById('status').textContent = online ? 'Conectado' : 'Desconectado';
         }
       </script>
     </head>
     <body ononline="update(true)"
           onoffline="update(false)"
           onload="update(navigator.onLine)">
       <p>Tú estás: <span id="status">(Desconocido)</span></p>
     </body>
   </html>

En este ejemplo podemos ver como se le asocia a los distintos eventos
**ononline**, **onoffline** un metodo predefinido por el programador el cual
recibe por parametro un valor booleano y mediante la propiedad **onLine** del
objeto ``navigator`` muestra en la etiqueta ``<span>`` si el navegador
esta conectado a internet.

El elemento ``article``
=======================

El elemento ``<article>`` representa una composición completa o autónoma
en un documento, una página, una aplicación o un sitio web. Esto podría ser una
revista, un periódico, un artículo técnico o académico, un ensayo o informe,
un blog u otro mensaje de medios sociales.

Cada ``<article>`` debe ser identificado, típicamente incluyendo un encabezado
elemento (``<h1>``, ``<h2>``...) como un elemento hijo del elemento del
``<article>``.

  .. code-block:: html

     <article>
       <header>
         <h2><a href="https://www.w3.org/TR/html51/">Indice de contenidos</a></h2>
         <p>Posteado el Domingo, 1 Enero 2017 por Raul Vela Salas.
         <a href="https://www.w3.org/TR/html51/sections.html#sections">Ejemplo de secciones</a></p>
       </header>
       <p>En esta parte podemos encontrar todo tipo de elementos y referencias relacionado con las secciones
          de la version mas reciente de HTML 5.1 , es por ello que es importante tenerla de referencia</p>
       <p><a href="https://www.w3.org/TR/html51/index.html#contents/">Continúa leyendo más sobre este tema</a></p>
     </article>

El elemento ``section``
=======================

.. image:: imagenes/bodyStructureSection.png

El elemento ``<section>`` representa una sección genérica de un documento o aplicación.
Una ``<section>`` en este contexto es una agrupación temática de contenido.
Cada ``<section>`` debe identificarse, típicamente incluyendo un encabezado del
elemento ``<h1>``-``<h6>`` como hijo del elemento de la sección.

  .. code-block:: html

     <article>
       <header>
         <h2>Manzanas</h2>
         <p>¡Sabrosa, deliciosa fruta!</p>
       </header>
       <p>La manzana es la fruta pomácea del manzano.</p>
       <section aria-label="Manzanas rojas.">
         <h3>Delicionas Rojas</h3>
         <p>Estas manzanas rojas brillantes son las más comunes que se encuentran en muchos supermercados.</p>
       </section>
       <section aria-label="Manzanas verdes.">
         <h3>Granny Smith</h3>
         <p>Estas jugosas manzanas verdes hacen un gran relleno para pasteles de manzana.</p>
       </section>
     </article>

El elemento ``nav``
===================

.. image:: imagenes/bodyStructureNav.png

El elemento ``<nav>`` representa una sección de una página que enlaza con otras
páginas o con partes de la página. Es una sección con vínculos de navegación.

  .. code-block:: html

     <body>
       <h1>Ejemplo de la etiqueta nav</h1>
         <nav>
           <ul>
             <li><a href="#">Principal</a></li>
             <li><a href="/events">Eventos Actuales</a></li>
           </ul>
         </nav>
       <article>
         <header>
           <h2>Ejemplo de nav</h2>
           <p>Creado por R.V.S.</p>
         </header>
           <nav>
           <ul>
             <li><a href="#publico">Demostracion Pública </a></li>
             <li><a href="#destruir">Destruir</a></li>
           </ul>
           </nav>
           <div>
             <section id="publico">
               <h2>Demostracion Pública</h2>
               <p>...mas contenido...</p>
              </section>
             <section id="destruir">
               <h2>Destruir</h2>
               <p>...mas contenido...</p>
             </section>
           </div>
         <footer>
           <p><a href="?editar">Editar</a> | <a href="?delete">Borrar</a> | <a href="?Rename">Renombrar</a></p>
         </footer>
       </article>
       <footer>
         <p><small>Ejemplo proporcionado por HTML 5.1</small></p>
       </footer>
     </body>

El elemento ``aside``
=======================

.. image:: imagenes/bodyStructureAside.png

El elemento ``<aside>`` representa una sección de una página que consiste en
contenido que está relacionado con el contenido principal de la sección del elemento
padre y que podría considerarse por separado de ese contenido principal.
Las secciones se representan a menudo como barras laterales.

El elemento se puede utilizar para efectos tipográficos como barras laterales,
para publicidad, para grupos de elementos de navegación y para otros contenidos
que se consideran separados del contenido principal.

  .. code-block:: html

   <aside>
     <h2>Suiza</h2>
       <p>Suiza, un país en el centro de Europa
         ,el cual no esta unido a la Unión Europea, aunque
          tienen firmado un tratado.</p>
   </aside>

Los elemento ``h1``, ``h2``, ``h3``, ``h4``, ``h5`` y ``h6``
============================================================

Estos elementos representan **encabezados** para sus secciones.

Estos elementos tienen un **rango** dado por el número que acompaña a su nombre.
El elemento ``<h1>`` tiene el rango **más alto**, el elemento ``<h6>`` tiene el rango
**más bajo**, y dos elementos con el mismo nombre tienen mismo rango.

  .. code-block:: html

     <body>
       <h1>Más alto nivel de rango del encabezado</h1>
       <section><h2>Segundo nivel de encabezado</h2>
       <section><h3>Tercer nivel de encabezado</h3>
       <section><h4>Cuarto nivel de encabezado</h4>
       <section><h5>Quinto nivel de encabezado</h5>
       <section><h6>Sexto nivel de encabezado</h6>
       </section>
       </section>
       </section>
       </section>
       </section>
     </body>

Los elementos ``<h1>``-``<h6>`` no deben usarse para subrayar subtítulos, títulos
alternativos y etiquetas de linea a menos que se prevea que sean el encabezado
de una nueva sección o subsección.

El elemento ``header``
======================

.. image:: imagenes/bodyStructureHeader.png

El elemento ``<header>`` representa un grupo de ayudas introductorias
o de navegación. Puede contener algunos elementos de encabezado, pero también
otros elementos como un logo, una sección que aglutine secciones de encabezados,
una formulario de búsqueda o cosas parecidas.

Cuando el ancestro más cercano como las secciones de contenido ``<article>``,
``<aside>``, ``<nav>`` y ``<section>`` o de la secciones de raiz ``<blockquote>``
``<body>``, ``<details>``, ``<fieldset>``, ``<figure>``, ``<td>`` son un elemento
del ``<body>``, entonces es aplicado a toda la página.

  .. code-block:: html

   <!DOCTYPE html>
   <html>
     <head>
       <title></title>
     </head>
     <body>
       <header>
         <h1>Graficos Vectoriales Escalables (SVG) 1.2</h1>
         <p>W3C 2017</p>
         <dl>
           <dt>Actual versión:</dt>
           <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20041027/">https://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
           <dt>Anterior version:</dt>
           <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20040510/">https://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
           <dt>Anterior version de SVG 1.2:</dt>
           <dd><a href="https://www.w3.org/TR/SVG12/">https://www.w3.org/TR/SVG12/</a></dd>
           <dt>La última recomendación de SVG :</dt>
           <dd><a href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a></dd>
           <dt>Editor:</dt>
           <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
           <dt>Autor:</dt>
           <dd>Ver <a href="#authors">Lista de autores</a></dd>
         </dl>
         <p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notic"></a></p>
       </header>
     </body>
   </html>

El elemento ``header`` no secciona el contenido: **no introduce una nueva sección**.

El elemento ``footer``
======================

.. image:: imagenes/bodyStructureFooter.png

El elemento ``<footer>`` de una página representa un pie de página para su seccion
de contenido del antepasado más cercano o del elemento raíz seccionado. Un pie de
página normalmente contiene información sobre su sección, como quién la
escribió, enlaces a documentos relacionados, datos de copyright y similares.

Cuando el elemento ``<footer>`` de la página contiene secciones enteras,
representan apéndices, índices, colofones largos, acuerdos de licencia detallados
y otros contenidos similares.

Los elementos ``<footer>`` no necesariamente tienen que aparecer al final de una
sección, aunque normalmente lo hacen.
El elemento ``<footer>`` no secciona el contenido: no introduce una nueva sección.

  .. code-block:: html

     <body>
       <footer><a href="../">Regresa al Indice...</a></footer>
       <div>
       <h1>Lorem ipsum</h1>
       <p>The ipsum of all lorems</p>
       </div>
       <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.</p>
       <footer><a href="../">Regresa al Indice..</a></footer>
     </body>

Algunos diseños de sitios web tienen lo que a veces se conoce como **fat footer**
, ``footer`` de página que contienen una gran cantidad de material, incluyendo
imágenes, enlaces a otros artículos, enlaces a páginas para enviar comentarios,
En algunos aspectos, una 'página de inicio' completa en el pie de página.

  .. code-block:: html

       <body>
         <!-- Contenido... -->
         <footer>
           <nav>
           <section>
           <h2>Articulos</h2>
           <p><img src="https://images.template.net/wp-content/uploads/2014/09/Gym-Logo-E-G.jpg" alt="Elite Gym logo" width="50">
                        ¡Ir al gimnasio con nuestra clase de saltos mortales!<br> Nuestro maestro Jim <br>
                         te lleva a través de los pasos en este artículo en dos partes. <a href="articles/somersaults/1">Parte1</a>
                         <a href="articles/somersaults/2">Parte 2</a></p>
           <p><img alt="Crossfit performance" src="https://image.freepik.com/free-vector/logo-for-a-gym_1195-54.jpg" width="50"> Cansado de caminar en el borde ?<br>
                        Nuestra escritora invitada Lara le enseña a caminar a través de las barras.. <a href="articles/kindplus/1">Leermas...</a></p>
           <p><img alt="chips" src="http://www.molomart.com/uploads/images/chips.png" width="120"> Abandona las patatas fritas , engordar una barbaridad  <a href="articles/crisps/1">Leer mas...</a></p>
           </section>
           <ul>
             <li> <a href="/about">Sobre nosotros...</a>
             <li> <a href="/feedback">Envia feedback!</a>
             <li> <a href="/sitemap">Sitemap</a>
           </ul>
           </nav>
           <p><small>Copyright © 2015 El Snacker —      <a href="/tos">Terminos del servicio</a></small></p>
         </footer>
       </body>

El elemento ``address``
=======================

El elemento ``<address>`` representa la información de contacto de su antecesor
``<article>`` o elemento ``<body>`` más próximo. Si ese es el elemento del
``<body>``, entonces la información de contacto se aplica al documento como un todo.

  .. code-block:: html

   <address>
     <a href="../gente/Raul/">Raul Vela Salas</a>,
     <a href="../gente/Jorge/">Jorge Maldonado Ventura </a>,
     Contactar con las personas <a href="activismo">W3C HTML activismo</a>
   </address>