Mundo
del Programador

Estructura Web

                  <! DOCTYPE html>    /* indicar el tipo de documento creado */
                  <html lang=”es”>    /* indica el idioma humano del contenido de la web */
                    <head>    /* la cabecera de la pagina */ 
                      <meta charset=”utf-8”>    /* indica la definición de tipo de caracteres*/
                      <meta name=”keywords” content=”html5, css3, crear, web”>    /* indica palabras clave utilizados por los motores de busqueda */

                      <title>Titulo pagina web</title>    /* indica el titulo de la página web */

                      <link rel=”stylesheet” href=”estilo.css”>    /* para agregar un archivo css a nuestro web, el type a desaparecido de htm 5 */
                    </head>
                    <body>    /* indica el cuerpo de la página web */
                      <header>    /* indica la cabecera de la web */
                          /* aquí va el titulo de la web /*
                      </header>

                      <nav>    /* donde se crea el menú de la web */
                      <ul>
                        <li>Inicio</li>
                        <li>Fotos</li>
                        <li>Videos</li>
                      </ul> 
                      </nav>

                      <section>    /* es la parte principal de la web, donde esta el contenido */
                      <article>    /* aquí se pueden construir varios apartados */
                        <hgroup>    /* para poner un titulo a articulo */
                        </hgroup>
                      </article>
                      </section>

                      <aside>    /* donde se crea un menú lateral, una barra lateral */
                      <footer>    /* es el pie de la pagina donde se introduce información sobre la página, como author, enlace rss etc */
                      @copyright 2015
                      </footer>
                      </aside>
                    </body>
                    </html>
                

La etiqueta section también puede tener su proprio header y footer.

Este podriá ser un ejemplo de una posible estructura con div

Ejercicios resueltos en github



Flujo de información
Anterior