Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Estructura Básica de Una Página en HTML5

    Enviado por

    jantem28
    33 visualizações8 páginas
    HTML5

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    HTML5

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    33 visualizações8 páginas

    Estructura Básica de Una Página en HTML5

    Enviado por

    jantem28
    HTML5

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 8

    Estructura bsica

    de una pgina en
    HTML5

    Estructura bsica de una pgina en HTML5


    En HTML5 la estructura interna bsica de una pgina web se ha simplificado, reduciendo
    el cdigo innecesario hasta quedarse con el esqueleto bsico, que sera el siguiente:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Ttulo de la web</title>
    </head>
    <body>
    Contenido de la web
    </body>
    </html>
    Descarga este cdigo o copia, pega y guarda como HTML en cualquier editor.

    Cada fichero HTML est compuesto de dos partes. El <head>, donde se aade toda la
    informacin que el navegador necesita pero que no se visualiza y el <body>, que agrupa
    todo el contenido de la pgina y que el navegador s que muestra.

    Elementos que contiene el <head>


    Todo lo que coloquemos entre las etiquetas <head> y </head>, aunque no se visualiza en
    el navegador, ofrece informacin importante sobre la propia pgina, por lo que en
    el <head> se introduce informacin referente a:

    La codificacin de la pgina (para que aparezcan smbolos como la "", "" o los
    acentos correctamente) utilizando meta charset="utf-8".

    El ttulo de la pgina, que aparece en la pestaa del navegador (utilizando <title>).

    Otra informacin que habitualmente podemos encontrar en el <head> pero que no hemos
    aadido en el ejemplo superior para no sobrecargarlo es:

    La descripcin de la pgina, informacin destinada bsicamente a los bscadores


    (Google, Bing o Yahoo entre otros).

    <meta name="description" content="Resumen del contenido de la


    pgina">

    El cdigo CSS que la pgina utilizar, ya sea interna o externamente (tratado en el


    tema: Introduccin a CSS).
    <style type="text/css">
    </style>
    <link rel=stylesheet href="css/estilo.css" type="text/css"/>

    La programacin en javaScript (en el caso de que se utilice).


    <script type="text/javascript">
    </script>

    Por otra parte, dentro del <body> colocaremos todo aquello que s se tiene que visualizar
    en el navegador, entre lo que vamos a destacar las etiquetas semnticas.

    Las nuevas etiquetas semnticas de


    HTML5

    Con la versin anterior de HTML (HTML4) slo exista un tipo de caja (<div>), por lo que
    una caja poda contener cualquier tipo de contenido.
    Una de las novedades de HTML5, aparte de disponer de esta misma caja genrica (<div>),
    tenemos diferentes tipos de cajas destinadas cada una a un tipo de contenido concreto. As,
    las cajas de tipo <header> estn destinadas a contener los encabezados de la pgina, las de
    tipo <footer> para el pie de pgina, los enlaces estarn dentro de las cajas de tipo (<nav>),
    para el contenido normal tenemos cajas de tipo <section> y <article>, para el contenido
    relacionado con el tema central pero no directamente tenemos el tipo <aside> o las
    imgenes que tienen su propia caja <figure>.
    De esta manera, posteriormente entender y encontrar cualquier elemento o contenido es
    mucho ms rpido, sencillo y fiable.

    Adems, al ver (nosotros, cualquier otra persona o "araa/robot" que explore nuestra
    pgina) una estructura html es posible identificar la organizacin del contenido con un
    primer golpe de vista.

    Las etiquetas semnticas ms importantes son:


    (Coloca el cursor sobre los enlaces azules o las zonas del esquema para resaltar su relacin).

    <header>
    <nav>
    <section>
    <article>

    <article>

    <aside>
    <footer>
    <header>:
    Es el equivalente a la cabecera de la pgina web. Contiene el ttulo o nombre de la
    empresa/titular de la pgina, logo e informacin relacionada.
    <nav>:
    Contiene los enlaces (barra de navegacin) externos o internos de la pgina.
    <section>:
    Es una gran caja que sirve para mostrar grandes bloques de contenido de la pgina. Puede
    contener diferentes subapartados de diferentes temas (de tipo <article>).

    <article>:
    Es una caja independiente de contenido que puede estar contenida (o no) dentro de
    un <section>. Normalmente utilizada para contenidos no demasiado extensos.
    <aside>:
    Define un bloque de contenido relacionado de manera indirecta con el contenido principal,
    pero que no es esencial para la compresin del mismo.
    <footer>:
    Equivale al pie de pgina de un apartado concreto (<section>, <article>...) o de la pgina
    web en general.
    Para seleccionar el nombre de estas etiquetas, Ian Hickson (el editor de HTML5) recurri a
    las herramientas de Google para extraer datos de ms de mil millones de pginas web
    reales, repasando los ID y los nombres de clase ms utilizados en la web. Si quieres ms
    informacin puedes acceder a Google Code: Web Authoring Stadistics: Classes.

    Ejemplo de una estructura compleja


    Una estructura HTML que contenga referencia a un CSS externo, el bloque de cdigo CSS
    interno y tenga las etiquetas semnticas bsicas podra ser el siguiente:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <meta name="description" content="Resumen del contenido de la
    pgina">
    <title>Ttulo de la pgina</title>
    <link rel=stylesheet href="css/estilo.css" type="text/css"/>
    <style type="text/css">
    </style>
    </head>
    <body>
    <header>
    </header>
    <section id="contenido">
    Contenido de la web
    </section>
    <footer>
    </footer>
    </body>
    </html>
    Descarga este cdigo o copia, pega y guarda como HTML en cualquier editor.

    Guardar con formato UTF-8

    El ltimo punto a tener en cuenta es guardar el documento HTML usando la codificacin


    especificada en la etiqueta <head>:
    <meta charset="utf-8"/>
    As, si en la etiqueta anterior le estamos diciendo al navegador que la pgina va a utilizar
    una codificacin UTF-8 (para que permita reconocer los acentos) la pgina tiene que tener
    realmente esta codificacin.
    Esta codificacin se tiene que indicar en el editor de html que estemos utilizando. Como
    cada editor tiene sus caractersticas y sus propios mens, vamos a indicar donde su ubica
    esta opcin en dos editores muy populares (Sublime Text 2 y NotePad ++)

    Você também pode gostar