Protocolos de Comunicação na Internet

Prévia do material em texto

INTERNET
PROTOCOLO 
•
 PROTOCOLO é o conjunto de regras sobre o 
modo como se dará a comunicação entre as partes 
envolvidas.
•
 Funções dos protocolos é pegar os dados que 
serão transmitidos pela rede, dividir em pequenos 
pedaços chamados pacotes, na qual dentro de cada 
pacote há informações de endereçamento que 
informam a origem e o destino do pacote. É através 
do protocolo que as fases de estabelecimento, 
controle, tráfego e encerramento, componentes da 
troca de informações são sistematizadas.
Cliente Servidor
•
 A tecnologia cliente/servidor é uma arquitetura na qual o 
processamento da informação é dividido em módulos ou 
processos distintos. Um processo é responsável pela 
manutenção da informação (servidores) e outros 
responsáveis pela obtenção dos dados (os clientes).
• Os processos cliente enviam pedidos para o processo 
servidor, e este por sua vez processa e envia os resultados 
dos pedidos.
• Nos sistemas cliente/servidor o processamento tanto do 
servidor como o do cliente são equilibrados, se for gerado 
um peso maior em um dos dois lados, provavelmente, esse 
não é um sistema cliente/servidor.
O Protocolo TCP / IP
•
 Os protocolos para internet formam o grupo 
de protocolos de comunicação que 
implementam a pilha de protocolos sobre a 
qual a internet e a maioria das redes 
comerciais funcionam. 
•
 Eles são algumas vezes chamados de 
"protocolos TCP/IP", já que os dois protocolos: 
o protocolo TCP - Transmission Control 
Protocol (Protocolo de Controle de 
Transmissão); e o IP - Internet Protocol 
(Protocolo de Internet) foram os primeiros a 
serem definidos.
O Protocolo TCP / IP
l TCP: cabe quebrar as mensagens em 
pacotes de um lado e recompô-las de outro;
l IP: descobrir o caminho exato entre 
remetente e destinatário e enviar os pacotes;
l Quatro bilhões de endereços possíveis de 4 
bytes (3 classes de endereços distintas, A, B, 
C);
l Servidores de Nome: máquinas capazes de 
traduzir nomes para endereços IP, poupando 
o usuário de decorar endereços;
 
TCP/IP Classes
Class
e Faixa de IP Núm. de redes Número de hosts Máscara padrão
A 0.0.0.0 até 127.255.255.255 126 16.777.214 255.0.0.0 
B 128.0.0.0 até 191.255.255.255 16.382 65.534 255.255.0.0
C 192.0.0.0 até 223.255.255.255 2.097.150 254 255.255.255.0 
 
IPV6
• Quantidade de Endereços:
• 340.282.366.920.938.463.463.374.607.431.768.211.456 
 
HTTP
•
 O protocolo HTTP (HyperText Transfer 
Protocol) é o protocolo mais utilizado na 
Internet desde 1990. A versão 0.9 destinava-se 
unicamente a transferir dados na Internet (em 
especial páginas Web escritas em HTML). A 
versão 1.0 do protocolo (a mais utilizada) 
permite doravante transferir mensagens com 
cabeçalhos que descrevem o conteúdo da 
mensagem utilizando uma codificação de tipo 
MIMO (Multipurpose Internet Mail Extensions ). 
• O objetivo do protocolo HTTP é permitir 
uma transferência de arquivos (essencialmente 
no formato HTML) localizados graças a uma 
cadeia de caracteres chamada URL entre um 
navegador (o cliente) e um servidor Web 
(chamado de resto httpd nas máquinas UNIX). 
 
HTTP
 
HTTP
Uma linha de pedido : 
A linha compreende três elementos que devem ser separados 
por um espaço: 
•O método 
•O URL 
•A versão do protocolo utilizado pelo cliente (geralmente 
HTTP/1.0) 
Exemplo:
GET http://pt.kioskea.net HTTP/1.0 
Accept : text/html 
If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT 
User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95) 
 
HTTP
Comando Descrição
GET Pedido do recurso situado na URL especificada
 
HTTPS
É a combinação do protocolo HTTP com o SSL (Secure Sockets Layer). 
É a maneira mais comum atualmente de trafegar documentos via HTTP 
de maneira segura. Provê encriptação de dados, autenticação de servidor, 
integridade de mensagem e autenticação de cliente.
O que é SSL?
É uma camada que fica entre a camada de aplicação e a camada de 
transporte. Foi desenvolvido pela Netscape Communications e tem a 
função de prover comunicação segura na internet, através da 
autenticação e encriptação dos pacotes entre o servidor e o cliente.
Um site seguro, que usa o HTTPs, deve possuir 3 compontentes 
essenciais para a comunicação segura: o servidor, o software seguro (faz 
o trabalho de criptografia) e o certificado de assinatura (assinatura 
digital).
 
FTP
•
 File Transfer Protocol (Protocolo de Transferência de 
arquivos), e é uma forma bastante rápida e versátil de 
transferir arquivos (também conhecidos como ficheiros), 
sendo uma das mais usadas na internet.
Uma interface gráfica de um cliente FTPPode referir-se 
tanto ao protocolo quanto ao programa que implementa 
este protocolo (neste caso, tradicionalmente aparece em 
letras minúsculas, por influência do programa de 
transferência de arquivos do Unix).
INTERNET
lURL (Uniform Resource Locator): 
endereço que identifica o Serviço, 
Máquina e Local na Internet;
lSintaxe: 
4método: //servidor.domínio:porta/acesso;
4ftp: www.sem.com.br /java/javadoc.zip;
4http: www.sem.com.br:80 /index.html;
4news: alt.hipertext;
4telnet //dra.com;
INTERNET
lDomínio “Domain Name”;
l terra.sem.com.br (sem.com.br = 
Domínio)
4
.org (grupo organizações);
4
.edu (grupo universidades);
4
.gov (grupo Instituições governamentais);
4
.com (grupo Instituições Comerciais);
lRegistro de Domínios no Brasil: 
www.registro.br;
DNS
•
 O DNS (Domain Name System) é 
basicamente um mapeamento entre endereços 
IP e nomes. A abordagem inicial para este 
mapeamento era a utilização de nomes 
planos, ou seja, sem hierarquia. Esta 
abordagem possui limitações intrínsecas 
quanto a escalabilidade e a manutenção. O 
sistema de nomes utilizado na Internet tem o 
objetivo de ser escalável, suportando a 
definição de nomes únicos para todas as redes 
e máquinas na Internet e permitir que a 
administração seja descentralizada. 
DNS
•
 É implementado por meio de uma aplicação 
cliente-servidor. O cliente é o resolver (conjunto 
de rotinas em uma implementação de TCP/IP 
que permite a aconsulta a um servidor) e um 
servidor geralmente é o programa bind ou uma 
implementação específica de um servidor de 
DNS (Windows NT).
Correio Eletrônico
∀
 SMTP (Simple Mail Transfer Protocol) - um padrão 
internacional utilizado para transfência de 
correspondências eletrônicas (email) entre 
computadores. 
•
 POP (Post Office Protocol) - um dos protocolos 
utilizados por leitores de email (Eudora, Netscape, 
Outlook, etc) para buscar mensagens no servidor de 
email. As mensagens são transferidas do servidor 
para o computador local quando o usuário se 
conecta ao servidor. Após buscar as mensagens a 
conexão pode ser desfeita, procedendo-se à leitura 
das mensagens sem precisar estar conectado ao 
servidor. Este protocolo é particularmente indicado 
no caso de se utilizar conexões de acesso de baixa 
velocidade.
Correio Eletrônico
∀ ••••IMAP (Internet Message Access Protocol) 
- outro protocolo padrão utilizado por 
leitores de email para ter acesso às 
mensagens que chegam ao servidor de 
email. Diferentemente do POP, utilizando 
IMAP a conexão entre o computador local 
e o servidor de email deve estar sempre 
ativa pois há uma constante interação 
entre eles. As mensagens são mantidas do 
servidor de email, mas acessadas como se 
estivessem localmente. Esta opção é util 
para pessoas que lêem seus emails de 
diferentes computadores. 
SOCKET
•
 Um socket é um mecanismo de 
comunicação (dois sentidos) entre 
dois programas a funcionar 
(normalmente) numa rede
SOCKET
• Uma aplicação servidor é executada numa 
determinada máquina e tem um socket ligado a uma 
porta específica dessa máquina.
• O servidor espera que um cliente faça um pedido de 
ligação através desse socket.
SOCKET
• O servidor ao aceitar a ligação cria um novo socket para uma 
porta diferente (e assim permite novas ligações)
• No lado do cliente um socket é criadoe é usado para 
comunicar com o servidor (numa porta disponível na máquina 
cliente).
SOCKET
• · stream : esta forma de comunicação provê canais de 
comunicação bidirecional ponto-a-ponto (entre dois processos pré-
definidos) sobre os quais pode-se enviar seqüências de bytes de 
qualquer tamanho, de maneira confiável (sem perdas, duplicações 
ou inversões de ordem nos dados).
• · datagram : forma que provê canais de comunicação bidirecionais 
sobre os quais pode-se enviar pacotes de dados a qualquer 
processo que tenha um canal equivalente definido. Não há garantia 
na entrega dos pacotes, pois o sistema implementa uma política de 
best-effort. Além disso, como os pacotes são tratados de forma 
independente, podem haver inversões de ordem.
• · raw : esta forma de comunicação provê acesso direto aos 
protocolos e interfaces de comunicação de baixo nível. Geralmente 
é usada por processos que gerenciam ou monitoram a infra-
estrutura de rede.
Segurança na Internet
• Um computador (ou sistema 
computacional) é dito seguro se este atende 
a três requisitos básicos relacionados aos 
recursos que o compõem: confidencialidade, 
integridade e disponibilidade.
Por que devo me preocupar com a segurança do meu 
computador?
Por que alguém iria querer invadir meu computador?
O Que fazer para proteger?
Segurança na Internet
• Confidencialidade: alguém obtém acesso não 
autorizado ao seu computador e lê todas as 
informações contidas na sua declaração de 
Imposto de Renda; 
• Integridade: alguém obtém acesso não 
autorizado ao seu computador e altera 
informações da sua declaração de Imposto de 
Renda, momentos antes de você enviá-la à 
Receita Federal; 
• Disponibilidade: o seu provedor sofre uma grande 
sobrecarga de dados ou um ataque de negação de 
serviço e por este motivo você fica impossibilitado 
de enviar sua declaração de Imposto de Renda à 
Receita Federal. 
Controle de acesso
•
 Na segurança da informação, é composto 
dos processos de autenticação, autorização e 
auditoria (accounting). Neste contexto o 
controle de acesso pode ser entendido como a 
habilidade de permitir ou negar a utilização de 
um objeto (uma entidade passiva, como um 
sistema ou arquivo) por um sujeito (uma 
entidade ativa, como um indivíduo ou um 
processo).
Senhas
• Uma senha (password) na Internet, ou em qualquer 
sistema computacional, serve para autenticar o 
usuário, ou seja, é utilizada no processo de verificação 
da identidade do usuário, assegurando que este é 
realmente quem diz ser. 
• Se uma outra pessoa tem acesso a sua senha, ela 
poderá utilizá-la para se passar por você na Internet. 
Alguns dos motivos pelos quais uma pessoa poderia 
utilizar sua senha são: 
• ·ler e enviar e-mails em seu nome; 
• ·obter informações sensíveis dos dados armazenados 
em seu computador, tais como números de cartões de 
crédito; 
• ·esconder sua real identidade e então desferir ataques 
contra computadores de terceiros. 
Senhas
• O que não se deve usar na elaboração de uma senha?
• O que é uma boa senha?
• Como elaborar uma boa senha?
• Quantas senhas diferentes devo usar?
• Com que freqüência devo mudar minhas senhas?
• Quais os cuidados especiais que devo ter com as 
senhas?
Segurança na Internet
 Uma barreira de proteção, que 
controla o tráfego de dados entre seu 
computador e a Internet (ou entre a 
rede onde seu computador está 
instalado e a Internet). Seu objetivo 
é permitir somente a transmissão e a 
recepção de dados autorizados.
 Proteção física: Firewall 
Segurança na Internet
 Tipos 
 
 O firewall que trabalha na filtragem de pacotes é muito 
utilizado em redes pequenas ou de porte médio. Por meio 
de um conjunto de regras estabelecidas, esse tipo de 
firewall determina que endereços IPs e dados podem 
estabelecer comunicação e/ou transmitir/receber dados. 
Alguns sistemas ou serviços podem ser liberados 
completamente (por exemplo, o serviço de e-mail da 
rede), enquanto outros são bloqueados por padrão, por 
terem riscos elevados (como softwares de mensangens 
instantâneas, tal como o ICQ). O problema, é que as 
regras aplicadas podem ser muito complexas e causar 
perda de desempenho da rede ou não serem eficazes o 
suficiente.
Segurança na Internet
 Tipos 
 
 Controle de aplicação (exemplos de aplicação: 
SMTP, FTP, HTTP, etc) são instalados geralmente 
em computadores servidores e são conhecidos 
como proxy. 
 Atua como um intermediador. É mais complexo, 
porém muito seguro, pois todas as aplicações 
precisam de um proxy. Caso não haja, a aplicação 
simplesmente não funciona. Em casos assim, uma 
solução é criar um "proxy genérico", através de 
uma configuração que informa que determinadas 
aplicações usarão certas portas. Essa tarefa só é 
bem realizada por adminstradores de rede.
Segurança na Internet
 Razões para usar um firewall
 O firewall pode ser usado para ajudar a impedir que sua rede ou 
seu computador seja acessado sem autorização. Assim, é possível 
evitar que informações sejam capturadas ou que sistemas tenham 
seu funcionamento prejudicado pela ação de hackers;
 O firewall é um grande aliado no combate a vírus e cavalos-de-
tróia, uma vez que é capaz de bloquear portas que eventualmente 
sejam usadas pelas "pragas digitais" ou então bloquear acesso a 
programas não autorizados;
 Em redes corporativas, é possível evitar que os usuários acessem 
serviços ou sistemas indevidos, além de ter o controle sobre as 
ações realizadas na rede, sendo possível até mesmo descobrir 
quais usuários as efetuaram. 
Segurança na Internet
 ZoneAlarm Free 
Comodo Personal Firewall - free
Sygate Personal Firewall 
PC Tools Firewall Plus 
Comodo Firewall Pro 
 Proteção física: Firewall - exemplos 
Segurança na Internet
 É a ciência e arte de escrever mensagens em 
forma cifrada ou em código. É parte de um 
campo de estudos que trata das 
comunicações secretas, usadas, dentre outras 
finalidades, para: 
• • • • autenticar a identidade de usuários; 
• • • • autenticar e proteger o sigilo de comunicações 
pessoais e de transações comerciais e 
bancárias; 
• • • • proteger a integridade de transferências 
eletrônicas de fundos. 
 Criptografia
Segurança na Internet
 Tipos de Criptografia
 Chave única utiliza a mesma chave tanto 
para codificar quanto para decodificar 
mensagens. Apesar deste método ser 
bastante eficiente em relação ao tempo de 
processamento, ou seja, o tempo gasto para 
codificar e decodificar mensagens, tem 
como principal desvantagem a necessidade 
de utilização de um meio seguro para que a 
chave possa ser compartilhada entre 
pessoas ou entidades que desejem trocar 
informações criptografadas. 
Segurança na Internet
 Tipos de Criptografia
 Chaves pública e privada utiliza duas 
chaves distintas, uma para codificar e 
outra para decodificar mensagens. Neste 
método cada pessoa ou entidade mantém 
duas chaves: uma pública, que pode ser 
divulgada livremente, e outra privada, que 
deve ser mantida em segredo pelo seu 
dono. As mensagens codificadas com a 
chave pública só podem ser decodificadas 
com a chave privada correspondente. 
Segurança na Internet
 Exemplo
 José codifica uma mensagem utilizando a 
chave pública de Maria, que está disponível 
para o uso de qualquer pessoa; 
 Depois de criptografada, José envia a 
mensagem para Maria, através da Internet; 
 Maria recebe e decodifica a mensagem, 
utilizando sua chave privada, que é apenas 
de seu conhecimento;
 Se Maria quiser responder a mensagem, 
deverá realizar o mesmo procedimento, mas 
utilizando a chave pública de José. 
Segurança na Internet
 Consiste na criação de um código, através da 
utilização de uma chave privada, de modo que a 
pessoa ou entidade que receber uma mensagem 
contendo este código possa verificar se o 
remetente é mesmo quem diz ser e identificar 
qualquer mensagem que possa ter sido 
modificada. 
Assinatura digital
Segurançana Internet
 Assinatura digital
 Se José quiser enviar uma mensagem assinada para 
Maria, ele codificará a mensagem com sua chave 
privada. Neste processo será gerada uma assinatura 
digital, que será adicionada à mensagem enviada 
para Maria. Ao receber a mensagem, Maria utilizará 
a chave pública de José para decodificar a 
mensagem. Neste processo será gerada uma 
segunda assinatura digital, que será comparada à 
primeira. Se as assinaturas forem idênticas, Maria 
terá certeza que o remetente da mensagem foi o 
José e que a mensagem não foi modificada. 
- Hacker: Uma pessoa intensivamente 
interessada em pesquisar sistemas operacionais; 
constantemente buscam por novos 
conhecimentos, os compartilham e nunca 
causam destruição.
- Cracker: Pessoa que invade ou viola sistemas 
com má intenção. 
- Lamers: Aprendiz, novato. Também é Lamer 
quem acha que é hacker mas não é.
- Script Kiddies: São as pessoas que utilizam 
receitas de bolos para hackear.
PRINCIPAIS TIPOS DE AMEAÇAS
Códigos Maliciosos:
Tratam-se de programas para 
computador com comportamento 
malicioso, maligno ou mal-
intencionado, cujo funcionamento, 
em geral, se dá com a intenção de 
causar dano ou roubo de 
informações.
 
PRINCIPAIS TIPOS DE AMEAÇAS
Vírus:
São provavelmente os mais 
representativos dos códigos 
maliciosos , tendo se 
popularizado a partir dos anos 
80, quando a massificação dos 
PCs lhes deu um novo e grande 
playground, o sistema 
operacional DOS.
PRINCIPAIS TIPOS DE AMEAÇAS
Vírus:
Tratados mais comumente 
como “vírus” visto que, à 
imagem destes seres vivos 
biologicamente primários e 
primitivos, apresentam dois 
objetivos básicos:
- Sobreviver 
- Reproduzir 
PRINCIPAIS TIPOS DE AMEAÇAS
- Cavalos de Tróia: 
Não são considerados vírus, visto que não 
conseguem replicar-se, ainda que tenham funções 
especiais maliciosas como o de um vírus, 
apresentando-se em geral como programas 
utilitários (exemplo: anti-vírus);
A fim de funcionar (causar dano), um cavalo de tróia 
precisa:
 - Ser introduzido no hospedeiro (i.e. email com 
.exe anexo)
 - Ser processado por um usuário do hospedeiro
Exemplos: NetBus e BackOriffice.
PRINCIPAIS TIPOS DE AMEAÇAS
Engenharia Social
 
Método de ataque, onde alguém faz uso da 
persuasão, muitas vezes abusando da ingenuidade 
ou confiança do usuário, para obter informações que 
podem ser utilizadas para ter acesso não autorizado a 
computadores ou informações. É um dos meios mais 
utilizados de obtenção de informações sigilosas e 
importantes.
Para atingir seu objetivo o atacante pode se passar 
por outra pessoa, assumir outra personalidade, fingir 
que é um profissional de determinada área, etc. 
 
PRINCIPAIS TIPOS DE AMEAÇAS
Phishing Scam
 
É um método de ataque que se dá através do 
envio de mensagem não solicitada (spam) com o 
intuito de induzir o acesso a páginas fraudulentas, 
projetadas para furtar dados pessoais e 
financeiros da vítima ou ainda o preenchimento de 
formulários e envio de dados pessoais e 
financeiros. Normalmente as mensagens enviadas 
se passam por comunicação de uma instituição 
conhecida, como um banco, empresa ou site 
popular. 
PRINCIPAIS TIPOS DE AMEAÇAS
PRINCIPAIS TIPOS DE AMEAÇAS
PRINCIPAIS TIPOS DE AMEAÇAS
Ataque de Negação de Serviço (DOS)
 
Um ataque de negação de serviço (também conhecido 
como DoS é uma tentativa em tornar os recursos de um 
sistema indisponíveis para seus utilizadores. 
 Normalmente tem como objetivo atingir máquinas 
servidoras da WEB de forma a tornar as páginas 
hospedades nestes servidores indisponíveis. Neste tipo 
de ataque não ocorre uma invasão no sistema mas a sua 
invalidação por sobrecarga. 
 
PRINCIPAIS TIPOS DE AMEAÇAS
Ataques Coordenados (DDOS)
 
Semelhante ao ataque DoS, porém ocorre de forma 
distribuída. Neste tipo de ataque distribuído de 
negação de serviço, também conhecido como DDoS, 
um computador mestre (denominado "Master") pode 
ter sob seu comando até milhares de computadores 
("Zombies" - zumbis) que terão a tarefa de ataque de 
negação de serviço. 
 
PRINCIPAIS TIPOS DE AMEAÇAS
PRINCIPAIS TIPOS DE AMEAÇAS
SQL Injection
 
É um tipo de ameaça que se aproveita de falhas em 
sistemas que interagem com bases de dados 
através da utilização de SQL. A injeção de SQL 
ocorre quando o atacante consegue inserir uma 
série de instruções SQL dentro de uma consulta 
(query) através da manipulação das entrada de 
dados de uma aplicação.
 
COMO REDUZIR OS RISCOS
- Não abra ou execute imediatamente os 
arquivos anexados às mensagens que você 
recebe. Verifique antes com um antivírus; 
- Os browsers, como qualquer software, 
possuem bugs. Utilize, sempre que possível, a 
última versão do browser com as devidas 
atualizações;
- Se usar um site provedor de e-mails, o 
cuidado também deve ser grande. Evite clicar 
em links que aparecerem no conteúdo das 
mensagens. Eles não são 100% seguros;
 
COMO REDUZIR OS RISCOS
• Desconfie de mensagens que mostrem 
muitas vantagens no campo “assunto”. 
Trata-se apenas de uma armadilha via e-
mail;
• Quando estiver em sites de trocas de 
mensagens instantâneas (bate-papo ou 
sites de relacionamentos, tipo Orkut), evite 
divulgar informações pessoais. Quadrilhas 
de bandidos usam esses sites para fazer 
amizade com os internautas, saber mais de 
suas vidas e, depois, ameaçar ou cometer 
outros crimes;
COMO REDUZIR OS RISCOS
• Evite baixar programas de sites 
desconhecidos. Muitos sites de peer-to-peer 
(compartilhamentos de programas e arquivos 
de música, filmes etc, como Kazaa e o 
eMule) podem conter programas pirateados 
com vírus e outras ameaças digitais; 
• Evite navegar na Internet em uma estação 
desconhecida. Neste caso, nunca acesse 
sites que contenham informações 
confidenciais;
• Tenha backup de seus dados.
 
Fonte:http://www.w3counter.com/globalstats.php?year=2011&month=3
Acessado em 24/04/2011,
Fonte:http://www.w3counter.com/globalstats.php?year=2011&month=3
Acessado em 24/04/2011,
Os discadores são aplicativos voltados basicamente 
para a comunicação entre cliente e servidor através de 
conexões via MODEM (MOdulador DEModulador). 
DISCADORES
COMUNICADORES INSTANTÂNEOS
Aplicação que permite o envio e o 
recebimento de mensagens de texto 
em tempo real.
COMUNICADORES INSTANTÂNEOS
COMPARTILHAMENTO DE ARQUIVOS
Existem muitas maneiras de se 
compartilhar arquivos. Muitos depositam 
seus arquivos em servidores na Internet 
para serem acessados via protocolo HTTP.
COMPARTILHAMENTO DE ARQUIVOS
VOIP
Aplicativos possibilitam a comunicação 
por voz via rede TCP/IP, estabelecendo 
comunicação com telefonia fixa ou 
celular. Estes aplicativos possibilitam a 
comunicação gratuita com usuários 
cadastrados no próprio serviço de 
comunicação.
VOIP
ATA (adaptador telefônico analógico)
Conecte um telefone comum ao 
seu computador ou sua 
conexão de internet para usar 
com VoIP. 
O ATA é um conversor 
analógico-digital. 
VOIP
Computador para computador
Existem várias empresas 
oferecendo software grátis ou de 
baixo custo para serem usados 
neste tipo de VoIP. Tudo que 
você precisa é o software, um 
microfone, alto-falantes, uma 
placa de som e uma conexão 
com a internet
VOIP
Telefones IP
Telefones específicos parecem um telefone comum. 
Mas ao invés de ter os conectores telefônicos 
padrão (RJ-11), telefones IP têm conectores RJ-45 
Ethernet. 
Os telefones IP conectam-se diretamente em seu 
roteador e contêm todo o hardware e software 
integrado para fazer uma ligação IP.
ACESSO REMOTO
Esta categoria compreende um conjunto 
maior de aplicativos para acesso remoto aos 
serviços na Internet, serviços estes tais como 
FTP, Download de Arquivos, Conexões via 
terminal entre outros.
ACESSO REMOTO
SERVIDORES WEB
Para hospedagem de sites, é necessário que 
haja um servidor capaz de interpretar 
requisições HTTP. 
 
O que mudou com a explosão do fenômeno 
“bolha ponto-com”
• ?
 
 A partir de 2003 tornavisível a forma 
como as pessoas e as organizações 
usavam e desenvolviam aplicações 
para a WEB.
 
WEB 2.0
 
O Que é Web 2.0
 O termo foi citado pela primeira vez em 2004 
durante uma sessão de brainstorm e foi o nome 
para uma conferência, a Web 2.0 Conference. 
 O evento reunia empresas que tinham sobrevivido 
explosão da bolha no ano de 2000 e estavam 
fazendo sucesso empregando alguns conceitos em 
comum.
A esse conjunto de conceitos, Dale Dougherty 
(O'Reilly
Media) chamou de web 2.0
 
 
Mas o Que é mesmo Web 2.0?
 “O termo Web 2.0 é utilizado para 
descrever a segunda geração da 
World Wide Web - tendência que 
reforça o conceito de troca de 
informações e colaboraçãodos 
internautas com sites e serviços 
virtuais” 
• Folha de São Paulo on-line
 
O que mudou?
Web 1.0
Produção de conteúdo 
centralizada
Taxonomia
Rede de computadores
Complexidade
Web 2.0
Descentralizada
Folksonomia
Rede + Plataforma
Simplicidade
 
Web 2.0
 COLABORAÇÃO - sites exploram ao 
máximo a interatividade (humana e 
humana/sistema) para geração de 
INTELIGÊNCIA COLETIVA.
 
 
 
WEB 2.0
 Social - realmente construída 
pensando nas pessoas. Sites Web 
2.0 promovem a interação entre 
internautas.
 
 
WEB 2.0
 CONTEÚDO produção de conteúdo 
descentralizada. Usuários criam, 
classificam,customizam e publicam 
conteúdos na web 2.0.
 Internautas podem publicar conteúdos em 
diferentes suportes midiáticos ( textos 
digitais, áudio, fotografia, vídeo). 
 
 SIMPLICIDADE a curva de aprendizagem 
é curta. Não é necessário saber 
programar para criar uma página na 
Internet ou para usar qualquer outra 
aplicativo web 2.0. Qualquer pessoa 
pode utilizar as ferramentas da nova 
web de forma bastante simples. 
 
 
WEB 2.0
 PLATAFORMA - A internet é um 
plataforma onde programas são 
executados on-line. Programas típicos 
de desktop começam a surgir na 
internet como editores de textos e 
planilhas, programas de edição de 
imagem, editores de áudio e vídeo, entre 
outros.
 
 
WEB 2.0
 FOLKSONOMIA usuários 
classificam suas informações 
pela inserção de rótulos (tags) , o 
que permite recuperá-las de 
forma mais rápida no futuro.
 
 
Trabalho
 Pesquisar serviços que mais assemelham 
com as novas características da WEB 2.0, 
justificando o porque o serviço atende a 
característica.
• Colaboração
• Social
• Conteúdo
• Simplicidade
• Plataforma
• Folksonomia
 
XHTML
 É a sigla em inglês para EXtensible 
HyperText Markup Language que 
em tradução livre resulta em 
Linguagem Extensível para 
Marcação de Hipertexto, uma 
aplicação XML, escrita para 
substituir o HTML e nada mais é do 
que uma HTML "pura, clara e 
limpa".
Linguagem HTML 
(Hypertext Markup Language)
 Características
• Interpretada pelo navegador
• Não linearidade da informação
• Formatação do texto podendo ser interpretável por 
todo e qualquer navegador ( padrão do W3C)
todas as tags devem ser escritas em letras minúsculas; 
as tags devem estar convenientemente aninhadas; 
os documentos devem ser bem formados; 
o uso de tags de fechamento é obrigatório; 
elementos vazios devem ser fechados; 
sintaxe para atributos.
Linguagem HTML - Estrutura
Cada elemento é chamado de tag
<tag> </tag> - abertura e 
fechamento 
<tag> - sem elementos adicionais
Linguagem HTML - Estrutura
<tag atributo=“valor”> 
XXXX</tag>
Exemplo:
<font size=“2” color=“red”> Texto 
que sofrerá alterações </font>
Linguagem HTML - Documento HTML
<html>
<head></head>
<body>
</body>
</html>
<html> Define o início de um 
documento HTML ao 
navegador web.
Linguagem HTML - Documento HTML
<html>
<head></head>
<body>
</body>
</html>
<head> Define o cabeçalho do 
documento. Área onde são 
inseridas chamadas Javascript, 
CSS, tags META,...
Linguagem HTML - Documento HTML
<html>
<head></head>
<body>
</body>
</html>
<body> A partir desta tag até 
o fechamento da mesma, 
todos os elementos aqui 
descritos serão apresentados 
como conteúdos na página em 
seu navegador.
Linguagem HTML - Documento HTML
<html>
<head>
<title>Aula de Tecnologias Web</title>
</head>
<body></body></html>
Linguagem HTML - Documento HTML
Tags de Corpo <body> : Comentário
<!- TEXTO COMENTADO - >
<html><head><title>Aula de Tecnologias 
Web</title>
</head>
<body>
<!- Inicio da montagem do Menu -> 
XXX
XXX
XXX
<!- Fim da montagem do Menu ->
</body>
</html>
Linguagem HTML - Documento HTML
Primeiro Exemplo:
<html><head><title>Aula de Tecnologias Web</title>
</head>
<body>
<p align=“center”> Olá ! Minha primeira 
página</p>
</body>
</html>
Linguagem HTML - Documento HTML
DICAS:
•
 Atribua nomes de arquivos que descrevam a 
funcionalidade do documento
•
 Utilize comentários 
-> Ajudam outros programadores a entenderem a marcação
•
 Indentar elementos aninhados 
-> Promove a legibilidade do documento
Linguagem HTML - Documento HTML
Erros comuns:
•
 Não incluir os valores de atributos entre aspas 
simples ou dupla (Erro de Sintaxe)
<html>
<head>
<title></head></title>
<body> 
</body>
</html>
•
 O XHTML não permite 
TAGS superpostas
 
XHTML
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
•
 <head>
•
 <meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />
•
 <title>Untitled Document</title>
•
 </head>
•
 <body>
•
 </body>
• </html>
 
XHTML Tag´s 
• <p> - Parágrafo
• <br/> - Saltar linha
• <h> - cabeçalho
• <b> - Negrito
• <i> - Itálico
• <s> - Tachado
• <u> - Sublinhado
• <img> - Imagem
• <a> - hyperlink
 
XHTML Tag´s 
• <p> - Parágrafo
• <p align=“opção”>Texto</p>
• Left
•
 Right
•
 Center
•
 Justify
 
XHTML Tag´s 
• <br /> - Saltar linha
• <b>Negrito</b>
• <i>Itálico</i>
• <s>Tachado</s>
• <u>Sublinhado</u>
 
XHTML Tag´s 
• <h?> - Cabeçalho 
•
 ? 1 a 6 sendo o 1 Maior Fonte e o 6 
menor fonte
• <h1 align=“opção”>Texto</p>
• Left
•
 Right
•
 Center
•
 Justify
 
XHTML Tag´s 
• <img> - Imagem
• <img 
src="file:///Z|/wwwroot/intranet/image
s/logo.gif" height="" width="" 
alt="Texto explicativo" />
 
XHTML Tag´s 
• <a> -Link
• <a href="http://wwww.w3.br" 
target="_blank">W3C Escritório 
Brasil</a>
 
Exemplo de uma página
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
• <title>Tags HTML</title>
• </head>
• <body>
• <p align="center">
• <s>Exemplo da tag &lt;s&gt; </s> <br />
• <u>Exemplo da tag &lt;u&gt; </u> <br />
• <b>Exemplo da tag &lt;b&gt; </b> <br />
• <i>Exemplo da tag &lt;i&gt; </i> <br />
• <h1> Exemplo da tag &lt;h1&gt; </h1> <br />
• <img src="logo.gif" height="" width="" alt="Texto explicativo" /><br /><br />
• <a href="http://www.w3c.br" target="_blank">W3C Escritório Brasil</a><br />
• </p>
•
• </body>
• </html>
 
Execução da página
• Exemplo da tag <s> 
Exemplo da tag <u> 
Exemplo da tag <b> 
Exemplo da tag <i> 
– Exemplo da tag <h1> 
•
W3C Escritório Brasil
 
Caracteres especiais
 
Caracteres especiais
 
Tabela
• <table align="center" 
• bgcolor="#33CCFF" 
• border="1" 
• width="40%">
• <caption>Título da tabela</caption>
• <thead>
• <tr>
• <th>Coluna 1</th>
• <th>Coluna 2</th>
• <th>Coluna 3</th>
• <th>Coluna 4</th>
• </tr>
• </thead>
•
 
Tabela
• <tfoot>
• <tr>
• <th>Rodapé Coluna 1</th>
• <th>Rodapé Coluna 2</th>
• <th>Rodapé Coluna 3</th>
• <th>Rodapé Coluna 4</th>
• </tr>
• </tfoot>
• <tbody>
• <tr>
• <td>Dado da coluna 1</td>
• <td>Dado da coluna 2</td>
• <td>Dado da coluna 3</td>
• <td>Dado da coluna 4</td>
• </tr>
• </tbody>
• </table>
•
 
Tabela Exemplo
 
Lista ordenada
• <ol type="1">
• <li type="1">Linha 1</li>• <li type="1">Linha 2</li>
• <li type="1">Linha 3</li>
• </ol>
• <ol type="a">
• <li>Linha 1</li>
• <li>Linha 2</li>
• <li>Linha 3</li>
• </ol>
• <ol type="i">
• <li>Linha 1</li>
• <li>Linha 2</li>
• <li>Linha 3</li>
• </ol>
 
Frames
• Consiste na divisão da janela do navegador em quadros. 
Cada quadro criado possui a autonomia de exibir uma página 
em HTML independente, possibilitando a visualização 
simultânea de páginas, diferenciando-se do layout utilizado 
anteriormente, por permitir apenas a visualização de uma única 
página no navegador.
• Utilizando um layout com frames, podemos dividir a janela 
do navegador em quadros postados horizontalmente (em 
linhas) ou verticalmente (em colunas).
• Um frame, pode ainda suportar a implementação de outros 
frames, caso haja a necessidade de subdividi-lo em áreas 
menores, mas na prática, esta situação não é tão comum.
 
Frames
 
Frames
• <frameset cols="80,*" frameborder="no" border="0" 
framespacing="0">
•
 <frame src="esquerda.html" 
•
 name="leftFrame" 
•
 scrolling="No" 
•
 noresize="noresize" 
•
 id="leftFrame" 
•
 title="leftFrame" />
•
 <frame src="exemplo.html" 
•
 name="mainFrame" 
•
 id="mainFrame" 
•
 title="mainFrame" />
• </frameset>
• <noframes>
• <body>
• </body>
• </noframes>
 
Formulários
•
 O uso de formulários tem por objetivo 
possibilitar a colheita de informações através 
de controles, podendo posteriormente gravar 
estas informações em um banco de dados, 
salvá-las em arquivos de texto, apenas 
processá-las a fim de retornar alguma 
informação para o usuário, enviá-las para um 
endereço de e-mail etc.
• 
• A interação com os visitantes do site é 
promovida através do uso de controles, 
dando-lhes a oportunidade de digitar uma 
informação em uma caixa de texto, selecionar 
um item em uma lista Drop Down, marcar 
opções através de caixas de verificação, 
confirmar enviando as informações para o 
servidor ou desistir limpando o formulário 
através de botões específicos etc.
 
Formulários
• <form name="form1" 
•
 method="post "
•
 action="cgibin/mail.cgi">
 
•
 (controles do formulário)
• </form>
•
 CGI (Common Gateway Interface – 
protocolo utilizado em programas 
executáveis para processar informações 
enviadas ao servidor) 
 
Formulários
•
 A Classe input 
•
 Usando a classe input, podemos 
criar os seguintes controles:
•
 Caixa de texto (text).
Controle oculto (hidden). 
Caixa de verificação (checkbox). 
Caixa de opção (radio). 
Botões (button, submit e reset). 
 
Formulários
• Caixa de texto 
•
 Este controle permite a entrada de dados, 
digitados em uma única linha e deve ser 
usado quando forem solicitadas informações 
como: nome, endereço, bairro, cidade, CEP, 
telefone, e-mail etc.
•
 
•
 <input type="text" 
•
 name="curso" 
•
 value=“Fundamentos WEB" 
•
 size="40" 
•
 maxlength="50"> 
 
Formulários
•
 Controle oculto 
•
 Inserimos um controle oculto no 
formulário, para que determinadas 
informações sejam enviadas ao servidor, 
sem que o usuário possa visualizá-las na 
apresentação da página.
•
 <input type="hidden" 
•
 name="descrição" 
•
 value="cadastro para receber 
novidades sobre o site">
 
Formulários
•
 Controle Senha 
•
 Inserimos um controle senha no 
formulário, para que determinadas 
informações quando digitadas não 
sejam exibidas.
•
 <input type=“password" 
•
 name="descrição" 
•
 value="cadastro para receber 
novidades sobre o site">
 
Formulário
• Caixa de verificação 
•
 Uma caixa de verificação é um controle 
lógico, que apresenta sempre dois estados (marcado ou desmarcado), onde o usuário 
deve decidir se aceita ou não, uma condição 
que lhe foi proposta. Na maioria das vezes, 
este tipo de controle é usado diante de 
situações que exprimam um sentido de 
questionamento.
• <input type="checkbox" 
•
 name="informações" 
•
 value="sim" 
•
 checked> 
 
Formulário
• Caixa de opção 
• Uma caixa de opção é um controle que disponibiliza para o usuário, 
várias opções e destas, o mesmo poderá selecionar apenas uma.
• Regras aplicadas na criação de uma caixa de opção:
• Cada nova opção adicionada deve ser antecedida pela tag usada na 
criação deste controle.
• Por uma questão de acessibilidade, as opções devem estar dispostas 
verticalmente (uma por linha), para que os programas leitores de tela 
possam identificá-las individualmente. Para tanto, ao final da descrição de 
cada opção, utilize a tag (<br> - quebra de linha).
• Todas as opções pertencentes a uma mesma caixa de opção, devem 
receber a mesma descrição no atributo (name), para que sejam agrupadas 
em um único controle. 
• <input type="radio" name="classificação" value="Regular" checked> 
Regular
 
Formulário
• A classe textarea 
• A classe textarea permite a criação de um único tipo 
de controle, conhecido na linguagem HTML, pelo próprio 
nome da classe.
• O controle textarea, difere-se do controle caixa de 
texto "text" da classe input, por permitir ao usuário a 
possibilidade de digitar uma informação que abranja 
mais de uma linha de texto. Este tipo de controle é 
comumente utilizado em situações que exijam um 
espaço maior para a entrada de dados, como campos 
para observações, comentários, opiniões etc.
• <textarea name="nome" 
• rows="n_linhas" 
• cols="n_colunas"> valor_inicial </textarea> 
 
Formulário
• A classe select 
•
 Usando a classe select, podemos inserir em nosso 
formulário eletrônico, controles como listas e caixas 
combinadas.
• 
• O controle lista, possibilita a apresentação dos seus itens 
em grupos e com quantidades preestabelecidas. Por 
apresentar esta característica de visualização, é ideal para 
permitirmos ao usuário caso seja necessário, a seleção de 
um ou mais itens, entre os disponíveis neste controle.
• 
• O controle caixa combinada possibilita inicialmente a 
visualização apenas do item que foi previamente 
selecionado. Para ter acesso aos demais itens é necessário 
abrir a caixa combinada para a seleção do item desejado.
 
Formulário
•
 A classe select 
•
 
•
 <select name="grau_instrucao" 
•
 size="3" 
•
 multiple="multiple">
•
 <option value="01">Primeiro Grau</option>
•
 <option value="02">Segundo Grau</option>
•
 <option value="03">Superior 
incompleto</option>
•
 <option value="04">Superior 
Completo</option>
•
 <option value="05">Mestrado</option>
•
 <option value="06">Doutorado</option>
•
 </select>
 
Formulários
• Botões 
• O botão é um tipo de controle utilizado para executar uma 
determinada ação, com os dados inseridos nos demais controles do 
formulário. Na classe input existe três tipos de botões disponíveis. 
São eles:
• Button: Este tipo de botão não envia automaticamente as 
informações do formulário para o servidor. É comumente utilizado 
quando o processamento das informações é realizado no lado cliente, 
através das linguagens de script locais, embutidas nos próprios 
navegadores como: JavaScript e VBScript.
• Submit: Este tipo de botão ao ser pressionado, envia 
automaticamente todas as informações inseridas no formulário para 
que estas possam ser processadas por uma aplicação no servidor.
• Reset: Este tipo de botão ao ser pressionado, limpa todos os 
campos existentes no formulário, resgatando as suas definições 
iniciais.
• <input type="submit" name="enviar" value="Enviar">
<input type="reset" name="limpar" value="Limpar">
 
• http://www.csszengarden.com/ 
 
CSS
• Apresentação
• Porque utilizar CSS
• Web Standards
• Sintaxe do CSS
• Como usar o CSS
• Exemplos de uso
• Tutoriais
 
Apresentação
• CSS éa sigla em inglês para Cascading 
Style Sheet que em português foi 
traduzido para Folha de Estilo em 
Cascata e é definida como: 
– Folha de estilo em cascata é um mecanismo 
simples para adicionar estilos (p.ex., fontes, 
cores, espaçamentos) aos documentos Web. 
 
Apresentação
• CSS é uma linguagem para estilos que 
define o layout de documentos HTML. 
Por exemplo, CSS controla fontes, 
cores, margens, linhas, alturas, 
larguras, imagens de fundo, etc.
 
Porque utilizar CSS
• A grande vantagem do uso de CSS é a de 
separar a marcação HTML, da apresentação do 
site. Em outras palavras, vale dizer que o HTML 
destina-se unicamente a estruturar e marcar o 
conteúdo, ficando por conta das CSS toda a 
responsabilidade pelo visual do documento.
• HTML marca e estrutura textos, cabeçalhos, 
parágrafos, links, botões, formulários, imagens e 
demais elementos da página e CSS define 
cores, posicionamento na tela, estilos de linhas, 
bordas e tudo o mais relacionado à 
apresentação. 
 
Porque utilizar CSS
• Controle do layout de vários documentos a partir 
de uma simples folha de estilos;
• Maior precisão no controle do layout;
• Aplicação de diferentes layouts para servir 
diferentes mídias (tela, impressora, etc.);
 
Porque utilizar CSS
• Exemplo: Mudar a cor de todos os títulos do site 
de verde para vermelho.
• Mas, são 180 páginas no site! E os títulos são 
tags de cabeçalho deste tipo:
• <h1>
• <font color="#00FF00">Título</font>
• </h1> 
• Utilizando CSS você muda a cor de todos os 
cabeçalhos h1 em todo o site em questão de 
segundos. Mesmo que o site tenha 180 ou 1800 
páginas.
 
Porque utilizar CSS
• Projetar um site navegável tanto em 
monitor de 1280x1024 quanto em uma 
telinha de 320x240 de um PDA, com 
utilização da mesma marcação é 
fantástico e possível. Basta projetar de 
acordo com as Web Standards 
entregando às CSS a missão de 
acomodar o conteúdo na tela! 
 
Web Standards
• Web Standards pode ser traduzido como 
Padrões Web e tem por objetivo a criação de uma 
Web universal.
• Web Standards é um conjunto de normas, 
diretrizes, recomendações, notas, artigos, tutoriais 
e afins de caráter técnico, produzidos pelo W3C e 
destinados a orientar fabricantes, desenvolvedores 
e projetistas para o uso de práticas que 
possibilitem a criação de uma Web acessível a 
todos, independentemente dos dispositivos usados 
ou de suas necessidades especiais.
 
Sintaxe do CSS
• Muitas das propriedades usadas nas Cascading 
Style Sheets (CSS) são semelhantes ao HTML. 
• Assim, se está familiarizado com o uso de HTML 
para layout irá reconhecer muitos dos códigos 
que se usam no CSS.
 
Sintaxe do CSS
• Usando HTML podemos fazer assim:
– <body bgcolor="#FF0000"> 
• Usando CSS:
– body {background-color: #FF0000;} 
 
Sintaxe do CSS
DeclaraçãoDeclaração
 
Como usar o CSS
• O CSS pode-se aplicar a um documento de 
três formas distintas.:
• In-line (o atributo style):
• <html> 
• <head>
•
 <title>Exemplo<title>
•
 </head>
•
 <body style="background-color: #FF0000;"> 
• <p>Esta é uma página com fundo vermelho</p>
•
 </body> 
• </html> 
 
Como usar o CSS
• Interno (a tag style):
• <html> 
• <head> 
• <title>Exemplo</title> 
• <style type="text/css"> 
• body {background-color: #FF0000;} 
• </style> 
• </head> 
• <body> 
• <p>Esta é uma página com fundo vermelho</p>
•
 </body> 
• </html> 
 
Como usar o CSS
• Externo (link para uma folha de estilos)
–O método recomendado é o de colocar um 
link para uma folha de estilos externa. 
– Uma folha de estilos externa é um simples 
arquivo de texto com a extensão .css.
 
Como usar o CSS
• Externo(link para uma folha de estilos)
• <html> 
• <head>
•
 <title>Meu documento</title> 
• <link rel="stylesheet" type="text/css" 
href="style/style.css" /> 
• </head> 
• <body> 
• ...
 
Exemplo de uso
• teste.html
• <html> 
• <head>
•
 <title>documento de teste de CSS</title>
•
 <link rel="stylesheet" type="text/css" 
href="estilo.css" /> 
• </head> 
• <body> 
•
 <h1>Folha de estilos</h1> 
• </body> 
• </html> 
 
Exemplo de uso
• estilo.css
• /* Comentário …*/
• body { 
• background-color: #FF0000;
•
 } 
 
Exemplo de uso
 
Para Validar CSS
http://jigsaw.w3.org/css-validator/
http://jigsaw.w3.org/css-validator/
 
Tutoriais
• http://pt-br.html.net/tutorials/css/
• http://maujor.com/index.php
• http://www.codigofonte.com/css/
• http://www.criarweb.com/manual/css/
 
Agrupamento
• h1 {color: red;}
• h2 {color: red;}
• p {color: red;}
• h1, h2, p {color:red}
 
Classe
•
 .diferente {color:black;}
• p {color:blue;}
• p.cor-um {color:red;}
• p.cor-dois {color:black;}
• Uso em xhtml
• <h3 class=“diferente”>Cabeçalho classe</h2>
 
ID - Identificador
• O atributo id e o seu nome deve ser único no 
documento;
• Identifica apenas um determinado elemento 
no documento;
• #principal {color:black;}
• Em xhtml
• <div id=“principal”>Elemento DIV</div>
 
Border
•
 h1{ border-top:2px;
•
 border-left:2px;
•
 border-right:2px;
•
 border-bottom:3px;}
 
Background
• body { background-color: #FFCC66; 
background-image: url("butterfly.gif"); 
background-repeat: no-repeat/repeat-x/repeat-
y/repeat; 
• background-attachment: fixed/scroll ; 
• background-position: right bottom; } 
• h1 { color: #990000; 
• background-color: #FC9804; } 
 
Font
• p { font-style: italic; 
•
 font-weight: bold; 
•
 font-size: 30px/pt /%/em ; 
•
 font-family: arial, sans-serif; 
•
 text-decoration: underline;} 
• Text-Align: center; <left, right e justify>
• Vertical-align: middle; <top e bottom>
 
Link
• a:link { color: blue; text-decoration:none; }
• a:visited { color: purple; text-
decoration:none; } 
• a:active { background-color: yellow; text-
decoration:none; } 
• a:hover {text-transform: uppercase; 
•
 font-weight:bold;color:blue; 
• background-color:yellow; text-
decoration:none; } 
 
Link
• Recomedação:
• a:link, a:visited {text-
decoration=none;}
• a:hover, a.active {text-
decoration=underline;}
 
Posicionamento
 
Posicionamento
• .imgpos { position:static;absolute;relative;
•
 Left:50%;
•
 top:50%; 
• margin-left:110px;
• margin-top:40px; } 
 
Posicionamento
•
 #dog1 { position:relative; left: 350px; 
bottom: 150px; } 
•
 #dog2 { position:relative; left: 150px; 
bottom: 500px; } 
•
 
•
 #dog3 { position:relative; left: 50px; 
bottom: 700px; } 
 
Flutuar
•
 #column1 { float:left; width: 33%; }
•
 #column2 { float:left; width: 33%; } 
•
 #column3 { float:left; width: 33%; } 
 
Flutuar
• Exemplo: HTML
• <div id="main">[...conteúdo ...]</div>
• <div id="nav">[...conteúdo...]</div> 
• <div id="links">[...conteúdo...]</div> 
•
 
• Exemplo CSS
•
 .main { display:inline; width:50%; } 
•
 .nav { float:left; width:20%; } 
•
 .links { float:left; width:20%; } 
 
Z-index
• #posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:0;}
• #posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:25px;}
• #posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:50px;}
 
z-index
• <body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
• </body>
 
Z-index
• #posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:0;}
• #posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:25px;
z-index:4
• }
• #posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:50px;}
 
Exemplo
 
 
• * { margin:0; 
•
 padding:0; } 
• html, body {height:100%;} 
• .geral { min-height:100%;
•
 position:relative; width:800px; } 
 
• .footer {
• position:absolute;
• bottom:0;
• width:100%;
• }
•
 
• .content {overflow:hidden;}
• .aside {width:200px;}• .fleft {float:left;}
• .fright {float:right;}
 
• <html 
xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="en" lang="en">
• <head>
• <meta http-equiv="Content-Type" 
content="text/html; charset=utf-8"/>
•
 
• <title>Tableless.com.br</title>
• </head>
 
• <body>
•
 
• <div class="geral">
• <div class="header">
• HEADER
• </div>
• <div class="aside fleft">
• ESQUERDA
• </div>
• <div class="aside fright">
• DIREITA
• </div>
 
• <div class="content">
• <p>
• Lorem ipsum dolor sit amet, 
• </p>
• <p>
• Duis id metus enim, sed dignissim 
• </p>
• </div>
• <div class="footer">
• FOOTER
• </div>
• </div>
•
 
• </body>
• </html>
 
Exercício