Scribd Logo
Carica

Benvenuto in Scribd!

  • Caminho Ate o HTML5 PDF

    Caricato da

    Paula Fernanda
    193 visualizzazioni5 pagine

    Titolo originale

    Caminho_ate_o_HTML5.pdf

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    193 visualizzazioni5 pagine

    Caminho Ate o HTML5 PDF

    Caricato da

    Paula Fernanda

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    Introduo ao HTML5 e seus novos elementos

    1. Caminho at o HTML5

    A WEB foi criada numa instituio (CERN) para troca de informaes entre cientistas.
    Em toda a sua existncia ela se expandiu e foi se transformando, como tambm se
    transformaram os meios de transporte da informao: as pginas de WEB.

    Dada a sua utilizao inicial, a linguagem HTML oferecia as facilidades necessrias para a
    criao de documentos com a aparncia de artigos cientficos. Quando foi necessria uma
    apresentao diferente, passou-se a utilizar tabelas com bordas invisveis para permitir um
    livre posicionamento de elementos dentro de uma pgina. Isso o que chamamos de layout
    baseado em tabelas, o que permitiu a criao de pginas mais bonitas e acabou facilitando a
    expanso da internet para alm dos meios cientficos.

    A popularizao da WEB mostrou que a forma de construir pginas apresentava diversos


    problemas. A uniformidade de pginas dentro de um site muito difcil de ser mantida j que
    a informao de aparncia estava misturada ao contedo das pginas. O layout de tabelas
    tambm no permite que seja definida com clareza a estrutura de um documento, o que
    uma informao importante para mecanismos de busca. Por fim, este tipo de layout um
    desastre para a acessibilidade.

    A definio do padro CSS (Cascade Style Sheets) permitiu que se retirassem as


    informaes de aparncia de dentro do documento HTML. Os estilos de posicionamento
    contidos na definio do CSS, aplicados sobretudo a tag <DIV> permitiu o livre posicionamento
    de elementos numa pgina sem a utilizao de tabelas. Isso o que chamamos de layout sem
    tabelas (tableless) e a forma mais correta hoje em dia de se criar uma pgina.

    <html>
    <head>
    <title> </title>
    </head>
    <body>
    <div> </div>
    <div> </div>
    <div> </div>
    </body>
    </html>
    Tab. 1.1 Estrutura de uma pgina no HTML4

    A utilizao da tag <DIV> para posicionamento e organizao dos documentos foi um


    grande avano mas, para algumas aplicaes, ela ainda tem um pequeno problema. Esta tag
    muito genrica e, por poder conter qualquer coisa, no diz nada acerca do que ela contm.
    Esta informao sobre o significado (semntica) de cada ponto de um documento tem
    importncia tanto em termos de organizao do prprio documento quanto para auxiliar os
    sites de busca para melhor encontrar a informao desejada por um usurio.

    Imagine um documento tpico com uma rea de cabealho, um menu, uma rea de
    contedo e um rodap. Este documento poderia ser criado com quatro tags <DIV> para cada
    uma destas reas e a utilizao do atributo id para diferenciar e identificar cada uma delas
    (Tab. 1.2). Isso resolve o problema de organizao interna do documento mas no o problema
    dos mecanismos de busca pois no h uma padronizao do valor do identificador. O que
    algum chamou de cabecalho outro poderia simplesmente chamar de cabec.

    <html>
    <head>
    <title> </title>
    </head>
    <body>
    <div id="cabecalho"> </div>
    <div id="menu"> </div>
    <div id="conteudo"> </div>
    <div id="rodape"> </div>
    </body>
    </html>
    Tab. 1.2 Estrutura com divises identificadas

    Baseado nos tipos de diviso mais comum de um documento, uma das mudanas
    introduzidas no HTML5 foi a criao de uma srie de tags para implementar estas divises.

    2. Estrutura de um documento

    Uma srie de novas tags foram definidas no HTML5 para suprir esta necessidade de
    atribuir significado a blocos de contedo de um documento: <header>, <nav>, <section>,
    <article>, <aside> e <footer>. Esta tags no definem por si s nenhuma informao de
    posicionamento ou de aparncia, o que importa nelas apenas seu significado no documento:

    <header>

    O elemento header contm informao introdutria para uma pgina ou para uma
    seo. Isso pode ser desde um simples cabealho de um documento at toda uma tabela de
    contedo.

    <nav>

    O elemento nav reservado para uma seo de um documento que contm links para
    outras pginas ou links para sees da mesma pgina. Nem todo grupo de links precisa estar
    contido dentro do elemento nav, apenas o menu primrio.

    <section>

    O elemento section representa um document genrico ou a seo de um documento.


    Ele age mais ou menos como um div, separando partes de um documento. possvel incluir
    outras section ou article dentro de uma section.

    <article>

    O elemento article representa uma parte de uma pgina que pode ficar sozinha com,
    por exemplo: uma postagem de blog, uma entrada de frum, comentrios submetidos por um
    usurio ou qualquer item de contedo independente. . possvel incluir section ou article
    dentro de um article.
    <aside>

    O elemento aside representa um contedo relacionado com a rea principal do


    documento porm fora do fluxo principal do assunto. muito comum de se encontrar em
    livros onde inclui notas explicaes ou citaes sobre o texto principal.

    <footer>

    Este elemento serve para incluir informaes de rodap numa pgina ou em cada seo
    de uma pgina.

    Na estrutura do HTML nenhum destes elementos obrigatrio e eles devem ser


    utilizados apenas para conter o tipo de dado cujo significado eles representam. Conforme dito
    anteriormente, estes elementos no definem por si s nenhuma informao de
    posicionamento ou de aparncia, porm comum represent-los como blocos dispostos
    conforme mostrado na figura 2.1. Um erro muito comum imaginar que um documento
    qualquer em trs colunas deve necessariamente ser representado desta forma. Muitas vezes
    cada coluna deve ser criada simplesmente como uma section ou mesmo como um div,
    dependendo do significado de seu contedo para o documento.

    Fig. 2.1 Layout padro de um documento HTML5

    3. O DOCTYPE

    Antes de colocarmos isso em prtica e sairmos por a criando documentos em HTML5


    necessrio incluirmos uma tag especial no incio do nosso documento. Um documento HTML
    nada mais que um documento XML (o HTML nada mais que uma linguagem que segue a
    sintaxe XML) e por isso deve comear como um comando XML informando em qual dialeto
    de XML est codificado. Isso feito simplesmente incluindo na primeira linha do documento:

    <!DOCTYPE html>

    Simplesmente isso j indica para o navegador que estamos com um documento HTML5.
    Nas verses anteriores de HTML j existia o DOCTYPE mas a sua sintaxe era mais complicada e
    muitas vezes era mais simples omitir sua presena que explic-lo. Na nova verso no mais
    possvel omiti-lo. Um documento para representar o layout padro mostrado na Figura 2.1
    pode ser escrito ento conforme o cdigo da Tabela 3.1 a seguir:

    <!DOCTYPE html>
    <html>
    <head>
    <title> </title>
    </head>
    <body>
    <header>
    </header>
    <nav>
    </nav>
    <section>
    <header>
    </header>
    <article>
    <hgroup>
    </hgoup>
    </article>
    <footer>
    </footer>
    </section>
    <aside>
    </aside>
    <footer>
    </footer>
    </body>
    </html>
    Tab. 3.1 Estrutura de uma pgina com novos elementos do HTML5
    A tag <hgroup> mais uma das novas tags do HTML5 e usada para agrupar
    cabealhos de vrios nveis em um s bloco.

    4. O CSS para isso funcionar

    Ao chegar neste ponto do texto voc j dever ter entendido as mudanas


    introduzidas pelo HTML5 e deve estar ansioso para por a mo na massa e comear a
    utilizar as novas tags. Porm, se voc digitar o cdigo da Tabela 3.1 e mandar abrir em um
    navegador vai ficar decepcionado pois no encontrar nada parecido com o layout da
    figura 2.1. Para incluir informaes de posicionamento e aparncia necessrio utilizar
    estilos CSS. Diversas propriedades de CSS podem ser aplicadas a estas tags mas destacarei
    trs delas pela sua utilidade para posicionamento:

    a. Propriedade display

    Uma questo fundamental para a aparncia de qualquer elemento da linguagem


    HTML se ele se comporta como parte de uma linha (display com valor inline) ou se ele se
    comporta como um bloco (display com valor block). A diferena entre os dois
    basicamente a diferena entre a tag <span> (inline) e a tag <div> (block).

    Para que nossas novas tags possam ser exibidas com o layout mostrado na figura 2.1
    necessrio que elas se comportem como block, e isso j verdadeiro para a ltima verso
    dos navegadores mais populares. Porm verses mais antigas destes navegadores, mesmo
    aquelas j aptas a trabalhar com HTML5, tratavam estas novas tags como inline. Para estes
    casos deve-se incluir o seguinte estilo no CSS da pgina (o que no causa nenhum prejuzo
    caso o navegador j trate estas tags como block):
    <style>
    header, nav, section, article, aside, footer {
    display: block;
    }
    </style>

    b. Propriedade float

    A propriedade float indica se um elemento ficar preso a uma lateral do bloco que o
    contm e a qual lado (left ou right).
    <style>
    nav, section {
    float: left;
    }
    aside {
    float: right;
    }
    </style>

    c. Propriedade clear

    A propriedade clear indica se um elemento no vai permitir nenhum elemento


    agarrado a seu lado direito (right), esquerdo (left) ou a nenhum dos dois (both).
    <style>
    footer {
    clear: both;
    }
    </style>

    Potrebbero piacerti anche