HTML

•

UNICAMP

Ygor Veríssimo

29.09.2014

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 82 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 82 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 82 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Engenharia de Software I

28.816 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

SI401	
  Programação	
  para	
  a	
  Web	
  2º	
  Semestre	
  -‐	
  2014	
  
Prof.	
  Guilherme	
  Palermo	
  Coelho	
  	
  	
  
guilherme@2.unicamp.br	
  
1	
  
Tópico	
  2:	
  	
  
HTML	
   SI4
01
	
  –
	
  P
ro
gr
am
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Roteiro	
  
•  O	
  que	
  é	
  HTML?	
  
•  Declarações	
  <!DOCTYPE>	
  
•  Elementos	
  HTML;	
  
•  Atributos	
  de	
  Elementos	
  HTML;	
  
•  Alguns	
  elementos	
  HTML;	
  
•  Layouts	
  em	
  HTML;	
  
•  Elemento	
  HEAD;	
  
•  XHTML;	
  
•  Referências.	
  
2	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
O	
  QUE	
  É	
  HTML?	
   3	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
O	
  Que	
  é	
  HTML?	
  
•  HTML:	
  HyperText	
  Markup	
  Language.	
  
•  HTML	
  é	
  uma	
  linguagem	
  uZlizada	
  para	
  descrever	
  páginas	
  web;	
  
•  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;	
  
•  HTML	
   se	
   baseia	
   nas	
   tags	
   de	
   marcação	
   para	
   descrever	
   páginas	
  
web.	
  
•  A	
  especiﬁcação	
  da	
   linguagem	
  HTML	
  é	
  manZda	
  e	
  atualizada	
  pelo	
  
World	
  Wide	
  Web	
  Consor:um	
  (W3C).	
   4	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
O	
  Que	
  é	
  HTML?	
  
•  Histórico:	
  
5	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Versão	
   Ano	
  
HTML	
   1991	
  
HTML+	
   1993	
  
HTML	
  2.0	
   1995	
  
HTML	
  3.2	
   1997	
  
HTML	
  4.01	
   1999	
  
XHTML	
   2000	
  
HTML	
  5	
   2012	
  
O	
  Que	
  é	
  HTML?	
  
•  Documentos	
  HTML:	
  
•  Descrevem	
  páginas	
  web	
  →	
  também	
  são	
  chamados	
  de	
  páginas	
  web;	
  
•  Contêm	
  tags	
  de	
  marcação	
  HTML	
  e	
  texto	
  puro;	
  
•  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;	
  
•  Navegadores	
   não	
   exibem	
   as	
   tags	
   de	
   marcação	
  à	
   eles	
   às	
  
uZlizam	
  para	
  interpretar	
  o	
  conteúdo	
  de	
  uma	
  página.	
  
6	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Tags	
  de	
  marcação	
  HTML	
  
•  São	
  palavras	
  chave	
  cercadas	
  por	
  “<”	
  e	
  “>”;	
  
•  Geralmente	
  são	
  usadas	
  em	
  pares:	
  
•  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	
  “/”;	
  
7	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Primeiro	
  exemplo	
  de	
  uma	
  página	
  HTML	
  
•  A	
  declaração	
  DOCTYPE	
  deﬁne	
  o	
  Zpo	
  do	
  documento;	
  
•  O	
  texto	
  conZdo	
  entre	
  as	
  tags	
  <html>	
  e	
  </html>	
  descreve	
  a	
  página;	
  
•  O	
  texto	
  conZdo	
  entre	
  as	
  tags	
  <body>	
  e	
  </body>	
  é	
  a	
  parte	
  visível	
  da	
  página;	
  
•  O	
  texto	
  conZdo	
  entre	
  as	
  tags	
  <p>	
  e	
  </p>	
  é	
  exibido	
  como	
  um	
  parágrafo.	
   8	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
<!DOCTYPE html> �
<html> �
<body> �
"�
"<p>Minha primeira pagina Web!</p> �
�
</body> �
</html> �
Primeiro	
  exemplo	
  de	
  uma	
  página	
  HTML	
  
9	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
<!DOCTYPE html> �
<html> �
<body> �
"�
"<p>Minha primeira pagina Web!</p> �
�
</body> �
</html> �
O	
  que	
  é	
  necessário	
  para	
  criar	
  páginas	
  WEB?	
  
•  Um	
  editor	
  de	
  texto	
  simples:	
  
•  Bloco	
  de	
  notas	
  (Windows),	
  VI	
  (Linux)...	
  
•  Um	
  navegador	
  para	
  visualizar	
  o	
  resultado;	
  
•  Existem	
  editores	
  mais	
  completos	
  para	
  desenvolvimento	
  web,	
  
que	
  podem	
  ser	
  uZlizados	
  na	
  criação	
  de	
  páginas	
  HTML:	
  
•  Adobe	
  Dreamweaver,	
  NetBeans,	
  Aptana	
  Studio...	
  
•  O	
   ideal	
   para	
   aprender	
   os	
   fundamentos	
   de	
   HTML	
   é	
   uZlizar	
  
editores	
  de	
  texto	
  (não	
  tão)	
  simples.	
  
•  Não	
   é	
   necessário	
   um	
   servidor	
   web,	
   já	
   que	
   os	
   navegadores	
  
abrem	
   arquivos	
   .html	
   diretamente	
   de	
   diretórios	
   locais	
   do	
  
computador.	
  
10	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
DECLARAÇÕES	
  <!DOCTYPE>	
   11	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Declarações	
  <!DOCTYPE>	
  
•  A	
   declaração	
   <!DOCTYPE>	
   ajuda	
   o	
   navegador	
   a	
   exibir	
   corretamente	
   o	
  
conteúdo	
  de	
  uma	
  página;	
  
•  Existem	
  múlZplas	
  versões	
  de	
  HTML	
  ainda	
  vigentes	
  na	
  Web;	
  
•  Os	
  navegadores	
  só	
  conseguem	
  exibir	
  uma	
  página	
  de	
  maneira	
  totalmente	
  correta	
  
se	
  eles	
  souberem	
  exatamente	
  o	
  Zpo	
  e	
  a	
  versão	
  de	
  HTML	
  usada	
  na	
  codiﬁcação.	
  
•  Devem	
  ser	
  inseridas	
  no	
  início	
  do	
  documento,	
  antes	
  da	
  tag	
  HTML.	
  
12	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
<!DOCTYPE html> �
<html> �
<body> �
"�
"<p>Minha primeira pagina Web!</p> �
�
</body> �
</html> �
Declarações	
  <!DOCTYPE>	
  
•  Declarações	
  mais	
  comuns:	
  
•  HTML5:	
  
•  HTML	
  4.01:	
  
•  XHTML	
  1.0:	
  
•  Mais	
  informações:	
  hxp://www.w3schools.com/tags/tag_doctype.asp	
  
13	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
<!DOCTYPE html> �
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"�
"http://www.w3.org/TR/html4/loose.dtd"> �
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"�
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> �
ELEMENTOS	
  HTML	
   14	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Sintaxe	
  de	
  um	
  elemento	
  HTML	
  
•  Um	
  elemento	
  HTML	
  é	
  o	
  que	
  está	
   conZdo	
  entre	
   uma	
   tag	
   de	
  
início	
  e	
  a	
  respecZva	
  tag	
  de	
  encerramento	
  (inclusive	
  as	
  tags);	
  
•  Sintaxe:	
  
•  Inicia-‐se	
  com	
  a	
  tag	
  de	
  início	
  /	
  tagde	
  abertura;	
  
•  Encerra-‐se	
  com	
  a	
  tag	
  de	
  encerramento	
  /	
  tag	
  de	
  fechamento;	
  
•  Tudo	
  que	
  está	
  conZdo	
  entre	
  as	
  tags	
  de	
  abertura	
  e	
  de	
  fechamento	
  
corresponde	
  ao	
  conteúdo	
  do	
  elemento;	
  
•  Alguns	
   elementos	
   HTML	
   têm	
   conteúdo	
   vazio	
   (são	
   fechados	
   na	
  
própria	
  tag	
  de	
  abertura);	
  
•  Ex.:	
  <br	
  />:	
  deﬁne	
  uma	
  quebra	
  de	
  linha.	
   15	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Sintaxe	
  de	
  um	
  elemento	
  HTML	
  
•  A	
  maioria	
  dos	
  elementos	
  HTML	
  pode	
  conter	
  atributos:	
  
16	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Tag	
  de	
  Início	
   Conteúdo	
   Tag	
  de	
  Fechamento	
  
<p>	
   Isto	
  é	
  um	
  parágrafo	
   </p>	
  
<br	
  />	
  
<a	
  href=“ind.htm”>	
   Isto	
  é	
  um	
  link	
   <a/>	
  
Isto	
  é	
  um	
  atributo	
  do	
  elemento	
  link.	
  
Elementos	
  HTML	
  aninhados	
  
•  A	
  maioria	
  dos	
  elementos	
  HTML	
  pode	
   ser	
  aninhada	
   (nested),	
  
ou	
  seja,	
  pode	
  conter	
  outros	
  elementos	
  HTML;	
  
•  Documentos	
  HTML	
  são	
  elementos	
  HTML	
  aninhados.	
  
17	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
<!DOCTYPE html> �
<html> �
<body> �
"�
"<p>Minha primeira pagina Web!</p> �
�
</body> �
</html> �
•  O	
  documento	
  HTML	
  acima	
  contem	
  três	
  elementos:	
  quais	
  são	
  eles?	
  
Tags	
  de	
  fechamento	
  
•  É	
  muito	
  importante	
  não	
  se	
  esquecer	
  das	
  tags	
  de	
  fechamento!	
  
•  Alguns	
   elementos	
   HTML	
   podem	
   até	
   ser	
   exibidos	
   corretamente	
  
sem	
  a	
  tag	
  de	
  encerramento:	
  
•  Ex.:	
  <p>Isto	
  é	
  um	
  parágrafo.	
  
•  Não	
   se	
   deve	
   conﬁar	
   neste	
   comportamento,	
   já	
   que	
   muitos	
  
elementos	
   HTML	
   podem	
   levar	
   a	
   comportamentos	
   imprevisíveis	
  
caso	
  não	
  contenham	
  a	
  tag	
  de	
  fechamento.	
  
•  Em	
  xHTML,	
  todos	
  os	
  elementos	
  devem	
  ser	
  fechados.	
  
•  Sugestão:	
  SEMPRE	
  use	
  tags	
  de	
  fechamento.	
  
18	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Capitalização	
  de	
  Tags	
  HTML	
  
•  Tags	
   HTML	
   podem	
   ser	
   escritas	
   tanto	
   em	
   letras	
   maiúsculas	
  
quanto	
  em	
  letras	
  minúsculas;	
  
•  Ex.:	
  
•  <P>Este	
  é	
  um	
  parágrafo.</P>	
  
•  <p>Este	
  é	
  um	
  parágrafo.</p>	
  
•  World	
  Wide	
  Web	
  Consor:um	
  (W3C):	
  
•  Recomenda	
  o	
  uso	
  de	
  letras	
  minúsculas	
  em	
  HTML4	
  e	
  HTML5;	
  
•  Exige	
  o	
  uso	
  de	
  letras	
  minúsculas	
  em	
  xHTML.	
   19	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
ATRIBUTOS	
  DE	
  ELEMENTOS	
  HTML	
   20	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Atributos	
  de	
  elementos	
  HTML	
  
•  Elementos	
  HTML	
  podem	
  possuir	
  atributos:	
  
•  Provêm	
  informações	
  adicionais	
  sobre	
  um	
  dado	
  elemento;	
  
•  Sempre	
  são	
  especiﬁcados	
  na	
  tag	
  de	
  abertura;	
  
•  São	
  deﬁnidos	
  em	
  pares	
  do	
  Zpo:	
  nome=”valor”;	
  
•  Ex.:	
  <a	
  href="hKp://www.google.com">Isto	
  é	
  um	
  link</a>	
  
•  Atributos	
  padrão	
  para	
  a	
  maioria	
  dos	
  elementos	
  HTML:	
  
21	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Atributo	
   Valor	
   Descrição	
  
class	
   nome_de_classe	
   Especiﬁca	
  um	
  nome_de_classe	
  para	
  um	
  elemento	
  	
  
id	
   id	
   Especiﬁca	
  uma	
  id	
  única	
  para	
  um	
  elemento	
  	
  
style	
   deﬁnição_es:lo	
   Especiﬁca	
  um	
  esZlo	
  para	
  um	
  elemento	
  	
  
Ptle	
   texto_dica	
   Especiﬁca	
  informações	
  extras	
  para	
  um	
  elemento,	
  
que	
  serão	
  exibidas	
  via	
  tool:p	
  text.	
  	
  
Atributos	
  de	
  elementos	
  HTML	
  
•  A	
   especiﬁcação	
   HTML4	
   determina	
   que	
   os	
   valores	
   dos	
  
atributos	
  sempre	
  devem	
  estar	
  entre	
  aspas;	
  
•  Na	
  maioria	
  das	
  vezes	
  pode-‐se	
  uZlizar	
  tanto	
  aspas	
  duplas	
  quanto	
  
aspas	
  simples:	
  
•  Ex.:	
  <a	
  href=’hxp://www.google.com’>	
  Isto	
  é	
  um	
  link</a>	
  
•  Ex.:	
  <a	
  href="hxp://www.google.com">Isto	
  é	
  um	
  link</a>	
  
•  Em	
  situações	
  em	
  que	
  o	
  próprio	
  valor	
  do	
  atributo	
  contém	
  aspas,	
  
aspas	
  simples	
  devem	
  ser	
  uZlizadas:	
  
•  Ex.:	
  name=’John	
  “Shotgun”	
  Nelson’	
  
•  É	
  altamente	
  recomendável	
  usar	
  aspas	
  também	
  em	
  HTML5.	
  
22	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
ALGUNS	
  ELEMENTOS	
  HTML	
   23	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Parágrafos	
  
•  Parágrafos	
  são	
  deﬁnidos	
  com	
  a	
  tag	
  <p>;	
  
•  Navegadores	
   automaZcamente	
   inserem	
   uma	
   linha	
   vazia	
  
antes	
  e	
  depois	
  de	
  cada	
  parágrafo.	
  
24	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Quebras	
  de	
  linha	
  
•  Para	
   inserir	
   uma	
   quebra	
   de	
   linha	
   sem	
   começar	
   um	
   novo	
  
parágrafo,	
  usa-‐se	
  a	
  tag	
  HTML	
  <br	
  />;	
  
25	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Títulos	
  (headings)	
  
•  São	
  usados	
  para	
  deﬁnir	
  diferentes	
  níveis	
  de	
  tulos	
  em	
  HTML:	
  
•  Tags:	
  (máximo	
  6	
  níveis)	
  
•  <h1></h1>	
  
•  <h2></h2>	
  
•  <h3></h3>	
  	
  
•  <h4></h4>	
  
•  <h5></h5>	
  
•  	
  <h6></h6>	
  
•  Tags	
   de	
   tulo	
   servem	
   para	
   mostrar	
   a	
   estrutura	
   de	
   um	
  
documento	
  HTML;	
  
•  Mecanismos	
   de	
   busca	
   que	
   varrem	
   documentos	
   HTML	
   usam	
  
estas	
  tags	
  para	
  este	
  ﬁm.	
  
26	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Títulos	
  (headings)	
  
•  Não	
   se	
   deve	
   usar	
   as	
   tags	
   de	
   tulo	
   para	
   escrever	
   texto	
   em	
  
negrito	
  ou	
  em	
  fonte	
  maior!	
  
•  	
  Existem	
  tags	
  apropriadas	
  para	
  isso;	
  
27	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Linhas	
  
•  A	
   tag	
   <hr	
   />	
   cria	
   uma	
   linha	
   horizontal	
   em	
   um	
   documento	
  
HTML;	
  
•  Note	
  que	
  <hr	
  />	
  é	
  um	
  elemento	
  vazio.	
   28	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Comentários	
  
•  Também	
   é	
   possívelinserir	
   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:	
  
•  <!-‐-‐	
  Isto	
  é	
  um	
  comentário	
  -‐-‐>	
  
•  Note	
  que	
  a	
  exclamação	
  deve	
  ser	
  uZlizada	
  apenas	
  após	
  o	
  “<”	
  de	
  
abertura.	
  
29	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Formatação	
  de	
  Texto	
  
•  HTML	
  usa	
  uma	
  série	
  de	
  tags	
  para	
  formatar	
  o	
  texto	
  exibido	
  em	
  
uma	
  página;	
  
30	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Formatação	
  de	
  Texto	
  
•  Geralmente,	
   <strong>	
   é	
   renderizado	
   como	
   negrito	
   e	
   <em>	
  
como	
  itálico;	
  
•  No	
  entanto,	
  existem	
  diferenças	
  conceituais:	
  
•  Ao	
   uZlizar	
   <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.	
  
31	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Formatação	
  de	
  Texto	
  
•  Principais	
  tags	
  de	
  formatação:	
  
32	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  Tag	
   Descrição	
  
<b>	
   Texto	
  em	
  negrito	
  
<big>	
   Texto	
  grande	
  
<em>	
   Texto	
  enfaZzado	
  
<i>	
   Texto	
  em	
  itálico	
  
<small>	
   Texto	
  pequeno	
  
<strong>	
   Texto	
  forte	
  
<sub>	
   Texto	
  subscrito	
  
<sup>	
   Texto	
  sobrescrito	
  
<ins>	
   Texto	
  “inserido”	
  
<del>	
   Texto	
  “apagado”	
  
Formatação	
  de	
  Texto	
  
•  Em	
  HTML	
  4.01	
  existem	
   tags	
  para	
   formatação	
  de	
  cores,	
  Zpos	
  
de	
   fonte	
   do	
   texto,	
   etc.,	
   mas	
   tais	
   tags	
   são	
   consideradas	
  
deprecated	
  e	
  não	
  devem	
  ser	
  uZlizadas;	
  
•  Formatação	
   mais	
   elaborada	
   deve	
   ser	
   feita	
   uZlizando-‐se	
   CSS	
  
(Cascade	
  Style	
  Sheets).	
  
•  Para	
  outras	
  tags	
  de	
  formatação,	
  consulte	
  [1,2].	
   33	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Hyperlinks	
  
•  Hyperlinks	
  (ou	
  apenas	
  links)	
  estão	
  presentes	
  em	
  praZcamente	
  
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.	
  
34	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Hyperlinks	
  
•  Em	
  HTML,	
  hyperlinks	
  são	
  criados	
  através	
  da	
  tag	
  <a>,	
  que	
  pode	
  
ser	
  uZlizada	
  de	
  duas	
  formas:	
  
•  Para	
  criar	
  um	
   link	
  para	
  outro	
  documento,	
  indicado	
  pelo	
  atributo	
  
href;	
  
•  Para	
  apontar	
  para	
  um	
  marcador	
  dentro	
  de	
  um	
  documento,	
  com	
  
o	
  atributo	
  name	
  (ou	
  id,	
  em	
  HTML5).	
  
•  O	
  atributo	
  name	
   (id)	
  especíﬁca	
  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.	
  
35	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Hyperlinks	
  
•  Sintaxe	
  de	
  um	
  link	
  HTML:	
  
•  <a	
  href="url">Texto	
  do	
  Link</a>	
  
36	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Hyperlinks	
  
•  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;	
  
37	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Hyperlinks	
  
•  Exemplos	
  de	
  uso	
  combinado	
  com	
  name	
  (ou	
  id	
  em	
  HTML	
  5):	
  
1.  Criar	
  uma	
  âncora	
  em	
  um	
  documento	
  HTML:	
  
•  <a	
  name="sec_x">Seção	
  X</a>	
  
2.  Criar	
   um	
   link	
   para	
   a	
   “Seção	
   X”	
   dentro	
   do	
  mesmo	
  documento	
  
HTML:	
  
•  <a	
  href="#sec_x">Visite	
  a	
  Seção	
  X!</a>	
  
2.  Criar	
   um	
   link	
   para	
   a	
   “Seção	
   X”	
   dentro	
   de	
   outro	
   documento	
  
HTML:	
  
•  <a	
  href="hKp://www.unicamp.br/ex.htm#sec_x">Seção	
  X</a>	
  
38	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Imagens	
  
•  Em	
  HTML,	
  imagens	
  são	
  inseridas	
  com	
  a	
  tag	
  <img>:	
  
•  <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:	
  
•  <img	
  src="url"	
  alt="algum_texto"/>	
  
•  “url”	
   deve	
   apontar	
   para	
   o	
   local	
   de	
   armazenamento	
   da	
  
imagem:	
  
•  Pode	
  ser	
  um	
  diretório	
  local	
  no	
  próprio	
  servidor	
  web;	
  ou	
  
•  Uma	
  imagem	
  armazenada	
  remotamente.	
  
39	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Imagens	
  
40	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
•  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:	
  
•  Conexão	
  lenta;	
  
•  Erro	
  no	
  atributo	
  “src”;	
  
•  O	
  usuário	
  uZliza	
  um	
  leitor	
  de	
  tela;	
  
Imagens	
  
41	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
•  As	
   dimensões	
   de	
   uma	
   imagem	
   em	
   um	
   documento	
   HTML	
  
podem	
  ser	
  deﬁnidas	
  através	
  dos	
  atributos	
  “height”(altura)	
  e	
  
“width”	
  (largura):	
  
•  Os	
  valores	
  destes	
  atributos	
  devem	
  ser	
  dados	
  em	
  pixels;	
  
•  É	
   importante	
   deﬁnir	
   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;	
  
Imagens	
  
42	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Imagens	
  
•  O	
  uso	
  de	
  imagens	
  em	
  um	
  documento	
  HTML	
  sempre	
  deve	
  ser	
  
feito	
  com	
  parcimônia:	
  
•  Muitas	
   imagens	
   podem	
   deixar	
   o	
   carregamento	
   do	
   documento	
  
lento	
  e	
  comprometer	
  a	
  experiência	
  do	
  usuário;	
  
•  Se	
  um	
  documento	
  HTML	
  conZver	
  10	
  imagens,	
  são	
  necessárias	
  11	
  
requisições	
  ao	
  servidor.	
  
•  Ex.:	
  (como	
  não	
  fazer)	
  
•  hxp://www.texiles.com/underconstrucZon/	
  
•  Recomenda-‐se	
  que	
  todas	
  as	
  imagens	
  de	
  um	
  documento	
  HTML	
  
estejam	
   no	
   mesmo	
   local	
   que	
   o	
   documento	
   e	
   não	
   em	
  
servidores	
  remotos.	
  
•  Evita-‐se	
  a	
  ocorrência	
  de	
  links	
  quebrados.	
  	
  
43	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
EXERCÍCIO	
  1	
   44	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
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.	
  
45	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
ALGUNS	
  ELEMENTOS	
  HTML	
  [CONT’D]	
   46	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Tabelas	
  
•  Em	
   documentos	
   HTML,	
   tabelas	
   são	
   deﬁnidas	
   com	
   a	
   tag	
  
<table>:	
  
•  Tabelas	
  são	
  divididas	
  em	
  linhas	
  (rows,	
  com	
  a	
  tag	
  <tr>);	
  
•  Cada	
   linha	
   é	
   dividida	
   em	
   células	
   (tag	
   <td>,	
   de	
   table	
   data),	
   que	
  
armazenam	
  os	
  dados	
  da	
  tabela.	
  
•  O	
   conteúdo	
   de	
   uma	
   tag	
   <td>	
   pode	
   ser	
   texto,	
   links,	
   imagens,	
  
listas,	
  formulários,	
  outras	
  tabelas,	
  etc.	
  
47	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Tabelas	
  
•  Caso	
  não	
  seja	
  especiﬁcado	
  o	
  atributo	
  “border”,	
  a	
   tabela	
  será	
  
exibida	
  sem	
  bordas;	
  
•  O	
  valor	
  do	
  atributo	
  “border”	
  corresponde	
  ao	
  tamanho	
  da	
  borda	
  
da	
  tabela	
  em	
  pixels.	
  
48	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Tabelas	
  
•  Para	
  deﬁnir	
  o	
  cabeçalho	
  de	
  cada	
  coluna	
  da	
  tabela,	
  uZliza-‐se	
  a	
  
tag	
  <th>	
  (table	
  header):	
  
49	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Legenda	
  da	
  tabela!	
  
Listas	
  
•  HTML	
   prevê	
   a	
   criação	
   de	
   listas,	
   sendo	
   os	
   dois	
   Zpos	
   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	
  é	
   idenZﬁcado	
  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	
   idenZﬁcado	
  pela	
  
tag	
  <li>;	
  
•  Os	
   elementos	
   de	
   listas	
   HTML	
   podem	
   conter,	
   além	
   de	
   texto,	
  
quebras	
  de	
  linhas,	
  imagens,	
  links,	
  outras	
  listas,	
  etc.	
   50	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Listas	
  
51	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
iFrames	
  
•  iFrames	
   permitem	
   a	
   exibição	
   de	
   páginas	
   web	
   dentro	
   de	
  
páginas	
  web.	
  
•  iFrames	
  são	
  deﬁnidos	
  por:	
  	
  
•  <iframe	
  src="URL"></iframe>	
  
•  A	
  “URL”	
  aponta	
  para	
  o	
  local	
  da	
  página	
  que	
  se	
  deseja	
  exibir.	
  
•  Pode-‐se	
   uZlizar	
   os	
   atributos	
   “width”	
   e	
   “height”	
   para	
   deﬁnir	
   o	
  
tamanho	
  do	
  iFrame:	
  
•  Em	
  pixels	
  (HTML	
  4.01	
  e	
  HTML	
  5);	
  
52	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
iFrames	
  
53	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
iFrames	
  
•  iFrames	
  também	
  podem	
  ser	
  usados	
  para	
  exibir	
  o	
  conteúdo	
  de	
  
links:	
  
•  Para	
   isso,	
   o	
   atributo	
   “target”	
   da	
   tag	
   <a>	
   deve	
   se	
   referir	
   ao	
  
atributo	
  “name”	
  do	
  iFrame;	
  
54	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
EXERCÍCIO	
  2	
   55	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Exercício	
  2	
  
•  Repita	
  o	
  Exercício	
  1	
  com	
  as	
  seguintes	
  modiﬁcações;	
  
•  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	
   deﬁnir	
   a	
  
disposição)	
  
•  Insira	
  um	
  iFrame	
  após	
  o	
  índice;	
  
•  Quando	
  o	
  usuário	
  clicar	
  no	
   thumbnail	
  de	
  uma	
  cidade,	
  no	
   Índice	
  
da	
  página,	
  a	
  respecZva	
  página	
  do	
  WikiTravel	
  deve	
  ser	
  exibida	
  no	
  
iFrame	
  inserido.	
  	
  
56	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
LAYOUTS	
  EM	
  HTML	
   57	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Layouts	
  em	
  HTML	
  
•  O	
   layout	
   de	
   uma	
  página	
  Web	
   é	
  muito	
   importante,	
   uma	
   vez	
   que	
   a	
  
aparência	
  deum	
  site	
  é	
  seu	
  principal	
  “cartão	
  de	
  visitas”;	
  
•  Geralmente,	
   o	
   conteúdo	
   de	
   um	
   website	
   é	
   disposto	
   em	
   múlZplas	
  
colunas,	
  para	
  que	
  seu	
  conteúdo	
  tenha	
  uma	
  formatação	
  semelhante	
  
à	
  apresentada	
  por	
  jornais	
  e	
  revistas.	
  
•  MúlZplas	
  colunas	
  são	
  criadas	
  com	
  as	
  tags:	
  
•  <table>:	
  forma	
  mais	
  simples;	
  
•  <div>:	
  são	
  elementos	
  que	
  permitem	
  agrupar	
  outros	
  elementos	
  
•  Permitem	
  a	
  criação	
  de	
  divisões	
  ou	
  seções	
  em	
  um	
  documento	
  HTML;	
  
•  No	
  caso	
  de	
  deﬁnição	
  de	
   layouts,	
  agrupam	
  outros	
  elementos	
  HTML	
  que	
  
são	
  formatados	
  via	
  CSS.	
  
•  Formatação	
  adicional	
  geralmente	
  é	
  feita	
  via	
  CSS.	
  
58	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Layouts	
  usando	
  <table>	
  
59	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Layouts	
  usando	
  <table>	
  
60	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Layouts	
  usando	
  <div>	
  
61	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Layouts	
  usando	
  <div>	
  
62	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
EXERCÍCIO	
  3	
   63	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Exercício	
  3	
  
•  Refaça	
   o	
   exercício	
   2	
   organizando	
   os	
   campos	
   em	
   um	
   layout	
  
com:	
  
•  Uma	
  barra	
  superior	
  de	
  tulo;	
  
•  O	
   índice	
   em	
  uma	
   barra	
   lateral	
   (modiﬁque	
   a	
   tabela	
   para	
   que	
   os	
  
thumbnails	
  ﬁquem	
  dispostos	
  verZcalmente	
  agora);	
  
•  E	
  o	
  iFrame	
  em	
  um	
  campo	
  à	
  direita	
  do	
  índice.	
  
•  UZlize	
  elementos	
  div.	
  
64	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
ELEMENTOS	
  HEAD	
   65	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
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>).	
  
66	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Elemento	
  <head>	
  
•  Os	
  elementos	
  conZdos	
  no	
  head	
  podem	
  ser:	
  
•  Título	
  da	
  página	
  (tag	
  <Ptle>):	
  
•  Deﬁne	
  o	
  tulo	
  do	
  documento:	
  
•  Exibido	
  na	
  barra	
  de	
  tulo	
  do	
  navegador;	
  
•  Sugerido	
  para	
  o	
  usuário	
  ao	
  adicionar	
  a	
  página	
  aos	
  favoritos;	
  
•  Exibido	
  em	
  resultados	
  de	
  mecanismos	
  de	
  busca.	
  
67	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Elemento	
  <head>	
  
•  Os	
  elementos	
  conZdos	
  no	
  head	
  podem	
  ser:	
  
•  Scripts	
  (tag	
  <script>):	
  
•  Usado	
  para	
  deﬁnir	
  scripts	
  de	
  execução	
  do	
  lado	
  do	
  cliente;	
  
•  Elementos	
  de	
  esZlo	
  (tag	
  <style>):	
  
•  Usados	
  para	
  deﬁnir	
  esZlos	
  de	
   formatação	
  que	
  devem	
  ser	
  aplicados	
  
aos	
  elementos	
  do	
  documento	
  HTML.	
  
68	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Elemento	
  <head>	
  
•  Os	
  elementos	
  conZdos	
  no	
  head	
  podem	
  ser:	
  
•  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	
  so2wares;	
  
•  Geralmente	
   são	
   usados	
   para	
   inserir	
   uma	
   descrição	
   do	
   documento,	
  
palavras	
  chave,	
  autores,	
  úlZma	
  data	
  de	
  modiﬁcação,	
  etc.	
  
69	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Elemento	
  <head>	
  
•  Os	
  elementos	
  conZdos	
  no	
  head	
  podem	
  ser:	
  
•  Elemento	
  base	
  (tag	
  <base>):	
  
•  Deﬁne	
  o	
  diretório	
  ou	
  servidor	
  base	
  para	
  todos	
  os	
  links	
  uZlizados	
  na	
  
página.	
  
•  Elemento	
  link	
  (tag	
  <link>):	
  
•  Usado	
  para	
  relacionar	
  o	
  documento	
  HTML	
  com	
  recursos	
  externos;	
  
•  Geralmente	
  é	
  usado	
  para	
  incorporar	
  páginas	
  de	
  esZlo	
  (CSS).	
  
70	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
XHTML	
   71	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
XHTML	
  
•  XHTML	
  é	
  uma	
  versão	
  mais	
  estrita	
  e	
  limpa	
  de	
  HTML;	
  
•  XHTML	
  =	
  EXtensible	
  HyperText	
  Markup	
  Language;	
  
•  É	
  quase	
  idênZca	
  a	
  HTML	
  4.01;	
  
•  É	
  basicamente	
  uma	
  redeﬁniçã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;	
  
•  Existem	
   navegadores	
   espalhados	
   pelos	
   mais	
   diferentes	
   Zpos	
   de	
  
disposiZvos;	
  
•  DisposiZvos	
  móveis	
   geralmente	
   não	
   têm	
   capacidade	
   de	
   interpretar	
  
documentos	
  mal	
  escritos.	
  
72	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
XHTML	
  
73	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
•  Quais	
  os	
  problemas	
  do	
  código	
  acima?	
  
XHTML	
  
•  Principais	
  diferenças	
  em	
  relação	
  a	
  HTML:	
  
•  Elementos	
  XHTML	
  devem	
  estar	
  propriamente	
  aninhados;	
  
•  Muitas	
  vezes	
  o	
  aninhamento	
  de	
  elementos	
  em	
  documentos	
  HTML	
  é	
  
feito	
  de	
  maneira	
  errada:	
  
•  Para	
  atender	
  ao	
  padrão	
  XHTML,	
  o	
  código	
  acima	
  deveria	
  ser:	
  
74	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
XHTML	
  
•  Principais	
  diferenças	
  em	
  relação	
  a	
  HTML:	
  
•  Elementos	
  XHTML	
  devem	
  sempre	
  ser	
  fechados;	
  
•  Isto	
  é	
  válido	
  inclusive	
  para	
  elementos	
  vazios:	
  
75	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
ebXHTML	
  
•  Principais	
  diferenças	
  em	
  relação	
  a	
  HTML:	
  
•  As	
  tags	
  de	
  XHTML	
  devem	
  sempre	
  ser	
  escritas	
  em	
  letras	
  minúsculas;	
  
•  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;	
  
•  Ou	
  seja,	
   todos	
   os	
  elementos	
  XHTML	
  devem	
  estar	
   aninhados	
  dentro	
  do	
  
elemento	
  raiz	
  <html>;	
  
•  O	
  elemento	
  <html>:	
  
•  Este	
  deve	
  ter	
  o	
  atributo	
  “xmlns”	
  deﬁnido	
  com	
  a	
  especiﬁcação	
  no	
  espaço	
  
de	
  nomes	
  de	
  XML	
  
•  <html	
  xmlns=hxp://www.w3.org/1999/xhtml>	
  
76	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
XHTML	
  
•  Principais	
  diferenças	
  em	
  relação	
  a	
  HTML:	
  
•  Alguns	
  elementos	
  são	
  obrigatórios:	
  
•  O	
  elemento	
  <html>;	
  
•  O	
  elemento	
  <head>;	
  
•  Deve	
  conter	
  o	
  elemento	
  <Ptle>;	
  
•  O	
  elemento	
  <body>.	
  
•  Deve	
  conter	
  uma	
  declaração	
  DOCTYPE	
  apropriada:	
  
77	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
XHTML	
  
•  É	
   possível	
   veriﬁcar	
   se	
   um	
   documento	
   segue	
   a	
   especiﬁcação	
  
XHTML	
  no	
  site:	
  
•  hxp://validator.w3.org/	
  
78	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
EXERCÍCIO	
  4	
   79	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
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	
  	
  
Transi:onal.	
  	
  
•  Faça	
  a	
  validação	
  de	
  todos	
  eles	
  no	
  site	
  da	
  W3C.	
  
•  Obs.:	
  Como	
  informar	
  codiﬁcação	
  de	
  caracteres	
  em	
  HTML	
  
hxp://www.w3.org/InternaZonal/quesZons/qa-‐html-‐encoding-‐declaraZons	
  
80	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
REFERÊNCIAS	
   81	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb
	
  
Referências	
  
82	
  
•  [1]	
  W3Schools	
  HTML	
  Tutorial:	
  
	
  hxp://w3schools.com/html/default.asp	
  
•  [2]	
  W3C	
  HTML	
  4.01	
  SpeciﬁcaZon:	
  	
  
hxp://www.w3.org/TR/html4/	
  
•  [3]	
  W3C	
  HTML	
  5	
  SpeciﬁcaZon:	
  	
  
hxp://www.w3.org/TR/html5/	
  
•  [4]	
   XHTML™	
  1.0	
   The	
   Extensible	
  HyperText	
  Markup	
   Language	
  
(Second	
  EdiZon):	
  
hxp://www.w3.org/TR/xhtml1/	
  
SI
40
1	
  
–	
  
Pr
og
ra
m
aç
ão
	
  p
ar
a	
  
a	
  
W
eb