ALL IN ONE

Prévia do material em texto

- -1
TECNOLOGIAS WEB
APRESENTAÇÃO DO AMBIENTE 
DISTRIBUÍDO DA INTERNET
- -2
Olá!
Olá!
Seja Bem-vindo (a) à disciplina .Tecnologias Web
O estudo desta disciplina abrange os principais aspectos das novas tecnologias associadas à Internet, bem como
suas aplicações.
Abordaremos a evolução da Internet e suas aplicações, trazendo para você o conhecimento dos principais
protocolos e serviços utilizados. Falaremos, também, a respeito de segurança de informações, além de
apresentarmos na prática como construir páginas estáticas para Web utilizando linguagem de marcação e folhas
de estilos.
Nesta aula, iremos aprender como surgiu a Internet e como um projeto militar revolucionou o mundo civil.
Veremos, ainda, quais foram as primeiras redes sociais e como tudo o que temos hoje na Web é reflexo do
passado.
Vamos começar?
Ao final desta aula, você será capaz de:
1. Definir as funcionalidades da Internet. 
2. Compreender os conceitos básicos de Web descrevendo como disponibilizar documentos de maneira
independente da localização.
3. Conhecer a história da Internet e seus personagens.
4. Conceitos de hipertexto.
5. Compreender os conceitos de cliente-servidor – navegadores e servidores da Web.
1 Onde tudo começou
O termo Internet, muito utilizado nos dias de hoje, traz uma história bastante rica em personagens e tecnologias.
Essa história começou há mais de 40 anos atrás quando o departamento de defesa americano, em plena Guerra
Fria, preocupado com um possível ataque russo a sua rede de dados, lançou, em setembro de 1969, o embrião da
Internet.
A preocupação do Departamento americano com um possível ataque russo não era exagero, pois os Sistemas de
Informação eram centralizados e corriam riscos de segurança, uma vez que bastaria acabar com o nó central
para o restante da rede parar.
- -3
Através de um projeto de segurança, todas as redes de comunicação de dados militares que estavam
centralizadas em um ponto poderiam estar a salvo em uma teia e, caso um nó da rede sofresse um ataque, as
informações poderiam continuar seguindo por outra rota.
Durante a Guerra Fria, algumas Universidades e Centros de Pesquisa, tais como Stanford Research Institute
(SRI), UCLA, UC - Santa Barbara (UCSB) e Utah aderiram ao projeto de segurança do governo americano sendo os
primeiros nós da futura super rede.
2 ARPA
Enquanto russos e americanos disputavam pela ida do homem à Lua, o projeto da rede de segurança do governo
americano corria paralelamente em sigilo sendo financiado pela Advanced Research Projects Agency (ARPA).
ARPA é um órgão responsável pelo desenvolvimento de pesquisas científicas e tecnológico com cunho militar
dentro do governo americano. Com a ARPA responsável pelo projeto de uma super rede, o projeto foi batizado
de ARPANET.
Isso mesmo, a Internet que conhecemos hoje teve este nome anteriormente.
3 Requisitos da Arpanet - A origem do sucessor
Os pesquisadores trabalhavam para desenvolver uma rede com os seguintes requisitos:
• Utilizar os serviços de hardware distribuídos.
• Ser recuperável à distância.
•
•
- -4
• Utilizar os serviços de hardware distribuídos.
• Ser recuperável à distância.
• Utilizar bancos de dados remotamente.
• Compartilhar sub-rotinas de softwares e pacotes não disponíveis nos computadores dos usuários devido 
à incompatibilidade de hardware ou língua.
A essa altura você já deve estar ligando as coisas. Com esses 4 requisitos, fica fácil entender o sucesso da Internet
nos dias de hoje.
Vamos ver como os 4 requisitos da ARPANET funcionam na prática:
Requisito 1
Quando você navega pela Internet e digita o nome de um site no navegador do seu
computador, existem serviços que são acionados em diversos servidores (máquinas que
realizam tarefas específicas em grande velocidade e capacidade) para lhe entregar o
conteúdo de uma página.
Pois bem, este é o requisito 1. São servidores, em vários locais do mundo, que trabalham
para entregar uma informação à você.
Requisito 2
Agora, imagine que você necessite recuperar dados remotamente em uma máquina ou até
mesmo recuperar seus serviços.
Esta é uma exigência do requisito 2.
Requisito 3
Imagine aquele dado tão importante armazenado em seu banco de dados da empresa e que
você necessita acessar de uma filial através da Internet.
O requisito 3 cuida disso.
Requisito 4
Faltou algo em seu computador para rodar um sistema?
O requisito 4 cuida disso. Quando você deseja fazer algo através da Internet, ficamos
despreocupados com a compatibilidade do hardware do servidor com nosso computador.
Imagine ter que instalar todos os programas que rodam nos servidores para poder ser
cliente de seus serviços. É, hoje não faz sentido, mas, naquela época, isso virou requisito
para a ARPANET surgir.
Bem, tudo isso precisava de um protocolo de comunicação para funcionar. Foi ai que surgiu o TCP/IP
(Transmission Control Protocol / Internet Protocol) que possibilitaria a comunicação de duas ou mais máquinas
endereçadas por um número único, o endereço IP (Endereço que identifica uma máquina ou hardware em uma
rede com padrão TCP/IP). Hoje temos padrão IPv4 e IPv6 que trabalham com endereços de 32 bits e 128 bits
respectivamente.
•
•
•
•
- -5
Como você viu, o projeto do governo americano foi tão bom, mas tão bom, que não podia ficar “dentro do
quartel”.
Os acadêmicos começaram a criar inúmeras soluções para trocas de dados e informações utilizando esta
tecnologia.
E, até hoje, isso vem alcançando ganhos inimagináveis para aquela época.
Em 1983 a ARPANET foi dividida, ficando a parte militar com o nome de MILNET e a parte civil manteve o
mesmo nome ARPANET que foi modificado para Internet em 1995.
4 Primeiras redes sociais
As primeiras redes virtuais foram: ARPANET, BITNET, USENET e FIDONET.
Elas favoreceram, durante os anos 70, um grande impulso no trabalho científico, pois, pela primeira vez, a
tecnologia permitiria trocar informações, dados e arquivos de maneira rápida entre pessoas a grandes distâncias.
Mas o que seriam estas redes?
4.1 BITNET
A Rede foi criada para envio e recebimentos de e-mails entre Instituições de Pesquisas no mundo todo.
Em 1988, o LNCC (Laboratório Nacional de Computação Científica) no Rio de Janeiro se conectou via link
(conexão de dados) de 64kbps à Universidade de Maryland nos Estados Unidos.
Em 1989, chegou a vez do NCE (Núcleo de Computação Eletrônica) da UFRJ se ligar a UCLA, também nos Estados
Unidos.
Várias Instituições de Pesquisa e Universidades foram se interligando por esta rede que só veio a perder força
com a popularização do e-mail via Internet.
Cabe ressaltar que esta rede era fechada, isto é, somente aquelas Instituições de Pesquisa e Educação filiadas
poderiam se falar a princípio.
4.2 USENET
É um acrônimo de Users Network (Rede de Usuários). Consistia em um sistema global de discussão na Internet
derivado das redes (Acrônimo de UNIX To UNIX Copy Protocol. É tanto um protocolo quanto umUUCP
programa).
Este sistema é um dos mais antigos de comunicação entre redes. Ele possibilita a troca de mensagens e opiniões
entre usuários interessados no mesmo tema. Como nos Fóruns de Discussão que existem hoje em dia.
- -6
Começou a funcionar em 1980. Na época, era chamada de ARPANET para pobres. Ela empregava UUCP para
utilização de e-mail e transferência de dados, formando, assim, uma solução denominada .grupos de notícias
Qualquer usuário inscrito em um grupo de notícias poderia enviar uma mensagem para seu grupo.
A deu origem ao que conhecemos nos dias de hoje como listas de discussão e fóruns.USENET
Por essa você não esperava?!
4.3 FIDONET
Foi fundada em 1984.
Era a rede mundial de computadores utilizada para comunicação com os BBS (Bulletin Board System).
Muito popular no início dos anos 90, serviu de inspiração dos recursos e formas de utilização que temos hoje na
Internet. Os BBS eram verdadeiros oásis digitais trazendo diversos recursos como em um portal de Internet.
Através dos BBS, um usuário poderiafazer uma conexão via modem e linha telefônica, acessando um sistema,
utilizando um programa de terminal, utilizando a FIDONET. Muitos BBS ofereciam jogos on-line, envio e acesso a
arquivos, leituras de notícias, envio e recebimento de e-mails e mensagens para grupos de discussão e salas de
bate-papo. Tudo isso utilizando programas.
Na figura abaixo, você verá um BBS de SP que ficou no ar até 2007.
Figura 1 - BBS de SP
Durante as últimas décadas, houve um aumento expressivo no número de soluções tecnológicas que serviram de
base a tudo o que vemos.
- -7
5 Linha do Tempo
Vamos à linha do tempo para falar dessas tecnologias.
1969
ARPANET
1971
Criação do símbolo @ Envio do primeiro e-mail por Ray Tomlison utilizando a ARPANET.
1973
Robert Metcalfe planejou o método de conexão de rede Ethernet na Xerox Palo Alto Research Center.
1976
A Rainha do Reino Unido – Elisabeth II envia seu primeiro e-mail.
1979
Criado o primeiro worm com o objetivo de buscar “tempo livre” nas máquinas. Isso se transformaria em uma
falha de segurança no futuro. Também no mesmo ano, a USENET é estabelecida e o primeiro jogo (Dungeons) em
rede foi criado pelos estudantes Richard Bartle e Roy Trubshaw da Universidade de Essex.
1980
O protocolo TCP/IP vira padrão para comunicação de redes na ARPANET.
1983
ARPANET se divide em ARPANET e MILNET utilizando o protocolo TCP/IP.
1985
O primeiro BBS foi criado por Stewart Brand e Larry Brilliant para construir uma comunidade “virtual” de
usuários de computadores de baixo custo.
1988
- -8
1988
Morris lançou um worm na ARPANET que atingiu 6000 das 60000 máquinas da rede. Morris foi condenado a 3
anos de liberdade condicional, 400 horas de serviços comunitários e uma multa de 10.050 dólares.
1990
Nascia a World Wide Web – WWW – quando Tim Berners-Lee, pesquisador de CERN, criou a linguagem HTML
(Hyper Text Markup Language). A WWW ganhava o apelido de Teia.
6 Servidores registrados na Internet
O gráfico abaixo apresenta a evolução do número de máquinas registradas na Internet desde 1994 até hoje.
Estamos na casa dos 700 milhões de servidores espalhados pelo mundo, atendendo a toda sorte de solicitações e
demandas. Com novas tecnologias e dispositivos sendo adicionados à grande rede a cada dia, estamos certos de
que esta curva será cada vez mais crescente.
Antes, as informações utilizavam telefone, telex ou carta para circular.
Imagine quanto tempo demorava para uma simples carta chegar até o outro lado do mundo?
Imagine que, para encaminhar um documento a outra ponta, deveria ter um equipamento semelhante para
receber uma imagem do mesmo! Quanto trabalho, não é?
Imagine como seria sem a Internet? É, fica difícil imaginar, não é?!
- -9
O que vem na próxima aula
Na próxima aula, você vai estudar:
• como os principais protocolos de rede associados aos serviços de Internet funcionam.
CONCLUSÃO
Nesta aula, você:
• Aprendeu como a Internet foi criada.
• Conheceu quais os requisitos necessários para a criação de uma rede desta complexidade.
• Conheceu a origem das redes sociais de hoje.
•
•
•
•
- -1
TECNOLOGIAS WEB
APRESENTAÇÃO DO AMBIENTE 
DISTRIBUÍDO DA INTERNET
- -2
Olá!
Nesta aula, iremos aprender o que é protocolo e como eles se relacionam com o funcionamento da Internet. 
Veremos, ainda, as primeiras aplicações dos protocolos na Internet.
Ao final desta aula, você será capaz de:
1. Definir as funcionalidades dos principais protocolos de Internet.
2. Compreender os conceitos básicos de protocolo.
3. Conhecer mais a respeito do uso de protocolos na Internet.
1 O que é protocolo?
Para nos comunicarmos tanto por linguagem escrita como falada, estabelecemos, a priori, um conjunto de regras
capazes de serem entendidas entre aqueles que participam da conversa.
No nosso caso, estabelecemos que a nossa língua escrita protocolar é a Língua Portuguesa. Não adianta tentar
me comunicar com alguém que não saiba ler em Português. Desta forma, todos aqueles que sabem ler em
Português poderão ler este texto.
Então, podemos entender que o protocolo é uma padronização que permite a comunicação entre
processos.
Para nos comunicarmos, é necessário termos 2 atores. Aquele que codifica a mensagem chamaremos de emissor
e aquele que decodifica, o receptor. Desta forma, para estabelecermos uma conversa, temos o emissor de um
lado, o receptor do outro e o meio de comunicação, que pode ser uma conversa ao telefone, por exemplo. Um
emissor também pode ser o receptor quando ele receber o retorno (feedback) da mensagem enviada ou ainda
uma nova mensagem.
- -3
Durante o processo de emissão e recepção, pode haver um ruído na transmissão, isto é, nem tudo aquilo que foi
enviado foi recebido seja por qualquer motivo. Para tentar minimizar este problema, pode haver uma rotina de
verificação que estabeleça uma validação entre o que foi codificado e o que foi recebido. Esta rotina de validação
é normalmente implementada no protocolo. Vale lembrar que nem todos os protocolos implementam esta
validação.
Conforme vimos na Aula 1 na especificação do protocolo TCP/IP, um dos requisitos é a verificação da integridade
dos pacotes de dados transmitidos. Imagine que se deseje enviar um arquivo com um texto. A máquina de quem
o está enviando vai codificá-lo, quebrá-lo em pedaços (pacotes) e encaminhar o tamanho e a sequência dos
pacotes como referência para a máquina de quem vai recebê-lo. Para decodificar esse arquivo recebido, a
máquina com o protocolo TCP/IP saberá qual o tamanho original dele e, se no meio da transmissão algo der
errado, saberá que o mesmo está incompleto.
- -4
A verificação de integridade de transmissão e recebimento conferida pelo protocolo TCP/IP trouxe para a
Internet um ganho expressivo, pois, através destes, outros surgiram como veremos a seguir.
2 Como isso funciona?
O fluxo resumido do protocolo TCP/IP é o seguinte: o aplicativo cliente se comunica com um servidor através do
endereço IP, enviando ao servidor uma informação que passa pelo meio lógico. Na outra ponta, existe um outro
servidor que, ao receber essa informação, gera uma ação que pode ser despachá-la para outro servidor ou
armazená-la para que um cliente possa buscá-la. O aplicativo cliente entra em contato com o servidor e resgata a
informação.
Veja na figura ao lado a imagem Este é o fluxo resumido para você ter uma ideia de como o protocolo TCP/IP se
relaciona com a camada de aplicação.
3 Correio eletrônico
Este serviço, também conhecido como serviço de e-mail, é um dos serviços mais utilizados pelos usuários da
Internet. São milhões de caixas postais espalhadas pelos servidores de correio eletrônico pelo mundo utilizando
os protocolos POP, IMAP e SMTP.
O serviço de correio eletrônico possui características bem semelhantes ao processo de entrega de
correspondência dos Correios. Imagine que você queira enviar uma carta até a sede de sua Universidade. Para
- -5
isso, é necessário que você preencha algumas informações tais como o nome e o endereço do destinatário, o
remetente e o CEP. No processamento de um correio eletrônico, isso se dá de forma semelhante. Temos que ter,
antes de mais nada, um endereço de e-mail, que corresponde ao nosso CEP pessoal, um endereço único no
mundo, capaz de nos identificar e o endereço do destinatário.
Muito provavelmente, você já deve ter ouvido falar em Gmail, Hotmail, Yahoo entre outros serviços de e-mail
gratuitos que vêm se popularizando nos últimos anos.
O Gmail é o primo caçula de todos que acabou tomando fermento e promete ser o mais atrativo dos serviços
deste tipo.
Antes de falarmos a respeito dos protocolos utilizados neste tipo de serviço, assista ao vídeo do Gmail que criou
um teatro para explicar o processo de envio e recebimento de uma mensagem de correio eletrônico.
Para o envio e recebimento de e-mails, utiliza-se os protocolos: SMTP, POP3, IMAP, FTP, HTTP.
3.1 SMTP
Para enviarmos um e-mail, temos que ter um software cliente configurado para trabalhar como protocolo SMTP,
que gerencia o envio de mensagens. Este protocolo opera na porta 25 e, ao receber uma mensagem, busca
identificar o endereço do servidor SMTP, indicado no e-mail do cliente através da chave MX do serviço de
resolução de nomes de domínios - DNS (Domain Name Server). Ao encontrar o servidor de correio do
destinatário, nosso servidor de SMTP entrega a mensagem para que o servidor SMTP do destinatário faça as
honras de armazená-la até que o destinatário resolva
Acompanhe a comunicação entre um servidor de e-mail e suas ações.
Em nosso exemplo, o diretor que possui o endereço de e-mail diretor@dominio.com.br encaminha para o
professor no endereço professor@prof.com.br uma mensagem.
Saiba mais
Sobre o Gmail: youtube.com/watch?v=qKAInP_tmHk.
- -6
3.2 POP3
Este protocolo permite a busca de e-mails no servidor de correio através da porta 110, baixando do servidor às
mensagens de e-mail para a máquina do cliente.
No exemplo do professor, ao acessar sua caixa postal utilizando o protocolo POP3, ele baixará para sua máquina
local o e-mail armazenado que lhe foi enviado pelo diretor.
Este protocolo não permite manipulações de mensagens no servidor, pois entende que você quer baixá-las para
sua máquina. Criar filtros on-line, pastas virtuais, isso utilizando o protocolo IMAP.
3.3 IMAP
Caso você não queira armazenar em sua máquina cada uma das mensagens que você recebe no seu dia a dia,
torna-se possível, pela porta 143 do servidor de correio, acessar o serviço de IMAP.
Os sites com Webmails (serviços de e-mail on-line) normalmente utilizam esta técnica. Seu e-mail fica
armazenado no servidor até que você queira apagá-lo, podendo criar pastas virtuais, sincronizá-las off-line,
aplicar filtros entre outros recursos interessantes.
Tanto o IMAP quanto o POP3 são utilizados para ler mensagens, não enviá-las.
3.4 FTP
O serviço de FTP (protocolo para transferência de arquivos ou file tronsfer arataca!) é um dos mais antigos em
uso na Internet. Seu intuito é exclusivamente lidar com a transferência de arquivos, tanto para envio, também
chamado de upload, quanto para descarga de arquivos, chamada comumente de download.
- -7
Existem vários programas clientes de FTP, inclusive alguns navegadores Web. A vantagem deste tipo de
protocolo é a especialização do serviço. Muitas pessoas utilizam o protocolo HTTP para download de arquivos,
embora essa não seja sua principal finalidade.
O protocolo FTP atende às solicitações nas portas padrão 20 e 21. Sendo que 20 é ftp-data e 21 ftp
Este protocolo pode ser usado para a transferência de qualquer tipo ou formato de arquivo.
3.5 HTTP
O protocolo HTTP é, depois do Serviço de Correio Eletrônico, o serviço de maior utilização em toda a Internet
pela versatilidade e por ter surgido junto com o desenvolvimento da Word Wide Web que utiliza este protocolo
para transferência de hipertexto. Daí o nome Hyper Text Transfer Protocol.
Este protocolo manipula como padrão arquivos escritos em HTML (Hypertext Markup Language) que podem ter
as extensões html ou htm que são interpretadas pelo servidor Web. Os mais conhecidos são Apache e Apache-
Tomcat, ambos gratuitos, e o IIS. Desses, o Apache é reconhecidamente o melhor em segurança e performance,
podendo rodar indistintamente em sistemas operacionais Linux, UNIX ou Windows.
Os programas clientes deste protocolo são chamados de navegadores Web ou web browsers (Firefox, Internet
Explorer, Opera, Safari entre outros).
Cada página visitada, também chamada de Home Page, está abrigada em um site que em português chama-se
sítio (local). Desta forma, para acessarmos uma página na internet, precisaremos de um endereço web chamado
URL.
- -8
4 Mas o que é URL?
Ou seja, URL é um Localizador de Recursos Universal.
Ah! É por isso que no seu navegador existe uma barra de endereços!
A composição deste endereço deve seguir a seguinte recomendação:
URL: protocolo://protocolo
Exemplo: http://www.google.com.br
Existe uma variação deste protocolo para sites mais seguros, onde devemos adicionar ao nome do protocolo a
letra s, de seguro.
Exemplo: https://www.google.com.br
Neste caso, o servidor Web, indica ao navegador web que o site é seguro, utilizando o protocolo Secury Sockets
Layer (SSL). Mais à frente abordaremos, na aula de segurança na Internet, mais informações a respeito.
Com o passar do tempo, os clientes Web, além do protocolo padrão, incorporaram outros protocolos, como
HTTPS, FTP e File.
Este protocolo é chamado de STATELESS.
Isto é, cada comando é executado de maneira independente, sem que se desconheça qual comando foi executado
anteriormente.
Esta é a principal razão da dificuldade em se desenvolver sites que reajam de forma inteligente à entrada do
usuário.
Desta forma, tecnologias como AJAX, Javascript, Java, Cookies, entre outras, apareceram para suprir esta
dificuldade.
As definições deste protocolo estão no endereço .www.w3.org/Protocols/rfc2616/rfc2616.html
http://www.google.com.br
https://www.google.com.br
www.w3.org/Protocols/rfc2616/rfc2616.html
- -9
Acompanhe, na figura abaixo, uma negociação entre o navegador e o servidor WWW.
No passo 1, o cliente estabelece um conexão TCP via navegador Web.
Faz uma requisição HTTP, , para servidor Web que utiliza de forma padrão a porta 80 para estepasso 2
atendimento.
O servidor Web, no , gera uma resposta HTTP transferindo uma página Web para o navegador Web dopasso 3
cliente e fecha a conexão.
Desta forma, o servidor Web indica ao navegador Web do usuário um cabeçalho para objeto retornado. Esta
identificação, que chamamos de HTTP Header, ou Cabeçalho HTTP, possibilita ao cliente Web saber de que forma
tratar o objeto retornado.
São campos específicos que podemos capturar durante o processamento de uma página via programação.
O que vem na próxima aula
Na próxima aula, você vai estudar:
• os principais aspectos de segurança na Internet e como se proteger dos possíveis ataques na Rede.
Saiba mais
No link www.w3.org/Protocols/rfc2616/rfc2616-sec14.html, você poderá aprender um pouco
mais a respeito dos Cabeçalhos do Protocolo HTTP /1.1
•
- -10
• os principais aspectos de segurança na Internet e como se proteger dos possíveis ataques na Rede.
CONCLUSÃO
Nesta aula, você:
• Aprendeu como funcionam os protocolos de Internet.
• Aprendeu quais são as portas utilizadas pelos protocolos.
• Aprendeu as aplicações mais frequentes dos protocolos e as vantagens para o nosso dia a dia.
•
•
•
•
- -1
TECNOLOGIAS WEB
SEGURANÇA NA 
INTERNET
- -2
Olá!
Nesta aula, iremos aprender o que é segurança de Internet. Como podemos nos proteger. Conheceremos os
principais métodos de ataque e proteção utilizados na rede.
Veremos, ainda, como aumentar a segurança de nossos sistemas utilizando controles de sessão e cookies.
Ao final desta aula, você será capaz de:
1. Apresentar os principais aspectos de segurança tanto no lado cliente quanto no servidor.
2. Compreender as implicações de segurança individual e seus métodos de proteção.
3. Compreender o uso da criptografia e da assinatura digital, suas vantagens e desvantagens.
1 A internet é segura?
Você se lembra que na Aula 1 falamos a respeito da proliferação de Worms desde a época da ARPANET? Está
lembrado? Pois bem, desde a criação da Internet, a segurança das informações está sempre em pauta na mesa
dos especialistas, pois, na concepção da mesma, existiu uma ideia de que, se um nó fosse atacado, o outro deveria
servir de caminho alternativo. Ora, isto nada mais é do que caminhos alternativos para os invasores explorarem,
pois, se em nossa rede temos vários caminhos para ir e vir, nada mais lógico que aquele que se propõe a invadir
nossa rede também tente percorrê-los.
Acompanhe nossa aula e veja como tornar sua navegação mais segura.
Antes de qualquer um começar, é interessante sabermos como se categorizam os invasores de sistemas, fazendo
uma análise correta de cada um deles:
- -3
Hackers
São grandes administradores de sistemas,especialistas com habilidade suficiente para
descobrir problemas de segurança e operação em aplicativos ou em sistemas operacionais
que se divertem em atacar uma rede.
Eles se justificam dizendo trabalharem pelo prazer na superação dos limites.
Existem diversos subtipos de hackers: White hat, Grey hat, Black hat, Newbie, Phreaker,
Cracker e Lammer.
Crackers
Eles utilizam suas habilidades para o mal. Se aproveitam da falha dos sistemas para
roubarem, chantagearem ou darem prejuízo a terceiros sejam estes pessoas físicas ou
jurídicas.
São os “quebradores” de sistemas. Um termo genérico para “Black hat”.
Lammers
São iniciantes na arte da invasão que se apropriam de códigos ou táticas explicitados em
revistas e sites para atacarem computadores sem saber, às vezes, o que estão fazendo.
Eles simplesmente executam algo que não sabem como funciona.
Quando as tentativas de invasão são bem-sucedidas se autodenominam hackers.
Conheça dois Hackers/Crackers muito famosos:
Eric Steven Raymond
Autor de um dos melhores livros a respeito da forma de organização para o desenvolvimento de sistemas. Este
livro, gratuito para download, nos faz refletir a respeito da Engenharia de Software.
Figura 1 - Eric Steven Raymond
- -4
Figura 1 - Eric Steven Raymond
Kevin David Mitnick
Foi preso em 1995 e libertado em 2000. Sua área de atuação foi a pirataria de sistemas telefônicos. Foi capturado
por um grande especialista em segurança, Tsutomu Shimomura.
Figura 2 - Kevin David Mitnick
2 Tipos de ataque
Para você saber como proteger sua máquina na Internet, é importante que conheça os principais tipos de ataque
utilizados pela maioria dos vilões do ciberespaço. São eles: Cavalo de Tróia, Quebra de Senha, Denial Of Service
(DOS), Mail Bomb, Phreaking, Spoofing e Scamming.
• Cavalo de Tróia
Este é um dos ataques mais comuns que há. Você pode receber um arquivo anexo em seu e-mail, por
exemplo, indicando um link e acabar baixando um programa invasor ou, ainda, executar um programa
anexo ao e-mail acreditando ser uma apresentação ou uma imagem.
São do tipo Backdoor que utilizam conexão direta ou reversa entre a máquina alvo e o servidor do
invasor.
•
- -5
Outro tipo de cavalo de troia, ou trojan, se destina a roubar senhas de bancos e aplicativos dos usuários
da máquina alvo. Eles conseguem até monitorar a sequência do mouse nos teclados de senhas. Estes são
do tipo Keylogger.
Alguns trojans populares são NetBus, Back Orifice e SubSeven.
• Quebra de Senha
Este tipo de invasão trabalha com a missão de crackear, ou seja, quebrar as senhas de sistemas e
usuários, utilizando técnicas de dicionários de palavras ou, ainda, uma técnica chamada “força bruta”. A
quebra de senhas é uma das tarefas que mais divertem os lammers, pois muitos scripts rodam durante
dias e noites até encontrarem a senha desejada.
• Denial Of Service (DOS)
Este ataque se caracteriza pela utilização de computadores de usuários comuns para em um
determinado momento sobrecarregarem um servidor com uma quantidade excessiva de solicitações de
serviços tirando-os do ar.
Este tipo de ataque traz uma vantagem ao atacante, pois pulveriza as pistas que levariam ao autor
principal. Sites como CNN, Yahoo!, ZD Net, AOL, Twitter, Facebook, Google blogs já sofreram este tipo de
ataque.
Os invasores implantam, nas máquinas dos usuários, programas zumbis que ficam aguardando a ordem
de atacar coletivamente em uma determinada data.
• Mail Bomb
Esta técnica é muito popular.
O invasor sobrecarrega o servidor de mensagens de correio eletrônico com mensagens, fazendo com que
este pare de responder pelo acúmulo de carga de serviço.
• Phreaking
No passado, este tipo de invasão era bastante comum. Muitos usuários divulgavam métodos para burlar
as empresas telefônicas e garantir ligações gratuitas ou a baixo custo.
Ainda hoje, estas técnicas são utilizadas em diversos países tanto para fixos quanto para celulares, mas
ficaram restritas a especialistas.
• Spoofing
•
•
•
•
•
- -6
Esta técnica consiste em atacar um computador através de outro, fazendo com que o administrador do
sistema pense que o computador que está atacando é aquele no final da comunicação, escondendo as
informações do endereço IP do computador de origem.
• Scamming
O intuito deste ataque é roubar senhas de bancos enviando ao usuário uma página simulando o site do
banco do mesmo.
Este é um dos ataques que mais logra êxito, pois muitos usuários não reparam no endereço da URL, nem
mesmo no cadeado do site.
3 Como dificultar a quebra de senhas
Existem algumas maneiras de tornar a vida dos invasores um pouco mais chata e a sua um pouco mais tranquila.
Ao criar uma senha, siga as seguintes dicas:
• Nunca utilize senhas com menos de 6 caracteres, pois a combinação destes já dá mais trabalho ao 
invasor.
• Não utilize dados pessoais em suas senhas, tais como nomes de pessoas, animais de estimação, ou datas 
de aniversário.
• Utilize letras Maiúsculas combinadas com minúsculas para dificultar a vida dos invasores. Ex: AlOjPpKj.
• Inclua números em suas senhas. Ex: A0l2yu7sIa.
• Inclua caracteres especiais. Ex: Al156@ty%67.
• As senhas mais comuns para ataque são: senha, password, 123, 1234, 123456, 1234567890, amor, Deus, 
Deuse10, Jesus, Jesusteama, qwerty, brazil, abc123, myspace1.
4 Como dificultar o roubo de informações via e-mail
Esta é uma prática comum, pois, quando utilizamos listas ou correntes (aquelas mensagens que pedem para você
encaminhar para outros 20 para obter um milagre), expomos nosso endereço de e-mail para a Internet. Muitos
sites armazenam mensagens de listas expondo o e-mail de seus participantes.
Algumas dicas são importantes para a proteção da identidade.
O e-mail é uma carta e, desta forma, deve ser revisada antes de ser encaminhada.
Muitas pessoas demonstram, ao responder um e-mail, total displicência com relação à forma, ao conteúdo e às
informações nele contidas.
O invasor se vale desta pressa para poder levantar dados dos usuários a serem atacados.
•
•
•
•
•
•
•
- -7
5 Dicas para proteger seu e-mail
Você pode aumentar a proteção do seu e-mail evitando algumas falhas importantes e muito comuns.
Veja quais são elas:
• Não divulgue seu e-mail corporativo em listas, correntes ou outros locais fora do ambiente de trabalho. 
Pessoas inescrupulosas se valem desta informação para chegarem até você. Utilize e-mails gratuitos para 
falar de coisas que não se relacionam com trabalho.
• Preste atenção na assinatura automática do seu e-mail. Se você falhar na regra anterior, vai ficar triste 
por expor, também, seu endereço, empresa e cargo.
• Preencha seu e-mail com calma. Se está de cabeça quente, pare, respire, pois muitas informações, depois 
de postadas, não têm como serem apagadas de listas e outros sites que “capturam” e-mails.
• Utilize CCO ou BCC, isto é, poste com cópia oculta para não revelar aos invasores a lista dos copiados, 
mas seja ético, informe a todos dentro do e-mail que está sendo copiado: Copiando para Fulano, Beltrano 
etc. Assim, todos saberão quem está recebendo, menos os invasores. Evite o CC, com cópia simples, pois, 
caso haja um programa invasor na máquina do amigo que recebeu a cópia do seu e-mail, este poderá, com 
a lista de destinatários aberta (CC), levantar um banco de e-mails válidos para enviarem SPAMS.
• Utilize assinaturas digitais. Este é um hábito que, aos poucos, está aumentando. Sites oferecem o serviço 
gratuito de identificação de originalidade do seu e-mail, indicando àquele que recebe sua mensagem que 
você é você e não um invasor dissimulado. Procure na internet “e-mail certificado grátis”. Existem boas 
empresas com ótimos serviços para pessoa física.
• Utilize e-mails, principalmente para dentro da empresa, criptografados. Isto é importante para 
“esconder” informações que não são públicas dos encaminhamentos não autorizados. Este é um hábito 
que, se tivermos, evitaremos muitos problemas de segurança dentro e fora da empresa. No próximo 
tópico,abordaremos mais detalhadamente as formas de criptografia.
6 Criptografia
É a tecnologia que tenta manter em segredo mensagens em trânsito.
Não cabe a este estudo inicial um aprofundamento das técnicas de criptografia e, portanto, abordaremos sua
versão mais voltada para a Internet.
Os objetivos da criptografia é manter a confiabilidade da mensagem, mantendo-a íntegra, autenticando, dessa
forma, o remetente que não poderá negar a autenticidade da mesma.
Existem dois tipos de Criptografia. São eles:
Chave simétrica
Onde tanto o emissor quanto o receptor compartilham a mesma chave. O aspecto negativo dessa técnica é o
gerenciamento seguro da chave.
Chave pública
A criptografia assimétrica procura corrigir o problema do gerenciamento seguro da chave utilizado pela chave
simétrica, pois nela a chave de criptografia é diferente da chave de decriptografia.
•
•
•
•
•
•
- -8
O PGP pode ser utilizado por qualquer pessoa que cria uma chave pública e uma chave privada para si,
divulgando somente a chave pública. Existem servidores que armazenam esta chave pública gratuitamente como
o servidor da RNP.
O que vem na próxima aula
Na próxima aula, você vai estudar:
• os principais aplicativos para a Internet, seus usos e vantagens.
CONCLUSÃO
Nesta aula, você:
• Aprendeu a importância da segurança na Internet e seus principais riscos.
• Aprendeu quais são os ataques mais comuns
• Aprendeu quais são as soluções do lado cliente e do lado servidor.
•
•
•
•
- -1
TECNOLOGIAS WEB
TIPOS DE APLICATIVOS QUE EXISTEM NA 
INTERNET
- -2
Olá!
Nesta aula, iremos aprender quais são os aplicativos mais utilizados na Internet e suas principais características.
Veremos, ainda, como aumentar nossa produtividade utilizando estes aplicativos.
Ao final desta aula, você será capaz de:
1. Apresentar os principais aplicativos utilizados na internet. 
2. Compreender as categorias utilizadas para classificar os aplicativos por funcionalidade.
3. Listar os principais produtos neste segmento.
1 Internet & Aplicativos para navegação
Existem diversos tipos de aplicativos para serem utilizados na Internet.
Cada uma das categorias cumpre um papel importante, existindo, quase sempre, mais de um aplicativo por
categoria.
• Navegadores
• Discadores
• Comunicadores Instantâneos
• Compartilhamento de Arquivo
• Editores HTML
• Segurança de Rede
• VOIP
• E-mail
• Acesso Remoto
• Servidores Web
1.1 Navegadores
Para você navegar em páginas na Internet, é necessário a utilização de navegadores Web capazes de interpretar
o HTML encaminhado pelo servidor Web. Atualmente, existem diversos navegadores que obedecem ao W3C e
outros ainda não possuem esta identificação com o padrão, não interpretando de forma correta as páginas
recebidas. Este aspecto é fundamental, pois, para garantirmos maior acessibilidade aos sites, é necessário que se
obedeça a um padrão estabelecido e acordado.
•
•
•
•
•
•
•
•
•
•
- -3
Imagine você quem possui muito, mas muito dinheiro e deseja comprar um carro de R$ 200 mil e acessa o site da
montadora. Lá nada aparece para você. Decepção, não é? Isto é comum, pois muitos Web Designer focam em um
só navegador, como por exemplo, o Internet Explorer, acreditando que todos possuem uma máquina rodando
Windows com a versão mais atualizada dele.
Repare, ainda, que o IE, como é apelidado, não cumpre estritamente as recomendações do W3C e implementa
alguns códigos que somente ele interpreta devidamente. Este processo está revertendo com a pressão dos
clientes e empresários que não querem perder seus clientes.
Não faz muito sentido para o fabricante perder um cliente por causa de um código que somente um navegador lê
corretamente. Na verdade, ele nem sabe que isso acontece. Cabe ao Web Designer se preocupar em atingir a
todos os possíveis clientes, já que o que importa, neste caso, é o carro e não o site.
Veja aqui a lista dos navegadores mais populares.
Mozilla Firefox
(Compatível com GNU/Linux, Windows e Mac) - Existe uma versão beta para celulares)
Opera
(Compatível com GNU/Linux, Windows e Mac) - Existe versão para celulares)
Safari
(Compatível com Windows e Mac. Existe uma versão para celulares Iphone)
Google Chrome
(Compatível com GNU/Linux, Windows e Mac) - Não obedece a todas as determinações do W3C.
Internet Explorer
(Compatível com GNU/Linux (não oficial), Windows e Mac) - Não obedece a todas as determinações do W3C.
Incompatibilidade entre versões, isto é, versões mais novas implementam melhor as diretrizes do W3C que as
antigas.
Lynx
Navegador textual. Bom para validar o conteúdo do site e para conexões lentas. Necessita de uma biblioteca
especial para a apresentação de imagens.
1.2 Discadores
Os discadores são aplicativos voltados basicamente para a comunicação entre cliente e servidor através de
conexões via MODEM (MOdulador DEModulador).
Seu uso tornou-se muito popular no começo da Internet discada gratuita, tais como IG, BRFREE, Yahoo, etc.
Atualmente, ainda são muito utilizados, principalmente, pelos provedores de conexões ADSL, como a Oi.
- -4
São muitos os provedores de serviço que possuem seus próprios discadores, pois cada um tem uma lista
específica de telefones de acesso.
Veja aqui a Lista dos Discadores mais Populares por Serviço de Internet.
• Brasil Telecom - www.ig.com.br
• Brasil Telecom - www.ibest.com.br
• Embratel - www.click21.com.br
• GVT - www.pop.com.br
• Intelig - wwwinteligweb.com.br
• Telefônica - wromitelefonica.com.br
• Telemar - www.novaoi.com.br
1.3 Comunicadores Instantâneos
Esta categoria tem se tornado muito popular, principalmente, com o advento do acesso à Internet via banda
larga. Os usuários podem passar o dia todo conectados através destes, trazendo arquivos e conversas via rede
doméstica ou empresarial.
Os comunicadores instantâneos trazem bastante dinamismo nas comunicações, pois a qualquer momento
podemos travar diálogos entre nossa rede de amigos e clientes, utilizando não só a troca de mensagens e
arquivos, mas também fazendo uso de videoconferências oferecidas por muitos deles, recados em voz e SMS.
Podemos, até mesmo, utilizá-los como suporte aos serviços da empresa de forma barata e rápida.
• Windows Live Messenger - Microsoft
• Gtalk – Google
• ICQ- Pioneiro neste segmento. Perdeu terreno para o comunicador da Microsoft a partir de 2003.
• Skype - Skype/E-bay - Comunicador com VOIP Integra outros serviços e aplicativos PS1 - Congrega 
várias redes
• Pidgin - Integra outros serviços como Facebook, Myspace, Gtalk, MSN, Yahoo!, entre outros
• Meebo - Versão Web para várias redes
• E-buddy - Versão Web para várias redes. Inclusive com versão para celular
• Nimbuz - Versão Web para várias redes. Integra outros serviços como Facebook, Myspace, Gtalk, MSN, 
Yahoo!, entre outros. Inclusive com versão para desktop e celular
• Trillian - Integra outros serviços como Facebook, Myspace, Gtalk, MSN, Yahoo!, entre outros. Inclusive 
com versão para desktop e celular. Um dos mais tradicionais e completos.
1.4 Compartilhamento de Arquivos
Existem muitas maneiras de se compartilhar arquivos. Muitos depositam seus arquivos em servidores na
Internet para serem acessados via protocolo HTTP.
Contudo, como apresentamos anteriormente, este protocolo não é o melhor para gerenciar este tipo de serviço.
Para contornar estas dificuldades, surgiram alguns aplicativos bem interessantes que podem auxiliar nesta
tarefa.
• Emule
• EDonkey
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -5
• EDonkey
• Kazaa
• Ares
• Limewire
• K-lite
• Shareaza - Compatível com protocolos BitTorrent, eDonkey, FTP e HTTP
• µTorrent - Compatível com protocolo BitTorrent
1.5 Editores HTML
• NVU
• Notepad++
• Dreamweaver
1.6 Segurança de Rede
Sua máquina, estando em rede, está exposta constantemente a toda sorte de tentativas de invasão, sejam estas
por infecção por vírus, worms, spywares, trojans ou, ainda, por ataques diretos via serviços e portas. Assim
sendo, dividiremos esta categoria em 5 subcategorias,tendo em vista que se trata especificamente de soluções
que utilizam a Internet.
• Antivírus
Programas de proteção contra contaminações por vírus eletrônicos
• McAfee (Pago)
• Norton Internet Security (Pago)
• ClamWin
• Avira Antivir
• AVG
• Avast
• Firewall
Programas de proteção contra contaminações por vírus eletrônicos
• Zone Alarm – Personalizável e muito eficiente. Bloqueia portas e máquinas. Do mesmo fabricante do
Firewall Check Point
• Sygate Personal Firewall
• Comodo Firewall
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -6
• Proteção contra spywares
São ataques muito comuns em serviços como eDonkey, Kazaa, MSN, ICQ e Tool Bars (Barras de
Ferramentas) instaladas via outros aplicativos.
• PCTools
• Spybot
• Windows Defender
• Proteção contra trojans
Proteção contra cavalos de troia
São ataques muito comuns em serviços como eDonkey, Kazaa, MSN, ICQ e Tool Bars (Barras de
Ferramentas) instaladas via outros aplicativos.
DICA: Utilize um bom antivírus.
• Criptografia
Proteção contra acesso não autorizado a dados
• Cypher – Tantum Computing - Programa brasileiro para criptografia de dados muito completo. Possui
muitos algoritmos de criptografia. Criptografa e-mails e arquivos em tempo real.
• GnuPGP
• GPG4Win
1.7 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.
• Skype (Compatível com GNU/Linux, Windows e Mac. Existe uma versão para celulares)
• X-lite (Compatível com GNU/Linux e Windows)
• Gizmo (Compatível com GNU/Linux, Windows. Existe uma versão para celulares)
• Ekiga (Compatível com GNU/Linux e Windows)
•
•
•
- -7
1.8 E-mail
Os serviços de correio eletrônico contam com uma gama bastante expressiva de clientes que trabalham tanto
com protocolos POP3 quanto com IMAP.
Existem serviços como Gmail, Yahoo e Hotmail que permite acessos via POP3, além do IMAP. Desta forma, a lista
de aplicativos nesta categoria ganhou produtos de peso.
• Mozilla Thunderbird - Uni dos melhores clientes gratuitos para correio eletrônico
• Windows Live E-mail - Versão limitada de produtos como o antigo Outlook Express
• Outlook (Pago) - Produto que vem com a versão profissional do Office da Microsoft
• Eudora - Outro clássico. Um dos melhores clientes de e-mail gratuitos já desenvolvidos. Surgiu logo no 
começo da Internet com Windows. Perdeu espaço para o Outlook e o Thunderbird e agora e relança com 
base no Thunderbird.
1.9 Acesso Remoto
• Clientes FTPe SFTP
• Filezilla - Cliente FTP e gerenciador de downloads
• CuteFTP
• Crystal FTP
• Leech FTP
• Winscp
• Gerenciador de Downloads
• Filezilla - Cliente FTP e gerenciador de downloads
• Download Accelerator
1.10 Servidores Web
Para hospedagem de sites, é necessário que haja um servidor capaz de interpretar requisições HTTP.
Atualmente, existem servidores que, além do código HTML, interpretam outras linguagens como Java, PHP, ASP
entre outras.
Da mesma forma, protocolos como FTP e RSS .NET e C# também são aceitos por alguns destes.
• Apache HTTP Server - Apache Foundation - O mais seguro e popular de todos
• Apache Tomcat - Java Web Container
• IIS - Microsoft
• Sun GlashFish
• IBM HTTP Server
• IBM Lotus Domino
•
•
•
•
•
•
•
•
•
•
•
•
- -8
• IBM HTTP Server
• IBM Lotus Domino
• Jetty
• Oracle HTTP Server
• Sun Java System Web Server
2 WEB 2.0
O segmento intitulado Web 2.0 merece um destaque especial. Esta nomenclatura surgiu com o intuito de
divulgar um novo segmento de aplicativos que integram serviços e permitem aos seus usuários criarem e
compartilharem seus recursos. Na verdade, estas soluções foram remodeladas com base nos antigos sistemas
pré-existentes conforme vimos. O novo está por conta do visual e a versão Web.
Este é um mundo vasto que, a cada dia, ganha novas ferramentas e versões que incorporam novas facilidades,
chegando, inclusive, algumas vezes, a mudar a característica básica da ferramenta original.
Existem outras categorias de aplicativos para a Internet que poderiam ser listadas,
tais como Ferramentas para Blog, Gerenciadores de Bookmarks, Ferramentas para Formulários, Ferramentas
para Backups, Gerenciadores de Senhas, Ferramentas de Busca, Ferramentas para Redes Sociais, Ferramentas
para Redes Sem Fio, VPN entre outras.
• Google Docs
• Twitter
• Facebook
• Zoho
• Delicious
• Picnik
• Google Maps
• BlinkList
• Flickr
• Google Video
• Youtube
• Ustream
• Justin.tv
• Meebo
• Netvibes
• Picasa
• Think Free Office
• Basecamp
• Media-convert.com
• Snipshot
• Vimeo
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -9
O que vem na próxima aula
Na próxima aula, você vai estudar:
• como funciona a linguagem mais popular da Internet - HTML.
CONCLUSÃO
Nesta aula, você:
• Aprendeu quais são as principais categorias de aplicativos para a Internet.
• Aprendeu quais são os aplicativos mais usados.
•
•
•
- -1
TECNOLOGIAS WEB
INTRODUÇÃO AO 
HTML
- -2
Olá!
Nesta aula, iremos aprender como construir páginas Web utilizando as principais tags da linguagem mais
popular para a Internet.
Veremos, ainda, como aperfeiçoar nosso código para garantir maior integração entre navegadores.
Ao final desta aula, você será capaz de:
1. Apresentar as principais tags utilizadas na construção de páginas Web.
2. Compreender as principais funcionalidades de cada tag utilizada.
3. Listas as principais tags para tratamento de imagens, textos e conteúdos.
1 HTML
A grande reviravolta na Internet aconteceu quando, em 1989, Tim Berbers-Lee desenvolveu uma linguagem
capaz de publicar e organizar conteúdos na Internet. Nascia, aí, a linguagem HTML (Hypertext Markup
Language) que permitiria aos pesquisadores do laboratório CERN publicarem suas informações de maneira
rápida, padronizada e fácil. Esta facilidade ganhou atenção mundial e tornou-se o maior hit da Internet até hoje.
Já são milhões de sites e aplicações baseadas nesta linguagem que vem explorando, a cada dia, mais e mais
recursos, trazendo inovação e informação para qualquer pessoa em qualquer parte do mundo onde haja uma
conexão com a Internet.
- -3
A linguagem HTML é a linguagem padrão do seu navegador. Não importa se você desenvolveu uma aplicação
para Web em Java, pois o servidor sempre converterá em HTML qualquer código para que o seu navegador
entenda.
As 3 principais facilidades da linguagem HTML são:
• Princípio da não linearidade da informação, permitindo ao usuário navegar pelas informações utilizando 
o princípio do hipertexto.
• Permite a formatação do texto, utilizando marcações para estilizá-lo, podendo ser interpretável por todo 
e qualquer navegador Web desde que sejam respeitadas as marcações padrão do W3C.
• Flexibilidade de uso. Esta linguagem permite fácil adequação aos mais diferentes propósitos.
2 Estrutura
Todos os documentos HTML são chamados de páginas e contém elementos dentro de padrões estruturais.
Cada elemento é chamado de tag. Sua sintaxe permite, ainda, a definição de parâmetros o que foi fundamental
para o avanço da linguagem.
Cada elemento,quando utilizado, pode trabalhar em par com a abertura e o fechamento desta tag. Neste caso,
fecha-se a tag utilizando o caracter \ dentro dos sinais de <> da mesma.
Uma tag é formada por:
•
•
•
Saiba mais
Acompanhe os detalhes da história da linguagem HTML: www.w3.org/People/Raggett/book4
/ch02.html.
- -4
Toda as tags devem ser descritas dentro da estrutura maior de uma página HTML, que nada mais é que um
arquivo texto, cujos elementos estruturais são também descritos por tags como, por exemplo:
<HTML><BODY></BODY></HTML>
<HR color="red">
No qual:
HR = Este comando desenhará uma barra horizontal na tela do seu navegador
color = atributo que especifica a cor da barra
red = Especifica que a cor do elemento é vermelha
Cada comando tem seus atributos possíveis e seus valores.
Um exemplo é o atributo size que pode serusado com o comando FONT, com o HR, mas que não pode ser usado
com o comando BODY.
Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.
De uma maneira geral, o HTML é um poderoso recurso, sendo uma linguagem de marcação muito simples e
acessível, voltada para a produção e compartilhamento de documentos e imagens.
3 Documento HTML
Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de
textos comum.
Você poderá salvá- lo com a extensão html ou htm.
As tags básicas de HTML que você normalmente encontrará nas páginas da Internet são:
<HTML> Esta tag irá definir o início de um documento HTML ao navegador web.
<HEAD> Nesta tag estão as definições de cabeçalho do documento. Podem ser postos aqui: chamadas Javascript,
CSS, tags META entre outras.
- -5
<BODY> Em um documento HTML faz-se necessário indicar o corpo do documento. 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.
4 Comandos em HTML
Dentro do cabeçalho de um documento em HTML podemos encontrar os seguintes comandos:
• <TITLE>
O conteúdo definido dentro desta tag será exibido na barra de título do seu navegador.
É compatível com os principais navegadores Web.
EXEMPLO:
<head>
<title>Aula de Tecnologias Web</title>
</head>
• <STYLE>
Quando trabalharmos com Folhas de Estilos, definimos aqui os estilos carregados.
É compatível com os principais navegadores Web.
EXEMPLO:
<HEAD>
•
•
- -6
<STYLE type="text/css">
p {color:red}</STYLE>
</head>
• <SCRIPT>
Utilizada para definir a carga de um script do tipo Javascript, por exemplo, do lado do cliente.
É compatível com os principais navegadores Web. No HTML 4.1 tipo de conteúdo é declarado como
CDATA, que significa que as entidades não serão parseadas. Já no XHTML o tipo de conteúdo muda para
(#PCDATA).
EXEMPLO1:
<SCRIPT type="text/javascript">
document.write("Olá Alunos do Curso!")
</SCRIPT>
EXEMPLO 2:
<SCRIPT type="text/javascript">// <![CDATA[document.write("Olá Alunos do Curso!");// ]]></SCRIPT>
• <LINK>
Utilizada para definir ligações entre a página e arquivos externos como, por exemplo, arquivo de folhas
de estilos.
Em XHTML esta tag deve ser obrigatoriamente fechada.
É compatível com os principais navegadores Web. Repare que esta tag é composta, também, por
atributos type e href onde o primeiro indica o tipo de referência do link e o segundo a localização do
arquivo em si.
Outros atributos também são importantes, a saber: 
- charset - onde definiremos o conjunto de caracteres utilizado
- media – onde definiremos o tipo de mídia utilizada. Isto é importante para a acessibilidade. Acompanhe
na aula sobre acessibilidade mais à frente.
EXEMPLO:
<head>
<link rel="estilo" type="text/css" href="meuestilo.css" />
•
•
- -7
</head>
• <META>
Esta tag é uma das mais utilizadas para dar aos robôs de busca informações a respeito de sua página e
site. Ela define as propriedades da página. Desta forma, ferramentas de indexação de conteúdos podem,
ao ler as informações contidas nestas tags, catalogar sites e suas informações, tais como descrição da
página, autor, palavras chave, etc.
O atributo é obrigatório, pois especifica o conteúdo da meta informação. Os demais atributoscontent 
são opcionais.
Para definir o nome do autor da página devemos utilizar o atributo AUTHOR. Exemplo: <META NAME="
AUTHOR" CONTENT="Flavio Brito">
Com o intuito de especificar as informações do cabeçalho da página poderemos utilizar o atributo
HTTP_EQUIV. Exemplo: <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
CONTENT-TYPE – Define o tipo de conteúdo.
EXEMPLO: <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
EXPIRES - Define o prazo de expiração, indicando o tempo de obsolescência do documento. Caso
coloquemos o número 0, estaremos indicando que a página expira agora e deve ser atualizada.
EXEMPLO: <META HTTP-EQUIV="EXPIRES" CONTENT="Sex, 13 Nov 2009 11:12:01 GMT">
REFRESH - Define o tempo, em segundos, de atualização da página e, ainda, pode redirecioná-la após o
prazo.
EXEMPLO: http://www.estacio.br/index2.html">
CACHE-CONTROL - Define como o cachê será controlado. Exemplo: <META HTTP-EQUIV="CACHE-
CONTROL" CONTENT="NO-CACHE">
PRAGMA NO-CACHE – Indica para não armazenar a página no cache, devendo esta ser sempre solicitada
ao servidor.
KEYWORDS – Define as palavras chave para a indexação da página. Todas as palavras devem ser
separadas por vírgula.
EXEMPLO: <META NAME="KEYWORDS" CONTENT="Universidade, graduação, ensino a distância ">
ROBOTS - Indica como os robôs de busca e indexação deverão trabalhar em sua página.
•
- -8
EXEMPLO: <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW"> . Neste caso, estamos indicando
aos robôs de busca que indexem a página e não sigam os links contidos nela.
Existem outros atributos dentro de meta, porém estes são os mais utilizados.
5 Tags para web
Algumas tags são importantes para o desenvolvimento da página Web como, por exemplo, as tags de corpo,
quebra de linhas e centralizações de elementos.
5.1 Tags de Corpo
• Comentários
Tag: <!- - >
Esta tag é utilizada para aplicar comentários ao código HTML. Não se esqueça que ela deve ser fechada por dois
sinais de menos e um sinal de maior para limitar o tamanho do comentário. Caso contrário, todo o conteúdo
ficará escondido do usuário.
Exemplo: 
<!- - Este é o meu comentário. Quando o navegador passar neste ponto, ele não apresentará este texto na tela -->
• Âncora
Tag: <a>
Esta tag define uma âncora dentro ou fora da página.
Através dela, é possível fazer uma ligação com outro documento ou ainda saltar para um ponto específico do
documento sem a necessidade da ação de paginação feita pelo usuário.
Código html
<html>
<body>
<a href="http://www.google.com.br>Acesse o Google!</a>
</body>
</html>
Navegador
Acesse o Google!
•
•
- -9
5.2 Caracteres e seus Controles
• Negrito Tag: <b>
Através desta tag, podemos indicar ao navegador que negrite o texto.
Código html
<html>
<body>
<b>Texto em negrito</b> <br />
</body>
</html>
Navegador
Texto em negrito
• Itálico Tag: <i>
Para aplicar o efeito itálico no caracter, basta utilizar a tag <i>, não se esquecendo de fechá-la, pois, caso isto não
ocorra, todos os elementos textuais ganharão este estilo.
Código html
<html>
<body>
<i>Estou em itálico</i>
</body>
</html>
Navegador
Estou em itálico
• Tag: <big>
Esta tag enfatiza o conjunto de caracteres ligados a ela não só aumentando seu tamanho em letra como também
a espessura do corpo de letra.
Código html
<html>
<body>
<big>Este texto está em Big</i>
</body>
</html>
Navegador
•
•
•
- -10
Estou em itálico
• Tag: <em>
Outra forma de enfatizar o texto. A diferença é que, neste caso, o texto ficará em itálico.
• Tag: <strong>
Esta tag é semelhante a tag <b>.
• Tag:<small>
Publica o texto de forma diminuta. 
Em HTML, esta tag faz com que o texto seja apresentado em uma fonte pequena e estreita.
• Tag: <strike>
Esta tag é utilizada quando queremos apresentar um texto todo ele riscado na horizontal.
É como se tudo aquilo que estivesse escrito fosse eliminado, porém desejamos que fosse visto.
A tag <strike> foi descontinuado no HTML 4.0.1 e não é suportada pelo DTD Strict do XHTML 1.0
• Tag: <font>
O HTML é rico em recursos e nos permite definir as características das fontes a serem apresentadas no
navegador Web do usuário. Existem muitas fontes a serem utilizadas. Tenha cuidado, pois nem todas estão
disponíveis nas máquinas dos usuários na Internet. Prefira fontes mais conhecidas, tais como Arial, Helvetica,
Times New Roman, Verdana e Courier New. Elas estão disponíveis na maioria dos ambientes gráficos dos
sistemas operacionais Gnu/Linux, MacOS e Windows. O elemento font foi descontinuado no HTML 4.0.1 e não é
suportado pelo DTD do Strict do XHTML 1.0.
Código html
<html>
<body><font size="3" color="red">Este é um texto em vermelho cujo tamanho é 3</font><p>
<font face="verdana" color="green">Este é um texto utilizando a família Verdana em verde</font>
</body>
</html>
•
•
•
•
•
- -11
6 Controle de Caracteres
• Quebra de Linha
- Tag: <br>
Quando desejarmos quebrar uma linha, tal como fazemos em nosso editor de texto, basta utilizar a tag
<br>.
- Tag: <p>
Já esta tag representa um salto maior. Ela simboliza a quebra de parágrafo feita no editor de textos.
• Centralização de Elementos
Tag: <center>
Para centralizarmos um texto ou elemento na tela do seu navegador, basta utilizarmos a tag <center>.
Ela permite a centralização de forma independente da resolução gráfica apresentada em seu monitor.
7 Tags para web - listas
Ao utilizarmos uma lista, precisamos definir seu começo e fim e seus itens. Para isso, deveremos trabalhar com
algumas tags em bloco, tais como <dd>,<dl> e <dt>.
Primeiramente, devemos definir a lista através do bloco de tags <dl>
<dl>
<! -- Definir itens - - >
</dl>
Agora você sabe que para definir uma lista é necessário usar a tag<dl>. Em uma tradução livre, poderemos dizer
que esta tag significa definição da lista. Vamos definir os itens em uma lista <dt> e os seus respectivos conteúdos
<dd>.
Para facilitar o entendimento, <dt> indica a definição do item e <dd> definição dos dados do item.
• Tags: <dl>, <dd>, <dt>
Quando necessitamos elencar itens em uma lista.
Esta tag deve ser utilizada juntamente com a tag <dl> e <dt>. 
Exemplo:
<dl>
<dt>Graduação em Análise de Sistemas</dt>
•
•
•
- -12
<dd><a href="http://www.universidade.br/curso1.html">Confira</a></dd>
<dt>Graduação em Desenvolvimento Web</dt>
<dd><a href="http://www.universidade.br/curso2.html">Confira</a></dd>
</dl>
Listas Ordenadas
• Tag: <ol>
Para a apresentação de itens ordenados utilizando marcadores numéricos, você deve utilizar a tag <ol> para
apresentar uma lista ordenada. Cada item da lista deve ser indicado pela tag <li>, traduzido livremente para lista
de itens.
<p>Lista Ordenada:</p>
<ol>
<li>Gás</li>
<li>Luz</li>
<li>Telefone</li>
</ol>
Listas Não Ordenadas
• Tag: <ul>
A lista não ordenada somente apresenta marcadores junto ao item.
Não há como verificar ordenação dos dados.
<p>Lista Não Ordenada:</p>
<ul>
<li>Gás</li>
<li>Luz</li>
<li>Telefone</li>
</ul>
• Tag: <option>
Existe uma maneira interessante de se exibir uma lista não ordenada economizando bastante espaço na tela.
Para isso, devemos utilizar a tag <option>, comumente empregada em formulários cujo objetivo é armazenar
grandes listas e poupar espaço na apresentação no navegador do usuário.
•
•
•
- -13
8 Embarcando objeto em sua página (Tag: <embed>)
A tag <embed> permite que você acople objetos externos a sua página como um plug-in. Hoje temos vários sites
que oferecem seus objetos codificados nesta tag. Temos o Youtube, Google Vídeo entre outros.
• Atributos
• height – altura em pixels do objeto
• src – origem do objeto
• type – tipo do objeto
• width – largura em pixels
<embed autoplay="false" src="universidade.wma" width="50" height="50></embed>
9 Cabeçalhos (Tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
As tags de h1-h6 foram muito utilizadas no passado para dar ênfase ao tamanho dos textos utilizados em
cabeçalhos. O valor 1 indica o maior e o 6 o menor tamanho das letras utilizadas nos cabeçalhos. Para um melhor
entendimento, pense que o cabeçalho se assemelha ao Estilo utilizado pelos editores de texto. Eles não só
alteram o tamanho como a aparência da letra, grifando-a.
Veja um exemplo:
•
•
•
•
•
- -14
10 Outros recursos
• <hr>
LINHA HORIZONTAL
Em HTML é fácil criarmos uma linha horizontal que ocupe toda a extensão da página sem nos preocuparmos
com a definição do tamanho.
Basta que usemos a tag <hr>, que em uma tradução livre significa linha horizontal.
Este recurso facilita a divisão visual de elementos no corpo da página.
Exemplo: <hr>
<img>
Em HTML é possível associarmos imagens ao texto na página. Este tipo de recurso trouxe novos horizontes, pois
muitas páginas começaram a ganhar vida com fotos e imagens associadas, permitindo a criação de sites muito
interessantes. Esse recurso se expandiu com o uso de CSS pela facilidade do posicionamento dos elementos
dentro da página. Percebam que, diferentemente dos editores de texto, as imagens em HTML são vinculadas e
não inseridas. Existem apenas links para a fonte da imagem.
Esta tag possui os atributos src, onde indicaremos a fonte da imagem, o atributo alt, que facilita a identificação
com um texto alternativo no caso da não visualização da mesma.
Em XTML a tag <img> deve ser fechada. Os elementos align, border, hspace e vspace foram descontinuados na
versão HTML 4.1 e no DTD do XHTML 1.0 Strict
• <map>
Esta tag é utilizada para criarmos regiões clicáveis em uma imagem do lado do cliente. Através dela, podemos
mapear pontos sensíveis de uma imagem que redirecionam o usuário de acordo com o contexto clicado dentro
da imagem.
Atributos:
• name - nome do mapa
• area - define uma área clicável
• shape – define o formato da região clicável
• coords – define as coordenadas x_min, y_min,x_max,y_max
• alt – informação alternativa
Exemplo:
<body>
<img src="logo.gif" usemap="#logo" border="0">
<map name="logo">
">http://www.universidade.br/ajuda.html
•
•
•
•
•
•
•
http://www.universidade.br/ajuda.html
- -15
. universidade.br/cursos.html">http://www
. universidade.br/vestibular.html">http://www
</map>
</body>
• <frameset> e <frame>
Frames
A tecnologia do frame foi criada com o intuito de dividir a página apresentada ao usuário em segmentos
distintos, como se fossem janelas, possibilitando a cada um o carregamento independente do conteúdo a ser
apresentado. Cada frame está contido em um frameset (conjunto de frames) e cada um pode ter atributos
diferentes, tais como tamanho, paginação entre outros. Em uma tradução livre, frame que dizer moldura.
Desta forma, temos para um conjunto de frames um frameset para organizá-los. Vide o exemplo:
<frameset cols="25%,50%,25%">
<frame src="frame_a.html" />
<frame src="frame_b.html" />
<frame src="frame_c.html" />
</frameset>
No exemplo acima, temos 3 frames com diferentes tamanhos. Os tamanhos foram definidos com base no
porcentual da tela do navegador, isto é, eles se redimensionam a cada resolução apresentada.
No caso da existência de navegadores que não interpretam Frames poderemos utilizar a tag <noframes> Confira
no exemplo abaixo:
Exemplo:
<frameset rows="18%,82%">
<frame src="frame_menu.html">
<frame src="frame_conteudo.html">
<noframes>Para visualizar frames é necessário um navegador mais recente como o Mozilla Firefox</noframes>
<iframes>
Este recurso teve se apogeu há 4 anos, quando muitos sites criavam frames internos para esconder de seus
usuários a carga de determinadas informações. Até hoje, encontramos soluções interessantes que fazem uso
desta tag.
Alguns navegadores podem entender seus resultados de forma diferente. Principalmente ao utilizarmos
controles de sessão.
A tag <iframe> não é suportada pelo DTD Strict do HTML 4.1 e pelo DTD Strict do XHTML 1.0
• Atributos:
• align - alinhamento – left, right, top, bottom, middle. Descontinuado
•
•
•
http://www
http://www
- -16
• align - alinhamento – left, right, top, bottom, middle. Descontinuado
• frameborder – tamanho da borda – 1 e 0
• height – estabelece a altura do iframe em pixels
• widht – estabelece a largura do iframe em pixels
• longdesc – aponta para um arquivo que contém informações adicionais a respeito daquele iframe
• marginheight – especifica as margens superior e inferior em pixels
• marginwidht – especifica a margem a direita e a esquerda do iframe
• name – nome do iframe
• scrolling – habilita ou não a barra de scroll
• src – indica a URL com o caminho do documento a ser carregado pelo iframe
Exemplo:
<iframe src ="conteudo.jsp" width="100%" height="200">
<p>Seu navegador não suporta iframes</p></iframe>
O que vem na próxima aula
Na próxima aula, você vai estudar:
• como funciona a linguagem mais popular da Internet - HTML.
CONCLUSÃO
Nesta aula, você:
• Aprendeu quais são as principais tags utilizadas no desenvolvimento de páginas Web.
• Aprendeu como desenvolver sites com aspectos contemporâneos em seus códigos.
•
•
•
•
•
•
•
•
•
•
•
•
•
- -1
TECNOLOGIAS WEB
TABELAS
- -2
Olá!
Nesta aula, iremos aprender como construir tabelas em páginas Web utilizando as principais tags da linguagem
HTML.
Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade utilizando estes recursos.
Ao final desta aula, você será capaz de:
1. Apresentar as principais tags utilizadas na construção de tabelas em HTML.
2. Compreender as principais estruturas formadas com as tags utilizadas.
3. Listar as principais tags e seus usos.
Em HTML, o recurso de tabela é extremamente eficiente quando desejamos, com pouco trabalho, criar tabelas
para apresentação de dados.
Com o passar do tempo, este recurso começou a ganhar notoriedade, pois, além da apresentação de dados, era
também utilizado para a formatação visual de elementos em uma página, tendo em vista que HTML é uma
linguagem de marcação e não de diagramação.
1 A Construção
A construção de tabelas não é complicada.
O que é mais desafiador é a construção de layouts utilizando-a.
Hoje, é muito comum utilizarmos editores Web que apresentam o recurso da construção visual de tabelas. Este
tipo de recurso poupa-nos tempo, porém o refinamento manual ainda é a melhor alternativa.
2 Tag: <TABLE>
Para definirmos uma tabela em HTML devemos utilizar a tag <table>.
Seu navegador quando encontra esta tag procura por informações de linhas <tr> células <td>, em uma tradução
livre dados de tabela.
Repare o atributo border na tag <table>. Ele define a espessura da linha da tabela. Para omitirmos as marcas de
linhas nas tabelas, utilize o border=“0”.
Veja, nos exemplos abaixo, como estas tags se relacionam:
- -3
Código html
<table border="1">
<tr>
<td> linha 1, célula 1</td>
<td> linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td></tr>
</table>
Navegador
Este recurso até hoje é bastante explorado e ainda possui adeptos. Atualmente, existe um segmento na área de
design web que propõe o “tableless”, ou seja, eliminar qualquer recurso de tabela para o tratamento do layout de
página.
3 Cabeçalhos nas colunas
Outro recurso interessante é o uso de cabeçalhos nas colunas das células.
• Exemplo 1
Neste exemplo, criamos 2 cabeçalhos para as colunas 1 e 2 da tabela. Para identificar de maneira diferenciada a
informação dos cabeçalhos, a tag <th> coloca o texto nela contido em negrito.
Outra dica importante: não se esqueça de fechar esta tag.
Código html
<table border="1">
<th>Cabeçalho Col 1</th>
<th>Cabeçalho Col 2</th>
•
- -4
<tr>
<td> linha 1, célula 1</td>
<td> linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>
Navegador
• Exemplo 2
Caso você deseje apresentar o conteúdo de algumas células, não todas, basta fechar a tag <td> sem conteúdo.
Código html
<table border="1">
<th>Cabeçalho Col 1</th>
<th>Cabeçalho Col 2</th>
<tr>
<td> linha 1, célula 1</td>
<td> linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td></td>
</tr>
</table>
•
- -5
Navegador
• Exemplo 3
Veja um exemplo do uso de todas as tags.
Código html
<table border=”1”>
<th>Cabeçalho Col 1</th>
<th>Cabeçalho Col 2</th>
<tr>
<td> linha 1, célula 1</td>
<td> linha 1, célula 2</td>
</tr>
<tr>
<td> linha 2, célula 1</td>
<td></td>
</tr>
</table>
Navegador
•
- -6
Em nosso curso não apresentaremos a construção de layouts utilizando tabelas, pois entendemos que o uso de
Folhas de Estilo é mais apropriado.
O que vem na próxima aula
Na próxima aula, você vai estudar:
• como construir formulários utilizando tags HTML.
CONCLUSÃO
Nesta aula, você:
• Aprendeu quais são as principais tags utilizadas no desenvolvimento de tabelas para páginas Web.
• Aprendeu como desenvolver sites utilizando tabela em seus códigos.
•
•
•
- -1
TECNOLOGIAS WEB
FORMULÁRIOS
- -2
Olá!
Nesta aula, iremos aprender como construir formulários em páginas Web utilizando as principais tags da
linguagem HTML.
Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade utilizando estes recursos.
Ao final desta aula, você será capaz de:
- Apresentar as principais tags utilizadas na construção de formularios em HTML.
- Compreender as principais estruturas formadas com as tags utilizadas.
- Listar as principais tags de Aula 07: Formulários e seus usos.
1 Formulários
Nos dias de hoje, é cada vez mais comum navegarmos em páginas com formulários. Eles são fundamentais para
que o administrador do site possa receber informações das pessoas que navegam em suas páginas. São
informações de cadastro, informações de busca entre outras.
As tags relacionadas a formulários são bastante versáteis e permitem ao Web Designer um conjunto ímpar de
recursos.
- -3
2 Modelo básico
Antes de percorrermos todos os recursos de formulários, vamos estudar seu modelo básico.
Código html
Figura 1 - Código Html
Navegador
Figura 2 - Navegador
3 Tag <input>
No caso do <input>, temos alguns atributos essenciais para o bom entendimento de suas funcionalidades.
• type – determina qual o tipo de campo de entrada será. As opções possíveis são texto, enviar e senha. No 
caso de campos texto, o type=”text”, para botões de envio, o type=”submit” e, no caso de senha, o type=”
password”.
• name - Atribui um nome a um determinado campo de referência de modo que você pode, mais tarde, 
fazer referência a ele em um tratamento via linguagem de programação.
• size - Define a largura horizontal do campo. A unidade de medida é em espaços em branco.
• maxlength - Define o número máximo de caracteres que podem ser inseridos.
•
•
•
•
- -4
4 Método de envios de dados
Existem dois tipos de ação a serem tomadas usando formulários em HTML.
Uma delas, a mais comum, é o método e a outra é o método POST GET.
GET Através do método HTTP "get", os dados são anexados ao URI especificado pelo atributo.
POST
Através do método HTTP "post", os dados são anexados ao corpo do formulário e enviados
ao agente a cargo do processamento.
O método GET permite que o usuário grave no seu navegador a URI (Universal Resourse Identifier) com todos os
parâmetros. Isto pode ser bom ou ruim pela óptica da segurança de informações. Já o POST esconde estas
informações do usuário no endereço do navegador. Assim ao usarmos POST não explicitamos os parâmetros
utilizados.
5 Atributos
5.1 Caixa de entrada de texto multilinha
Este tipo de caixa é muito especial, pois permite a entrada de uma grande quantidade de texto em uma única
página, tal como um editor de texto. Contudo, ela não aceita a formatação de textos como um editor visual.
Atributos:
• rows – indica número de linhas em um objeto textarea.
• cols - indica número de linhas em um objeto textarea
• name – especifica o nome da textarea
• wrap – controla a quebra de linhas (off, virtual, physical).
• – desliga a quebra de linhas, Off
• Virtual – mostra a quebra de linhas colocando um <ENTER> ao final.
• Physical – inserem quebras de linhas quando necessário e as envia no processamento.
Exemplo:
<FORM action="http://www.universidade.br/cadastro.jsp" method="post"> <P> <TEXTAREA name="obs"
rows="20" cols="80"> Primeira linha do texto inicial. Segunda linha do texto inicial. </TEXTAREA> <INPUT
type="submit" value="Enviar"><INPUT type="reset"> </P></FORM>
•
•
•
•
•
•
•
- -5
5.2 Caixa de entrada de texto
A caixa de entrada é utilizada para entrada de dados como um campo em um formulário.
Você pode utilizá-lo, por exemplo, para solicitar nome, endereço, telefone, CPF para o usuário em seu site. Seu
limite é bem menor que aquele definido na Área de Texto.
Atributos:• size – especifica quantos caracteres serão apresentados dentro da caixa
• maxlength - especifica o tamanho máximo da caixa
• name - especifica o nome da caixa
• value - especifica o valor padrão contido na caixa
5.3 Caixa de senha
Com esta caixa, podemos digitar sem que os usuários próximos saibam qual o texto que está sendo digitado.
Os caracteres são substituídos pelo *.
Atributos:
• size – especifica quantos caracteres serão apresentados dentro da caixa
• maxlength - especifica o tamanho máximo da caixa
• name - especifica o nome da caixa
• value - especifica o valor padrão
Exemplo:
<FORM ACTION="http://www.universidade.br/cadastro.jsp" method="post"><P><INPUT TYPE="password"
NAME="senha" VALUE="123456"></FORM>
•
•
•
•
•
•
•
•
- -6
5.4 Caixa de verificação
Muito utilizada para a marcação de valores do tipo múltipla escolha.
Atributos:
• name - especifica o nome da caixa
• value - especifica o valor padrão
Exemplo:
<FORM action="http://www.universidade.br/cadastro.jsp" method="post">
<INPUT TYPE="checkbox" NAME="receber_email">Sim! Aceito participar da lista de e-mails<br/>
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
5.5 Botão de rádio
Muito utilizada para a marcação de valores do tipo múltipla escolha com uma única resposta.
Atributos:
• name - especifica o nome da caixa
• value - especifica o valor padrão
Exemplo:
<FORM action="http://www.universidade.br/cadastro.jsp" method="post">
Informe o seu sexo: <br/>
<INPUT TYPE="radio" NAME="sexo"> Feminino<br/>
<INPUT TYPE="radio" NAME="sexo"> Masculino<br/>
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
•
•
•
•
- -7
5.6 Caixa de seleção
Este objeto permite que carreguemos uma lista com muitos elementos pré-selecionando um dos itens.
Ela é muito utilizada para a carga de UF em sites.
Atributos:
• name - especifica o nome do campo
• size - número de itens na lista
• multiple – permite que se faça seleção múltipla
• option – itens individuais no menu. Caso queira pré-selecionar algum, utilize selected ao lado do item
• value – valor padrão
Exemplo:
<FORM action="http://www.universidade.br/cadastro.jsp" method="post">
Selecione o seu curso: <br/>
<SELECT NAME="curso"> Sistemas da Informação
<OPTION VALUE="adm"> Administração </OPTION>
<OPTION VALUE="eng"> Engenharia Química </OPTION>
<OPTION VALUE="hist"> História </OPTION>
<OPTION VALUE="mat"> Matemática </OPTION>
</SELECT>
</FORM>
5.7 Campo invisível
Algumas vezes queremos pré-processar algum dado utilizando, por exemplo, Javascript e submetê-lo sem que o
usuário intervenha. Assim, o objeto hidden pode ser utilizado para este propósito.
Atributos:
• name - especifica o nome do campo
• value – valor padrão
•
•
•
•
•
•
•
- -8
• name - especifica o nome do campo
• value – valor padrão
Exemplo:
<INPUT TYPE=”HIDDEN” NAME="ID_postagem" value="10203">
5.8 Botão cancelar
Através deste botão, o usuário poderá limpar os dados inseridos em seu formulário antes de submetê-lo.
Atributos:
• name - especifica o nome do campo
• value – texto descrito no botão
Exemplo:
<FORM action="http://www.universidade.br/cadastro.jsp" method="post">
Digite o seu nome: <INPUT TYPE="text" size="30" /> <br/>
<INPUT TYPE="reset" NAME="Limpar_Campo" VALUE="Reset"/>
</FORM>
5.9 Botão enviar
Através deste botão, o usuário poderá enviar seus dados que estão no formulário. Após o envio, normalmente
não existe opção desfazer, pois o processamento deverá acontecer no servidor e não mais no cliente.
Atributos:
• name - especifica o nome do campo
• value – texto descrito no botão
Exemplo:
<FORM action="http://www.universidade.br/cadastro.jsp" method="post">
Digite o seu nome: <INPUT TYPE="text" size="30" /> <br/>
<input type="submit" value="Enviar"/>
•
•
•
•
•
•
- -9
5.10 Imagem
É possível criar um botão utilizando uma imagem.
O processo é semelhante ao do exemplo do Botão Enviar.
Atributos:
Exemplo:
<FORM action="http:// http://www.portal.com.br/como-acessar-o-portal.aspx" method="post">
Acesse o portal, clicando abaixo:<br/>
<input type="image" src="http://www.portal.com.br/imagens/banner-portal.jpg" width="322" height="90">
</FORM>
- -1
TECNOLOGIAS WEB
ACESSIBILIDADE
- -2
Olá!
Nesta aula, iremos aprender como construir e utilizar os conceitos e tags XHTML com foco na acessibilidade,
garantindo uma universalização do acesso às páginas que se venha a construir. Veremos, ainda, como
aperfeiçoar nosso código para uma maior flexibilidade dos conteúdos on-line utilizando esses recursos.
Ao final desta aula, você será capaz de:
- Apresentar os principais problemas de Aula 08: Acessibilidade na Internet
- Apresentar as principais deficiências e as tecnologias de apoio
- Apresentar as diretrizes do W3C para a Aula 08: Acessibilidade
- Compreender as principais de soluções em HTML para transformar seu site
- Listar os principais aplicativos utilizados neste segmento
1 O que é acessibilidade
Falar sobre a acessibilidade, principalmente na Internet, é falar em romper barreiras para o acesso às
informações.
Todos têm o direito de ver, de ouvir e de sentir o que está acontecendo ao redor de si mesmo.
A preocupação em garantir o total acesso às informações deveria ser meta tanto nas empresas quanto em todas
as esferas governamentais.
Entretanto, o que se observa é que existem portais com ações de cidadania que nem ao menos são acessíveis. O
cliente mais engajado com esses princípios observa que as ações sociais mantidas pela empresa não estão
preocupadas com o básico, ou seja, a acessibilidade.
No mundo, isso está mudando, pois cada empresa está sendo “avaliada pelo mercado” pelo conjunto social de
sua obra e não somente por alguma ação com retorno social.
De acordo com a Lei 5296 de dezembro/2004
“Condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e
equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de
comunicação e informação, por pessoa portadora de deficiência ou com mobilidade reduzida.”
- -3
2 Acessibilidade e a Internet
Ao longo dos anos, tanto o W3C (Consórcio Mundial de Internet) quanto o WAI (Projeto de Acessibilidade na
Internet) não só têm apontado os problemas quanto a esse tema mas também têm feito sugestões de
modificações nos portais e nos conteúdos para a Internet a fim de garantir que problemas como os descritos
abaixo não mais existam.
Problemas apontados pelo W3C e WAI:
2.1 Problema 1
Na Internet, é real a dificuldade que o deficiente visual tem em ler os textos devido às características dos
mesmos. Existem os textos criados a partir de imagens, existem os textos cuja formatação impede o acesso de
pessoas com diversos tipos de problemas visuais (baixa visão, cegueira ou problemas com contrastes) como, por
exemplo, a sintaxe matemática e, também, existem os textos gerados dinamicamente por recursos que
dependem de sistemas instalados na máquina do usuário (Javascript), impedindo o acesso, a qualquer tempo,
por quem quer que seja.
Além disso, existem os textos sem representação fonética, o que causa dificuldade de entendimento dos mesmos
para aqueles que nunca ouviram a nossa língua, como é o caso dos surdos.
Exemplo 1:
Suponha que x seja maior ou igual a 0.
Escrevendo com a simbologia matemática usual, teremos: x≥0.
Se pensássemos na acessibilidade, poderíamos reescrever de maneira semelhante, porém universal: x>=0.
Saiba mais
Para mais informações, leia, agora, os seguintes textos:
• Estatísticas: http://estaciodocente.webaula.com.br/cursos/GRA270/doc
/aula08_estatisticas.pdf
• Tipos de Deficiências & Soluções Tecnológicas: http://estaciodocente.
webaula.com.br/cursos/GRA270/doc/aula08_tiposdedeficiencias.pdf
• Legislação: http://estaciodocente.webaula.com.br/cursos/GRA270/doc
/aula08_legislacao.pdf
•
•
•
- -4
Dessa forma, todo navegador poderia apresentar esse conteúdo sem a necessidade de se instalar fontes e outros
recursos.
Exemplo 2:
Outro exemplo maiscomplexo, porém adaptável, é o uso de matrizes que se apresentariam como na figura.
Poderíamos, na forma acessível, ter o mesmo conteúdo utilizando a seguinte sintaxe: [(L1C1, L1C2),(L2C1,
L2C2)]
Exemplo 3:
Utilizando a sintaxe do MATHML, definida pelo W3C, poderíamos, ao invés da função descrita de forma gráfica
como na figura, ter, na forma acessível, a mesma função, só que utilizando o formato textual: 
f(x)={((x^2-1)/(x-1), se x!=1),(2, se x=1) }
2.2 Problema 2
Existem dificuldades em se interpretar as informações seja pela barreira da língua, seja pela forma de exposição
ou pela busca de informações cujas indicações, muitas vezes, não são dadas ou não estão claras por se acreditar
ser óbvio o que se quer dizer.
Nesse caso, é óbvio para quem fez ou para todos os internautas? É fundamental que os especialistas no assunto
não validem o que foi construído a fim de garantir o perfeito entendimento e acesso de todos.
2.3 Problema 3
Existem pessoas que, por razões diversas, não podem utilizar o mouse. Muitos portais somente permitem
interação do usuário via mouse, solicitando-lhe “clicar para pular a introdução”. Se ele não pode utilizar o mouse,
ele nunca poderá interagir.
- -5
Outro problema, ainda, são os teclados virtuais que, embora disponibilizados por medida de segurança, não
fornecem alternativas àqueles que não podem utilizar o mouse. Nesse caso, estamos falando de impossibilidades
cuja complexidade varia como, por exemplo, um simples cabo de mouse partido, pessoas portadoras de LER
(Lesão por Esforço Repetitivo) e pessoas com paralisia.
2.4 Problema 4
Existem portais que foram projetados para garantir a atenção dos usuários e, no caso de tarefas em que isto não
é possível, não apresentam outras alternativas.
Imagine-se sendo capaz de ler as informações de um portal enquanto dirige um carro. Nada feito. Mas, se o
portal disponibilizasse alguma alternativa que tornasse isso possível, ou se o dispositivo de conexão web
solucionasse esse problema, mesmo dirigindo, poder-se-ia buscar, na internet, informações através de comandos
de voz, e a resposta de tal busca chegaria, também, através de um conteúdo falado. Para isso, tanto os portais
quanto os dispositivos móveis deveriam prever esse tipo de solução.
2.5 Problema 5
Necessidade de frequente atualização de recursos na máquina do usuário.
Sabemos que as inovações tecnológicas são importantes, mas, em muitos casos, o mais importante é o conteúdo,
a informação dentro do portal e não seus recursos funcionais que obrigam o usuário a atualizar os próprios
sistemas.
Imagine que uma pessoa, navegando pela Internet, ficou empolgada para comprar um carro, mas utiliza um
sistema que não possui a última versão de um determinado software ou ainda não possui aquele software
proprietário para acessar o conteúdo do portal da empresa para escolher o modelo do carro. Isso acontece a toda
hora. Muitas vezes, o cliente altera a escolha que fez pela falta de preocupação da empresa em garantir o acesso
de qualquer pessoa ao conteúdo do portal. Imagine o que pode acontecer ao desenvolvedor se o cliente deixar de
comprar um carro de trezentos mil reais porque ele pressupõe que o cliente em potencial para esse tipo de
automóvel deva ter um determinado sistema instalado em sua máquina.
No dia em que as empresas souberem que isso acontece, deve-se lamentar pelos desenvolvedores e pelos web
designers responsáveis pela criação desses portais.
Esses são, apenas, alguns dos problemas que ocorrem, de maneira frequente e recorrente, nos portais. Todos
aqueles que, de alguma forma, lidam com tecnologias devem observar esses problemas e fazer as devidas
adaptações para que, sem exceção, qualquer pessoa com qualquer tecnologia possa aproveitar todas as
informações contidas nos portais da Internet.
- -6
Para isso, é necessário que o desenvolvedor aprenda quais são os recursos que estão a disposição dos deficientes.
3 Sistemas auxiliares
Existem sistemas capazes de auxiliar o usuário tanto na sua navegação pela Internet quanto na interatividade
com dispositivos.
São eles:
• Computadores
Hoje, mais do que nunca, a utilização do computador como recurso de auxílio na construção do
conhecimento garante ao usuário contato com o mundo.
O computador não exige locomoção para ser usado e, por isso, tornou-se a extensão dos olhos, dos
ouvidos, das pernas e dos braços dos usuários com deficiência.
Existem políticas públicas que facilitam a aquisição de computadores e de sistemas para esse tipo de
usuário.
• Sintetizadores de voz
Esse recurso é muito empregado em consorciação de computadores, pois permite que tanto cegos
quanto deficientes motores possam interagir com as pessoas através deles, rompendo, assim, muitas
barreiras.
Atualmente, existem sintetizadores de voz bastante eficientes que apresentam entonações diferenciadas
e funcionam como multilíngues garantindo não só a locução do conteúdo apresentado como também o
reconhecimento de comandos através da voz humana.
• Sistema Braile
Esse sistema de leitura pelo tato, criado por Louis Braille, em 1806, permite ao deficiente visual ler e
escrever utilizando um conceito bastante simples de cela Braille, onde aparecem 2 colunas com 3 pontos
cada uma.
A combinação desses pontos forma letras, números e símbolos e permite ao deficiente se apropriar das
informações escritas e impressas quando se faz uso desse tipo de recurso.
•
•
•
- -7
Existe uma folha de estilo especial para este propósito que, tal qual páginas com layouts de impressão,
indica ao dispositivo Braille que aquele conteúdo é adaptado para ele sem a necessidade de impressão
do mesmo.
Outra informação importante é que nem todos os deficientes visuais dominam o Braille pelas
dificuldades do aprendizado, principalmente para aqueles que perderam recentemente a visão.
• Impressora Braile
O recurso da impressão em Braille proporciona maior conforto ao usuário, pois não há necessidade de
dispositivos especiais para leitura. Contudo, a conversão do conteúdo para o Braille apresenta algumas
dificuldades como, por exemplo, as imagens, os gráficos e as expressões matemáticas não adaptadas.
Além disso, há, também, o alto custo das impressoras Braille.
Hoje, uma impressora jato de tinta pode custar algo em torno de duzentos reais enquanto uma
impressora Braille pode custar mais de quinze mil reais.
Outro dado importante é a conversão de uma lauda impressa para Braille. A equivalência de cada lauda
impressa pode variar entre 2 e 4 folhas em Braille. Imagine o peso de um livro neste sistema.
• Ampliação do conteúdo
Existem formas de se ampliar o conteúdo, quer sejam imagens, quer sejam textos, para aqueles que
possuem baixa visão.
O problema de baixa visão requer que a impressão ampliada seja feita de acordo com a característica do
problema de cada usuário, isto é, existem diversos graus de comprometimento da visão que levam, por
exemplo, à necessidade de textos com letras de tamanho 72. Isso mesmo, o número não está errado, 72 e
equivale a uma letra da grossura de um polegar.
• Libras
Os deficientes auditivos que não possuem implante coclear e não sabem ler lábios necessitam de um
sistema que seja capaz de traduzir para a linguagem brasileira de sinais (LIBRAS) o que está sendo
representado em áudio, em vídeo e, até, em texto.
Neste ponto, você pode estranhar o porquê da tradução do texto para a LIBRAS se o surdo enxerga. Ele
pode ler, sim, mas interpretar a fonética das palavras dando sentido ao texto é uma outra história. Por
isso, alguns programas televisivos dispõem de intérpretes de Libras que aparecem no canto da tela ao
invés de, somente, se colocar o texto com recursos de legenda do tipo .close caption
•
•
•
- -8
4 Produtos e soluções
• Sistema DOSVOX No Brasil, há produtos como o DOSVOX, criado pela equipe do Prof. Antônio Borges do 
Núcleo de Computação Eletrônica da UFRJ e utilizado, no mundo, por mais de 30 mil usuários, que possui 
uma suíte de aplicativosbastante diversificados e frequentemente atualizados que auxiliam o deficiente 
visual não só a navegar pela Internet como também no próprio uso que faz do computador no dia-a-dia. A 
limitação do DOSVOX é o reconhecimento automático de Javascript e, com isso, o uso de tecnologias 
baseadas em sistemas clientes como o AJAX, por exemplo, fica prejudicado. Esse tipo de limitação é 
bastante comum na maioria dos navegadores para dispositivos móveis. Existem alternativas técnicas 
bastante razoáveis que permitem aos portais não serem clientes-dependentes.
• Sistema Motrix É um sistema que permite aos portadores de qualquer tipo de deficiência motora, grave 
ou não, o acesso a um computador, possibilitando-lhes a leitura escrita e a interação com outras pessoas 
através da Internet.
• Braille Fácil Sistema criado pela equipe do Prof. Antônio Borges do Núcleo de Computação Eletrônica 
da UFRJ para auxiliar na conversão de texto para Braille. O Braille Fácil é gratuito e possui, na 3ª geração, 
recursos de imagens. intervox.nce.ufrj.br/brfacil/
• Virtual Vision Desenvolvido no Brasil, este produto é comercializado sob licença especial, pois visa 
auxiliar o deficiente visual na navegação pela Internet e na interatividade com os aplicativos do 
computador pessoal. Clientes deficientes visuais de alguns bancos recebem-no gratuitamente.
• Monet Sistema desenvolvido pela Acessibilidade Brasil, integrável ao Braille Fácil, capaz de converter 
imagens em pontos através da utilização de impressoras Braille.
• Dicionário de Libras Sistema desenvolvido pela Acessibilidade Brasil que traz o dicionário de Libras 
para a Internet. Este sistema não interpreta textos. Ele é apenas um dicionário.
• Rybená Sistema interpretador de LIBRAS. É um produto comercial desenvolvido pela equipe do DFJUG – 
Desenvolvedores Java do Distrito Federal. Este Applet em Java pode ser acoplado ao portal e garantir aos 
surdos uma navegação de melhor qualidade.
• Dirce É um programa gerador e tocador de audiolivros baseado na tecnologia padrão DAISY para livros 
em formato digital com narração em áudio.
• JAWS Leitor de tela comercial. Muito utilizado pelos deficientes visuais. Interpreta javascript. 
freedomscientific.com/products/software/jaws/
• Windows Eve Leitor de tela comercial. Muito utilizado pelos deficientes visuais. Interpreta javascript.
• NVDA Leitor de tela gratuito. Muito utilizado pelos deficientes visuais. Interpreta javascript. nvaccess.
org/
• Complex Table Toolbar Conversor de Tabelas. A equipe do Vision Australia criou uma barra de 
ferramenta para o Mozilla Firefox que valida a acessibilidade nas tabelas e propõe alterações, no próprio 
código, para adaptá-las.
• Opera Navegador com opções muito completas para acessibilidade auxiliando tanto desenvolvedores 
quanto usuários finais na Web.
5 Diretrizes de acessibilidade para o conteúdo da Web 
(WCAG) 2.0
As diretrizes de acessibilidade propostas pelo comitê do W3C vêm, desde 1999, abordando diversos tipos de
problemas e de soluções para garantir acesso universal a todo e qualquer internauta que utilize dispositivos,
móveis ou não, que obedeçam a essas diretrizes.
•
•
•
•
•
•
•
•
•
•
•
•
•
- -9
1999
Em 1999, surge a versão 1.0 chamada de WCAG 1.0.
2008
Com o advento da versão 2.0 em 2008, os critérios de sucesso são apresentados como declarações testáveis que
não são de tecnologia específica. São orientações de como interpretar os critérios de sucesso e sobre como
satisfazê-los em tecnologias específicas.
• Mas o que é WCAG?
A sigla WCAG representa Web Content Accessibility Guidelines. Em uma tradução livre, teremos: Guia de
Acessibilidade aos Conteúdos na Web.
• A quem se destina o WGAG?
O WGAG se destina, principalmente, ao público dos:
- Desenvolvedores de conteúdo Web (autores de páginas, designers de sites, etc.).
- Desenvolvedores de ferramentas de autoria Web.
- Desenvolvedores de ferramentas de avaliação de acessibilidade para a Web.
- Outros que desejam ou que precisam de uma norma técnica de acessibilidade na Web.
6 Os princípios do WGAG 2.0
WCAG 2.0 tem 12 diretrizes que são organizadas em 4 princípios:
• 1. Perceptível
• 2. Operável
• 3. Compreensível
• 4. Robusto
Abordaremos, no curso, os 2 primeiros princípios indicando o próprio WCAG 2.0 como referência para a
complementação do aprendizado.
Para cada orientação, existem critérios de sucesso testáveis que são em três níveis: A, AA e AAA.
Quanto maior o número de letras A, maior o grau de acessibilidade apresentado, isto é, mais princípios foram
atendidos.
•
•
•
•
•
•
- -10
7 Princípio 1 – Perceptível
7.1 Fornecer alternativas de texto para conteúdo não texto
• Alternativas textuais
O desenvolvedor deve fornecer alternativas textuais a qualquer conteúdo não-textual em sua página, permitindo,
assim, que o mesmo possa ser acessível ou alterado em outras formas mais adequadas à necessidade da pessoa.
Exemplo: Impressão em Braille ou ampliada.
• Conteúdo não textual
Para conteúdos não-textuais, a solução é a apresentação de uma alternativa em texto que substitua ou indique o
que se espera no caso apresentado, exceto para as situações indicadas abaixo.
1. : Se o conteúdo não-textual for um controle ou aceitar a entrada de dados, então faz-seControles de Entrada
necessário indicá-lo por um nome que descreva, de forma suficiente, sua finalidade.
2. Recursos Multimídia Baseados em Tempo
Caso se utilize algum recurso dessa espécie, faz-se necessário que as alternativas textuais forneçam uma
identificação descritiva desse conteúdo.
3. Teste
Caso o conteúdo não-textual seja um teste ou um exercício, então deve-se indicar as alternativas em texto,
fornecendo, no mínimo, uma identificação descritiva do conteúdo.
4. Sensorial
Caso queira criar uma experiência sensorial específica através do conteúdo não-textual, faz-se necessário, então,
que as alternativas em texto forneçam, ao menos, uma identificação descritiva do conteúdo.
5. CAPTCHA
E muito utilizado para se certificar que o acesso ao recurso é feito por uma pessoa e não por um computador.
Com isso. sào fornecidas as alternativas textuais que identificam e descrevem a finalidade do conteúdo tornando
disponíveis, assim, as formas alternativas ao CAPTCHA que utiliza saídas diferentes tais como sons.
6. Decoração, Formatação, Invisível
Caso queira utilizar-se de conteúdos não-textuais apenas para formatação visual ou para que não sejam
apresentados nos navegadores, é necessário, então, fazê-lo de forma que possa ser ignorado pelo dispositivo em
uso.
7.2 Fornecer legendas e alternativas de conteúdo de áudio e vídeo
•
•
•
•
- -11
•
Multimídia Baseada em Tempo
Cabe ao desenvolvedor fornecer alternativas para os recursos multimídia baseados em tempo.
• Apenas Áudio e Apenas Vídeo (Pré-gravados)
Apenas Áudio Pré-gravado: O WCAG 2.0 indica que deve ser fornecida uma solução a esse tipo de recurso
para apresentar informações equivalentes ao conteúdo em áudio pré-gravado.
• Apenas Vídeo Pré-gravado
Deve ser fornecida uma solução em áudio que apresente informações equivalentes para o conteúdo em
vídeo pré-gravado.
7.3 Fazer um conteúdo adaptável e disponibilizá-lo para tecnologias 
assistíveis
Adaptável
O WGAG 2.0 recomenda a criação de conteúdos que possam ser apresentados de diferentes maneiras para que
não se percam as informações ou a estrutura.
7.4 Uso de contraste suficiente para tornar as coisas fáceis de se ver e de se 
ouvir
• Discernível Faz-se necessária a criação de alternativas, como a audição e a visualização de conteúdos, 
para a separação do primeiro plano e do plano de fundo no navegador do usuário.
• Utilização de Cores Recomenda-se que a cor não seja utilizada como o único meio visual de transmitir 
informações, identificar visualmente um elemento ou solicitar uma resposta ao usuário.
8 Princípio 2 - Operável
8.1 Permitir que todas as funcionalidades sejam acessíveis via teclado
Acessível por Teclado
É fundamental, para se ter acesso àsfuncionalidades do conteúdo de um portal, que se possa fazê-lo não só
através do uso do mouse mas também através do uso do teclado. Toda a funcionalidade através desses tipos de
dispositivos necessita de temporizações específicas para digitação de informações.
•
•
•
•
•
- -12
Dependendo do elemento em HTML, o texto já se encontra associado através de um atributo obrigatório. No caso
dos elementos de formulário, deve-se utilizar os elementos do tipo label ou os atributos 'title'. Listamos, na
tabela para download, cada função, o nome, o valor e o estado dos elementos em HTML.: estaciodocente.webaula.
com.br/cursos/GRA270/doc/aula08_tabela.pdf
8.2 Dar aos usuários tempo suficiente para ler e para usar o conteúdo
Tempo Suficiente
Quando se trata de acessibilidade, deve-se pensar que cada usuário dispõe de um tempo determinado de
resposta de acordo com a própria percepção ou com a própria condição física. Assim sendo, deve-se dar aos
usuários dos sistemas e dos portais tempo suficiente para a leitura e para o uso do conteúdo dos mesmos.
8.3 Não utilizar conteúdos que provoquem convulsões
Crises
O conteúdo presente em um portal ou sistema não deve provocar convulsões, enjoos ou qualquer tipo de mal-
estar devido à maneira como é apresentado. Imagens com trocas muito rápidas, luzes piscastes ou quaisquer
recursos desse tipo devem ser evitados, pois podem desencadear esse tipo de problema naqueles que navegam
pelo ambiente.
8.4 Ajudar os usuários a navegar e a encontrar o conteúdo
Navegáveis
Cabe ao desenvolvedor ajudar os usuários a navegar e encontrar o conteúdo que procuram dentro do portal em
questão. Os mapas de sites e a estrutura de navegação com opções de mudança para páginas alternativas são
recomendações fortes do WCAG.
No caso de SCRIPT, deve-se utilizar, para cada elemento script apresentado, o NOSCRIPT equivalente.
Código Exemplo
<script type="text/javascript">
document.write("Olá Visitante!")
</script>
<noscript>O seu navegador não está com o Javascript ligado!</noscript>
Outro exemplo
<script type="text/javascript">
document.write("Olá Visitante!")
- -13
</script>
<noscript>Vá direto para o conteúdo acessível<a href=”http://www.universidade.br/acessibilidade.html”
>Página Acessível</a></noscript>
9 Exemplos de funcionalidades acessíveis via teclado
9.1 Atalhos Via Teclado
Para se disponibilizar o acesso aos recursos das páginas via teclado, basta utilizar o atributo accesskey com o
valor da letra a ser pressionada.
No caso do exemplo abaixo, ao se combinar as teclas ALT + SHIFT + C não se precisa navegar com o mouse.
No Internet Explorer, faz-se necessário, além da combinação de teclas, pressionar o ENTER para confirmar que
se deseja navegar pelo link.
Código Exemplo:
<html>
<body>
<a accesskey="C" href="http://www.universidade.br" hreflang="pt-BR"
title="Universidade">
Universidade</a>
</body>
</html>
9.2 Acessando um formulário
Código Exemplo:
<FORM action="submit" method="post">
<LABEL for="usuario" accesskey="U">Nome</LABEL>
<INPUT type="text" id="usuario">
</FORM>
- -14
9.3 Longdesc
Ao se trabalhar com imagens, não ficam claras, pela descrição sucinta no atributo ‘alt’, todas as informações que
poderiam estar disponíveis. Para que se disponibilizem maiores explicações, principalmente quando se trata de
imagens que representam gráficos, deve-se utilizar o atributo ‘longdesc’ que indicará um arquivo externo
contendo maiores explicações a respeito daquela imagem.
Código Exemplo:
<img src="vendas.jpg" alt="Vendas de 2010"
longdesc="vendas_2010.html">
Dentro do ‘vendas_2010.html’, tem-se um texto explicativo como no exemplo abaixo:
O gráfico de vendas de 2010, no primeiro trimestre, representa um aumento de 20% em comparação com igual
período de 2009.
Percebe-se que, com isso, fica fácil poder utilizar bancos de dados para compor dinamicamente o conteúdo dos
‘longdesc’ de cada imagem arquivada nos sistemas dos usuários.
Ao se utilizar <OBJECT>, tem-se o mesmo efeito com o código:
<html>
<body>
<OBJECT data="vendas.jpg" type=”image/jpeg”>
O gráfico de vendas de 2010 no primeiro trimestre representa um aumento de 20% em comparação com igual
período de 2009 <a href=”preco_2010.html”> Verifique nossos preços </a>
</OBJECT>
</body>
</html>
9.4 Links
Neste exemplo, forneceram-se mecanismos para navegação utilizando o ‘link’ que provém de <a href>.
Não se esqueça que <a name>, isto é, a âncora, na mesma página, não fornece um função de ‘link’.
• Exemplo 1:
No exemplo abaixo, o nome é o texto dentro do link, no nosso caso ‘Google’.
Código Exemplo: <a href="www.google.com.br">Google</a>
• Exemplo 2:
Neste exemplo, tem-se, dentro de um link, uma imagem cujo atributo 'alt' fornece o nome.
Código Exemplo: <a href=" www.google.com.br "><img src="logo_google.jpg" alt="Google"></a>
• Exemplo 3:
•
•
•
- -15
• Exemplo 3:
A seguir, o exemplo indica o nome formado a partir da concatenação dos diferentes elementos dentro do link.
Código Exemplo:
<a href=" www.google.com.br "><img src="logo_ google.jpg" alt="Google">Google</a>
• Exemplo 4
Neste exemplo, apresenta-se uma solução para o campo de entrada que tem uma função de texto editável. É
importante que se observe que o elemento ‘label’ está associado ao elemento ‘input’ através do atributo 'for' que,
por sua vez, faz referência ao mesmo através do atributo 'id' do elemento ‘input’. O nome tem como origem o
elemento ‘label’ e, neste caso, utilizou-se ‘Nome’; ‘Prof. Flávio foi empregado como valor do atributo.
• Exemplo 5
Neste exemplo, o campo de entrada tem a mesma função e valor do exemplo anterior, mas obtém o respectivo
nome a partir do atributo 'title'.
Código Exemplo:
<input id="text_1" type="text" value=" Prof. Flávio"
title="Digite o seu primeiro nome">
•
•
•
- -16
9.5 Botões
Existem várias formas de se criar um botão em HTML e estão todas associadas à função ‘botão’.
Exemplo 1
Neste exemplo, utilizou-se o atributo 'value' com o valor ‘Salvar’, ‘Enviar’ ou ‘Cancelar’, como o nome.
Código Exemplo:
<input type="button"
value="Salvar" />
<input type="submit"
value="Enviar" />
<input type="reset" value="Cancelar" /> 
Veja como isso fica no DOSVOX
9.6 Caixa de Verificação
Neste exemplo, tem-se uma caixa de verificação.
- -17
O elemento ‘label’ está associado ao elemento ‘input’ através do atributo 'for‘ que se refere ao atributo 'id' do
elemento ‘input’.
O estado pode ser ‘Selecionado’ ou ‘Desmarcado’ e provém do atributo 'checked'. Ao interagir, pode-se alterar
este estado.
Código Exemplo:
<label for="cb_1">Todos os Cursos</label> <input id="cb_1" type="checkbox" checked="Selecionado">
Percebe-se, pela tela, que o DOSVOX apresenta o elemento marcado.
9.7 Botões de Opção
Foi utilizado, neste exemplo, os botões de opção identificados pelo atributo 'type' no elemento ‘input’
O nome provém do elemento ‘label’. 
Deixou-se o item ‘Análise de Sistemas’ marcado.
Código Exemplo:
<input type="radio" name="curso" id="radio1" checked="checked"/><label for="radio1">Análise de Sistemas<
/label>
- -18
<input type="radio" name="curso" id="radio2" /><label for="radio2">Sistemas de Informação</label>
<input type="radio" name="curso" id="radio3" /><label for="radio3">Web Designer</label>
• Exemplo 1
Utilizou-se o elemento ‘caixa de combinação’ a ser identificado a partir do elemento ‘select’ . O nome é ‘Cursos’ e
é identificado pelo elemento ‘label’ que se relaciona com o elemento ‘option’ que, por sua vez, tem o atributo
'selected' definido como ‘selected’.
Código Exemplo:
<label for="s1">Cursos</label>
<select id="s1" size="1">
<option>Análise de Sistemas</option>
<option selected="selected">Sistemas de Informação</option>
<option>Web Designer</option>
</select>
• Exemplo 2
Este exemplo tem como variante o anterior, definindo o nome com o atributo 'title' no elemento ‘select’. Esta
técnica pode ser utilizada quando não for pretendida uma etiqueta visível.
Código Exemplo:
<select id="s1"title="Cursos" size="1">
<option>Análise de Sistemas</option>
<option selected="selected">Sistemas de Informação</option>
<option>Web Designer</option>
</select>
O uso do ‘title’ para o DOSVOX não trouxe maiores informações ao usuário.
•
•
- -19
9.8 Textarea
• Exemplo 1
Neste exemplo, é analisado o comportamento do elemento ‘textarea’.
A indicação do nome advém da etiqueta ‘Digite aqui seu endereço’ elemento ‘label’ .
O valor é o conteúdo dentro do elemento ‘textarea’, neste caso ‘Av. das Américas S/N’.
Código Exemplo:
<label for="ta_1"> Digite aqui seu endereço </label>
<textarea id="ta_1" >Exemplo: Av. das Américas S/N </textarea>
O DOSVOX coloca para o usuário um exemplo de endereço facilitando, assim, a compreensão do mesmo.
• Exemplo 2
Este exemplo tem a mesma função do anterior só que define o nome utilizando o atributo ‘title’.
Código Exemplo:
<textarea id="ta_1" title=" Digite aqui seu endereço " >
Exemplo: Av. das Américas S/N </textarea>
•
•
- -20
Neste caso, a troca do ‘label’ pelo ‘title’ não permitiu ao DOSVOX a identificação do elemento pelos recursos de
voz.
Cuidado!!!
A utilização do recurso ‘title’ como identificador pode gerar efeitos não esperados quando se trata de usuários
videntes, pois eles podem digitar a partir do seu conteúdo, concatenando-o com o valor descrito. A figura, ao
lado, é um exemplo desse problema.
• Exemplo 3
O recurso do fieldset permite que sejam criados agrupamentos de forma elegante nos sistemas.
Através dele, podem-se definir grupos baseados em funções ou contextos específicos.
O nome provém do elemento ‘legend’.
Código Exemplo:
<fieldset>
<legend>Escolha o Curso:</legend>
<input id="as" type="radio" name="curso" value="AN1" /><label for="as">Análise de Sistemas</label><br />
<input id="si" type="radio" name="curso" value="SI1" /><label for="si">Sistemas de Informação</label><br />
<input id="wd" type="radio" name="curso" value="WD1" /><label for="wd">Web Designer</label>
</fieldset>
•
- -21
O efeito visual deste recurso pode ser acompanhado na figura.
Utilizando navegação via teclado, utilizando ‘tabindex’ para a navegação via tecla TAB.
<fieldset>
<legend>Escolha o Curso:</legend>
<input id="as" type="radio" name="curso" value="AN1" tabindex=”1”/>
<label for="as">Análise de Sistemas</label><br />
<input id="si" type="radio" name="curso" value="SI1" tabindex=”2” />
<label for="si">Sistemas de Informação</label><br />
<input id="wd" type="radio" name="curso" value="WD1" tabindex=”3”/>
<label for="wd">Web Designer</label>
</fieldset>
- -1
TECNOLOGIAS WEB
FOLHAS DE ESTILOS EM 
CASCATA
- -2
Olá!
Nesta aula, iremos aprender como construir e utilizar os conceitos e tags XHTML usando Folhas de Estilos em
Cascata para a construção de páginas Web. Veremos, ainda, como aperfeiçoar nosso código para garantir maior
flexibilidade empregando estes recursos.
Ao final desta aula, você será capaz de:
- Apresentar as principais características das Aula 09: Folhas de Estilos em Cascata
- Compreender a sintaxe utilizada em Aula 09: Folhas de Estilos em Cascata, seu uso e limitações.
- Abordar os diversos tipos de folhas de estilo
- Compreender as principais de soluções para transformar seu site
- Aplicar Aula 09: Folhas de Estilos em Cascata na construção de sites
1 O que são folhas de estilos em cascata?
Folhas de Estilo em Cascata ou CSS (Cascade Style Sheet) são estilos aplicados em HTML. A linguagem HTML, na
sua concepção, não foi projetada para ser utilizada na elaboração de páginas com layouts sofisticados. Como a
HTML é limitada, foi necessário desenvolver uma alternativa capaz de manipular os elementos para garantir que
uma página não fosse mais textos e imagens corridas ou, no máximo, contidas em tabelas.
As Folhas de Estilos em Cascatas têm como funções:
• Definir a aparência das páginas em um único lugar, em vez de repetir-se uma e outra vez no site.
• Facilmente alterar a aparência das páginas, mesmo depois que eles são criados.
• Definir o tamanho da fonte e os atributos semelhantes com a mesma precisão que você tem com um 
processador de texto.
• Definir a posição do conteúdo das páginas com precisão de pixel.
• Definir estilos personalizados.
• Definir as camadas sem a necessidade de pop-ups.
2 Aplicando Folhas de Estilo em Cascata
Existem 3 formas de se aplicar estilo às páginas em HTML.
• In-line
• Interna
• Externa
Veremos as três, a seguir, mas, antes, vejamos como é composta a sintaxe em CSS.
A sintaxe do CSS segue o formato Seletor com uma ou mais declarações:
•
•
•
•
•
•
•
•
•
- -3
Tudo deve ser descrito em minúsculas.
Desta forma, pode-se utilizar mais de uma declaração para o mesmo seletor. Isto é muito mais poderoso do que
se podia fazer em HTML puro.
Para se declarar um estilo, tem-se que determinar como ele será implementado no código: junto ao elemento,
interno ao código ou externo ao código.
3 Formas de se aplicar estilo as páginas em HTML
3.1 In-line
Esta forma descreve o estilo diretamente na tag HTML correspondente. Isto, por um lado, tende a facilitar o
processo, mas, por outro, dificulta a manutenção do código.
Neste caso, aplica-se, em todo o parágrafo, o estilo com a cor vermelha. Veja o resultado disso na figura:
Figura 1 - Código html
- -4
Figura 2 - Navegador
3.2 Interno
Também pode-se implementar os estilos dentro do código da página. A diferença em relação ao anterior é que,
neste caso, o estilo não é definido direto no elemento (tag), mas em uma parte do código cuja aplicação é
indicada através de recursos de identificação. Assim, a manutenção da página fica mais fácil, pois, ao se alterar o
estilo, todos os elementos associados a ele passam a sofrer essa alteração.
Para que se defina os estilos internos da página, deve-se criá-los dentro de tags <style..> </style>, dentro do
bloco <head></head>, como no exemplo a seguir.
Figura 3 - Código html
- -5
Figura 4 - Navegador
Repare que o type é text/css. Além do type, pode-se definir para que tipo de mídia (media) se quer aplicar estes
estilos. Isso é particularmente importante quando queremos diferenciar os estilos por dispositivos, no caso da
acessibilidade.
Podemos ter as seguintes mídias:
A omissão da declaração media determina o valor padrão all.
Exemplo:
No exemplo abaixo, são indicados estilos diferentes para dois tipos de mídias. Neste caso, se a mídia for screen
(monitor), a fonte tem tamanho 25px (25 pixels) em negrito e, se for para impressão ou visualização para
impressão, passa para 10px, também em negrito.
- -6
Figura 5 - Código html
Figura 6 - Navegador
Na saída para visualização da impressão, conforme ilustrado abaixo, repare como a fonte de 25px caiu para
10px. Isto significa que este estilo, adaptado para diferentes mídias, funcionou.
- -7
Figura 7 - Código html
Figura 8 - Visualização da impressão
3.3 Externo
Esta, com toda a certeza, é a maneira mais prática de se manter um portal. Através de arquivos externos,
economiza-se na manutenção de dezenas ou centenas de páginas, pois basta que se altere um arquivo para que
tudo aconteça no portal como um todo.
O arquivo css deve ser um arquivo com extensão css e estar dentro do contexto da sua aplicação, isto é, dentro de
um diretório onde o servidor Web possa alcançá-lo para o seu navegador.
Veja no exemplo que segue. Será criado um arquivo chamado estilo_portal.css com o conteúdo abaixo.
estilo_portal.css
body {background-color: beige}
h1 {color:blue; font-size:20pt}
hr {color:navy}
- -8
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:black}
a:hover {color:red}
a:active {color:yellow}
Olhe como ficou a página. 
Ao passar o mouse sobre o link Google ele muda da cor verde para a cor vermelha por conta do hover.
O link que já foi visitado (visited) passa para a cor preta.
No caso dos links ativos (active), o fundo passa para a cor amarela.
A página nomeando o arquivo externo com os estilos
exemplo.html
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head>
<title>Exemplo CSS</title> 
<link rel="stylesheet" type="text/css" href="estilo_portal.css" /> 
</head> 
<body> 
<h1>Estilos - Externos</h1> 
<p>Aplicação de estilos externos</p> 
<p><a href="http://www.universidade.br" target="_blank">Universidade</a>
</p> 
</body> 
- -9
</html>
4 Não se esqueça do doctype
Existem vários tipos de HTML: , , entre outros.HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict 
Para cada situação, é preciso que se defina o tipo de documento a ser interpretado através da declaração de DTD
(Document Type Definition). Isto não é complicado, mas precisa ser feito de forma consciente, pois alguns
programas editores de código (X)HTML os definem com base no padrão do fabricante do software e não de
acordo com padrão pessoal.
Até aqui, teve-se a liberdade de não defini-los, mas, quando se lida com CSS e, por conseguinte, com XHTML, isto
se torna imperativo.
Vejamos, agora, a diferença básica de alguns dos tipos de HTML:
• Strict – Este padrão impões regras muito rígidas na descrição dos elementos em (X)HTML.
• Transitional – Este é um padrão mais flexível, pois possibilita a escrita de códigos HTML compatíveis 
com outras versões e, ainda, permite que sejam adaptados aos navegadores Web.
• Frameset - Utilizado quando desejamos trabalhar com frames.
Exemplos
• XHTML 1.0 (Strict, Transitional e Frameset)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
" ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
• HTML 4.01 (Strict, Transitional e Frameset)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
•
•
•
•
•
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
- -10
5 Seletores
Seletores estão para CSS como tags estão para HTML. O seletor é uma strings que identifica o elemento HTML ao
qual a regra será aplicada.
Trabalhar com seletores é simples. Veja a sintaxe:
Exemplo:
body {
font-size: 0.8em;
color: navy;
}
Neste caso, aplica-se ao corpo da página uma formatação de texto com letras de tamanho 0.8em na cor navy.
6 Tipos de seletores
Existem diversos tipos de seletores, mas, nesta aula, apenas serão abordados alguns dos mais utilizados.
Saiba mais
A respeito das Unidades utilizadas em (X)HTML e CSS: www.w3.org/TR/CSS2/syndata.
html#values
- -11
Simples
Onde a regra se aplica ao tipo e/ou aos atributos do elemento e não à posição do mesmo.
Em resumo, é aquele seletor constituído de um só elemento.
Exemplo: h1, p.
Contextual
Onde o seletor é associado aos elementos de acordo com as posições que ocupam na
estrutura do documento. Na verdade, o seletor contextual é um conjunto de seletores
simples.
Exemplo: h1.inicio b.
Universais
Aplicável a todos os elementos.
Exemplo: * {color : red;}
Classes
Este seletor pode ser aplicado a qualquer elemento (X)HTML, tendo em vista que se possui
a prerrogativa de se criar um nome para ele.
Exemplo: .estilo_topo { color: navy;} – É importante perceber que, neste caso, criou-se uma classe chamada
estilo_topo. Dessa forma, ao ser aplicado, tem-se a cor navy no elemento associado.
Exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
/* Exemplo de Comentário: Estilo Aplicado somente ao
Cabeçalho da Página
*/
.estilo_cabecalho
{
color:navy;
}
</style>
</head>
<body>
- -12
<h1 class="estilo_cabecalho">Cabeçalho Página</h1>
</body>
</html>
7 Pseudo-classes
São complementações feitas aos seletores que são criadas para acessar as informações que não estão disponíveis
na árvore do documento.
Sintaxe:
seletor:pseudo-classe {propriedade:valor} ou, ainda, seletor.classe:pseudo-classe {propriedade:valor}
Âncora
a:active {color:#0000FF} /* link selecionado */
a:link {color:#FF0000} /* link ainda não visitado*/
a:visited {color:#00FF00} /* link visitado*/
a:hover {color:#FF00FF} /* mouse sobre o link */
O a:hover deve proceder o a:link e o a:visited para funcionar.
O a:active deve vir sempre após o a:hover.
• :first-child
Define um elemento específico que é o primeiro filho de um elemento.
Exemplo:
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child
{
color:red
}
</style>
</head>
<body>
Exemplo de Pseudo-Class
<p>Primeiro Parágrafo - Exemplo Pseudo-classe</p>
•
http://www.w3.org/TR/html4/loose.dtd
- -13
<p>Primeiro Parágrafo - Exemplo Pseudo-classe</p>
</body>
</html>
Veja como ficou:
http://www.universidade.br/formulario" method="post">
Os pseudo-elementos são:
• - Adiciona o conteúdo após o elemento.:after 
• :before - Adiciona o conteúdo antes do elemento.
• :first-letter - Aplica o estilo na primeira letra do texto.
• :first-line - Aplica o estilo na primeira linha do texto.
8 ID
Este é um seletor que se identifica com um único elemento (X)HTML, isto é, ele não pode ser aplicado a outro
elemento dentro do documento.
Sua identificação é através do sinal # junto ao nome.
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
•
•
•
•
- -14
/* Estilo Aplicado somente ao
Cabeçalho da Página
*/
#estilo_cabecalho
{
color:#000080;
background:#ffcc33;
}
</style>
</head>
<body>
<h1 id="estilo_cabecalho">Cabeçalho Página</h1>
<h1> Outro Cabeçalho Página</h1>
</body>
</html>
Veja como ficou o resultado:
9 Descendentes ou encadeados
São todos os elementos que descendem de outro.
Exemplo:
ul li a {color:#80ff00;}
Neste caso, todos os links de todos os itens de uma lista não ordenada serão verde-limão.
Veja como ficou na figura abaixo:
- -15
10 Texto
Através das folhas de estilo em cascata, será possível alterar as fontes e as propriedades das mesmas na página.
Para isso, faz-se necessário que se aprenda bem as seguintes propriedades:
• font-family
É a fonte propriamente dita.
Ex: Arial, Verdana, Courier New.
Porém, saiba que a fonte escolhida deve estar instalada no microcomputador do usuário. Caso contrário,
aparecerão outras fontes em substituição a ela e não se terá o mesmo apelo visual. 
Ex: font-family: "Times New Roman"
• font-size
Define-se, utilizando esta propriedade: o tamanho da fonte.
Ex: font-size: 12px.
Veja outros exemplos:
1em é igual ao tamanho da fonte corrente. Ex: font-size: 2em
px é a unidade de referência para pixel. Ex: font-size: 12px
pt é a unidade para pontos. Ex: font-size: 12pt%
% é a unidade para porcentual. Ex: font-size: 80%
Dica Importante:
Algumas vezes, é interessante ‘zerar’ algumas definições. Para isso busque, no Google, zerar css ou, em inglês,
reset css.
• font-weight
É o peso da fonte.
Saiba mais
Saiba mais sobre os diversos seletores em www.w3c.br/divulgacao/guiasreferencia/css2
/#mod-seletores
•
•
•
- -16
Ex: font-weight: bold ou font-weight: normal
• font-style
É a inclinação do texto. Se ele está, ou não, em itálico.
Ex: font-style: italic ou font-style: normal.
• text-decoration 
O texto pode ter alguns elementos de marcação.
- text-decoration: overline, apresenta uma linha sobre o texto.
- text-decoration: line-through, apresenta uma linha atravessando o texto.
- text-decoration: underline, sublinha o texto. Cuidado, pois essa opção confunde o usuário com link.
• text-transformation 
São recursos interessantes, pois pode-se trabalhar maiúsculas, minúsculas e letras capitalizadas.- text-transform: capitalize, apresenta a primeira letra de cada palavra em maiúscula.
- text-transform: uppercase, apresenta todas as letras em maiúsculas.
- text-transform: lowercase, apresenta todas as letras em minúsculas.
- text-transform: none, resseta qualquer estilo neste contexto.
Exemplo:
body {
font-family: verdana, helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
•
•
•
- -17
Veja como ficou no navegador
• text-spacing
Cuida do espaçamento, identação e alinhamento entre letras e palavras.
• letter-spacing e word-spacing – espaçamento entre letras e palavras respectivamente. O padrão é normal.
• line-height – configura a altura entre as linhas. tal como ocorre com o espaçamento entre parágrafos no editor
de texto. Múltiplos do tamanho da fonte ou %. O padrão é normal.
• text-align – alinha o texto pela direita, ao centro, à esquerda ou justificado. Opções: left, right, center e justify.
• text-indent – indica a identação da primeira linha do parágrafo.
Exemplo:
p {
letter-spacing: 0.75em;
word-spacing: 2em;
line-height: 2.0;
text-align: justify;
}
11 Margens e espaçamentos
São as propriedades mais comumente utilizadas no espaçamento de elementos, em que as margens são espaços
fora do elemento e o padding são os espaços dentro do elemento.
Exemplo:
p {
letter-spacing: 0.75em;
word-spacing: 2em;
line-height: 2.0;
•
- -18
text-align: justify;
}
Repare como ficou a aplicação deste código em um elemento h2. Existe uma margem e um espaçamento entre o
elemento e a borda da margem.
Os 4 lados podem ser trabalhados de forma individual utilizando-se as seguintes propriedades:
margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom e padding-
left
Elas são explicadas, mais facilmente, pela figura abaixo.
Exemplo de Layout com as propriedades:
- -19
12 Bordas
Para adicionarmos uma borda ao redor do elemento, basta trabalharmos com a propriedade border-style cujos
valores são:
solid, dashed, dotted, groove, ridge, double, além de inset e outset.
Além dessas propriedades para border-style, devemos trabalhar a espessura da mesma com a propriedade
border-widht.
Veja nos exemplos abaixo:
h2 {
border-style: dashed; /* estilo de borda pontilhado */
border-width: 3px; /* espessura de borda 3px */
border-left-width: 25px; /* espessura da borda a esquerda de 25px */
border-right-width: 10px; /* espessura da borda a direita de 10px */
border-color: navy; /* cor da linha da borda azul */
}
h1 {
font-size: 5em; /* fonte tamanho 5 vezes o tamanho da fonte corrente */
color:#ccff00; /* cor da fonte esverdeada */
background-color: #006400; /* cor do fundo verde escuro */
border-top: 2px solid #ffcc00; /* borda superior com espessura de 2px estilo sólido e cor laranja */
border-bottom: 2px solid #ffcc00; /* borda inferior com espessura de 2px estilo sólido e cor laranja */
}
- -20
13 Listas de links
Para se criar uma barra de navegação como um menu, faz-se necessário que se conheça mais alguns detalhes. Na
verdade, um menu de navegação nada mais é do que uma lista de links.
Veja o código ao lado:
p {
letter-spacing: 0.75em;
word-spacing: 2em;
line-height: 2.0;
text-align: justify;
}
Existe uma propriedade na definição da lista chamada list-style-type que determina como a lista vai se
comportar quanto à existência de marcadores. Neste caso, o valor está como none tendo em vista que uma barra
de navegação não precisa de marcadores.
Além disso, as margens e espaçamentos estão zerados com o intuito de remover os valores definidos nos
navegadores Web.
Para listas verticais, o código é outro, pois somente é preciso definir um estilo para a tag <a> a fim de se orientar
como os links irão se comportar. No exemplo abaixo, foi definido um bloco por ser um menu vertical.
a
{
display:block;
width:100px;
}
Acompanhe no código completo:
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
- -21
a
{
display:block;
width:100px;
background-color:orange;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Universidade</a></li>
<li><a href="#news">Cursos</a></li>
<li><a href="#contact">Fale conosco</a></li>
<li><a href="#about">Créditos</a></li>
</ul>
</body>
Para o caso de Itens alinhados teremos que utilizar um estilo para li.
li
{
display:inline;
}
Para se deixar os itens lado a lado, pode-se flutuá-los à esquerda utilizando:
- -22
li
{
float:left;
}
14 Na prática
Agora que você já conhece os principais recursos de CSS, que tal juntar tudo isto e mais um pouco em uma
página organizando um menu para construir uma página exemplo? É só digitar o código abaixo e acompanhar,
no seu navegador, o exercício. Tente alterar os valores das propriedades e veja o resultado.
Vamos começar analisando um exemplo bastante simples e, depois, outro um pouco maior e mais complexo:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Exemplo</title>
<style type="text/css" media="screen">
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<a href="http://www.universidade.br/menu/" title="Página Principal" class="current">Universidade</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Cursos">Cursos</a>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
http://www.w3.org/1999/xhtml
- -23
<ul>
<li>
<a href="http://www. universidade.br/menu/" title="Graduação">Graduação</a>
</li>
<li>
<a href="http://www. universidade.br/menu/" title="Graduação a Distância">Graduação a Distância</a>
</li>
<li>
<a href="http://www. universidade.br/menu/" title="Pós-Graduação">Pós-Graduação</a>
</li>
</ul>
</li>
<li>
<a href="http://www. universidade.br/menu/" title="Campus Virtual">Campus Virtual</a>
</li>
</ul>
</body>
</html>
O resultado é muito interessante. Construímos um menu com sub-menu sensível ao mouse. Quando se passar o
mouse sobre o item ‘Cursos’, ele explodirá os sub-itens. Acompanhe a sequência de imagens.
Viu como é fácil? Agora, analisemos o exemplo mais complexo. Não fique preocupado com o tamanho, pois são
mais itens no menu. Lembre-se de revisar a aula e buscar, no site do W3C, sua complementação.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- -24
<html>
<head>
<title>Menu</title>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Aqui cuidamos estilo para o bloco que irá representar o Menu */
#bloco {
padding: 25px 15px 0 15px;
background: #67A897;
}
/* Aqui cuidamos do estilo da lista do Menu */
ul#menu {
list-style-type: none;
width: 100%;
position: relative;
height: 27px;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 13px;
font-weight: bold;
margin: 0;
padding: 11px 0 0 0;
}
/* Aqui cuidamos do estilo do item da lista do Menu */
ul#menu li {
display: block;
float: left;
margin: 0 0 0 4px;
height: 27px;
- -25
}
/* Aqui cuidamos do estilo do item da lista no Menu */
ul#menu li.left {
margin: 0;
}
/* Aqui cuidamos do estilo do link do item da lista no Menu */
ul#menu li a {
display: block;
float: left;
color: #fff;
background: #4A6867;
line-height: 27px;
text-decoration: none;
padding: 0 17px 0 18px;
height: 27px;
}
/* Aqui cuidamos do estilo do link do item da lista no Menu */
ul#menu li a.right {
padding-right: 19px;
}
/* Aqui cuidamos do estilo do hover no link do item da lista no Menu */
ul#menu li a:hover {
background: #2E4560;
}
/* Aqui cuidamos do estilo link corrente do item da lista no Menu */
ul#menu lia.current {
color: #2E4560;
background: #fff;
}
/* Aqui cuidamos do estilo do hover no link corrente do item da lista no Menu */
ul#menu li a.current:hover {
color: #2E4560;
- -26
background: #fff;
}
/* Aqui cuidamos do estilo da cor link do item da lista no Menu */
ul#menu li a {
color: #80ff00;
}
#
</style>
</head>
<body>
/* Aqui definimos um bloco do menu com a tag div (divisão), separando-o do resto da página. Este recurso é
muito utilizado para substituir o recurso de tabela nos posicionamentos e lay-outs */
<div id="bloco">
<ul id="menu">
<li>
<a href="http://www.universidade.br/menu/" title="Página Principal" class="current">Universidade</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Admissão">Admissão</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Cursos">Cursos</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Unidades">Unidades</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Serviços">Serviços</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Alunos">Alunos</a>
</li>
- -27
<li>
<a href="http://www.universidade.br/menu/" title="Empresa">Empresa</a>
</li>
<li>
<a href="http://www.universidade.br/menu/" title="Campus Virtual">Campus Virtual</a>
</li>
</ul>
</div>
<h1>Novos Cursos em EAD</h1>
<h2>Gestão da Tecnologia da Informação</h2>
O curso habilita o aluno para que atue em organizações de qualquer setor (público ou privado), indústria,
comércio e empresas que utilizam as tecnologias da informação e comunicação como diferencial estratégico para
suas operações e decisões. Além disso, o gestor da tecnologia da informação é um profissional apto a prestar
assessoria e consultoria nas diversas áreas das organizações.<h2>Análise e Desenvolvimento de Sistemas</h2>
O profissional da área de Análise e Desenvolvimento de Sistemas administra e mantém softwares que apoiam o
funcionamento de uma organização. Possui conhecimento para a criação de projetos de automação de processos
administrativos e para a gestão do desenvolvimento de sistemas. Também aprende as técnicas para documentar,
testar e implantar o sistemas de informação como também para usar ferramentas metodológicas de garantia de
qualidade em sistemas de informação.<h2> Sistemas de Informação </h2>
O Bacharel em Sistemas de Informação estará apto a atuar com inovação, planejamento e gerenciamento da
informação e da infraestrutura de tecnologia da informação alinhados às estratégias organizacionais como
também com o desenvolvimento e evolução de sistemas de informação e da infraestrutura de informação e
comunicação, ambos aplicados aos processos organizacionais.
</body>
</html>
Saiba mais
Quer conhecer as outras propriedades? Ainda com dúvida? Aprenda mais com o W3C em:
www.w3.org/TR/CSS2/visuren.html#display-prop.
- -1
TECNOLOGIAS WEB
FOLHAS DE ESTILOS EM CASCATA - LAYOUT
- -2
Olá!
Nesta aula, iremos aprender como construir e utilizar os conceitos de layouts com Folhas de Estilos em Cascata.
Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade utilizando estes recursos.
Ao final desta aula, você será capaz de:
- Apresentar as principais características de Layouts utilizando Folhas de Estilos em Cascata
- Compreender a sintaxe avançada para Folhas de Estilos em Cascata, seu uso e limitações.
- Abordar os diversos tipos de folhas de layout
- Compreender as principais de soluções para transformar seu site.
1 Blocos e elementos alinhados
Com o surgimento da CSS, pode-se elaborar layouts extremamente complexos utilizando recursos de blocos ou
alinhando elementos. Para isso, utilizam-se:
• Bloco de Elementos
<div> - define um bloco para dividir os elementos na página. Essa tag sinaliza uma divisão lógica na
página. Ela é utilizada para trechos em bloco.
• Elementos Alinhados
<span> - alinha os elementos. Essa tag informa ao navegador a, simplesmente, aplicar o estilo no que
está entre suas tags. Utiliza-se <span> quando se quer mudar o estilo dos elementos sem ter que colocá-
los em um novo bloco dentro do documento. Ela é utilizada para configurações em trechos de parágrafos.
Exemplos:
<div style="text-align: center;"> <div style="text-align: center;">
<span style="color : #f00;">Estácio</span>
2 Layouts
Você já possui todos os elementos para criar páginas Web de forma prática utilizando Folhas de Estilo em
Cascata.
•
•
- -3
Vejamos alguns exemplos de layout que congregam todas as funcionalidades que foram estudadas até agora.
Exemplo 1: Layout com 2 colunas, topo e rodapé.
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemplo</title>
<style type="text/css">
#bloco {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#topo {
padding: .5em;
background-color: #0000a0;
border-bottom: 1px solid gray;
}
#topo h1 {
padding: 0;
margin: 0;
color: #F5F5F5;
}
#coluna_esquerda {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
- -4
#conteudo {
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#rodape {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
h3 {
font-weight: bold;
color: blue;
}
#coluna_esquerda {
margin: 0 0 1em 0;
}
#conteudo h2 {
margin: 0 0 .5em 0;
}
</style>
</head>
<body>
<div id="bloco">
<div id="topo">
<h1>Cursos</h1>
</div>
<div id="coluna_esquerda">
- -5
<p>
A Universidade interativa oferece diferentes possibilidades para quem quer estudar utilizando as novas
tecnologias de informação disponíveis para aprendizagem: cursos que privilegiam aulas ao vivo, transmitidas via
satélite, e aulas on-line, que oferecem o conteúdo via internet. Em ambos os casos, você conta com flexibilidade
para acessar os conteúdos e as aulas.
</p>
</div>
<div id="conteudo">
<h2>Cursos a Distância</h2>
<h3>
<p>
Gestão da Tecnologia da Informação
</p>
</h3>
<p>
O curso habilita o aluno para que atue em organizações de qualquer setor (público ou privado), indústria,
comércio e empresas que utilizam as tecnologias da informação e comunicação como diferencial estratégico para
suas operações e decisões. Além disso, o gestor da tecnologia da informação é um profissional apto a prestar
assessoria e consultoria nas diversas áreas das organizações.
</p>
<h3>
<p>
Análise e Desenvolvimento de Sistemas
</p>
</h3>
<p>
O profissional da área de Análise e Desenvolvimento de Sistemas administra e mantém softwares que apoiam o
funcionamento de uma organização. Possui conhecimento para a criação de projetos de automação de processos
administrativos e para a gestão do desenvolvimento de sistemas. Também aprende as técnicas para documentar,
testar e implantar os sistemas de informação como também para usar ferramentas metodológicas de garantia de
qualidade em sistemas de informação.
</p>
- -6
<h3>
<p>
Sistemas de Informação
</p>
</h3>
</p>
O Bacharel em Sistemas de Informação estará apto a atuar com inovação, planejamento e gerenciamento da
informação e da infraestrutura de tecnologia da informação alinhados às estratégias organizacionais como
também com o desenvolvimento e evolução de sistemas de informação e da infraestrutura de informação e
comunicação, ambos aplicados aos processos organizacionais.
</p>
</div>
<div id="rodape">
Universidade
</div>
</div>
</body>
</html>
Exemplo: Layout com 2 colunas, topo e rodapé.
- -7
Exemplo 2: Layout com 2 colunas, topo e rodapé.
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemplo</title>
<style type="text/css">
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}
#bloco {
width: 90%;
margin: 10px auto;
background-color:#fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
- -8
#topo {
padding: .5em;
background-color: #0000a0;
border-bottom: 1px solid gray;
}
#topo h1 {
padding: 0;
margin: 0;
color: #F5F5F5;
}
#coluna_esquerda {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#coluna_direita
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#conteudo {
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#rodape {
clear: both;
margin: 0;
- -9
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
h3 {
font-weight: bold;
color: blue;
}
#coluna_esquerda {
margin: 0 0 1em 0;
}
#coluna_direita {
margin: 0 0 1em 0;
}
#conteudo h2 {
margin: 0 0 .5em 0;
}
</style>
</head>
<body>
<div id="bloco">
<div id="topo">
<h1>Cursos</h1>
</div>
<div id="coluna_esquerda">
<p>
A Universidade interativa oferece diferentes possibilidades para quem quer estudar utilizando as novas
tecnologias de informação disponíveis para aprendizagem: cursos que privilegiam aulas ao vivo, transmitidas via
satélite, e aulas on-line, que oferecem o conteúdo via internet. Em ambos os casos, você conta com flexibilidade
para acessar os conteúdos e as aulas.
</p>
- -10
</div>
<div id="coluna_direita">
<p>
Inscreva-se <a href="">Já</a>
</p>
</div>
<div id="conteudo">
<h2>Cursos a Distância</h2>
<h3>
<p>
Gestão da Tecnologia da Informação
</p>
</h3>
<p>
O curso habilita o aluno para que atue em organizações de qualquer setor (público ou privado), indústria,
comércio e empresas que utilizam as tecnologias da informação e comunicação como diferencial estratégico para
suas operações e decisões. Além disso, o gestor da tecnologia da informação é um profissional apto a prestar
assessoria e consultoria nas diversas áreas das organizações.
</p>
<h3>
<p>
Análise e Desenvolvimento de Sistemas
</p>
</h3>
<p>
O profissional da área de Análise e Desenvolvimento de Sistemas administra e mantém softwares que apoiam o
funcionamento de uma organização. Possui conhecimento para a criação de projetos de automação de processos
administrativos e para a gestão do desenvolvimento de sistemas. Também aprende as técnicas para documentar,
testar e implantar os sistemas de informação como também para usar ferramentas metodológicas de garantia de
qualidade em sistemas de informação.
</p>
<h3>
- -11
<p>
Sistemas de Informação
</p>
</h3>
</p>
O Bacharel em Sistemas de Informação estará apto a atuar com inovação, planejamento e gerenciamento da
informação e da infraestrutura de tecnologia da informação alinhados às estratégias organizacionais como
também com o desenvolvimento e evolução de sistemas de informação e da infraestrutura de informação e
comunicação, ambos aplicados aos processos organizacionais.
</p>
</div>
<div id="rodape">
Universidade
</div>
</div>
</body>
</html>
Veja o resultado no navegador Web:
- -12
Exemplo 3: Por fim, tem-se um layout mais complexo que permite demonstrar o que há de mais próximo dos
layouts de páginas a serem construídas no seu dia a dia. Veja o código e acompanhe o resultado.
Layout 3 colunas, além do topo e rodapé, sendo que este com links de navegação.
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" conteudo="text/html; charset=iso-8859-1">
<title>Exemplo</title>
<style type="text/css" media="screen">
.botao_proximo a:link, .botao_proximo:visited
{
display: block;
padding: .2em .5em;
background-color: #03F;
color: #fff;
border: 1px solid #006;
width: 11em;
text-decoration: none;
text-align: center;
}
.botao_proximo a:hover, .botao_proximo a:active
{
background-color: #fff;
color: #006;
}
body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: georgia, times, "times new roman", serif;
color: #000;
- -13
background-color: #fff;
}
a:link { color: #036; }
a:visited { color: #066; }
a:hover, a:active
{
color: #fff;
background-color: #036;
}
div#logo
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#logo h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
div#conteudo
{
background-image: url(nav_col_base.jpg);
background-repeat: repeat-y;
}
div#bloco2
{
background-image: url(more_col_base.jpg);
background-repeat: repeat-y;
background-position: right;
- -14
}
div#navegacao
{
float: left;
width: 150px;
padding-top: 2em;
}
div#navegacao ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
div#navegacao ul li { margin-top: 4px; }
#navegacao ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-image: url(nav_base.jpg);
background-repeat: repeat-y;
}
#navegacao ul li a:hover
{
color: #fff;
background-color: #ccc;
background-image: url(nav_base2.jpg);
background-repeat: repeat-y;
}
div#mais
- -15
{
float: right;
width: 160px;
margin: 0;
padding: 2em 10px 0 0;
color: #000000;
}
div#mais h3
{
margin-top: 0;
color: #fff;
padding: .2em;
background-image: url(mais.jpg);
background-position: right;
background-repeat: repeat-y;
}
div#conteudo
{
margin-left: 190px;
margin-right: 200px;
}
div#conteudo h2
{
font-size: 18px;
color: #036;
margin: 0;
padding-top: 1em;
font-weight: bold;
}
div#conteudo { line-height: 150%; }
#limpa_div
{
- -16
clear: both;
height: 1em;
}
div#rodape
{
clear: both;
padding: .5em 1em;
border-top: 1px solid #999;
text-align: right;
}
div#rodape ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
div#rodape li
{
display: inline;
margin-right: 1em;
}
</style>
</head>
<body>
<div id="logo">
<h1>Universidade</h1>
</div>
<div id="bloco">
<div id="bloco2">
<div id="navegacao">
<ul>
<li><a href="#">Graduação</a></li>
- -17
<li><a href="#">Graduação a Distância</a></li>
<li><a href="#">Pós-graduação</a></li>
</ul>
</div>
<div id="mais">
<h3>Maiores Informações</h3>
<p>Inscreva-se <a href="">Já</a></p>
</div>
<div id="conteudo">
<h2>Cursos</h2>
<h3>
<p>
Gestão da Tecnologia da Informação
</p>
</h3>
<p>
O curso habilita o aluno para que atue em organizações de qualquer setor (público ou privado), indústria,
comércio e empresas que utilizam as tecnologias da informação e comunicação como diferencial estratégico para
suas operações e decisões. Além disso, o gestor da tecnologia da informação é um profissional apto a prestar
assessoria e consultoria nas diversas áreas das organizações.
</p>
<h3>
<p>
Análise e Desenvolvimento de Sistemas
</p>
</h3>
<p>
O profissional da área de Análise e Desenvolvimento de Sistemas administra e mantém softwares que apoiam o
funcionamento de uma organização. Possui conhecimento para a criação de projetos de automação de processos
administrativos e para a gestão do desenvolvimento de sistemas. Também aprende as técnicas para documentar,
testar e implantar os sistemas de informação como também para usar ferramentas metodológicas de garantia de
qualidade em sistemas de informação.
- -18
</p>
<h3>
<p>
Sistemas de Informação
</p>
</h3>
</p>
O Bacharel em Sistemas de Informação estará apto a atuar com inovação, planejamento e gerenciamento da
informação e da infraestrutura de tecnologia da informação alinhados às estratégias organizacionais como
também com o desenvolvimento e evolução de sistemas de informação e da infraestrutura de informação e
comunicação, ambos aplicados aos processos organizacionais.
</p>
<p class="botao_proximo"><a href="JavaScript:history.back()">Retorna</a></p>
</div>
<div id="limpa_div"></div>
</div>
</div>
<div id="rodape">
<ul>
<li><a href="#">A Empresa</a></li>
<li><a href="#">Trabalhe Conosco</a></li>
<li><a href="#">Estatísticas</a></li>
<li><a href="#">Copyright &copy; Universidade </a></li>
</ul>
</div>
</body>
</html>
Veja o resultado na figura abaixo:
- -19
E se os estilos do navegadorWeb fossem desligados, como ficaria nosso site?
Com mais esta aula, você viu a importância da utilização de Folhas de Estilos em Cascata para a construção de
layouts bem elaborados. Agora, tudo dependerá da sua criatividade.
Foi ótimo estarmos juntos durante nosso curso.
	01 APRESENTAÇÃO DO AMBIENTE DISTRIBUÍDO DA INTERNET
	Olá!
	1 Onde tudo começou
	2 ARPA
	3 Requisitos da Arpanet - A origem do sucessor
	4 Primeiras redes sociais
	4.1 BITNET
	4.2 USENET
	4.3 FIDONET
	5 Linha do Tempo
	6 Servidores registrados na Internet
	O que vem na próxima aula
	CONCLUSÃO
	02 APRESENTAÇÃO DO AMBIENTE DISTRIBUÍDO DA INTERNET
	Olá!
	1 O que é protocolo?
	2 Como isso funciona?
	3 Correio eletrônico
	3.1 SMTP
	3.2 POP3
	3.3 IMAP
	3.4 FTP
	3.5 HTTP
	4 Mas o que é URL?
	O que vem na próxima aula
	CONCLUSÃO
	03 SEGURANÇA NA INTERNET
	Olá!
	1 A internet é segura?
	2 Tipos de ataque
	Cavalo de Tróia
	Quebra de Senha
	Denial Of Service (DOS)
	Mail Bomb
	Phreaking
	Spoofing
	Scamming
	3 Como dificultar a quebra de senhas
	4 Como dificultar o roubo de informações via e-mail
	5 Dicas para proteger seu e-mail
	6 Criptografia
	O que vem na próxima aula
	CONCLUSÃO
	04 TIPOS DE APLICATIVOS QUE EXISTEM NA INTERNET
	Olá!
	1 Internet & Aplicativos para navegação
	1.1 Navegadores
	1.2 Discadores
	1.3 Comunicadores Instantâneos
	1.4 Compartilhamento de Arquivos
	1.5 Editores HTML
	1.6 Segurança de Rede
	Antivírus
	Firewall
	Proteção contra spywares
	Proteção contra trojans
	Criptografia
	1.7 VOIP
	1.8 E-mail
	1.9 Acesso Remoto
	Clientes FTPe SFTP
	Gerenciador de Downloads
	1.10 Servidores Web
	2 WEB 2.0
	O que vem na próxima aula
	CONCLUSÃO
	05 INTRODUÇÃO AO HTML
	Olá!
	1 HTML
	2 Estrutura
	3 Documento HTML
	4 Comandos em HTML
	<TITLE>
	<STYLE>
	<SCRIPT>
	<LINK>
	<META>
	5 Tags para web
	5.1 Tags de Corpo
	5.2 Caracteres e seus Controles
	
	6 Controle de Caracteres
	Quebra de Linha
	Centralização de Elementos
	7 Tags para web - listas
	8 Embarcando objeto em sua página (Tag: <embed>)
	9 Cabeçalhos (Tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
	10 Outros recursos
	O que vem na próxima aula
	CONCLUSÃO
	06 TABELAS
	Olá!
	
	1 A Construção
	2 Tag: <TABLE>
	3 Cabeçalhos nas colunas
	O que vem na próxima aula
	CONCLUSÃO
	07 FORMULÁRIOS
	Olá!
	1 Formulários
	2 Modelo básico
	3 Tag <input>
	4 Método de envios de dados
	5 Atributos
	5.1 Caixa de entrada de texto multilinha
	5.2 Caixa de entrada de texto
	5.3 Caixa de senha
	5.4 Caixa de verificação
	5.5 Botão de rádio
	5.6 Caixa de seleção
	5.7 Campo invisível
	5.8 Botão cancelar
	5.9 Botão enviar
	5.10 Imagem
	08 ACESSIBILIDADE
	Olá!
	1 O que é acessibilidade
	2 Acessibilidade e a Internet
	2.1 Problema 1
	2.2 Problema 2
	2.3 Problema 3
	2.4 Problema 4
	2.5 Problema 5
	3 Sistemas auxiliares
	Computadores
	Sintetizadores de voz
	Sistema Braile
	Impressora Braile
	Ampliação do conteúdo
	Libras
	4 Produtos e soluções
	5 Diretrizes de acessibilidade para o conteúdo da Web (WCAG) 2.0
	Mas o que é WCAG?
	A quem se destina o WGAG?
	6 Os princípios do WGAG 2.0
	7 Princípio 1 – Perceptível
	7.1 Fornecer alternativas de texto para conteúdo não texto
	7.2 Fornecer legendas e alternativas de conteúdo de áudio e vídeo
	Multimídia Baseada em Tempo
	Apenas Áudio e Apenas Vídeo (Pré-gravados)
	Apenas Vídeo Pré-gravado
	7.3 Fazer um conteúdo adaptável e disponibilizá-lo para tecnologias assistíveis
	7.4 Uso de contraste suficiente para tornar as coisas fáceis de se ver e de se ouvir
	8 Princípio 2 - Operável
	8.1 Permitir que todas as funcionalidades sejam acessíveis via teclado
	8.2 Dar aos usuários tempo suficiente para ler e para usar o conteúdo
	8.3 Não utilizar conteúdos que provoquem convulsões
	8.4 Ajudar os usuários a navegar e a encontrar o conteúdo
	9 Exemplos de funcionalidades acessíveis via teclado
	9.1 Atalhos Via Teclado
	9.2 Acessando um formulário
	9.3 Longdesc
	9.4 Links
	9.5 Botões
	9.6 Caixa de Verificação
	9.7 Botões de Opção
	9.8 Textarea
	09 FOLHAS DE ESTILOS EM CASCATA
	Olá!
	1 O que são folhas de estilos em cascata?
	2 Aplicando Folhas de Estilo em Cascata
	3 Formas de se aplicar estilo as páginas em HTML
	3.1 In-line
	3.2 Interno
	3.3 Externo
	4 Não se esqueça do doctype
	5 Seletores
	6 Tipos de seletores
	7 Pseudo-classes
	8 ID
	9 Descendentes ou encadeados
	10 Texto
	11 Margens e espaçamentos
	12 Bordas
	13 Listas de links
	14 Na prática
	10 FOLHAS DE ESTILOS EM CASCATA - LAYOUT
	Olá!
	1 Blocos e elementos alinhados
	Bloco de Elementos
	Elementos Alinhados
	2 Layouts