Tópico 2: HTML e XHTML

ST670: Tópicos em Programação Web Guilherme Palermo Coelho – FT/Unicamp – 2s2013

Tópico 2: HTML e XHTML 1

Tópico 2: HTML e XHTML

1. O que é HTML? ...................................................................................................... 4

1.1. Tags de marcação HTML (ou tags HTML) ..................................................... 6

1.2. Primeiro exemplo de uma página HTML ........................................................ 7

1.3. O que é necessário para criar páginas HTML? ................................................ 9

2. Elementos HTML ................................................................................................. 10

2.1. Sintaxe de um elemento HTML: ................................................................... 10

2.2. Elementos HTML aninhados: ........................................................................ 11

2.3. Exemplo de elementos HTML ....................................................................... 12

2.4. Tags de fechamento: ...................................................................................... 13

2.5. Capitalização de tags HTML: ........................................................................ 14

3. Atributos HTML ................................................................................................... 15

4. Parágrafos em HTML ........................................................................................... 17



5. Quebras de linha ................................................................................................... 18

6. Headings HTML ................................................................................................... 19

7. Linhas HTML ....................................................................................................... 21

8. Comentários em HTML ........................................................................................ 22

9. Formatação de texto .............................................................................................. 23

10. Hyperlinks ........................................................................................................... 27

11. Imagens ............................................................................................................... 31

12. Exercício 1 .......................................................................................................... 35

13. Tabelas ................................................................................................................ 36

14. Listas ................................................................................................................... 39

15. Frames ................................................................................................................ 41

16. iFrames ............................................................................................................... 44

17. Exercício 2 .......................................................................................................... 47

19. Layouts em HTML .............................................................................................. 48



19.1. Layouts usando tabelas ................................................................................ 49

19.2. Layouts usando elementos div ..................................................................... 51

20. Exercício 3 .......................................................................................................... 53

21. Declarações Doctype ........................................................................................... 54

21.1. DTD HTML 4.01 Strict ............................................................................... 56

21.2. DTD HTML 4.01 Transitional .................................................................... 57

21.3. DTD HTML 4.01 Frameset ......................................................................... 57

22. Elemento Head ................................................................................................... 58

23. XHTML .............................................................................................................. 63

23.1. Principais diferenças de HTML ................................................................... 65

24. Exercício 4 .......................................................................................................... 69

25. Referências .......................................................................................................... 70



1. O que é HTML? § HTML: HyperText Markup Language.

§ HTML é uma linguagem utilizada para descrever páginas web;

o HTML não é uma linguagem de programação à é uma linguagem de

marcação;

§ Linguagens de marcação: formadas por um conjunto de tags de

marcação;

o HTML se baseia nas tags de marcação para descrever páginas web.

§ A especificação da linguagem HTML é mantida e atualizada pelo World Wide

Web Consortium (W3C).



§ Documentos HTML:

o Descrevem páginas web à também são chamados de páginas web;

o Contêm tags de marcação HTML e texto puro;

o Possuem a extensão “.htm” ou “.html”.

§ Os navegadores web são responsáveis por:

§ Ler documentos HTML;

§ Interpretar as tags de marcação; e

§ Exibir a página web associada;

o Navegadores não exibem as tags de marcação;

o Eles às utilizam para interpretar o conteúdo de uma página.

§ Versão da HTML tratada neste tópico: 4.01.



1.1. Tags de marcação HTML (ou tags HTML)

§ São palavras chave cercadas por “<” e “>”;

§ Geralmente são usadas em pares:

o Ex.: <p> </p>

§ A primeira tag é chamada de tag de início ou tag de abertura

• Ex.: <p>;

§ A segunda tag é chamada tag de encerramento ou tag de fechamento

• Ex.: </p>;

• A tag de fechamento é precedida de “/”;



1.2. Primeiro exemplo de uma página HTML

§ O texto contido entre as tags <html> e </html> descreve a página;

§ O texto contido entre as tags <body> e </body> é a parte visível da página;

§ O texto contido entre as tags <p> e </p> é exibido como um parágrafo.

<html> <body> <p>Minha primeira página Web!</p> </body> </html>

Figura 1 - Exemplo de página HTML.



§ Como a página acima é exibida em um navegador:

Figura 2 - Página HTML da Fig. 1 exibida no Google Chrome.



1.3. O que é necessário para criar páginas HTML?

§ Um editor de texto simples:

o Bloco de notas (Windows), VI (Linux)...

§ Um navegador para visualizar o resultado;

§ Existem editores mais completos para desenvolvimento web, que podem ser

utilizados na criação de páginas HTML:

§ Adobe Dreamweaver, NetBeans, Aptana Studio...

§ O ideal, para aprender os fundamentos de HTML é utilizar editores de texto

simples.

§ Não é necessário um servidor web, já que os navegadores abrem arquivos .html

diretamente de diretórios locais do computador.



2. Elementos HTML

§ Um elemento HTML é o que está contido entre uma tag de início e a respectiva

tag de encerramento (inclusive as tags);

2.1. Sintaxe de um elemento HTML:

§ Inicia-se com a tag de início / tag de abertura;

§ Encerra-se com a tag de encerramento / tag de fechamento;

§ Tudo que está contido entre as tags de abertura e de fechamento corresponde ao

conteúdo do elemento;

o Alguns elementos HTML têm conteúdo vazio;

o Elementos de conteúdo vazio são fechados na própria tag de abertura;

§ Ex.: <br />: define uma quebra de linha.



§ A maioria dos elementos HTML pode ter atributos.

Tag de início Conteúdo do elemento Tag de encerramento <p> Isto é um parágrafo </p> <a href=”teste.htm”> Isto é um link </a> <br />

2.2. Elementos HTML aninhados:

§ A maioria dos elementos HTML pode ser aninhada (nested), ou seja, pode conter

outros elementos HTML;

o Documentos HTML são elementos HTML aninhados.



2.3. Exemplo de elementos HTML

§ O exemplo dado na Fig. 3 contém três elementos HTML;

§ Quais são eles?

<html> <body> <p>Minha primeira página Web!</p> </body> </html>

Figura 3 - Exemplo de elementos HTML.



2.4. Tags de fechamento:

§ É muito importante não se esquecer das tags de fechamento!

o Alguns elementos HTML podem até ser exibidos corretamente sem a tag de

encerramento:

§ Ex.: <p>Isto é um parágrafo.

o Não se deve confiar neste comportamento, já que muitos elementos HTML

podem levar a comportamentos imprevisíveis caso não contenham a tag de

fechamento.

o Em xHTML, todos os elementos devem ser fechados.

o Sugestão: SEMPRE use tags de fechamento.



2.5. Capitalização de tags HTML:

§ Tags HTML podem ser escritas tanto em letras maiúsculas quanto em letras

minúsculas;

o Ex.:

§ <P>Este é um parágrafo.<P>

§ <p>Este é um parágrafo.<p>

§ World Wide Web Consortium (W3C):

o Recomenda o uso de letras minúsculas na especificação HTML 4;

o Exige o uso de letras minúsculas em xHTML.



3. Atributos HTML

§ Elementos HTML podem possuir atributos;

o Provêm informações adicionais sobre um dado elemento;

o Sempre são especificados na tag de abertura;

o São definidos em pares do tipo: nome=”valor”;

§ Ex.: <a href="http://www.google.com">Isto é um link</a>

§ Os valores dos atributos sempre devem estar entre aspas

o Na maioria das vezes pode-se utilizar tanto aspas duplas quanto aspas

simples:

§ <a href=’http://www.google.com’> Isto é um link</a>

§ <a href="http://www.google.com">Isto é um link</a>



o Em algumas situações em que o próprio valor do atributo contém aspas,

aspas simples devem ser utilizadas:

§ Ex.: name=’John “Shotgun” Nelson’

§ Os nomes dos atributos e seus respectivos valores podem ser expressos tanto em

letras maiúsculas quanto em letras minúsculas:

o O W3C recomenda que sejam usadas letras minúsculas;

§ Alguns atributos que são padrão para a maioria dos elementos HTML:

Atributo Valor Descrição class nome_de_classe Especifica um nome_de_classe para um elemento id id Especifica uma id única para um elemento style definição_estilo Especifica um estilo para um elemento title texto_dica Especifica informações extras para um elemento, que

serão exibidas via tooltip text.



4. Parágrafos em HTML

§ Parágrafos são definidos com a tag <p>;

§ Navegadores automaticamente inserem uma linha vazia antes e depois de cada

parágrafo.



5. Quebras de linha

§ Para inserir uma quebra de linha sem começar um novo parágrafo, usa-se a tag

HTML <br />;



6. Headings HTML

§ São usados para definir diferentes níveis de títulos em HTML:

o Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (máximo 6 níveis);

§ Tags de título servem para mostrar a estrutura de um documento HTML;

o Mecanismos de busca que varrem documentos HTML usam estas tags para

este fim.



§ Não se deve usar as tags de título para escrever texto em negrito ou em fonte

maior à existem tags apropriadas para isso.



7. Linhas HTML

§ A tag <hr /> cria uma linha horizontal em um documento HTML;



8. Comentários em HTML

§ Também é possível inserir comentários em códigos de arquivos HTML, para

facilitar a sua compreensão;

§ Os comentários de um arquivo HTML são ignorados pelo navegador;

§ Exemplo de comentário:

o 

o Note que a exclamação deve ser utilizada apenas após o “<” de abertura.



9. Formatação de texto

§ HTML usa uma série de tags para formatar o texto exibido em uma página;



§ Geralmente, <strong> é renderizado como negrito e <em> como itálico;

o No entanto, existem diferenças conceituais:

§ Ao utilizar <strong> ou <em>, indica-se que o texto deve ser

renderizado de uma forma que o usuário o entenda como importante;

§ Hoje estas duas tags são interpretadas como negrito ou itálico,

• Nada impede que, no futuro, algum navegador as implemente de

forma diferente.



§ Principais tags de formatação:



§ Para outras tags de formatação, consulte [1,2].

§ No HTML 4.01 existem tags para formatação de cores, tipos de fonte do texto,

etc., mas tais tags são consideradas deprecated e não devem ser utilizadas;

o Formatação mais elaborada deve ser feita utilizando-se CSS (Cascade Style

Sheets).



10. Hyperlinks

§ Hyperlinks (ou apenas links) estão presentes em praticamente todas as páginas

web.

§ É através dos links que os usuários navegam através de páginas na internet.

§ Em HTML, um hyperlink é uma palavra, grupo de palavras ou imagem em que

se pode “clicar” para ser direcionado para outro documento ou outra seção do

documento atual.

§ Ao mover-se o cursor sobre um link em uma página HTML, a seta se transforma

em uma pequena mão.



§ Em HTML, hyperlinks são criados através da tag <a>, que pode ser utilizada de

duas formas:

o Para criar um link para outro documento, indicado pelo atributo href;

o Para apontar para um marcador dentro de um documento, com o atributo

name.

§ Sintaxe de um link HTML:

o <a href="url">Texto do Link</a>



§ Observação: o conteúdo de um elemento hyperlink não precisa ser

necessariamente texto. Também pode ser uma imagem ou qualquer outro

elemento HTML.

§ Hyperlinks podem ser utilizados em conjunto com o atributo name:

o O atributo name específica o nome de uma “âncora” dentro de um

documento HTML;



§ Permite a criação de um bookmark no documento HTML;

§ Este bookmark é invisível para o usuário.

o Exemplos:

§ Criar uma âncora em um documento HTML:

• <a name="sec_x">Seção X</a>

§ Criar um link para a “Seção X” dentro do mesmo documento HTML:

• <a href="#sec_x">Visite a Seção X!</a>

§ Criar um link para a “Seção X” dentro de outro documento HTML:

• <a href="http://www.unicamp.br/ex.htm#sec_x">Seção X</a>



11. Imagens

§ Em HTML, imagens são inseridas com a tag <img>:

o <img> é uma tag vazia, ou seja, possui apenas atributos e não possui tag de

fechamento.

§ A exibição da imagem se baseia no atributo “src” (source), cujo valor deve

corresponder à URL da imagem.

§ Sintaxe:

o <img src="url" alt="algum_texto"/>

§ “url” deve apontar para o local de armazenamento da imagem:

o Pode ser um diretório local no próprio servidor web; ou

o Uma imagem armazenada remotamente.





§ O atributo “alt” indica o texto que deve ser exibido no local da imagem, caso esta

não possa ser exibida por alguma razão:

o Conexão lenta;

o Erro no atributo “src”;

o O usuário utiliza um leitor de tela;

§ As dimensões de uma imagem em um documento HTML podem ser definidas

através dos atributos “height” (altura) e “width” (largura):

o Ex.: <img src="/img/teste.jpg" alt="Texto" width="304" height="228" />

o Os valores destes atributos devem ser dados em pixels;

o É importante definir o tamanho da imagem, para que o navegador reserve o

espaço necessário durante o carregamento à isso evita que o layout mude

durante o carregamento;



§ O uso de imagens em um documento HTML sempre deve ser feito com

parcimônia:

o Muitas imagens podem deixar o carregamento do documento lento e

comprometer a experiência do usuário;

o Se um documento HTML contiver 10 imagens, são necessárias 11

requisições ao servidor.

o Ex.: (como não fazer)

§ http://www.textfiles.com/underconstruction/

§ Recomenda-se que todas as imagens de um documento HTML estejam no mesmo

local que o documento e não em servidores remotos.

o Evita-se a ocorrência de links quebrados.



12. Exercício 1

§ Crie um documento HTML que exiba um índice com o nome de cinco cidades.

Após a exibição deste índice, exiba imagens referentes a estas cinco cidades que,

quando clicadas, levem o usuário às páginas do WikiTravel correspondentes.

§ O índice inicial, quando clicado, deve levar o usuário à posição correspondente da

imagem na própria página.



13. Tabelas

§ Em documentos HTML, tabelas são definidas com a tag <table>:

o Tabelas são divididas em linhas (rows, com a tag <tr>);

o Cada linha é dividida em células (tag <td>, de table data), que armazenam os

dados da tabela.

o O conteúdo de uma tag <td> pode ser texto, links, imagens, listas,

formulários, outras tabelas, etc.



§ Caso não seja especificado o atributo “border”, a tabela será exibida sem bordas;

o O valor do atributo “border” corresponde ao tamanho da borda da tabela em

pixels.



§ Para definir o cabeçalho de cada coluna da tabela, utiliza-se a tag <th> (table

header):

o A maioria dos navegadores exibe o texto de elementos <th> em negrito e

centralizado.



§ Para inserir títulos, usa-se a tag <caption>, dentro do elemento <table>:

o <caption>Texto da legenda</caption>

14. Listas

§ HTML prevê a criação de listas, sendo os dois tipos mais comuns as listas

ordenadas (enumeradas) e as listas não-ordenadas.

§ As listas não-ordenadas são criadas com a tag <ul> (unordered list), e cada

elemento da lista é identificado pela tag <li> (list item)

§ Já as listas ordenadas são criadas com a tag <ol> (ordered list), sendo cada

elemento da lista também identificado pela tag <li>:

§ Os elementos de listas HTML podem conter, além de texto, quebras de linhas,

imagens, links, outras listas, etc.





15. Frames

§ Frames permitem que vários documentos HTML sejam exibidos em uma mesma

janela do navegador;

o Cada documento é chamado de frame;

o Cada frame é independente dos demais.

§ Apesar de serem simples, os frames possuem algumas desvantagens:

o Eles não devem ser suportados em versões futuras de HTML;

o O gerenciamento das páginas em um conjunto de frames é difícil, uma vez

que o desenvolvedor deve cuidar de múltiplos documentos HTML;

o O usuário pode ter problemas em páginas que utilizam frames (ex.:

impressão);



§ O elemento frameset (tag <frameset>) é responsável por agrupar um ou mais

elementos do tipo frame (tag <frame>);

o Possui atributos para definir quantas colunas (atributo “cols”) ou linhas

(atributo “rows”) de frames o frameset conterá, e quanto do espaço total cada

uma delas utilizará (em pixels ou porcentagem do espaço total).

§ O elemento frame define um elemento particular dentro de um frameset;

o O atributo “src” indica qual o documento HTML que será exibido no frame.



§ Observação: quando é definido um elemento <frameset> em um documento

HTML, não podem ser definidos elementos <body>;

o <body> só será usado em conjunto com <frameset> quando a tag

<noframes> for utilizada:

§ <noframes> permite tratar situações em que o documento deve ser

exibido em navegadores que não suportam frames.



16. iFrames

§ De maneira similar aos frames, iFrames permitem a exibição de páginas web

dentro de páginas web.

o A principal diferença é que iFrames são elementos que deve ser inseridos

dentro do elemento <body>;

§ iFrames são definidos por: <iframe src="URL"></iframe>

o A “URL” aponta para o local da página que se deseja exibir.

o Pode-se utilizar os atributos “width” e “height” para definir o tamanho do

iFrame:

§ Em pixels (padrão);

§ Em porcentagem do tamanho total;



§ iFrames também podem ser usados para exibir o conteúdo de links:

o Para isso, deve fazer com que o atributo “target” da tag <a> se refira ao

atributo “name” do iFrame;





17. Exercício 2

§ Repita o Exercício 1 com as seguintes modificações;

o O índice deve passar a ser thumbnails das cinco cidades visitadas (use as

imagens originais). As cinco imagens nos thumbnails devem estar dispostas

em uma única linha, e não podem ter mais de 200 pixels de largura (use uma

tabela para definir a disposição)

o Insira um iFrame após o índice;

o Quando o usuário clicar no thumbnail de uma cidade, no Índice da página, a

respectiva página do WikiTravel deve ser exibida no iFrame inserido.



19. Layouts em HTML

§ O layout de uma página Web é muito importante, uma vez que a aparência de um

site é seu principal cartão de visitas;

§ Geralmente, o conteúdo de um website é disposto em múltiplas colunas, para que

seu conteúdo tenha uma formatação semelhante à apresentada por jornais e

revistas.

§ Múltiplas colunas são criadas com as tags <table> ou <div>.

§ Formatação adicional geralmente é feita via CSS.



19.1. Layouts usando tabelas

§ Baseia-se na tag <table>;

§ É a forma mais simples de se criar layouts em HTML





19.2. Layouts usando elementos div

§ Elementos div (tag <div>) são elementos usados para agrupar outros elementos

HTML;

o Permitem a criação de divisões ou seções em um documento HTML;

o No caso de definição de layouts, agrupam outros elementos HTML que são

formatados via CSS.





§ A principal vantagem de usar CSS para formatar componentes de layout está na

possibilidade de definir toda a formatação em um arquivo externo ao documento

HTML

o Para mudar a formatação de todo um site (múltiplos documentos HTML),

basta editar um único arquivo.

o Permite a utilização de templates (muitos disponíveis gratuitamente).

20. Exercício 3

§ Refaça o exercício 2 organizando os campos em um layout com uma barra

superior de título, o índice em uma barra lateral (modifique a tabela para que os

thumbnails fiquem dispostos verticalmente agora) e o iFrame em um campo à

direita do índice. Utilize elementos div.



21. Declarações Doctype

§ Uma declaração doctype indica aos navegadores quais regras foram seguidas na

definição do documento HTML em questão, para que eles possam renderizar a

página corretamente:

o Devem ser usadas sempre que possível.

§ Declarações doctype não são tags HTML;

§ Referem-se a uma Document Type Definition (DTD):

o DTDs são especificações de linguagens de marcação.

§ Devem ser inseridas no início do documento, antes da tag <html>;





21.1. DTD HTML 4.01 Strict

§ Este DTD contém todos os elementos e atributos da especificação 4.01 do HTML:

o Não inclui os elementos deprecated;

o Não inclui elementos de apresentação (definição de tipo de fonte, etc.)

o Não permite a utilização de framesets;



21.2. DTD HTML 4.01 Transitional

§ Este DTD contém todos os elementos e atributos da especificação 4.01 do HTML,

incluindo elementos deprecated e de apresentação:

o Não permite a utilização de framesets;

21.3. DTD HTML 4.01 Frameset

§ Equivalente ao DTD HTML 4.01 Transitional, mas com a inclusão de framesets.



22. Elemento Head

§ O elemento head (tag <head>) é um contêiner para todos os elementos de

cabeçalho;

§ Deve estar posicionado antes do corpo do documento (antes da tag <body>).

§ Os elementos contidos no head podem ser:

o Título da página (tag <title>):

§ Define o título do documento:

• Exibido na barra de título do navegador;

• Sugerido para o usuário ao adicionar a página aos favoritos;

• Exibido em resultados de mecanismos de busca.



o Scripts (tag <script>):

§ Usado para definir scripts de execução do lado do cliente;

• Ex.: Javascript.



o Elementos de estilo (tag <style>):

§ Usados para definir estilos de formatação que devem ser aplicados aos

elementos do documento HTML.

o Elementos de meta informação (tag <meta>);

§ Provêm meta-dados sobre o documento HTML;

§ Estes elementos não são exibidos pelo navegador, mas podem ser

analisados por ele e por outros softwares;



§ Geralmente são usados para inserir uma descrição do documento,

palavras chave, autores, última data de modificação, etc.

o Elemento base (tag <base>):

§ Define o diretório ou servidor base para todos os links utilizados na

página.



o Elemento link (tag <link>):

§ Usado para relacionar o documento HTML com recursos externos;

§ Geralmente é usado para incorporar páginas de estilo (CSS).



23. XHTML

§ XHTML é uma versão mais estrita e limpa de HTML;

o XHTML = EXtensible HyperText Markup Language;

o É quase idêntica a HTML 4.01;

o É basicamente uma redefinição de HTML como uma aplicação XML:

§ XML é uma linguagem de marcação que exige que as marcações dos

documentos estejam dispostas corretamente e na ordem exata.

§ Foi proposta com o intuito de coibir a proliferação de documentos HTML mal

escritos;



o Atualmente, existem navegadores espalhados pelos mais diferentes tipos de

dispositivos;

o Dispositivos móveis geralmente não têm capacidade de interpretar

documentos mal escritos.



23.1. Principais diferenças de HTML

§ Elementos XHTML devem estar propriamente aninhados;

o Muitas vezes o aninhamento de elementos em documentos HTML é feito de

maneira errada:

o Para atender ao padrão XHTML, o código acima deveria ser:



§ Elementos XHTML devem sempre ser fechados;

o Isto é válido inclusive para elementos vazios:

§ As tags de XHTML devem sempre ser escritas em letras minúsculas;

o O mesmo vale para os nomes dos atributos de cada elemento;



§ Os valores dos atributos XHTML devem estar sempre entre aspas;

§ Documentos XHTML devem ter um elemento raiz;

o Ou seja, todos os elementos XHTML devem estar aninhados dentro do

elemento raiz <html>.

§ O DTD XHTML define alguns elementos que são mandatórios:

o Uma declaração doctype:

§ XHTML 1.0 Strict

§ XHTML 1.0 Transitional



§ XHTML 1.0 Frameset

§ XHTML 1.1

• Semelhante à XHTML 1.0 Strict, mas com permissão para adição

de módulos

o O elemento <html>

§ Este deve ter o atributo “xmlns” definido com a especificação no espaço

de nomes de XML

§ <html xmlns="http://www.w3.org/1999/xhtml">



o O elemento <head>

§ O elemento <title>

o O elemento <body>.

§ É possível verificar se um documento segue a especificação XHTML no site:

o http://validator.w3.org/

24. Exercício 4

§ Faça os ajustes necessários para deixar todos os documentos criados nos

exercícios anteriores no padrão XHTML 1.0 Transitional. Faça a validação de

todos eles no site da W3C.

o Obs.: Como informar codificação de caracteres em HTML

http://www.w3.org/International/questions/qa-html-encoding-declarations



25. Referências [1] W3Schools HTML Tutorial: http://w3schools.com/html/default.asp

[2] W3C HTML 4.01 Specification: http://www.w3.org/TR/html4/

[3] XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition):

http://www.w3.org/TR/xhtml1/

Tópico 2: HTML e XHTML

Documents