Ferramentas Para Sistemas Web

Prévia do material em texto

)HUUDPHQWDV�SDUD�6LVWHPD�:(%
Autoria: Virgínia Mara Cardoso
Tema 01
Evolução da internet e ferramentas para projeto e construção de 
websites: estrutura básica da linguagem HTML
7HPD���
Evolução da internet e ferramentas para projeto e construção de websites: estrutura básica da linguagem HTML
Autoria: Virgínia Mara Cardoso
Como citar esse documento:
CARDOSO, Virgínia Mara. Ferramentas para Sistema WEB: Evolução da internet e ferramentas para projeto e construção de websites: estrutura 
básica da linguagem HTML. Caderno de Atividades. Valinhos: Anhanguera Educacional, 2014.
Índice
‹������$QKDQJXHUD�(GXFDFLRQDO�� 3URLELGD� D� UHSURGXomR� ¿QDO� RX� SDUFLDO� SRU� TXDOTXHU�PHLR� GH� LPSUHVVmR�� HP� IRUPD� LGrQWLFD�� UHVXPLGD� RX�PRGL¿FDGD� HP� OtQJXD�
SRUWXJXHVD�RX�TXDOTXHU�RXWUR�LGLRPD�
Pág. 21
Pág. 22 Pág. 23
Pág. 21
Pág. 19Pág. 18
ACOMPANHENAWEB
Pág. 3
CONVITEÀLEITURA
Pág. 3
PORDENTRODOTEMA
�
Evolução da internet e ferramentas para projeto e construção de websites: estrutura básica 
da linguagem HTML
Evolução da internet
A evolução da comunicação permite e facilita o acesso às notícias e acontecimentos do mundo. Nos dias atuais, 
convivemos com a disseminação da informação com tanta facilidade que nem notamos a tecnologia que está nos 
auxiliando. Enviamos e-mails, conversamos, trocamos fotos e vídeos com grupos de amigos, às vezes utilizando 
telefones celulares, outras vezes recorrendo a notebooks, tablets, dentre outros equipamentos. Se desejamos viajar, 
logo estaremos com o destino conhecido através de imagens e já poderemos fazer a reserva do hotel. Lidamos com as 
A leitura deste tema possibilitará a você conhecer um assunto de muito interesse nos dias atuais, que são as 
ferramentas para um sistema web. Para iniciar, vamos entender melhor a evolução da Internet, esta grande rede das redes 
que movimenta as informações do mundo todo e nos dá acesso a toda hora. Temos a Internet, mas como podemos ter 
WDQWD�LQIRUPDomR�QHVWD�UHGH��RX�PHOKRU��FRPR�HVVHV�GRFXPHQWRV�¿FDP�LQVHULGRV"�&RPR�GHYHP�VHU�HVWHV�GRFXPHQWRV"�
+i� XPD�PDQHLUD� HVSHFLDO� SDUD�PRQWDUPRV� DV� SiJLQDV� TXH� HQFRQWUDPRV� TXDQGR� QDYHJDPRV"�(VWDV� TXHVW}HV� VmR�
tratadas nesse tema e, além disso, vamos aprender também a colocar um documento na web se desejarmos. Mas, para 
isso, iniciaremos aqui a discorrer sobre a linguagem HTML (HyperText Markup Language), mostrando sua base e suas 
versões até o (X)HTML (Extensible HyperText Markup Language���H�WDPEpP�VREUH�R�&66��Cascade Style Sheets), que 
YHLR�SDUD�DJUHJDU�IXQFLRQDOLGDGHV�H�SHUPLWLU�R�GHVHQYROYLPHQWR�GH�SiJLQDV�PDLV�VR¿VWLFDGDV�HP�WHUPRV�GH�design e 
estruturas de distribuição de elementos na tela. É, ainda, abordado o discurso sobre a estrutura básica do HTML, para 
TXH�SRVVDPRV�FRPHoDU�D�DSUHQGHU�D�GHVHQYROYHU�D�QRVVD�SiJLQD��&RQFOXLQGR�R�DVVXQWR��QHVWH�WHPD�p�PRVWUDGR�XP�
pequeno exemplo de como iniciar o desenvolvimento de uma página web.
CONVITEÀLEITURA
pequeno exemplo de como iniciar o desenvolvimento de uma página web.
PORDENTRODOTEMA
�
contas mensais e com a conta bancária dentro de nossas casas. Se precisamos de livros, entramos virtualmente em 
várias bibliotecas de várias partes do planeta. Temos acesso a diversas tarefas, bem como a entretenimentos, tudo isso 
porque temos uma conexão com o mundo através de um sistema de comunicação denominado Internet. Se buscarmos 
um conceito, encontraremos que essa é a rede das redes.
Para conceituar melhor a palavra, temos que “nets” são redes e que “inter” quer dizer que há interação; neste caso, trata-
se de redes ligadas, conectadas entre si. Sendo assim, a Internet consiste em várias redes interligadas, com serviços 
comuns.
Essa interconexão, ou seja, a Internet, teve início em 1969. A história nos descreve que na década de 1960 ainda não 
havia redes e tínhamos apenas computadores sem ligação uns com os outros, que trabalhavam isoladamente. Depois de 
muitas pesquisas surgiu a ideia de conectarem computadores para compartilharem dados. De acordo com Mileto (2014, 
p. 16), a Internet foi criada por Tim Berners-Lee quando ele realizava pesquisas para interligar e compartilhar documentos 
entre os pesquisadores. Foi somente em 1969 que a ARPA (Advanced Research Projects Agency) do departamento de 
defesa dos Estados Unidos apresentou a ARPANET, que consistia em uma pequena rede de computadores conectados. 
A Internet é constituída por redes locais e utiliza serviços de provedores de acesso à Internet. A Internet não é de 
responsabilidade governamental, mas é atuada por empresas privadas. Seus provedores podem ser internacionais, 
nacionais, regionais ou locais.
&RQIRUPH�D� GH¿QLomR� GH�&DVWUR� �������� D� ,QWHUQHW� UH~QH� FRPSXWDGRUHV� FRQHFWDGRV� XQV� FRP�RV� RXWURV��4XDQWR� jV�
conexões, algumas pessoas têm internet banda larga em alta velocidade por 24 horas diárias, através de DSL (Digital 
Subscriber Line), cabo ou satélite, e outras utilizam o modem para conectarem seus computadores pessoais, mas por 
um determinado período de tempo. O que é relevante é que todos podem estar, de uma maneira ou de outra, conectados 
à Internet, obtendo informações do mundo todo.
A Web 
Neste contexto de Internet, sabemos que temos acesso a diversas informações, mas podemos questionar: visto 
TXH�VmR�YiULRV�WLSRV�GH�GRFXPHQWRV��FRPR�WRGRV�VmR�LQVHULGRV�H�FRPR�FRQVHJXLPRV�FRP�WDQWD�IDFLOLGDGH�FRQVXOWi�ORV"�
Neste caso, temos a World Wide Web – ou WWW – que se trata de um sistema de documentos em hipermídia que são 
LQWHUOLJDGRV�H�H[HFXWDGRV�QD�,QWHUQHW��3DUD�&DVWUR���������D�World Wide Web pode transformar milhões de documentos 
para que possam ser acessados pela Internet, mas esses documentos são escritos, de alguma forma, utilizando o HTML 
(HyperText Markup Language). Para acompanhar toda a evolução da Internet a Figura 1.1 mostra em síntese este 
desenvolvimento.
PORDENTRODOTEMA
�
Figura 1.1 A Evolução da Internet.
Fonte: Adaptado de Mileto (2014).
É notável que a Internet mudou os hábitos de muitas pessoas no que diz respeito à comunicação, entretenimentos, 
comportamentos e também consumos. Neste cenário, as aplicações web tiveram que acompanhar todo este 
GHVHQYROYLPHQWR�FRP�D�XWLOL]DomR�GH�PpWRGRV�H�IHUUDPHQWDV�HVSHFt¿FDV��$V�DSOLFDo}HV�ZHE�SRGHP�VHU�FODVVL¿FDGDV�GD�
seguinte maneira (MILETO, 2014):
��� 6LWH�GH�FRQWH~GR��H[LEH�R�FRQWH~GR�GH�XPD�GHWHUPLQDGD�iUHD�GH�IRUPD�OLQHDU��FRP�UHFXUVRV�GH�WDEHODV��LPDJHQV��
JUi¿FRV��GHQWUH�RXWURV��3RVVXL�QDYHJDomR�VLPSOHV�
2. Site de registro de dados ou entrada do usuário: utiliza como recurso principal formulários que são preenchidos 
pelo usuário, com dados relacionados com o objetivo do site.
PORDENTRODOTEMA
�
3. Portal: é um conjunto de páginas; links que convergem para um determinado contexto.
4. Aplicação orientada à transação: é um modelo em que o usuário envia solicitações que a aplicação processa em 
um banco de dados, retornando ao usuário a resposta.
Baseado em Mileto (2014), somente depois que é conhecido o propósito da aplicação é que se deve desenvolver os 
PRGHORV�GH�SURMHWR�H��QD�HWDSD�¿QDO��GHYH�RFRUUHU�D�FRQVWUXomR�GDV�SiJLQDV�FRP�R�XVR�GH�WHFQRORJLDV�HVSHFt¿FDV�SDUD�
ZHE��FRPR�+70/��&66��3+3��-DYDVFULSW�H�WDPEpP�IHUUDPHQWDV�HVSHFt¿FDV�SDUD�HGLomR�GH�FyGLJRV�
HTML 
'H�DFRUGR�FRP�&DVWUR���������R�+70/�p�D�DEUHYLDomR�GH�HyperText Markup Language, que quer dizer linguagem de 
marcação de hipertexto, ou seja, é a linguagem em que são escritas as páginas da web que são utilizadas e, na maioria 
das vezes, é facilmente interpretada pelo navegador. Esta linguagem apresenta duas características: o hipertexto e a 
universalidade. O hipertexto são as informações ligadas na forma de páginas com interconexões entre elas - os links, 
em que a informação na web pode ser acessada em direções diferentes. Os documentos em HTML são salvos como 
arquivos de texto de modo que qualquer computador possaler a página, não importando seu sistema operacional, ou 
seja, a web é aberta para todos, o que causa a universalidade.
Na década de 1990, o HTML ganhou várias versões e, como já dito, foi criado para ser uma linguagem independente 
de plataformas, browsers e outros meios de acesso. O HTML pode ser entendido universalmente, possibilitando a 
reutilização da informação de acordo com as limitações de cada meio de acesso. Assim, várias organizações se uniram, 
devido ao não contentamento com detalhes, e escreveram o que hoje chamamos de HTML5 (FERREIRA, 2013). A 
:�&��RUJDQL]DomR�World Wide Web Consortium, tem como objetivos trabalhar com a comunidade web a importância da 
universalidade, melhorar a aparência das páginas e evitar novos problemas.
$V�YHUV}HV�PDLV�DQWLJDV�UHXQLDP�FRQWH~GR�H�LQVWUXo}HV�GH�IRUPDWDomR�HP�XP�~QLFR�GRFXPHQWR��0DV��IRL�FULDGR�XP�QRYR�
VLVWHPD�GH�LQVWUXo}HV�GH�IRUPDWDomR��R�&66��Cascade Style Sheets), que trouxe novas funcionalidades, em particular, a 
capacidade de posicionar elementos em uma página web com maior precisão, como também criar layouts de aparência 
SUR¿VVLRQDO��&RPR�R�+70/�QmR�HUD�XPD�SODWDIRUPD�VX¿FLHQWHPHQWH�¿UPH�SDUD�TXH�VH�SXGHVVH�FRQVWUXLU�VREUH�HOD��R�
:�&�GHFLGLX�TXH�HUD�QHFHVViULD�XPD�HVWUXWXUD�PDLRU��VXUJLQGR��DVVLP��R�;0/��Extensible Markup Language). Embora 
seja muito parecido com o HTML, o XML não é somente uma linguagem para criar páginas web, mas sim uma linguagem 
SDUD�FULDU�RXWUDV�OLQJXDJHQV��1HVWH�kPELWR��KRXYH�XPD�VROXomR�LGHDO��TXDQGR�R�:�&�UHHVFUHYHX�R�+70/�HP�;0/��WHQGR�
RV�UHFXUVRV�GR�+70/�FRP�D�VLQWD[H�H�ÀH[LELOLGDGH�GR�;0/��VXUJLX�R�QRPHDGR�;+70/��6HQGR�DVVLP��R�;+70/�H�R�&66�
se tornaram uma combinação poderosa para os web designers��&$6752���������
PORDENTRODOTEMA
�
Estrutura Básica da Linguagem HTML
Se observarmos as páginas da web atualmente, poderemos dizer que estas têm se tornado mais complicadas ou 
difíceis. Porém, se olharmos através de outro foco, é perceptível que a estrutura fundamental se mantém simples desde 
R�LQtFLR��'H�DFRUGR�FRP�&DVWUR���������D�SiJLQD�ZHE�p�IHLWD�GH�WUrV�FRPSRQHQWHV�SULQFLSDLV�
��� &RQWH~GR�GH�WH[WR��VmR�RV�FDEHoDOKRV�H�SDUiJUDIRV�GD�SiJLQD�
2. Referências: são os links, imagens e animações em ÀDVK.
��� 0DUFDomR��UHJUDV�RX�LQWUXo}HV�SDUD�GHVFUHYHU�DV�UHIHUrQFLDV�H�R�FRQWH~GR�D�VHUHP�H[LELGRV�
0DV��DOpP�GHVWHV�WUrV�FRPSRQHQWHV��DV�SiJLQDV�ZHE�DEUDQJHP�LQIRUPDo}HV�VREUH�D�OLQJXDJHP�H�D�FRGL¿FDomR��RX�VHMD��
o script no qual o texto foi escrito e também o doctype.
Marcação
São as instruções de formatação, em que se incluem também detalhes sobre os relacionamentos que existem entre 
DV�SDUWHV�GRV�GRFXPHQWRV��+i�WUrV�WLSRV�GH�PDUFDomR��&$6752��������
��� (OHPHQWRV�VmR�HWLTXHWDV�TXH� LGHQWL¿FDP�H�GmR�HVWUXWXUD�jV�GLIHUHQWHV�SDUWHV�GD�SiJLQD�GD�ZHE��(VVDV�SDUWHV�
podem ser um parágrafo, um cabeçalho ou uma informação que mereça destaque, que seja importante. Os elementos 
podem conter mais de um atributo, conter texto ou podem ser vazios. São delimitados por tags, que são comandos 
HVSHFt¿FRV�GD�OLQJXDJHP��8P�HOHPHQWR�QmR�YD]LR�LQFOXL�XPD�tag�GH�DEHUWXUD��R�FRQWH~GR�H�XPD�tag de fechamento. 
A tag de abertura contém o nome do elemento e atributos que estão escritos e inclusos dentro dos sinais de maior e 
menor. A tag�GH�IHFKDPHQWR�WDPEpP�¿FD�GHQWUR�GRV�VLQDLV�GH�PDLRU�H�PHQRU��SRUpP�Ki�XPD�EDUUD�GLDJRQDO�VHJXLGD�
SHOR�QRPH�GR�HOHPHQWR��1D�)LJXUD�����SRGHPRV�YHUL¿FDU�FRPR�p�XP�HOHPHQWR�QmR�YD]LR�H�XP�YD]LR�
PORDENTRODOTEMA
�
Figura 1.2 Elementos.
)RQWH��$GDSWDGR�GH�&DVWUR��������
De acordo com Mileto (2014), os elementos que compõem uma página são posicionados por meio de tags. Para 
conceituar melhor, uma tag�p�XPD�SDODYUD�HVSHFt¿FD�TXH�GHYH�VHU�FRORFDGD�HQWUH�RV�VLQDLV�GH�PDLRU�H�PHQRU��'H�PRGR�
JHUDO��DSDUHFHP�HP�SDUHV��SDUD�XPD�LQGLFDU�R�LQtFLR�H�D�RXWUD�R�¿P�GD�PDUFDomR��FRPR�Mi�PRVWUDGR�QD�)LJXUD������3DUD�
criar uma página web devem ser utilizadas tags básicas, como mostra a Figura 1.3.
PORDENTRODOTEMA
�
Figura 1.3 Tags utilizadas.
Fonte: Adaptado de Mileto (2014).
2. Atributos contêm informações sobre os dados em um documento. Alguns atributos aceitam qualquer valor, mas 
outros são mais limitados. 
3. Valores devem estar sempre entre aspas. Dentro do conjunto de atributos, alguns aceitam quaisquer valores e 
RXWURV�WrP�VXDV�OLPLWDo}HV��4XDQGR�RV�DWULEXWRV�ID]HP�UHIHUrQFLD�D�RXWURV�DUTXLYRV��HVWHV�GHYHP�FRQWHU�YDORUHV�QD�
forma de URL (Uniform Resource Locator).
Para melhor compreensão, na Figura 1.4 é apresentado o exemplo de um atributo simples, em que é possível ver 
como ele deve ser escrito.
PORDENTRODOTEMA
��
Figura 1.4 Atributo simples.
)RQWH��$GDSWDGR�GH�&DVWUR��������
Na Figura 1.5 são apresentados atributos, mas neste caso cada um tem seu próprio valor. Estes valores se apresentam 
entre aspas, mas, em HTML, às vezes as aspas podem ser omitidas.
Figura 1.5 Atributos com valores.
)RQWH��$GDSWDGR�GH�&DVWUR��������
PORDENTRODOTEMA
��
Na sequência, a Figura 1.6 apresenta um exemplo de atributos que não aceitam quaisquer valores.
Figura 1.6�$WULEXWRV�FRP�YDORUHV�HVSHFt¿FRV�
)RQWH��$GDSWDGR�GH�&DVWUR��������
Abordando ainda os elementos, estes podem ser de nível parágrafo ou linha. Elementos de nível parágrafo são as partes 
estruturais que podem ser consideradas as maiores da página web. Estes elementos podem conter outros elementos 
de nível parágrafo, linha e texto. Sobre a estrutura de parágrafos, a tag responsável pela quebra de parágrafos é a <P>, 
TXH�¿QDOL]D�R�SDUiJUDIR�H�LQVHUH�DXWRPDWLFDPHQWH�XPD�OLQKD�HP�EUDQFR�HQWUH�SDUiJUDIRV��2�HOHPHQWR��GLY!�p�XWLOL]DGR�
para fornecer uma identidade, uma referência (PRADO, 2011). Um exemplo de elemento de nível parágrafo e de nível 
linha pode ser visto na Figura 1.7.
PORDENTRODOTEMA
��
Figura 1.7 Elementos de nível parágrafo.
)RQWH��$GDSWDGR�GH�&DVWUR��������
Dentre os elementos, pode-se dizer que há uma pequena hierarquia, ou seja, são designados aqueles que são pais e, 
FRQVHTXHQWHPHQWH��RV�¿OKRV��3DUD�HVWD�FODVVL¿FDomR�p�HVWDEHOHFLGR�TXH�TXDQGR�XP�HOHPHQWR�FRQWpP�R�RXWUR�HOH�p�R�
SDL��H�R�HOHPHQWR�FRQWLGR�p�R�¿OKR��2V�¿OKRV�VmR�RV�GHVFHQGHQWHV��RX�VHMD��p�FULDGD�XPD�IDPtOLD�HP�XPD�SiJLQD�ZHE�
�&$6752���������1D�)LJXUD�����WHPRV�XP�H[HPSOR�GHVVD�KLHUDUTXLD�GRV�HOHPHQWRV��
Na página web temos que usar caracteres e, às vezes, símbolos especiais. Para isso, há a opção de digitar os caracteres 
FRPR�VmR�H�FRGL¿FDU�HP�Unicode, sendo que os navegadores que não compreendem Unicode interpretam a porção 
$6&,,�GR�GRFXPHQWR��+i�XP�GHWDOKH�LPSRUWDQWH��R�VtPEROR�& não deve ser digitado diretamente, visto que possui um 
VLJQL¿FDGR�HVSHFLDO�HP��;�+70/�
PORDENTRODOTEMA
��
Figura 1.8�([HPSOR�GH�HOHPHQWRV�SDLV�H�¿OKRV�
)RQWH��$GDSWDGR�GH�&DVWUR��������
Um destaque importante e que fascina os navegadores são os links, imagens, animações em ÀDVK��¿OPHV�HP�4XLFN7LPH��
P~VLFDV�HP�03���GHQWUH�RXWURV��(VWHV�DUTXLYRV�VmR�VDOYRV�VHSDUDGDPHQWH�H�GHQWUR�GD�SiJLQD��VHQGR�UHIHUHQFLDGRV�QR�
texto. Na Figura 1.9 pode-se ver a referência a uma imagem.
PORDENTRODOTEMA
��
Figura 1.9 Exemplo de imagens na página.
)RQWH��$GDSWDGR�GH�&DVWUR��������
&RPR�WRGR�GRFXPHQWR��D�SiJLQD�ZHE�SUHFLVD�VHU�LGHQWL¿FDGD�H��DVVLP��p�QHFHVViULR�GDU�OKH�R�QRPH�GH�XP�DUTXLYR��(VVH�
QRPH�GHYH�WHU�OHWUDV�PLQ~VFXODV�H�VXD�H[WHQVmR�GHYHUi�VHU�KWP�RX�KWPO�
URL
Não podemos deixar de abordar a URL (Uniform Resouce Locator), que contém informações sobre onde o arquivo 
HVWi�H�D�VXD�IXQFLRQDOLGDGH��RX�VHMD��R�TXH�R�QDYHJDGRU�SRGH�ID]HU�FRP�HVWH�DUTXLYR��&DGD�DUTXLYR�QD�,QWHUQHW�WHP�XPD�
~QLFD�85/��$�85/�p�GLYLGLGD�HP�SDUWHV��VHQGR�D�SULPHLUD�R�HVTXHPD��TXH�LQIRUPD�FRPR�OLGDU�FRP�R�DUTXLYR�TXH�VHUi�
aberto. Este, na maioria das vezes, é seguido de dois pontos e duas barras diagonais. Um exemplo de esquema comum 
PORDENTRODOTEMA
��
é o HTTP (Hypertext Transfer Protocol),o protocolo de transferência de hipertexto, utilizado para acessar páginas web. 
A próxima parte é o nome do servidor onde o arquivo está localizado, e também o caminho que leva ao arquivo, como 
pode ser visto na Figura 1.10.
Figura 1.10 Exemplo de URL básica.
)RQWH��$GDSWDGR�GH�&DVWUR��������
As URLs podem ser absolutas ou relativas. Uma URL é absoluta quando mostra todo o caminho para o arquivo: esquema, 
QRPH�GR�VHUYLGRU��FDPLQKR�FRPSOHWR�H�QRPH�GR�DUTXLYR��(OD�p�GLWD�FRPSOHWD��R�TXH�VLJQL¿FD�TXH�QmR�WHP�LQÀXrQFLD�
sobre a localização do arquivo referenciado, ou seja, não importa se é uma página web neste ou naquele servidor, ela 
parecerá exatamente a mesma. A URL absoluta é necessária quando referencia um arquivo do servidor de alguém, 
para sites FTP�RX�85/�TXH�QmR�XVHP�SURWRFROR�+773��4XDQGR�D�85/�p�UHODWLYD��D�ORFDOL]DomR�GR�DUTXLYR�QR�VHUYLGRU�p�
relativa, como mostra a Figura 1.11, junto com o quadro que mostra as URLs e onde podem ser usadas.
PORDENTRODOTEMA
��
Figura 1.11 URLs Absolutas e Relativas.
)RQWH��$GDSWDGR�GH�&DVWUR��������
PORDENTRODOTEMA
��
Exemplo
&RPR� Mi� IRL� H[SODQDGD� WRGD� D� HYROXomR� GD� OLQJXDJHP� H� VHXV� SULQFLSDLV� HOHPHQWRV�� p� LPSRUWDQWH� FRQKHFHU� RV�
requisitos básicos para o desenvolvimento de uma página. De acordo com Prado (2011), temos como princípios básicos: 
conhecer a linguagem HTML e, depois, abrir um editor de texto para gerar o código fonte. O editor pode ser um bloco de 
notas. Para podermos visualizar as páginas, é necessário um navegador de Internet, o browser. Sobre os comandos, já 
conhecemos as Tags, que fazem indicações a um browser e devem aparecer entre sinais de maior e menor, utilizadas 
aos pares e, além disso, a tag�GH�¿QDOL]DomR�GH�XP�FRPDQGR�GHYH�VHU�SUHFHGLGD�GH�XPD�EDUUD��2�GRFXPHQWR�+70/�
¿FD�FRQWLGR�HQWUH�DV�tags:
‡� �+70/!�H���+70/!��TXH�LQGLFDP�R�LQtFLR�H�R�¿P�GR�GRFXPHQWR��
‡� �+($'!�H���+($'!��TXH�LQGLFDP�SDUkPHWURV�GH�FRQ¿JXUDomR�GR�GRFXPHQWR�
‡� <TITLE> e </TITLE>, que indicam o título do documento para o browser e devem estar dentro das tags <HEAD> e 
</HEAD>.
‡� �%2'<!�H���%2'<!��RQGH�¿FD�R�FRUSR�GR�GRFXPHQWR�
Agora, com alguns conhecimentos, será montado um pequeno exemplo: uma página com uma frase e uma cor de fundo. 
3ULPHLUDPHQWH��GHYHPRV�WHU�XPD�SDVWD�HVSHFt¿FD�SDUD�R�DUTXLYR�H�DEULU�R�HGLWRU�GH�WH[WR��QRPHDQGR�R�DUTXLYR�FRPR�
LQGH[�KWPO��&DVR�YRFr�WHQWH�DEUL�OR��YDL�DSDUHFHU�XPD�SiJLQD�HP�EUDQFR��SRLV�R�DUTXLYR�HVWi�YD]LR��3DUD�GLJLWDU�R�FyGLJR�
vá ao seu arquivo e, com o botão direito do mouse, clique em “editar”. Assim, você inclui o seu código, que pode ser:
<html>
<head>
<title>
 Exemplo de HTML
</title>
</head>
<body bgcolor=”blue” >
 Primeira página HTML com cor de fundo.
</body>
</html>
PORDENTRODOTEMA
��
Salve o seu código, feche o seu arquivo e, depois, abra o arquivo HTML, e você poderá ver a sua página. Na linha sete 
IRL�LQFOXtGD�D�LQVWUXomR�³EJFRORU´�SDUD�LQGLFDU�D�FRU�GR�IXQGR��&RPR�YRFr�Mi�LQLFLRX�D�FRQVWUXomR�GH�XPD�SiJLQD��WHQWH�
mudar a sua cor do fundo. Agora você já sabe como iniciar a montagem de uma página.
Evolução da Internet: do início secreto à explosão mundial (TAIT, 2007)
‡� Para o melhor entendimento sobre a evolução da Internet, é indicada a leitura de um artigo 
que discorre sobre este assunto com uma linguagem bem objetiva e com ricos detalhes.
Disponível em: <http://homepages.dcc.ufmg.br/~mlbc/cursos/internet/historia/Brasil.html>. Acesso em: 03 nov. 2014.
História da Internet
‡� Sobre o assunto abordado neste tema e também para uma assimilação melhor do que foi a 
evolução da Internet, é indicado um vídeo bem explicativo.
Disponível em: <KWWSV���ZZZ�\RXWXEH�FRP�ZDWFK"Y VTR[5\Q;[\J>. Acesso em: 03 nov. 2014.
Tempo: 7:44.
A História do HTML (WILLIAM, 2012)
‡� Sobre a Linguagem HTML, item relevante neste tema, é feita a indicação de leitura de um 
artigo, que trata da história dessa linguagem de uma forma bem clara. No artigo, o autor abrange 
todos os tópicos pertinentes a este assunto. 
Disponível em: <https://fit.faccat.br/~sorgetz/ArtigoHTML.pdf>. Acesso em: 04 nov. 2014.
mudar a sua cor do fundo. Agora você já sabe como iniciar a montagem de uma página.
í à ( )
ACOMPANHENAWEB
PORDENTRODOTEMA
��
Apostila de HTML e CSS (PIVETTA, 2010)
‡� e�LQGLFDGD�D�YRFr�XPD�DSRVWLOD�TXH�DEUDQJH�D�OLQJXDJHP�+70/�H�R�&66��$�DSRVWLOD�DSUHVHQWD�
QR�&DStWXOR���XPD�LQWURGXomR�DR�+70/�H��QR�&DStWXOR�����GLVFRUUH�VREUH�R�TXH�p�R�&66�
Disponível em: <KWWSV���ZZZ�WHOHFRP�XII�EU�SHW�SHWZV�GRZQORDGV�WXWRULDLV�FVV�FVV�N������SGI>. Acesso em: 03 
nov. 2014. 
ACOMPANHENAWEBACOMPANHENAWEB
Instruções:
$JRUD��FKHJRX�D�VXD�YH]�GH�H[HUFLWDU�VHX�DSUHQGL]DGR��$�VHJXLU��YRFr�HQFRQWUDUi�DOJXPDV�TXHVW}HV�GH�P~OWLSOD�
escolha e dissertativas. Leia cuidadosamente os enunciados e atente-se para o que está sendo pedido.
AGORAÉASUAVEZ
Questão 1
A Internet, a rede das redes, é uma rede mundial largamente utilizada. A maioria dos usuários não sabe como ela funciona e não 
FRQKHFH�D�VXD�HVWUXWXUD��PDV�VH�DSURYHLWD�GRV�VHXV�UHFXUVRV��&RPR�YRFr�FRQFHLWXDULD�D�,QWHUQHW"
��
AGORAÉASUAVEZ
Questão 2
6REUH�D�FODVVL¿FDomR�GDV�DSOLFDo}HV�ZHE��FRQ¿UD�DV�D¿UPDWLYDV�H�UHVSRQGD�
I. 6LWH�GH�FRQWH~GR��H[LEH�R�FRQWH~GR�GH�XPD�GHWHUPLQDGD�iUHD�GH�IRUPD�OLQHDU��FRP�QDYHJDomR�VLPSOHV�
II. Site de registro de dados: utiliza como recurso principal sites já existentes. 
III. Portal: é um conjunto de páginas; links que convergem para um determinado contexto.
IV. Aplicação orientada à transação: é um modelo em que o usuário envia solicitações que a aplicação processa em um site, 
retornando ao usuário a resposta.
a)� 7RGDV�DV�D¿UPDWLYDV�HVWmR�FRUUHWDV��
b)�6RPHQWH�DV�D¿UPDWLYDV�,��,,�H�,,,�HVWmR�FRUUHWDV��
c)�6RPHQWH�DV�D¿UPDWLYDV�,,��,,,�H�,9�HVWmR�FRUUHWDV�
d) Somente as alternativas I e III estão corretas. 
e) Somente as alternativas I e IV estão corretas.
Questão 3
5HඇDFLRQH�
1. HTML
( ) Sistema novo de instruções de formatação, com novas funcionalidades, como a capacidade de posicionar 
elementos em uma página web com maior precisão e criar layouts�GH�DSDUrQFLD�SUR¿VVLRQDO�
���&66 ( ) Não é somente uma linguagem para criar páginas web e sim uma linguagem para criar outras linguagens.
���:�& ( ) Linguagem de marcação de hipertexto, ou seja, é a linguagem em que são escritas as páginas da web.
4. XML
( ) Organização que tem como objetivo trabalhar com a comunidade web a importância da universalidade e me-
lhorar a aparência das páginas.
��
AGORAÉASUAVEZ
Questão 4
As páginas da web atualmente têm se tornado mais complicadas, mas a estrutura fundamental se mantém simples desde o início. 
&LWH�RV�WUrV�FRPSRQHQWHV�SULQFLSDLV�FRP�TXH�DV�SiJLQDV�VmR�IHLWDV�
Questão 5
Recorrendo a algumas informações mencionadas neste caderno sobre a linguagem HTML, monte um pequeno exemplo de uma 
página com uma frase e uma cor de fundo. 
Este tema possibilitou a você o conhecimento sobre a evolução da Internet. Agora, você pode entender melhor 
o processo de colocar documentos nesta rede e poder acessá-los, mas com detalhes sobre as linguagens utilizadas. 
6REUH�HVWH�DVVXQWR��IRL�QDUUDGR�D�UHVSHLWR�GD�OLQJXDJHP�+70/�H�VXDV�YHUV}HV��EHP�FRPR�R�&66��9RFr�S{GH�FRPHoDU�
a conhecer e entender os fundamentos básicos da linguagem HTML, quais são os comandos básicos, como iniciar a 
FRQVWUXomR�GH�XPD�SiJLQD�H�TXDLV�VmR�RV�UHFXUVRV�TXH�SRGHP�VHU�XWLOL]DGRV��3DUD�FRPSOHWDU�HVWH�DVVXQWR��YRFr�S{GH�
ver e fazer um exemplo básico de uma página com uma frase e uma cor de fundo.
p g
E ibili ê h i b l d I A ê d d lh
FINALIZANDO
&$6752��(OL]DEHWK��HTML5 e CSS3: guia prático e visual. São Paulo: Alta Books, 2010.
FERREIRA, Elcio; EIS, Diego. HTML 5��5LR�*UDQGH�GR�6XO��2¿FLQD�GD�1HW��������'LVSRQtYHO�HP��<http://www.oficinadanet.com.
br/imagens/apostilas/703/html5-web.pdf>. Acesso em: 04 nov. 2014.ver e fazer um exemplo básico de uma página com uma frase e uma cor de fundo.
REFERÊNCIAS
��
Doctype: tipo de marcação que descreve o texto escrito na página web.
DSL: Digital Subscriber Line, tecnologia de transmissão digital de dados via rede de telefonia. 
FTP: File Transfer Protocol, ou seja, protocolo de transferência de arquivo.
Hipermídia: como é hiper, então, é possível dizer que são vários meios, um conjunto que é possível acessar simultane-
amente, incluindo textos, imagens e sons. Resumindo, é a reunião de várias mídias em um sistema computacional de 
comunicação. 
Modem:�GLVSRVLWLYR�HOHWU{QLFR�GH�HQWUDGD�H�VDtGD�XWLOL]DGR�SDUD�WUDQVPLVVmR�H�SURFHVVDPHQWR�GH�GDGRV�HQWUH�FRPSX-
tadores. 
D i d d i á i b
GLOSSÁRIO
MEYER, Érica A. Smashing CSS��7pFQLFDV�SUR¿VVLRQDLV�SDUD�XP�OD\RXW�PRGHUQR��'DGRV�(OHWU{QLFRV��3RUWR�$OHJUH��%RRNPDQ�������
0,/(72��(YDQGUR�0DQDUD��%(57$*12//,��6tOYLD�GH�&DVWUR��Desenvolvimento de Software II: introdução ao desenvolvimento 
ZHE�FRP�+70/��&66��-DYD6FULSW�H�3+3��'DGRV�(OHWU{QLFRV��3RUWR�$OHJUH��%RRNPDQ�������
3,9(77$��(OLVD�0DULD��$SRVWLOD�GH�+70/�H�&66��Colégio Agrícola Frederico Westphalen – UFSM. 2010. Disponível em: <https://
ZZZ�WHOHFRP�XII�EU�SHW�SHWZV�GRZQORDGV�WXWRULDLV�FVV�FVV�N������SGI>. Acesso em: 03 nov. 2014.
35$'2��0iUFLR�)HOLFLDQR�GR��$SRVWLOD�GH�+70/�H�&66��Minicursos Virtuais��&DPSLQDV��8QLFDPS��������'LVSRQtYHO�HP��<http://
ZZZ�PDUFLRSUDGR�HWL�EU�HQVLQR�KWPO"GRZQORDG ���$DSRVWLODKWPO>. Acesso em: 05 nov. 2014.
7$,7��7DQLD�)DWLPD�&DOYL��(YROXomR�GD�,QWHUQHW��GR�LQtFLR�VHFUHWR�j�H[SORVmR�PXQGLDO��PET Informática. 2007. Disponível em: 
<http://homepages.dcc.ufmg.br/~mlbc/cursos/internet/historia/Brasil.html>. Acesso em: 03 nov. 2014.
VÍDEO. História da Internet. YouTube. 2013. Disponível em: <KWWSV���ZZZ�\RXWXEH�FRP�ZDWFK"Y VTR[5\Q;[\J>. Acesso em: 03 
nov. 2014.
WILLIAM, David. A História do HTML. Front End Brasil. 2012. Disponível em: <https://fit.faccat.br/~sorgetz/ArtigoHTML.pdf>. 
Acesso em: 04 nov. 2014.
REFERÊNCIAS
��
Unicode:�p�XP�VXSHUFRQMXQWR�GH�$6&,,�TXH�IRUQHFH�XP�Q~PHUR�~QLFR�SDUD�FDGD�FDUDFWHUH��
URL: Uniform Resource Locator��RX�VHMD��ORFDOL]DGRU�GH�UHFXUVRV�XQLIRUPH��R�HQGHUHoR�~QLFR�GH�XP�DUTXLYR�QD�ZHE�
GLOSSÁRIO
� M � � o T
GABARITO
Questão 1
Resposta: O sistema de comunicação denominado Internet é a rede das redes. Para conceituar melhor a palavra, 
temos que “nets” são redes e que “inter” quer dizer que há interação; neste caso, trata-se de redes ligadas, conectadas 
entre si. Sendo assim, a Internet consiste em várias redes interligadas, com serviços comuns.
Questão 2
Resposta: Alternativa D.
-XVWL¿FDWLYD�
II. Site de registro de dados: utiliza como recurso principal formulários que são preenchidos pelo usuário.
IV. Aplicação orientada à transação: é um modelo em que o usuário envia solicitações que a aplicação processa em um 
banco de dados, retornando ao usuário a resposta.
Questão 3
Resposta: 
(2) Sistema novo de instruções de formatação, com novas funcionalidades, como a capacidade de posicionar elementos 
em uma página web com maior precisão e criar layouts�GH�DSDUrQFLD�SUR¿VVLRQDO��CSS.
(4) Não é somente uma linguagem para criar páginas web e sim uma linguagem para criar outras linguagens. XML.
(1) Linguagem de marcação de hipertexto, ou seja, é a linguagem em que são escritas as páginas da web. HTML.
(3) Organização que tem como objetivo trabalhar com a comunidade web a importância da universalidade e melhorar a 
aparência das páginas. W3C.
��
Questão 4
Resposta: Os três componentes são:
���&RQWH~GR�GH�WH[WR��VmR�RV�FDEHoDOKRV�H�SDUiJUDIRV�GD�SiJLQD�
2. Referências: são os links, imagens e animações em ÀDVK.
���0DUFDomR��UHJUDV�RX�LQWUXo}HV�SDUD�GHVFUHYHU�DV�UHIHUrQFLDV�H�R�FRQWH~GR�D�VHUHP�H[LELGRV�
Questão 5
Resposta: Passos para montar a página:
1. Montar uma pasta.
2. Abrir um arquivo no editor de texto (bloco de notas) com o nome de index.html. 
3. Para digitar o código vá ao seu arquivo e, com o botão direito do mouse, clique em “editar” e inclua o código, que pode ser:
<html>
<head>
<title>
 Exercicio de HTML
</title>
</head>
<body bgcolor=”green” >
 Página HTML com cor de fundo.
</body>
</html>
4. Salve o código.
5. Feche o arquivo e, depois, abra o arquivo HTML. Assim, sua página está pronta.
)HUUDPHQWDV�SDUD�6LVWHPD�:(%
Autoria: Virgínia Mara Cardoso
Tema 02
Arquivos de Páginas Web e o (X)HTML
7HPD���
Arquivos de Páginas Web e o (X)HTML
Autoria: Virgínia Mara Cardoso
Como citar esse documento:
CARDOSO, Virgínia Mara. Ferramentas para Sistema WEB: Arquivos de Páginas Web e o (X)HTML. Caderno de Atividades. Valinhos: Anhanguera 
Educacional, 2014.
Índice
‹������$QKDQJXHUD�(GXFDFLRQDO�� 3URLELGD� D� UHSURGXomR� ¿QDO� RX� SDUFLDO� SRU� TXDOTXHU�PHLR� GH� LPSUHVVmR�� HP� IRUPD� LGrQWLFD�� UHVXPLGD� RX�PRGL¿FDGD� HP� OtQJXD�
SRUWXJXHVD�RX�TXDOTXHU�RXWUR�LGLRPD�
Pág. 27
Pág. 28 Pág. 28
Pág. 27
Pág. 24Pág. 23
ACOMPANHENAWEB
Pág. 3
CONVITEÀLEITURA
Pág. 3
PORDENTRODOTEMA
�
Arquivos de Páginas Web e o (X)HTML
Arquivos de Página na Web
Como já tivemos contato com a linguagem HTML, vamos agora entender com detalhes tudo o que é necessário 
para criar uma página na web. Todo o texto deste tema está baseado na leitura de Castro (2013), Ferreira e Eis (2011), 
Manzano e Toledo (2010), Meyer (2011), Mileto e Bertagnolli (2014) e Prado (2002). São vários os passos para criar uma 
SiJLQD�H��VH�YHUL¿FDUPRV��KRMH�WHPRV�PXLWDV�RSo}HV�H�SiJLQDV�FRP�HVWLORV�EHP�RXVDGRV��DOpP�GH�RXWUDV�PDLV�VLPSOHV��
Vamos iniciar com o básico e aos poucos vamos aprofundando e melhorando nossa página.
A leitura deste tema possibilitará a você conhecer os detalhes necessários para criar uma página web. Devemos 
GH¿QLU�GHVGH�R�HGLWRU�GH�WH[WR�RX�IHUUDPHQWD�D�XWLOL]DU�DWp�D�TXDQWLGDGH�GRV�UHFXUVRV�H�GHWDOKDPHQWRV�QHFHVViULRV�SDUD�
o desenvolvimento da página, sejam páginas simples ou mais complexas, com nível de interatividade maior. Para o 
DUTXLYR�TXH�YRFr�PRQWDUi��YRFr�GHYHUi�VDEHU�DOJXPDV�FRQ¿JXUDo}HV��FRPR�GHYH�VHU�VHX�QRPH�H�VXD�H[WHQVmR��SRU�
H[HPSOR��H�RV�SDGU}HV�H�UHJUDV�GD�OLQJXDJHP�GH�PDUFDomR�+70/��1HVVH�FDVR��FRP�R�GHVHQYROYLPHQWR�GH�XPD�SiJLQD��
SRGHPRV�DSUHQGHU�FRPR�YLVXDOL]DU�VHX�FyGLJR�IRQWH�SDUD�TXH�VH�LGHQWL¿TXHP�WDPEpP�RV�UHFXUVRV�TXH�IRUDP�XWLOL]DGRV��
$SUHQGHUHPRV�DLQGD�VREUH�D�OLQJXDJHP�+70/�H�FRPR�HOD�p�GLYLGLGD�SDUD�TXH�VH�SRVVD�FRGL¿Fi�OD��3DUD�LQLFLDUPRV��
há um exemplo de um código com os elementos mais importantes do HTML que se aplica a qualquer página. Serão 
mostrados também alguns dos principais elementos que podem ser utilizados, por meio de um exemplo de código e de 
FRPR�p�R�UHVXOWDGR�GD�SiJLQD�FRP�R�XVR�GR�GHWHUPLQDGR�HOHPHQWR��3RU�¿P��VHUmR�PRVWUDGRV�HOHPHQWRV�HVSHFt¿FRV�
necessários para a inclusão no texto da página, com detalhes de como este deve ser inserido.
CONVITEÀLEITURA
PORDENTRODOTEMA
�
Baseados em Castro (2013), vamos seguir as regras iniciais para criar uma página na web. A primeira questão que surge 
é sobre qual editor de texto devemos usar. Podemos usar qualquer editor de texto como, por exemplo, o bloco de notas 
�)LJXUD�������+i�HGLWRUHV�GH�WH[WRV�HVSHFt¿FRV�SDUD�R�+70/�H�DOJXQV�DWp�JUDWXLWRV��8P�GHWDOKH�LPSRUWDQWH�p�QmR�XWLOL]DU�
processadores de texto como o Microsoft Word, pois ele pode incluir códigos inválidos e atrapalhar o desenvolvimento 
de sua página. A página é criada com um editor de texto, mas pode ser visualizada por múltiplos navegadores de diversas 
SODWDIRUPDV��$OpP�GHVWD�RSomR��WHP�VH�XWLOL]DGR�EDVWDQWH�QR�PHUFDGR�GH�WUDEDOKR�R�VRIWZDUH�'UHDPZHDYHU��$GREH��
Figura 2.1�(GLWRU�GH�WH[WR�%ORFR�GH�1RWDV�
3DUD�TXH�D�SiJLQD�VHMD�UHFRQKHFLGD��RX�VHMD��LQWHUSUHWDGD�FRP�VXDV�GHYLGDV�PDUFDo}HV��RV�DUTXLYRV�GHYHP�WHU�H[WHQVmR�
�KWPO�RX��KWP��R�TXH�LUi�GLVWLQJXL�OD��$�H[WHQVmR��KWPO�p�PDLV�LQGLFDGD�TXH�R��KWP��1R�EORFR�GH�QRWDV��p�FRPXP�WHUPRV�a extensão .txt, mas a extensão .html.txt não será vista, sendo assim, deixe somente .html. A Figura 2.2 mostra como 
¿FDUi�VHX�DUTXLYR�QD�SDVWD�
Figura 2.2 Arquivo index.html na pasta.
PORDENTRODOTEMA
�
É comum escolher o formato do texto, que sempre é salvo com caracteres padrão do sistema. Se optar por outra 
FRGL¿FDomR�TXH�WHQKD�VtPERORV�HVSHFLDLV�GHYH�VHU�XVDGR�XP�HGLWRU�GH�WH[WR�TXH�SHUPLWD�D�HVFROKD�GD�FRGL¿FDomR��2�
UTF-8 é a melhor escolha.
2�DUTXLYR�GHYH�VHU�VDOYR�FRPR�LQGH[�KWPO��TXH�p�R�QRPH�SDUD�GHVLJQDU�D�SiJLQD�FRPR�SiJLQD�SDGUmR�D�VHU�DEHUWD�QD�
pasta em que se encontra. Este nome é reconhecido pela maioria dos servidores web como página padrão em cada 
pasta. A página padrão – index.html – que é criada no topo do diretório web, ou raiz, é a homepage. É possível criar uma 
página padrão para todos os diretórios de seu site, mantendo os arquivos na pasta e nas subpastas. 
Caso não haja uma página padrão em cada diretório, alguns servidores podem mostrar uma lista com esses conteúdos. 
2�LGHDO�p�FULDU�XPD�SiJLQD�SDGUmR�SDUD�WRGRV�RV�GLUHWyULRV�GR�VLWH�TXH�FRQWHQKDP�SiJLQDV�+70/��1HVWH�FDVR��Ki�D�
RSomR�GH�PRGL¿FDU�D�FRQ¿JXUDomR�GR�servidor�SDUD�TXH�D�OLVWD�GH�DUTXLYRV�¿TXH�RFXOWD��R�TXH�p�UHFRPHQGiYHO�TXDQGR�
há pastas com assets, como as imagens, arquivos de mídias, folhas de estilo e arquivos de Javascript.
1D�PDLRULD�GDV�YH]HV��WHPRV�YiULRV�DUTXLYRV�H�GHYHPRV�RUJDQL]i�ORV�SDUD�GHSRLV�QmR�FRUUHU�R�ULVFR�GH�SHUGr�ORV�RX�QmR�
ORFDOL]i�ORV��$�SULQFLSDO�GLFD�p�FULDU�XPD�SDVWD�FHQWUDO�RX�GLUHWyULR�RQGH�GHYH�¿FDU�WRGR�R�PDWHULDO�TXH�HVWDUi�GLVSRQtYHO�QR�
VLWH��$OpP�GD�SDVWD�FHQWUDO��YRFr�SRGH�FULDU�VXESDVWDV�LQFOXtGDV�QHOD��PDV�HVWDV�GHYHP�UHÀHWLU�D�RUJDQL]DomR�GH�VHX�VLWH��
É comum criar uma pasta acima de todas para as imagens e também criar a pasta principal com nome Assets, colocando 
nela a pasta de imagens com as outras que contêm vídeos, folhas de estilo, dentre outros.
'HSRLV�GH�FULDGD�D�SiJLQD��p�QHFHVViULR�YLVXDOL]i�OD��DVVLP��DEUD�R�QDYHJDGRU��Yi�DWp�VHX�DUTXLYR�H�HVFROKD�D�RSomR�
³DEULU�SiJLQD´�RX�³DEULU�DUTXLYR´��+i�WDPEpP�D�RSomR�GH�FOLFDU�GXDV�YH]HV�VREUH�R�tFRQH�GR�DUTXLYR�H�DVVLP�VHUi�YLVWD�D�
página, como ilustra a Figura 2.3.
PORDENTRODOTEMA
�
Figura 2.3 Página no navegador.
Para um bom desenvolvedor é importante pesquisar e conhecer outras páginas, mas como ver o código HTML de 
RXWURV"�+i�D�RSomR�GH�DEULU�D�SiJLQD�GHVHMDGD�HP�TXDOTXHU�QDYHJDGRU�H�GHSRLV�HVFROKHU�³YLVXDOL]DU�IRQWH´��DVVLP��R�
código HTML será exibido.
(X)HTML e sua Estrutura 
$Wp�HVWH�SRQWR��IRL�YLVWD�D�SiJLQD�QR�HGLWRU�GH�WH[WR�VHP�FRGL¿FDomR��VRPHQWH�FRP�D�HVWUXWXUD�SDUD�FULDU��VDOYDU�H�
PRVWUDU��$JRUD�p�LPSRUWDQWH�FRQKHFHU�RV�FRPSRQHQWHV�EiVLFRV�H�QHFHVViULRV�SDUD�LQLFLDU�GH�IDWR�D�SiJLQD��1D�)LJXUD�
2.4, é apresentado um código que será explicado em detalhes.
PORDENTRODOTEMA
�
Figura 2.4�&RGL¿FDomR�GD�3iJLQD�
Fonte: Adaptada de Castro (2013).
$V�SiJLQDV�+70/�EDVLFDPHQWH�VmR�GLYLGLGDV�HP�GXDV�SDUWHV��FDEHoDOKR��head, e corpo, body. É fundamental que elas 
se iniciem com o DOCTYPE��2�FyGLJR�GD�)LJXUD�����p�R�DOLFHUFH�GH�WRGD�SiJLQD�+70/���$�SULPHLUD�OLQKD�DSUHVHQWD�
<!DOCTYPE html>�TXH�GHFODUD�D�SiJLQD�FRPR�XP�GRFXPHQWR�+70/���1D�VHJXQGD�OLQKD��WHPRV�<html lang=”língua-
do-código”> para iniciar o HTML do seu documento, em que a língua do código determina a língua padrão, que no 
código da Figura 2.4 está com “en” para o inglês, mas que poderia ser outra, como “fr” para o francês.
2�<head>�LQGLFD�R�LQtFLR�GR�FDEHoDOKR�GR�GRFXPHQWR�GD�SiJLQD��1HVWD�SDUWH��GH¿QH�VH�R�WtWXOR�GD�SiJLQD��TXH�SRGH�LQFOXLU�
LQIRUPDomR�VREUH�HOD�SDUD�VLWHV�GH�EXVFD��FRPR��SRU�H[HPSOR��R�*RRJOH��TXH�FDUUHJD�IROKDV�GH�HVWLOR�H�WDPEpP�SRGH�
carregar arquivos JavaScript, o que não é recomendável. Seguindo, temos <meta charset=”UTF-8” />, que declara a 
FRGL¿FDomR�GRV�FDUDFWHUHV�FRPR�87)����
1D�VHTXrQFLD��Ki�D�FRGL¿FDomR�<title> e </title>, na qual deve ser inserido o título da página. É necessário que a página 
WHQKD�WtWXOR�H�HVWH�GHYH�VHU�FXUWR��GHVFULWLYR�H�~QLFR�SDUD�FDGD�SiJLQD��(OH�QmR�SRGH�FRQWHU�TXDOTXHU�IRUPDWDomR��+70/��
LPDJHQV�RX�OLQNV�SDUD�RXWUDV�SiJLQDV��2�WtWXOR�p�JHUDOPHQWH�XVDGR�FRPR�R�WH[WR�YLQFXODGR�TXH�DSRQWD�R�UHVXOWDGR�GD�
busca para sua página e também determina a relevância dela em uma busca. 
1D�OLQKD�VHJXLQWH�Ki�R�</head>��TXH�HQFHUUD�R�GRFXPHQWR�GH�FDEHoDOKR�GD�SiJLQD��2�+70/�IRUQHFH�VHLV�QtYHLV�GH�
FDEHoDOKR�SDUD�TXH�� DVVLP�� SRVVD�KDYHU� XPD�KLHUDUTXLD� GDV� LQIRUPDo}HV�GDV�SiJLQDV��'HVVD�PDQHLUD�� SRGHP�VHU�
PORDENTRODOTEMA
�
PDUFDGRV�RV�HOHPHQWRV��FRPR�PRVWUD�D�)LJXUD������HP�TXH�R�FDEHoDOKR�K��p�R�PDLV�DOWR�H�R�K��p�XP�VXEFDEHoDOKR��
0DV��SDUD�FDGD�QtYHO�GH�FDEHoDOKR��HVWH�GHYH�VHU�HQFHUUDGR�FRP�D�PHVPD�LQGLFDomR��FRQIRUPH�GHVWDFDGR�QD�)LJXUD�
�����(OHV�HVWmR�HQWUH�RV�HOHPHQWRV�PDLV�LPSRUWDQWHV�GR�+70/�GH�TXDOTXHU�SiJLQD�
Figura 2.5�&RGL¿FDomR�GD�3iJLQD�±�FDEHoDOKR�
Fonte: Adaptada de Castro (2013).
&RP�R�FyGLJR�GD�)LJXUD������SRGH�VH�YHU�D�SiJLQD�FRP�RV�FDEHoDOKRV�H�SHUFHEHU�TXH��SDUD�FDGD�QtYHO��Ki�XPD�IRQWH�
diferente, sendo o maior com uma fonte maior e assim sucessivamente, como ilustra a Figura 2.6.
PORDENTRODOTEMA
�
Figura 2.6�3iJLQD�FRP�FDEHoDOKR�HP�WUrV�QtYHLV�
Fonte: Adaptada de Castro (2013).
2V�GRFXPHQWRV�+70/�SRVVXHP�XP�outline�EiVLFR��TXH�p�FRPR�XP�tQGLFH��GH¿QLGR�SHORV�HOHPHQWRV�GH�FDEHoDOKR��PDV�
este não é exibido explicitamente na página. Há ferramentas que permitem conferir o outline do documento.
e�SRVVtYHO�DJUXSDU�FDEHoDOKRV��SRLV�HOHV�SRGHP�WHU�GLYHUVRV�QtYHLV�FRQVHFXWLYRV��SDUD�LVVR�Ki�XP�HOHPHQWR��R�hgroup, 
TXH�LQGLFD�D�UHODomR�HQWUH�HOHV��&DGD�hgroup�SRGH�FRQWHU�GRLV�RX�PDLV�FDEHoDOKRV�K��K���PDV�QHQKXP�RXWUR�HOHPHQWR�
é permitido, somente o nível mais alto em um hgroup, que aparece no outline do documento. Para agrupar dois ou mais 
FDEHoDOKRV�p�VRPHQWH�VHJXLU�D�VHTXrQFLD�
1. Digitar <hgroup>.
2. Digitar na linha sequente <hn>, em que n pode variar de 1 a 6.
3. 1D�IUHQWH�GHVWD�LQVWUXomR�LQGLFDGD�HP����GLJLWH�R�FRQWH~GR�GR�FDEHoDOKR�
4. 3DUD�HQFHUUDU��QD�IUHQWH�GH�FDGD�FDEHoDOKR��FRPR�Mi�PRVWUDGR�DQWHULRUPHQWH��GHYH�VH�GLJLWDU���Kn>.
��� 'HYH�VH�UHSHWLU�RV�SDVVRV�GH���D���SDUD�R�Q~PHUR�GH�FDEHoDOKRV�TXH�GHYHP�FRQWHU�R�KJURXS�
6. 3DUD�¿QDOL]DU�HVWH�EORFR�GH�LQVWUXo}HV��GLJLWH���KJURXS!�
PORDENTRODOTEMA
��
2�H[HPSOR�GR�FyGLJR�H�GD�SiJLQD�XWLOL]DQGR�R�HOHPHQWR�hgroup pode ser visto na Figura 2.7.
Figura 2.7 Página com exemplo do uso do elemento <hgroup>.
2�<body>�GHSRLV�GR�HQFHUUDPHQWR�GR�FDEHoDOKR�p�XVDGR�SDUD�GDU�LQtFLR�DR�FRUSR�GD�SiJLQD��1HVWH�HVSDoR��GHYH�VHU�
LQFOXtGR�R�FRQWH~GR��SRU�LVVR�Ki�DOJXPDV�OLQKDV�HP�EUDQFR��2�H[HPSOR�HVWi�QD�)LJXUD������(VWH�FRQWH~GR�SRGH�LQFOXLU�
WH[WR��LPDJHQV��IRUPXOiULRV��iXGLR��YtGHR��GHQWUH�RXWURV��3DUD�HQFHUUDU��SULPHLUR�p�QHFHVViULD�D�LQVWUXomR�</body>, que 
encerra o corpo da página, e na próxima linha </html>�SDUD�¿QDOL]DU�D�SiJLQD��
PORDENTRODOTEMA
��
Figura 2.8 Página com exemplo do uso do elemento <body>.
1RV�VLWHV��Ki�TXDWUR�FRPSRQHQWHV�SULQFLSDLV��
1. 8PD�FDEHoD�FRP�D�QDYHJDomR�
2. 8P�DUWLJR�QD�iUHD�GR�FRQWH~GR�SULQFLSDO�
3. 8PD�EDUUD�ODWHUDO�FRP�LQIRUPDomR�FRPSOHPHQWDU�
4. 8P�URGDSp�
$�VHPkQWLFD�DSOLFDGD�j�FRQVWUXomR�GDV�SiJLQDV�FRPXQV�p�PXLWR�VHPHOKDQWH��VHP�LPSRUWDU�R�OD\RXW�
3DUD�PHOKRU�FRPSUHHQVmR��p�LPSRUWDQWH�WUDEDOKDU�FRP�RV�HOHPHQWRV�H�HQWHQGr�ORV�VHSDUDGDPHQWH�SDUD�LU�LQVHULQGR�RV�
QR�FyGLJR��&RPHoDQGR�FRP�R�HOHPHQWR�KHDGHU��VH�XPD�VHomR�GD�SiJLQD�WLYHU�XP�JUXSR�GH�FRQWH~GR�LQWURGXWyULR�RX�GH�
PORDENTRODOTEMA
��
QDYHJDomR��HVWH�GHYH�VHU�PDUFDGR�FRP�R�KHDGHU��1D�SiJLQD�SRGH�KDYHU�TXDOTXHU�Q~PHUR�GH�HOHPHQWRV�KHDGHU��FRP�
YiULRV�VLJQL¿FDGRV��GHSHQGHQGR�GR�FRQWH[WR��8P�KHDGHU�JHUDOPHQWH�LQFOXL�D�VHomR�GH�FDEHoDOKR��PDV�QmR�p�REULJDWyULR��
3DUD�VH�FULDU�XP�FDEHoDOKR�FRP�D�WDJ�header��GHYH�VH�VHJXLU�RV�VHJXLQWHV�SDVVRV�
1. 1R�FyGLJR��SRVLFLRQDU�R�FXUVRU�GHQWUR�GR�HOHPHQWR�HP�TXH�YDL�FULDU�R�FDEHoDOKR�2. 'LJLWH�D�LQVWUXomR��KHDGHU!�
3. Em sequência, digite o conteúdo do header. Este conteúdo pode incluir diversos tipos de conteúdos marcados com 
RV�HOHPHQWRV�+70/��8P�KHDGHU�SRGH�FRQWHU�FDEHoDOKRV��VpULH�GH�ORJRV��QDYHJDomR��FDPSR�GH�EXVFD��GHQWUH�RXWURV�
4. 3DUD�¿QDOL]DU�HVWD�WDJ��GLJLWH���KHDGHU!�
$WHQomR��XP�KHDGHU�QmR�SRGH�VHU�VXEVWLWXtGR�SRU�XP�FDEHoDOKR�
1R� +70/��� Ki� XP� HOHPHQWR� TXH� SRGH� UHSUHVHQWDU� H[SOLFLWDPHQWH� XPD� VHomR� GRV� OLQNV� GH� QDYHJDomR� SULQFLSDO�� R�
elemento nav��2V�OLQNV�HP�XP�nav podem apontar para um conteúdo dentro da página, para outras páginas, recursos ou 
ambos. Mas o nav deve ser usado somente para os grupos de links mais importantes. Para usar o nav�GHYH�VH�UHDOL]DU�
a sequência:
1. 'LJLWH�D�LQVWUXomR��QDY!�
2. Em sequência, digite a lista de links estruturados.
3. )LQDOL]H�GLJLWDQGR���QDY!�
8PD�LQGLFDomR�GR�+70/��p�QmR�HQYROYHU�OLQNV�QR�URGDSp�GH�SiJLQDV�DX[LOLDUHV�HP�XP�HOHPHQWR�nav��$�¿JXUD�����PRVWUD�
o exemplo deste elemento.
PORDENTRODOTEMA
��
Figura 2.9 Página com exemplo do uso do elemento <nav>.
2�+70/��FULRX�R�HOHPHQWR�article, que é para receber conteúdos como um artigo de uma revista, uma postagem em um 
blog, um comentário de um usuário ou qualquer outro item independente de conteúdo, que pode ser visto na Figura 2.10. 
8PD�SiJLQD�SRGH�FRQWHU�GLYHUVRV�HOHPHQWRV�article. Para criar um artigo, basta seguir a sequência:
1. Primeiro digite <article>.
2. 1D�VHTXrQFLD��GLJLWH�R�FRQWH~GR��(VWH�SRGH�VHU�TXDOTXHU�Q~PHUR�GH�HOHPHQWRV��FRPR�SDUiJUDIRV��OLVWDV��iXGLR��
YtGHR��LPDJHQV��¿JXUDV�GHQWUH�RXWURV�
3. 3DUD�¿QDOL]DU��GLJLWH���DUWLFOH!�
PORDENTRODOTEMA
��
$�OLQJXDJHP�+70/�SHUPLWH�D�GH¿QLomR�GH�XPD�VHomR�FRP�R�HOHPHQWR�section, considerado um primo semântico menos 
HVSHFt¿FR��TXH�WDPEpP�p�H[FOXVLYR�GR�+70/���(VWH�HOHPHQWR�UHSUHVHQWD�XPD�VHomR�JHQpULFD�GH�XP�GRFXPHQWR�RX�
DSOLFDWLYR��p�XP�JUXSR�WHPiWLFR�GH�FRQWH~GR�QRUPDOPHQWH�FRP�XP�FDEHoDOKR��3DUD�HVWH�HOHPHQWR��VmR�H[HPSORV�RV�
FDStWXORV��DV�YiULDV�DEDV�GH�SiJLQDV�HP�XPD�FDL[D�GH�GLiORJR�WDEXODGD��VHo}HV�QXPHUDGDV�GH�XPD�WHVH�H�WDPEpP�D�
GLYLVmR�GD�KRPHSDJH�GH�XP�VLWH��3RGH�VH�GL]HU�TXH�D�section é semelhante ao article��H��SDUD�GLIHUHQFLi�ORV��p�QHFHVViULR�
YHUL¿FDU�D�EDUUD�ODWHUDO��TXH�p�PRVWUDGD�QD�)LJXUD�������3DUD�GH¿QLU�XPD�VHomR�p�VLPSOHV�
1. 2�SULPHLUR�SDVVR�p�LQGLFi�OD�GLJLWDQGR��VHFWLRQ!�
2. &RPR�HVWDPRV�QD�iUHD�GD�VHomR��DJRUD�GHYH�VHU�GLJLWDGR�R�FRQWH~GR��(VWH�SRGH�VHU�SDUiJUDIRV�� OLVWDV��iXGLR��
YtGHR��LPDJHQV��¿JXUDV�GHQWUH�RXWURV�
3. 3DUD�¿QDOL]DU��p�Vy�GLJLWDU���VHFWLRQ!�
Figura 2.10 Página com exemplo do uso dos elementos <article> e <section>.
2XWUR�HOHPHQWR�SUySULR�GR�+70/��p�R�aside��TXH�p�XVDGR�SDUD�LQGLFDU��GH�IRUPD�VHPkQWLFD��XPD�VHomR�GH�FRQWH~GR�TXH�
é relacionada ao conteúdo principal que permite ser sustentada por conta própria. Como exemplo, podemos citar: uma 
FLWDomR�HP�GHVWDTXH��XPD�EDUUD�ODWHUDO��XPD�FDL[D�GH�OLQNV�GH�DUWLJRV�UHODFLRQDGRV�HP�XP�VLWH�H�XPD�OLVWD�GH�SURGXWRV�
UHODFLRQDGRV�HP�XP�VLWH�GH�YHQGDV��FRPR�LOXVWUDGR�QD�)LJXUD�������3DUD�HVSHFL¿Fi�OR�
PORDENTRODOTEMA
��
1. 2�SULPHLUR�SDVVR�p�GLJLWDU��DVLGH!�
2. 'HSRLV� GH� LQGLFi�OR�� p� QHFHVViULR� GLJLWDU� R� FRQWH~GR�� TXH� SRGH� FRQWHU� TXDOTXHU� Q~PHUR� GH� HOHPHQWRV�� FRPR�
SDUiJUDIRV��OLVWDV��iXGLR��YtGHR��LPDJHQV��¿JXUDV�H�RXWURV�
3. 3DUD�HQFHUUDU��GHYH�VH�GLJLWDU���DVLGH!�
Figura 2.11 Página com exemplo do uso do elemento <aside>.
&RPR�p�FULDGR�R�FDEHoDOKR��HP�XPD�SiJLQD�EHP�HVWUXWXUDGD��FULD�VH�WDPEpP�R�URGDSp��DVVLP��Ki�R�HOHPHQWR�footer do 
+70/���(VWH�HOHPHQWR��FRPR�R�KHDGHU��SRGH�VHU�XVDGR�HP�RXWUR�OXJDU��(VWH�p�R�URGDSp�GD�SiJLQD�WRGD�FXMR�DQFHVWUDO�PDLV�
próximo é o body��2�URGDSp�VHPSUH�SRVVXL�LQIRUPDo}HV�VREUH�D�VHomR�H�YRFr�SRGH�DQLQKDU�XP�header ou outro footer 
dentro de um footer. A Figura 2.12 ilustra um exemplo de footer. Para ter o rodapé em sua página realize a sequência:
1. 2�SULPHLUR�SDVVR�p�SRVLFLRQDU�R�FXUVRU�GHQWUR�GR�HOHPHQWR�TXH�YDL�FULDU�R�URGDSp�
2. 1D�VHTXrQFLD��GLJLWH��IRRWHU!�
3. Depois de indicado o rodapé, basta incluir o conteúdo.
4. 3DUD�¿QDOL]DU�R�URGDSp��GLJLWH���IRRWHU!�
PORDENTRODOTEMA
��
Figura 2.12 Página com exemplo do uso do elemento <footer>.
1D�SiJLQD��SRGH�VH�DGLFLRQDU�FRPHQWiULRV��FRPR�LOXVWUD�R�FyGLJR�GD�)LJXUD�������TXH�p�XP�UHFXUVR�GH�TXH�SUHFLVDPRV�
SDUD�GRFXPHQWi�OD��H�R�FRPHQWiULR�Vy�YDL�DSDUHFHU�VH�R�GRFXPHQWR�IRU�DEHUWR�FRP�XP�HGLWRU�GH�WH[WR�RX�QD�RSomR�GH�
YLVXDOL]DU�R�FyGLJR��3DUD�DGLFLRQi�OR�
1. (VFROKD�R�ORFDO�GHQWUR�GH�VHX�GRFXPHQWR�RQGH�GHVHMD�LQVHULU�R�FRPHQWiULR��GHYH�VH�GLJLWDU������
2. 1D�VHTXrQFLD��GLJLWH�R�FRPHQWiULR�
3. 3DUD�FRPSOHWDU�H�HQFHUUDU�R�FRPHQWiULR��GLJLWH���!��
PORDENTRODOTEMA
��
Figura 2.13 Código com comentário no código.
Textos no (X)HTML
Em qualquer página, é fácil notar que a maior parte do seu conteúdo é o texto. Para iniciar o texto, devemos iniciar 
R�SDUiJUDIR��6HJXQGR�&DVWUR���������R�+70/�QmR�UHFRQKHFH�RV�UHWRUQRV�RX�HVSDoRV�HP�EUDQFR�GLJLWDGRV�QR�HGLWRU�GH�
WH[WR��2�HOHPHQWR�XVDGR�SDUD�R�SDUiJUDIR�p�R�p��XVDGR�QRV�FyGLJRV�GRV�H[HPSORV�GDV�¿JXUDV�DQWHULRUHV��(VWH�GHYH�
realizar a sequência:
1. Para iniciar o parágrafo, digite <p>.
2. 1D�VHTXrQFLD��GLJLWH�R�FRQWH~GR�GR�SDUiJUDIR�
3. 3DUD�¿QDOL]DU�R�SDUiJUDIR��GLJLWH���S!�
PORDENTRODOTEMA
��
1R�WH[WR��Ki�PXLWRV�WLSRV�GH�LQIRUPDo}HV�TXH�GHYHP�VHU�FRORFDGDV��3RU�H[HPSOR��HP�XP�DUWLJR�GHYHPRV�LQFOXLU�LQIRUPDo}HV�
GH�FRQWDWR�GR�DXWRU��PDV�FRPR�DGLFLRQi�OD"�2�+70/�SRVVXL�R�HOHPHQWR�address, TXH�GH¿QH�D�LQIRUPDomR�GH�FRQWDWR�
para pessoas em uma página, como mostra a Figura 2.14. Para este elemento, devemos realizar a sequência:
1. &DVR�D�LQIRUPDomR�GH�FRQWDWR�VHMD�SDUD�XP�DUWLFOH��R�FXUVRU�GHYHUi�VHU�FRORFDGR�GHQWUR�GHVWH�HOHPHQWR��2�FXUVRU�
WDPEpP�SRGH�VHU�FRORFDGR�GHQWUR�GH�ERG\�RX�QR�IRRWHU��VH�D�LQIRUPDomR�IRU�JHUDO�
2. Para iniciar, digite <address>.
3. 1D�VHTXrQFLD��GLJLWH�R�HQGHUHoR�GR�H�PDLO�GR�DXWRU��XP�OLQN�SDUD�XPD�SiJLQD�FRP�LQIRUPDomR�SDUD�FRQWDWR�
4. 3DUD�¿QDOL]DU��GLJLWH���DGGUHVV!�
Figura 2.14 Página com exemplo do elemento <address>.
(P�TXDVH�WRGDV�DV�SiJLQDV�HQFRQWUDP�VH�¿JXUDV��PDV�Ki�¿JXUDV�GH�WLSRV�YDULDGRV��FRPR�PRVWUD�D�)LJXUD�������1R�
+70/���Ki�R�HOHPHQWR�¿JXUH, que é uma parte do conteúdo autocontida, associada ao conteúdo principal do documento. 
Há o elemento ¿JFDSWLRQ, que é opcional, é a legenda da ¿JXUH�H�SRGH�DSDUHFHU�QR�LQtFLR�RX�QR�¿QDO�GR�FRQWH~GR�GD�
¿JXUD��3DUD�LQFOXLU�XPD�¿JXUD�FRP�OHJHQGD��GHYH�VH�VHJXLU�RV�VHJXLQWHV�SDVVRV�
PORDENTRODOTEMA
��
1. ,QLFLH�GLJLWDQGR��¿JXUH!�
2. 6H�GHVHMDU�LQFOXLU�OHJHQGD�GLJLWH��¿JFDSWLRQ!�
3. 6H�IRU�GLJLWDGR�R��¿JFDSWLRQ!��QD�VHTXrQFLD��GLJLWH�R�WH[WR�GD�OHJHQGD�
4. 3DUD�¿QDOL]DU�D�OHJHQGD��GLJLWH���¿JFDSWLRQ!�
��� &ULH�D�¿JXUD�DGLFLRQDQGR�R�FyGLJR�SDUD�LPDJHQV��YtGHRV��WDEHODV��HWF�
6. 6H�GHVHMDU�FRORFDU�OHJHQGD�QHVWH�HVSDoR��VLJD�RV�SDVVRV�GH���D���
7. 3DUD�¿QDOL]DU�GLJLWH���¿JXUH!�
Figura 2.15�([HPSOR�GR�HOHPHQWR��¿JXUH!�
Fonte: Adaptada de: <KWWS���KWPO�GRFWRU�FRP�WKH�¿JXUH�¿JFDSWLRQ�HOHPHQWV�>��$FHVVR�HP�����MDQ�������
PORDENTRODOTEMA
��
6mR�YiULRV�LWHQV�TXH�LQFOXtPRV�HP�XP�WH[WR��FRPR�D�GDWD��jV�YH]HV�p�QHFHVViULR�HVSHFL¿FDU�R�WHPSR��H�HVWH�VH�ID]�SRU�
meio do elemento time e do atributo datetime. Se o atributo datetime for omitido, é fornecida a data e a hora no formato 
válido, ilustrado na Figura 2.16. Quando é incluído o datetime��YRFr�SRGH�GH¿QLU�D�UHSUHVHQWDomR�GD�GDWD��3DUD�XPD�KRUD�
exata e uma data do calendário, basta seguir estes passos:
1. Para iniciar, digite <time>, se não utilizar o datetime.
2. 6H�GHVHMDU�HVSHFL¿FDU�R�IRUPDWR�SRGH�GLJLWDU�R�datetime sendo então: <time datetime=”formato”>.
3. &DVR�D�KRUD�UHSUHVHQWH�D�GDWD�GH�SXEOLFDomR��QHVWH�FDVR��GHYH�VH�GLJLWDU�SXEGDWH ´SXEGDWH´�RX�SXEGDWH�
4. 3DUD�¿QDOL]DU��GLJLWH���WLPH!�
Figura 2.16 Exemplo do elemento <time>.
2�WH[WR�SRGH�H�jV�YH]HV�GHYH�VHU�PDUFDGR�FRPR�LPSRUWDQWH��FRPR�PRVWUD�D�)LJXUD�������H��SDUD�HVWH�UHFXUVR��Ki�R�elemento strong. Assim:
1. Para iniciar, digite <strong>.
���1D�VHTXrQFLD��GHYH�VHU�GLJLWDGR�R�WH[WR�RX�SDUWH�GR�WH[WR�TXH�SUHFLVD�VHU�PDUFDGR�FRPR�LPSRUWDQWH�
���3DUD�¿QDOL]DU��GLJLWH���VWURQJ!�
PORDENTRODOTEMA
��
Figura 2.17 Exemplo do elemento <strong>.
6H�D�QHFHVVLGDGH�IRU�GH�HQIDWL]DU�R�WH[WR��DV�LQVWUXo}HV�VmR�DV�VHJXLQWHV�
1. Para inicializar este procedimento, digite <em>.
2. 1HVWD�SDUWH��GHYH�VHU�GLJLWDGR�R�WH[WR�D�VHU�HQIDWL]DGR�
3. 3DUD�¿QDOL]DU��GLWH���HP!�
e�SRVVtYHO�PDUFDU�H�HQIDWL]DU�R�WH[WR�DR�PHVPR�WHPSR�GH�DFRUGR�FRP�R�TXH�IRU�SUHFLVR��1HVWH�FRQWH[WR��p�SRVVtYHO�
WDPEpP�LQGLFDU�XPD�FLWDomR�RX�UHIHUrQFLD��R�TXH�p�IHLWR�DWUDYpV�GR�HOHPHQWR�cite��1HVWH�FDVR��SRGH�VH�WHU�WtWXORV�GH�XPD�
SHoD��URWHLUR�RX�OLYUR��QRPH�GH�P~VLFD�RX�¿OPH��HWF��'HYH�VHU�GHQWUR�GD�UHJUD�
1. Para iniciar, digite <cite>.
2. 1D�VHTXrQFLD��GHYH�VH�LQWURGX]LU�D�UHIHUrQFLD�
3. 3DUD�¿QDOL]DU��GLJLWH���FLWH!�
Para citar fontes é diferente, há o elemento blockquote�TXH�p�XVDGR�TXDQGR�D�FLWDomR�p�ORQJD��+i�WDPEpP�R�HOHPHQWR�
q�SDUD�FLWDo}HV�FXUWDV��JHUDOPHQWH�GHQWUR�GH�XPD�VHQWHQoD��
PORDENTRODOTEMA
��
3DUD�ORQJDV�FLWDo}HV��GHYH�VHU�XVDGR�FRPR�VHJXH�
1. ,QLFLD�VH�D�SDUWLU�GD�GLJLWDomR�GH��EORFNTXRWH�
2. Se precisar, digite ‘cite=”url”, em que “url´�p�R�HQGHUHoR�GD�IRQWH�GD�FLWDomR�
3. 1mR�VH�HVTXHoD�GH�GLJLWDU�!�SDUD�FRPSOHWDU�D�WDJ�LQLFLDO�
4. 1D�VHTXrQFLD��GLJLWH�R�WH[WR�
��� 3DUD�¿QDOL]DU��GLJLWH���EORFNTXRWH!�
(P�FDVRV�GH�FLWDo}HV�RX�IUDVHV�FXUWDV��GHYH�VH�VHJXLU�
1. Para iniciar digite <q.
2. Se precisar, digite ‘cite=”url”, em que “url´�p�R�HQGHUHoR�GD�IRQWH�GD�FLWDomR�
3. 1mR�VH�HVTXHoD�GH�GLJLWDU�!�SDUD�FRPSOHWDU�D�WDJ�LQLFLDO�
4. 1D�VHTXrQFLD��GLJLWH�R�WH[WR�
��� 3DUD�¿QDOL]DU��GLJLWH���T!�
Para destacar ou marcar o texto, tem o elemento mark��FRPR�XPD�FDQHWD�PDUFD�WH[WR��TXH�SRGH�VHU�REVHUYDGR�QD�
)LJXUD�������(VWD�PDUFDomR�Vy�GHYH�VHU�XWLOL]DGD�TXDQGR�QHFHVViULR��SRLV�p�VRPHQWH�SDUD�FKDPDU�D�DWHQomR�GR�OHLWRU��
'HYH�VH�VHJXLU�RV�SDVVRV�
1. Inicie digitando <mark>.
2. 1D�VHTXrQFLD��GLJLWH�DV�SDODYUDV�D�VHUHP�GHVWDFDGDV�
3. 3DUD�HQFHUUDU�D�PDUFDomR��GLJLWH���PDUN!�
PORDENTRODOTEMA
��
Figura 2.18 Exemplo do elemento <mark>.
2�+70/�IRUQHFH�LQ~PHURV�UHFXUVRV��FRP�YiULRV�HOHPHQWRV��SDUD�GHWDOKHV��jV�YH]HV�SHTXHQRV�H�EHP�HVSHFt¿FRV��SDUD�
textos. 
PORDENTRODOTEMA
Apostila de HTML e CSS
‡� Leia a Apostila de HTML e CSS que abrange a linguagem HTML. Consulte as páginas de 4 a 
17 para ver detalhes dos elementos a serem utilizados nas páginas dos sites.
Disponível em: <KWWSV���ZZZ�WHOHFRP�XII�EU�SHW�SHWZV�GRZQORDGV�WXWRULDLV�FVV�FVV�N������SGI>. Acesso em: 10 
nov. 2014.
textos.
CSS
ACOMPANHENAWEB
��
Estrutura do HTML
‡� Para complementar este tema, acesse essa página que trata da estrutura do HTML bem como 
dos passos iniciais e principais para o desenvolvimento de códigos em HTML.
Disponível em: <KWWS���ZZZ�HGXFDFDRSXEOLFD�UM�JRY�EU�RILFLQDV�LQIRUPDWLFD�KWPO�HVWUXWXUD�KWP>. Acesso em: 11 
nov. 2014.
ACOMPANHENAWEBACOMPANHENAWEB
Instruções:
$JRUD��FKHJRX�D�VXD�YH]�GH�H[HUFLWDU�VHX�DSUHQGL]DGR��$�VHJXLU��YRFr�HQFRQWUDUi�DOJXPDV�TXHVW}HV�GH�P~OWLSOD�
HVFROKD�H�GLVVHUWDWLYDV��/HLD�FXLGDGRVDPHQWH�RV�HQXQFLDGRV�H�DWHQWH�VH�SDUD�R�TXH�HVWi�VHQGR�SHGLGR�
nov. 2014.
AGORAÉASUAVEZ
Questão 1
Para criar uma página na web, é importante saber qual editor de texto usar. Podemos usar vários editores, como o bloco de notas 
RX�SURJUDPDV�HVSHFt¿FRV�SDUD�R�+70/��VHQGR�DOJXQV�DWp�JUDWXLWRV��PDV�QHP�WRGRV�HVVHV�HGLWRUHV�VmR�UHFRPHQGiYHLV��3RGHPRV�
desenvolver uma página em qualquer processador de texto? Explique.
��
Questão 2
Para criar uma página, devemos ter um código básico correto. Dentre os códigos mencionados a seguir, assinale o correto:
a) 
��'2&7<3(�KWPO!
<html lang="en">
<head>
����PHWD�FKDUVHW �87)�����!
<title> 
��KHDG!
�ERG\!��ERG\!
��KWPO!
b) 
��'2&7<3(�KWPO!
<html lang="en">
<head>
����PHWD�FKDUVHW �87)�����!
�WLWOH!���WLWOH!
��KHDG!
<body>
��ERG\!
��KWPO!
c) 
��'2&7<3(�KWPO!
<html lang="en">
<head>
����PHWD�FKDUVHW �87)�����!
�WLWOH!���WLWOH!
��KHDG!
<body>
��ERG\!
d) 
��'2&7<3(�KWPO!
<html lang="en">
<head>
����PHWD�FKDUVHW �87)�����!
��KHDG!
�WLWOH!���WLWOH!
��KHDG!
<body>
��KWPO!
e) 
��'2&7<3(�KWPO!
<html lang="en">
����PHWD�FKDUVHW �87)�����!
�WLWOH!���WLWOH!
��KHDG!
<body>
��ERG\!
��KWPO!
AGORAÉASUAVEZ
��
AGORAÉASUAVEZ
Questão 3
$QDOLVH�DV�VHQWHQoDV�D�VHJXLU�H�MXOJXH�FDGD�XPD�GHODV�FRPR�YHUGDGHLUD�RX�IDOVD��
¬V�YH]HV��p�QHFHVViULR�HVSHFL¿FDU�R�WHPSR��H�HVWH�VH�ID]�DWUDYpV�GR�HOHPHQWR�time. Mas, neste contexto, há o atributo datetime. 
6REUH�HVWH�DWULEXWR��SRGHPRV�D¿UPDU�TXH�
�����1mR�SRGH�VHU�RPLWLGR�TXDQGR�XWLOL]DGR�R�HOHPHQWR�time��SRLV�R�WHPSR�¿FD�VHP�HVSHFL¿FDomR�FRUUHWD�
( ) Se o atributo datetime for omitido, não é fornecida a data e a hora no formato válido.
( ) Sobre os elementos time e datetime��XWLOL]D�VH�VRPHQWH�XP��QmR�VHQGR�DFHLWR�RV�GRLV�
( ) Quando é incluído o datetime��D�UHSUHVHQWDomR�GD�GDWD�SRGH�VHU�GH¿QLGD�
Questão 4
2�+70/�IRUQHFH�VHLV�QtYHLV�GH�FDEHoDOKR�SDUD�TXH��DVVLP��SRVVD�WHU�XPD�KLHUDUTXLD�GDV�LQIRUPDo}HV�GDV�SiJLQDV��'HVVD�IRUPD��
RV�HOHPHQWRV�SRGHP�VHU�PDUFDGRV��VHQGR�R�FDEHoDOKR�K��R�PDLV�DOWR��$�SDUWLU�GR�FyGLJR�GD�)LJXUD������LQWURGX]D�XP�FDEHoDOKR�
com três níveis.
Questão 5
Para destacar ou marcar o texto, há o elemento mark��TXH�IXQFLRQD�FRPR�XPD�FDQHWD�PDUFD�WH[WR��$SURYHLWDQGR�R�FyGLJR�GD�
TXHVWmR�DQWHULRU��PDUTXH�R�FDEHoDOKR�GR�QtYHO���
��
Este tema possibilitou a você conhecer a estrutura básica para montar uma página em HTML. Você pode agora 
FRPHoDU� D� GHVHQYROYHU� SiJLQDV� XWLOL]DQGR� RV� UHFXUVRV� DSUHQGLGRV�� FRPR� R� FyGLJR� EiVLFR�� LQWURGXomR� GH� WtWXORV� H�
FDEHoDOKRV��HWF��1D�SiJLQD��D�SDUWH�SULQFLSDO�p�R�WH[WR�LQVHULGR��H��SDUD�HVWH��IRL�GHGLFDGD�XP�JUDQGH�HVSDoR��DSUHVHQWDQGR�
GHWDOKHV�HVSHFt¿FRV�H�H[SOLFDQGR�HOHPHQWRV�EiVLFRV�SDUD�TXH�VH�SRVVD�LQVHULU�XP�WH[WR�FRP�TXDOLGDGH��+i�GHWDOKHV�
QDV�SiJLQDV�TXH�WRGRV�GHYHP�FRORFDU��FRPR�D�GDWD�H�DV�PDUFDo}HV�HVSHFt¿FDV�SDUD�FKDPDU�D�DWHQomR�GR�XVXiULR��3DUD�
que você pudesse entender bem a linguagem, foram apresentados trechos de códigos com os elementos determinados 
e também o resultado na página, para que esse acompanhamento não gere dúvidas, mas traga mais conhecimentos.
E ibili ê h bá i á i HTML V ê d
FINALIZANDO
&$6752��(OL]DEHWK��HTML5 e CSS3: guia prático e visual. Jacaré: Alta Books, 2013.
FERREIRA, Elcio; EIS, Diego. HTML 5: curso W3C Escritório Brasil. Apostila. 2011. Disponível em <KWWS���ZZZ�RILFLQDGDQHW�
FRP�EU�LPDJHQV�DSRVWLODV�����KWPO��ZHE�SGI>. Acesso em: 4 nov. 2014.
0$1=$12��-RVp�$��1��*��72/('2��6XHO\�$OYHV��*XLD�GH�RULHQWDomR�H�GHVHQYROYLPHQWR�GH�VLWHV��+70/��;+70/��&66�H�
-DYD6FULSW�-6FULSW��6mR�3DXOR��eULFD�������
0(<(5��eULFD�$��Smashing CSS. 7pFQLFDV�SUR¿VVLRQDLV�SDUD�XP�OD\RXW�PRGHUQR��'DGRV�(OHWU{QLFRV��3RUWR�$OHJUH��%RRNPDQ�������
0,/(72��(YDQGUR�0DQDUD��%(57$*12//,��6tOYLD�GH�&DVWUR��Desenvolvimento de Software II��LQWURGXomR�DR�GHVHQYROYLPHQWR�
ZHE�FRP�+70/��&66��-DYD6FULSW�H�3+3��'DGRV�(OHWU{QLFRV. Porto Alegre: Bookman, 2014.
PIVETTA, Elisa Maria. Apostila de HTML e CSS. 2010. Disponível em: <KWWSV���ZZZ�WHOHFRP�XII�EU�SHW�SHWZV�GRZQORDGV�WXWRULDLV�FVV�
FVV�N������SGI>. Acesso em: 3 nov. 2014.
35$'2��0iUFLR�)HOLFLDQR�GR��$SRVWLOD�GH�+70/�H�&66��81,&$03��0LQLFXUVRV�YLUWXDLV��&DPSLQDV��8QLFDPS��������'LVSRQtYHO�
em: <KWWS���ZZZ�PDUFLRSUDGR�HWL�EU�HQVLQR�KWPO"GRZQORDG ���$DSRVWLODKWPO>��$FHVVR�HP����QRY�������
e também o resultado na página, para que esse acompanhamento não gere dúvidas, mas traga mais conhecimentos.
REFERÊNCIAS
��
Assets: termo utilizado para designar o que complementa o conteúdo das páginas web.
Doctype:�WLSR�GH�PDUFDomR�TXH�GHVFUHYH�R�WH[WR�HVFULWR�QD�SiJLQD�ZHE�
Javascript:é uma linguagem interpretada que pode ser utilizada junto com o HTML.
Processadores de texto:�SURJUDPDV�HVSHFt¿FRV�SDUD�HVFUHYHU��GLJLWDU�WH[WRV�QR�FRPSXWDGRU��&RP�HOHV�p�SRVVtYHO�FULDU�
documentos simples e até arquivos complexos.
Servidor:�p�XP�FRPSXWDGRU�HP�XP�VLVWHPD�GH�FRPSXWDomR�FHQWUDOL]DGD��HVSHFt¿FR�SDUD�WUDQVPLWLU�LQIRUPDo}HV�H�IRU�
QHFHU�VHUYLoRV�D�FRPSXWDGRUHV�TXH�HVWLYHUHP�FRQHFWDGRV�D�HOH�HP�XPD�UHGH�GH�FRPSXWDGRUHV�
UTF-8:�p�XPD�WDEHOD�GH�FDUDFWHUHV�XQLFRGH��FRQMXQWR�GH�FDUDFWHUHV�SDUD�GRFXPHQWRV�+70/���8P�WLSR�GH�FRGL¿FDomR�
de caracteres.
A ili d d i l úd d á i b
GLOSSÁRIO
GABARITO
Questão 1
Resposta: 1mR��1mR�p� UHFRPHQGDGR�D�XWLOL]DomR�GH�SURFHVVDGRUHV�GH� WH[WR�FRPR�R�0LFURVRIW�:RUG��SRLV�HOH�SRGH�
incluir códigos inválidos e atrapalhar o desenvolvimento da página. Esta é criada com um editor de texto, mas pode ser 
visualizada por múltiplos navegadores de diversas plataformas.
Questão 2
Resposta: Alternativa B.
1D�DOWHUQDWLYD�a��IDOWD�R�HOHPHQWR���WLWOH!�SDUD�¿QDOL]DU��QD�c��IDOWD�R�HOHPHQWR���KWPO!�SDUD�¿QDOL]DU�D�FRGL¿FDomR��QD�d, há 
GXDV�YH]HV�R�HOHPHQWR���KHDG!�H�IDOWD�R�HOHPHQWR���ERG\!��QD�e��IDOWD�R�HOHPHQWR��KHDG!�SDUD�LQLFLDOL]DU�R�FDEHoDOKR��
¿QDOL]DGR�QDV�SUy[LPDV�OLQKDV�
��
Questão 3
Resposta: 
(F) 1mR�SRGH�VHU�RPLWLGR�TXDQGR�XWLOL]DGR�R�HOHPHQWR� time��SRLV�R�WHPSR�¿FD�VHP�HVSHFL¿FDomR�FRUUHWD��O atributo 
datetime pode sim ser omitido.
(F) Se o atributo datetime for omitido, não é fornecida a data e a hora no formato válido. Somente com o elemento time 
é fornecida a data e a hora no formato válido.
(F) Sobre os elementos time e datetime��XWLOL]D�VH�VRPHQWH�XP��QmR�VHQGR�DFHLWR�RV�GRLV��O datetime é um atributo do 
elemento time, podendo ou não serem utilizados juntos.
(V) Quando é incluído o datetime��D�UHSUHVHQWDomR�GD�GDWD�SRGH�VHU�GH¿QLGD�
Questão 4
Resposta: 
<html>
<head>
<title>
Teste com HTML
��WLWOH!
��KHDG!
<head>
�K�!�1tYHO�����K�!
�K�!�1tYHO�����K�!
�K�!�1tYHO�����K�!
��KHDG!
<body bgcolor="white" >
Cor do fundo da página 
HTML.
��ERG\!
��KWPO!
��
Questão 5
Resposta: 
)HUUDPHQWDV�SDUD�6LVWHPD�:(%
Autoria: Virgínia Mara Cardoso
Tema 03
Trabalhando com Imagens e Links
7HPD���
Trabalhando com Imagens e Links
Autoria: Virgínia Mara Cardoso
Como citar esse documento:
CARDOSO, Virgínia Mara. Ferramentas para Sistema WEB: Trabalhando com Imagens e Links. Caderno de Atividades. Anhanguera Educacional: 
Valinhos, 2014.
Índice
‹������$QKDQJXHUD�(GXFDFLRQDO�� 3URLELGD� D� UHSURGXomR� ¿QDO� RX� SDUFLDO� SRU� TXDOTXHU�PHLR� GH� LPSUHVVmR�� HP� IRUPD� LGrQWLFD�� UHVXPLGD� RX�PRGL¿FDGD� HP� OtQJXD�
SRUWXJXHVD�RX�TXDOTXHU�RXWUR�LGLRPD�
Pág. 16
Pág. 17 Pág. 18
Pág. 16
Pág. 14Pág. 13
ACOMPANHENAWEB
Pág. 3
CONVITEÀLEITURA
Pág. 3
PORDENTRODOTEMA
�
Trabalhando com Imagens e Links
Imagens para a Web
Todo o texto deste tema está baseado em Castro (2013), incluindo também a leitura de Ferreira e Eis (2011), 
Manzano e Toledo (2010), Meyer (2011), Mileto e Bertagnolli (2014) e Prado (2002). São vários os elementos que já 
IRUDP�PRVWUDGRV�SDUD�TXH�VH�SRVVD�FRQVWUXLU�XPD�SiJLQD��PDV�HVWD�GHYH�VHU� LOXVWUDGD�GH�PDQHLUD�TXH� LQÀXHQFLH�D�
estética e o visual. Isso é possível com a inserção de imagens, a harmonização das cores e o design a ser considerado 
para o site. Esse recurso deve ser utilizado com cuidado, pois o excesso de imagens em um site pode torná-lo pesado, 
Este tema possibilita a você, com uma boa leitura, saber detalhes para inserir imagens em uma página web. Uma 
página deve ser bem ilustrada, com um visual agradável, razão pela qual é necessário que você aprenda detalhes 
VREUH�DV�LPDJHQV�TXH�GHYHP�VHU�WUDEDOKDGDV��D�¿P�GH�TXH�SRVVD�KDYHU�XP�UHVXOWDGR�¿QDO�FRQIRUPH�R�HVSHUDGR��9RFr�
DSUHQGHUi�D�LQVHULU�LPDJHQV�H�H[LEL�ODV�FRP�SUHFLVmR��DOpP�GH�GHL[i�ODV�EHP�GLVSRVWDV�QDV�SiJLQDV��9RFr�FRQKHFHUi�RV�
VHLV�IDWRUHV�SULQFLSDLV�SDUD�RV�TXDLV�p�SUHFLVR�DWHQWDU�VH�D�¿P�GH�TXH�DV�LPDJHQV�SRVVDP�VHU�GLIHUHQFLDGDV��6REUH�RV�
formatos da imagem, você vai saber decidir qual é o melhor deles para cada caso, com suas vantagens e desvantagens. 
Em caso de haver interesse por uma página com cores vibrantes ou de sua preferência, o tema traz uma abordagem de 
FRPR�GHYHP�VHU�DV�LQVWUXo}HV�QR�VHX�FyGLJR�IRQWH��9RFr�YHUi�DLQGD�YiULRV�QRYRV�UHFXUVRV��DR�LQVWUXLU�VH�FRPR�WUDEDOKDU�
com tamanho e resolução das imagens, bem como com transparência, velocidade e animação. Na segunda parte deste 
WHPD��YRFr�YDL�DSUHQGHU�VREUH�RV�OLQNV��UHFXUVRV�TXH�GmR�YLGD�j�ZHE��SRLV�SHUPLWHP�FRQHFWDU�XPD�SiJLQD�D�RXWUD��9RFr�
entenderá como esses links são divididos e como são as instruções que devem ser colocadas, além de conectar não 
VRPHQWH�SiJLQDV�VXDV�PDV�RXWUDV�GH�VHX�LQWHUHVVH��3DUD�FRQFOXLU��VmR�PRVWUDGDV�LQVWUXo}HV�HVSHFt¿FDV�SDUD�D�LQFOXVmR�
de imagens e links em uma página da web.
CONVITEÀLEITURA
T b lh d I Li k
PORDENTRODOTEMA
�
R�TXH�DFDUUHWDUi�GL¿FXOGDGH�GH�YLVXDOL]DomR�HP�FRPSXWDGRUHV�PDLV�VLPSOHV��&RPR�GHYHPRV�LQVHULU�LPDJHQV�H�H[LEL�ODV�
FRP�SUHFLVmR"�3DUD�VDEHU�FULDU�DV�LPDJHQV�QD�ZHE�H�ID]HU�FRP�TXH�HODV�¿TXHP�EHP�GLVSRVWDV�QDV�SiJLQDV��Ki�VHLV�
IDWRUHV�SULQFLSDLV�SDUD�RV�TXDLV�p�SUHFLVR�DWHQWDU�VH�D�¿P�GH�TXH�HODV�SRVVDP�VHU�GLIHUHQFLDGDV��6mR�HOHV��IRUPDWR��FRU��
tamanho/resolução, velocidade, transparência e animação. 
Primeiramente, é importante saber sobre o formato, pois a imagem vai ser salva e deve ser acessada sem problemas, 
não importando os sistemas operacionais��$WXDOPHQWH��RV�IRUPDWRV�PDLV�XWLOL]DGRV�QD�ZHE�VmR��*,)��31*�H�-3(*��
Para saber escolher o formato ideal, é preciso pensar naquele que fornece uma melhor qualidade de imagem com 
PHQRU�WDPDQKR�GH�DUTXLYR��'HQWUH�RV�FLWDGRV��p�SRVVtYHO�GLYLGL�ORV�GD�VHJXLQWH�IRUPD�
���-3(*��p�LQGLFDGR�SDUD�IRWRV�FRORULGDV��Mi�TXH�FRP�HOH�VH�PDQLSXOD�XPD�JUDQGH�TXDQWLGDGH�GH�FRUHV��$OpP�GLVVR��
o arquivo é comprimido, oferecendo a vantagem de a página ser rapidamente carregada. Mas, nesse processo, há a 
desvantagem de ocorrerem perdas das informações originais da imagem.
���*,)��p�XWLOL]DGR�SDUD�DUTXLYRV�FRPR�ORJRV��FRP�JUDQGH�TXDQWLGDGH�GH�FRUHV�VyOLGDV�H�SDGU}HV��RX�TXDQGR�Ki�D�
necessidade de transparência. Consegue comprimir áreas de cores contínuas ou padrões repetitivos melhor que o 
IRUPDWR�-3(*�
���31*��p�D�PHOKRU�HVFROKD��VHQGR�XVDGR�WDPEpP�SDUD�DUTXLYRV�FRPR�ORJRV�FRP�JUDQGH�TXDQWLGDGH�GH�FRUHV�VyOLGDV�
e padrões ou quando há a necessidade de transparência. Possui um algoritmo de compressão melhor para arquivos 
menores e tem um suporte para transparência superior.
1D�)LJXUD�����DSUHVHQWDP�VH�R�FyGLJR�H�GXDV�LPDJHQV�FRP�IRUPDWR�*,)��D�VHJXQGD�GHODV��LQFOXVLYH��p�DQLPDGD��FRPR�
YRFr�SRGH�REVHUYDU�
PORDENTRODOTEMA
�
Figura 3.1�&yGLJR�H�LPDJHP�FRP�IRUPDWR�*,)
)RQWH��DGDSWDGR�GH��KWWS���ZZZ�FOHP�XIED�EU�WXWV�KWPO�F���KWP!.
Outro aspecto importante são as cores, já que atualmente é possível contar com monitores excelentes, capazes de 
H[LELU�PLOK}HV�GHODV��$OJXQV�IRUPDWRV�WrP�UHVWULo}HV��RV�IRUPDWRV�*,)�H�31*�SRVVXHP�LPDJHQV�FRP�XPD�SDOHWD�GH�����
FRUHV��R�TXH�p�VDWLVIDWyULR�SDUD�ORJRV�H�tFRQHV��(QWUHWDQWR��Ki�DV�IRWRJUD¿DV��TXH�VmR�H[HPSORV�GH�LPDJHQV�TXH�GHYHP�
VHU�H[LELGDV�FRP�PXLWD�SUHFLVmR��DV�TXDLV�SUHFLVDP�VHU�VDOYDV�QR�IRUPDWR�-3(*�RX�31*�����HP�UD]mR�GH�WHUHP�PDLV�
cores.
Sobre o tamanho e a resolução, é importante saber que as imagens digitais são medidas em pixels. O tamanho da 
imagem depende da resolução do monitor do navegador, devendo-se respeitar a média das páginas na web, que gira 
HP�WRUQR�GH�����SL[HOV�GH�ODUJXUD��R�TXH�SHUPLWH�DRV�XVXiULRV�YHU�WRGR�R�FRQWH~GR�GD�SiJLQD�VHP�D�EDUUD�GH�URODJHP�QD�
KRUL]RQWDO��6REUH�D�UHVROXomR��SRGH�VH�GL]HU�TXH�TXDQWR�PDLRU�IRU�HVWD�PDLRU�VHUi�R�Q~PHUR�GH�SL[HOV�
PORDENTRODOTEMA
�
Como neste assunto deve-se pensar nos usuários, é necessário abordar a velocidade em que as imagens são carregadas, 
SRLV� WRGRV�GHVHMDP�Yr�ODV�R�PDLV�UiSLGR�SRVVtYHO��VHP�WHU�GH�¿FDU�HVSHUDQGR�VHX�FDUUHJDPHQWR��&RPR�R�WHPSR�GH�carregamento deve ser minimizado, é preciso lembrar que quanto maior for a imagem mais tempo será utilizado para 
que a imagem apareça na tela. Nesse sentido, as imagens pequenas têm mais vantagens. Uma forma utilizada para 
VROXFLRQDU�D�TXHVWmR�p�FRPSULPLU�D�LPDJHP��DomR�SDUD�D�TXDO�VH�LQGLFD�R�IRUPDWR�-3(*��SRLV�GHVVD�PDQHLUD�VH�UHGX]�
drasticamente o tamanho do arquivo. Essa poderia ser a solução, mas a informação de compressão ocupa muito espaço, 
o que não é bom para imagens pequenas. Além disso, trata-se de uma compressão com perdas, que elimina detalhes 
SHUPDQHQWHV�SDUD�HFRQRPL]DU�HVSDoR��(QWUHWDQWR��Ki�RV�IRUPDWRV�31*�H�*,)�TXH�FRPSULPHP�D�LPDJHP�VHP�SHUGDV�
Outro aspecto a considerar é a transparência, que, apesar de aparentemente não relevante, é usada para criar layouts 
complexos, permitindo que uma imagem se mova atrás da outra. A transparência pode dar à imagem um contorno não 
UHWDQJXODU��2V�IRUPDWRV�31*�H�*,)�SHUPLWHP�D�WUDQVSDUrQFLD��GLIHUHQWHPHQWH�GR�IRUPDWR�-3(*��TXH�QmR�D�SHUPLWH�
$V�LPDJHQV�SRGHP�WHU�PRYLPHQWR��RX�VHMD��SRGHP�VHU�DQLPDGDV�H�VDOYDV�FRPR�*,)��2V�IRUPDWRV�-3(*�RX�31*��SRU�
sua vez, não suportam animação. A animação pode ser criada com Flash, CSS Animation e JavaScript.
Há várias formas de arrumar imagens para colocá-las na página. Elas podem ser compradas, podem ser baixadas prontas 
H�SRGHP�DGYLU�GD�GLJLWDOL]DomR�GH�GHVHQKRV�IHLWRV�j�PmR�RX�WDPEpP�GR�HVFDQHDPHQWR�GH�IRWRJUD¿DV��e�QHFHVViULD�
muita atenção neste ponto. Essas imagens devem ter barras laterais com licenças Creative Commons para saber sobre 
os direitos autorais delas.
Há editores de imagens que você pode usar para criar e salvar imagens para a web, os quais possuem ferramentas 
especiais que auxiliam muito. Dentre esses editores, hoje são muito utilizados o Photoshop e o Adobe Fireworks.
Depois de escolhidas ou feitas as imagens, estas devem ser salvas. Para isso você pode utilizar as versões de teste do 
Photoshop ou do Fireworks se não tiver um desses softwares instalado no computador. Para utilizar o comando salvar 
SDUD�ZHE�QR�SULPHLUR�GHOHV��p�SUHFLVR�FXPSULU�RV�VHJXLQWHV�SDVVRV�
1. Abra o Photoshop e crie ou abra sua imagem.
���(VFROKD�DV�RSo}HV��$UTXLYR�!�6DOYDU�SDUD�:HE�	�'LVSRVLWLYRV�
3. Clique na aba 2 ou Mais para uma versão otimizada ou 4 ou mais para ver três.
4. Escolha o formato desejado.
PORDENTRODOTEMA
�
���$MXVWH�DV�FRQ¿JXUDo}HV�SDUD�XPD�ERD�TXDOLGDGH�
���&OLTXH�HP�VDOYDU�
Agora que já está salva, a imagem deve ser inserida na página de web. Depois de inserida, é hora de ver a imagem, 
que, por sua vez, deve aparecer automaticamente quando o usuário acessar a página. Para isso, é preciso cumprir as 
VHJXLQWHV�HWDSDV�
1. Abra o arquivo HTML e posicione o cursor no código.
���'LJLWH��LPJ�VFU ´LPDJH�XUO´!��$�LQGLFDomR�³LPDJH�XUO´�p�SDUD�ORFDOL]DU�R�DUTXLYR�GH�LPDJHP�QR�VHUYLGRU�
���3DUD�¿QDOL]DU��GLJLWH�XP�HVSDoR�HP�EUDQFR�H�WDPEpP��!�
Pode ocorrer de a imagem não aparecer, caso para o qual há a opção de adicionar um texto descritivo, que será lido pelo 
leitor de telas, como mostra a Figura 3.2. No entanto, você pode acessar a página indicada na Figura 3.2 e visualizar 
PHOKRU�FRPR�¿FD�R�WH[WR��3DUD�HVVH�UHFXUVR��p�SUHFLVR�LQVHULU�LQVWUXo}HV�QR�VHX�FyGLJR��FRPR�VHJXH�
1. Na tag img, após o atributo src e seu valor, digite alt=”.
2. Digite o texto que deve aparecer se a imagem não for exibida.
���'LJLWH�³�
PORDENTRODOTEMA
�
Figura 3.2 Texto descritivo na imagem
)RQWH��DGDSWDGR�GH��KWWS���ZZZ�FOHP�XIED�EU�WXWV�KWPO�F���KWP!.
8P�IDWRU�PXLWR�LPSRUWDQWH�p�HVSHFL¿FDU�R�WDPDQKR�GD�LPDJHP��SRLV��VH�HVVH�GHWDOKH�QmR�IRU�FRQVLGHUDGR��R�WH[WR�p�YLVWR�
primeiro e, depois que as imagens são carregadas, ele pula ao redor delas para que possa se adaptar. O processo da 
LPDJHP�LQLFLD�TXDQGR�R�QDYHJDGRU�DFHVVD�R�FyGLJR�+70/�H�YDL�FDUUHJDU�D�LPDJHP�YHUL¿FDQGR�R�WDPDQKR�H�R�HVSDoR�
TXH�GHYHP�VHU� UHVHUYDGRV�SDUD�HOD��+i�D�RSomR�GH�GHL[DU�DV�GLPHQV}HV�GD� LPDJHP�Mi�HVSHFL¿FDGDV��1HVVH�FDVR��
o navegador reservará o espaço da imagem, podendo, enquanto esta é carregada, preencher o texto em volta dela. 
'HVVD�IRUPD��R�OD\RXW�¿FD�HVWiYHO�HQTXDQWR�D�LPDJHP�p�FDUUHJDGD��3DUD�HVSHFL¿FDU�DV�GLPHQV}HV�GD�LPDJHP��R�TXH�p�
uma boa solução, usa-se o navegador ou o editor de imagens. Quando a imagem for utilizada em diferentes contextos, 
R�QDYHJDGRU�SRGH�DXPHQWi�OD�RX�GLPLQXt�OD�SDUD�TXH�HOD�VH�HQFDL[H�QR�WDPDQKR�HVSHFL¿FDGR�QR�+70/�RX�&66��3DUD�
encontrar o tamanho da imagem no navegador, clique com o botão direito na imagem e acesse o menu dela. Nesse 
PHQX��GHQWUH�DV�RSo}HV��GHYH�VH�HVFROKHU�³3URSULHGDGHV´�RX�³9HU´��RQGH�Ki�XPD�FDL[D�TXH�FRQWpP�DV�GLPHQV}HV�GD�
LPDJHP�HP�SL[HOV��'HVVD� IRUPD��YRFr�SRGH�HVSHFL¿FDU�D�DOWXUD�H�D� ODUJXUD�H[DWDV�GD� LPDJHP�HP�SL[HOV��6HJXLQGR�
esses passos, o navegador não precisará calcular o tamanho da imagem e esta vai ser exibida com maior rapidez. 
No Photoshop, deve-se procurar a barra de informação no canto inferior esquerdo. Clique na barra de informação do 
documento para que uma caixa pequena com informações sobre a imagem apareça incluindo o tamanho. Outra opção 
PORDENTRODOTEMA
�
SDUD�HVSHFL¿FDU�R�WDPDQKR�GD�LPDJHP�p�QR�DUTXLYR�+70/��(P�SULPHLUR�OXJDU��GHWHUPLQH�R�WDPDQKR�GD�LPDJHP�FRP�
R�QDYHJDGRU��FRPR�GHVFULWR�DQWHULRUPHQWH��H��HP�VHJXLGD��GHQWUR�GD�WDJ���LPJ!��DSyV�R�DWULEXWR�VFU��GLJLWH��ZLGWK ´[´��
KHLJKW ´\´��FRP�RV�PHVPRV�YDORUHV�TXH�IRUDP�HVSHFL¿FDGRV�HP�SL[HOV�
0XLWDV�YH]HV�Ki�LPDJHP�FRP�GLPHQV}HV�QmR�SURStFLDV�SDUD�R�OXJDU�HP�TXH�VH�TXHU�LQVHUL�OD��PDV�p�SRVVtYHO�PRGL¿FDU�
R�WDPDQKR�GD�H[LELomR�HVSHFL¿FDQGR�XPD�QRYD�DOWXUD�H�XPD�QRYD� ODUJXUD�HP�SL[HOV��XWLOL]DQGR�DV� LQVWUXo}HV�GDGDV�
anteriormente. A Figura 3.3 mostra uma imagem dimensionada em três tamanhos. Para dimensionar uma imagem com 
R�QDYHJDGRU��YRFr�GHYH�FXPSULU�RV�VHJXLQWHV�SDVVRV�
���1R�FyGLJR�GR�DUTXLYR�+70/��GLJLWH���LPJ�VUF ´LPDJH�XUO´��$�LPDJHP�p�ORFDOL]DGD�QR�VHUYLGRU�DWUDYpV�GD�LQGLFDomR�
³LPDJH�XUO´�
���3DUD�GLPHQVLRQDU�D�LPDJHP��GLJLWH�ZLGWK ´[´��KHLJKW ´\´��HP�TXH�³[´�LQGLFD�D�ODUJXUD�H�³\´�D�DOWXUD�TXH�GHVHMD��PDV�
esta deve ser em pixels.
���3RGH�VH�DGLFLRQDU�TXDOTXHU�DWULEXWR�QHVWH�HVSDoR��H��GHSRLV��SDUD�¿QDOL]DU��GLJLWH��!�
Figura 3.3 Código e imagem com dimensões diferentes.
)RQWH��DGDSWDGR�GH��KWWS���ZZZ�FOHP�XIED�EU�WXWV�KWPO�F���KWP!.
PORDENTRODOTEMA
��
Para o dimensionamento das imagens com utilização de um editor de imagens, há alguns detalhes diferentes a seguir, 
FRPR�QR�3KRWRVKRS�
���3DUD�LQLFLDU��Yi�j�SDUWH�LQIHULRU�j�GLUHLWD�GD�MDQHOD�³6DOYDU�SDUD�D�:HE�	�'LVSRVLWLYRV´�H�FOLTXH�QD�FDL[D�/�ODUJXUD��RX�
A(altura) na seção tamanho da imagem.
2. Neste passo, digite a nova altura ou largura em pixels, ou uma porcentagem, e pressione a tecla Tab para a imagem 
ser redimensionada.
���6DOYH�D�LPDJHP��SRLV�HVWD�Vy�p�UHGH¿QLGD�DSyV�VHU�VDOYD�
Uma opção existente, que sempre é utilizada, é a de adicionar ícones ou favicon no site. Para esse recurso, deve-se 
FXPSULU�RV�VHJXLQWHV�SDVVRV�
���$�LPDJHP�FULDGD�RX�D�VHU�LQVHULGD�GHYH�VHU�GH���[���SL[HOV�H�GHYH�VHU�VDOYD�QR�IRUPDWR�,&2�±�p�WDPEpP�SRVVtYHO�
VDOYi�OD�QRV�IRUPDWRV�31*�H�*,)�
2. Crie uma imagem de 114x114 pixels para aparelhos com touchscreen�H�VDOYH�D�QR�IRUPDWR�31*�
���1R�DUTXLYR�+70/��QD�VHomR�KHDG��GLJLWH��OLQN�UHO ´VKRUWFXW�LFRQ´�KUHI ´IDYLFRQ�LFR´��!��HP�TXH�³IDYLFRQ�LFRQ´�p�R�
QRPH�H�D�ORFDOL]DomR�GR�tFRQH�QR�VHUYLGRU��6H�D�LPDJHP�HVWLYHU�QR�IRUPDWR�31*��GLJLWH���OLQN�UHO ´LFRQ´�W\SH ´LPDJH�
SQJ´�KUHI ´IDYLFRQ�SQJ´��!��3DUD�LPDJHQV�QR�IRUPDWR�*,)��GLJLWH���OLQN�UHO �³LFRQ´�W\SH ´LPDJH�JLI´�KUHI ´IDYLFRQ�JLI´��!�
���$LQGD�QD�VHomR�KHDG�GR�DUTXLYR�+70/��GLJLWH���OLQN�UHO ´DSSOH�WRXFK�LFRQ´�KUHI ´�DSSOH�WRXFK�LFRQ�SQJ´��!��QHVWH�
caso, apple-touch-icon.png é o nome e a localização do ícone no servidor.
 Links para a Web
Além de interessante, uma prática satisfatória, que dá vida a web, é a utilização dos links, que permitem conectaruma página a outra, sem ser necessário usar somente uma página. Para entender sobre os links, primeiramente é 
SUHFLVR�VDEHU�FRPR�HVWHV�VmR�GLYLGLGRV��Mi�TXH�SRVVXHP�GXDV�SDUWHV�SULQFLSDLV��XP�GHVWLQR�H�XP�UyWXOR�
2�GHVWLQR�p�D�SDUWH�PDLV�LPSRUWDQWH��TXH�HVSHFL¿FD�R�TXH�RFRUUH�TXDQGR�R�OLQN�p�DFLRQDGR��2X�VHMD��LQGLFD�VH�R�OLQN�
SRGH�OHYDU�SDUD�RXWUDV�SiJLQDV�RX�PHVPR�VDOWDU�SDUD�D�PHVPD��D�¿P�GH�PRVWUDU�LPDJHQV��EDL[DU�XP�DUTXLYR��PDQGDU�
um e-mail, entre outras execuções. Os links comuns conectam a outras páginas na web, mas também podem, às vezes, 
PORDENTRODOTEMA
��
OHYDU�SDUD�XPD�ORFDOL]DomR�HVSHFt¿FD�GD�SiJLQD��TXH�p�GHWHUPLQDGD�GH�kQFRUD��FXMR�GHVWLQR�p�GH¿QLGR�SHOD�DGLomR�GD�
URL, sendo visíveis somente na barra de status do navegador.
O rótulo, a segunda parte do link, é a parte que o visitante vê no navegador ou ouve em um leitor de telas e que é 
utilizada para ativar o alcançe do destino, que pode ser um texto, uma imagem ou ambos. O padrão dos navegadores é 
H[LELU�R�WH[WR�GR�UyWXOR�VXEOLQKDGR�HP�D]XO��R�TXH��HQWUHWDQWR��SRGH�VHU�PRGL¿FDGR�
2�LPSRUWDQWH�p�VDEHU�FULDU�R�OLQN��3DUD�LQLFLDU�R�SURFHVVR��SRGH�VH�FULDU�XP�OLQN�TXH�FRQHFWH�RXWUD�SiJLQD��QR�HQWDQWR��Ki�
também a opção de criar links para páginas em outros sites. Para criar um link para outra página, como ilustra a Figura 
�����GHYH�VH�FXPSULU�RV�VHJXLQWHV�SDVVRV�
���3ULPHLUR��GLJLWH��D�KUHI ´SDJH�KWPO´!��HP�TXH�SDJH�KWPO�p�D�85/��GD�SiJLQD�GH�GHVWLQR�
2. Neste passo, digite o texto do rótulo, que é destacado por padrão e, quando ativado, leva o usuário à página que 
IRL�HVSHFL¿FDGD�QR�LWHP���
���3DUD�¿QDOL]DU�GLJLWH��D�!��FRPSOHWDQGR��DVVLP��D�GH¿QLomR�GR�OLQN�
Figura 3.4 Código e link em uma página
)RQWH��DGDSWDGR�GH��KWWS���ZZZ�FOHP�XIED�EU�WXWV�KWPO�H[��K�KWP!.
PORDENTRODOTEMA
��
8PD�JUDQGH�YDQWDJHP�p�TXH�R�+70/��SHUPLWH�FRORFDU�XP� OLQN�HP�WRUQR�GH�TXDVH� WRGRV�RV� WLSRV�GH�HOHPHQWRV�RX�
grupos de elementos, que são denominados links em nível de bloco. Quando se trabalha com links em nível de bloco, é 
DFRQVHOKiYHO�FRORFDU�R�FRQWH~GR�PDLV�SHUWLQHQWH�QR�FRPHoR�GH�XP�OLQN�±�HVVH�FRQWH~GR�QR�OLQN�QmR�GHYH�VHU�DEXQGDQWH�
1HVWH�FRQWH[WR��p�SRVVtYHO�FULDU�kQFRUDV��0DV�TXDQGR�H�SRU�TXH�FULDU�kQFRUDV"�&RP�D�DWLYDomR�GH�XP�OLQN��HVWH�OHYD�R�
XVXiULR�DR�WRSR�GD�SiJLQD�j�TXDO�HVWi�FRQHFWDGR��HQWUHWDQWR��VH�GHVHMDU�TXH�R�XVXiULR�SXOH�SDUD�XPD�VHomR�HVSHFt¿FD�GD�
SiJLQD��QHVWH�SRQWR�p�QHFHVViULR�FULDU�XPD�kQFRUD�H�ID]HU�XPD�UHIHUrQFLD�GHOD�QR�OLQN��3DUD�FULDU�D�kQFRUD��p�QHFHVViULR�
1. No arquivo HTML, posicionar o cursor na tag de início do elemento para o qual você quer que o usuário pule.
2. Deve-se digitar id=”anchor-name”, em que anchor-name refere-se ao texto que será utilizado internamente para 
LGHQWL¿FDU�DTXHOD�VHomR�GD�SiJLQD��e�LPSRUWDQWH�FHUWL¿FDU�VH�GH�TXH�Ki�HVSDoR�HQWUH�R�QRPH�GR�HOHPHQWR�H�R�LG�
$SyV�D� kQFRUD� VHU� FULDGD�� p� SRVVtYHO� GH¿QLU� XP� OLQN� TXH�� DVVLP�TXH�R� XVXiULR� DFLRQi�OR�� ID]� FRP�TXH�D� SiJLQD� Yi�
GLUHWDPHQWH�j�VHomR�GR�GRFXPHQWR�TXH�WHP�D�kQFRUD�H�QmR�DR�WRSR�GD�SiJLQD��'HYH�VH�VHJXLU�SDVVRV�GHWHUPLQDGRV�
SDUD�FULDU�XP�OLQN�SDUD�D�kQFRUD��6mR�HOHV�
���3ULPHLUDPHQWH��GLJLWH��D�UHI ´�DQFKRU�QDPH´!��HP�TXH�DQFKRU�QDPH�p�R�YDORU�GR�GHVWLQR�GR�DWULEXWR�LG�
2. Na sequência, digite o texto do rótulo, ou seja, o texto que é destacado e que quando ativado possibilita ao usuário 
LU�j�VHomR�HVSHFL¿FDGD�QR�SDVVR���
���3DUD�¿QDOL]DU��GLJLWH���D!��FRPSOHWDQGR��DVVLP��D�GH¿QLomR�GR�OLQN�
Quando criados, os links não são destinados somente para conectar outras páginas, mas sim para qualquer URL. Neste 
FDVR��SDUD�FULDU�RXWURV�WLSRV�GH�OLQNV��p�SUHFLVR�VHJXLU�DV�LQVWUXo}HV�
1. Para iniciar, digite <a href=”.
2. Neste espaço digite a URL.
3. Se o link vai acessar qualquer arquivo na web, desde imagens, planilhas, arquivos compactados etc., é preciso 
GLJLWDU��KWWS���ZZZ�VLWH�FRP�SDWK�¿OH�H[W��HP�TXH�
a) www.site.com é o nome do servidor.
E��SDWK�¿OH�H[W�p�R�FDPLQKR�SDUD�R�DUTXLYR�GHVHMDGR��FRP�VXD�H[WHQVmR�
PORDENTRODOTEMA
��
���1D�VHTXrQFLD�GLJLWH�³!�
���1HVWH�SDVVR��GLJLWH�R�UyWXOR�GR�OLQN��RX�VHMD��R�WH[WR�GHVWDFDGR�TXH��TXDQGR�DWLYDGR��YDL� OHYDU�R�XVXiULR�j�85/�
determinada na passo 2.
���3DUD�¿QDOL]DU�GLJLWH���D!�
Seguindo os passos e inserindo as instruções determinadas na ordem certa, é possível colocar links e deixar a página 
com uma boa estrutura e, ao mesmo tempo, com um acesso ideal para o usuário.
PORDENTRODOTEMA
Linguagem HTML
‡� Acesse uma apostila que abrange a linguagem HTML. E interessante que você faça uma 
consulta às páginas de 17 a 22 para ver detalhes dos elementos a serem utilizados para lidar 
com imagens e links em páginas web.
/LQN�SDUD�DFHVVR���KWWSV���ZZZ�WHOHFRP�XII�EU�SHW�SHWZV�GRZQORDGV�WXWRULDLV�FVV�FVV�N������SGI!��$FHVVR�HP��
���QRY�������
Como trabalhar com imagens
‡� Para complementar este tema, há uma página que apresenta dicas bem interessantes de 
FRPR�WUDEDOKDU�FRP�LPDJHQV��DSUHVHQWDQGR�LQRYDo}HV��9DOH�D�SHQD�YRFr�FRQVXOWi�OD�
/LQN�SDUD�DFHVVR���KWWS���ZZZ�NHQML\DPDPRWR�FRP�EORJ������������GLFDV�VREUH�KWPO��H�FVV�!��$FHVVR�HP�����
nov. 2014.
ACOMPANHENAWEB
��
Instruções:
$JRUD��FKHJRX�D�VXD�YH]�GH�H[HUFLWDU�VHX�DSUHQGL]DGR��$�VHJXLU��YRFr�HQFRQWUDUi�DOJXPDV�TXHVW}HV�GH�P~OWLSOD�
escolha e dissertativas. Leia cuidadosamente os enunciados e atente-se para o que está sendo pedido.
AGORAÉASUAVEZ
Questão 1
Quando se deseja inserir imagens em uma página web, é importante exibi-las com precisão. Para criar as imagens na web e 
deixá-las bem dispostas nas páginas, há seis fatores principais aos quais temos de estar atentos para que elas possam ser dife-
renciadas.
4XDLV�VmR�HVVHV�VHLV�IDWRUHV�TXH�LQÀXHQFLDP�QD�LQVHUomR�GH�LPDJHQV�HP�XPD�SiJLQD�ZHE"�
Questão 2
Para inserir uma imagem em uma página da web, o formato é muito importante, pois a imagem vai ser salva e deve ser acessa-
GD�VHP�SUREOHPDV��QmR�LPSRUWDQGR�RV�VLVWHPDV�RSHUDFLRQDLV��$WXDOPHQWH��RV�IRUPDWRV�PDLV�XWLOL]DGRV�QD�ZHE�VmR��*,)��31*�H�
-3(*��6REUH�HVWHV��p�SRVVtYHO�D¿UPDU�TXH�
a) 2�IRUPDWR�-3(*�p�LQGLFDGR�SDUD�IRWRV�FRඇRULGDV�HP�UD]mR�GH�PDQLSXඇDU�XPD�JUDQGH�TXDQWLGDGH�GH�FRUHV��KDYHQGR��HQWUHWDQWR��
desvantagens, dentre as quais se pode destacar o fato de não permitir que a página seja carregada rapidamente.
b) 2�IRUPDWR�*ආ)�p�XWLඇL]DGR�SDUD�DUTXLYRV�FRPR�ඇRJRV��FRP�SHTXHQD�TXDQWLGDGH�GH�FRUHV�VyඇLGDV�H�SDGU}HV�
c) 2�IRUPDWR�*ආ)�FRQVHJXH�FRPSULPLU�iUHDV�GH�FRUHV�FRQWtQXDV�RX�SDGU}HV�UHSHWLWLYRV�PHඇKRU�TXH�R�IRUPDWR�-3(*��
d) 2�IRUPDWR�31*�QmR�p�XPD�ERD�RSomR��VHQGR��jV�YH]HV��XVDGR�SDUD�DUTXLYRV�FRPR�ඇRJRV��FRP�JUDQGH�TXDQWLGDGH�GH�FRUHV�
VyඇLGDV�
e) 2�IRUPDWR�-3(*��TXDQGR�FRPSULPLGR��WUD]�XPD�YDQWDJHP��SRLV�QHVVH�SURFHVVR�QmR�RFRUUH�SHUGDV�GDV�LQIRUPDo}HV�RULJLQDLV�
da imagem.
��
AGORAÉASUAVEZ
Questão 3
8P�IDWRU�PXLWR�LPSRUWDQWH�p�HVSHFL¿FDU�R�WDPDQKR�GD�LPDJHP��SRLV��VH�HVVH�GHWDOKH�QmR�IRU�FRQVLGHUDGR��R�WH[WR�p�YLVWR�SULPHLUR�
H��GHSRLV�TXH�DV�LPDJHQV�VmR�FDUUHJDGDV��HOH�SXOD�DR�UHGRU�GHVWDV�SDUD�TXH�SRVVD�VH�DGDSWDU��1R�DUTXLYR�+70/��SDUD�HVSHFL¿FDU�
R�WDPDQKR�GD�LPDJHP��p�LQGLFDGR�
( ) Somente determinar o tamanho da imagem com o navegador.
�����3ULPHLUDPHQWH�GHWHUPLQDU�R�WDPDQKR�GD�LPDJHP�FRP�R�QDYHJDGRU�H�QR�FyGLJR�+70/��GHQWUR�GD�WDJ���LPJ!��DSyV�R�DWULEXWR�
VFU��GLJLWDU�D�DOWXUD�H�D�ODUJXUD�FRP�RV�PHVPRV�YDORUHV�TXH�IRUDP�HVSHFL¿FDGRV�HP�SL[HOV�
�����3ULPHLUDPHQWH�GHWHUPLQDU�R�WDPDQKR�GD�LPDJHP�FRP�R�QDYHJDGRU��H��QR�FyGLJR�+70/��GHQWUR�GD�WDJ���LPJ!��DQWHV�GR�DWULEXWR�
scr, devem ser digitadas a altura e a largura com os valores em pixels.
�����1R�FyGLJR�+70/�DEDL[R�GD�WDJ���LPJ!��DSyV�R�DWULEXWR�VFU��GLJLWDU��ZLGWK ´[´��KHLJKW ´\´��FRP�RV�PHVPRV�YDORUHV�TXH�IRUDP�
HVSHFL¿FDGRV�HP�SL[HOV�
Questão 4
Os links permitem conectar uma página a outra, sem que se utilize somente uma página. Eles são divididos em duas partes prin-
FLSDLV��XP�GHVWLQR�H�XP�UyWXOR��2�GHVWLQR�p�D�SDUWH�PDLV�LPSRUWDQWH�