PLT - Captulo 3 Estrutura bsica
Professor Valrio
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Estrutura bsica de uma pgina
Nesta pgina foram utilizadas as tags , , , , , e as tags de finalizao
A indentao (afastamento esquerda) no obrigatrio, mas ajuda na visualisao do html por parte dos desenvolvedores
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Esta deve ser a primeira tag em um documento HTML Ela informa ao navegador se a pgina escrita em HTML ou
em XHTML:
O case no importa, mas recomenda-se digit-la em maisculas
A tag no parte das linguagens HTML ou XHTML, mas parte das especificaes XML e no possui uma
tag de fechamento.
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
So as tags que delimitam a pgina html. Todo o contedo da pgina deve ser incluido entre as tags
e .
A tag deve vir logo depois da , no incio do documento e a tag deve ser a ltima tag de um
arquivo html
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
So as tags que delimitam o cabealho do documento As informaes colocadas dentro do head so lidas antes
de se carregar o documento html
no cabealho que costuma-se codificar o ttulo da pgina, a ser exibido no alto da janela do navegador
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
So as tags que delimitam o ttulo da pgina Estas tags devem ser codificadas dentro da tag head
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
So as tags que delimitam o corpo da pgina dentro do body que codificado o contedo da
pgina HTML
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Exemplo
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Os pargrafos so definidos com a tag e o contedo do pargrafo deve ser escrito entre e .
Este um pargrafo.
HTML adiciona automaticamente uma linha em branco extra antes e aps um pargrafo.
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
a Tags utilizadas para definir ttulos a serem
apresentados no corpo, e que dever ser codificadas
dentro da seo body
HTML possui seis nveis de hierarquia numa pgina. define o ttulo mais importante e define o
menos importante
Aceita o atributo lang para indicar a linguagem do ttulo
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
a
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Exemplo de layout bsico: links de navegao no topo da
pgina, o contedo principal esquerda, outros servios
direita, e o rodap na parte de baixo.
Estrutura bsica de uma pgina
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Estrutura bsica de uma pgina
Estruturalmente, o site anterior pode ser resumido no
esquema apresentado acima. Este apenas um dos muitos
arranjos possveis.
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Se uma seo de sua pgina tem um grupo de links introdutrios, marque esta seo como cabealho usando a tag
...
contedo
...
Uma vez que o cabealho possui informaes que devero aparecer na pgina, ele deve ser codificado dentro de
Frequentemente, o cabealho inclui a logomarca do site, a navegao introdutria, e s vezes um caixa de busca
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A seo deve conter links de maior navegao; links que apontem para contedo da pgina ou para outras
pginas
...
links
...
Usa-se apenas para os grupos de links mais importantes, no para todos
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A tag pode ser traduzida em artigo, o local que contm textos e itens
...
textos
...
Assim como e , tambm deve ser colocado dentro de
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A tag define uma seo da pgina, normalmente dentro de , como um artigo especfico dentro da
seo de artigos
...
textos
...
Apesar de normalmente ser colocada dentro de , isto no obrigatrio
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A tag faz referncia quele contedo normalmente colocado no lado direito do site
...
informaes
...
Apesasr do nome no precisa, necessariamente, estar posicionado na lateral direita do site
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A tag define o rodap do site, e normalmente contm informaes como autor, copyright, contato, etc.
...
textos
...
Pode-se ter vrios elementos num documento nico
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A tag pode ser considerada como um container genrico.
...
contedo
...
Assim como , , , , e , a tag usada para agrupar e elementos.
Ferramentas para Sistemas Web
Prof. Valrio [email protected]
A tag de comentrio usada para inserir comentrios no cdigo fonte, que no so exibidos nos navegadores.
Usa-se comentrios para explicar o cdigo-fonte html.
Tambm uma boa prtica usar a tag de comentrio para esconder os scripts de browsers sem suporte para ele
Prof. Valrio [email protected]
Obrigado!
Top Related