Apostila Tecnologias Web

Tecnologias Web
2015
Editorial
Comit Editorial
Fernando Fukuda
Simone Markenson
Jeferson Ferreira Fagundes
Autor do Original
Rodrigo Plotze
UniSEB Editora Universidade Estcio de S

Todos os direitos desta edio reservados UniSEB e Editora Universidade Estcio de S.
Proibida a reproduo total ou parcial desta obra, de qualquer forma ou meio eletrnico, e mecnico, fotogrfico e gravao ou
qualquer outro, sem a permisso expressa do UniSEB e Editora Universidade Estcio de S. A violao dos direitos autorais
punvel como crime (Cdigo Penal art. 184 e ; Lei 6.895/80), com busca, apreenso e indenizaes diversas (Lei 9.610/98 Lei
dos Direitos Autorais arts. 122, 123, 124 e 126).
Tecnologias Web
Su
ri o
Captulo 1: Ambiente Distribudo da

Internet.............................................................. 7
Objetivos da sua Aprendizagem................................. 7
Voc se lembra?................................................................. 7
1.1 Introduo........................................................................ 8
1.2 Protocolo TCP/IP................................................................. 12
1.3 World Wide Web e o Protocolo HTTP...................................... 14
1.4 Correio Eletrnico......................................................................... 17
1.5 Transferncia de Arquivos................................................................. 20
1.6 Servio de Diretrio (DNS).................................................................. 21
Atividade......................................................................................................... 22
Reflexo............................................................................................................. 22
Leituras recomendadas.......................................................................................... 22
Referncias.............................................................................................................. 23
No prximo captulo.................................................................................................. 23
Captulo 2: Segurana e Aplicativos na Internet.................................................... 25
Objetivos da sua Aprendizagem................................................................................... 25
Voc lembra?.................................................................................................................. 25
2.1 Criptografia de Dados na Internet............................................................................ 26
2.2 Protocolo HTTPS..................................................................................................... 27
2.3 Firewall.................................................................................................................... 28
2.4 Aplicativos para internet.......................................................................................... 29
Atividade....................................................................................................................... 39
Reflexo ...................................................................................................................... 40
Leituras recomendadas............................................................................................... 40
Referncias . ............................................................................................................ 40
No prximo captulo............................................................................................. 41
Captulo 3: Linguagem de Marcao de Hipertexto - HTML.................... 43
Objetivos de sua Aprendizagem.................................................................... 43
Voc se lembra?......................................................................................... 43
3.1 Linguagem de Marcao de Hipertexto (HTML)........................... 44
3.2 Estrutura Bsica de uma Pgina HTML..................................... 47
3.3 Elementos para Formatao de Texto.................................... 48
3.4 Elemento para Insero de Imagens.................................. 57
3.5 ncoras......................................................................... 58
3.6 Listas......................................................................................................................... 59
3.7 Tabelas...................................................................................................................... 61
Atividade.......................................................................................................................... 64
Reflexo .......................................................................................................................... 64
Leituras recomendadas..................................................................................................... 65
Referncias . .................................................................................................................... 65
No prximo captulo........................................................................................................ 65
Captulo 4: Formulrios Web e Acessibilidade........................................................... 67
Objetivos de sua Aprendizagem....................................................................................... 67
Voc se lembra?............................................................................................................... 67
4.1 Formulrios HTML................................................................................................... 68
4.2 Controles para Construo de Formulrio................................................................ 70
4.3 Acessibilidade na Web.............................................................................................. 79
Atividade.......................................................................................................................... 84
Reflexo .......................................................................................................................... 85
Leituras recomendadas..................................................................................................... 85
Referncias . .................................................................................................................... 85
No prximo captulo........................................................................................................ 86
Captulo 5: Folhas de Estilo em Cascata (CSS).......................................................... 87
Objetivos de sua Aprendizagem....................................................................................... 87
Voc se lembra?............................................................................................................... 87
5.1 Introduo................................................................................................................. 88
5.2 Tipos de Seletores..................................................................................................... 94
5.3 Formatao de Texto e Plano de Fundo.................................................................. 100
5.4 Formatao de Margens, Espaamentos e Bordas.................................................. 104
5.5 Layouts em CSS...................................................................................................... 107
Atividade.........................................................................................................................111
Reflexo .........................................................................................................................111
Leituras recomendadas....................................................................................................111
Referncias . ...................................................................................................................111
Gabarito.......................................................................................................................... 112
Ap
res
ent
Prezado(a) aluno(a)
Ol, seja bem-vindo(a) disciplina de
Tecnologias Web do curso de Anlise e
Desenvolvimento de Sistemas. Na disciplina,
voc ter a oportunidade de conhecer os principais
assuntos ligados Internet, desde a sua criao, at
os recursos utilizados para elaborao e publicao de
contedo.
No ponto inicial, a disciplina comea descrevendo a
internet como um grande sistema computacional distribudo,
em que so relatados os principais personagens que contriburam
para sua inveno. So abordadas tambm as funcionalidades essenciais da rede, tais como a comunicao por hipertexto, o correio
eletrnico e a transferncia de arquivos.
Os diversos mecanismos de transferncia de dados pela rede, associados aos recursos de mobilidade, fazem com que os usurios estejam
cada vez mais imersos nessa grande rede. No entanto, a segurana um
detalhe essencial, em que a navegao pode ser combinada a protocolos
de segurana e a mecanismos de criptografia.

Na disciplina, voc aprender a linguagem de marcao HTML, e
poder construir pginas para disponibilizao de contedo na Internet.
Voc compreender como as pginas so confeccionais por meio de elementos da linguagem HTML. Voc aprender tambm a troca de informaes entre as pginas, utilizando um recurso que conhecido como
formulrios web. Por fim, voc estudar as folhas de estilo em cascata,
as quais so essenciais para formatao da aparncia do contedo
para Internet.

Bons estudos!
Ambiente Distribudo
da Internet
Cap
t u
lo
A Internet foi por muitos anos conhecida

como a rede mundial de computadores No
entanto, nos ltimos anos, com a evoluo tecnolgica, principalmente dos sistemas de telefonia
e televiso, a grande rede no conecta apenas computadores. Neste captulo, voc aprender a evoluo da
Internet e as tecnologias que esto envolvidas para possibilitar a comunicao entre os computadores.
Objetivos da sua Aprendizagem
Neste captulo, os objetivos principais so:

conhecer os aspectos evolutivos e histricos da Internet;
definir as funcionalidades e tecnologias associadas a Internet;
compreender sobre o conceito de protocolo de comunicao;
definir as funcionalidades dos principais protocolos de Internet: transferncia de hipertexto, correio eletrnico e transferncia de arquivos.
Voc se lembra?
Voc um usurio(a) da Internet? Provavelmente sua resposta ser sim!

No entanto, a poucas dcadas atrs, um nmero bem reduzido de usurios tinham acesso Internet, que naquela poca nem recebia esse nome
(Internet). Ento, vamos aproveitar esta unidade para aprender como
uma tecnologia to necessria atualmente sofreu uma evoluo to rpida e hoje essencial na vida de todos ns.
Bons estudos!
Tecnologias Web
1.1 Introduo
Proibida a reproduo UniSEB
Os primeiros registros sobre a criao da Internet so da dcada de

60, mais especificamente em 1962, em que Joseph Licklider, um pesquisador do Massachusetts Institute of Technology (MIT), vislumbrou a ideia
sobre a criao de uma rede mundial de computadores interconectados
em que as pessoas poderiam rapidamente acessar dados e programas. Na
poca, ele utilizou o termo Rede Intergalctica de Computadores. Este
conceito, fundamentado no incio da dcada de 60, muito prximo do
modelo de Internet que utilizamos atualmente.
A importncia da comunicao j era consenso entre as grandes naes mundiais, como os Estados Unidos (EUA) e a Unio das Repblicas
Socialista e Soviticas (URSS), principalmente nos cenrios militares em
que a possibilidade de perda de informaes devido a ataques era sempre
eminente.
Um dos principais marcos de criao da Internet foi a especificao
da uma rede de computadores baseada na comutao de pacotes, a qual
ficou conhecida como ARPANet (Advanced Research Projects Agency
Network). Esta rede foi desenvolvida nos laboratrios da Agncia de
Projetos de Pesquisa Avanada e de Defesa, do ingls Defense Advanced
Research Projects Agency (DARPA), em 1969, pelo engenheiro Lawrence
G. Roberts e seus colaboradores.
A figura 1 ilustra o mapa lgico da ARPANet em 1969. Naquela
poca, a precursora da rede mundial de computadores tinha apenas quatro computadores, interligados por um link de transmisso com uma taxa
de 50 kbps. O primeiro n da rede era da University of California Los
Angeles (UCLA), identificado na figura como #1 UCLA. O segundo
n da rede era de responsabilidade do Stanford Research Institute (SRI), e
pode ser visualizado na figura como #2SRI. O terceiro n da rede, identificado por #3 UCSB, foi colocado na University of California Santa
Barbara. Por fim, o quarto n foi disponibilizado na Universidade of Utah
(UTAH).
Ambiente Distribudo da Internet - Captulo 1
940
#4
UTAH
#2
SRI
PDPID
360
#3
UCSB
#1
UCLA
Sigma 7
Figura 1 Mapa lgico da ARPANet em 1977.
EAD-15-Tecnologias Web Proibida a reproduo UniSEB
Fonte: < http://www.computerhistory.org/internet_history/ >.
Em 1973, outro marco importante da evoluo da Internet foi a

criao do protocolo de comunicao TCP/IP. Com este protocolo, foi
possvel definir um modelo padronizado de comunicao, Assim, este
protocolo permitiu que diversos computadores interconectados em rede
trocassem informaes de maneira unificada e organizada. No ano seguinte, em 1974, o termo Internet foi utilizado pela primeira vez por Vint Cerf
e Bob Kahn.
No final da dcada de 70, mais especificamente em 1979, foi criada
a USENET (UNIX Users Network), um dos primeiros sistemas de discusso de notcias baseada na Internet. Este sistema, que popularmente
chamado de newsgroup, precursor dos fruns de discusso, permitindo o
envio e a postagem de mensagens.
Tecnologias Web
Em 1981, foi criada uma outra rede de comunicao que conectava

universidades americanas BITNET (Because Its Time to NETwork), a
qual era executada em mainframes da IBM e tambm se tornou muito popular para troca de mensagens.
Seguindo a tendncia de popularizao das redes de comunicao,
os usurios domsticos de microcomputadores americanos tambm iniciaram a troca de mensagens e o compartilhamento de arquivos entre si por
meio de grupos conhecidos popularmente como BBS, do ingls Bulletin
Board Systems. Esses sistemas utilizavam modens conectados s linhas
telefnicas domsticas e, em 1984, uma rede denominada FIDONET permitiu a interconexo de sistemas BBS espalhados por vrios pases e continentes. A figura 2 ilustra a tela principal do software PCBoard utilizado
para gerenciamento de um sistema BBS.
Figura 2 PCBoard para Bulletin Board System (BBS).

Fonte: https://en.wikipedia.org/wiki/PCBoard
No ano de 1985, o primeiro registro de domnio na Internet foi criado com o site <symbolics.com>, pertencente a uma empresa de computadores de Massachusetts (EUA). Em 1987, o nmero de hosts conectados
na Internet ultrapassa a barreia de 20.000 equipamentos. Alguns anos
mais tarde, em 1989, criada a primeira empresa comercial de provedor
10
de Internet World.std.com, a qual oferecia o servio de comunicao com a Internet por

meio de uma conexo discada.
No incio da dcada de 90, um
Na rea de computao, o termo
cientista da Organizao Europeia
host (hospedeiro) utilizado para
designar qualquer equipamento conectado
para a Pesquisa Nuclear, conhecida
a uma rede. No contexto da Internet, um host
como CERN, desenvolveu uma
representa qualquer equipamento que possua
linguagem de marcao de hiperum endereo IP.
texto que se tornou padro para a
produo de contedo para Internet.
A linguagem HTML, criada por Tim
Bearners-Lee, modificou drasticamente os modelos de navegao e disponibilizao de contedo na Internet.
No ano de 1992, o primeiro navegador de Internet (web browser)
criado no National Center for Supercomputing Applications (NCSA), o
qual foi chamado de Mosaic. Este navegador serviu de base para a empresa Netscape desenvolver um dos principais navegadores da dcada de 90,
conhecido como Netscape Navigator. A figura 3 apresenta a tela principal do primeiro
Conexo:
navegador de Internet o NCSA Mosaic
Uma descrio bastante detalhada da histria da
verso 1.0.
Internet pode ser visualizada por
meio de uma linha do tempo no
seguinte endereo:
<http://www.internethalloffame.org/
internet-history/timeline>
11
Tecnologias Web
Figura 3 Navegador de Internet NCSA Mosaic (verso 1.0) lanado em novembro de 1993.
Fonte: Divulgao NCSA (http://www.ncsa.illinois.edu/news/press#mosaic).
Outro importante navegador de Internet lanado nesta poca foi o

Internet Explorer da Microsoft. A primeira verso do navegador foi baseada na implementao do Mosaic e foi disponibilizada ao pblico em 1995.
Os anos seguintes representaram uma corrida alucinada pela inveno de novas tecnologias para Internet. Muitas empresas ao redor do
mundo foram criadas exclusivamente para negcios na Internet, tais como
sites de comrcio eletrnico (Ebay, Amazon), ferramentas de busca (Altavista, Google, Yahoo), entre outros.
12
1.2 Protocolo TCP/IP
O funcionamento da Internet baseado em um protocolo de rede

conhecido como TCP/IP. Na verdade, este protocolo representa uma arquitetura completa de Internet e formado por uma srie de protocolos
que oferecem os mais variados tipos de servio na rede. O protocolo TCP/
IP composto de dois protocolos: o Protocolo de Controle de Transmisso (Tranmission Control Protocol) e o Protocolo de Internet (Internet
Protocol). A criao do protocolo TCP baseada nas experincias realizadas na comutao de pacotes na rede ARPANet e pode ser organizado
estruturalmente como apresentado na figura 4 (PETERSON & DAVIE,
2004).
Na camada mais baixa da arquitetura da Internet esto os protocolos
de rede que so formados por um combinao de protocolos implementados em hardware e software. Os protocolos de hardware esto codificados
nos adaptadores de rede, enquanto os protocolos de software representam
os drivers dos dispositivos. O segundo nvel da arquitetura formado
pelo protocolo de Internet (IP), o qual responsvel pela interconexo
de diversas tecnologias de rede. Assim, este protocolo permite concentrar
inmeros protocolos da camada mais baixa da arquitetura em uma nica
rede lgica.
No terceiro nvel da arquitetura de rede, esto os protocolos de
transporte TCP e UDP, os quais fornecem s aplicaes de Internet mecanismos para comunicao entre os hosts disponveis na rede. O protocolo
TCP um modelo lgico confivel de comunicao, sendo baseado em
um fluxo contnuo de bytes que so trafegados pela rede. Por outro lado, o
protocolo UDP especificado como um modelo no confivel de comunicao, em que os dados so trafegados por meio de datagramas.
O protocolo de comunicao UDP um servio no-confivel para

transmisso de dados, pois no oferece nenhuma garantia de que a
mensagem chegar ao processo receptor. Este protocolo no orientado a conexo, assim, a troca de mensagens entre o remente e o receptor
ocorre sem que o remente saiba como e quando o receptor receber as
mensagens. Alm disso, as mensagens podem chegar ao processo receptor fora de ordem (KUROSE & ROSS, 2006).
Finalmente, na camada mais alta, so definidos os protocolos de

aplicao, os quais so utilizados pelas aplicaes de Internet para troca
de dados. Nesta camada esto, por exemplo, o Protocolo de Transferncia
de Hipertexto (HTTP), o Protocolo de Transferncia de Arquivos (FTP), o
Protocolo de Transferncia de Correio Simples (SMTP), entre outros. Os
13
Tecnologias Web
protocolos da camada de aplicao utilizam portas especficas para o processo de comunicao. Segundo Kurose (2003), uma porta uma interface entre a camada de aplicao e a camada de transporte dentro da mquina. O protocolo de transferncia de hipertexto HTTP, por exemplo, utiliza
a porta 80 para comunicao, enquanto o protocolo para transferncia de
arquivos FTP utiliza as portas 20 e 21 para troca de dados e informaes
de controles e o protocolo de correio eletrnico SMTP utiliza a porta 25
para o envio de mensagens eletrnicas.
Protocolos de Aplicao
HTTP
SMTP
FTP
TCP
TFTP
...
entre outros
UDP
IP
Interface com a rede

Figura 4 Arquitetura da internet baseada no protocolo TCP/IP
Fonte: Adaptado de (PETERSON & DAVIE, 2004).
1.3 World Wide Web e o Protocolo HTTP
14
A rede mundial de computadores popularmente conhecida como

World Wide Web, ou simplesmente WWW, e representa o principal servio oferecido na Internet. A rede formada por um conjunto de servidores
e clientes que trocam dados utilizando um protocolo conhecido como
HTTP. O Protocolo de Transferncia de Hipertexto (HyperText Transfer
Protocol) o modelo de comunicao utilizado na Internet para transferncia de dados na rede (PETERSON & DAVIE, 2004).
No protocolo HTTP, o acesso aos recursos disponveis na Internet

ocorre por meio dos Identificadores Universais de Recursos (Universal
Resource Locators URL), por meio dos quais possvel acessar qualquer
contedo, tais como pginas Web, imagens, vdeos, sons, entre outros. O
protocolo tambm especifica o modelo utilizado pelos navegadores web
(browsers) para solicitao dos contedos que so disponibilizados pelos
servidores web (web servers). Assim, utilizando um navegador web
possvel acessar o recurso desejado informado sua respectiva URL. Por
exemplo:
http://www.meusite.com.br/index.html
Para comunicao entre o navegador e o servidor web, o protocolo
HTTP utiliza um modelo conhecido como Requisio-Resposta (RequestResponse). Nesse modelo, mensagens de requisio so encaminhadas
para o servidor web, pelo cliente, indicando qual o recurso desejado. O
servidor recebe esta mensagem, processa a solicitao e retorna uma mensagem de resposta com o contedo desejado. Na mensagem de resposta,
possvel identificar se o processamento da solicitao foi realizado com
sucesso (ou no) por meio de cdigos de status. O cdigo 404, por exemplo, utilizado para responder ao cliente quando o recurso solicitado no
foi encontrado. A figura 5 ilustra o modelo de requisio e resposta utilizado pelo protocolo HTTP.
Navegador
http://www.meusite.com.br/index.html
Requisio
Resposta
Servidor Web
Figura 5 Modelo Requisio-Resposta utilizado no protocolo HTTP.
Fonte: Elaborado pelo autor.
Um servidor Web (web server) o programa de computador responsvel por publicao de recursos na Internet. Estes recursos podem ser
desde pginas web, at contedo multimdia, tais como imagens, udio e
vdeo. Os principais servidores web utilizados atualmente so o Apache
HTTP Server e o MicrosoftInternet Information Services (IIS).
15
Tecnologias Web
O Apache HTTP Server o servidor web mais popular para disponibilizao de contedo na Internet. Este servidor foi criado em 1996 e
tem como objetivo principal fornecer um servidor seguro, eficiente e extensvel fundamentado nos servios e padres atuais do protocolo HTTP.
O servidor Apache um projeto de cdigo aberto desenvolvido e mantido
pela Apache Software Foundation (APACHE, 2014).
A soluo Microsoft para servidores Web popularmente conhecida
como IIS e suporta diversos servios tais como HTTP, FTP e SMTP. O
servidor permite ainda a incluso de mdulos para extenso das funcionalidades oferecidas, como, por exemplo, ferramentas para publicao de
pginas web, plataforma de entrega multimdia, entre outros. O Internet
Infomation Services parte integrante dos sistemas operacionais Microsoft, principalmente da famlia Windows Server (IIS, 2014).
O protocolo HTTP utiliza uma lista de cdigos para identificar o
resultado das solicitaes. Estes cdigos so representados por trs dgitos, em que o primeiro digito expressa o tipo do cdigo, sendo: 1XX
para informativo, 2XX para sucesso, 3XX para redirecionamento, 4XX
para erro cliente e 5XX para erro servidor. Uma listagem completa e
detalhada dos cdigos de status do protocolo HTTP pode ser consultada no seguinte endereo:
<pt.wikipedia.org/wiki/Anexo:Lista_de_cdigos_de_status_HTTP>
A troca de mensagens entre cliente e servidor realizada por meio de

um conjunto de operaes contendo funes bem definidas. As principais
operaes e suas respectivas funcionalidades so apresentadas na tabela 1.1
16
Mtodo
Descrio
GET
Solicita um determinado recurso no servidor web, tal como, uma pgina

web, uma imagem, um vdeo, entre outros. Para a solicitao, necessrio informar a URL.
POST
Transmite dados para processamento no servidor. Este mtodo pode ser

utilizado, por exemplo, para o envio de dados preenchidos em um formulrio de uma pgina de cadastro.
HEAD
Busca de informaes sobre um determinado recurso. Pode ser utilizado,

por exemplo, para verificar se uma determinada pgina web existe (ou
no) no servidor.
Tabela 1.1 Operaes do protocolo HTTP
A listagem cdigo 1 apresenta uma mensagem de requisio enviada ao servidor web da pgina web index.html. Na solicitao, possvel
identificar o tipo de operao (GET), na linha 1, bem como o identificador
do recurso (URL) na linha 2.
Cdigo 1 Mensagem de requisio de um recurso ao servidor web.
GET /HTTP/1.1
Host: www.meusite.com.br/index.html
Na mensagem de resposta, o servidor utiliza um cdigo de status

para identificar o processamento da solicitao. Caso o recurso exista, ou
seja, a pgina web seja encontrada no servidor, o cdigo utilizado ser o
200. A listagem cdigo 2 ilustra uma possvel mensagem de resposta do
servidor web quando o recurso solicitado est disponvel. Na mensagem
de resposta, possvel visualizar, por exemplo, na linha 2, qual o servidor
web utilizado para a disponibilizao das pginas, bem como, na linha 6,
o tamanho da pgina web solicitada.
Cdigo 2 Mensagem de resposta do servidor web.
HTTP/1.1 200 OK
Date: Wed, 20 Oct 2011 14:30:10 GMT
Server: Apache/1.7.2 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 05 Jul 2011, 22:55:00 GMT
Accept-Ranges: bytes
Content-Length: 1580
Connection: close
Content-Type: text/html
1.4 Correio Eletrnico
As mensagens de correio eletrnicos, ou simplesmente e-mail, foram uma das primeiras aplicaes criadas para a Internet. Esta aplicao
permite a troca de mensagens entre duas pessoas. Uma mensagem eletrnica formada por duas partes, denominadas: head (cabealho) e body
17
Tecnologias Web
(corpo). Originalmente, os e-mails eram compostos exclusivamente de

texto simples, porm, a proposta foi modificada para permitir a transferncia de tipos de dados diferentes, criando assim o MIME.
A troca multiuso do correio da Internet (Multipurpose Internet Mail
Exchange) permite que vrios tipos de contedo sejam carregados nas
mensagens de e-mail, tais como udio, vdeo, imagens, documentos, entre
outros. Um contedo MIME definido por trs partes bsicas: Version
que indica a verso do MIME que est sendo utilizada na mensagem; Description uma descrio detalhada sobre o tipo de dados que est sendo
trafegado; e Content-Type no qual o tipo de dados do contedo enviado
especificado.
O cabealho da mensagem de e-mail formado por alguns campos
especficos que definem, por exemplo, o destinatrio (To), o remetente
(From), o assunto (Subject), a data (Date), entre outros. O corpo da mensagem representa a composio da mensagem, a qual pode ser formada
por texto simples ou por contedo MIME. A listagem cdigo 3 apresenta
um exemplo de mensagem de e-mail em que possvel identificar os campos de cabealho, bem como o corpo da mensagem:
Cdigo 3 Exemplo de uma mensagem de correio eletrnico e seus
respectivos campos estruturais
MIME-Version: 1.0
Received: by 10.194.18.225 with HTTP;
Tue, 20 Dec 2012 07:30:19 -0700 (PDT)
Cabealho
Date: Tue, 20 Dec 2012 11:30:19 -0300

Delivered-To: email@email.com
Message-ID : <CA+CWeHGZwwv1SqDP1=w@email.com
Subject: Feliz Natal!
From: Joo da Silva <joao@email.com>
18
To: Jos Antnio <joase@email.com>

Content-Type: text/plain; charset=UTF-8
Ol,
corpo
Escrevo esta messagem para desejar um feliz Natal e um prspero ano novo.
Que o prximo ano seja repleto de realizaes.
Saudaes,
Joo da Silva
Para o processo de troca de mensagens de e-mail, utilizado um

protocolo de aplicao denominado SMTP
(Simple Mail Transfer Protocol). AsUm servidor de e-mail,
sim, com este protocolo, possvel
tambm
conhecido como agende
realizar a transferncia de uma
de transporte de e-mail, um programa
mensagem da mquina cliente at
de computador utilizado para transferncia
o servidor de e-mail. Caso algum
de mensagens de correio eletrnico entre
computadores.
Este servidor utiliza o protocolo
tipo de problema ocorra durante
SMTP para a troca de mensagens. Um dos
o processo de transmisso, por
principais servidores de e-mail existentes
exemplo, quando o servidor de
atualmente o SendMail<sendmail.org>.
mensagens no est funcionando,
o cliente tentar realizar o envio mais
tarde. Para que a mensagem seja enviada, obrigado que o remetente especifique
o destinatrio da mensagem no campo To do cabealho do e-mail. O protocolo SMTP utiliza uma conexo TCP na porta 25
para o envio das mensagens.
O processo de recebimento de mensagens de correio eletrnico
pode ser realizado pelos protocolos POP3 ou IMAP. O Protocolo de Correspondncia POP3 utiliza uma conexo TCP na porta 110 para realizar
a comunicao entre um aplicao cliente de e-mail e o servidor de mensagens. Este protocolo verifica se existem novas mensagens para aquele
destinatrio, e efetua a transferncia dessas mensagens para a mquina do
cliente. Durante este processo, ocorre a autenticao do usurio no servidor de mensagens, por meio das credenciais (usurio e senha), em seguida
inicia-se o processo de transmisso. Finalizada a transmisso das mensagens, o servidor atualizado apagando todas as mensagens que j foram
transferidas. Outro protocolo para recebimento de mensagens o IMAP
(Internet Message Access Protocol), em que as mensagens ficam sempre
19
Tecnologias Web
armazenadas no servidor e, para o acesso s mensagens os usurios servios de webmail tais como Gmail, Outlook, Yahoo Mail, entre outros.
A principal vantagem deste protocolo permitir o acesso a mensagens
de qualquer computador sem a necessidade de uma aplicao cliente de
e-mail.
1.5 Transferncia de Arquivos
O protocolo de transferncia de arquivos, do ingls File Transfer

Protocol (FTP), utilizado para o envio e/ou recebimento de arquivos em
um servidor remoto. O acesso aos arquivos remotos realizado a partir
da especificao da URL do servidor e, em alguns casos, do fornecimento
das credenciais de autorizao (usurio e senha). Por exemplo:
ftp://ftp.servidor.com.br/
20
O usurio que deseja acessar um servidor remoto de FTP necessita

de um programa de computador conhecido como cliente FTP. Existem
centenas de clientes de FTP que podem ser obtidos gratuitamente na
Internet, uma possibilidade o uso do programa FileZilla<filezilla-project.org>. Este mesmo programa tambm oferece uma verso servidora
(FileZilla Server) que permite a criao de um servidor FTP para disponibilizao de arquivos.
A transferncia de arquivos com o protocolo FTP ocorre por meio
da conexo em duas portas 20 e 21. Na porta 20, criada uma conexo de
dados, a qual empregada no envio dos arquivos, enquanto na porta 21
acontece a conexo de controle, necessrio para o envio de informaes
de identificao do usurio, bem como comandos usados na troca dos arquivos.
Os servidores FTP, alm da transferncia de arquivos, fornecem a
possibilidade de execuo de comandos para os mais variados propsitos.
Estes comandos geralmente so empregados no gerenciamento dos arquivos disponveis no servidor. Os principais comandos so: mkdir permite
a criao de diretrios no servidor; delete apaga um arquivo; dir lista o
contedo do diretrio atual; cd muda o diretrio atual; rename altera o
nome de um arquivo, entre outros.
1.6 Servio de Diretrio (DNS)
A Internet oferece aos usurios uma infinidade de recursos que

podem ser acessados em qualquer lugar do mundo. Geralmente, a identificao dos recursos na rede ocorre por meio de endereos amigveis, conhecidos como nomes de hosts (hostname), que tem como objetivo simplificar o acesso aos hosts espalhados pela Internet, por exemplo, www.
meusite.com.br. Alm disso, cada host recebe um nome exclusivo, o que
facilita a memorizao, ao contrrio dos endereos que so representados por meio de uma sequncia numrica de tamanho fixo, por exemplo,
123.456.78.9. Esses endereos no so simples de memorizao, porm
so adequados para o processo de roteamento dos pacotes. Voc provavelmente se lembra de algumas dezenas de hostnames de sua preferncia. No
entanto, dificilmente voc consegue guardar os endereos de dois ou trs
hosts (PETERSON & DAVIE, 2001).
Nesse contexto, temos a seguinte situao: as pessoas utilizam
frequentemente os hostnames por ser mais fcil de lembrar, enquanto os
roteadores necessitam dos endereos IP para localizao dos hosts rede.
Com isso, existe a necessidade de uma aplicao que realize a traduo de
hostnames em endereos, e vice-versa. Esta tarefa de responsabilidade
do Sistema de Nomes de Domnio, do ingls Domain Name System, ou
simplesmente DNS (KUROSE & ROSS, 2006).
O servio de DNS utilizado por outros protocolos de comunicao, tais como HTTP, SMTP e FTP, para traduo e localizao dos hosts
na rede. Por exemplo, considere que um usurio utilizando um navegador
web especificou o seguinte endereo: <http://www.meusite.com.br/index.
html>. Para que a mquina cliente consiga acessar este endereo, enviando uma requisio HTTP at o servidor, necessrio inicialmente obter o
endereo IP do host <www.meusite.com.br>. O navegador extrai o nome
do host e envia para a aplicao DNS que est executando na mquina do
cliente. O DNS do cliente envia uma consulta deste nome de host para um
servidor DNS, o qual processa a solicitao e retorna para o cliente o endereo IP do host. Por fim, o navegador realiza uma requisio HTTP da
pgina utilizando o endereo IP (KUROSE & ROSS, 2006).
21
Tecnologias Web
Atividade
Considerando o contedo abordado ao longo deste captulo, em que

foram discutidos aspectos relacionados evoluo tecnolgica da internet
e os protocolos de comunicao, responda s seguintes questes:
Quais os principais personagens responsveis pela criao da
Internet nas dcadas de 60 e 70?
Qual o primeiro navegador de Internet?
Quando a linguagem de marcao de hipertexto (HTML) foi
criada?
Qual a utilidade do protocolo HTTP no contexto da Internet?
Apresente uma listagem dos principais navegadores web
(browsers) disponveis atualmente.
Sobre correio eletrnico, explique as funcionalidades dos seguintes protocolos: SMTP, POP3 e IMAP.
Qual protocolo utilizado pelos servios de correio eletrnico
baseados na Internet, tais como Gmail, Yahoo Mail, entre outros?
Considerando o Sistema de Nomes de Domnio, explique o
processo de traduo de um nome de hosts em um endereo.
Reflexo
Neste captulo, voc aprendeu os fatos histricos e evolutivos da

Internet,
bem como as caractersticas e utilidades dos protocolos de comunicao. Neste contexto, faa uma anlise crtica e reflexiva do seguinte questionamento: Nos dias atuais, como seria o processo de comunicao entre as
pessoas se no existisse a Internet? Voc pode imaginar?
Leituras recomendadas
Para complementar o contedo exposto neste captulo, sugerida

a leitura do primeiro captulo do livro Sistemas Distribudos Conceitos
e Projeto, o qual apresenta uma caracterizao de um sistema distribudo
e sua contextualizao no cenrio da Internet. A referncia completa da
obra pode ser visualizada a seguir:
22
COULORIS, G.; DOLLIMORE, J.; KINDBERG, T. Sistemas

Distribudos: Conceitos e Projeto. Porto Alegre: Bookman, 2007.
Referncias
APACHE.Apache HTTP Server Project.Disponvel em <httpd.apache.
org/>. acesso em setembro de 2014.
IIS. Internet Information Services. Disponvel em: <www.iis.net>.
Acesso em setembro de 2014.
KUROSE, J. F., ROSS, K. W. Redes de Computadores e a Internet:
uma nova abordagem. So Paulo: Pearson Addison Wesley, 2003.
KUROSE, J. F., ROSS, K. W. Redes de Computadores e a Internet
Uma abordagem top-down 3. ed.. So Paulo: Pearson Addison
Wesley, 2006.
PETERSON, L.L.; DAVIE, B.S. Redes de Computadores Uma
Abordagem Sistmica 2. ed.. Rio de Janeiro: LTC Livros Tcnicos
e Cientficos, 2001.
No prximo captulo
No prximo captulo, voc aprender as principais ferramentas de

segurana disponveis na Internet e, ainda, estudar os diversos tipos de
aplicaes que podem ser utilizadas na rede mundial de computadores.
23
Tecnologias Web
Minhas anotaes:
24
Segurana e Aplicativos
na Internet
Cap
t u
lo
A Internet modificou drasticamente a maneira de interao entre os usurios. A todo

momento utilizamos a rede mundial de computadores para transferncia de informaes. No entanto,
a questo principal est relacionada segurana das
informaes e tentativa de responder a seguinte pergunta:
A Internet segura? Neste captulo, voc estudar as metodologias utilizadas para o provimento de segurana na internet e,
ainda, os principais aplicativos que so utilizados na rede.
Com o estudo deste captulo, voc aprender: os aspectos de segurana na transmisso de dados pela Internet, o protocolo de comunicao segura HTTPS, os mecanismos de criptografia de dados, o uso de
firewall
para controle e gerenciamento de trfego e, os tipos de aplicativos disponveis na Internet.
Voc lembra?
No captulo anterior, voc estudou como a evoluo da Internet impactou

na sociedade atual. Voc conheceu o protocolo TCP/IP e o protocolo de
transferncia de hipertexto HTTP. Alm disso, aprendeu o protocolo de
transferncia de mensagens eletrnicas SMTP, bem como o protocolo
de transferncia de arquivos conhecido como FTP. Alm disso, voc
compreendeu os aspectos principais associados ao servio de diretrio (DNS) e a localizao de recursos na Internet.
Tecnologias Web
2.1 Criptografia de Dados na Internet
26
Em termos gerais, a Internet pode ser entendida como uma grande

rede de computadores em que inmeros recursos so compartilhados. O
acesso a estes recursos faz com que, cada vez mais, dados sejam trafegados na rede. O principal problema garantir que esses dados sejam transmitidos de forma segura, ou seja, no permitir que as mensagens trocadas
entre os hosts da rede possam ser interceptadas e lidas por outras pessoas.
A todo momento estamos preocupados com segurana na Internet, seja no
momento em que acessamos nosso servio de e-mail, ou, ainda, enquanto realizamos algum tipo de transao financeira, como, por exemplo, a
compra de um produto em um site de comrcio eletrnico. Em busca de
uma comunicao segura, o principal recurso adotado para preservar as
mensagens na rede o uso de mecanismos de criptografia.
A criptografia tem como objetivo aplicar um algoritmo na mensagem que ser enviada rede de forma a produzir uma mensagem criptografada, tambm conhecida como mensagem cifrada. Ento, a mensagem
resultante enviada at o receptor, que, recebe a mensagem e aplica um
algoritmo inverso com o objetivo de descriptografar a mensagem. Para
o processo de criptografia e descriptografia, so utilizadas chaves secretas compartilhadas entre o remetente e o receptor das mensagens. Nesse
contexto, os algoritmos de criptografia podem ser classificados em trs
grupos: algoritmos de chave secreta, algoritmos de chave pblica e algoritmos de hashing (ou message digest).
Um algoritmo de criptografia baseado em chave secreta utiliza uma
chave que compartilhada tanto pelo remetente quanto pelo receptor. Assim, a mesma chave secreta utilizada pelo remetente para a criptografia
da mensagem, e tambm usada pelo receptor para descriptografia da
mensagem. Um dos principais algoritmos de criptografia baseado neste
conceito conhecido como Data Encryption Standard (DES) (PETERSON & DAVIE, 2001).
No modelo de criptografia por chave pblica, cada participante do
processo de comunicao possui uma chave denominada chave privada,
a qual no compartilhada por ningum. Alm disso, existe uma outra
chave, conhecida como chave pblica, que distribuda no processo de
comunicao e acessvel a todos os participantes. Durante a troca de mensagens, o remetente realiza a criptografia da mensagem utilizando a chave
pblica, ento envia a mensagem pela rede. O receptor, quando recebe a
mensagem, utiliza a sua chave privada para efetuar a descriptografia da
Segurana e Aplicativos na Internet Captulo 2
mensagem. O algoritmo RSA, em homenagem aos seus autores Rivets,

Shamir e Adleman, a tcnica de criptografia baseada em chave pblica
mais conhecida na literatura (PETERSON & DAVIE, 2001).
Existem tambm algoritmos de criptografia que no utilizam chave
no processo de codificao das mensagens. Essas tcnicas so conhecidas
por efetuar o resumo das mensagens (message digest), por meio da aplicao de funes hash. Para isso, uma mensagem com um nmero expressivo
de bytes (ou caracteres) mapeada em um nmero pequeno e fixo de bytes.
O principal representante deste tipo de algoritmo de criptografia conhecido como MD5 (Message Digest version 5) (KUROSE & ROSS, 2006).
Conexo:
O resultado do algoritmo de criptografia MD5 pode ser visualizado
em diversos sites que permitem a cifra de mensagens em tempo real.
Voc pode analisar o resultado deste processo em alguns endereos
como:
http://nsfsecurity.pr.erau.edu/crypto/md5.html
http://md5-hash-online.waraxe.us/
http://www.jensign.com/JavaScience/www/messagedigestj2/
http://www3.telus.net/Voiculescu/masher/
2.2 Protocolo HTTPS
O trfego de dados na Internet por meio do protocolo HTTP est

sujeito a interceptaes, o qual pode trazer srios problemas de segurana
para os envolvidos. Para garantir a segurana, possvel utilizar um canal
de comunicao seguro conhecido como HTTPS. Este protocolo baseado no protocolo HTTP e funciona em conjunto com o protocolo SSL.
O protocolo SSL (Secure Sockets Layer) fornece uma conexo segura entre o remetente e o receptor por meio da encriptao dos dados.
Assim, as mensagens HTTP trocadas entre o cliente e o servidor web
passagem por um processo de criptografia para aumentar a segurana. O
objetivo do SSL garantir que os dados sejam transferidos de maneira
ntegra e estejam seguros de qualquer ameaa (KUROSE & ROSS, 2006).
Os principais usurios do protocolo HTTPS so os sites que realizam transaes financeiras, tais como instituies bancrias e sites de
comrcio eletrnico. No momento em que o usurio cliente acessa um
site que utiliza o protocolo HTTPS, este usurio redirecionado para uma
27
Tecnologias Web
conexo segura. Alm disso, a URL do usurio modificado e as operaes de requisio e resposta so encriptadas com o SSL. Por exemplo,
considere o endereo de acesso inicial de um site de comrcio eletrnico:
http://www.sitecomercioeletronico.com.br
Com o protocolo HTTPS, o endereo modificado, includa na
barra de endereo do navegador a indicao do uso do protocolo HTTPS.
Alm disso, alguns navegadores exibem um cadeado para demonstrar que
a conexo com o site uma conexo segura. O endereo do site utilizando
HTTPS ser representado por:
https://www.sitecomercioeletronico.com.br
2.3 Firewall
28
A rede mundial de computadores oferece uma srie de servios e

aplicaes para os mais variados tipos de clientes. Estes recursos podem ser
acessados de maneira interna, ou seja, dentro de uma rede local (Intranet),
ou, ainda, em redes externas, quando o cliente de uma rede acessa um recurso fora de sua rede (Internet). Considerando a diversidade de caractersticas
fsicas (hardware) e lgicas (software) dos clientes que esto ingressados na
rede, o controle e gerenciamento das informaes que so trafegados podem
se tornar um desafio para os profissionais de tecnologia da informao.
Para isso, um programa de computador especfico foi criado com o
objetivo de monitorar e controlar toda e qualquer comunicao para dentro
e para fora de uma rede. Este programa conhecido como firewall, o qual permite
Conexo:
especificar um conjunto de polticas
Diversos programas de comde segurana para determinar quais
putador oferecem a possibilidade de
monitoramento e controle dos dados que so
recursos podem (ou no) ser acestrafegados pela rede. A escolha de um prograsados. Os aplicativos de firewall
ma de firewall est associada ao tipo de licena
podem ser utilizados tanto em
(proprietria ou gratuita) e disponibilidade para o
sistema operacional do cliente. Uma soluo bastante
acesso rede interna da empresa
utilizada por usurio de sistemas Linux conhecida
(Intranet), quando para o controle
como Netfilter, e possui como principal caracterstica
a flexibilidade de configuraes de polticas de
de acessos externos (Internet).
segurana. Detalhes sobre este framework
As polticas de segurana
podem ser acessados em:
podem ser utilizadas para implemen<www.netfilter.org/>
tar controles de servios, indicando
quais hosts internos esto disponveis para acesso externo, rejeitando qualquer tipo de tentativa de acesso dos demais hosts. Tambm possvel especificar controles de comportamentos que violem as polticas da organizao,
realizando, por exemplo, a filtragem de mensagens de correio eletrnico que
tenham contedo imprprio. O controle tambm pode ser efetuado em funo
do perfil do usurio. Assim, determinados usurios podem ser habilitados
para acessos externos, enquanto usurios de um outro perfil podem ser bloqueados.
2.4 Aplicativos para internet
A Internet oferece aos usurios uma gama de recursos que podem ser
acessados nos mais variados tipos de dispositivos, tais como computadores
pessoais, tablets, smartphones, entre outros. A utilizao desses recursos depende de aplicativos especficos, por meio dos quais o usurio pode explorar
as funcionalidades da Internet. Nesta seo, apresentaremos uma srie de
aplicativos utilizados na Internet para os mais diversos propsitos.
2.4.1 Navegadores
A aplicao fundamental para utilizao da Internet o navegador,

tambm conhecido como browser. Como apresentado no primeiro captulo, o
primeiro navegador criado para Internet foi chamada Mosaic, o qual, logo em
seguida, foi substitudo pelo Netscape Navigator. Hoje em dia, os principais
navegadores de Internet so: Google Chrome, Internet Explorer, Mozilla Firefox, Safari e Opera. A tabela 1 apresenta uma anlise comparativa do uso dos
principais navegadores de Internet. Esses dados foram coletados pelo site de
anlise de trfego StatCountere representam a popularidade dos cinco principais navegadores (STATCOUNTER, 2014).
Google Chrome
49,18%
Internet Explorer
22,62%
Firefox
19,25%
Safari
5,15%
Opera
1,46%
Outros
2,34%
Total
100,00%
Tabela 2.1 Comparativo de uso dos principais navegadores de internet.

Fonte: StatCounter <gs.statcounter.com/#desktopbrowser-ww-monthly-201409-201409-bar>
29
Tecnologias Web
O Google Chrome o principal navegador de Internet utilizado pelos

usurios atualmente, representando quase 50% do total de usurios. Este
navegador foi desenvolvido pela Google e sua primeira verso foi disponibilizada para os usurios em 2008. Rapidamente, este navegador alcanou
marcas expressivas, deixando para trs a hegemonia do seu principal concorrente, o Microsoft Internet Explorer. A figura 1 apresenta a tela principal
do navegador Google Chrome, o qual est disponvel para diversos sistemas
operacionais, tais como Microsoft Windows, Linux e iOS. O quadro 2.1
apresenta detalhes sobre o navegador e o endereo em que o usurio pode
efetuar o download do aplicativo.
Figura 6 Navegador de internet Google Chrome

Fonte: <pt.wikipedia.org/wiki/Ficheiro:Google_Chrome_screenshot.png>
Tipo:
Navegador
Onde obter:
www.google.com.br/chrome/browser/
Quadro 2.1 Aplicativo Google Chrome
30
O Internet Explorer (IE) o produto da Microsoft para navegao

na Internet. Este navegador foi criado em 1995 e distribudo com os
sistemas operacionais Microsoft. No auge da sua utilizao, o Internet
Explorer chegou a ser utilizado por 99% dos dispositivos que acessavam a
Internet, mas as vulnerabilidades encontradas no produto, principalmente

associadas s falhas que permitiam controlar o acesso dos usurios, fizeram com que o navegador se tornasse menos popular. O quadro 2.2 apresenta informaes sobre o navegador Microsoft Internet Explorer.
Tipo:
Navegador
Onde obter:
windows.microsoft.com/pt-br/internet-explorer/download-ie
Quadro 2.2 Aplicativo Microsoft Internet Explorer
O Mozilla Firefox, ou simplesmente Firefox, uma excelente alternativa para navegao na Internet. Este navegador foi criado em 2002,
inicialmente com o nome de Phoenix, e tem como principais caractersticas a segurana e a possibilidade de execuo em mltiplas plataformas.
A figura 7 exibe a tela inicial do navegador de Internet Mozilla Firefox e o
quadro 2.3 apresenta detalhes sobre o produto.
Figura 7 Navegador de internet Mozilla Firefox executando no sistema operacional Linux.

Fonte: <pt.wikipedia.org/wiki/Ficheiro:Firefox_Screenshot_Linux.PNG>
31
Tecnologias Web
Tipo:
Navegador
Onde obter:
www.mozilla.org/pt-BR/firefox/new/
Quadro 2.3 Aplicativo Mozilla Firefox
O navegador Safari a soluo desenvolvida Apple para o acesso

Internet. A verso inicial deste navegador foi lanada em 2003 e est disponvel para o sistema operacional Mac OSX, iOS e Microsoft Windows.
O quadro 2.4 apresenta detalhes sobre o navegador Safari.
Tipo:
Navegador
Onde obter:
www.apple.com/br/safari/
Quadro 2.4 Aplicativo Safari
O navegador Opera um aplicativo multiplaforma que representa um conjunto de solues para acesso Internet. Alm de fornecer os
recursos para navegao, o Opera tambm possibilita o envio e o recebimento de mensagens de correio eletrnico, bem como a leitura de notcias
(RSS) e o download de arquivos por meio de BitTorrent. O quadro 2.5
apresenta informaes sobre o navegador Opera.
Tipo:
Navegador
Onde obter:
www.opera.com/pt-br
Quadro 2.5 Aplicativo Opera
Os feeds de notcias Really Simple Syndication (RSS) so utilizados

por diversos sites na Internet para divulgao de contedo. Este formato
facilita a distribuio de informaes pela rede, uma vez que o contedo
especificado em arquivos XML. Dessa forma, possvel utilizar leitores de feeds como, por exemplo, o aplicativo Feedly <feedly.com> que
permite a leitura de feeds de notcias em diversos tipos de dispositivos.
32
2.4.2 Clientes de E-mail e WebMail
Os aplicativos para envio e recebimento de mensagens de correio

eletrnico so conhecidos como clientes de e-mail. Esses aplicativos so
instalados no computador do usurio e permitem o cadastramento e o gerenciamento de contas de e-mail institucionais ou gratuitas. Estes produtos
esto disponveis para diversos sistemas operacionais e algumas opes

gratuitas so: Eudora <eudora.com >; MozillaThunderBird<mozilla.org/
pt-BR/thunderbird>; IncrediMail <incredimail.com> e Evolution <wiki.
gnome.org/Apps/Evolution >. A figura 8 apresenta a tela principal do aplicativo Evolution.
Figura 8 Cliente para envio e recebimento de e-mails.
Fonte: <pt.wikipedia.org/wiki/Ficheiro:GNOME-Evolution.png>
Apesar de existiram diversas solues de clientes de e-mail, o seu

uso tem sido gradualmente substitudo pelas aplicaes de Webmail.
Estes aplicativos oferecem uma interface web para o gerenciamento das
mensagens de correio eletrnico. Na Internet podem ser encontradas centenas de servios de webmail, os quais se diferem principalmente pelas
funcionalidades oferecidas para os usurios, tais como limite de espao
de armazenamento, suporte a mltiplos idiomas, uso de protocolos POP3
e SMTP, entre outras. Alm disso, os servios de webmail tambm podem
ser diferenciados pelo tipo de conta, podendo ser gratuitas ou pagas. A
tabela 2.2 apresenta alguns dos principais servios de webmail gratuitos
disponveis na Internet.
33
Tecnologias Web
Servio
Site
BOL
www.bol.com.br
Gandi
www.gandi.net
Gmail
www.gmail.com
iCloud
www.icloud.com
Mail.com
www.mail.com
Mail.ru
www.mail.ru
Outlook
www.outlook.com
Yahoo! Mail
www.yahoo.com
ZipMail
www.zipmail.com.br
Tabela 2.2 Servios de webmail gratuitos disponveis na Internet.
2.4.3 Comunicadores Instantneos
Os aplicativos de comunicao instantnea foram criados como

uma alternativa para as mensagens de correio eletrnico. Enquanto o uso
de mensagens de e-mail representa um modelo de comunicao assncrona, em que o destinatrio no precisa estar conectado para comunicao,
os princpios dos comunicadores instantneos esto fundamentados na
comunicao sncrona, ou seja, os usurios enviam e recebem mensagens
em tempo real.
Os primrdios da comunicao instantnea baseada em um protocolo de comunicao conhecido como IRC Internet Relay Chat. Este protocolo representou o primeiro mecanismo de conversa, ou bate-papo (chat),
em tempo real pela Internet e foi criado em 1988, por Jarkko Oikarinen.
Para comunicar-se utilizando o protocolo IRC, necessria a instalao de
uma aplicao especfica conhecida como cliente IRC. O quadro 2.6 apresenta detalhes sobre o aplicativo mIRC, que um dos principais clientes
para acesso ao IRC.
Tipo:
Comunicador instantneo
Onde obter:
www.mirc.com/get.html
Quadro 2.6 Aplicativo mIRC
34
O aplicativo ICQ revolucionou o cenrio da comunicao instantnea e foi utilizado como inspirao para os principais comunicadores
existentes atualmente. A primeira verso do ICQ foi disponibilizada em
1996, em que cada usurio era identificado por uma sequncia numrica
de 8 dgitos, conhecida como ICQ Number. Assim, ao invs de utilizar
como credenciar um nome de usurio, cada pessoa tinha o seu nmero

no ICQ. A quantidade de usurios do ICQ alcanou a marca de quase 200
milhes de pessoas. Porm, o aplicativo tem enfrentado um perodo de
desuso, perdendo grande parte de seus usurios. O quadro 2.7 apresenta
detalhes sobre o aplicativo ICQ.
Tipo:
Onde obter:
www.mirc.com/get.html
Quadro 2.7 Aplicativo ICQ
A Microsoft possui um produto para comunicao instantnea conhecido como Windows Live Messenger, ou simplesmente MSN. Este
aplicativo liderou por muitos anos a disputa entre os aplicativos para
comunicao on-line, e tem como principal caracterstica a integrao
com os demais produtos da famlia Microsoft. O produto foi lanado em
1999 e descontinuado em 2013, quando passou a integrar o comunicador
Skype. O quadro 2.8 apresenta detalhes sobre o aplicativo Windows Live
Messenger.
Tipo:
Onde obter:
windows.microsoft.com/pt-br/windows-live/essentials
Quadro 2.8 Aplicativo Windows Live Messenger
A soluo do Yahoo para comunicao instantnea conhecida

como Yahoo! Messenger. Com este aplicativo, alm de enviar e receber
mensagens para usurios cadastrados no Yahoo, tambm possvel enviar
mensagens para o usurios de outras redes de comunicao, tal como o
Windows Live Messenger. Outra caracterstica interessante, assim como
outros comunicadores, o Yahoo! Messenger permite que o usurio envie
mensagens utilizando o aplicativo instalado no computador ou por meio
de uma verso web disponvel no site da empresa. Este aplicativo foi lanado em 1998 e possui verses para Windows, Unix (Linux) e iOS. No
quadro 2.9, so apresentadas informaes sobre o Yahoo! Messenger.
Tipo:
Onde obter:
br.messenger.yahoo.com/
Quadro 2.9 Aplicativo Yahoo! Messenger
35
Tecnologias Web
O aplicativo Skype foi criado com o objetivo de realizar a comunicao entre pessoas por meio de voz e vdeo. Este produto foi lanado em
2003 e tem como diferencial a possibilidade de realizar ligaes para telefones fixos e celulares, para qualquer lugar do mundo, com tarifas reduzidas. O aplicativo tem qualidade surpreendente de som e vdeo, mesmo em
conexes de Internet com pouco recursos. Com o Skype, possvel realizar chamadas e enviar mensagens em computadores pessoais, tablets e at
mesmo em smartphones. A empresa foi comprada em 2011 e atualmente
o principal produto da Microsoft para comunicao instantnea. No quadro 2.10, possvel visualizar informaes sobre este comunicador.
Tipo:
Onde obter:
www.skype.com/pt/
Quadro 2.10 Aplicativo Skype
A Google oferece um servio para comunicao instantnea conhecido como Google Talk (ou GTalk). Este produto foi lanado em 2005
e est incorporado ao servio de webmail do Google, o Gmail. Com o
GTalk, possvel enviar mensagens instantneas de texto, bem como,
realizar conversas por voz e vdeo. No quadro 2.11, possvel consultar
informaes sobre o GTalk.
Tipo:
Onde obter:
www.google.com/hangouts/
Quadro 2.11 Aplicativo Google Talk (GTalk)
36
A rede social Facebook oferece aos seus usurio um servio de

comunicao instantnea, por meio da qual possvel trocar mensagens
entre os usurios cadastrados na rede. A comunicao utilizando o chat do
Facebook pode ser realizada no navegador, ou em aplicaes para dispositivos mveis. O Facebook chat no fornece uma soluo de comunicao para desktop. No entanto, pode ser integrado a outros comunicadores
instantneos em diversos sistemas operacionais, tais como Pidgin, Adium,
iChat, entre outros. O quadro 2.12 apresenta detalhes sobre o produto.
Tipo:
Onde obter:
www.facebook.com
Quadro 2.12 Aplicativo Facebook Chat
Para dispositivos mveis, a principal aplicao para comunicao

instantnea conhecida como WhatsApp. Este aplicativo tem representado uma revoluo no cenrio do envio de mensagens, substituindo o
uso de mensagens SMS e MMS (veja box explicativo). O aplicativo foi
lanado em 2009 e est disponvel exclusivamente para plataformas mveis, tais como iOS, Android, BlackBerry e Windows Phone. Em 2014,
o produto foi comprado pela gigante das redes sociais, o Facebook, pelo
valor de 16 bilhes de dlares. O quadro 13 apresenta informaes sobre
o aplicativo WhatsApp.
Tipo:
Onde obter:
Para Android:
play.google.com/store/apps/details?id=com.whatsapp
Para iOS:
itunes.apple.com/br/app/whatsapp-messenger/
Para Windows Phone:
www.windowsphone.com/pt-br/search?q=whatsapp
Quadro 2.13 Aplicativo WhatsApp
O envio de mensagens de texto em dispositivos mveis foi o principal servio de comunicao instantnea para estes tipos de aparelhos. O
servio de mensagens curtas, do ingls Short Message Service SMS,
permite o envio de mensagens de at 160 caracteres. A evoluo das
mensagens SMS conhecida como Multimedia Messaging Service
(MMS), que possibilita o envio de mensagens com contedo multimdia,
tais como udio, imagens e vdeo.
2.4.4 Compartilhamento de Arquivos
O compartilhamento de arquivos na Internet uma soluo bastante

interessante para disponibilizao de contedo na rede. Com este servio,
os arquivos podem se tornar acessveis a qualquer usurio de Internet, ou,
ainda, possvel definir um grupo especfico para o compartilhamento.
A distribuio de arquivos pode ser realizada por aplicativos para
Peer-To-Peer P2P (ponto a ponto), em que o usurio define quais arquivos do seu computador sero compartilhados. Um dos principais meios
para compartilhamento de arquivos utilizando P2P por meio do aplica37
Tecnologias Web
tivo BitTorrent<bittorrent.com/>. A figura 9 apresenta a tela principal de

um outro aplicativo para compartilhamento de arquivos por P2P conhecido como Shareaza, disponvel em <shareaza.sourceforge.net>.
Outra possibilidade para o compartilhamento de arquivos por
meio dos servios de hospedagem. Nestes servios, o usurio tem um
espao para armazenamento dos arquivos que est disponibilizado na
rede. O tamanho do espao est associado s caractersticas do servio de
hospedagem, e pode ser gratuito ou pago. O Google oferece um servio
de armazenamento conhecido como Google Drive, que permite o armazenamento gratuito de at 15Gb. A soluo Microsoft conhecida como
OneDrive e possibilita o armazenamento gratuito de at 7Gb. O Dropbox
uma outra soluo para armazenamento e compartilhamento de arquivos
na Internet. Este servio tem suporte gratuito de at 2Gb e oferece diversos planos pagos para expanso do espao de armazenamento.
38
Figura 9 Aplicativo para compartilhamento de arquivos Shareaza

Fonte: <commons.wikimedia.org/wiki/File:Shareaza_screenshot.PNG>
2.4.5 Segurana na Rede
Para uma navegao tranquila na Internet fundamental o uso de

aplicativos para garantir a transferncia segura das informaes. O primeiro aplicativo essencial para Internet o antivrus que proteger voc
contra a contaminao de vrus eletrnicos. Alm disso, voc tambm
pode utilizar um programa de firewall, para bloquear tentativas de invases no seu equipamento. Existem tambm aplicativos para proteo contra spywares que garantem, por exemplo, que dados do usurio no sejam
capturados durante o uso da Internet. Por fim, voc tambm pode adotar
aplicativos para criptografia de dados, cujo objetivo impedir o acesso
no autorizado aos dados da sua mquina.
2.4.6 Aplicativos na Web 2.0
Com a popularizao da Internet e os avanos tecnolgicos nos

sistemas computacionais, cada vez mais, o foco no cenrio de desenvolvimento de aplicativos tem sido a Internet. Enquanto a pouco tempo atrs
a maioria das aplicaes era desenvolvida para desktop, atualmente as
solues esto sendo desenvolvidas exclusivamente para Internet. Estes
aplicativos so conhecidos como web 2.0 e possuem as mesmas caractersticas de interao dos aplicativos para desktop. Porm, funcionam
dentro do navegador. Como exemplos desses aplicativos temos: Google
Drive <drive.google.com>; Flickr<www.flickr.com>; Zoho<www.zoho.
com>; Vimeo <vimeo.com>; entre outros.
Atividade
Os algoritmos de criptografia representam o principal recurso para

proteo das informaes que so trafegadas pela Internet. Existem diversos algoritmos capaz de realizar a criptografia das informaes a partir de
chaves pblicas, chaves privadas e funes hash. Muitas solues foram
inspiradas em um algoritmo muito antigo e simples atribudo a Jlio Cesar
e conhecido como cifra de Csar.
O funcionamento deste algoritmo baseado na substituio dos caracteres que compem a mensagem pela k-sima letra sucessiva no alfabeto. Por exemplo, considerando k=5, temos as seguintes transformaes
de caracteres:
39
Tecnologias Web
Texto original
Texto cifrado
...
...
Nesse contexto, demonstre qual o resultado da criptografia do seu

nome completo utilizando a cifra de Csar para k=7.
Reflexo
Neste captulo, foram discutidos assuntos relacionados segurana

da Internet, principalmente durante o processo de transferncia de dados
nos mais variados tipos de aplicativos. Nos dias atuais, cada vez mais ficamos dependentes das tecnologias baseadas na Internet e, provavelmente,
este um caminho sem volta. Sendo assim, faa uma reflexo sobre o
seguinte questionamento: Qual a melhor estratgia que um usurio de
tecnologia pode adotar para garantir a segurana das informaes que so
transmitidas pela Internet?
Para complementar os assuntos presentes neste captulo, sugerida

a leitura do livro Redes de Computadores e a Internet, dos autores Jim
Kurose e Keith Ross. Nesta obra, voc pode consultar informaes detalhadas sobre Segurana em Redes de Computadores. A referncia completa apresentada a seguir:
KUROSE, J. F., ROSS, K. W. Redes de Computadores e a Internet Uma abordagem top-down 3. ed. So Paulo: Pearson Addison
Wesley, 2006.
Referncias
40
KUROSE, J. F., ROSS, K. W. Redes de Computadores e a Internet Uma abordagem top-down 3. ed. So Paulo: Pearson Addison
Wesley, 2006.
PETERSON, L.L.; DAVIE, B.S. Redes de Computadores Uma
Abordagem Sistmica 2. ed. Rio de Janeiro: LTC Livros Tcnicos
e Cientficos, 2001.
STATCOUNTER. StatCounter GlobalStats. Disponvel em: <gs.statcounter.com/>. Acesso em setembro de 2014.
No prximo captulo
No prximo captulo, voc comear o estudo a respeito das tecnologias utilizadas para desenvolvimento de contedo para Internet. Voc
aprender a construir pginas para Internet utilizando a linguagem de
marcao de hipertexto HTML.
41
Tecnologias Web
Minhas anotaes:
42
Linguagem de Marcao
de Hipertexto - HTML
Cap
t u
lo
Neste captulo, voc aprender a linguagem

de marcao de hipertexto conhecida como
HTML. Esta linguagem utilizada para produo
de contedo para Internet, sendo empregada na elaborao das pginas web. Voc conhecer uma srie de
comandos que so utilizados para confeco das pginas,
os quais podem ser usados para incluso de informaes textuais e grficas nas pginas.
Ao final deste captulo, voc ser capaz de:

identificar os comandos utilizados na construo de pginas web;
compreender as funcionalidades de cada comando (tag), bem
como, suas respectivas propriedades;
incluir contedo textual organizado em listas ordenadas e no ordenadas;
apresentar dados na Internet por meio de tabelas.
Voc se lembra?
Nos captulos anteriores, voc aprendeu os fundamentos da internet e

seus protocolos de comunicao. Estudou os diversos aplicativos utilizados na rede e tambm a respeito dos algoritmos de criptografia para preservao das informaes. Neste captulo, voc compreender como
ocorre a produo de contedo para web.
Tecnologias Web
3.1 Linguagem de Marcao de Hipertexto

(HTML)
A linguagem HTML (HyperText Markup Language) foi criada por

Tim Berners-Lee, no incio da dcada de 90, para produo de contedo
para Internet. Para construo de uma pgina web o desenvolvedor pode
utilizar recursos baseados em texto, imagem, udio e vdeo. Os navegadores web (Chrome, Internet Explorer, Firefox, Safari, entre outros) so
capazes de interpretar os cdigos HTML e apresentar o resultado na janela do navegador. A linguagem composta de uma srie de instrues,
denominadas tag, as quais so empregadas na formatao dos elementos
que fazem parte da pgina.
No incio dos anos 2000, a linguagem HTML passou por um processo de reformulao, com o objetivo de incluir regras mais rgidas para
a produo de contedo para internet. Com isso, uma nova especificao
foi criada com base na linguagem XML (eXtensible Markup Language) e
nas tags da linguagem HTML. esta nova linguagem foi nomeada XHTML
(eXtensible Hypertext Markup Language). Com a linguagem XHTML
ocorreu uma separao clara entre o contedo e a formatao de uma
pgina web. Dessa forma, a responsabilidade de marcao dos elementos
relativos ao contedo da pgina ficou para a linguagem XHTML, enquanto as suas respectivas formataes so efetuadas por uma outra linguagem
denominada Folha de Estilo em Cascata (CSS).
Mais recentemente, a World Wide Web Consortium (W3C), organizao responsvel pela padronizao de tecnologias para web, divulgou uma nova especificao (ainda em fase de elaborao), denominada
HTML5. Mesmo ainda no concluda, diversos sites na Internet tm
utilizado a HTML5 na confeco das pginas. A linguagem traz novos recursos como, por exemplo, a possibilidade de incluso de contedo multimdia de udio e vdeo sem a necessidade de plug-ins externos.
44
Linguagem de Marcao de Hipertexto - HTML Captulo 3
A linguagem de marcao HTML5 o padro mais recente

desenvolvido pela W3C para confeco de pginas web. Uma das
principais novidades deste novo padro a possibilidade de execuo
de contedo multimdia, udio e vdeo, sem a necessidade de plugin.
Com isso, sites como YouTube no necessitam de plug-ins adicionais,
tais como Flash (Adobe), Silverlight (Microsoft), ou ainda JavaFX
(Oracle), para apresentao do contedo. Em abril de 2010, Steve Jobs
publicou um artigo interessante sobre um possvel fim para tecnologia
Flash. Detalhes em <www.apple.com/hotnews/thoughts-on-flash/>.
O desenvolvimento de pginas web utilizando a linguagem HTML

pode ser realizado em qualquer tipo de editor de texto. Assim, um simples
editor como o Bloco de Notas pode ser empregado na construo das
pginas. No entanto, existem alguns editores que oferecem recursos interessantes para o desenvolvedor, os quais aumentam em muito a produtividade durante a confeco das pginas.
Uma alternativa para edio de pginas HTML o aplicativo NVU,
disponvel em (NVU, 2014). O NVU gratuito e est disponvel para
usurios dos sistemas operacionais Windows, Linux e Macintosh. Outra possibilidade gratuita a utilizao do editor Notepad++, disponvel
em (NOTEPAD++, 2014). Comercialmente, o principal aplicativos para
produo de contedo para Internet o Adobe DreamWeaver, disponvel
em (DREAMWEAVER, 2014). Para a codificao dos exemplos apresentados ao longo deste e dos prximos captulos, sugerimos a utilizao do
editor Notepad++.
Para codificao de uma pgina web, inicialmente, voc dever
abrir o editor de texto e escrever o cdigo HTML da pgina. A figura 10
apresenta um exemplo de pgina web codificada no editor Notepad++.
O prximo passo salvar a pgina no formato HTML. Para isso,
utilize o menu Arquivo>Salvar e, em seguida, escolha a pasta da sua preferncia. O nome de uma pgina HTML deve possuir a extenso .html,
por exemplo, exemplo01.html. A figura 11 ilustra a etapa de salvamento
de uma pgina no formato HTML no editor Notepad++. Veja que os cdigos da linguagem passam a ter sua sintaxe destacada, facilitando a sua
identificao.
45
Tecnologias Web
Figura 10 Codificao de uma pgina HTML no editor Notepad++.
Figura 11 Etapa de salvamento da pgina HTML no editor Notepad++.
46
Finalmente, voc poder utilizar o navegador da sua preferncia

para visualizar a pgina web. A figura 12 ilustra o resultado da visualizao da pgina no navegador Google Chrome.
Figura 12 Resultado da visualizao da pgina no navegador Google Chrome.
3.2 Estrutura Bsica de uma Pgina HTML
As pginas HTML so formadas por um conjunto de instrues (ou

comandos) conhecidas como tags (etiquetas), as quais possibilitam a incluso de elementos na pgina. Para especificao de uma tag necessrio
informar o nome da tag, em seguida, uma sequncia no-obrigatria de
atributos e seus respectivos valores. Todas as tags de uma pgina so definidas em meio ao sinal de menor (<) e ao sinal de maior (>). Por exemplo,
para codificao de um pargrafo em uma pgina, utilizamos a tag <p>,
em que p representa o nome da tag. Alm disso, usamos uma tag para
definir o fechamento do elemento, a qual especificada pelo nome da tag
precedida pelo smbolo /, por exemplo, </p>. Algumas tags da linguagem HTML no possuem tag de fechamento. assim, nesses casos, uma
nica tag utilizada para especificao e fechamento do elemento. Por
exemplo, a tag <br/> empregada na quebra de linhas em pginas HTML,
ou, ainda, a tag <hr/> usada para incluso de uma rgua horizontal na
pgina.
Na estrutura bsica de uma pgina web o elemento central a tag
<html>, a qual representa o incio do documento. O contedo deste elemento composto de dois blocos de instrues muito bem definidos, conhecidos como cabealho e corpo.
A estrutura bsica de uma pgina web formada por dois blocos
bem definidos de instrues, os quais so denominados: cabealho e
corpo. No bloco de cabealho <head> so especificados detalhes gerais
sobre a pgina, tais como o ttulo da pgina <title>, a incluso de arquivos
47
Tecnologias Web
externos, tais como script <script>, ou folhas de estilo em cascata<link>,

definio de metadados <meta> como, por exemplo, qual o conjunto de
caracteres (charset) utilizado na pgina, ou, ainda, as principais palavras-chave usadas no documento.
O bloco de corpo <body> o local em que a pgina devidamente
confeccionada. Neste seguimento, so usadas tags de linguagem HTML
para incluso de texto, imagens, udio e vdeo. Em termos gerais, no
bloco <body> so especificadas todas as informaes visuais que sero
visualizadas pelo usurio. Alm disso, so definidos todos os modelos de
interao entre o usurio e a pgina. A listagem cdigo 3.1 apresenta a estrutura bsica mnima necessria para construo de uma pgina web. No
cdigo, possvel visualizar claramente os blocos de cabealho e corpo.
Codigo 1
01 <!DOCTYPE html>
02 <head>
03
04 </head>
05 <body>
06
07
08 </body>
09 <html>
10
cabealho
corpo
3.3 Elementos para Formatao de Texto
48
Na linguagem HTML, o elemento mais

simples para incluso de informao textual
Conexo:
em uma pgina denominado <p>. Com
Os textos gerados pelo
esta tag possvel adicionar pargrafos
site Lorem ipsum <www.
lipsum.com>
so amplamente
pgina, os quais so definidos indiutilizados para preenchimento de
vidualmente pelos blocos de incio do
espaos em publicaes. Estes textos so escritos em latim e so muito
pargrafo <p>, e fim do pargrafo </
uteis para testar o layout de pginas
p>. A listagem cdigo 2 ilustra o uso
web. Mais detalhes podem ser consultados em:
da tag <p> para incluso de pargra<pt.wikipedia.org/wiki/Lofos na pgina. As informaes textuais
rem_ipsum>
foram geradas com o site Lorem ipsum
<www.lipsum.com>. O resultado da visualizao da pgina no navegador

apresentado na figura 13.
Cdigo 2
01 <!DOCTYPE html>
02 <html>
03 <head>
04
<meta charset=utf-8>
05
<title>HTML: Exemplo 02</title>
06 </head>
07 <body>
08
<p>
09
Lorem ipsum dolor sit amet, elit.
10
Aliquam iaculis urna neque, vel placerat metus
11 egestas sit amet. Vestibulum non ultricies
12 risus. Etiam consectetur imperdiet gravida.
13
</p>
14
15 <p>
16
Pellentesque habitant morbi tristique senectus
17 et netus et malesuada fames ac turpis egestas
18 Vivamus sit amet aliquam augue, quis semper
19 orci. Aliquam vehicula, sapien ut sodales
20
fringilla, mi ipsum placerat libero, mollis
21 pellentesque eros
22
felis ut sapien.
23
</p>
24
25 <p>
26
Ut eu semper quam. Aenean hendrerit volutpat
27 justo eget volutpat. Mauris ex arcu, interdum
28 non odio sed, faucibus ultrices ex.
29
</p>
30 </body>
31 <html>
49
Tecnologias Web
Figura 13 Resultado da visualizao da pgina no navegador.
A informaes textuais includas na pgina podem ser controladas

utilizando uma tag para quebra de linha denominada <br/>. Os documentos HTML no reconhecem caracteres para quebra de linha. Assim, caso
seja necessrio incluir em uma pgina, voc precisar utilizar a tag <br/>.
Outro elemento til para organizao dos textos da pgina a rgua horizontal <hr/>, a qual permite a incluso de um elemento grfico para separao dos pargrafos, ou outros elementos da pgina.
Os elementos de ttulo (heading) so utilizados para incluir textos com
destaque nas pginas web. Para isso, so usadas as tags <h1>, <h2>, <h3>,
<h4>, <h5> e <h6>, as quais representam um texto com maior destaque (h1),
at um texto com menor destaque (h6). Na listagem cdigo 3, possvel visualizar o uso das tag de ttulo para destacar textos nos documentos HTML. A
figura 3 ilustra o resultado da visualizao no navegador. No exemplo, possvel visualizar tambm o uso da tag para quebra de linha <br/> na linha 15 e
a incluso de uma rgua horizontal <hr/> nas linhas 09 e 24.
Cdigo 3
50
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>Ttulo do Documento</h1>
09
<hr/>
10
<h2>Captulo 01</h2>
11
<h3>Pargrafo 1</h3>
12
<p>
13
Aliquam iaculis urna neque, vel placerat metus
14 egestas sit amet.
15
<br/>
16
Vestibulum non ultricies risus.
17
</p>
18
<h3>Pargrafo 2</h3>
19
<p>
20
Pellentesque habitant morbi tristique senectus
21 et netus et
22
malesuada fames ac turpis egestas.
23
</p>
24
<hr/>
25
<h2>Captulo 02</h2>
26
<h3>Pargrafo 1</h3>
27
<p>
28
Ut eu semper quam. Aenean hendrerit volutpat
29 justo eget
30
volutpat.
31
</p>
32
<h4>
33
Nam eleifend ullamcorper magna.
34
</h4>
35
<h5>
36
Curabitur nec feugiat massa.
37
</h5>
38
<h6>
39
In ac est vitae sem sodales malesuada vel eget
41
</h6>
40 </body>
42
</h6>
43 <html>
51
Tecnologias Web
52
A linguagem HTML possui uma srie de elementos para formatao

do texto que so muito semelhantes s funcionalidades disponveis em
editores de texto. Por exemplo, a tag <b> pode ser utilizada para definir
um texto em negrito na pgina, ou, ainda, a tag <i> permite a especificao de um texto em itlico. A listagem cdigo 4 apresenta o uso das tags
para formatao de texto em negrito e itlico. A figura 15 ilustra o resultado da visualizao no navegador.
Cdigo 4
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>Formatao de Texto</h1>
09
10
<h3>Texto Normal</h3>
11
<p>
12
Lorem ipsum dolor sit amet, consectetur
13 adipiscing elit. Aliquam iaculis urna neque, vel
14 placerat metus egestas sit amet. Vestibulum non
15 ultricies risus. Etiam consectetur imperdiet gravida.
16 Vestibulum ante ipsum primis in faucibus orci luctus
17 et ultrices posuere cubilia Curae;
18
</p>
19
20
<h3>Texto Negrito</h3>
21
<p>
22
<b>
23
25 placerat metus egestas sit amet. Vestibulum non
29
</b>
30
</p>
31
32
<h3>Texto Itlico</h3>
33
<p>
34
<i>
35
53
Tecnologias Web
37 placerat metus egestas sit amet. Vestibulum

41
</i>
42
</p>
43 </body>
44<html>
45
54
A especificao HTML5 incluiu uma nova tag para definio de

textos em destaque. Com a tag <mark> possvel realar textos na pgina com uma cor brilhante. Outro elemento importante tambm para
formatao de texto a tag <del>, que permite a especificao de textos
tachados, o que inclui um risco no meio do texto. Alm disso, possvel
tambm utilizar a tag <ins> para formatao de textos com a aparncia de
sublinhado. Este elemento inclui uma linha na parte inferior do texto. A
listagem cdigo 5 ilustra o uso das tags para formatao de texto <mark>,
<del> e <ins>. A figura 16 apresenta o resultado da visualizao no navegador.
Cdigo 5
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<p>
09 Lorem ipsum dolor sit amet, consectetur adipiscing
10 elit. Aliquam iaculis urna neque, vel placerat metus
11 egestas sit amet. Vestibulum non ultricies risus.
12 <mark>Etiam consectetur imperdiet gravida. Vestibulum
13 ante ipsum primis in faucibus orci luctus et ultrices
14 posuere cubilia Curae; Duis eleifend, libero et
15 pretium viverra, ante diam tempor dui, quis imperdiet
16 metus nibh ut neque</mark>. Duis lacus justo, finibus
17 non mi ut, lacinia mollis dolor. Duis vulputate
18consequat mauris, et lacinia justo lobortis id. Ut
19 viverra velit a sapien venenatis pellentesque. <del>
20 Proin eget sem faucibus, sodales eros sed, hendrerit
21 dolor. Vivamus sagittis orci commodo rutrum posuere
22 </del>. Donec non rhoncus lacus. Suspendisse
23 tristique tristique est, ut suscipit eros posuere a
24 Sed feugiat eget justo nec scelerisque. Maecenas leo
25 magna, egestas id nulla in, porttitor dignissim
26 erat.Pellentesque habitant morbi tristique senectus
27 et netus et malesuada fames ac turpis egestas.
28 <ins>Vivamus sit amet aliquam augue, quis semper
29 orci. Aliquam vehicula, sapien ut sodales fringilla,
30 mi ipsum placerat libero, mollis pellentesque eros
31 felis ut sapien. Aenean consequat porttitor massa,
32 vel porta turpis ullamcorper vitae</ins>. In hac
33 habitasse platea dictumst. Praesent eu lectus
34 scelerisque, tincidunt nibh quis, consectetur nibh.
35 Nam eleifend ullamcorper magna. Morbi ac velit quam.
36 Proin euismod euismod mattis.
55
Tecnologias Web
37
</p>
38 </body>
39 <html>
Na formatao de contedo textual, possvel ainda incluir textos subscritos e sobrescritos. Para incluso de textos subscritos na pgina, utilizada
a tag <sub>, enquanto, para incluso de textos sobrescritos, usada a tag
<sup>. Por exemplo, considere a seguinte frmula D = ( 1 + y1)2 ( 2 + y2)2 ,
expressa na linguagem HTML com o trecho de cdigo apresentado na listagem cdigo 6.
Cdigo 6
56
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>
09
<h1>
10
(x<sub>1</sub>+y<sub>1</sub>)<sup>2</sup> 11
(x<sub>2</sub>+y<sub>2</sub>)<sup>2</sup>
12
</h1>
13 </body>
14 <html>
3.4 Elemento para Insero de Imagens
Para insero de imagens em documento HTML, necessria a

utilizao do elemento <img>. Com isso, possvel incluir imagens nos
formatos matriciais: JPG, PNG e GIF. Esta tag permite ainda a configurao de propriedades da imagem, tais como, a altura (height) e a largura
(width) da imagem. A listagem cdigo 7 ilustra a insero de uma imagem
em um documento HTML, enquanto a figura 17 apresenta o resultado da
visualizao no navegador. Veja na linha 09 que o nome da imagem definido no atributo src (source).
Conexo:
Na Internet, existem diversos endereos que disponibilizam imagens para serem
inseridas nos sites. Alguns exemplos so:
www.iconfinder.com/
www.iconspedia.com/
flaticons.net/
Cdigo 7
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08 <h1>Insero de imagens</h1>
09 <img src=eniac.jpg height=305 width=400 />
10
<p>
11
<i>Foto do computador ENIAC (Electronic
12 Numerical Integrator And Computer) da dcada de
13 40.</i>
14
</p>
15 </body>
16 <html>
17
57
Tecnologias Web
3.5 ncoras
As ncoras, ou hiperlinks, so elementos da linguagem HTML utilizados para definir ligaes entre documentos. Assim, possvel construir
uma estrutura de navegao entre pginas web, de forma que o usurio
possa acessar outras pginas clicando sobre uma ligao. A definio de
uma ncora em uma pgina ocorre por meio da tag <a>, em que necessrio indicar qual documento HTML est associado ncora. A ligao
entre documentos pode ocorrer dentro do mesmo site, ou, ainda, podem
acontecer referncias a documentos externos. A listagem cdigo 8 ilustra
a utilizao de ncoras em pginas web.
Cdigo 8
58
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>ncoras entre documentos</h1>
09
10
<h2>Clique na ncora para acessar a pgina</h2>
11
<a href=exemplo01.html>Exemplo 01</a><br/>
12
13
14
15
16
<h2>Utilize as ncoras para acessar sites de
17 notcias</h2>
18
<a
19 href=http://www.estadao.com.br>Estado</a><br/>
20
<a
21 href=http://www.folha.com.br>Folha</a><br/>
22 </body>
23 <html>
3.6 Listas
A linguagem HTML possui uma srie de elementos para manipulao de conjuntos de informaes textuais. Estes conjuntos podem ser
apresentados por meio de listas, as quais so definidas em trs grupos:
lista ordenada; lista no ordenada; e lista de descrio.
Uma lista ordenada, definida com a tag <ol>, pode ser utilizada
para apresentao de um conjunto de informaes organizados numrica ou alfabeticamente. Cada elemento da lista definido por meio de
uma tag <li>, do ingls list item. As listas no ordenadas, especificadas
com a tag <ul>, utilizam um marcador para indicar cada elemento da
lista. Os marcadores disponveis para os itens da lista so: disco (disc),
quadrado (square) ou crculo (circle). Finalmente, as listas de descrio,
representadas pela tag <dl>, utilizam outras duas tag para descrever os
elementos que compem a lista. A tag <dt> define um termo em uma lista
de descrio, enquanto a tag <dd> descreve o termo na lista. A listagem
cdigo 9 ilustra a definio de listas em documentos HTML. No exemplo,
possvel notar a utilizao dos trs tipos de lista. A figura 17 apresenta o
resultado da visualizao no navegador.
59
Tecnologias Web
Cdigo 9
60
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>Lista Ordenada</h1>
09
10
<h2>Numrica</h2>
11
<ol type=1>
12
<li>Lorem ipsum dolor sit amet.</li>
13
<li>Curabitur sed tortor.</li>
14
</ol>
15
<ol type=i>
16
17
18
</ol>
19
20
</ol>
21
<ol type=a>
22
23
24
</ol>
25
26
<h1>Lista No-Ordenada</h1>
27
<ul type=circle>
28
29
30
</ul>
31
<ul type=square>
32
33
34
</ul>
35
36
<h1>Lista de Descrio</h1>
37
<dl>
38
39
40
41
42
</dl>
43 </body>
44 <html>
<dt>Lorem ipsum</dt>
<dd>Aenean tempus.</dd>
3.7 Tabelas
Em documentos HTML, as tabelas podem ser empregadas para

apresentao de informaes, bem como para organizao do contedo da
pgina. Para especificao de uma tabela, necessria a utilizao da tag
<table>. Alm disso, preciso definir as linhas da tabela com a tag <tr>. e
as colunas com a tag <td>. Na tabela, tambm possvel definir uma linha
em destaque para os elementos do cabealho com a tag <th>. A listagem
cdigo 10 ilustra o uso de tabelas em documentos HTML. Neste exemplo
possvel notar o uso das principais tags para definio de tabelas, assim
como, o recurso de mesclagem de clulas, tanto em relao s linhas (rowspan), quanto em funo das colunas (colspan). O resultado da visualizao no navegador apresentado na figura 19.
61
Tecnologias Web
Cdigo 10
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<table border=1 cellpadding=0
09 cellspacing=0 width=100%>
10
<tr>
11
<th>Nome</th>
12
<th>Telefone</th>
13
<th>Email</th>
14
<th>Pais</th>
15
</tr>
16
<tr>
17
<td>Holmes Lane</td>
18
<td>1-815-430-0226</td>
19
<td>inconsequat@felis.ca</td>
20
<td>Gabon</td>
21
</tr>
22
<tr>
23
<td>Xanthus Salazar</td>
24
<td>1-395-585-9499</td>
25
<td>notemail@odioEtiam.net</td>
26
<td>Mauritius</td>
27
</tr>
28
<tr>
29
<td>Chandler Molina</td>
30
<td>1-206-798-1152</td>
62
31
<td>dui@molestax.net</td>
32
<td>France</td>
33
</tr>
34
</table>
35
36
<br/>
37
40
<tr>
41
<td rowspan=4>nomes</td>
42
<td>Stephen</td>
43
</tr>
44
<tr><td>Michelle</td></tr>
45
<tr><td>Micah</td></tr>
46
<tr><td>Alexandra </td></tr>
47
</table>
48
49
<br/>
50
52
<tr><td colspan=2>nomes</td> </tr>
53
<tr><td>1</td>
<td>Michelle</td></tr>
54
<tr><td>2</td>
<td>Micah</td></tr>
55
<tr><td>3</td>
<td>Alexandra</td></tr>
56
57
</table>
58 </body>
59 <html>
63
Tecnologias Web
Atividade
Neste captulo, voc aprendeu os principais elementos para construo de pginas web. Para colocarmos em prtica tudo que foi apresentado,
voc dever utilizar a linguagem HTML para elaborar o seu currculo pessoal. Na confeco da pgina, voc precisar utilizar todos os elementos
estudados neste captulo, desde elementos para formatao de texto, at a
incluso de imagens, listas e tabelas. Bons estudos!
Reflexo
64
As tecnologias para desenvolvimento web oferecem aos profissionais uma infinidade de possibilidades para construo de pginas. Diversos recursos podem ser empregados na confeco dos sites, de forma
que cada vez mais o contedo se torna atrativo. Neste contexto, faa uma
reflexo a respeito da seguinte questo: Quais elementos podem ser utilizados na elaborao de um site para torn-lo atrativo?
O website W3schools uma das principais referncias na Internet

sobre desenvolvimento web. Neste local, voc poder completar seu
aprendizado sobre construo de pginas web utilizando a tecnologia
HTML e suas variantes XHTML e HTML5. Assim, aproveite a oportunidade para aprimorar seu conhecimento:
W3SCHOOLS. W3Schools.com The Worlds largest web development site. Disponvel em: <http://www.w3schools.com/>.Acesso em
setembro de 2014.
Referncias
DREAMWEAVER. Adobe DreamWeaver. Disponvel em:
<www.adobe.com/br/products/dreamweaver.html>. Acesso em setembro de 2014.
NOTEPAD++. Editor de Texto Notepad++. Disponvel em: <notepadplus-plus.org>. Acesso em setembro de 2014.
NVU. Editor HTML NVU. Disponvel em: <www.nvu.com>. Acesso
em setembro de 2014.
No prximo captulo
No prximo captulo, voc aprender o uso de formulrios em documentos HTML. Este recurso permite a interao do usurio e so fundamentais na construo de aplicaes para Internet. Alm disso, voc estudar a respeito de elementos de acessibilidade que podem ser includos na
pgina para facilitar a navegao.
65
Tecnologias Web
Minhas anotaes:
66
Formulrios Web e
Acessibilidade
Cap
t u
lo
Os usurios da Internet interagem a todo

momento com as pginas web. A interao
pode ser, por exemplo, durante a pesquisa de
um produto em um site de comrcio eletrnico, ou,
ainda, na compra de uma passagem area. As interaes entre usurios e pginas so possveis por meio da
criao de formulrios web. Neste captulo, voc aprender
a construir formulrios e incluir recursos de acessibilidade
para facilitar a navegao pelas pginas.
Neste captulo, os objetivos da sua aprendizagem so:

compreender o processo de envio de recebimento de informaes
por meio de formulrios;
apresentar as principais tags utilizadas na construo de formulrios
em HTML;
entender os principais problemas de acessibilidade na Internet.
utilizar as solues da linguagem HTML para transformao dos sites
acessveis.
Voc se lembra?
No captulo anterior, voc aprendeu os elementos fundamentos da linguagem de marcao HTML. Com isso, foi possvel criar uma srie
de pginas web utilizando os mais variados tipos de elementos. Neste
captulo, voc aprimorar seus conhecimentos com a construo de
formulrios web.
Tecnologias Web
4.1 Formulrios HTML
Nos primrdios da Internet, as pginas web possuam contedo

esttico, de forma que os usurios apenas visualizam as informaes e
no realizavam nenhum tipo de interao. O contedo apresentado nos
documentos HTML no sofria alterao, assim as pginas apresentavam
sempre as mesmas informaes. Com a evoluo das tecnologias para
desenvolvimento web, principalmente das linguagens de programao,
as pginas passaram a disponibilizar contedo dinmico. Dessa forma, o
usurio, alm de visualizar o contedo apresentando, tambm conseguia
interagir com as informaes e enviar dados para o servidor. Os dados
enviados durante a interao so processados e retornam para o usurio
com base no modelo de requisio e resposta. Voc pode encontrar mais
detalhes sobre o modelo requisio/resposta na seo sobre World Wide
Web e o Protocolo HTTP, no captulo 1.
Para que os dados possam ser enviados para o servidor durante a interao do usurio, necessria a utilizao de um elemento da linguagem
HTML denominado formulrio. Um formulrio HTML, tambm conhecido como formulrio web (webform), permite que o usurio especifique
dados em uma pgina para serem enviados e processados por um servidor.
Para isso, o usurio precisa preencher as informaes nos elementos do
formulrio conhecidos como campos.
O elemento de formulrio definido na pgina com a tag <form>.
Alm disso, necessrio definir qual a ao (action) realizada pelo formulrio quando o usurio submeter os dados. O processo de submisso
(submit) responsvel por enviar os dados para o servidor. Na definio
do formulrio preciso, ainda, especificar o mtodo de submisso, conhecido como GET ou POST (DEITEL & DEITEL, 2008).
O mtodo GET utilizado para submisso de informaes para uma
determinada pgina. As informaes enviadas so definidas na URL separadas pelo caractere especial de interrogao (?) e podem ser visualizadas
pelo usurio. Por exemplo,
www.minhapagina.com.br/index.html?nome=Joao&Idade=25
68
Neste exemplo, demonstrada a requisio da pgina index.html e o

envio das informaes nome contendo o valor Joao e idade com o valor
25. importante notar que, para o envio de diversas informaes, necessria a separao utilizando o smbolo e-comercial (&) (W3C, 2014).
Formulrios Web e Acessibilidade Captulo 4
A outra maneira de enviar dados do formulrio conhecida como

POST. Neste mtodo, as informaes so codificadas nos cabealhos
HTTP e no so visveis ao usurio. Uma das principais caractersticas
do mtodo POST a possibilidade de enviar informaes sem limite de
tamanho, enquanto no mtodo GET permitido no mximo 1024 caracteres. Alm disso, com o mtodo POST possvel enviar qualquer tipo de
dados, por exemplo dados binrios de uma imagem durante o upload de
uma foto no servidor (DEITEL & DEITEL, 2008).
A listagem cdigo 1 apresenta a estrutura bsica de um formulrio
em uma pgina web. Neste exemplo, o resultado da submisso da pgina
enviado para uma outra pgina denominada processamento.html, e o
mtodo utilizado foi POST.
Cdigo 1
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
<title>Formulrio Web: Exemplo 01</title>
06 </head>
07 <body>
08
<h1>Cadastro de Clientes</h1>
09
10
<form action=cadastro.html method=POST>
11
12

13
14
</form>
15
16 </body>
17 <html>
18
No exemplo, voc pode notar na linha 12 um comentrio indicando
o local em que devero ser includos os controles do formulrio. Com
isso, o usurio poder especificar as informaes que sero enviadas para
o servidor.
69
Tecnologias Web
4.2 Controles para Construo de Formulrio
Os elementos que compem um formulrio HTML so conhecidos

como controles, e permitem a interao do usurio para a submisso de
dados ao servidor. Cada controle permite o envio de um tipo especfico de
dados ao servidor, Alm disso, precisam ser identificados unicamente por
meio de uma propriedade denominada name (nome).
O controle mais simples para interao do usurio chamado de
campo de texto, definido com a propriedade type=text, o qual pode
ser utilizado para o envio de informaes textuais. Este controle possui
uma propriedade denominada size, que define a largura do campo de texto
em funo do nmero de caracteres. Outra propriedade til chamada
maxlength, que permite definir o nmero mximo de caracteres no campo.
A propriedade value pode ser utilizada para definir o valor o contedo inicial do campo de texto (W3SCHOOLS, 2014).
Para o envio (ou submisso) dos dados fornecidos pelo usurio no
formulrio web, necessria a incluso de um boto com um tipo especifico
denominado submit. Com isso, os dados sero enviados para a pgina definida na propriedade action do formulrio. A listagem cdigo 2 apresenta um
exemplo de formulrio web utilizando controles do tipo campo de texto. Na
linha 33, voc pode notar a definio do boto para submisso dos dados. O
resultado da visualizao no navegador ilustrado na figura 20.
Cdigo 2
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>Cadastro de Clientes</h1>
09
70
10
<form name=formCadastro
11 action=formulario02.html method=get>
12
13
<label>Nome:</label>
14
<input name=txtNome type=text
15 size=50 maxlength=60 />
16
<br/><br/>
17
18
<label>Endereo: </label>
19
<input name=txtEndereco type=text
21
<br/><br/>
22
23
<label>Cidade: </label>
24
<input name=txtCidade type=text
26
<br/><br/>
27
28
<label>Telefone: </label>
29
<input name=txtTelefone type=text
31
<br/><br/>
32
33
<input type=submit value=enviar />
34
35
</form>
36
37 </body>
38 <html>
71
Tecnologias Web
Para limpeza de todos os campos do formulrio, possvel definir

um boto especfico do tipo reset. Por exemplo:
<input name=btnLimpar type=reset value=limpar campos />
O elemento textarea pode ser utiConexo:
A especificao HTML5 possui
lizado para entrada de dados textuais
um tipo de campo de texto especfico
com mltiplas linhas. Este controle
para entrada de informaes numricas.
Este campo definido com a propriedade
permite a definio do nmero de
type=number, e facilita a entrada e validao
linhas e do nmero de colunas da
de nmeros pelo usurio. Mais detalhes podem
caixa de texto. A listagem cdigo
ser consultados em <www.w3.org/TR/htmlmarkup/input.number.html>.
Um exemplo de
3 ilustra a utilizao deste controle,
utilizao pode ser visto em
o qual foi definido com 10 linhas
<www.w3schools.com/html/tryit.
asp?filename=tryhtml5_input_
(rows) e 60 colunas (cols).
type_number>
Cdigo 3
72
01 <textarea rows=10 cols=60>

02
Lorem Ipsum is simply dummy text of the
03
printing and typesetting industry. Lorem Ipsum
04
has been the industrys standard dummy text
05
ever since the 1500s, when an unknown printer
06
took a galley of type and scrambled it to make
07
a type specimen book.
08 </textarea>
O controle para entrada de dados tambm pode ser utilizado para
especificao de senhas. Para isso, necessrio utilizar um tipo especial
de campo de texto denominado password. A listagem cdigo 4 apresenta
um exemplo de controle utilizado para entrada de senhas. O resultado da
visualizao apresentado na figura 21.
Cdigo 4
01
<!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>Login</h1>
09
10
<form name=formLogin action=login.html
11method=POST>
12
13
<label>Usurio:</label>
14
<input name=txtUsuario type=text
16
<br/><br/>
17
18
<label>Senha:</label>
19
<input name=txtSenha type=password
21
<br/><br/>
22
23
</form>
24
25 </body>
26 <html>
73
Tecnologias Web
Os campos do tipo checkbox podem ser utilizados para exibio de

um conjunto de elementos selecionveis pelo
usurio. Assim, o usurio pode indicar
quais elementos ele deseja de
maneira: nica, mltipla, ou, ainda
Os formulrios HTML permitem a criao
de
campos ocultos de um tipo denominado
,nenhuma seleo. A listagem cdihidden. Estes campos podem ser utilizados
go 5 apresenta a utilizao do campara transmisso de informaes de status para o
cliente
ou servidor. Um campo do tipo hidden no
po para seleo mltipla checkbox.
visvel pelo usurio. Assim, ele no pode interagir
O resultado da visualizao no nacom este campo.
vegador exibido na figura 22.
Cdigo 5
74
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h2>Quais frutas voc mais gosta?</h2>
09
10
<form name=formFruta
11 action=formulario04.html method=GET>
12
13
<input name=chkFrutas type=checkbox
14 value=Abacaxi> Abacaxi <br/>
15
16 value=Banana> Banana <br/>
17
18 value=Caju> Caju <br/>
19
20 value=Goiaba> Goiaba <br/>
21
22 value=Jabuticaba> Jabuticaba <br/>
23
24 value=Laranja> Laranja <br/>
25
26 value=Mamo> Mamo <br/>
27
28 value=Uva> Uva <br/>
29
30
<br/><br/>
31
32
</form>
33 </body>
34 <html>

75
Tecnologias Web
Para seleo mutuamente exclusiva de elementos, em que o usurio precisa necessariamente escolher um nico elemento a partir de um
conjunto, possvel utilizar um tipo de campo denominado radio. Na
listagem cdigo 6, exibida a utilizao deste controle. Alm disso, a
figura 23 ilustra o resultado no navegador.
Cdigo 6
76
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h2>Selecione o dia da semana</h2>
09
10
< form name=form action=formulario05.html
11method=GET>
12
<input name=rdbDia type=radio
13 value=1 > Segunda-Feira <br/>
14
15 value=2> Tera-Feira <br/>
16
17 value=3> Quarta-Feira <br/>
18
19 value=4> Quinta-Feira <br/>
20
21 value=5 checked=true> Sexta-Feira <br/>
22
23value=6> Sbado <br/>
24
25 value=7> Domingo <br/>
26
<br/><br/>
27
28
</form>
29 </body>
30 <html>
31
A apresentao de conjuntos de daConexo:

dos em formulrios tambm pode ser
No HTML5 possvel criar
uma lista pr-definida de elementos,
realizada por meio da tag select. Este
a qual pode ser associada a determielemento utilizado para criao
nados controles do formulrio. Esta lista
de uma lista suspensa, tambm co chamada de datalist. Uma das aplicaes
nhecida como drop-down list, em prticas deste recurso , por exemplo, oferecer
a caracterstica de auto-completar a um
que o usurio poder selecionar um
campo de texto. Um exemplo prtico deste
recurso est em:
elemento. Para cada item da lista,
http://www.w3schools.com/tags/
possvel associar um valor utilizantryit.asp?filename=tryhtml5_
do o atributo value da tag <option>. A
datalist
listagem cdigo 7 apresenta o uso da lista
de elementos, e o resultado da visualizao pode
ser notado na figura 24. O valor pr-selecionado da lista definido com a
propriedade selected (linha 16).
Cdigo 7
01<!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
77
Tecnologias Web
08
<h2>Lista de Pases</h2>
09
10
<form name=form action=form06.html
11 method=GET>
12
<select name=paises>
13
<option
14 value=01>Argentina</option>
15
<option value=02>Bolvia</option>
16
<option value=03
17 selected>Brasil</option>
18
<option value=04>Chile</option>
19
<option value=05>Colmbia</option>
20
<option value=06>Equador</option>
21
<option value=07>Guiana</option>
22
<option value=08>Guiana
23 Francesa</option>
24
<option value=09>Paraguai</option>
25
<option value=10>Peru</option>
26
<option value=11>Suriname</option>
27
<option value=12>Uruguai</option>
28
<option
29 value=13>Venezuela</option>
30
</select>
31
<br/><br/>
32
33
</form>
34 </body>
35<html>
36
78
A linguagem HTML5 incluiu novos tipos de controles para entradas

de dados em formulrios web. Estes tipos flexibilizam as formas de
interao entre o usurio e a pgina web. Alm disso, facilitam o processo de entrada dados como, por exemplo, no caso do tipo date, que
permite a seleo de uma data em um calendrio. Os tipos adicionados
com a especificao HTML5 so: color, date, datetime, datetime-local,
email, month, number, range, search, tel, time, url e week.
4.3 Acessibilidade na Web
A Internet oferece aos usurios uma infinidade de recursos que podem ser explorados por meio de um navegador. No entanto, nem todas as
pessoas podem acessar estes recursos da maneira que gostariam, uma vez
que muitas pginas no esto preparadas para o acesso de pessoas com
algum tipo de deficincia. A discusso acerca da construo de sites acessveis por todos denominada acessibilidade na web.
O consrcio W3C tem um projeto chamado Web Acessibility Initiative (WAI) que, desde 1997, rene esforos para promover a acessibilidade em pginas web, publicando as diretrizes de acessibilidade para
contedo da web (Web Content Acessibility Guidelines WCAG)(WCGA
2.0, 2014). O ponto central das discusses sobre acessibilidade na web
tornar a navegao mais fcil para uma gama de pessoas. Neste contexto,
a incluso est preocupada com pessoas com deficincia visual, com problemas de mobilidade, alm das com problemas cognitivos.
A linguagem de marcao HTML, desde suas primeiras verses, at
a especificao mais recente (HTML5), possui uma srie de elementos e
atributos para tornar as pginas mais acessveis.
Por exemplo, considere uma pessoa com
Conexo:
algum tipo de dificuldade visual que no
Os leitores de tela so
aplicativos essenciais para
pode visualizar adequadamente uma
pessoas com determinados
determinada imagem da pgina. Para
tipos de deficincia visual. Uma
alternativa o DOSVOX desenisso, a linguagem HTML oferece uma
volvido pelo Ncleo de Computaalternativa, associada ao elemento
o Eletrnica da Universidade
Federal do Rio de Janeiro. Mais
<img>, que a descrio textual da
detalhes em <http://intervox.
imagem utilizando o atributo alt. O
nce.ufrj.br/dosvox/>.
texto contido no atributo alt pode ser lido
por navegadores especficos, os quais so
79
Tecnologias Web
conhecidos como leitores de tela. A listagem cdigo 8 ilustra o uso do atributo alt para melhorar a acessibilidade de uma pgina web. O resultado no
navegador pode ser visto na figura 25.
Cdigo 8
80
01 <!DOCTYPE html>
02 <html>
03<head>
04
05
<title>Acessibilidade</title>
06</head>
07 <body>
08
<h1>Coliseu de Roma</h1>
09
<h3>Uma das sete maravilhas do mundo.</h3>
10
<img src=coliseu.png alt=O Coliseu, tambm
11 conhecido como Anfiteatro Flaviano ou Flvio (em
12 latim: Amphitheatrum Flavium), um anfiteatro
13 construdo no perodo da Roma Antiga. Deve seu nome
14 expresso latina Colosseum (ou Coliseus, no latim
15 tardio), devido esttua colossal do imperador romano
16 Nero, que ficava perto da edificao. Localizado no
17 centro de Roma, uma exceo de entre os anfiteatros
18 pelo seu volume e relevo arquitetnico. Originalmente
19 capaz de abrigar perto de 50 000 pessoas, e com 48
20 metros de altura, era usado para variados espetculos.
21 Foi construdo a leste do Frum Romano e demorou
22 entre oito a dez anos a ser construdo.
23 title=Coliseu de Roma />
24
<h3><i>Fonte: <a
25 href=http://pt.wikipedia.org/wiki/Coliseu_de_Roma>pt
26 .wikipedia.org/wiki/Coliseu_de_Roma</a></i></h3>
27 </body>
28 <html>
As tabelas tambm possuem um atributo interessante que pode ser

utilizado para resumir as informaes contidas na tabela. Este atributo
conhecido como summary e deve ser definido no elemento <table>.Com
isso, possvel incluir na pgina informaes adicionais a respeito da tabela, as quais so lidas por navegadores com recurso de leitura de tela. A
listagem cdigo 9 demonstra o uso do atributo summary em uma tabela. A
figura 26 demonstra o resultado da execuo.
Cdigo 9
01 <!DOCTYPE html>
02 <html>
03 <head>
04
81
Tecnologias Web
05
06 </head>
07 <body>
08
<table border=1 cellspacing=0
09 cellpadding=0 width=100%summary=Escala de
10 trabalho dos funcionrios do Setor de Informtica>
11
<tr>
12
<th>Dia da Semana</th><th>Pato
13 Donald</th><th>Mickey Mouse</th><th>Pernalonga</th>
14
</tr>
15
<tr>
16
17
<td>Segunda</td><td>X</td><td>X</td><td>X</td>
18
</tr>
19
<tr>
20
<td>Tera</td><td>X</td><td></td><td>X</td>
21
</tr>
22
<tr>
23
<td>Quarta</td><td>X</td><td>X</td><td></td>
24
</tr>
25
<tr>
26
27
<td>Quinta</td><td></td><td>X</td><td>X</td>
28
</tr>
29
<tr>
30
<td>Sexta</td><td>X</td><td>X</td><td>X</td>
31
</tr>
32
</table>
33 </body>
34 <html>
82
Outro recurso interessante disponvel na linguagem de marcao

HTML a especificao de atalhos do teclado para navegao nas pginas. O atributo accesskey pode ser utilizado para definir atalhos para
determinados elementos da pgina. O acesso aos atalhos ocorre por meio
do pressionamento da tecla alt seguida da tecla de atalho desejada. A listagem cdigo 10 demonstra o uso da tecla de atalho para ncoras na pgina.
A figura 27 apresenta o resultado da visualizao no navegador.
Cdigo 10
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06 </head>
07 <body>
08
<h1>Ferramentas de Busca</h1>
09
<ul>
10
<li>
11
<a accesskey =B
12 href=http://www.bing.com>Bing</a>
13
</li>
14
<li>
15
<a accesskey =G
16 href=http://www.google.com>Google</a>
17
</li>
83
Tecnologias Web
18
<li>
19
<a accesskey =L
20 href=http://www.lycos.com>Lycos</a>
21
</li>
22
<li>
23
<a accesskey=Y
24 href=http://www.yahoo.com>Yahoo!</a>
25
</li>
26
</ul>
27 </body>
28 <html>

Outros recursos de acessibilidade podem ser encontrados na pgina oficial
da W3C em: <www.w3.org/standards/webdesign/accessibility>.
Atividade
O contedo deste captulo apresentou um recurso importante da

linguagem de marcao HTML para interao do usurio, os formulrios.
Com isso, possvel adicionar controles as pginas web, permitindo a
insero de dados, que sero enviados para o servidor. Neste contexto,
construa um formulrio web para Cadastrar Funcionrios de uma Empresa. Para isso, voc dever utilizar, pelo menos uma vez, cada controle
discutido no captulo.
84
Reflexo
Os formulrios web representam um marco fundamental na evoluo histrica da Internet, permitindo a interao do usurio e o envio de
dados para serem processados no servidor. Neste sentido, os formulrios
web tm contribudo diretamente para o dinamismo das informaes que
so apresentadas na web, tornando-se com isso, os sites mais atrativos.
Considerando, os apontamentos indicados no texto, faa uma anlise
reflexiva sobre as seguintes questes: Como seria a Internet sem formulrios? Como uma pgina pode se tornar atrativa sem contedo dinmico?
No Brasil, o Grupo de Trabalho de Acessibilidade, da W3C Brasil,

foi criado para discutir e planejar aes para tornar as pginas web mais
acessveis. O grupo realiza uma srie de aes sobre a necessidade de
criar sites acessveis e, ainda, produziu uma Cartilha de Acessibilidade
na web. Para qualquer profissional envolvido com tecnologia, a a leitura
deste documento pode aprimorar seus conhecimentos:
W3C Brasil. Cartilha de Acessibilidade na Web. Disponvel em:
<http://acessibilidade.w3c.br/cartilha/fasciculo1/>. Acesso em setembro
de 2014.
Referncias
DEITEL, P.J.; DEITEL, H.M.Ajax, Rich Internet Aplications e Desenvolvimento Web para Programadores. So Paulo: Pearson Prentice Hall, 2008.
W3C. HTML5 Reference. Disponvel em: <www.w3.org/TR/html5/>.
Acesso em outubro de 2014.
W3SCHOOLS. W3Schools.com. Disponvel em: <www.w3schools.
com>. Acesso em outubro de 2014.
WCAG.Web Content Accessibility Guidelines (WCAG) 2.0.Disponvel em: <http://www.w3.org/TR/2008/REC-WCAG20-20081211/>.
Acesso em outubro de 2014.
85
Tecnologias Web
No prximo captulo
No prximo captulo, voc aprender as folhas de estilo em cascata.

Com esta tecnologia, possvel definir formataes para os contedos da
pgina. Voc estudar os tipos de codificao e seus respectivos atributos.
86
Folhas de Estilo em
Cascata (CSS)
Cap
t u
lo
As folhas de estilo em cascata, conhecidas como CSS, so fundamentais para formatao de pginas na Internet. Com este recurso, possvel criar pginas com as mais variadas
aparncias. Neste captulo, voc aprender o uso desta
tecnologia na elaborao de contedo para Internet.
Ao final deste captulo voc ser capaz de:

entender as principais caractersticas das folhas de estilo em
cascata;
compreender a sintaxe utilizada para formatao das pginas
com as folhas de estilo em cascata;
construir pginas web utilizando os estilos em cascata;
modificar o layout das pginas web utilizando CSS.
Voc se lembra?
Nos captulos anteriores, voc aprendeu a linguagem de marcao

HTML e seus respectivos elementos para confeco de pginas. As tags
so utilizadas essencialmente para a insero de contedo nas pginas.
No entanto, no fornecem muitas possibilidades para formatao das
informaes. Neste captulo, voc aprender o uso das folhas de estilo
em cascata, e compreender como associar estilos aos elementos da
linguagem HTML com o foco na formatao da aparncia do contedo
da pgina.
Tecnologias Web
5.1 Introduo
As folhas de estilos em cascatas foram criadas pelo consrcio da

W3C com o objetivo de estabelecer uma especificao padronizada para
formatao de contedo na Internet. Durante muitos e muitos anos, as
pginas da Internet no possuam uniformidade na apresentao visual do
contedo. Com isso, a navegao tornava-se pouco atrativa, e os desenvolvedores ficavam frustrados com as dificuldades no processo de construo
das pginas.
Os estilos em cascata, do ingls Cascading Style Sheets (CSS),
definem uma srie de padres (standards), adotados pelos fabricantes de navegadores,
ferramentas de autoria de sites
Conexo:
O
site
CSS
Zen Garden tem
e desenvolvedores web, para
como objetivo demonstrar as posfundamentar e normatizar a
sibilidades de formataes de pginas
baseadas em CSS. Para isso, o site mantm
confeco de pginas para
algumas centenas de pginas confeccionadas
Internet. Os benefcios com
com HTML e CSS. O contedo textual do site
a estandardizao so vsempre o mesmo. Assim, as alteraes ocorrem
apenas
na apresentao visual realizada com CSS.
rios, tais como a reduo
Voc pode conferir mais detalhes em:
do tamanho das pginas
(agilizando o processo de
http://www.csszengarden.com/
carregamento), a compati http://www.mezzoblue.com/
bilidade entre navegadores, o
zengarden/alldesigns/
aumento da acessibilidade dos
sites, a facilidade na manuteno
de contedo, entre outros fatores.
A listagem cdigo 1 ilustra o processo
de aplicao de estilo em cascata do tipo inline. No exemplo, possvel
notar a especificao dos estilos utilizando o atributo style. O resultado da
visualizao no navegador apresentado na figura 28.
Cdigo 1
88
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
<title>Estilos em Cascata</title>
06 </head>
Folhas de Estilo em Cascata (CSS) Captulo 5
07 <body>
08
<h1 style=color:red>Lorem ipsum</h1>
09
10
<p style=color:blue;font-style:italic;>
12 elit. Cras vehicula molestie sem, eu rutrum tortor
13 bibendum at. Mauris pharetra lectus eget pulvinar
14 malesuada. Donec gravida nisi justo llicitudin aliquet
15 urna tincidunt non. Ut sagittis
tellus ac aliquam
16 elementum.
17
</p>
18
19
<p style=color:white;background-color:blue>
21 Phasellus nec velit nec lectus placerat pellentesque
22 non non lectus. Nam accumsan velit ac turpis
23 scelerisque placerat.
24
</p>
25
26
<p style=color:gray;text-align:justify>
27 Aenean malesuada consectetur eros ac maximus. Mauris
28 sagittis
leo vel diam elementum tempor. In suscipit
29 nulla non vestibulum luctus.
30
</p>
31 </body>
32 <html>

89
Tecnologias Web
A definio dos estilos em cascata do tipo interno (ou incorporado)

ocorre por meio da utilizao do elemento <style>, o qual deve ser especificado no bloco de cabealho (<head>) da pgina. A aplicao dos estilos
do tipo interno funciona exclusivamente dentro do documento HTML, no
qual os estilos foram definidos. A listagem cdigo 2 ilustra o processo de
especificao de estilos do tipo incorporado em uma pgina. Neste exemplo, um estilo especfico foi criado para modificar a cor dos pargrafos da
pgina para azul. Alm disso, a cor do ttulo em destaque (<h1>) foi alterado para vermelho. Finalmente, a cor do fundo da pgina (background)
foi alterada para cinza. A figura 29 apresenta o resultado da visualizao
da pgina no navegador.
Cdigo 2
90
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06
<style type=text/css>
07
body{
08
background-color: #DEDEDE;
09
}
10
11
h1{
12
color: red;
13
}
14
15
p{
16
color: blue;
17
text-align: justify;
18
}
19
</style>
20</head>21
21<body>
22
<h1>Lorem ipsum</h1>
23
24
<p>
25
26 adipiscing elit. Cras vehicula molestie sem, eu rutrum
27 tortor bibendum at. Mauris pharetra lectus eget
pulvinar malesuada. Donec gravida nisi justo,
sollicitudin aliquet urna tincidunt non. Ut sagittis
tellus ac aliquam elementum.

</p>

<p>
Phasellus nec velit nec lectus placerat
28 pellentesque non non
lectus. Nam accumsan velit ac
turpis scelerisque placerat. Aenean malesuada
consectetur eros ac maximus. Mauris sagittis leo vel
diam elementum tempor. In suscipit nulla non
vestibulum luctus.

</p>
</body>
<html>
A aplicao de estilos em cascata no formato externo a mais indicada para grande parte dos projetos de sites para Internet. A grande
vantagem deste tipo de codificao a centralizao de todos os estilos
que sero aplicados nos documentos em um nico arquivo. Este arquivo
de estilos, com extenso .css, pode ser vinculado a qualquer documento
HTML do site. Assim, as formataes definidas com CSS podem ser reaproveitadas em outras pginas. Outro fato importante a vantagem no
91
Tecnologias Web
Conexo:
processo de manuteno da pgina, uma
O site CSSelite disponibiliza
vez que qualquer alterao realizada no
uma coletnea de websites construdos
utilizando as tecnologias HTML
arquivo de estilos instantaneamente
e CSS. O site pode ser utilizado como
propagada para todos os documentos
inspirao para construo de projetos. Voc
pode visualizar a diversidade de sites em:
vinculados a este arquivo.
A ligao entre o documento
http://csselite.com/
HTML e o arquivo de estilo ocorre por
meio da utilizao da tag <link>, a qual
deve ser especificada no cabealho da
pgina e indicar qual o arquivo de estilo que
ser vinculado. Por exemplo:
<head>

<title> Estilos em Cascata </title>

<link rel=stylesheet type=text/css href=estilo.css />
</head>
No exemplo, o atributo href define o nome do arquivo de estilo que
dever ser vinculado pgina. As listagens cdigo 3 e Cdigo 4 apresentam um exemplo de aplicao de estilo em cascata no formato externo. No
cdigo 3, ilustrado o contedo do documento HTML, enquanto, o cdigo 4 ocorre a definio dos estilos em cascata. O resultado da visualizao
no navegador apresentada na figura 30.
Cdigo 3
92
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06
<link rel=stylesheet type=text/css
07 href=estilo03.css />
08 </head>
09 <body>
10
11
12
<p>
13
16 pulvinar malesuada. Donec gravida nisi justo,
17 sollicitudin aliquet urna tincidunt non. Ut sagittis
18 tellus ac aliquam elementum.
19
</p>
20
21
<p>
22
Phasellus nec velit nec lectus lacerat
23 ellentesque non non lectus. Nam accumsan velit ac
24 turpis scelerisque placerat. Aenean malesuada
25 consectetur eros ac maximus. Mauris sagittis
leo
26 vel diam elementum tempor. In suscipit nulla non
27vestibulum luctus.
28
</p>
</body>
29 <html>
Cdigo 4
01 body{
02
background-color: blue;
03 }
04
05 h1{
06
color: blue;
07
background-color: white;
08 }
09
10 p{
11
color: white;
12 }
93
Tecnologias Web
5.2 Tipos de Seletores
As formataes dos estilos em cascata so definidas por meio de

elementos conhecidos como seletores. Existem algumas maneiras de especificar seletores, as quais esto associadas aplicabilidade das formataes ao longo das pginas
Seletor Universal: este tipo de seletor utilizado para definir

formataes que sero aplicadas a qualquer tipo de elemento
da pgina. Na codificao deste tipo de seletor, empregado o
smbolo de asterisco, indicando que a formatao ser associada
a todos os elementos da pgina. A listagem cdigo 5 ilustra o uso
do seletor universal. Por questes prticas, o estilo foi definido
no formato interno. No entanto, a especificao tambm pode ser
realizada no formato externo. No exemplo, o seletor universal
utilizado para definir todos os textos da pgina na cor azul. A
figura 31 apresenta o resultado da visualizao no navegador.
94
Cdigo 5
01 <!DOCTYPE html>
02<html>
03 <head>
04
05
06
<style type=text/css/>
07
*{
08
color: blue;
09
}
10
</style>
11 </head>
12 <body>
13
14
15
<p>
16
17 adipiscing elit. Crasvehicula molestie sem, eu rutrum
18 tortor bibendum at. Mauris pharetra lectus
19 pulvinar malesuada. Donec gravida nisi justo,
20 ollicitudin aliquet urna tincidunt non. Ut
21 tellus ac aliquam elementum.
22
</p>
23
24
<p>
25
26 llentesque non non lectus. Nam accumsan velit ac
27 turpis scelerisque placerat. Aenean malesuada
28 consectetur eros ac maximus. Mauris sagittis leo vel
29 diam elementum tempor. In suscipit nulla non
30 vestibulum luctus.
</body>
31
</p>
32 <html>
95
Tecnologias Web
p{

}
Seletor de ipo: este seletor empregado na especificao de

formataes para determinados elementos da pgina. Dessa
forma, possvel indicar regras que sero aplicadas exclusivamente a um elemento da pgina. A principal caracterstica deste
seletor que o nome dele o mesmo do elemento HTML. Por
exemplo, o seguinte trecho de cdigo apresenta um seletor de
tipo para aplicar a cor azul a todos os pargrafos do documento:
color: blue;
Seletor de classe: neste tipo de especificao, possvel indicar

quais elementos da pgina recebero as formataes definidas
no seletor. Para isso, necessrio atribuir um nome ao seletor e
indicar este nome no atributo class de cada elemento que receber as formataes. A listagem cdigo 6 ilustra a codificao
de seletor do tipo classe. O resultado da visualizao no navegador apresentado na figura 32.
96
Cdigo 6
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06
07
h1.titulo{
08
background-color: darkblue;
09
color: lightblue;
10
}
11
12
p.azulescuro{
13
color: darkblue;
14
}
15
16
p.azul{
17
color: blue;
18
}
19
20
p.azulclaro{
21
color: lightblue;
22
}
23
</style>
24 </head>
25 <body>
26
<h1 class=titulo>Lorem ipsum</h1>
27
28
<p class=azulescuro>
29
tortor bibendum at. Mauris pharetra lectus eget

</p>

<p class=azul>
97
Tecnologias Web

pellentesque non non lectus. Nam accumsan velit ac
turpis scelerisque placerat. Aenean malesuada
consectetur eros ac maximus.

</p>

<p class=azulclaro>
adipiscing elit. Cras vehicula molestie sem, eu rutrum
tortor bibendum at. Mauris pharetra lectus eget
ulvinar malesuada.

</p>
</body>
<html>
98
Seletor de ID: este tipo de seletor empregado na especificao

de formataes que sero aplicadas unicamente na pgina. As
formataes so exibidas nos elementos que possuem o atributo ID configurado com o mesmo nome do seletor. Segundo as
recomendaes da linguagem de marcao HTML (MAUJOR,
2014), o atributo ID utilizado para identificar unicamente um
elemento na pgina. Assim, um seletor de ID ser aplicado exclusivamente a um elemento do documento. A definio deste
seletor realizada com o smbolo de cerquilha (hashtag), por
exemplo:
#cor{

color: blue;
}
Seletor pseudoclasse: utilizado para definir formataes especiais nos elementos da pgina. Uma listagem detalhada destes
seletor pode ser visualizada em (W3SCHOOLS, 2014). A listagem cdigo 7 demonstra o uso dos seletores pseudo-classes
para formatao das ncoras da pgina. Com isso, possvel
definir formataes diferentes para cada estado da ncora: no
visitada; visitada; quando o mouse passa por cima da ncora;
e quando a ncora selecionada. No exemplo, a propriedade
text-decoration:none remove o sublinhado das ncoras. O resultado ilustrado na figura 33.
Cdigo 7
01 <!DOCTYPE html>
02 <html>
03<head>
04
05
06
07
a{
08
text-decoration: none;
09
}
10
a:link{
11
color: blue;
12
}
13
a:visited{
14
a:visited{
15
}
16
a:hover{
17
color: red;
18
}
19
a:active{
20
color: red;
21
}
22
</style>
99
Tecnologias Web
23 </head>
24 <body>
25
26
27
<a href=#>ncora 1</a><br/>
28
29
30
31
32 </body>
33 <html>
5.3 Formatao de Texto e Plano de Fundo
As folhas de estilo em cascata oferecem uma variedade de propriedades para formatao da aparncia dos elementos da pgina. A tabela 5.1
apresenta as principais propriedades para formatao de texto.
100
Propriedade
Descrio
color
Define a cor do texto de um elemento.
text-align
Especifica o alinhamento do texto a partir dos valores: left, right,

center ou justify.
text-decoration
Aplica efeitos decorativos ao texto, como, por exemplo, overline

linha acima do texto; line-through linha no meio do texto (tachado); e underline linha abaixo do texto.
text-transform
Permite alterar a apresentao do texto com os seguintes valores:

uppercase (letras maisculas), lowercase (letras minsculas) ou
capitalize (primeira letra de cada palavra em maisculo).
Tabela 5.1 Propriedades para Formatao de Texto em CSS
Na tabela 5.2, so apresentadas as propriedades para formatao da

fonte do texto. Com isso, possvel, por exemplo, escolher qual fonte
ser empregada no texto, bem como o tamanho da fonte.
Propriedade
Descrio
font-family
Determina o tipo de fonte que ser empregada no texto. Por exemplo,

font-family: Arial.
font-style
font-size
Permite definir estilos no contedo textual da, por exemplo,

font-style: italic.
Especifica o tamanho do texto nos elementos da pgina. Por
exemplo,
font-size: 24px;
font-weight
Usado para definir o peso da fonte, o qual, em termos prticos,

indica o nvel de negrito da fonte. Por exemplo:
font-weight: bold.
Tabela 5.2 Propriedades para formatao de fonte em CSS
101
Tecnologias Web
A tabela 5.3 apresenta as propriedades das folhas de estilo em

cascata que podem ser empregadas na configurao do plano de fundo
(background). Com isso, possvel definir cores e imagens para o fundo
da pgina.
Propriedade
Descrio
background-color
Especifica a cor que ser utilizada no fundo de um elemento.
background-image
Permite o carregamento de uma imagem no fundo de um elemento da pgina. Por exemplo,

background-image: url(fundo.png).
background-repeat
Determina como a imagem ser repetida na pgina. Por

exemplo:background-repeat: repeat-x.
background-position
Usado para definir a posio da imagem no fundo de um elemento. Por exemplo, incluir a imagem no canto inferior direito
da pgina:
background-position: right bottom.
Tabela 5.3 Propriedades do plano de fundo em CSS
A listagem cdigo 8 demonstra o uso das principais propriedades

para formatao de texto, fonte e plano de fundo das folhas de estilo em
cascata. O resultado da visualizao no navegador ilustrado na figura 34.
Cdigo 8
102
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06
07
body{
08
background-image: url(globo.png);
09
background-repeat: repeat-x;
10
}
11
12
h1{
13
font-family: Arial;
14
font-weight: bold;
15
font-size: 36px;
16
text-aligh: center;
17
background-color: #000080;
18
color: #FFFFFF;
19
text-transform: uppercase;
20
}
21
22
ul{ font-size: 20px;
}
23
p{
font-size: 18px;
}
24
25
p.paragrafo1{
26
font-family: Comic Sans MS;
27
28
background-color: #DEDEDE;
29
}
30
p.paragrafo2{
31
font-family: Verdana;
32
text-align: center;
33
}
34
</style>
35 </head>
36 <body>
37
<br/> <br/> <h1>Lorem ipsum</h1>
38
<p class=paragrafo1>Lorem ipsum dolor sit
39 amet, consectetur adipiscing elit. Pellentesque
40 ante nisl. Duis rhoncus enim ut urna sodales blandit.
41 Praesent erat sapien, faucibus sed cursus in, feugiat
42 sed mauris.
43
</p>
44
<ul>
45
<li style=font-weight:bold;>Quisque consequat
46 urna erat, eget euismod massa facilisis in. </li>
47
<li style=font-style: italic;>Suspendisse
48 ultricies, risus sodales semper cursus, erat lectus
49 lacinia.
</li>
50
<li style=text-decoration: underline;>Sed
51 dapibus blandit nisi, ut tempus velit condimentum uis
52
</li>
103
Tecnologias Web
53
</ul>
54
<p class=paragrafo2>Pellentesque habitant
55 morbi tristique senectus et netus et malesuada fames
56 ac turpis egestas. Sed tincidunt risus odio, ut
57 scelerisque nunc dictum eget. Nam faucibus sapien et
58 convallis tempus.
59
</p>
60 </body>
61 <html>
5.4 Formatao de Margens, Espaamentos e Bordas
104
Nas folhas de estilo em cascata, os elementos so organizados na

pgina por meio de uma estrutura que conhecida como modelo de caixa,
do ingls box model. Em termos prticos, este modelo define uma caixa
ao redor dos elementos da pgina, alm disso permite a especificar de
trs tipos de propriedades: margens (margin); espaamento (padding) e
bordas (border). Como o modelo representado por uma caixa, possvel configurar os quatro lados do elemento: superior (top); direita (right);
inferior (bottom); e esquerda (left). A listagem cdigo 9 apresenta o uso
das propriedades para formatao de borda, margem e espaamento em
documentos HTML. A figura 35 apresenta o resultado da visualizao no
navegador.
Cdigo 9
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
06
07
08
*{ font-family: Verdana; }
09
10
h1{
11
border-color: #0000FF;
12
border-width: 20px;
13
border-style: groove;
14
background-color: lightblue;
15
16
padding-top: 10px;
17
padding-left: 30px;
18
padding-bottom: 10px;
19
}
20
p{
21
22
background-color: lightblue;
23
}
24
25
p.paragrafo1{
26
margin-left: 50px;
27
margin-right: 50px;
28
padding-top: 40px;
29
padding-bottom: 40px;
30
padding-left: 20px;
31
padding-right: 20px;
32
border: double #0000FF 4px;
33
}
34
p.paragrafo2{
35
margin: 10px;
36
padding: 20px;
105
Tecnologias Web
37
border: dashed #0000FF 4px;
38
}
39
</style>
40 </head>
41 <body>
42
43
<p class=paragrafo1>
45 elit. Pellentesque in ante nisl. Duis rhoncus enim ut
46 urna sodales blandit. Praesent erat sapien, faucibus
47 sed cursus in, feugiat sed mauris.
48
</p>
49
<p class=paragrafo2>
51 elit. Pellentesque in ante nisl. Duis rhoncus enim ut
52 urna sodales blandit. Praesent erat sapien, faucibus
53 sed cursus in, feugiat sed mauris.
54
</p>
55 </body>
56 <html>
106
5.5 Layouts em CSS
As folhas de estilo em cascata oferecem aos desenvolvedores uma

diversidade de recursos para definio e organizao do layout das pginas. A compreenso destas solues so essenciais para a confeco de
pginas com layout responsivo, as quais podem ser adaptadas automaticamente para qualquer dispositivo, tais como computadores desktop, tablets
e smartphones.
O que Web Design Responsivo? Com a popularizao da Internet

e a diversidade de dispositivos que acessam a rede, o paradigma para
desenvolvimento de pginas web tem sofrido grandes modificaes.
Neste sentido, os desenvolvedores tm buscado construir pginas responsivas, as quais se adaptam aos mais variados tipos de aparelhos.
Assim, surgiu o conceito de Web Responsivo, que tem como principal
motivao a confeco de websites que se adaptam automaticamente
s caractersticas do dispositivo que est acessando a pgina..
A linguagem de marcao HTML fornece dois elementos que

podem ser utilizados na especificao do layout nas pginas web. As
propriedades destes elementos so configuradas por meio das folhas de
estilo em cascata. O elemento <div> empregado na definio de um
bloco lgico no visual para diviso dos elementos da pgina. O elemento
<span>, tambm no-visual, usado para informar ao navegador trechos
de pargrafos que necessitam de formatao.
Na listagem cdigo 10, possvel conferir a especificao do
layout de uma pgina utilizando as folhas de estilo em cascata. No exemplo, foram definidas quatro regies com os divisores (<div>), nomeadas
de: cabealho, menu, contedo e rodap. O resultado da visualizao da
pgina no navegador pode ser visto na figura 36.
Cdigo 10
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05
107
Tecnologias Web
108
06
07
*{ margin: 0px;font-family: Verdana; }
08
#tudo{padding: 10px;text-align: center;}
09
#cabecalho{
10
background-color:#0047B2;
11
border: solid 2px #1b4376;
12
padding: 10px;
13
color: #E6F0FF;
14
}
15
#principal{
16
background-color: #b6b6d7;
17
border-left: solid 2px #1b4376;
18
}
19
#menu{
20
width:180px;
21
padding: 10px 0px 0px 10px;
22
float: left;
23
}
24
#conteudo{
25
background-color: #FFFFFF;
26
padding: 20px 20px;
27
margin-left: 200px;
28
border-right: solid 2px #1b4376;
29
}
30
#rodape{
31
text-align: center;
32
background-color:#0047B2;
33
color: #E6F0FF;
34
padding: 20px 0px;
35
border: solid 2px #1b4376;
36
}
37
p{text-align:justify;padding-bottom: 15px;}
38
ul{
39
list-style-type:none;
40
padding: 0px;
41
}
42
li{padding: 10px 0px;}
43
a:link{padding: 0px;text-decoration:none;}
44
</style>
45 </head>
46 <body>
47
<div id=tudo>
48 <div id=cabecalho><h1>Lorem ipsum</h1></div>
49
<div id=principal>
50
<div id=menu>
51
<ul>
52
<li><a href=#>Lorem ipsum </a></li>
53
54
55
56
57
</li>
58
</div>
59
<div id=conteudo>
60
61
<p>Lorem ....nisl et gravida. </p>
62
<p> Ut auctor risus ....scelerisque.</p>
63
<p>Nunc mi libero, ....tincidunt.
</p>

</div>

</div>
<div id=rodape><span style= font-style:
italic>Lorem ipsum dolor.... in.</span></div>
</div>
</body>
64 <html>
109
Tecnologias Web
110
No exemplo, voc pode notar que todos os elementos estruturais da

pgina foram definidos utilizando divisores.
Atividade
A linguagem de marcao HTML e as folhas de estilo em cascata representam as principais tecnologias para construo de pginas na
Internet. Utilizando essas tecnologias voc dever construir um site para
exibir informaes sobre um Pet-Shop. O site deve conter informaes
sobre os produtos comercializados pela empresa, bem como os servios
que so oferecidos aos clientes (banho, tosa etc.)
Nesta atividade, voc precisar incluir os principais elementos estudados da linguagem HTML, alm de um formulrio web para que os
clientes possam entrar em contato com a empresa. Durante a codificao,
voc dever empregar os conceitos de acessibilidade apresentados no captulo anterior. Por fim, toda a formatao dos elementos da pgina deve
ser realizada utilizando-se as folhas de estilo em cascata.
Reflexo
Atualmente, a diversidade de dispositivos que acessam a Internet

imensa, o que torna a tarefa de desenvolvimento de pginas um verdadeiro desafio. A principal dificuldade construir pginas que possam ser
visualizadas, sem grandes modificaes, nos mais variados tipos de dispositivos. Neste contexto, reflita sobre a seguinte questo: Quais recursos
podem ser utilizados para que as pginas web possam ser visualizadas em
qualquer dispositivo?
As folhas de estilo em cascata (CSS) representam a principal tecnologia para formatao de contedo na Internet. Para complementar o
contedo apresentado neste captulo, recomendada a leitura do CSS3, do
autor Maurcio Samy Silva. A referncia da obra a seguinte:
SILVA, M.S. CSS3 - Desenvolva aplicaes web profissionais
com o uso dos poderosos recursos de estilizao das CSS3. So Paulo:
Novatec, 2011.
Referncias
MAUJOR. Tutoriais CSS, Web Standards, Acessibilidade, HTML,
XHTML, Padres Web. Disponvel em :< www.maujor.com/>. Acesso em outubro de 2014.
111
Tecnologias Web
SILVA, M.S. Construindo Sites com CSS e (X)HTML. So Paulo:

Novatec, 2007.
W3SCHOOLS. CSS Reference. Disponvel em: <www.w3schools.
com/cssref/>. Acesso em outubro de 2014.
Gabarito
Captulo 1

Quais os principais personagens responsveis pela criao da internet nas d-
cadas de 60 e 70?
Joseph Licklider e Lawrence G. Roberts
Qual o primeiro navegador de internet?
NCSA Mosaic
Quando a linguagem de marcao de hipertexto (HTML) foi criada?
No incio da dcada de 90, um cientista da Organizao Europeia para a Pesquisa Nuclear, conhecida como CERN, desenvolveu uma linguagem de marcao de hipertexto que
se tornou padro para a produo de contedo para internet. A linguagem HTML, criada
por Tim Bearners-Lee, modificou drasticamente os modelos de navegao e disponibilizao de contedo na internet.
Qual a utilidade do protocolo HTTP no contexto da internet?
A rede formada por um conjunto de servidores e clientes que trocam dados utilizando um protocolo conhecido como HTTP. O Protocolo de Transferncia de Hipertexto
(HyperText Transfer Protocol) o modelo de comunicao utilizado na internet para
transferncia de dados na rede.

Apresente uma listagem dos principais navegadores web (browsers) dispon-
veis atualmente.
Google Chrome
Firefox
Internet Explorer
Opera
Safari
112
Sobre correio eletrnico explique as funcionalidades dos seguintes protocolos:
SMTP, POP3 e IMAP.

Para o processo de troca de mensagens de e-mail utilizado um protocolo de aplicao
denominado SMTP (Simple Mail Transfer Protocol), assim, com este protocolo pos-
svel realizar a transferncia de uma mensagem da mquina cliente at o servidor de email. O processo de recebimento de mensagens de correio eletrnico pode ser realizado
pelos protocolos POP3 ou IMAP. O Protocolo de Correspondncia POP3 utiliza uma conexo TCP na porta 110 para realizar a comunicao entre um aplicao cliente de e-mail
e o servidor de mensagens. Outro protocolo para recebimento de mensagens o IMAP
(Internet Message Access Protocol), em que as mensagens ficam sempre armazenadas no
servidor e, para o acesso s mensagens os usurios servios de webmail tais como Gmail,
Outlook, Yahoo Mail, entre outros.
Captulo 2
Resposta para k=7

Texto Original = JOAO DA SILVA
Texto Cifrado = QVHV KH ZPSCH
Captulo 3
<!DOCTYPE html>
<html>

<head>
<title>Currculo</title>

</head>

<body>

<table cellspacing=0 cellpadding=0 width=80%>
<tr>

<td width=20%>

<img src=foto.png alt=Foto pessoal />

</td>

<td>

<h1>Joao da Silva</h1>

<h3>(99) 91234-5678</h3>

</td>
</tr>
</table>
<hr/>
<h2>Informaes Pessoais</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

113
Tecnologias Web
<h2>Formao Acadmica</h2>
<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

<li>Integer suscipit lacus quis velit rhoncus aliquet nec vel ante.</li>

<li>Phasellus sed turpis vel erat commodo egestas.</li>

<li>Donec gravida ipsum ut tincidunt commodo.</li>

<li>Nunc id enim condimentum, scelerisque urna sed, fermentum
magna.</li>

<li>Suspendisse tincidunt mi quis orci porta, nec efficitur ex sollicitudin.</li>

<li>Aliquam commodo sapien viverra elit porta, id gravida ex dignissim.</li>
</ul>

</body>
<html>
Captulo 4
<!DOCTYPE html>
<html>
<head>


<title>Cadastro</title>
</head>
<body>

<h1>Cadastro</h1>

<form name=form action=cadastro.html method=POST>

<h3>Nome</h3>

<input name=txtNome type=text size=40 maxlength=40 />
114
<h3>Sexo</h3>
<input name=rdbSexo type=radio value=1 > Masculino <br/>
<input name=rdbSexo type=radio value=2> Feminino <br/>

<h3>Endereo</h3>

<input name=txtEndereco type=text size=60 maxlength=60 />

<h3>Cidade</h3>

<select name=cidade>

<option value=01>Araraquara</option>

<option value=02>Campinas</option>

<option value=03>Limeira</option>

<option value=04>Ribeiro Preto</option>

<option value=05>So Paulo</option>
</select>

<h3>Telefone</h3>

<input name=txtTelefone type=text size=20 maxlength=20 />

<h3>Conhecimento Informtica</h3>
<input name=chkConhecimento type=checkbox value=1> Microsoft
Windows <br/>
<input name=chkConhecimento type=checkbox value=2> Linux <br/>
<input name=chkConhecimento type=checkbox value=3> Editor de Texto <br/>
<input name=chkConhecimento type=checkbox value=4> Planilha Eletrnica <br/>

</form>
</html>
</body>
Captulo 5
<!DOCTYPE html>
<html>
<head>


<title>PetShop</title>

<link href=estilo.css rel=stylesheet type=text/css />
</head>
<body>
<div>
<h1>
<img class=logo src=cao.png alt= />
PetShop do Joo
</h1>
</div>

<div id=informacoes>
<h2>Produtos</h2>
<ul>

<li>Rao para Ces</li>

<li>Rao para Gatos</li>

<li>Rao para Peixes</li>

<li>Rao para Pssaros</li>

<li>Gaiola para Hamster</li>

<li>Petisco para Ces</li>
115
Tecnologias Web
</ul>
<h2>Servios</h2>
<ul>

<li>Banho (R$ 30,00)</li>

<li>Tosa (R$ 45,00) </li>
</ul>

<br/>
<br/>
<h2>Contato</h2>
<form name=form action=contato.html method=POST>

<h5>Nome</h5>

<input name=txtNome type=text size=40 maxlength=40 />

<h5>Telefone</h5>

<input name=txtTelefone type=text size=20 maxlength=20 />

<h5>Mensagem</h5>

<textarea rows=5 cols=60>

</textarea>

<br/>
<input type=submit value=enviar/>
</form>

</div>
<h4>
PetShop do Joo - Rua das Laranjeiras, 325 - Miracema do Norte/TO - (63) 32858974
</h4>
</body>
</html>
body
{
font-family: Comic Sans MS;
margin: 0px;
padding: 0px;
border: 6px solid #104E8B;
}
116
h1
{
margin: 0px;
background-color: #1874CD;
color: #FFFFFF;
padding: 10px;
h2
{
padding-left: 50px;
color: #4876FF;
h4
{
margin: 0px;
background-color: #1874CD;
font-weight: normal;
color: #FFFFFF;
text-align:center;
h5
{
margin:0px;
font-style:italic;
img
{
vertical-align: middle;
}
input.home
{
padding-left: 200px;
vertical-align: middle;
}
input.botao
{
width: 120px;
}
#informacoes
{
margin-left: 50px;
margin-bottom: 50px;
}
117
Tecnologias Web
Minhas anotaes:
118
Minhas anotaes:
119
Tecnologias Web
Minhas anotaes:
120

Apostila Tecnologias Web

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila Tecnologias Web

Caricato da

Copyright:

Formati disponibili

Tecnologias Web

UniSEB Editora Universidade Estcio de S

Captulo 1: Ambiente Distribudo da

A Internet foi por muitos anos conhecida

Objetivos da sua Aprendizagem

Neste captulo, os objetivos principais so:

Voc um usurio(a) da Internet? Provavelmente sua resposta ser sim!

Proibida a reproduo UniSEB

Os primeiros registros sobre a criao da Internet so da dcada de

Ambiente Distribudo da Internet - Captulo 1

Figura 1 Mapa lgico da ARPANet em 1977.

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

Fonte: < http://www.computerhistory.org/internet_history/ >.

Em 1973, outro marco importante da evoluo da Internet foi a

Em 1981, foi criada uma outra rede de comunicao que conectava

Figura 2 PCBoard para Bulletin Board System (BBS).

Proibida a reproduo UniSEB

Ambiente Distribudo da Internet - Captulo 1

de Internet World.std.com, a qual oferecia o servio de comunicao com a Internet por

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

Proibida a reproduo UniSEB

Outro importante navegador de Internet lanado nesta poca foi o

1.2 Protocolo TCP/IP

O funcionamento da Internet baseado em um protocolo de rede

Ambiente Distribudo da Internet - Captulo 1

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

O protocolo de comunicao UDP um servio no-confivel para

Finalmente, na camada mais alta, so definidos os protocolos de

Interface com a rede

Proibida a reproduo UniSEB

1.3 World Wide Web e o Protocolo HTTP

A rede mundial de computadores popularmente conhecida como

Ambiente Distribudo da Internet - Captulo 1

No protocolo HTTP, o acesso aos recursos disponveis na Internet

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

Proibida a reproduo UniSEB

A troca de mensagens entre cliente e servidor realizada por meio de

Solicita um determinado recurso no servidor web, tal como, uma pgina

Transmite dados para processamento no servidor. Este mtodo pode ser

Busca de informaes sobre um determinado recurso. Pode ser utilizado,

Tabela 1.1 Operaes do protocolo HTTP

Ambiente Distribudo da Internet - Captulo 1

Na mensagem de resposta, o servidor utiliza um cdigo de status

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

1.4 Correio Eletrnico

(corpo). Originalmente, os e-mails eram compostos exclusivamente de

Date: Tue, 20 Dec 2012 11:30:19 -0300

Proibida a reproduo UniSEB

From: Joo da Silva <joao@email.com>

To: Jos Antnio <joase@email.com>

Ambiente Distribudo da Internet - Captulo 1

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

Para o processo de troca de mensagens de e-mail, utilizado um

1.5 Transferncia de Arquivos

O protocolo de transferncia de arquivos, do ingls File Transfer

Proibida a reproduo UniSEB

O usurio que deseja acessar um servidor remoto de FTP necessita

Ambiente Distribudo da Internet - Captulo 1

EAD-15-Tecnologias Web Proibida a reproduo UniSEB

1.6 Servio de Diretrio (DNS)

A Internet oferece aos usurios uma infinidade de recursos que

Considerando o contedo abordado ao longo deste captulo, em que

Neste captulo, voc aprendeu os fatos histricos e evolutivos da

Proibida a reproduo UniSEB