Conteúdo das Aulas Teletransmitidas

Prévia do material em texto

Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 1 
Plano de Ensino 
2 
Ementa 
O ambiente de Internet: como funciona, protocolos, 
diversas aplicações 
Diferenciação entre ambientes cliente e servidor 
Introdução à criação de páginas Web simples 
Linguagem de marcação, script e estilos 
 
Conteúdos 
O ambiente Internet 
Introdução à construção de páginas estáticas 
Linguagem de marcação e estilos 
Tabelas, formulários e validação 
3 
Plano de Ensino 
Objetivo Geral 
Conhecer em profundidade o ambiente de Internet 
Apresentar os mecanismos básicos de criação de 
páginas estáticas para a Internet 
 
Objetivos Específicos 
Compreender, definir e utilizar o ambiente Internet 
Criar páginas estáticas simples 
Conhecer e diferenciar todos os tipos de aplicativos 
existentes na Internet 
4 
Plano de Ensino 
Bibliografia básica 
VIEIRA, E.. Os bastidores da Internet no Brasil. 1.ed. São Paulo: 
Editora Manole, 2003. 
DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet Applications e 
desenvolvimento para WEB para programadores. 
1. ed. São Paulo: Editora Pearson, 2009. 
MANZANO, J. A. N. G.; ALVES, S. T.. Guia de Orientação e 
Desenvolvimento de sites: HTML, XHTML, CSS E 
JAVASCRIPT/JSCRIPT. 1. ed. São Paulo: Érica. 2008. 
 
Bibliografia complementar 
HUBBARD, J.. Programação com Java. 1. ed. São Paulo: Editora 
Relativa, 2002. 
PAULA FILHO, W. P.. Multimídia: Conceitos e Aplicações. 1. ed. 
Rio de Janeiro: Editora LTC, 2000. 
(V) LEMAY, Lauura; Aprenda a Criar Páginas com HTML e 
XHTML em 21 dias; Pearson; 2002; 
Conteúdo da Aula 
• Ambiente da Internet 
 
• Histórico do surgimento da Internet 
 
• O Protocolo TCP/IP 
5 
Ambiente da Internet 
• Internet antigamente 
 
– Rede mundial de computadores 
 
– Usos específicos 
• Comunicação Militar 
 
• Aplicações bancárias 
 
• Pesquisa 
6 
• Internet hoje em dia 
– A “Grande Rede” 
 
– “Tudo” está conectado à internet 
 
– Uso generalizado 
• Comunicação para qualquer finalidade 
 
• Segurança 
 
• Entretenimento 
 
• Muitas outras... 
 7 
Ambiente da Internet 
Histórico da Internet 
• Primeiros registros 
– Década de 60 (1962) 
 
– Surge o conceito de uma 
“Rede Intergalática de Computadores” 
 
• Necessidade: 
– Importância da comunicação em cenários 
militares 
8 
• ARPANet (1969) 
– Apenas 4 computadores conectados 
– Link com taxa de 50kbps 
– Interligava 4 universidades americanas 
– Transmissão de dados por pacotes 
 
• Protocolo TCP/IP (1973) 
– Modelo padronizado de comunicação 
– Utilizado até hoje! 
9 
Histórico da Internet 
• Outras grandes redes 
– USENET (1979) 
– BITNET (1981) 
 
• Sistemas BBS 
– Utilizavam modems conectados por linhas 
telefônicas domésticas 
 
• FIDONET (1984) 
– Interconexão dos BBS 
 
10 
Histórico da Internet 
• PCBoard, gerenciador de BBS 
 
11 
Histórico da Internet 
• Em 1987 
– Haviam 20.000 hosts conectados na internet 
 
• No início dos anos 90 
– O CERN cria o HTML 
 
• Em 1992 
– É criado o primeiro navegador: MOSAIC 
– Netscape Navigator foi o mais importante 
navegador da década 
 
12 
Histórico da Internet 
13 
Histórico da Internet 
• Em seguida 
– Muitas empresas foram criadas exclusivamente 
para atuar na Internet. 
 
• Ebay 
 
• Amazon 
 
• Yahoo 
 
• Altavista 
14 
Histórico da Internet 
Protocolo TCP/IP 
• O funcionamento da Internet baseia-se no protocolo 
TCP/IP 
– Tem como precursor a comutação de pacotes 
utilizada pela ARPANet 
 
• O TCP/IP é composto por dois protocolos: 
– TCP 
 
• Transmission Control Protocol 
– IP 
 
• Internet Protocol 
 
 
15 
• Camada mais baixa da arquitetura da internet 
– Protocolos em hardware e software 
 
• Segundo nível 
– Protocolo IP 
 
• Terceiro nível 
– Protocolos de transporte TCP e UDP 
 
• Camada mais alta 
– Protocolos de aplicação 
16 
Protocolo TCP/IP 
Fonte: Adaptado de (PETERSON & DAVIE, 2004) 
17 
Protocolo TCP/IP 
• Protocolo IP 
– Identifica os hosts da rede unicamente 
 
• Exemplo: 200.45.63.124 
– Concentra inúmeros protocolos em apenas uma 
rede lógica 
18 
Protocolo TCP/IP 
• Protocolo TCP 
 
– Requer conexão 
– Modelo confiável 
– Checagem de integridade de pacote 
– Full Duplex 
– Entrega Ordenada 
– Controle de Fluxo 
19 
Protocolo TCP/IP 
• Protocolo UDP 
– Modelo NÃO confiável 
– Menor “custo” 
– NÃO Requer conexão 
– NÃO checa a integridade do pacote 
– 1 para N 
 
• Envio para diversos destinos 
– Utilizado para: 
 
• Serviços de transmissão de audio/video 
 
20 
Protocolo TCP/IP 
• Portas 
– São comuns aos protocolos TCP e UDP 
 
– 16 bits 
 
• 0 – 65535 
– Para se conectar com vários servidores/serviços 
ao mesmo tempo 
 
– Porta de origem e porta de destino 
21 
Protocolo TCP/IP 
• Algumas portas padrão 
22 
PORTA SERVIÇO 
80 HTTP 
443 HTTPS 
22 SSH 
21 FTP 
53 DNS 
25 SMTP 
3389 RDP (acesso remoto) 
Protocolo TCP/IP 
• Portas 
– São comuns aos protocolos TCP e UDP 
 
– 16 bits 
 
• 0 – 65535 
– Para se conectar com vários servidores / serviços 
ao mesmo tempo 
 
– Porta de origem e porta de destino 
23 
Protocolo TCP/IP 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 1 
25 
1) Qual a principal grande rede que influenciou o 
surgimento da internet? 
• Resposta: 
– ARPANet 
26 
2) Qual o principal navegador da década de 90? 
• Resposta: 
– Netscape Navigator 
27 
3) Dê um exemplo de endereço IP. 
• Resposta: 
– 200.55.44.123 
28 
4) Qual o protocolo mais indicado para a 
comunicação por HTTP? Por que? 
• Resposta: 
– TCP, pois garante a 
integridade dos dados 
29 
5) Qual o protocolo mais indicado para a exibição de 
filmes on-line por streaming? Por que? 
• Resposta: 
– UDP, pois tem menor “custo” e não há a 
necessidade de se ter todos os pacotes 
transmitidos de forma íntegra. 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 2 
Conteúdo da Aula 
• WWW e o protocolo HTTP 
 
• Correio Eletrônico 
 
• Transferência de Arquivos 
 
• Serviço de Diretório (DNS) 
2 
WWW e o Protocolo HTTP 
• WWW (World Wide Web) 
 
– Como é conhecida a Internet 
 
– Formada por clientes e servidores 
 
• Trocam informações entre si 
 
• Utilizam o protocolo HTTP 
3 
• HTTP (HyperText Transfer Protocol) 
 
– Modelo utilizado para transferência de dados via 
Internet 
 
– Utiliza URL (Universal Resource Location) para 
localização de conteúdo na internet 
 
• Exemplo: http://www.google.com.br 
 
– Os navegadores são utilizados para acessar os 
recursos 
4 
WWW e o Protocolo HTTP 
• O protocolo HTTP utiliza: 
 
– Modelo requisição-resposta 
5 
Cliente 
 
- Navegador 
Web. 
Ex: chrome, 
firefox, I.E. 
Servidor 
 
- Servidor Web. 
Ex: apache, 
IIS. 
Requisição 
Resposta 
WWW e o Protocolo HTTP 
• Servidores Web 
– Apache HTTP Server 
• Criado em 1996 
• Projeto de código aberto 
• Mantido pela Apache Software Foundation 
 
– IIS (Microsoft Internet Information Services) 
• Suporta HTTP, FTP e SMTP 
• Módulos de extensão 
• Parte integrante do Microsoft Windows 
6 
WWW e o Protocolo HTTP 
• Identificação das Respostas 
– 1XX 
• Informativo 
– 2XX 
• Sucesso 
– 3XX 
• Redirecionamento 
– 4XX 
• Erro em Cliente 
– 5XX 
•Erro em Servidor 
7 
WWW e o Protocolo HTTP 
• Troca de mensagens 
 
– GET 
• Solicita recurso 
 
– POST 
• Transmite dados para servidor 
 
– HEAD 
• Solicita informação 
8 
WWW e o Protocolo HTTP 
• Exemplo de requisição GET 
9 9 
WWW e o Protocolo HTTP 
Cliente Servidor 
Requisição GET 
Resposta: 
No cabeçalho da resposta 
existe o identificador 
• Mensagem de Requisição 
10 
GET /HTTP/1.1 
Host: www.site.com.br/index.html 
WWW e o Protocolo HTTP 
• Mensagem de Resposta 
11 
HTTP/1.1 200 OK 
 
Date: Wed, 20 Nov 2014 15:30:23 GMT 
 
Server: Apache/1.7.2 (Unix) (Red-Hat/Linux) 
 
Last-Modified: Wed 15 Jul 2014, 23:55:00 GMT 
 
Accept-Ranges: bytes 
 
Content-Length: 1580 
 
Connection: close 
 
Content-Type: text/html 
WWW e o Protocolo HTTP 
Correio Eletrônico 
• E-Mail 
 
– Uma das primeiras aplicações criadas para a 
internet 
 
– Mensagens compostas por HEAD (cabeçalho) e 
BODY (corpo) 
 
– Utilizam MIME (multipurpose Internet Mail 
Exchange) 
12 
• Conteúdo MIME 
 
– Composto por: 
 
• Version (versão) 
 
• Description (descrição) 
 
• Content-Type (tipo de conteúdo) 
13 
Correio Eletrônico 
• Cabeçalho MIME 
14 
MIME-Version: 1.0 
 
Received: by 10.194.18.225 with HTTP; 
 
Tue, 20 Dec 2012 07:30:19 -0700 (PDT) 
 
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: João da Silva joao@email.com 
 
To: José Antônio joase@gmail.com 
 
Content-Type: text/plain; charset=UTF-8 
Correio Eletrônico 
• Protocolo SMTP 
 
– Simple Mail Transfer Protocol 
 
– Protocolo utilizado para transferência de 
mensagem entre máquina cliente para servidor 
de e-mail 
15 
Correio Eletrônico 
• Protocolo SMTP 
 
– Cabeçalho To (destinatário) obrigatório 
 
– Mantém a tentativa de envio ativa 
 
– Conexão TCP na porta 25 
16 
Correio Eletrônico 
• Protocolos POP3 e IMAP 
 
– Utilizados para recebimento de mensagens 
 
– POP3 
• Faz uma cópia da mensagem para o cliente 
 
– IMAP 
• Faz a leitura remota das mensagens no 
servidor 
17 
Correio Eletrônico 
Transferência de Arquivos 
• Protocolo FTP 
 
– File Tansfer Protocol 
 
– É necessário um software cliente 
• WS FTP 
• FileZilla 
• Cute FTP 
 
– Necessita URL, Usuário e Senha 
18 
• Protocolo FTP 
 
– Utiliza duas portas: 
• Porta 20: Conexão de dados 
• Porta 21: Controle 
 
– Exemplo de URL: 
• ftp://ftp.repositorio.com.br 
19 
Transferência de Arquivos 
• Protocolo FTP 
 
– Permite execução de comandos: 
• mkdir – cria novo diretório 
• delete – apaga arquivo 
• cd – muda o diretório atual 
• dir – lista os arquivos de um diretório 
• Outros... 
20 
Transferência de Arquivos 
• Protocolo FTP 
 
– Muito utilizado para: 
• Publicação de conteúdo em páginas web 
• Disponibilização de arquivos para download 
• Salvar arquivos remotamente 
• Envio de arquivos grandes 
21 
Transferência de Arquivos 
Serviço de Diretório (DNS) 
• DNS (Domain Name System) 
 
– Hostname 
• Exemplo: www.site.com.br 
• Bom para usuário 
• Fácil de lembrar 
 
– IP 
• Exemplo: 200.35.78.132 
• Bom para roteamento de pacotes 
22 
• DNS (Domain Name System) 
 
– Faz a tradução de um endereço de IP em um 
hostname, e vice-versa. 
23 
200.35.78.132 www.site.com.br 
Serviço de Diretório (DNS) 
• Requisição HTTP 
DNS 
24 
Navegador 
- Endereço digitado: 
www.site.com.br 
Servidor Web 
- IP: 200.35.78.132 
200.35.78.132 www.site.com.br 
Serviço de Diretório (DNS) 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 2 
26 
1) Quais os dois principais softwares servidores 
web? 
• Resposta: 
– Apache HTTP Server 
– Internet Information Services (IIS) 
27 
2) O que o HTTP utiliza para localizar conteúdo na 
internet? Dê um exemplo. 
• Resposta: 
– Utiliza URL (Universal Resource Location) 
– Exemplo: 
• http://www.google.com.br 
28 
3) Qual o protocolo utilizado para se enviar uma 
mensagem de e-mail? 
• Resposta: 
– SMTP. 
29 
4) Quais são as duas partes das quais uma 
mensagem de e-mail é composta? 
• Resposta: 
–HEAD (cabeçalho) 
–BODY (corpo) 
30 
5) Dê três exemplos de comandos FTP e 
explique-os. 
• Resposta: 
– delete – apaga arquivo 
– cd – muda o diretório atual 
– dir – lista os arquivos de um diretório 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 3 
Conteúdo da Aula 
• Segurança na Internet 
 
• Criptografia de Dados 
 
• Protocolo HTTPS 
 
• Firewall 
2 
Segurança na Internet 
• Por que segurança na internet? 
 
– Transações bancárias 
 
– Compras on-line 
 
– Proteger conteúdo 
• E-mails 
 
• Arquivos pessoais 
3 
• Principais problemas 
 
– Interceptação de mensagens 
• Criptografia 
 
– Acesso indevido 
• Firewall/Aplicações 
 
– Negação de serviço 
• Firewall 
4 
Segurança na Internet 
Criptografia de Dados 
• O que é? 
 
– Algoritmo que permite codificar uma mensagem 
• Transmissão da mensagem codificada 
 
– Decodificação 
• Utiliza-se uma chave 
 
• Somente pelo possuidor da chave 
5 
• Três tipos de algoritmos 
 
– Chave secreta 
 
– Chave pública 
 
– Hashing (message digest) 
6 
Criptografia de Dados 
• Principais algoritmos 
 
– Chave secreta 
• Data Encryption Standard (DES) 
 
– Chave pública 
• Rivets, Shamir, Adleman (RSA) 
 
– Hashing 
• Message Digest version 5 (MD5) 
7 
Criptografia de Dados 
• Algoritmo de chave secreta 
 
– Apenas uma chave 
 
– A mesma chave que codifica, descodifica 
 
– Problema: Transmissão da chave 
• Interceptação da mensagem codificada e 
também da chave 
8 
Criptografia de Dados 
Transmissão: 
 
Mensagem Codificada 
(Chave X) 
• Transmissão com chave secreta 
9 
Origem 
Mensagem 
Limpa 
Chave X 
Mensagem 
Codificada 
Destino 
Mensagem 
Codificada 
Chave X 
Mensagem 
Limpa 
Criptografia de Dados 
• Algoritmo de chave pública 
 
– Possui um par de chaves 
• Chave privada 
• Chave pública 
 
– Uma chave codifica, a outra decodifica 
 
– Transmite-se apenas a chave pública 
10 
Criptografia de Dados 
• Transmissão com chave pública 
11 
Origem 
Mensagem Limpa 
Mensagem 
Codificada 
Destino 
Pública 
Envia chave 
pública Privada 
Pública Envia a mensagem 
codificada 
Mensagem 
Codificada 
Privada 
Mensagem Limpa 
Criptografia de Dados 
• Algoritmo de Hashing 
 
– Não existe decodificação 
 
– Processa a mensagem e gera um “resumo” 
 
– Muito utilizado para: 
• Validação de integridade 
• Armazenamento de senhas 
• Assinatura digital 
 
 
12 
Criptografia de Dados 
• Autenticação com hashing 
Transmissão: 
 
- Mensagem 
- Código Hash (digest) 
13 
Origem 
Mensagem 
Hashing 
Message 
Digest 
Destino 
Mensagem 
Hashing 
Message 
Digest 
Message 
Digest 
C
o
m
p
a
ra
ç
ã
o
 
Criptografia de Dados 
Protocolo HTTPS 
• Tráfego via HTTP 
– Sujeito a interceptações 
 
• Tráfego via HTTPS 
– Funciona com o protocolo SSL (Secure Sockets 
Layer) 
• Fornece conexão segura 
• Encriptação dos dados 
• HTTP + SSL = HTTPS 
 
 
14 
• Principais Utilizadores do HTTPS 
 
– Comércio eletrônico 
• Sites de vendas 
• Sites de pagamento– Sites com dados sigilosos 
• E-Mails 
 
– Instituições bancárias 
15 
Protocolo HTTPS 
• Como saber se está seguro? 
 
– Endereço no navegador: 
• Inseguro: http://www.site.com.br 
• Seguro: https://www.site.com.br 
 
– Alguns navegadores exibem um cadeado ao usar 
o HTTPS 
16 
Protocolo HTTPS 
Firewall 
• O que é? 
 
– Software voltado à segurança de conexões 
 
– Bloqueia entradas/saídas indevidas 
 
– Pode funcionar em servidor e/ou cliente 
 
 
17 
• Trazudindo: Muro de Fogo 
 
18 
Firewall 
©
 C
o
s
ta
s
f 
| 
D
re
a
m
s
ti
m
e
.c
o
m
 
• Principais controles (filtros) 
 
– Protocolos 
 
– Portas 
 
– Hosts (faixas de IP) 
 
– Comportamento suspeito 
 
19 
Firewall 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 3 
21 
1) Cite algumas ocasiões em que se necessita de 
segurança na transmissão de dados via internet. 
• Resposta: 
– Transações bancárias 
– Compras on-line 
– Envio de e-mails 
– Armazenamento de arquivos 
pessoais 
22 
2) Para transmissão de mensagens via internet, qual 
tipo de criptografia é mais indicada? Por quê? 
• Resposta: 
– Criptografia de chave pública (ou assimétrica), 
pois a chave que decodifica a mensagem não é 
transmitida. 
23 
3) Cite dois exemplos de utilização do algoritmo de 
hashing. 
• Resposta: 
– Verificação de integridade 
– Armazenamento de senhas 
24 
4) Como eu sei que os meus dados estão sendo 
transmitidos de forma segura, via HTTPS? 
• Resposta: 
– Verificar o protocolo https:// na url. 
– Em alguns navegadores, verificar se aparece um 
cadeado. 
25 
5) É possível bloquear o acesso via HTTP por meio 
de um firewall? 
• Resposta: 
– Sim. O firewall permite o bloqueio de protocolos. 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 4 
Conteúdo da Aula 
• Aplicativos para Internet 
– Navegadores 
 
– Clientes de E-mail e Webmail 
 
– Comunicadores Instantâneos 
 
– Compartilhamento de Arquivos 
 
– Segurança na Rede 
 
– Aplicativos na Web 2.0 
2 
Navegadores 
• O que são os Navegadores? 
– Também conhecidos como Browsers 
 
– Aplicativo fundamental para acesso à internet 
 
– Primeiros navegadores 
• Mosaic 
 
• Netscape 
 
• Internet Explorer 
3 
• Principais navegadores 
 
– Google Chrome 
 
– Internet Explorer 
 
– Firefox 
 
– Safari 
 
– Opera 
4 
Navegadores 
• Popularidade dos navegadores 
5 
Navegador Utilização 
Google Chrome 49,18% 
Internet Explorer 22,62% 
Firefox 19,25% 
Safari 5,15% 
Opera 1,46% 
Outros 2,34% 
F
o
n
te
: 
S
ta
tC
o
u
n
te
r 
g
s
.s
ta
tc
o
u
n
te
r.
c
o
m
 
Navegadores 
• Popularidade dos navegadores 
6 
49,18% 
22,62% 
19,25% 
5,15% 
1,46% 2,34% 
0,00%
10,00%
20,00%
30,00%
40,00%
50,00%
60,00%
Google Chrome Internet Explorer Firefox Safari Opera Outros
Utilização 
Utilização
Navegadores 
• Google Chrome 
 
– O navegador mais popular 
 
– Disponibilizado em 2008 
 
– Desbancou o I.E. 
 
– Marketing: 
 
• Navegador mais rápido 
7 
Navegadores 
• Google Chrome disponível em 
 
– 51 idiomas 
 
– Diversas plataformas 
 
• Windows 
 
• Linux 
 
• Mac OS X 
 
• Android 
8 
Navegadores 
• Interface do Google Chrome 
9 
Navegadores 
• Internet Explorer (I.E.) 
– Criado em 1995 
 
– Produto da Microsoft 
• Distribuído com o S.O. Windows 
 
– Por muitos anos líder de mercado 
• No auge, chegou a ser usado por 99% dos 
dispositivos 
10 
Navegadores 
• Interface do Internet Explorer 
11 
Navegadores 
Clientes de E-Mail e Webmail 
• Aplicativos utilizados para envio e recebimento de 
e-mails 
 
• Serviço de E-Mail 
– Gratuitos ou Pagos 
 
– Criação de conta de e-mail 
 
– Exemplo: 
• nomedeusuario@fornecedordoserviço.com 
12 
• Clientes de E-mail Desktop 
– Normalmente utilizam POP3 para recebimento 
 
– Utilizam SMTP para envio 
 
– Tendência: 
• Serem substituídos por soluções webmail. 
13 
Clientes de E-Mail e Webmail 
• Clientes de E-mail Webmail 
– Normalmente utilizam IMAP para recebimento 
 
– Utilizam SMTP para envio 
 
– Tendência de crescimento 
• Cloud Computing 
14 
Clientes de E-Mail e Webmail 
• Principais diferenças: 
15 
WEBMAIL DESKTOP 
Acesso pelo navegador Acesso por software desktop 
E-Mails nas nuvens 
E-Mails são copiados para o 
PC (nem sempre) 
Acesso de qualquer 
dispositivo com navegador 
Necessário instalar o software 
específico no dispositivo 
Clientes de E-Mail e Webmail 
• Serviço de e-mail 
– Independente de cliente 
 
– A maioria fornece um ambiente de webmail 
 
– Uso de Cliente Desktop: 
• Depende de disponibilidade 
 
• Decisão do usuário 
16 
Clientes de E-Mail e Webmail 
• Alguns clientes de Webmail 
– Principais soluções 
• Hotmail 
 
• Gmail 
 
• Yahoo Mail 
 
• Zipmail 
 
• R7 
 
• Outros... 
17 
Clientes de E-Mail e Webmail 
• Clientes de E-mail Desktop 
– Principais soluções 
• Outlook 
 
• Eudora 
 
• IncrediMail 
 
• Thunderbird 
 
• Evolution 
 
• Outros... 
18 
Clientes de E-Mail e Webmail 
• Envio e recebimento de mensagens em tempo real 
– Chat 
 
• Protocolo: 
 
– IRC 
• Internet Relay Chat 
 
• Criado em 1988 
 
• Principal cliente de IRC: mIRC 
19 
Comunicadores Instantâneos 
• Aplicativo ICQ 
– Revolucionário 
 
– Cada usuário tinha um ICQ Number 
 
– Lançado em 1996 
 
– Chegou a alcançar quase 200 milhões de 
usuários 
20 
Comunicadores Instantâneos 
• Outros aplicativos conhecidos 
– Windows Live Messenger / Skype 
 
– Yahoo Messenger 
 
– Gtalk / Hangouts 
 
– Facebook Messenger 
 
– Whatsapp 
21 
Comunicadores Instantâneos 
Compartilhamento de Arquivos 
• Aplicativos P2P 
– Peer-to-Peer 
 
– Compartilhamento ponto-a-ponto 
• Sem interferência de servidor 
 
22 22 
Origem 
Arquivo 
Destino 
Arquivo 
• Aplicativos P2P 
 
– Principais aplicativos 
• Shareaza 
 
• BitTorrent 
 
– Requer maior cautela 
• Vírus 
23 23 
Compartilhamento de Arquivos 
• Serviços de Hospedagem 
– Servidor remoto armazena arquivos 
 
– Acesso a servidor para baixá-los 
 
– Existem gratuitos e pagos 
 
– Normalmente o espaço é limitado 
 
– Possibilidade de controle no servidor 
• Anti-vírus 
 
24 24 
Compartilhamento de Arquivos 
• Serviços de Hospedagem 
 
25 25 
Origem 
Arquivo 
Destino 
Arquivo 
Servidor 
Arquivo 
Compartilhamento de Arquivos 
• Serviços de Hospedagem 
– Alguns serviços: 
 
• Microsoft OneDrive 
 
• Dropbox 
 
• Google Drive 
26 26 
Compartilhamento de Arquivos 
Segurança na Rede 
• Para navegar tranquilo, utilizar: 
– Anti-vírus 
 
– Anti-spyware 
 
• Opcionais 
– Firewall 
 
– Software para criptografia 
27 27 
Aplicativos na Web 2.0 
• Aplicativos que rodam no navegador 
– Possuem características desktop 
 
• Exemplos: 
– Flickr 
 
– Google Drive 
 
– Alguns webmails 
 
– Muitos outros... 
28 28 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 4 
30 
ATIVIDADES 
• 1 – Qual o navegador de internet mais 
utilizado hoje em dia? 
• Resposta: 
–Google Chrome. 
31 
ATIVIDADES 
• 2– Qual o protocolo de recebimento de e-
mails normalmente utilizado por sistemas 
webmail? 
• Resposta: 
– IMAP. 
32 
ATIVIDADES 
• 3 – Qual o primeiro protocolo criado para 
troca de mensagens instantâneas pela 
internet? 
• Resposta: 
– IRC. 
33 
ATIVIDADES 
• 4 – Aplicativos peer-to-peer (P2P) utilizam 
servidores de arquivos para transmissão? 
• Resposta: 
–Não, ela é feita ponto a 
ponto. 
34 
ATIVIDADES 
• 5 – Cite alguns importantes serviços de 
hospedagem de arquivos. 
• Resposta: 
–Google drive 
–Dropbox 
–OneDrive 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 5 
Conteúdo da Aula 
• O que é HTML? 
 
• Onde e para quê é utilizado? 
 
• Sintaxe da linguagem 
 
• Arquivos HTML 
2 
O que é HTML? 
• Linguagem de marcação de hipertexto; 
 
–Em inglês: Hyper-Text Markup Language 
 
• O texto é marcado para ser exibido de modo 
formatado/diagramado por uma página web. 
 
• Extensão do arquivo: .html ou .htm 
3 
O que é HTML? 
• Requisição de uma página HTML 
4 
Cliente 
 
- Navegador 
Web utilizado 
para 
navegação. 
Servidor 
 
- Servidor 
Web com 
arquivos 
HTML. 
Requisita: 
Arquivo HTML 
Envia: 
Arquivo HTML 
O que é HTML? 
• Arquivo HTML é acessado via navegador 
(Chrome, IE, Firefox, Safari...) e o conteúdo 
é exibido. 
 
• Recursos: 
 
– Imagens 
–Tabelas 
–Vídeos 
–Outros... 
5 
O que é HTML? 
• HTML5 
 
–A mais nova versão do HTML 
 
–Já muito utilizada 
 
–Não suportada por todos os navegadores 
 
–Criada pela W3C 
• World Wide Web Consortium 
 
–Não necessita plug-ins para alguns recursos 
6 
O que é HTML? 
• XHTML 
 
–HTML Extendido 
 
–Baseado em XML 
 
–Foca em conteúdo da página 
 
–Design/Diagramação 
 
• CSS: Cascade Style Sheet 
• Folhas de estilo em cascata 
7 
Onde e para que o HTML é utilizado? 
• O HTML é basicamente usado para 
construção de páginas para a web; 
 
• HTML é de suma importância para 
desenvolvedores web: 
 
–Linguagens de programação para web 
 
• Geradores dinâmicos de HTML; 
8 
Onde e para que o HTML é utilizado? 
• Existem editores visuais de HTML, como: 
 
–FrontPage 
 
–NVU 
 
–Dreamweaver 
 
–Notepad++ 
 
–NetBeans 
 
–Muitos outros... 
9 
Onde e para que o HTML é utilizado? 
• O editor Notepad++ 
10 
Onde e para que o HTML é utilizado? 
• Bloco de notas 
 
–Suficiente para se criar arquivos HTML 
 
• É importante conhecer a linguagem! 
 
– Intervenção direta no código 
 
• Programação dinâmica de páginas. 
11 
Sintaxe da Linguagem 
• O HTML é constituído de TAGs: 
 
–Marcações que são feitas no arquivo 
 
• Formatar / Diagramar para a exibição pelo 
navegador. 
 
–Utilizam os símbolos < e > 
 
• Abertura: <TAG> 
• Fechamento: </TAG> 
• Pontuais: <TAG/> 
12 
Sintaxe da Linguagem 
• Existem TAGs para: 
 
– Inserção de imagens 
 
–Formatação em Tabelas 
 
–Links (ligações) para outros arquivos HTML 
do seu site 
 
–Links para outras páginas na web 
 
–Muitas outras... 
13 
Sintaxe da Linguagem 
• Algumas TAGs possuem propriedades. 
 
–Configuradas na abertura da TAG 
 
–Obrigatórias ou opcionais 
 
–Alteram o efeito que a TAG aplica 
Sintaxe da Linguagem 
• Exemplo de uma TAG HTML: 
15 
<a href=“pagina2.htm”>Clique Aqui!</a> 
Nome da propriedade 
Aplicação 
da TAG 
Abertura da TAG Valor da propriedade 
Fechamento 
da TAG 
Arquivos HTML 
• DOCTYPE 
 
–Define o tipo de documento 
 
–Depende da versão do HTML 
 
–Marcação no início do documento 
 
–Em HTML5: 
• <!DOCTYPE html> 
16 
Arquivos HTML 
• HEAD 
 
–Cabeçalho do documento 
 
–Contém informações como: 
• Título do documento 
• Scripts utilizados 
• Links para folhas de estilos 
• Palavras-chave para indexação 
• Descrição da página 
17 
Arquivos HTML 
• BODY 
 
–Corpo do documento 
 
• Principal parte estrutural da página 
 
–Contém todo o conteúdo da página 
 
• A maioria das TAGs são incluídas dentro do 
escopo do BODY 
18 
Arquivos HTML 
• Estrutura de um arquivo HTML 
19 
Arquivos HTML 
• Execução de um arquivo HTML 
–Arquivo: teste.html 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Página</title> 
 </head> 
 <body> 
 <h1>Olá Mundo!</h1> 
 </body> 
</html> 
20 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividades 5 
22 
Atividades 
1 – Qual a extensão do arquivo HTML? 
• Resposta: 
–“.html” ou “.htm”. 
23 
Atividades 
2 – Cite uma vantagem e uma desvantagem de 
se utilizar o HTML5? 
• Resposta: 
–Vantagem: 
• Não necessita de plug-ins 
para execução de 
conteúdo multimídia. 
–Desvantagem: 
• Não é suportada por 
todos os navegadores. 
24 
Atividades 
3 – Cite três aplicativos que auxiliam na 
escrita do código HTML. 
• Resposta: 
–Dreamweaver 
–NVU 
–FrontPage 
25 
Atividades 
• 4 – O que faz a W3C? 
• Resposta: 
–É responsável pela 
padronização de 
tecnologias para web. 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 6 
Conteúdo da Aula 
• Páginas em HTML 
 
–Principais TAGs utilizadas 
•Formatação de Texto 
 
•Links (Ancoragem) 
 
•Manipulação de Imagens 
 
•Formatação de tabelas 
2 
TAGs: Formatação de Texto 
• TAGs de texto: 
–<p> Parágrafo </p> 
 
–<h1> Título </h1> (h1 a h6) 
 
–<br/> ou <br> Pular linha 
 
–<hr/> ou <hr> Régua horizontal 
 
–<sub> Subscrito </sub> 
 
–<sup> Sobrescrito </sup> 
 
3 
TAGs: Formatação de Texto 
• Código HTML: 
4 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>PG Teste 01</title> 
 <meta charset="utf-8"/> 
 </head> 
 <body> 
 <h1>Título 1</h1> 
 <h2>Título 2</h2> 
 <h3>Título 3</h3> 
 <h4>Título 4</h4> 
 <h5>Título 5</h5> 
 <h6>Título 6</h6> 
 </body> 
</html> 
TAGs: Formatação de Texto 
• Resultado: 
5 
TAGs: Formatação de Texto 
• Código HTML: 
6 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>PG Teste 02</title> 
 <meta charset="utf-8"/> 
 </head> 
 <body> 
 <h2>Título</h2> 
 <p>Parágrafo de Texto.</p> 
 <p> 
 Outro parágrafo de texto. 
 <br/> 
 Mesmo parágrafo, linha de baixo. 
 </p> 
 </body> 
</html> 
TAGs: Formatação de Texto 
• Resultado: 
7 
TAGs: Formatação de Texto 
• Efeitos no texto: 
 
–<ins> Sublinhado </ins> (ou <u>) 
 
–<strong> Negrito </strong> (ou <b>) 
 
–<i> Itálico </i> 
 
–<del> Tachado </del> 
 
–<mark> Cor brilhante </mark> 
8 
TAGs: Formatação de Texto 
• Código HTML: 
9 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>PG Teste 03</title> 
 <meta charset="utf-8"/> 
 </head> 
 <body> 
 <h2>Texto em negrito</h2> 
 <strong>Este texto está em 
 negrito usando a TAG STRONG.</strong> <br/> 
 <b>Este aqui usa a TAG B.</b> 
 <h2>Texto sublinhado</h2> 
 <ins>Este texto está sublinhado 
 usando a TAG INS.</ins> <br> 
 <u>Este aqui usa a TAG U.</u> 
 </body> 
</html> 
TAGs: Formatação de Texto 
• Resultado: 
10 
TAGs: Formatação de Texto 
• Código HTML: 
11 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>PG Teste 04</title> 
 <meta charset="utf-8"/> 
 </head> 
 <body> 
 <p>Texto sobrescrito: <sup>Estou aqui 
 em cima!</sup></p> 
 <p>Texto subscrito: <sub>Estou aqui 
 em baixo!</sub></p> 
 </body> 
</html>TAGs: Formatação de Texto 
• Resultado: 
12 
TAGs: Links 
• Links (ancoragem): 
 
–Alteram a visualização de um arquivo HTML 
para outro em um navegador web 
 
–Permitem navegar para diferentes sites na 
web 
 
–Podem apontar para outras páginas, 
arquivos, etc... 
13 
TAGs: Links 
• Links em HTML: 
14 
<a href=“http://www.site.com.br"/> 
Caminho do html/site a ser exibido 
Abertura da TAG Fechamento 
da TAG 
Propriedade de 
referência 
TAGs: Links 
• Código HTML (teste02.html): 
15 
<!doctype html> 
<html> 
 <head> 
 <title>Página Teste 02</title> 
 </head> 
 <body> 
 <h1>Mudança de Página</h1> 
 <p><a href="teste03.html"> 
 Ir para Teste03</a></p> 
 </body> 
</html> 
TAGs: Links 
• Resultado: 
16 
TAGs: Links 
• Resultado: 
17 
TAGs: Links 
• Código HTML (teste03.html): 
18 
<html> 
 <head> 
 <title>Página Teste 03</title> 
 </head> 
 <body> 
 <h1>Chegamos!!!</h1> 
 <p><a href="teste02.html">Voltar para 
Teste02</a></p> 
 </body> 
</html> 
TAGs: Imagens 
• Imagens em HTML: 
19 
<img src="img/imagem.jpg"/> 
Caminho da imagem a ser exibida 
Abertura da TAG Fechamento 
da TAG 
TAGs: Imagens 
• Resultado: 
20 
TAGs: Imagens 
• Página com imagem do ENIAC 
21 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset=”utf-8”> 
 <title>HTML: Exemplo 07</title> 
 </head> 
 <body> 
 <h1>Inserção de imagens</h1> 
 <img src=”eniac.jpg” height=”305” width=”400”/> 
 <p> 
 <i> Foto do computador ENIAC (Electronic 
 Numerical Integrator And Computer) da 
 década de 40. </i> 
 </p> 
 </body> 
<html> 
TAGs: Imagens 
• Resultado: 
22 
TAGs: Tabelas 
• Tabelas em HTML: 
23 
<table border="1"> 
 <tr> 
 <td colspan="2">Carros</td> 
 </tr> 
 <tr> 
 <td>Palio</td> 
 <td>2012</td> 
 </tr> 
 <tr> 
 <td>Gol</td> 
 <td>2014</td> 
 </tr> 
</table> 
Inicia a Tabela 
Nova Linha 
Colunas 
TAGs: Tabelas 
• Resultado: 
24 
TAGs: Tabelas 
• Código de tabela em HTML 
25 
<!DOCTYPE html> 
<html> 
 <head> 
 <title>Carros</title> 
 </head> 
 <body> 
 <table border="1"> 
 <tr> 
 <td rowspan="2">Carros</td> 
 <td>Palio</td> 
 </tr> 
 <tr> 
 <td>Gol</td> 
 </tr> 
 </table> 
 </body> 
</html> 
TAGs: Tabelas 
• Resultado: 
26 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 6 
28 
Atividades 
1 – Dê um exemplo de um link para a página 
do google. 
• Resposta: 
–<a href=“http://www.google.com.br”> 
Clique Aqui! </a>. 
29 
Atividades 
2 – Quais são as TAGs de título do HTML? 
• Resposta: 
–<h1>, <h2>, <h3>, <h4>, 
<h5>, <h6>. 
30 
Atividades 
3 – Qual a utilidade da propriedade colspan 
na coluna de uma tabela? 
• Resposta: 
–Ocupar mais de uma coluna 
com a mesma célula. 
31 
Atividades 
• 4 – Qual a propriedade que indica o caminho 
do arquivo de imagem a ser inserido na 
página HTML? 
• Resposta: 
–A propriedade src. 
32 
Atividades 
• 5 – O que acontece se a TAG <br/> for 
utilizada várias vezes seguidas? 
• Resposta: 
–São puladas várias linhas 
na página, deixando um 
espaço em branco. 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 7 
Conteúdo da Aula 
• Listas em HTML 
 
• Formulários em HTML 
 
• Controles de Formulário 
–Text 
–Password 
–Textarea 
–Submit 
–Reset 
2 
Listas em HTML 
• Listas ordenadas 
 
–Numérica 
 
• Algarismos arábicos (1, 2, 3...) 
 
• Algarismos romanos (i, ii, iii...) 
 
–Alfabética 
 
• Letras (a, b, c...) 
3 
Listas em HTML 
• Código HTML 
–Listas 
Ordenadas 
4 
Listas em HTML 
• Página Web 
–Listas 
Ordenadas 
5 
Listas em HTML 
• Listas não-ordenadas 
 
–Círculo 
 
–Quadrado 
 
• Listas de Descrição 
 
–Termo 
–Descrição do termo 
6 
Listas em HTML 
• Código HTML 
–Lista Não-ordenada 
7 
Listas em HTML 
• Código HTML 
–Lista de Descrição 
8 
Listas em HTML 
• Página Web 
–Lista 
Não-ordenada 
–Lista de 
Descrição 
9 
Formulários em HTML 
• Formulários 
 
–Envio de dados para processamento no 
servidor 
 
–Elemento na página HTML: 
 
• TAG: <form> 
10 
Formulários em HTML 
• A TAG <form> 
 
–Especificar a ação quando submetido o 
formulário 
• Action 
 
–Especificar qual o método de submissão dos 
dados 
• GET 
• POST 
11 
Formulários em HTML 
• O método GET 
– Informações enviadas a uma página 
 
–Limite de 1024 caracteres 
 
–Dados definidos na URL 
 
• Separados por ? e & 
 
–Exemplo: 
12 
www.pagina.com.br/index.html?nome=Joao&idade=28 
Formulários em HTML 
• O método POST 
–Dados são codificados no cabeçalho HTTP 
 
–Sem limite de tamanho 
 
–Não são visíveis ao usuário 
 
–Pode-se enviar qualquer tipo de dados 
• Fotos para upload 
• Arquivos 
• Texto 
• Outros... 
13 
Formulários em HTML 
• Estrutura de um formulário 
14 
Controles de Formulário 
• Controles de Formulário 
 
–São elementos de interação do usuário 
 
• Para a submissão de dados para o servidor 
 
–Cada controle tem um objetivo e uso 
diferenciado 
15 
Controles de Formulário 
• Propriedades dos controles 
 
–A maioria dos controles possui 
• Value: valor que é enviado ao servidor 
• Name: nome para acesso aos dados 
• Type: tipo de controle 
 
• TAG: <input> 
16 
Controles de Formulário 
• O controle Text 
 
–É um campo de texto livre com uma linha 
 
–O texto digitado é visível 
17 
<input type=“text” name=“nome” value=“”/> 
Controles de Formulário 
• O controle Textarea 
 
–Semelhante ao controle Text 
 
–O texto digitado não é visível 
<input type=“password” name=“senha” value=“”/> 
Controles de Formulário 
• O controle Textarea 
–Semelhante ao controle Text 
–Possui TAG própria 
–Permite várias linhas 
19 
<textarea name=“msg” rows=“2” cols=“20”> 
 VALOR 
</textarea> 
Controles de Formulário 
• O controle Submit 
–Botão que envia os dados do formulário 
 
 
 
 
• O controle Reset 
–Botão que limpa os dados do formulário 
 
20 
<input type="submit" value="Enviar Dados"> 
<input type="reset" value="Limpar Dados"> 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 7 
22 
Atividades 
• 1 – Qual a TAG que define uma lista 
ordenada? 
• Resposta: 
–<ol> 
23 
Atividades 
• 2 – Qual a TAG que engloba todo um 
formulário Web? 
• Resposta: 
–<form>. 
24 
Atividades 
• 3 – O que acontece se algum controle do 
meu formulário estiver fora do escopo da 
TAG <form>? 
• Resposta: 
–Os dados deste controle 
não são enviados ao 
servidor. 
25 
Atividades 
• 4 – Cite duas vantagens de se utilizar o 
método POST para envio dos dados de um 
formulário. 
• Resposta: 
–Em caso de envio de dados 
sigilosos, estes não são 
visíveis ao usuário. 
–Não tem limite de tamanho 
para os dados enviados. 
26 
Atividades 
• 5 – Para a digitação de uma senha, qual o 
controle mais indicado? 
• Resposta: 
–O controle password, pois 
os dados digitados ficam 
invisíveis. 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 8 
Conteúdo da Aula 
• Controles de Formulário–Checkbox 
–Radio 
–Select 
–Hidden 
 
• Acessibilidade na Web 
2 
Controles de Formulário 
• O controle Checkbox 
 
–Seleção de itens 
• Nenhum, Um ou Vários 
 
–Deve manter o mesmo nome 
• name=“nomeigual” 
3 
Controles de Formulário 
• O controle Checkbox 
4 
<form> 
 <input type="checkbox" name="chkFrutas" value="Abacaxi"/> Abacaxi 
 <br/> 
 <input type="checkbox" name="chkFrutas" value="Uva"/> Uva 
 <br/> 
 <input type="checkbox" name="chkFrutas" value="Laranja"/> Laranja 
 <br/> 
 <input type="checkbox" name="chkFrutas" value="Caju"/> Caju 
 <br/> 
 <input type="checkbox" name="chkFrutas" value="Banana"/> Banana 
 <br/> 
 <input type="checkbox" name="chkFrutas" value="Goiaba"/> Goiaba 
</form> 
Controles de Formulário 
• O controle Checkbox 
5 
Controles de Formulário 
• O controle Radio 
 
–Seleção de itens 
• Apenas um por grupo 
 
–Deve manter o mesmo nome 
• name=“nomeigual” 
6 
Controles de Formulário 
• O controle Radio 
7 
<form> 
 <input type="radio" name="rdoFrutas" value="Abacaxi"/> Abacaxi 
 <br/> 
 <input type="radio" name="rdoFrutas" value="Uva"/> Uva 
 <br/> 
 <input type="radio" name="rdoFrutas" value="Laranja"/> Laranja 
 <br/> 
 <input type="radio" name="rdoFrutas" value="Caju"/> Caju 
 <br/> 
 <input type="radio" name="rdoFrutas" value="Banana"/> Banana 
 <br/> 
 <input type="radio" name="rdoFrutas" value="Goiaba"/> Goiaba 
</form> 
Controles de Formulário 
• O controle Radio 
8 
Controles de Formulário 
• O controle Select 
–TAG <select> 
• Cria um menu de seleção 
• Contém a propriedade name 
–TAG <option> 
• Cria cada opção do menu 
• Contém a propriedade value 
 
–Configurável para várias seleções 
• Multiple 
9 
Controles de Formulário 
• O controle Select 
10 
<form> 
 <select name="nomes"> 
 <option value="joao"> 
 João 
 </option> 
 <option value="maria"> 
 Maria 
 </option> 
 <option value="carlos"> 
 Carlos 
 </option> 
 </select> 
</form> 
Controles de Formulário 
• O controle Select 
11 
Controles de Formulário 
• O controle Select Multiple 
12 
<form> 
 <select name="nomes" multiple> 
 <option value="joao"> 
 João 
 </option> 
 <option value="maria"> 
 Maria 
 </option> 
 <option value="carlos"> 
 Carlos 
 </option> 
 </select> 
</form> 
Controles de Formulário 
• O controle Select Multiple 
13 
Controles de Formulário 
• O controle Hidden 
 
–Elemento invisível na página 
 
• Utilizado para passagem de parâmetros que 
não precisam ser exibidos 
 
• Pode ser visualizado no código HTML 
14 
<input type=“hidden” name=“codigo” value=“145”/> 
Acessibilidade na Web 
• Projeto da W3C 
–WAI (Web Acessibility Initiative) 
• Desde 1997 
• Publica diretrizes de acessibilidade 
• Visa tornar a web acessível a uma gama 
maior de pessoas 
 
• Linguagem HTML 
–Possui elementos de acessibilidade 
15 
Acessibilidade na Web 
• Dificuldade em visualizar imagem 
 
–Propriedade alt da TAG <img> 
 
• Descrição textual da imagem 
 
• Exemplo: 
16 
<img src=“imagem.jpg” alt=“descrição”/> 
Acessibilidade na Web 
• Exemplo de uso: alt 
17 
<
w
w
w
.g
o
o
g
le
.c
o
m
.b
r>
 
Acessibilidade na Web 
• Resumo de informações de Tabela 
 
–Propriedade summary da TAG <table> 
 
• São lidas por navegadores com este recurso 
 
• Exemplo: 
18 
<table summary=“Percentual de vendas do mês 
de maio de 2014”/> 
Acessibilidade na Web 
• Atalhos de teclado 
 
–Propriedade accesskey 
 
• Aplicação em diferentes elementos 
 
• Normalmente utilizado em links 
 
• Exemplo: 
19 
<a href=“clientes.html” accesskey=“c”> Clientes </a> 
Acessibilidade na Web 
• Exemplo de uso: accesskey 
20 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 8 
22 
Atividades 
• 1 – Qual a diferença quanto ao uso do 
controle Radio para o controle Checkbox? 
• Resposta: 
–Radio: utilizado para 
seleção de apenas um 
elemento 
–Checkbox: utilizado para 
seleção de um, nenhum 
ou vários elementos 
23 
Atividades 
• 2 – O controle select também é conhecido 
como? 
• Resposta: 
–Combo Box. 
24 
Atividades 
• 3 – Dê dois exemplos de uso do controle 
hidden. 
• Resposta: 
–Passagem de códigos 
indiferentes para o usuário. 
–Passagem de parâmetros 
advindos de outras páginas. 
25 
Atividades 
• 4 – Cite duas vantagens de se utilizar 
elementos de acessibilidade em uma página 
web. 
• Resposta: 
–Torná-la acessível a uma 
gama maior de usuários. 
–Facilitar a navegação dos 
usuários. 
 
26 
Atividades 
• 5 – Desde quando existe a WAI? Quem a 
mantém? 
• Resposta: 
–Desde 1997 e é mantida 
pela W3C. 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 9 
Conteúdo da Aula 
 
• O que é CSS? 
 
• O uso das folhas de estilo 
 
• Sintaxe da Linguagem 
2 
O que é CSS? 
• CSS 
 
–Cascading Style Sheets 
 
–Folhas de estilo em cascata 
 
–Criada pela W3C 
 
–Possui linguagem própria 
3 
O que é CSS? 
• Objetivos 
 
–Definir um conjunto de regras para 
formatação de páginas web 
 
–Separa o conteúdo da página da formatação 
 
–Possibilidade de diagramação: Layouts 
4 
O uso das folhas de estilo 
• Três tipos de uso 
 
–Definição de estilos na página HTML 
1 - Diretamente na TAG 
2 - No cabeçalho da página HTML 
 
–Definição de estilos em arquivo separado 
3 - É feito um LINK para o arquivo CSS no 
arquivo HTML. 
5 
O uso das folhas de estilo 
• Definição e aplicação de estilos diretamente 
na TAG HTML 
 
–Utiliza a propriedade style 
 
–É aplicado somente na TAG em que é 
definido 
6 
O uso das folhas de estilo 
• Exemplo: 
7 
<p style=“color: red”>Texto</p> 
Propriedade style 
Abertura da TAG Definição de estilos 
O uso das folhas de estilo 
• Definição de estilos no cabeçalho do 
arquivo HTML 
 
–Utiliza a TAG <style> 
 
–Os estilos definidos podem ser aplicados em 
diversos elementos do documento em que 
estão definidos 
8 
O uso das folhas de estilo 
• Exemplo: 
9 
<style type=“text/css”> 
 h1 { 
 color: red; 
 } 
 p { 
 color: blue; 
 } 
 a { 
 color: green; 
 } 
</style> 
Inicia a folha 
de estilos 
Definição 
de estilos 
Fecha a 
folha de 
estilos 
O uso das folhas de estilo 
• Definição de estilos em um arquivo .css 
 
–Podem ser utilizados em diversas páginas 
HTML 
 
–Facilitam a manutenção do site 
 
–Arquivo pode estar hospedado em qualquer 
local da Web 
 
–Para ser utilizado no HTML 
• Necessita de um LINK para a folha de estilos 
10 
O uso das folhas de estilo 
• Exemplo: 
11 
h1 { 
 color: red; 
} 
p { 
 color: blue; 
} 
a { 
 color: green; 
} 
Arquivo: 
estilos.css 
<html> 
 <head> 
 <link rel=“stylesheet” 
 type=“text/css” 
 href=“estilos.css”/> 
 </head> 
 <body> 
 ... 
 </body> 
</html> 
Arquivo: 
Index.html 
O uso das folhas de estilo 
12 
estilos.css 
index.html 
clientes.html 
imagens.html contatos.html 
empresa.html 
Sintaxe da linguagem 
• Cada regra é dividida em seletores e bloco 
de declaração 
–O bloco de declaração é dividido em 
propriedades e valores 
13 
h1, h2 { 
 color: red; 
 font-width:bold; 
} 
Seletores 
Bloco de declaração 
Propriedade Valor 
Sintaxe da linguagem 
• Seletores: 
–Onde as regras serão aplicadas 
 
• Bloco de declaração: 
–Regras a serem aplicadas 
14 
Sintaxe da linguagem 
• Tipos de seletores 
 
–Seletor universal 
 
–Seletor de tipo 
 
–Seletor de classe 
 
–Seletor de ID 
 
–Seletor de pseudo-classe 
15 
Sintaxe da linguagem 
• Seletor universal 
 
–Definido por: * 
 
–Aplica a regra a todos os elementos da 
página web 
16 
* { 
 color: red; 
} 
Sintaxe da linguagem 
• Seletor de tipo 
 
–Exemplo: h1, p, h4 
 
–Aplica a regra a todos os elementos do tipo 
que foi definido no seletor 
17 
p { 
 color: red; 
} 
Sintaxe da linguagem 
• Seletor de classe 
 
–Exemplo: .txt_inicial 
–Utiliza a propriedade class do HTML 
–Aplica a regra aos elementos indicados 
18 
.txt_inicial { 
 color: red; 
} 
<p> Primeiro parágrafo </p> 
<p class=“txt_inicial”> Segundo parágrafo </p> 
Sintaxe da linguagem 
• Seletor de ID 
 
–Exemplo: #txt_inicial 
–Utiliza a propriedade id do HTML 
–O ID não pode se repetir 
–Aplica a regra apenas ao elemento indicado 
19 
.txt_inicial { 
 color: red; 
} 
<p> Primeiro parágrafo </p> 
<p id=“txt_inicial”> Segundo parágrafo </p> 
Sintaxe da linguagem 
• Seletor de pseudo-classe 
 
–Exemplo: a:hover 
–Define classes especiais de elementos 
20 
a:hover { 
 color: red; 
} 
<a href=“pg2.htm”> Primeiro link </a> 
<a href=“pg2.htm”> Primeiro link </a> 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 9 
22 
Atividade 
• 1 – Qual o principal objetivo em se usar 
folhas de estilos? 
• Resposta: 
–Separação do conteúdo 
da página de sua 
formatação. 
23 
Atividade 
• 2 – Cite duas vantagens em se utilizar 
arquivos .css separadamente do arquivo 
HTML. 
• Resposta: 
–Concentrar a manutenção 
da formatação em um 
arquivo 
–Aplicar a mesma 
formatação à várias 
páginas. 
24 
Atividade 
• 3 – Quais são os três itens utilizados na 
linguagem de definição do CSS? 
• Resposta: 
–Seletores, propriedades e 
valores. 
25 
Atividade 
• 4 – Porque seletores de ID podem ser 
aplicados apenas à um elemento da 
página? 
• Resposta: 
–Porque a propriedade ID 
identifica unicamente um 
elemento, não pode se 
repetir. 
 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Aula 10 
Conteúdo da Aula 
 
• Formatação de texto e plano de fundo 
 
• Formatação de margens, espaçamento e 
bordas 
 
• Layout em CSS 
2 
Formatação de texto e plano de fundo 
• Propriedades de formatação de texto 
3 
Formatação de texto e plano de fundo 
• Propriedades de formatação de fonte 
4 
Formatação de texto e plano de fundo 
• Aplicação de formatação de fonte: 
5 
h1{ 
 font-family: “Arial”; 
 font-weight: bold; 
 font-size: 36px; 
 text-align: center; 
 background-color: #000080; 
 color: #FFFFFF; 
 text-transform: uppercase; 
} 
p{ 
 font-family: “Comic Sans MS”; 
 text-align: justify; 
 background-color: #DEDEDE; 
} 
<h1>Título do texto com 
estilo!</h1> 
<p>Parágrafo com estilo 
aplicado!</p> 
Formatação de texto e plano de fundo 
• Propriedades de formatação de plano de 
fundo 
6 
Formatação de texto e plano de fundo 
• Aplicação de plano de fundo: 
7 
body{ 
 background-image: url('globo.png'); 
 background-repeat: repeat-x; 
} 
Formatação de margens, 
espaçamentos e bordas 
• Propriedades de Margem: 
–margin-bottom 
–margin-top 
–margin-left 
–magin-right 
 
–Define-se tamanho para as margens 
8 
Formatação de margens, 
espaçamentos e bordas 
• Propriedades de Espaçamento: 
–padding-bottom 
–padding-top 
–padding-left 
–padding-right 
 
–Define-se tamanho para o espaçamento 
9 
Formatação de margens, 
espaçamentos e bordas 
10 
Texto 
Página Web 
Elemento 
Margem 
Espaçament
o 
Borda 
Formatação de margens, 
espaçamentos e bordas 
• Principais propriedades de Borda: 
–border-bottom 
–border-top 
–border-left 
–border-right 
 
–border-color 
–border-width 
–border-style 
11 
Formatação de margens, 
espaçamentos e bordas 
• Principais tipos de borda: 
–solid 
–dashed 
–double 
–groove 
 
• Definição 
 
12 
border-style: solid; 
border-style: dashed; 
border-style: double; 
border-style: groove; 
Formatação de margens, 
espaçamentos e bordas 
• Bordas aplicadas 
13 
Layout em CSS 
• Layout responsivo 
 
–Adaptável a diversos dispositivos e 
tamanhos de tela 
 
• Monitores 
 
• Tablets 
 
• Celulares 
14 
Layout em CSS 
• Principais elementos HTML para 
confecção de layouts 
–<div> 
• Bloco lógico para confecção de layouts 
• Não-visual 
–<span> 
• Marca trechos em que a formatação é 
aplicada 
• Não-visual 
15 
Layout em CSS 
• Definição da formatação dos blocos 
16 
Layout em CSS 
• Aplicação da formatação nos blocos 
17 
Layout em CSS 
• Layout resultante 
18 
Tecnologias 
Web 
João Paulo 
Brognoni Casati 
Atividade 10 
20 
Atividade 
• 1 – Qual a regra css para que todos os 
parágrafos de uma página tivessem o texto 
centralizado? 
• Resposta: 
–p { 
 text-align: center; 
} 
21 
Atividade 
• 2 – Qual a regra css para que se defina uma 
classe que formate o texto com a cor verde? 
• Resposta: 
– .texto-verde { 
 color: green; 
} 
22 
Atividade 
• 3 – Qual a regra css para que se defina uma 
borda superior lisa e uma borda inferior 
tracejada em um elemento de id=“el”? 
• Resposta: 
–#el { 
 border-top: solid; 
 border-bottom: dashed; 
} 
23 
Atividade 
• 4 – O que significa layout responsivo? 
• Resposta: 
–Layout adaptável a 
diferentes dispositivos e 
tamanhos de tela. 
24 
Atividade 
• 5 – Quais a principal TAG HTML utilizada 
para a confecção de layouts? 
• Resposta: 
–A TAG <div>