1 - INTERNET: 1.1 - Conceitos: 1.1.1

DESENVOLVIMENTO WEB I - 7122
1 - INTERNET:
1.1 - Conceitos:
1.1.1 - A Internet
Uma definição mais formal sobre o que é a Internet pode ser resumida
como uma rede de computadores, de abrangência mundial e pública,
através da qual estão conectados milhões de equipamentos de
computação localizados em todas as partes do mundo.
A Internet interliga várias redes de computadores (instituições
educacionais,
governamentais,
comerciais,
etc).
A
maior
parte
dos
equipamentos de computação conectados à Internet são computadores
pessoais
e
servidores,
utilizando
Sistemas
Operacionais
Windows
ou
Unix/Linux, que provêem serviços como envio e recebimento de mensagens
por e-mail, acesso a informações disponibilizadas como páginas web,
compartilhamento de arquivos, dentre outros.
1.1.2 - Endereçamento Internet (E-mail)
nome@dominio
nome = identificação do usuário
@ = pronuncia-se "et" para significar "em" (AT = preposição em inglês
indicando lugar)
domínio = nome do computador onde "está localizado" o usuário "nome".
IMPORTANTE: Alguns sistemas operacionais utilizados em computadores na
Internet
diferenciam
caracteres
maiúsculos
de
minúsculos
(são
case
sensitives). Os endereços Internet (E-mail) são comumente escritos em
minúsculos.
-3-
DESENVOLVIMENTO WEB I - 7122
1.1.3 - Elementos de um Projeto Web:
Página Web - Arquivo de texto formatado com HTML.
Home Page - Página pessoal ou página inicial do site.
Web Site - Sítio, lugar; conjunto de páginas HTML que contém informações
relacionadas.
Também podem fazer parte de um Web Site arquivos de texto,
programas, imagens, vídeos, etc.
1.1.4 - Estrutura de um Web Site:
Um Web Site pode estar organizado de três maneiras:
a) Seqüencial:
b) Árvore:
c) Mista:
1.2 - História da Internet:
Como muitos outros avanços tecnológicos da humanidade, a origem da
Internet está em pesquisas motivadas pelas guerras. No período conhecido
como ‘Guerra Fria’, entre os Estados Unidos e a antiga União Soviética, os
militares americanos temiam que um ataque soviético pudesse ser realizado
tendo como alvo uma central de informações, o que comprometeria todas as
-4-
DESENVOLVIMENTO WEB I - 7122
bases de dados americanas. Desta forma, iniciaram um projeto para
descentralizar suas bases de dados, e que as informações estivessem
compartilhadas entre elas, pois no caso da destruição de uma dessas bases
(como o Pentágono, centro de inteligência norte-americana), os dados
continuariam existindo e disponíveis.
Em 1969 surgiu a primeira transmissão de dados através desta rede, a
ARPANET (sigla de Advanced Research Projects Agency Net), que transmitia
os dados através do chaveamento de pacotes, ondes as informações são
transmitidas em pequenos pacotes, contendo os dados, informações de como
chegar ao destinatário e como remontar um mesmo dado contido em vários
pacotes.
Com a diminuição da tensão entre EUA e URSS na década de 70,
decidiu-se dividir a ARPANET em duas, a fim de facilitar seu gerenciamento.
Um dos grupos foi batizado de MILNET, e continuava sob controle exclusivo
dos militares, e o outro, que inicialmente continuou a se chamar de ARPANET,
que conteria todas as localidades não-militares.
A nova ARPANET começou a ser utilizada por pesquisadores e alunos de
universidades, como uma ferramenta de troca de informações sobre pesquisas
científicas e uma forma de colaboração à distância, mais rápida e barata do
que os correios. Crescendo neste ambiente de estudiosos de tecnologia, em
pouco tempo surgiram muitas novas aplicações, dentre as quais foram o
protocolo HTTP (Hypertext Tranfer Protocol) e o próprio protocolo IP (Internet
Protocol) os principais responsáveis por expandir seus horizontes para fora das
Universidades, e passar a ser utilizada como ferramenta de comunicação por
empresas e usuários domésticos.
Finalmente, em 1991, a empresa Netscape, criadora do navegador web
de mesmo nome, desenvolveu o protocolo HTTPS, uma versão segura do
HTTP, que permitiu a consolidação e crescimento do comércio eletrônico.
-5-
DESENVOLVIMENTO WEB I - 7122
1.3 - Principais Recursos:
1.3.1 - WWW:
É a abreviação de World Wide Web, ou seja, Teia de Alcance Mundial.
Através de um navegador (browser) você pode ter acesso às informações
disponibilizadas na rede. Os usuários criam as páginas WEB que contém
informações com textos, gráficos e vídeos sobre os mais variados assuntos.
Uma empresa pode, por exemplo, divulgar informações institucionais, prestar
informações detalhadas sobre seus produtos, mercados e serviços e até
mesmo vender através da internet (e-commerce).
1.3.2 - E-mail:
É um serviço de correio eletrônico que permite a troca de mensagens e
arquivos com outras pessoas, de qualquer lugar do mundo.
1.3.3 - News:
São grupos de pessoas com interesses comuns que trocam informações
sobre determinados assuntos.
1.3.4 - IRC (Internet Relay Chat):
É conhecido como o bate-papo na internet. Várias pessoas se
encontram em "salas" virtuais e conversam em tempo real.
1.3.5 - Mensageiros Instantâneos:
Usado normalmente quando duas pessoas querem conversar através de
mensagens de texto e vídeo / áudio conferência (veremos abaixo). Ex: Skype,
Yahoo Menssenger, Google Talk.
1.3.6 - Vídeo e Áudio Conferência:
Duas ou mais pessoas podem comunicar-se ao mesmo tempo em que
visualizam o interlocutor. Para isso, é necessário possuir microfone, câmera de
vídeo e placa de som.
1.3.7 - FTP (File Transfer Protocol):
É o serviço de transferência (download e upload) de arquivos.
-6-
DESENVOLVIMENTO WEB I - 7122
1.3.8 - Jogos:
Você tem disponíveis vários games para jogar contra outras pessoas que
estejam conectadas à internet. É possível participar de uma guerra, de uma
partida de futebol ou de corridas de automóveis.
1.4 - Navegadores WEB:
Um navegador WEB, também conhecido pelos termos em inglês web
browser ou simplesmente browser, é um programa de computador que
possibilita seus usuários a interagirem com documentos virtuais da Internet,
também conhecidos como páginas da web, que podem ser escritas em
linguagens como HTML, ASP, PHP, com ou sem linguagens como o CSS
(Folhas de Estilo) e que estão hospedadas num servidor Web.
Os Navegadores Web comunicam-se geralmente com servidores Web
usando principalmente o protocolo de transferência de hipertexto (HTTP -
Hypertext Transfer Protocol) para efetuar pedidos a arquivos, e processar
respostas vindas do servidor. Estes arquivos são por sua vez identificados por
uma URL (Uniform Resource Locator).
Um estudo mensal realizado pela empresa de pesquisas StatCounter
mostra que, em Janeiro/2016, o navegador Internet Explorer (IE), da
Microsoft, respondeu por 14,62% de participação no mercado mundial de
browsers. O que representa uma queda em relação ao mês anterior, quando
ele detinha 15,19% do setor.
Os dois principais concorrentes do IE tiveram uma oscilação de market
share (participação de mercado) no período. No caso do Firefox, o navegador
registrou uma pequena elevação de 14,3%, em Dezembro/2015, para 14,61%
em Janeiro/2016. Enquanto que o Chrome, do Google, foi de 53,56% para
54,2%, ainda mantendo-se líder no mercado mundial de browsers.
-7-
DESENVOLVIMENTO WEB I - 7122
O quarto browser mais usado no mundo, o Safari da Apple teve uma
pequena queda no período, passando de 9,93% para 9,47% de participação,
na comparação mensal (Dezembro/2015 - Janeiro/2016). O Opera teve
também um pequeno decréscimo de 2,12% em Dezembro/2015 para 1,96
pontos percentuais de market share em Janeiro/2016. Veja abaixo o gráfico:
Market share dos principais navegadores usados no mundo:
Fonte: http://gs.statcounter.com/
1.5 - Arquitetura:
Conforme
já
mencionado,
a
Internet
é
a
rede
global
de
telecomunicações que conecta milhões de computadores em todo o mundo e
cujas características principais são:
• É formada pela conexão de várias redes;
• A operação da rede não é dependente de nenhuma entidade de
controle centralizado;
-8-
DESENVOLVIMENTO WEB I - 7122
• Qualquer computador conectado a Internet pode se comunicar com
outro também conectado a Internet. Esta comunicação é gratuita;
• Email e WEB ainda são os serviços principais propiciados pela Internet,
embora o seu uso tem sido feito também para aplicações de serviços de
Voz (VoIP - Voice over Internet Protocol) e para a transmissão de
conteúdos de áudio e vídeo sob demanda (música, filmes, shows e até
mesmo programação de TV).
A arquitetura típica da Internet é apresentada na figura a seguir:
1.5.1 - Clientes:
O acesso a Internet é feito normalmente através de microcomputadores
(PCs) que estão conectados a rede através de um provedor de acesso a
Internet.
Este acesso pode ser do tipo discado, banda larga (em sua maioria) ou
através da rede corporativa de uma empresa.
1.5.2 - Provedor de Acesso a Serviços Internet (PASI):
O PASI provê a conexão a Internet a seus clientes utilizando
normalmente conexões de banda larga (ADSL), de redes de TV a Cabo, de
-9-
DESENVOLVIMENTO WEB I - 7122
redes Wireless (redes celulares, rádios em sistemas multiponto - Wi-Fi,
Wimax, satélite, etc.), acesso discado ou de fibra óptica.
Para um grande provedor de Internet estas conexões de clientes
ocorrem em um ponto de presença do provedor na cidade onde está
localizado o cliente.
Estes pontos de presença estão conectados às instalações centrais do
Provedor de Acesso a Serviços Internet onde estão localizados o servidor de
emails e o servidor WEB, além das conexões ao Backbone Internet.
1.5.3 - Backbone Internet:
O Backbone Internet é formado por vários backbones ou sistemas
autônomos. Um sistema autônomo é uma rede ou conjunto de redes que está
sob uma única administração ou política de roteamento.
Os sistemas autônomos podem estar conectados diretamente ou através
de um PTT (Ponto de Troca de Tráfego).
1.5.4 - Endereços IP:
Cada dispositivo na Internet (Host) tem um endereço IP único.
200.148.12.188 é um exemplo de endereço IP padrão IPv4.
Cada sistema autônomo recebe uma faixa de endereços IP que utiliza
internamente e repassa em parte para os PASI ou provedores de conteúdo
conectados a sua rede. Os PASI por sua vez alocam de forma fixa ou dinâmica
endereço IP aos seus clientes.
1.5.5 - Servidor DNS:
Para facilitar o acesso de clientes a servidores na Internet foram
estabelecidos endereços em forma de texto (domínios). Os servidores de DNS
(Domain Name System) têm a função de mapear estes endereços de domínios
em endereços IP.
- 10 -
DESENVOLVIMENTO WEB I - 7122
Assim, ao consultar uma página na Internet como www.google.com a
primeira coisa que o seu navegador faz é solicitar a um servidor de DNS na
rede qual o endereço IP onde está hospedado este domínio.
1.6 - Segurança:
A Internet é uma rede que proporciona diversas experiências positivas.
Pesquisas temáticas, compras online, trocas de mensagens, pagamentos de
contas e acesso a muita informação são os pontos positivos da WEB. Porém,
neste mundo virtual, algumas medidas básicas de segurança são necessárias:
• Nunca abra arquivos anexados a e-mails de pessoas ou empresas
desconhecidas. E, mesmo que o remetente seja conhecido, passe um
bom antivírus antes de abrir o arquivo;
• Mantenha em seu computador um bom antivírus, sempre atualizado;
• Deixe o firewall do Windows sempre ativado;
• Faça sempre as atualizações necessárias do seu Sistema Operacional;
• Nunca instale programas piratas em seu computador, eles podem trazer
vírus ou outros programas perigosos;
• Não abra pen-drives ou CDs/DVDs de outras pessoas sem antes passar
o antivírus;
• Siga sempre as orientações de seu banco para acessar sua conta pela
Internet;
• Não digite senhas e dados pessoais em computadores públicos (lan
houses, empresas, etc);
• Não crie senhas com datas de aniversários, seqüências numéricas fáceis
ou nome de pessoas. Uma sugestão é criar senhas intercalando letras,
números e caracteres especiais (#, por exemplo);
• Cuidado ao utilizar o cartão de crédito em compras on line. Tenha
certeza que a loja virtual é segura;
- 11 -
DESENVOLVIMENTO WEB I - 7122
• Não clique em links mostrados por e-mails desconhecidos. Eles
costumam instalar vírus ou cavalos-de-tróia (programas que roubam
dados do computador);
• Não divulgue dados pessoais (endereços, números de documentos, etc.)
em redes sociais (Orkut, Facebook, Twitter, etc.).
- 12 -
DESENVOLVIMENTO WEB I - 7122
2 - Recuperação da Informação:
2.1. Conceitos
2.1.1 - Conceitos de Informação e Comunicação:
Já
vimos
que
Informação
é
o
resultado
do
processamento,
manipulação e organização de dados, de tal forma que represente uma
modificação no conhecimento do sistema (pessoa, animal ou máquina) que a
recebe.
Num sentido mais amplo, informação é a qualidade da mensagem que
um emissor envia para um ou mais receptores. Informação é sempre sobre
alguma coisa. Vista desta maneira, a informação não tem de ser precisa. Ela
pode ser verdadeira ou mentirosa, ou apenas um som (como o de uma
impressão em impressora matricial). Todavia, em termos gerais, quanto maior
a quantidade de informação na mensagem recebida, mais precisa ela é.
Comunicação é a forma como as pessoas se relacionam entre si,
dividindo e trocando experiências, idéias, sentimentos, informações,
modificando mutuamente a sociedade onde estão inseridas. Sem a
comunicação, cada um de nós seria um mundo isolado. Comunicar é tornar
comum, podendo ser um ato de mão única, como TRANSMITIR (um emissor
transmite uma informação a um receptor), ou de mão dupla, como
COMPARTILHAR (emissores e receptores constroem o saber, a informação, e
a transmitem). Comunicação é a representação de uma realidade. Serve para
partilhar emoção, sentimento, informação.
2.1.2. Conceitos de Armazenamento, Indexação e Recuperação da
Informação:
Armazenamento: De forma geral, armazenamento é o ato ou efeito
de armazenar, guardar, juntar qualquer coisa em algum lugar de forma que
seja possível resgatá-la, consultá-la, usá-la ou consumi-la posteriormente.
- 13 -
DESENVOLVIMENTO WEB I - 7122
Na informática, chamamos de armazenamento o ato de armazenar
informações (documentos) em algum dispositivo físico. Um dispositivo de
armazenamento é um hardware capaz de armazenar uma quantidade
considerável de informação (memórias secundárias).
Indexação (originalmente chamada de catalogação) é a mais antiga
das técnicas para identificação de conteúdo de itens para permitir a sua
recuperação. O objetivo da catalogação é propiciar pontos de acesso a uma
coleção que pode ser esperada ou é bastante utilizada pelo usuário da
informação.
Recuperação de Informação ou Information Retrieval (RI ou IR) lida
com a representação, armazenamento, organização e acesso a itens de
informação (documentos). A representação e a organização da informação
devem dar ao usuário de um Sistema de Recuperação de Informação (SRI)
um acesso fácil a informação de seu interesse.
2.2. Estratégias de Busca
Os modelos clássicos de recuperação de informação apresentam
estratégias de busca de documentos relevantes para uma consulta. Tanto a
consulta feita pelo usuário, quanto os documentos que compõem a coleção a
ser pesquisada, são representados pelos seus termos.
A pesquisa através do banco de dados de um site de indexação envolve
a criação de uma consulta que será submetida ao site. A consulta pode ser
bem simples, contendo apenas uma palavra, ou complexa, quando será
necessário utilizar algum operador lógico booleano.
2.2.1. Operadores Lógicos (Álgebra Booleana)
AND (E)
As palavras ou termos unidos pelo “AND” devem aparecer em todas as
páginas pesquisadas.
- 14 -
DESENVOLVIMENTO WEB I - 7122
Alguns sites substituem o operador “AND” pelo operador “+”.
A maioria dos sites considera um “AND” implícito separando as palavras,
ou seja, todas as palavras especificadas devem aparecer nas páginas
pesquisadas.
Ex: futebol brasileiro
Existe um AND implícito nesta pesquisa, ou seja, futebol AND brasileiro
OR (OU)
Pelo menos uma das palavras especificadas devem aparecer nas
páginas pesquisadas.
Ex: futebol OR brasileiro
Podem aparecer páginas com, por exemplo, “folclore brasileiro”, sem a
palavra futebol.
NOT (NÃO)
As palavras que seguem o operador “NOT” não devem aparecer nas
páginas pesquisadas.
Alguns sites substituem o operador “NOT” pelo operador “-”.
Ex: futebol NOT argentino
Não aparecerão páginas com a palavra “argentino”, ou seja, estamos
refinando uma busca simplesmente com a palavra “futebol” onde poderiam
aparecer páginas de “futebol argentino”. Usando o operador NOT estas
páginas não aparecem na pesquisa.
Alguns sites permitem utilizar operadores especiais que permitem
considerar a posição por proximidade das palavras:
NEAR
Uma das palavras deve estar a uma distância máxima de outra, por
exemplo, antes das próximas 10 palavras.
- 15 -
DESENVOLVIMENTO WEB I - 7122
Ex: “futebol brasileiro” NEAR “arte”
A palavra ”arte” deve aparecer próxima a palavra “futebol brasileiro”
“” (ASPAS)
A maioria dos sites utiliza as aspas como forma de associar palavras
para formar uma expressão
Ex: “futebol brasileiro” AND ronaldo
As palavras “futebol” e “brasileiro” deve aparecer como uma expressão.
Google
O Google, além de permitir operadores booleanos, possui uma série de
operadores especiais que permitem restringir ainda mais as pesquisas. Os
operadores especiais são sempre seguidos de “:”, como por exemplo:
futebol site:www.globo.com
allintext:
A pesquisa será feita apenas no texto das páginas. Deve aparecer no
início da consulta.
Ex: allintext:futebol brasileiro
allintitle:
A pesquisa será feita apenas no título das páginas. Deve aparecer no
início da consulta.
Ex: allintitle:futebol brasilieiro
filetype:suffix
A pesquisa será feita apenas em arquivos com terminação “suffix”, por
exemplo, “filetype:pdf”, onde serão considerados apenas arquivos PDF.
Ex: “futebol brasileiro” filetype:pdf
- 16 -
DESENVOLVIMENTO WEB I - 7122
link:URL
Serão pesquisadas as páginas que apontam para a URL.
Ex: link:www.terra.com.br
flamengo link:www.terra.com.br => ficarão no topo da busca todas
as páginas do site www.terra.com.br que possuem a palavra flamengo
2.2.2. Técnicas de Busca
As Máquinas de Pesquisa da Internet são baseadas na indexação de
palavras dos sites, assim o processo de construção do banco de dados
pesquisa começa com a busca das páginas e termina com a indexação das
palavras.
Antes da Máquina de Pesquisa poder dizer onde determinado
documento está, ele precisa ser encontrado. Para encontrar informações nas
centenas de milhares de páginas WEB existentes, as Máquinas de Pesquisa
empregam um software especial chamado “Robô” ou “Spider” (Aranha), para
construir uma lista de todas as palavras encontradas nos sites. O processo de
construir uma lista de palavras de sites é chamado de “Web Crawling”, algo
como, “Rastejamento Web”. Entretanto, para construir e manter uma lista
atualizada de palavras, os Robôs de busca devem olhar uma grande
quantidade de páginas.
Como os robôs pesquisam a Internet? Usualmente, o ponto de partida é
uma lista de servidores muito utilizados e páginas de Internet bem populares.
O Robô começa com uma página bem popular, indexando as palavras desta
página e seguindo recursivamente todos os links das páginas. Desta maneira,
o sistema de busca começará a navegar pela WEB, seguindo o “vento” dos
links, passando pelas partes mais navegadas da WEB.
- 17 -
DESENVOLVIMENTO WEB I - 7122
O site Google iniciou como um site de pesquisa acadêmico, se
transformando rapidamente no maior site de pesquisa do mundo. Quando um
Robô do Google olha uma página HTML, ele considera 2 aspectos:
• As palavras na página;
• A posição da palavra na página.
Palavras que ocorrem no Título, nos Sub-Títulos ou nos META TAGS
HTML e em outras posições de relativa importância são marcadas para terem
uma maior consideração durante as pesquisas dos usuários. O Robô do Google
foi escrito para considerar todas as palavras da página.
Outros Robôs podem ter diferentes abordagens. Estas abordagens
usualmente tentam fazer o Robô operar mais rápido, o usuário pesquisar mais
rapidamente, ou ambos. Por exemplo, alguns robôs consideram as palavras do
Título, Sub-Título e Links além das 100 palavras mais usadas na página e
todas as palavras usadas nas 20 primeiras linhas da página. O site Lycos usa
uma abordagem parecida com esta. Outros sistemas, como o AltaVista, vão na
direção contrária, indexando cada palavra da página incluindo artigos e
palavras curtas.
2.2.3. Armazenamento de Documentos na Internet
Atualmente existem vários repositórios de arquivos disponíveis na
nuvem (Internet). Este é um dos serviços disponibilizados pela Cloud
Computing (Computação nas Nuvens). Um dos mais usados atualmente é o
Dropbox.
O Dropbox é um dos serviços mais simples e eficientes quando o
assunto é sincronização de arquivos entre dispositivos diferentes, sejam eles
computadores de mesa, notebooks, tablets ou smartphones. Por meio do
Dropbox você armazena arquivos numa espécie de “caixa mágica” que pode
ser acessada de qualquer lugar, de qualquer sistema operacional e de
- 18 -
DESENVOLVIMENTO WEB I - 7122
praticamente qualquer equipamento que acesse a internet. Além disso,
quando você instala o Dropbox no computador, ele cria uma pasta específica,
igual a todas as outras do sistema, na qual é preciso apenas arrastar arquivos
para sincronizar e compartilhar. Assim você tem “nas nuvens” documentos e
informações que precisa usar sempre ou então que quer compartilhar com
outros usuários. O Dropbox disponibiliza 2 GB de espaço gratuitamente,
podendo chegar a até 18 GB (500 MB por indicação).
O Windows OneDrive (antigo Windows Live SkyDrive) é o serviço online
da Microsoft para armazenar arquivos. Ele funciona integrado ao Windows Live
e é necessário possuir uma conta para acessar (que é a mesma do seu
Hotmail, por exemplo). Um dos grandes destaques do serviço está no espaço
disponibilizado. O Windows OneDrive atualmente conta com 30 GB disponível
para você armazenar os seus arquivos.
Existem ainda outros serviços, como por exemplo o gaveta.net
(http://www.gaveta.net/). O Gaveta.net é um espaço de armazenamento
virtual para os seus arquivos pessoais. É grátis e disponibiliza até 10GB
(gigabytes) de espaço privado e encriptado. Com 10GB terá espaço suficiente
para guardar os seus Documentos, Fotos, Músicas, Vídeos...
2.3. Ferramentas de Busca
2.3.1. Máquinas de Pesquisa
As Máquinas de Pesquisa (Search Engines) são sites construídos com
base em dados coletados através de programas de computador escritos
especificamente para esta finalidade. São baseados em técnicas de busca e
indexação das palavras contidas no site. As suas características são:
• Construídos com base em programas de computador, chamados
“robôs”, sem interferência humana;
- 19 -
DESENVOLVIMENTO WEB I - 7122
• Os resultados não são organizados por categorias de assunto, mas sim
através de um ranking calculado através de um algoritmo específico;
• Os sites são indexados com base nas palavras contidas em suas
páginas;
• Não são avaliados no que diz respeito ao conteúdo, isso cabe ao usuário
fazer;
• As pesquisas são realizadas com base em palavras, buscando palavras
específicas ou combinações de palavras nas páginas do site;
• A extensão da busca e indexação alcança grande parte da Web,
podendo ser enorme.
Exemplos:
Google
(http://www.google.com),
AltaVista
(http://www.altavista.com), Cadê (http://cade.search.yahoo.com/)
2.3.2. Diretórios de Assunto
Os Diretórios de Assuntos (Subject Directories) são sites construídos
com base em dados organizados e avaliados manualmente por pessoas.
As suas características são:
• Construídos pela seleção humana manual, não por computadores ou
programas robôs;
• São organizados em categorias hierárquicas de assuntos, divididos em
páginas, porém os assuntos não são padronizados e variam muito em
função do objetivo do site em questão;
• Eles NUNCA se referem ao conteúdo indexado do site, ou seja, a
pesquisa pode ser feita apenas através do conceito bem geral
“assunto”;
• A extensão é bem menor que nas Máquinas de Pesquisa, porém mais
específica;
• Alguns sites oferecem comentários a respeito dos sites indexados.
- 20 -
DESENVOLVIMENTO WEB I - 7122
Exemplos:
Yahoo
(http://dir.yahoo.com),
Open
Directory
(http://dmoz.org)
2.3.3. Internet “Invisível”
É verdade que existe de “tudo” na internet. Mas existem muitos
conteúdos que já são difíceis de encontrar, se é que será possível encontrálos. Eles constituem o que já foi chamado de “web invisível” ou “deep web”
(web profunda), mas que poderia também ser chamado de “internet invisível”,
já que nem todas as informações circulam puramente no protocolo HTTP, da
WEB. Ou seja: apenas o seu navegador de internet não é suficiente para ver
esses sites.
Um exemplo que ficou conhecido é o site Silk Road, descoberto na
metade de 2011. O site vendia drogas de todo tipo para vários lugares do
mundo. O endereço do site era ianxz6zefk72ulzz.onion e só podia ser
acessado por internautas que estivessem usando o programa The Onion
Router – Tor (por isso o final “.onion”). Para complicar um pouco mais, o site
usava o sistema de pagamento BitCoin, um tipo de “moeda criptográfica”.
- 21 -
DESENVOLVIMENTO WEB I - 7122
Com um endereço desses e tantos requerimentos, o site evidentemente
não estava preocupado com marketing.
De forma semelhante, existem muitas outras comunidades fechadas na
internet. Sites que mudam de forma quando códigos são inseridos no lugar
certo, sites de compartilhamento de arquivos escondidos em páginas que mais
parecem a Wikipedia. Sites que exigem cadastro, mas a função de cadastro
está sempre desativada.
Essas são páginas que intencionalmente escondem seu propósito
verdadeiro e ficam eternamente restritas. Não existe uma receita para ter
acesso.
2.3.4. Diretórios de Softwares e Componentes
Existem na Web vários sites específicos para realização de download de
softwares Freeware (software gratuito – programa de computador cuja
utilização não implica o pagamento de licenças de uso) e Sharewere
(programa de computador disponibilizado gratuitamente, porém com algum
tipo de limitação).
Entre
os
mais
acessados
(http://www.baixaki.com.br/)
e
temos
o
o
famoso
Baixaki
Superdownloads
(http://www.superdownloads.com.br/).
Além de softwares, podemos baixar também vários componentes tais
como drivers e Services Packs.
2.3.5. Tradução na Internet
Algumas estatísticas dizem que cerca de 80% de todo o conteúdo da
Internet é apresentado em inglês. Então, como aproveitar toda essa ampla
gama de informações?
- 22 -
DESENVOLVIMENTO WEB I - 7122
Felizmente existem vários sites que ajudam na tradução. Os tradutores
instantâneos podem traduzir tanto pequenos textos como páginas da Internet,
"online", sendo que alguns deles suportam vários idiomas.
É importante notar que são úteis apenas para captar o contexto. Jamais
para boas traduções. Se o usuário não conhecer praticamente nada do idioma
original, eles podem ajudar muito, mas o resultado gerado nunca é um
documento final traduzido.
Uma das principais ferramentas de tradução disponíveis na WEB é o
Google Tradutor (http://translate.google.com.br/). O Google Tradutor é um
serviço de tradução gratuito que fornece traduções instantâneas em 103
idiomas (Março/2016). Ele pode traduzir palavras, frases e páginas da web em
qualquer combinação dos idiomas aceitos.
O Google tradutor passou a exibir definições das palavras traduzidas
juntamente com a tradução. E ao se clicar sobre a palavra traduzida será
apresentada traduções alternativas.
Existem outros tradutores grátis disponíveis na internet:
• http://www.bing.com/translator/?cc=br => O tradutor do Bing é
capaz de traduzir textos ou páginas inteiras da Internet (basta
inserir a url da página desejada).
• http://www.worldlingo.com/ => tradutor de textos e sites.
• http://imtranslator.com/ => traduz bate papo do MSN, ICQ e
outros mensageiros instantâneos para você conversar com seus
amigos mesmo que em outra língua.
- 23 -
DESENVOLVIMENTO WEB I - 7122
3 - Projeto de Site:
O site de uma empresa é como um cartão de visita que apresenta sua
área de negócios e sua identidade no mercado, ou ainda, como uma vitrine
virtual em que é possível, em muitos casos, expor e vender seus produtos.
Mas projetar, criar e manter um site não é uma tarefa simples como seguir
uma receita de bolo. Steve Krug (2006) compara o sucesso na criação de um
site com jogar golfe, em que há várias formas de fazer o certo (a bola entrar
nos buracos) e um milhão de formas de não consegui-lo fazer.
Há na internet milhões de sites que oferecem centenas de informações
semelhantes e criar mais um para oferecer o “mais do mesmo” não atrai a
atenção do usuário. Por isso, em tempos de Web 2.0 é preciso inovar, ser
diferente e oferecer o que o usuário quer, sem, no entanto, incomodar ou
prejudicar sua experiência na internet, pois ele está a apenas um clique de
mouse para abandonar um site e encontrar outro que o agrade.
Antes de publicar um site na internet ou mesmo começar a construir
um, é importante que se faça um planejamento com todas as partes
interessadas para melhor organizar cada etapa de desenvolvimento do
projeto. Não vamos abordar abaixo todas as questões envolvendo o
planejamento e criação de um site, mas sim, conceituar as principais fases,
convenções e padrões utilizados atualmente.
3.1 - Definições dos objetivos:
A primeira etapa no desenvolvimento de um site consiste em um
planejamento do mesmo, onde normalmente a equipe de desenvolvimento se
reúne com os stakeholders (interessados) para discutir ideias e opiniões sobre
o projeto. É importante também que nessa reunião sejam definidos quais os
- 24 -
DESENVOLVIMENTO WEB I - 7122
objetivos com o site, pois com bases neles é que várias outras decisões
importantes para o sucesso do projeto são tomadas.
Uma vez definidos os objetivos, é o momento de observar o cenário
atual em que o site estará inserido. Muitas vezes, é utilizada a estratégia de
visitar o site dos concorrentes para analisar certos comportamentos do
mercado e buscar algum diferencial que atraia mais atenção do usuário. E,
depois dos objetivos definidos e uma visão geral do mercado, chega-se o
momento de pensar em alguns pontos importantes como: quem é o público
alvo, onde encontrá-lo e o que se pretende atingir nele.
3.2 - Planejamento do conteúdo:
O conteúdo é a parte mais importante em um projeto de site, pois na
maioria dos casos, o sucesso do projeto depende em grande parte da sua
qualidade. Por isso, definir, planejar e criar conteúdo deve ser parte de uma
estratégia importantíssima no projeto, pois é ele que será o canal de
comunicação com o usuário para passar a mensagem que queremos
transmitir.
3.3 - Arquitetura da informação
Considerando os objetivos do site e o conteúdo que estará disponível,
faz-se nessa fase uma categorização das informações e cria-se uma hierarquia
do conteúdo de forma a privilegiar as informações mais importantes,
colocando em destaque os conteúdos mais relevantes para o público,
facilitando assim ao máximo a busca pelas informações que ele deseja.
3.4 - Design de interface:
O profissional responsável pelo design da interface preocupa-se com a
interação humano-computador do site. Sua função é projetar uma estrutura
- 25 -
DESENVOLVIMENTO WEB I - 7122
gráfica que crie uma identidade única para o site, acolha o conteúdo da
arquitetura da informação, preveja cada detalhe das funcionalidades de
navegação e que seja, no mínimo, agradável ao usuário. Criar uma interface
que atenda tantas exigências pode parecer uma tarefa difícil e com certeza o
é, mas o design faz muita diferença para o usuário, pois antes de ler o
conteúdo, ele verá o design e se não gostar, a probabilidade de permanecer
no site é mínima.
Muitos webdesigners, nessa fase de desenvolvimento, utilizam uma
ferramenta chamada wireframe que permite visualizar o site antes mesmo de
começar a construí-lo. Trata-se de um "rascunho" onde cada elemento é
posicionado no seu devido lugar, como por exemplo, o sistema de navegação
e o agrupamento do conteúdo na tela.
Exemplo de um wireframe
3.5 - Implementação:
A
implementação
consiste
no
serviço
braçal
da
equipe
de
desenvolvimento que deve elaborar o site de acordo com o que foi projetado
no wireframe e definido nas fases anteriores. Temos assim, a criação das
- 26 -
DESENVOLVIMENTO WEB I - 7122
páginas com seus conteúdos, imagens, vídeos e outras mídias quando
necessário.
Apesar da tecnologia de desenvolvimento web proporcionar a liberdade
de criarmos site onde o limite é a nossa imaginação, algumas “inovações”
devem ser ponderadas muito bem antes de aplicá-las, pois quando
construímos um site, nosso principal objetivo deve ser que todas as páginas
sejam claras o suficiente para que o usuário comum, apenas olhando-a, possa
saber como navegar e como utilizar cada página.
De acordo com Steve Krug (2000), as pessoas não gostam de ter que
descobrir como fazer algo que teoricamente já sabem como fazer e quando
são obrigadas a pensar em como fazer isso de outra forma, elas ficam
extremamente incomodadas. E em se tratando de internet, a primeira opção
do usuário é abandonar aquele site e procurar por outro que não o faça
pensar. Diante disso, para uma melhor experiência do internauta, algumas
convenções (padrões) foram trazidas das mídias impressas e adaptadas nas
páginas
da
internet.
Segundo
o
autor,
cinco
elementos
devem
obrigatoriamente estar presentes em um site:
• Identificação ou logotipo do site – Geralmente no canto superior
esquerdo da tela tal qual como uma revista, jornal ou prédio, que possui
em sua fachada uma placa identificando-o pelo nome;
• Uma forma rápida e fácil de voltar ao inicio – Um botão ou link assim
em todas as páginas, garantem ao usuário que por mais perdido que ele
possa estar, sempre há uma forma de voltar ao início. Há também uma
convenção de que o logotipo seja um atalho para o início do site e por
mais simples que isso possa parecer, muitos webmasters não adotam
essa característica e confundem o usuário que está acostumado a essa
convenção;
- 27 -
DESENVOLVIMENTO WEB I - 7122
• Uma forma de pesquisar por conteúdo – Dependendo do tamanho e da
complexibilidade de um site, procurar o que precisamos através da
navegação é uma tarefa dispendiosa, e para tanto, todo site deve
possuir uma caixa de busca ou um link para uma página de pesquisa
por conteúdo;
• Seções e subseções – Uma boa hierarquia na arquitetura da informação
é fundamental para auxiliar o usuário a encontrar a informação que
deseja. Normalmente, a página principal possui links para a seção
principal e conforme o usuário seleciona, surgem os links para as
subseções e assim por diante;
• Utilitários – Links que oferecem informações importantes, mas que não
façam parte da hierarquia de conteúdo do site. Alguns exemplos de
links utilitários são: “Mapa do site”, “Ajuda”, “Sobre” e “Entre em
contato”.
Outra convenção muito importante para a localização do usuário no site
é manter todas as páginas seguindo o mesmo padrão de layout, ou seja, a
área de conteúdo, campo de buscas e os links de navegação devem sempre
estar no mesmo local em todas as páginas.
- 28 -
DESENVOLVIMENTO WEB I - 7122
4 - HTML Básico:
4.1 - O que é HTML?
Os documentos na Web são organizados com o uso de comandos que
são interpretados pelos browsers. Estes comandos compõem a linguagem
HTML (HyperText Markup Language).
A linguagem HTML é uma linguagem utilizada para estruturar e marcar
o conteúdo HTML (formatação) dos documentos na Web.
4.2 - Criando documentos HTML:
4.2.1 - Comandos HTML (TAGS):
Os comandos HTML são descritores que indicam ao browser como as
informações devem aparecer e são chamados de TAGS. São escritos
obrigatoriamente entre os sinais "<" (menor que) e ">" (maior que).
4.2.1.1 - Formas dos Comandos HTML:
Os comandos (TAGS) podem ser:
- Abertos (simples): <comando>
- Fechados: <comando> . . . </comando>
- Compostos:
<comando>
<elemento 1> ... </elemento 1>
<elemento 2> ... </elemento 2>
....
<elemento n> ... </elemento n>
</comando>
- 29 -
DESENVOLVIMENTO WEB I - 7122
4.2.1.2 - Regras HTML e Dicas:
• Fechar sempre os TAGS fechados e compostos;
• NUNCA esquecer um sinal de “<” ou de “>”, no início ou no fim do
TAG;
• Não usar espaços no TAG (no interior dos sinais “<” e “>”).
EX: </ comando> ERRADO!!!
< com an do> - NUNCA!!!!
• Os agrupamentos de espaços colocados FORA dos TAGS serão
interpretados como apenas um espaço. Fora dos TAGS não há restrição
do uso dos espaços (  é usado para adicionar mais espaços);
• NOMES DOS ARQUIVOS (inclusive extensão “.html” ou “.htm”) –
Sempre em minúsculas.
Algumas dicas importantes para o seu sucesso na Web:
• Verifique suas páginas com diferentes navegadores e em diferentes
plataformas para assegurar que você terá uma experiência de
visualização consistente;
• Como alguns usuários da Web ainda se conectam a velocidades baixas,
verifique se suas páginas podem ser visualizadas com estes modems;
• Revise a grafia e a gramática antes de publicar a sua página (peça que
outra pessoa a leia). Verifique todos os links entre as páginas. Esta dica
é simples mas muitas pessoas esquecem dela e publicam péssimos
trabalhos;
• Não coloque informações do tipo “Este site está em processo de
criação”
(geralmente
acompanhada
de
sinais
amarelos),
pois
praticamente todos os sites da Web estão em criação e em
desenvolvimento. É preferível não colocar nada a colocar uma página
com um aviso deste tipo;
- 30 -
DESENVOLVIMENTO WEB I - 7122
• Peça a opinião de outras pessoas antes de publicar o seu site, o olhar
crítico de alguém pode detectar erros que não foram percebidos por
você.
Observações em relação aos nomes dos arquivos:
• As extensões ".html" ou ".htm" são importantes quando o servidor Web
está identificando o arquivo. Usaremos como convenção para os
nossos trabalhos a extensão ".html";
• Os nomes devem iniciar com uma letra obrigatoriamente;
• Pode-se utilizar caracteres como "-" e "_";
• Evite utilizar "ç", caracteres especiais e letras acentuadas em nomes de
arquivos;
• Procure usar nomes significativos, que remetam ao conteúdo do
arquivo.
Para edição dos arquivos .html, utilizaremos o programa PHP Editor
Versão 2.22. PHP Editor é um editor freeware e totalmente em português
destinado a edição de páginas PHP e HTML. Vamos salvar nossos arquivos de
exemplo na pasta c:/wamp/www/dw1
4.3 - Estrutura básica de uma página
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
<!-- Corpo da Página -->
</body>
</html>
- 31 -
DESENVOLVIMENTO WEB I - 7122
Um documento HTML básico é composto de duas partes:
• A seção de cabeçalho descritiva;
• O corpo do conteúdo.
Analisaremos, mais adiante, cada um destes TAGS (comandos).
4.4 - Cabeçalhos
Uma forma usada para configurar o tamanho da fonte é o TAG
<H*>TEXTO FORMATADO</H*> onde o asterisco é substituído por um
número que vai de 6 (menor) a 1 (maior). Este TAG é mais usado para
títulos de textos. Faça o exemplo abaixo (cabecalho.html):
Veja como o arquivo acima será visualizado no navegador WEB:
- 32 -
DESENVOLVIMENTO WEB I - 7122
4.5 - Alinhamentos de parágrafos
O alinhamento de parágrafo é definido pela propriedade align que pode
receber quatro valores diferentes:
VALOR
EFEITO
left
alinhar à esquerda
right
alinhar à direita
center
alinhar ao centro
justify
justificar
Faça o exemplo abaixo (paragrafos.html) e veja o resultado:
4.6 - Quebra de Linha
A quebra de linha é usada apenas para mudar um determinado ponto
do parágrafo de linha. Isso acarreta uma diferença na visualização.
Se prestarmos atenção, há um grande espaço deixado entre uma linha e
outra do parágrafo, porque são dois parágrafos diferentes. Mas se quisermos
criar um parágrafo com duas linhas, obrigatoriamente, usaremos a quebra de
linha que é identificado pelo TAG <br>.
Faça o exemplo abaixo (quebra_linha.html) e veja o resultado:
- 33 -
DESENVOLVIMENTO WEB I - 7122
4.7 - Formatando Textos:
Todo documento HTML segue o mesmo modelo básico, e este modelo
deve sempre estar completo para o browser reconhecer o seu documento.
Conforme já explicado anteriormente, o modelo é o seguinte:
<html>
<head>
<title>O título que ficará no topo da sua página
você escreve aqui </title>
</head>
<body>
Todo o texto contido no seu documento HTML deve
estar aqui.
</body>
</html>
Obs: Nunca se esqueça de fechar cada TAG, com a barra e o nome da
tarefa. Quando seu TAG tiver vários atributos eles devem ser omitidos no
fechamento do TAG. Por exemplo:
<a href="agenda.html">Agenda</a>
Este TAG é um link, que você aprenderá com mais detalhes depois, mais
agora o importante é que você perceba que os atributos (detalhes do TAG)
foram omitidos no seu fechamento. Se você não fechar um TAG ele ficará
aberto até o final do documento, alterando a propriedade de todo ele, por
exemplo: se você não fechar <b> que é o TAG que cria textos em negrito, o
documento inteiro ficará em negrito.
4.7.1 - Formatação básica da Fonte:
Dentro do TAG body, você escreve todo o texto da sua página. E é
neste texto que vamos nos concentrar agora. Os principais TAGS para a
formatação de texto são:
- 34 -
DESENVOLVIMENTO WEB I - 7122
<p>Cria um parágrafo</p>
<center>Centraliza o texto</center>
<b>Textos em negrito</b>
<i>Textos em itálico</i>
<s>Texto tachado (riscado)</s>
<u>Textos sublinhados</u>
<tt>Textos no estilo da máquina de escrever</tt>
<sub>Texto subscrito</sub>
<sup>Texto sobrescrito</sup>
<br>Quebra de linha, não necessita ser fechado
<!--Este TAG foi feito para comentários e é ignorado pelo browser -->
<dd>Este TAG é usado para criar parágrafo (o espaço para a primeira
linha). Se você quiser um parágrafo maior ou menor é necessário o uso de
espaços através do caractere " ". (Dado: 1 "<dd>" é igual a 10
" ".
Com o tempo você irá memorizar o nome e a função de cada TAG!!
4.7.1.1 - Exercício - Formatação Básica (fbasica.html)
- 35 -
DESENVOLVIMENTO WEB I - 7122
4.8 - Estilos de Textos:
Um TAG muito importante na linguagem HTML é o TAG <font>. Ele
determina a cor, tamanho e tipo da fonte. Primeiramente vamos ver como
mudar o tamanho e tipo da fonte.
4.8.1 - Atributo SIZE:
O tamanho da fonte, em HTML, varia de 1 (menor) a 7 (maior).
Lembre-se sempre que o tamanho em HTML não corresponde ao usual,
que é dado em pixels. Para configurarmos o nosso texto com estas fontes é só
fazer assim:
<font size="n">Onde n=tamanho da fonte desejado</font>
Você também pode querer aumentar ou diminuir a fonte em relação
a que está configurada no momento, então é só por um sinal de mais (para
aumentar) ou menos (para diminuir) o tamanho da fonte.
Exemplo de Formatação de fonte (fonte1.html):
Veja como o arquivo acima será visualizado no navegador WEB:
4.8.2 - Atributo FACE:
Para mudar o estilo da fonte é só usar o atributo face. Por exemplo, se
eu quero que o meu texto use Arial, tamanho 2, é só fazer assim:
<font size="2" face="Arial">Exemplo da combinação de estilo e tamanho
de Fonte</font>
- 36 -
DESENVOLVIMENTO WEB I - 7122
Neste exemplo demonstramos que os atributos podem ser usados ao
mesmo tempo sem nenhum problema para o browser.
Nota: Os tamanhos e estilos padrões são configurados de acordo com
cada browser, ou seja, se você não determinar estes valores, o browser que
abrir a sua página irá interpretar o seu texto com a fonte e estilo configurada
nele.
4.8.3 - Atributo COLOR:
As cores das fontes são determinadas pelo atributo color, no TAG font.
Você pode citar a cor que você quer de duas formas:
<font color="nome da cor"></font>
<font color="#XXXXXX"></font>
Exemplo de Formatação de fonte (fonte2.html):
Veja como o arquivo acima será visualizado no navegador WEB:
- 37 -
DESENVOLVIMENTO WEB I - 7122
A primeira forma é mais simples, e admite os nomes de cores: red
(vermelho), blue (azul), green (verde), yellow (amarelo), maroon (marrom),
navy (azul-marinho), purple (roxo), olive (verde-oliva), teal (verde-azulado),
fuchsia (mangenta), aqua (azul-ciano), lime (verde-limão), silver (prata), gray
(cinza), black (preto), white (branco).
Alguns browsers não aceitam este tipo de configuração, então o melhor
é fazer a configuração de cores pelo segundo método.
O segundo método usa o código RGB (red green blue). Todos os
browsers reconhecem este código. Os XXXXXX podem ser qualquer número
de 0 a 9 e qualquer letra de A a F. Esses números e letras representam uma
ordem tonal do tom mais escuro para o mais claro:
0123456789ABCDEF
Os dois primeiros X representam a quantidade de luz vermelha em
uma cor, os dois do meio de luz verde e os dois últimos de luz azul. Alguns
exemplos de misturas:
FFFFFF = branco
000000 = preto
FF0000 = vermelho
00FF00 = verde
0000FF = azul
FFFF00 = amarelo
Para definir as cores em todo o texto de uma página usa-se o atributo
text no TAG body.
<body text="#xxxxxx">
text - cor dos textos da página => cor padrão (default) é preta
Seus valores são dados em valores hexadecimais, equivalentes a cores
no padrão RGB (Red, Green, Blue). Exemplos: #FFFFFF, #804040, #000000.
Exercício: Crie uma página com o nome ex_fonte.html, aplicando os
Estilos de Textos vistos no item 4.8 e subitens correspondentes.
- 38 -
DESENVOLVIMENTO WEB I - 7122
4.9 - Atributos: Background e BGColor
O TAG <body> tem dois atributos onde você pode especificar planos
de fundo. O plano de fundo pode ser uma imagem ou uma cor.
4.9.1 - Background:
O atributo background configura o plano de fundo para uma imagem.
O valor do atributo é a URL da imagem que você quer usar. Se a imagem é
menor do que a janela do navegador, a imagem será repetida até preencher a
janela inteira do navegador.
Veja abaixo como este atributo é usado:
• <body background="fundo.gif"> => Usado se a imagem estiver
no mesmo diretório da página .html
• <body
background="http://www.meusite.com/fundo.gif">
=> Neste caso estou buscando uma imagem da WEB.
Observação: Se você quer usar uma imagem de plano de fundo, você
deve ter em mente:
• A imagem de fundo aumentará o tempo de carga da página. Dica:
Arquivos de imagem de fundo devem ter no máximo 10k
• A imagem de fundo aparecerá boa com outras imagens na página?
• A imagem de fundo aparecerá boa com as cores do texto na página?
• A imagem de fundo aparecerá boa quando ela for repetida na
página?
• A imagem de fundo afasta o foco do texto?
4.9.2 - Bgcolor:
O atributo bgcolor configura o plano de fundo em uma cor. O valor
deste atributo pode ser um número hexadecimal (valor RGB) ou um nome de
cor.
- 39 -
DESENVOLVIMENTO WEB I - 7122
<body bgcolor="#000000"> OU
<body bgcolor="black">
As linhas acima configuram a cor do plano de fundo para preto.
4.9.3 - Observações Básicas - Dicas Úteis:
• Os atributos bgcolor, background e text no TAG <body> estão
desaprovados nas versões mais recentes da HTML (HTML 5 e XHTML).
O World Wide Web Consortium (W3C) removeu estes atributos de suas
recomendações. Nas versões futuras do HTML, as folhas de estilo (CSS)
serão usadas para definir o layout e a exibir as propriedades dos
elementos da página HTML.
• Poucos sites Web mais visitados usam imagens de fundo.
• As cores de fundo mais usadas são: branco, preto e cinza.
Exercício: Crie uma página WEB com o nome plano_de_fundo.html
aplicando os conceitos dos atributos background e bgcolor.
4.10 - Atributos: Link, VLink e ALink
Os atributos Link, Vlink e Alink servem para fazer o controle das cores
dos textos que funcionam como links em páginas WEB. Imagine a seguinte
situação: quando você entra em uma página web ao clicar em um link no
corpo da página, quando você retorna a página pode perceber que o link que
você clicou já não esta mais com a mesma cor. É aí que entra os comandos
link, vlink e alink.
link - a cor dos links não visitados ainda (padrão: azul)
alink - cor dos links, quando acionados (padrão: vermelho)
vlink - cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- 40 -
DESENVOLVIMENTO WEB I - 7122
Sua
sintaxe
é:
<BODY
link="#RRGGBB"
vlink="#RRGGBB"
alink="#RRGGBB"><\BODY>
4.11 - Criando Links ou Hiperlinks
Um dos TAGS mais importantes é o que permite fazer links, ou seja,
fazer referência a um outro recurso da WEB ou a um ponto específico da sua
página.
Veja como usá-lo:
<a href="URL">Texto que aparece no link</a>
O atributo href determina a localização do arquivo da sua página ou do
local da WEB a que o link se referencia. A URL (Uniforme Resource Locator) é
o endereço do link. O texto entre os TAGS aparecerá sublinhado, indicando
que é um link de hipertexto.
Nota 1: Evite sublinhar o seu texto, para não confundir o seu usuário.
Nota 2: As cores dos links podem ser alteradas utilizando-se os
seguintes atributos link, vlink e alink dentro da TAG <body>, conforme já
verificado.
Exemplos:
<a href="http://www.universo.edu.br">Link para o site da
Universo</a>
<a href="exemplo.html">Link para o arquivo
exemplo.html</a>
Você pode fazer link para um e-mail também, para isso escreva:
<a href="mailto:[email protected]">E-mail para o
Dalamura</a>
Exercício: Crie um arquivo com o nome links01.html aplicando os
conceitos aprendidos acima (Itens 4.10 e 4.11).
- 41 -
DESENVOLVIMENTO WEB I - 7122
4.11.1 - Embutindo links em textos:
Âncoras Internas – Para navegar dentro do próprio documento.
São links que levam a outras partes do mesmo arquivo. É mais usado
com arquivos extensos.
Você pode referenciar área de texto para a qual você quer ir. No local
que você quer acessar digite:
<a name="nome da área de texto"></a>
Para criar o link para chamar esta parte do texto, digite:
<a href="#nome-da-área-de-texto">Link</a>
Se a área estiver em outro arquivo digite:
<a href="outro.html#nome-da-área-do-arquivo">Clique
aqui</a>
Outros atributos podem ainda ser usados em TAGS <a>. Por exemplo:
• target=" ": Especifica o carregamento de um link em uma janela de
destino. Ele é usado muitas vezes com a TAG FRAME. Ele pode
assumir diversos valores:
o _top: Carrega o link no corpo inteiro da janela
o _blank: Carrega o link em uma janela em branco
o _parent: Carrega o link no seu pai imediato
o _self: Carrega o link na mesma janela dele
Exercício: Crie um arquivo com o nome links02.html aplicando os
conceitos aprendidos acima.
- 42 -
DESENVOLVIMENTO WEB I - 7122
4.12 - Listas - Numeradas e Não Numeradas
Outros recursos importantes para a formatação de textos em HTML são
o uso de marcadores. Os marcadores podem ser usados de três formas
básicas:
4.12.1 - Lista com marcadores:
Listas não-numeradas são equivalentes às listas com marcadores do
Microsoft Word.
Primeiramente você abre a lista com o TAG <ul>. Depois, quando você
quiser incluir os itens é só usar o TAG <li> para cada item incluído. Não se
esqueça de fechar a lista com o TAG </ul>.
O atributo TYPE, assume os valores circle, square e disc (default).
Crie o arquivo listas_nao_numeradas.html conforme abaixo e veja a
aplicação desde conceito:
- 43 -
DESENVOLVIMENTO WEB I - 7122
4.12.2 - Lista numerada ou alfabética:
Nesta lista os marcadores são números ou letras. Para abrir a lista use o
TAG <ol>, para cada item use novamente <li>, fechando a lista com
</ol>. Para escolher o tipo de marcador use um dos seguintes atributos:
• TYPE="A" (A, B, C...);
• TYPE="a" (a, b, c...);
• TYPE="I" (I, II, III...);
• TYPE="i" (i, ii, iii...);
• TYPE="1" (1, 2, 3...).
• START= "número": indica o marcador inicial.
Crie o arquivo listas_numeradas.html conforme abaixo e veja a
aplicação desde conceito:
- 44 -
DESENVOLVIMENTO WEB I - 7122
4.12.3 - Lista sem marcadores:
Se você quiser usar uma lista sem marcadores, use o TAG <dl> para
abrir a lista, <dt> para cada item desejado e <dd> para cada subitem.
Crie o arquivo listas_sem_marcadores.html conforme abaixo e veja a
aplicação desde conceito:
4.13 - Réguas:
Para a inclusão de uma régua simples horizontal em um texto é só usar
o TAG <hr>.
Se você quiser mudar a aparência da régua, use os seguintes atributos:
• Para alterar a largura use o atributo width. Por exemplo: <hr
width="50%"> cria uma régua com largura de 50% da página.
• Para alterar a altura use o atributo size. Por exemplo: <hr size="5">
cria uma régua de altura 5 pixels.
• A configuração padrão (default) cria uma régua 3D, com o atributo
noshade você cria uma régua em negrito. Por exemplo: <hr
size="5" noshade>
• A configuração padrão cria uma régua centralizada. Se você quiser
que ela fique alinhada a esquerda ou direita, use o atributo align
igual a left (esquerda) ou right (direita).
• Você pode definir qual cor você deseja usar na sua régua, através do
atributo color. Ex: <hr size="5" width="33%" color="blue">
- 45 -
DESENVOLVIMENTO WEB I - 7122
Exercício: Crie um arquivo com o nome reguas.html, de acordo
com as considerações abaixo, aplicando os conceitos aprendidos
acima.
• Crie uma régua com 40% da largura da página, centralizada.
• Crie uma régua com 5 pixels de altura e 250 pixels de largura, em
negrito e alinhada à direita, de cor vermelha.
• Crie uma régua com 10 pixels de altura e 250 pixels de largura, em
3D e alinhada à esquerda.
Exercício de Fixação:
Crie o arquivo exercicio_fixacao.html de acordo com a imagem e as
informações abaixo:
Cabeçalho 1, centralizado, cor preta, fonte
Courier New
Régua cor azul, altura de 5 pixels
Texto em Arial, centralizado, tamanho 7 e cor
vermelha
Régua cor azul, altura de 5 pixels
Lista Ordenada, em Negrito, com Links para
Âncoras nesta Página Web. Definir cor preta para
Link, Link Visitado e Link em Acesso.
Régua simples
Texto em Tahoma, centralizado, tamanho 5 e cor
vermelha
Régua simples
Lista Aninhada Ordenada em Negrito, com
subitens Não Ordenados em Itálico.
Link somente na palavra “E-Mail” com o endereço
de e-mail do referido aluno.
Links para Âncora chamada #topo para exibir o
topo da Página Web, com fonte normal (Voltar ao
topo).
- 46 -
DESENVOLVIMENTO WEB I - 7122
4.14 - Imagens:
O TAG utilizado para a inclusão de imagens em páginas html é o:
<img src="...">
O atributo src especifica o local onde está a imagem e o seu nome. Nas
páginas pessoais é mais comum o uso de arquivos .jpg ou .gif, que você pode
obter facilmente na rede. Exemplo de uso:
<img src="tecnologia.jpg">
Este TAG abrirá o arquivo tecnologia.jpg, localizado no mesmo diretório
em que está o arquivo HTML que está sendo editado. Lembre-se que este é o
único atributo que não pode ser omitido neste TAG.
Nota: Guarde sempre as imagens de sua preferência em uma pasta
chamada img, dentro da pasta em que estão os seus arquivos .html, evitando
misturar seus arquivos de imagens com arquivos .html. Veja o exemplo
abaixo:
<img src="img/tecnologia.jpg">
onde img é o nome do diretório onde se localiza a imagem. Obs: Você
poderá dar o nome que quiser ao diretório que armazena as imagens.
Dica 1: use sempre imagens pequenas e use-as com critério. Você
pode usar gráficos para dar impacto e interesse à página, sem acrescentar
muito volume (ou tempo de espera para o carregamento dos arquivos).
Dica 2: o alinhamento é mais prático quando é feito com o uso de
tabelas (que será explicado mais adiante).
Outros atributos podem ser definidos sobre a origem, posicionamento e
comportamento da imagem. Veja os mais importantes:
• alt="legenda". Fornece o texto que aparece no espaço da imagem
quando o browser não pode abrir a mesma. Veja o exemplo a seguir:
- 47 -
DESENVOLVIMENTO WEB I - 7122
• title: Fornece o texto que aparece quando posicionamos o mouse sobre
a imagem. Veja o exemplo a seguir:
• align=left, right, top, middle ou bottom
o left: a figura é desenhada como uma imagem alinhada à
esquerda, com o texto fluindo ao seu redor.
o right: a figura é desenhada como uma imagem alinhada à
direita, com o texto fluindo ao seu redor.
o top: a parte superior do texto ao redor é alinhada com a parte
superior da imagem.
o middle: a linha de base do texto ao redor é alinhada com a parte
central da imagem.
o bottom: A linha de base do texto ao redor é alinhada com a
parte inferior da imagem.
Nota: o TAG <center>...</center> é usado também para imagens,
se você quiser alinhar o texto e a figura em relação a página. O TAG
imagem deve estar dentro do TAG CENTER.
• height=número (em pixels) e width=número (em pixels). Define a
altura (height) e a largura (width) da imagem.
- 48 -
DESENVOLVIMENTO WEB I - 7122
• border=número (em pixels). Define a espessura da borda a ser
inserida na imagem. Por default o atributo BORDER é igual a zero (sem
borda).
Veja o exemplo a seguir:
Veja como será exibido no navegador WEB:
- 49 -
DESENVOLVIMENTO WEB I - 7122
• hspace=número (em pixels) e vspace=número (em pixels): Especifica
o espaço em branco extra ou as margens ao redor da imagem. HSPACE
é o espaço horizontal e VSPACE é o espaço vertical.
Veja o exemplo a seguir:
Veja como será exibido no navegador WEB:
Exercício - Inserção de Imagens
Copie 3 (três) imagens da Internet e crie as seguintes páginas:
o imagens.html => terá todas as três imagens no tamanho 100 x
100 pixels (use os atributos width e height), alinhadas à
esquerda, com o texto "Clique na imagem para visualizá-la em
tamanho real" alinhado no meio de cada imagem;
o Se colocarmos o mouse sobre cada imagem deverá aparecer o
seguinte texto: "Clique AQUI";
- 50 -
DESENVOLVIMENTO WEB I - 7122
o Cada imagem menor terá um link para a imagem maior respectiva
(imagem1.html, imagem 2.html e imagem 3.html). Todas estas
imagens deverão ter borda igual a 3 pixels e ficarem centralizadas
na página;
o Não esqueça de criar em cada página maior um link para voltar
para a página imagens.html;
Bom trabalho!!!
- 51 -
DESENVOLVIMENTO WEB I - 7122
5 - Editores e Ferramentas de Autoria
e Apoio ao Desenvolvimento WEB:
São softwares utilizados por desenvolvedores WEB para agilizar a
criação / edição de suas páginas WEB. Existem vários no mercado, dentre os
quais podemos destacar:
5.1 - PHP Editor:
Com o PHP Editor você poderá editar e visualizar facilmente suas
páginas PHP ou HTML. Possui o recurso de coloração de código fonte,
ambiente multi-documentos, auto-complemento de funções e variáveis, e
muito mais. (Gratuito)
5.2 - Edit Plus:
Com o Edit plus você poderá editar arquivos TXT, HTML e arquivos de
programação. Serve como substituto do antigo Notepad e ainda oferece boas
opções para programadores de todos os tipos. Faz a edição de HTML, ASP,
Javascript e muito mais. (Grátis para testar)
- 52 -
DESENVOLVIMENTO WEB I - 7122
5.3 - WampServer:
O WAMPServer instala automaticamente o servidor WEB Apache, o PHP,
o banco de dados MySQL e o administrador de banco de dados PHPMyAdmin,
além do SQLitemanager. Com todos esse compontenentes é possível testar
um site em desenvolvimento em sua própria máquina, simulando um servidor
WEB localmente. (Gratuito)
5.4 - MapEdit:
Mapeie imagens para seu site, criando hotspots e áreas clicáveis com os
links correspondentes. (Grátis para testar)
- 53 -
DESENVOLVIMENTO WEB I - 7122
5.5 - FastStone Image Viewer:
FastStone Image Viewer é um programa completo para pintar e bordar
com as suas imagens. Muitas ferramentas estão disponíveis no mesmo
programa, desta forma você pode executar várias tarefas sem precisar instalar
vários outros softwares. FastStone Image Viewer é um editor de imagens,
incluindo ferramentas para redimensionar, renomear, ajustar cores, criar
logos, etc. (Gratuito)
Outros Editores e Ferramentas de Autoria e Apoio ao Desenvolvimento
WEB
podem
ser
visualizados
em
http://www.superdownloads.com.br/
windows/webdesign/autoria-web-variados.html
- 54 -
DESENVOLVIMENTO WEB I - 7122
6 - HTML Avançado:
6.1 - Tabelas:
Através dos TAGS apropriados, podem ser colocados em forma de
tabela, textos formatados, listas, links, imagens e campos de formulário. Para
que uma tabela seja exibida corretamente, deve-se tomar o cuidado de usar
os comandos de fechamento dos TAGS </th>, </td> e </tr>, pois caso não
sejam usados, diferentes browsers interpretarão esta falta, e portanto, irão
exibir a tabela de maneira diferente.
6.1.1 - O TAG <table>…</table>
Estes TAGS definem que o conteúdo que está entre eles deve ser
organizado na forma de uma tabela.
Para a formatação da tabela podem ser colocados junto do TAG <table>
os seguintes atributos abaixo, sendo n: tamanho em pixels e n%: tamanho
em porcentagem relativo ao tamanho da tabela.
• align=(left/center/right): Alinhamento da tabela em relação ao
documento.
• bgcolor: Define uma cor para o segundo plano da tabela.
• border=n: coloca uma borda com espessura n (padrão: sem borda).
• cellspacing=n: espaçamento entre as células (padrão: 2).
• cellpadding=n: espaçamento entre a borda de uma célula e seu
conteúdo (padrão: 1).
• cols=n: Número de colunas de uma tabela. Permite o carregamento
mais rápido de tabela muito grandes.
• width=n ou n%: Largura da tabela.
Depois de definida a estrutura da tabela, podemos colocar os TAGS que
posicionarão o conteúdo da tabela. Abaixo mostramos somente o “esqueleto”
- 55 -
DESENVOLVIMENTO WEB I - 7122
de uma tabela com células de título (TAG <th>…</th>) e 2 linhas e 2 colunas
de dados. O conteúdo da tabela é colocado entre os TAGS <td>…</td>.
<table> <!-- DEFINE A TABELA -->
<tr> <!-- ABRE UMA LINHA -->
<th>…</th> <!--INSERE UMA CÉLULA TÍTULO E SEU CONTEÚDO-->
<th>…</th> <!--INSERE UMA CÉLULA TÍTULO E SEU CONTEÚDO-->
</tr> <!-- FECHA A LINHA -->
<tr> <!-- ABRE UMA LINHA -->
<td>…</td> <!-- INSERE UMA CÉLULA E SEU CONTEÚDO -->
<td>…</td> <!-- INSERE UMA CÉLULA E SEU CONTEÚDO -->
</tr> <!-- FECHA A LINHA -->
<tr> <!-- ABRE UMA LINHA -->
<td>…</td> <!-- INSERE UMA CÉLULA E SEU CONTEÚDO -->
<td>…</td> <!-- INSERE UMA CÉLULA E SEU CONTEÚDO -->
</tr> <!-- FECHA A LINHA -->
</table> <!-- FECHA A TABELA-->
6.1.2 - O TAG <tr>…</tr>
Abertura de uma linha da tabela, possui as seguintes opções:
• align=(LEFT/CENTER/RIGHT): Alinhamento horizontal do conteúdo,
tornando-se padrão para toda linha.
• valign=(TOP/MIDDLE/BOTTOM/BASELINE): Alinhamento vertical do
conteúdo, tornando-se padrão para toda linha.
• bgcolor: Define uma cor para o segundo plano para a linha.
6.1.3 - O TAG <td>…</td> E <th>…</th>
Cria uma célula na tabela. O TAG de célula de título (<th>…</th>)
também possui as mesmas opções mostradas abaixo.
• align=(left/center/right):
Alinhamento
horizontal
do
conteúdo,
tornando-se padrão para toda célula.
• valign=(top/middle/bottom/baseline):
Alinhamento
vertical
do
conteúdo, tornando-se padrão para toda célula.
• bgcolor: Define uma cor para o segundo plano para a célula.
- 56 -
DESENVOLVIMENTO WEB I - 7122
• border=n: coloca uma borda com espessura n (padrão: sem borda).
• colspan=n: número de colunas que a célula sobrepõe (mesclar).
• rowspan=n: número de linhas que a célula sobrepõe (mesclar).
• width=n ou n%: Largura da célula.
Crie
um
arquivo
(tabela.html),
de
acordo
com
a
imagem
e
considerações abaixo:
TABELA DE PREÇOS DE FRUTAS
Banana
Laranja
Maça
FRUTAS
Maça
Nanica
Prata
Bahia
Serra D´água
Melancia
Abacate
Nacional
Argentina
PREÇO (Kg)
2,00
1,50
1,99
0,89
0,99
0,88
3,99
6,99
• O título da tabela tem tamanho 4 e fonte Arial;
• Os nomes das frutas e os preços tem fonte Arial;
• Observe os alinhamentos nas células.
- 57 -
DESENVOLVIMENTO WEB I - 7122
6.2 - Formulários:
Um dos recursos mais fascinantes da linguagem HTML é a possibilidade
de criar formulários eletrônicos.
Usando um formulário o usuário pode interagir com o servidor, enviando
dados que serão processados no servidor e em seguida devolvidos ao cliente.
Esses comandos são os principais responsáveis pela viabilização da troca
de informações entre o cliente (usuário) e o servidor WEB. Eles podem ser
usados em qualquer tipo de atividade.
O elemento <form> delimita um formulário e contém uma seqüência
de elementos de entrada e de formatação do documento.
<form action="URL_de_script" method="método">...</form>
Os atributos de form que nos interessam agora são:
• action - especifica a URL do script ou email ao qual serão enviados
os dados do formulário.
• method - Seleciona um método para acessar o URL de ação. Os
métodos usados atualmente são:
o POST - os dados entrados fazem parte do corpo da
mensagem (campos do formulário) enviada para o servidor;
transfere grande quantidade de dados.
o GET - os dados entrados fazem parte da URL associada à
consulta enviada para o servidor; suporta até 128 caracteres.
Os formulários podem conter qualquer formatação - parágrafos, listas,
tabelas, imagens - exceto outros formulários.
Em especial, colocamos entre a marcação <form> ... </form> as
formatações para campos de entrada de dados, que são três: <input>,
<select> e <textarea>.
OBS: O TAG <form> é um TAG fechado, portanto não esqueça de
fechar o mesmo com </form>.
- 58 -
DESENVOLVIMENTO WEB I - 7122
6.2.1 - <input>:
O campo <input> tem um atributo type, o qual atribuímos seus valores
diferentes para gerar vários tipos diferentes de entrada de dados.
• Campo de dados texto (text):
Quando o input não apresenta atributos é assumido que o type = text
(default)
Nome: <input type = “text” name = “Nome”>
ou apenas
Nome: <input name = “Nome”>
RESULTADO:
• Campo de dados senha (password):
Entrada de texto na qual os caracteres são escondidos por asteriscos (*)
ou
•
Login: <input type = “text” name = “login”>
Senha: <input type = “password” name = “senha”>
RESULTADO:
• Alguns atributos para os campos do tipo text e password:
o value: pode ser usado para dar um valor inicial a um campo.
Desse modo se o usuário não preencher este campo, será
adotado esse valor padrão. Se o usuário quiser entrar com dados,
ele apaga o que se encontra escrito e escreve o texto desejado.
Nome: <input type = “text” name = “Nome” value = “Seu nome”>
- 59 -
DESENVOLVIMENTO WEB I - 7122
RESULTADO:
o size: especifica o tamanho do espaço na tela para o campo do
formulário. Só é válido para campos text e password. O valor
default (padrão) é 20.
Endereço: <input type = “text” size = “35”>
RESULTADO:
o maxlength é o número máximo de caracteres aceito em um
campo de dados (somente text e password).
Dia do mês: <input type = “text” maxlength = “2”>
RESULTADO:
Por default, o espaço destinado na tela é de 20 caracteres, mais
não conseguimos digitar mais que 2, especificado no maxlength.
Para resolver o problema do tamanho do campo, podemos usar o
código abaixo:
Dia do mês: <input type = “text” size=“2” maxlength = “2”>
RESULTADO:
• Campo de dados oculto (hidden):
Campos tipo hidden são usados para passar dados que não podem ser
alterados pelo usuário que estará inserindo informações no formulário.
Por exemplo: você tem um site com sistema de login e o usuário quer
alterar as informações de login dele. O script que irá manipular esse
- 60 -
DESENVOLVIMENTO WEB I - 7122
formulário precisa saber o ID do usuário para poder alterar as
informações no banco de dados, então esse ID é um campo hidden.
<input type= “hidden” name=“id” value="111">
Obs: Este campo não é exibido na tela.
6.2.2 - Múltipla escolha:
Checkbox insere um botão para escolha de opções. Várias opções
podem ser escolhidas.
<input type = “checkbox” name = “esporte” value =
“Basquete”> Basquete <BR>
<input type = “checkbox” name = “esporte” value = “bocha”>
Bocha
RESULTADO:
Uma diretiva checked marca uma escolha inicial:
<input type = “checkbox” name = “esporte”
value = “volei” checked> Vôlei
RESULTADO:
6.2.3 - Escolha única:
Radio insere um botão de escolha de valores para uma opção, isto é,
somente uma alternativa pode ser escolhida.
<input type = “Radio” name = “time”
value = “Palmeiras”> Palmeiras <BR>
<input type = “Radio” name = “time”
value = “Flamengo”> Flamengo <BR>
- 61 -
DESENVOLVIMENTO WEB I - 7122
RESULTADO:
Uma diretiva checked marca uma escolha inicial:
<input type = “Radio” name = “time”
value = “Fluminense” checked > Fluminense
RESULTADO:
6.2.4 - <SELECT>:
Apresenta uma lista de valores através de campos option:
<select name = “Sabor” size = “4”>
<option> Abacaxi </option>
<option selected> Creme </option>
<option> Morango </option>
<option> Chocolate </option>
<option> Côco </option>
<option> Melancia </option>
</select>
RESULTADO:
Uma diretiva selected marca uma escolha inicial. Se não for colocado o
atributo size, o mesmo recebe o valor 1 por default.
<select name = “Sabor”>
<option> Abacaxi </option>
- 62 -
DESENVOLVIMENTO WEB I - 7122
<option> Creme </option>
<option selected> Morango </option>
<option> Chocolate </option>
<option> Côco </option>
<option> Melancia </option>
</select>
RESULTADO:
Observe que é exibida a opção com a diretiva selected.
6.2.5 - <textarea>:
Textarea: Abre uma área para entrada de texto, de acordo com os
atributos para o número de colunas, linhas e, se for o caso, um valor inicial.
Se você deseja que um texto seja exibido no campo textual ao abrir o
formulário, simplesmente coloque este texto entre as marcações de início e
fim da textarea.
<textarea cols = “40” rows = “5”
name="comentario">Deixe seu comentário</textarea>
RESULTADO:
6.2.6 - Botões de ação:
Submit apresenta o botão que causa o envio dos dados de entrada
para o servidor.
<input type = “submit”>
RESULTADO:
- 63 -
DESENVOLVIMENTO WEB I - 7122
É possível modificar o rótulo desse botão através do atributo value.
<input type = “submit” value = “Gravar Dados”>
RESULTADO:
Reset restaura os valores originais das entradas de dados. Em vez do usuário
corrigir cada INPUT, um botão RESET pode ser utilizado para restaurar todos
os campos a seus valores default, como se nenhuma informação houvesse
sido digitada.
<input type = “reset”>
RESULTADO:
É possível também modificar o rótulo desse botão através do atributo
value:
<input type = “reset” value = “Apagar Tudo!”>
RESULTADO:
Exercício: Crie o formulário abaixo (formulario.html):
Observações:
* A fonte padrão do formulário é Arial;
* O Formulário está centralizado na página;
* O campo Senha é do tipo password com
número máximo de caracteres aceito igual a 10;
* As opções de Escolaridade são: 1º Grau
Completo, 2º Grau Completo e Superior
Completo;
* O campo Observações / Comentários tem 35
colunas e 3 linhas.
- 64 -
DESENVOLVIMENTO WEB I - 7122
6.3 - Frames:
Um recurso que nos permite sair do caráter contínuo de um texto
exibido na tela é o frame, onde podemos colocar em um lado da tela (ou em
qualquer outra parte) um índice para os diversos assuntos que são abordados
na página, sem que esse índice desapareça quando escolhemos algum de seus
tópicos.
O frame é o recurso que nos permite dividir uma tela do navegador em
várias áreas diferentes. Cada frame é tratado como uma página independente,
pois para sua utilização se faz necessário dois tipos de documentos html: o
frameset e o conteúdo. O frameset é um documento html que é o
responsável pelo layout da página com os frames. É nele que são
especificados a quantidade, o tamanho e a posição de cada frame.
O conteúdo também é um documento html em que ficam contidas as
informações (texto, figuras, etc.) a serem exibidas em seu respectivo frame ou
em uma janela independente.
O frameset é um documento que serve apenas como o layout da
página, portanto, os TAGS de formatação de texto, inserção de figuras,
tabelas e outros não são suportados neste documento, incluindo o TAG
<body>. Mesmo assim o frameset é permitido dentro de um documento
comum, mas não pode ficar entre os TAGS <body>…</body>, apesar disso
recomendamos que o frameset seja um documento totalmente
separado, pois facilita a construção da página e suas futuras correções e
expansões. Veja o exemplo abaixo:
- 65 -
DESENVOLVIMENTO WEB I - 7122
Para o exemplo acima, temos os seguintes arquivos:
Arquivo Frameset
frameset.html
<html>
<head>
<title>Uso de Frames</title>
</head>
<frameset framespacing = "10" frameborder = "0" cols = "20%, 80%">
<frame name = "indice" src = "frame01.html" scrolling = "no" noresize>
<frame name = "principal" src = "frame02.html" scrolling = "yes" noresize>
</frameset>
<noframe>
<body>
Esta página usa recursos de frame e o seu browser não suporta este recurso.<BR>
</body>
</noframe>
</html>
Arquivos de Conteúdo
frame01.html
<html>
<head>
<title>Novo Documento</title>
</head>
<body>
<center>
<h2>Menu</h2><br>
<br>
<a href="frame03.html" target="Principal">Frame 03</a>
<center>
</body>
</html>
frame02.html
<html>
<head>
<title>Novo Documento</title>
</head>
<body bgcolor="#000000" text="#ffffff">
<center>
<h2>Página Principal</h2>
<center>
</body>
</html>
frame03.html
<html>
<head>
<title>Novo Documento</title>
</head>
<body bgcolor="#FF0000" text="#FFFF00">
<center>
<h2>Frame 03</h2>
<center>
</body>
</html>
No arquivo “frameset.html” é especificado quais os documentos
(frame01.html e frame02.html) que vão ocupar as áreas da janela. Nestes
- 66 -
DESENVOLVIMENTO WEB I - 7122
documentos encontram-se os conteúdos de cada frame. Se o endereço
digitado for o de um arquivo conteúdo (frame01.html e frame02.html)
somente aparecerá o conteúdo do respectivo arquivo.
6.3.1 - O TAG FRAMESET:
Definição de grupo de frames. É usado no lugar do TAG <BODY> no
documento que define os frames.
<frameset rows=”t1/t1%,t2/t2%,…” cols=”t1/t1%,t2/t2%,…”
frameborder=0/1 framespacing="t1">…
</frameset>
Onde:
t1, t2: especifica o tamanho em pixels.
t1%, t2%: especifica o tamanho como porcentagem da janela.
6.3.1.1 - Atributos:
• ROWS: faz a divisão horizontal da janela.
• COLS: divide a janela em colunas.
Combinando “ROWS” e “COLS” teremos a formação de uma grade.
O exemplo mostrado anteriormente tem 1 linha (não exibe ROW) e 2
colunas (ROWS=”20%, 80%”).
• FRAMEBORDER: oculta (0) ou exibe (1)
• BORDER: espessura da borda (em pixels)
• BORDERCOLOR: cor da borda
• FRAMESPACING: espaçamento entre os frames.
6.3.2 - NOFRAME:
<NOFRAME>…</NOFRAME>: especifica o conteúdo que será mostrado
no lugar dos frames caso o browser não possua suporte a frames. Os
- 67 -
DESENVOLVIMENTO WEB I - 7122
browsers que suportam este recurso irão ignorar esta TAG e não haverá
problemas com a exibição do documento.
6.3.3 - O TAG FRAME:
Define o frame dentro do frameset.
<FRAME SRC=”URL” NAME=”TEXTO”>
6.3.3.1 - Atributos:
• SRC: define o endereço do arquivo a ser exibido no frame.
• NAME: Nome do frame.
Outros comandos são opcionais como:
• MARGINWIDTH=”t1/t1%”: define o tamanho das margens esquerda e
direita.
• MARGINHEIGHT=”t1/t1%”: define o tamanho das margens superior e
inferior.
• NORESIZE: evita que o usuário redimensione o frame.
• SCROLLING=(YES/NO/AUTO): barras de rolagem do frame (yes: visível
/ no: não exibe a barra / auto: inclui se o conteúdo ultrapassar o
tamanho definido para o frame, esta é a opção padrão).
6.3.4 - Comandos no documento conteúdo:
Para que exista coordenação entre o documento de layout (frameset) e
os documentos de conteúdo, eles devem conter as seguintes TAGS:
<a href=”URL” target=”NOME”>...</a>
Carrega a página (URL) no frame especificado pelo “NOME”.
Exercício: Construa os arquivos de acordo com o que foi explicado acima e
crie mais links no arquivo frame01.html, e arquivos correspondentes, para
serem exibidos na página Principal (<frame name = "Principal">).
- 68 -
DESENVOLVIMENTO WEB I - 7122
6.4 – Iframes:
Outra maneira mais elegante de inserir outras páginas dentro de nossos
documentos HTML é através do comando <iframe>. Nesse caso, devemos
especificar o tamanho do espaço que deverá ser aberto no documento para
apresentação da outra página.
Abaixo um exemplo, onde <iframe> foi colocado de forma a abrir uma
página centralizada (iframe.html):
<HTML>
<HEAD>
<TITLE>Exemplo de uso do iframe</TITLE>
</HEAD>
<BODY>
<CENTER>
<iframe
src='http://selos.climatempo.com.br/selos/MostraSelo120.php?CODCIDADE=152&S
KIN=azul'
align='center'
scrolling='no'
frameborder='0'
width=120
height='148' marginheight='0' marginwidth='0'></iframe>
</CENTER>
</BODY>
</HTML>
6.4.1 - Atributos:
• ALIGN = LEFT | RIGHT | CENTER | TOP | MIDDLE | BOTTOM
Valores:
o LEFT – Moldura à esquerda e texto ao redor;
o RIGHT – Moldura à direita e texto ao redor;
o CENTER – Moldura no centro e texto ao redor;
o TOP – Texto alinhado com a parte superior do frame;
o MIDDLE – Texto alinhado com o centro do frame;
o BOTTOM – Texto alinhado com a parte inferior do frame;
• FRAMEBORDER = 1 | 0
• HEIGHT = “número | % “ - Altura da moldura.
• MARGINHEIGHT = “número | % “
• MARGINWIDTH = “número | % “
- 69 -
DESENVOLVIMENTO WEB I - 7122
• NAME = “texto“
• NORESIZE
• SCROLLING = “yes | no | auto “
• SRC = “URL “
• WIDTH = “número | % “ - Largura da moldura.
Exercício: Crie uma página html (iframe_exercicio.html) com um iframe de
120 pixels de largura, 148 pixels de altura, margem superior, inferior, direita e
esquerda iguais a zero, border igual a zero e que não exiba a barra de
rolagem, de modo que o iframe fique centralizado na página html criada.
6.5 - Imagens Mapeadas e Cambiáveis:
6.5.1 - Imagens Mapeadas:
Quando queremos criar um link para uma outra página HTML a partir de
uma imagem, fazemos da seguinte maneira:
...
<a href="index.html"><img src="img/Imagem.jpg"></a>
...
Seguindo a marcação acima, basta clicar em qualquer parte da imagem
para irmos ao endereço que definimos. Porém, há momentos em que
desejamos utilizar apenas parte da imagem. Para isso podemos utilizar o tag
<map> cuja função é definir determinadas áreas da imagem para serem
usadas como links, por exemplo.
Existem 3 formas que podemos atribuir a uma área da imagem com o
tag <map>: círculo, quadrado (ou retângulo) e polígono. O código abaixo
mostra uma imagem mapeada com o formato de um círculo, onde podemos
clicar. Pegue a imagem Koala.jpg que se encontra em "Amostra de Imagens"
- 70 -
DESENVOLVIMENTO WEB I - 7122
do Windows Explorer e coloque no mesmo diretório onde você salvará o
arquivo imagens_mapeadas.html com o código fonte abaixo:
<html>
<head>
<title>Imagens Mapeadas</title>
</head>
<body>
<img src="Koala.jpg" border="0" usemap="#urso">
<map name="urso">
<area shape="circle" coords="384,384,20"
href="http://www.universo.edu.br" alt="Universo"><!--OLHO ESQUERDO-->
<area shape="circle" coords="662,427,20"
href="http://www.google.com.br" alt="Google"><!--OLHO DIREITO-->
</map>
</body>
</html>
Observe o valor atribuído a "shape". A palavra-chave "circle" significa
que a área terá forma de círculo. Os valores atribuídos a "coords" indicam o
local onde ficará o círculo e o tamanho dele. A tabela abaixo apresenta as
formas e exemplos de como definir as coordenadas em uma imagem:
Shape (formato)
Coords (coordenadas)
circle (círculo)
50,50,20
rect (retângulo)
100,150,200,140
poly (polígono)
566,206,450,339,625,343
Para o círculo as 3 coordenadas significam, respectivamente, distância
da borda esquerda da imagem, distância do topo da imagem e diâmetro do
círculo. Para o retângulo, os dois primeiros valores definem o canto superior
esquerdo desse formato, e os dois últimos valores definem o canto inferior
direito do formato. Já para o polígono, cada dupla de valores representa um
- 71 -
DESENVOLVIMENTO WEB I - 7122
canto desse formato. No caso das coordenadas apresentadas na tabela para o
Shape poly, um triângulo é formado (3 pares de coordenadas).
Para definir as coordenadas desejadas, basta abrir a imagem no Paint e
observar os valores apresentados pelo programa da posição do mouse.
Observe a imagem abaixo:
Ponteiro do mouse
Coordenados do ponto
Existem outros editores de imagens que também mostram as
coordenadas da imagem, mas o Paint é o mais acessível, já que sempre vem
junto com o Sistema Operacional Windows.
Existem também editores e ferramentas de autoria e apoio ao
desenvolvimento WEB que já mapeiam imagens, como por exemplo, o
MapEdit já citado.
- 72 -
DESENVOLVIMENTO WEB I - 7122
Exercício: Mapeie a pata da imagem Koala.jpg, inserindo um link para o site
www.globo.com no formato de um retângulo e a testa da imagem Koala.jpg,
inserindo um link para o site www.uol.com.br no formato de um triângulo.
6.5.2 - Imagens Cambiáveis:
Uma imagem cambiável é aquela que sofre algum tipo de mudança
quando passamos com o mouse sobre ela. O famoso efeito OnMouseOver /
OnMouseOut.
Normalmente para conseguir tal feito, utiliza-se um código JavaScript, o
que dificultava a vida de quem não tem facilidade com essa linguagem. Veja
abaixo o código fonte (imagens_cambiaveis.html) do funcionamento de uma
imagem cambiável:
<html>
<head>
<title>Imagens Cambiáveis</title>
</head>
<body>
<img src="img_camb_1.jpg" onMouseOver="this.src='img_camb_2.jpg'"
onMouseOut="this.src='img_camb_1.jpg'" />
</body>
</html>
- 73 -
DESENVOLVIMENTO WEB I - 7122
6.6 – XHTML:
XHTML é a sigla em inglês para EXtensible HyperText Markup
Language que em tradução livre resulta em Linguagem Extensível para
Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e
nada mais é do que uma HTML "pura, clara e limpa".
6.6.1 - Vantagens de se usar XHTML:
Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos
documentos WEB produzidos ou se migrar os documentos atuais escritos em
HTML. E, dentre elas destaca-se em primeiro plano a compatibilidade da
linguagem XHTML com as futuras aplicações de usuários, garantindo desde já
que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência
é a de que futuras versões de navegadores e agentes de usuários em geral,
deixem de suportar elementos e atributos já em desuso ("deprecated")
segundo as Recomendações do W3C1, bem como antigos e ultrapassados
esquemas e esboços da HTML.
XHTML é a linguagem da web do futuro desde já a disposição de
projetistas e desenvolvedores web.
XHTML é um código consistente que dispensa uso de "truques" e
"hacks" para contornar "bugs".
Editar um código XHTML existente é uma tarefa bem simples por se
tratar de uma escrita limpa e evidente.
O tempo de carregamento de uma página XHTML é mais rápido, pois os
navegadores têm a interpretar uma página limpa sem ter que decidir sobre
renderização de erros de código.
1
O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um
consórcio internacional com quase 400 membros (agrega empresas, órgãos governamentais e organizações independentes)
com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web.
- 74 -
DESENVOLVIMENTO WEB I - 7122
Uma página XHTML é mais acessível aos navegadores e às aplicações de
usuário em geral, incrementando a interoperabilidade e a portabilidade dos
documentos web.
Uma página XHTML é totalmente compatível com todas as aplicações
HTML antigas e já ultrapassadas.
6.6.2 - XHTML é um "Padrão Web" (Web Standard)
XHTML 1.0 é uma recomendação do W3C e esta versão data de 26 de
janeiro de 2000. Isto significa que trata-se de uma linguagem estável,
oficialmente especificada pelo W3C, tendo sido projetada e revisada pelos
seus membros e é um "Padrão Web".
6.6.3 - As diferenças entre XHTML e HTML:
As principais diferenças são:
6.6.3.1 - Todos os tags devem ser escritos em letras minúsculas:
Errado:
<DIV><P>Aqui um texto</P></DIV>
Certo:
<div><p>Aqui um texto</p></div>
6.6.3.2 - Os tags devem estar convenientemente aninhados:
Errado:
<div><em><p>Aqui um texto negrito</em></p></div>
Certo:
<div><em><p>Aqui um texto negrito</p></em></div>
- 75 -
DESENVOLVIMENTO WEB I - 7122
6.6.3.3 - Os documentos devem ser bem formados:
Todos os elementos XHTML devem estar corretamente aninhados
dentro do elemento raiz <html>. A estrutura básica do documento deve ser
conforme abaixo:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
6.6.3.4 - O uso de tags de fechamento é obrigatório:
Em HTML é permitido, para determinados elementos, omitir-se o tag de
fechamento. XHTML não permite omissão de qualquer tag de fechamento.
Errado:
<p>Um parágrafo.<p>Outro parágrafo.
Certo:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
6.6.3.5 - Elementos vazios (TAGS abertas) devem ser fechados:
Errado:
<br><hr><img src="imagem.gif" alt="minha imagem">
Certo:
<br /><hr /><img src="imagem.gif" alt="minhaimagem" />
6.6.3.6 - Sintaxe para atributos:
Nomes de atributos: Assim como os tags, os atributos também são
sensíveis ao tamanho de caixa e então deve-se escrever nomes de atributos
em minúsculas:
- 76 -
DESENVOLVIMENTO WEB I - 7122
Errado:
<td ROWSPAN="3">
Certo:
<td rowspan="3">
Valores de atributos: Os valores de atributos devem estar entre
"aspas duplas " ou 'aspas simples':
Errado:
<td rowspan=3>
Certo:
<td rowspan="3"> ou <td rowspan='3'>
Valores dos atributos: Todos os atributos devem receber um valor:
Errado:
<input checked />
Certo:
<input checked="checked" />
Os atributos id e name: O HTML define o atributo name para os
elementos a, form, frame, iframe, img, input e map. O HTML também
introduziu o atributo id. Ambos atributos foram projetados para serem usados
como identificadores. Documentos XHTML compatíveis com XML e bem
estruturados, DEVEM usar o atributo id e não name ao definir identificadores
para os elementos listados acima. Em XHTML, o atributo name destes
elementos está formalmente em desuso e possivelmente será excluido nas
versões futuras de XHTML.
- 77 -
DESENVOLVIMENTO WEB I - 7122
Errado:
<img src="imagem.gif" name="minha_imagem" />
Certo:
<img src="imagem.gif" id="minha_imagem" />
Nota: Por razões de compatibilidade com navegadores antigos você pode usar
ambos os atributos como mostrado a seguir:
<img src="imagem.gif" id="minha_imagem" name="minha_imagem" />
- 78 -
DESENVOLVIMENTO WEB I - 7122
7 - Folhas de Estilos (CSS):
7.1 - Introdução às CSS:
CSS é a sigla em inglês para Cascading Style Sheet que em português
foi traduzido para folha de estilo em cascata e é definida como: "Folha de
estilo em cascata é um mecanismo simples para adicionar estilos (p.ex.,
fontes, cores, espaçamentos) aos documentos Web."
A grande vantagem do uso de CSS é a de separar a marcação HTML, da
apresentação do site. Em outras palavras, vale dizer que o HTML destina-se
unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda
a responsabilidade pelo visual do documento.
HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões,
formulários, imagens e demais elementos da página e CSS define cores,
posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado à
apresentação.
A adoção desta técnica resulta em múltiplas vantagens e benefícios que
não são conseguidos quando se utiliza o conceito largamente empregado para
construção de web sites, baseado no uso de tabelas e de atributos de
estilização dentro das tags HTML.
CSS é suportado por todos os navegadores atuais.
7.1.1 - Um breve histórico:
Quando a web foi criada por Tim Berners Lee, HTML era utilizada
apenas para estruturar os conteúdos. Com a popularização da web, os
desenvolvedores começaram a sentir a necessidade de adicionar layout às
páginas. Os fabricantes de navegadores (Microsoft e Netscape) criaram tags
para controlar layout: A frase “Você precisa do navegador X para visualizar
- 79 -
DESENVOLVIMENTO WEB I - 7122
esta página” tornou-se muito comum. CSS foi criada pelo consórcio W3C2 para
solucionar este tipo de problema e padronizar o controle de layouts.
7.2 - Sintaxe CSS:
Funcionamento Básico:
Em HTML:
• <body bgcolor=”#FF0000”>
Em CSS:
• body {background-color: #FF0000;}
Cada estilo é definido como uma regra CSS.
Cada regra deve ter a sintaxe:
seletor {propriedade: valor;}
• Seletor: Descreve o elemento ao qual o estilo será aplicado.
• Propriedade: Descreve a propriedade do elemento a qual deseja-se
aplicar o estilo (ex: background-color, font-size).
• Valor: Descreve a configuração aplicada ao atributo. Deve ser uma
configuração válida para o atributo.
7.3 - Tipos de CSS:
Existem três maneiras de aplicar estilos CSS a páginas HTML:
7.3.1 - Método in-line (atributo style) (css1.html):
2
O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um
consórcio internacional com quase 400 membros, agrega empresas, órgãos governamentais e organizações independentes
com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web.
- 80 -
DESENVOLVIMENTO WEB I - 7122
7.3.2 - Método interno (tag style) (css2.html):
7.3.3 - Método externo (link para uma folha de estilos):
• Método recomendado!
• Será utilizado nesta disciplina.
• Uma folha de estilos externa é simplesmente um arquivo .css que
contém definições de estilos.
• Por exemplo, para uma folha de estilos externa chamada style.css
criada no diretório style.
• Cria-se um link no documento HTML (css3.html) para a folha de estilos
(style.css).
• O link é uma simples linha de código HTML:
• Esta linha deve ser inserida na seção header (entre as tags <head>
</head>):
- 81 -
DESENVOLVIMENTO WEB I - 7122
• Este link informa ao navegador para usar o arquivo CSS apontado na
renderização do layout do documento HTML.
• Vários arquivos HTML podem apontar para um único arquivo CSS.
• Vantagem: Com um único arquivo CSS é possível controlar o layout de
diversas páginas HTML.
Veja abaixo como ficará o arquivo style.css utilizado no método
externo:
7.4 - Regras CSS para cores:
A propriedade color define a cor de primeiro plano de um elemento.
Exemplo: Queremos que todos os cabeçalhos de primeiro nível (<h1>) sejam
da cor vermelha:
A propriedade background-color define a cor de fundo de um
elemento. O elemento <body> contém todo o conteúdo da página web. Para
mudar a cor de fundo de uma página, devemos aplicar a propriedade
background-color ao elemento <body>. Pode-se aplicar cores de fundo a
diversos elementos simultaneamente.
- 82 -
DESENVOLVIMENTO WEB I - 7122
No exemplo a seguir foram aplicadas cores de fundo diferentes para
<h1> e <body>.
Note que foram aplicadas duas propriedades ao elemento <h1>.
Sempre que isso acontecer deve-se separar as propriedades por ponto-evírgula.
Exercício: Crie o documento abaixo (exemplo_css.html) e faça as
alterações no mesmo de acordo com a considerações abaixo:
1) Utilizando o método externo, faça com que:
• As tags h1 tenham cor vermelha.
• As tags h2 tenham cor azul e cor de fundo cinza.
• As tags h3 tenham cor verde.
• O corpo do texto tenha cor de fundo preto e cor do texto branca.
2) Salve os estilos criados no exercício 1) em um arquivo externo .css
(style.css) e vincule-o ao documento HTML.
3) Faça com que apenas o primeiro parágrafo tenha a cor verde.
- 83 -
DESENVOLVIMENTO WEB I - 7122
7.5 - A propriedade background:
A propriedade background define as características (os valores na regra
CSS) do fundo dos elementos HTML.
As propriedades background são as listadas abaixo:
• background-color ............ cor do fundo;
• background-image........... imagem de fundo;
• background-repeat .......... maneira como a imagem de fundo é
posicionada;
• background-attachment ... se a imagem de fundo "rola" ou não com a
tela;
• background-position ........ como e onde a imagem de fundo é
posicionada (local da tela);
• background..................... maneira
abreviada
para
todas
as
propriedades;
Valores válidos para as propriedades do fundo:
• background-color:
o código hexadecimal: #FFFFFF
o código rgb: rgb(255,235,0)
o nome da cor: red, blue, green, etc...
o transparente: transparent
• background-image:
o URL: url(caminho/imagem.gif)
• background-repeat:
o não repete: no-repeat
o repete vertical e horizontal: repeat
o repete vertical: repeat-y
o repete horizontal: repeat-x
- 84 -
DESENVOLVIMENTO WEB I - 7122
• background-attachment:
o imagem fixa na tela: fixed
o imagem "rola" com a tela: scroll
• background-position:
o x-pos y-pos
o x-% y-%
o top left
o top center
o top right
o center left
o center center
o center right
o bottom left
o bottom center
o bottom right
7.5.1 - Inserindo imagem de fundo:
<style type="text/css">
body {
background-image: url("arte.gif");
background-repeat: repeat;
background-attachment: fixed;
}
</style>
A imagem arte.gif será inserida como fundo de página do documento,
será repetida tanto na vertical quanto na horizontal (repeat) e será fixa no
fundo, não rolando com a página (fixed).
- 85 -
DESENVOLVIMENTO WEB I - 7122
7.6 - Propriedades de Fonte (font-family):
A propriedade font-family é usada para definir uma lista de fontes e sua
prioridade para apresentação de um elemento em uma página.
Se a primeira fonte da lista não estiver instalada na máquina do usuário,
deverá ser usada a segunda e assim por diante.
Existem duas formas de definir fontes:
• Através do nome da família. Por exemplo:
o Arial
o Times New Roman
o Verdana
• Através do nome da família genérica. Por exemplo:
o serif:
o sans-serif:
o monospace:
Ao listar fontes, recomenda-se começar com uma preferida. Em seguida
deve-se listar algumas alternativas. A listagem deve se encerrar com uma
família genérica.
A propriedade font-style define o estilo da fonte, podendo ser:
• normal.
• italic.
- 86 -
DESENVOLVIMENTO WEB I - 7122
•
oblique.
A propriedade font-weight define o peso da fonte (negrito).
A propriedade font-size define o tamanho. O tamanho da fonte pode ser
definido de diferentes formas (%, pt,px). (Obs: 1 pt = 1/72 polegada)
A propriedade font é um resumo de todas as propriedades de definição
de fontes listadas anteriormente. Da mesma forma que com a propriedade
background, com font é possível deixar a folha de estilos mais clara e fácil de
ser compreendida.
Exemplo: Observe as linhas a seguir:
Usando "font" consegue-se o mesmo resultado, de modo abreviado:
A declaração abreviada deve seguir a seguinte ordem:
font-style | font-variant | font-weight | font-size | font-family
Se
uma
das
propriedades
não
for
declarada
ela
assume
automaticamente o seu valor pãdrão (default).
- 87 -
DESENVOLVIMENTO WEB I - 7122
7.7 - Propriedades de Texto:
A propriedade text-indent permite que você aplique um recuo à primeira
linha de um parágrafo.
Resultado:
A propriedade text-align corresponde ao atributo align das antigas
versões do HTML.
Textos podem ser alinhados à esquerda (left), à direita (right),
centralizados (center) ou justificados (justify).
A
propriedade
text-decoration
possibilita
adicionar
"efeitos"
ou
"decoração" em textos. Pode-se colocar, por exemplo, linhas acima do texto,
abaixo do texto ou sobre o texto.
- 88 -
DESENVOLVIMENTO WEB I - 7122
Com a propriedade 'letter-spacing' define-se o espaço entre as letras.
A propriedade text-transform controla a capitalização do texto. Existem
quatro valores possíveis para essa propriedade:
• capitalize: Capitaliza a primeira letra de cada palavra.
Por exemplo: ”john doe” transforma-se em ”John Doe”.
• uppercase: Converte todas as letras para maiúscula.
Por exemplo: ”john doe” transforma-se em”JOHN DOE”.
• lowercase: Converte todas as letras para minúscula.
Por exemplo: ”JOHN DOE” transforma-se em”john doe”.
• none: Sem trasformações - o texto é apresentado como escrito no
código HTML.
7.8 - Propriedades de Links:
Um link comporta-se como um texto e por isso pode-se aplicar as
propriedades vistas anteriormente.
A diferença do link é que pode-se definir as propriedades de acordo com
o estado do link (visitado, ativo ou com mouse sobre ele).
- 89 -
DESENVOLVIMENTO WEB I - 7122
Para isso utiliza-se as pseudo-classes.
Uma pseudo-classe permite configurar levando em conta condições
diferentes ou eventos ao definir uma propriedade de estilo para uma tag
HTML. Por exemplo, para configurar um link pode-se fazer:
Mas um link pode ter diferentes estados, então faz-se:
A pseudo-classe :link é usada para links não visitados. No exemplo a
seguir links não vistados serão na cor verde.
A pseudo-classe :visited é usada para links visitados. No exemplo a
seguir links visitados serão na cor amarela.
A pseudo-classe :active é usada para links ativos. No exemplo a seguir
links ativos terão seu fundo na cor vermelha.
A pseudo-classe :hover é usada para quando o ponteiro do mouse está
sobre o link. Por exemplo, podemos mudar a cor do link para laranja e o texto
para itálico quando o ponteiro do mouse passa sobre ele.
- 90 -
DESENVOLVIMENTO WEB I - 7122
Exercício (exemplo2_css.html):
Faça os exercícios a seguir utilizando o código HTML apresentado. Crie
um arquivo chamado 'estilo2.css' (Método externo) e:
1) Coloque a imagem do arquivo 'papelparede.jpg' como fundo da
página e faça com que esse fundo seja repetido em todas as direções e fique
fixa na tela, não rolando junto com a página.
2) Faça todo o texto da página ser de cor branca.
3) Faça que a família de todo o texto da página obedeça essa ordem:
Verdana, Arial, sans-serif.
4) Faça que todos os cabeçalhos (h1, h2 e h3) fiquem em negrito.
5) Faça os cabeçalhos h2 e h3 em itálico e com espaçamento entre as
letras de 10 pixels.
6) Faça os cabeçalhos h1 sublinhados.
7) Controle o tamanho da fonte do cabeçalho h1 como 30pt, do h2
como 24pt e do h3 como 20pt.
8) Coloque um recuo em todos os parágrafos de 26px.
9) Coloque todo o conteúdo do cabeçalho h1 em letras maiúsculas.
10) Coloque apenas as primeiras letras de cada palavra dos cabeçalhos
h2 e h3 em maiúsculo, com o restante minúsculo.
Maiores informações sobre o uso de css podem ser obtidas em
http://www.maujor.com/tutorial/intrtut.php
- 91 -
DESENVOLVIMENTO WEB I - 7122
Exercício Extra de CSS (exemplo3_css.html):
Faça os exercícios a seguir utilizando o código HTML apresentado. Crie
um arquivo chamado 'estilo3.css' (Método externo) e:
1) Coloque a imagem do arquivo 'papelparede.jpg' como fundo da
página e faça com que esse fundo seja repetido somente na horizontal e "role"
junto com o conteúdo da página. Defina também a cor de fundo de página
como preta.
2) Faça todo o texto da página ser de cor amarela.
3) Faça que a família de todo o texto da página obedeça essa ordem:
Tahoma, Arial, sans-serif.
4) Faça que os cabeçalhos (h1 e h2) fiquem em negrito e sublinhados.
5) Faça o cabeçalho h1 com espaçamento entre as letras de 15 pixels e
centralizado.
6) Faça os cabeçalhos h3 ficarem tachados (com uma linha sobre o
texto).
7) Controle o tamanho da fonte do cabeçalho h1 como 60pt e do h2 e
h3 como 30pt.
- 92 -
DESENVOLVIMENTO WEB I - 7122
8) Coloque um recuo de 30px e alinhamento justificado em todos os
parágrafos.
9) Coloque todo o conteúdo do cabeçalho h1 em letras maiúsculas, todo
o conteúdo do cabeçalho h3 em minúsculas e coloque apenas as primeiras
letras de cada palavra do cabeçalho h2 em maiúsculo.
10) Crie no arquivo exemplo3_css.html um link para o site da Universo
(www.universo.edu.br), de forma que o mesmo abra em uma nova
página/aba. No arquivo estilo3.css defina os links da seguinte maneira: cor
azul para os links não visitados, cor vermelha para os links visitados e quando
o ponteiro do mouse estiver sobre o link, o mesmo fique na cor branca, com o
fundo vermelho, em itálico e com o tamanho da fonte igual a 20px.
Bom trabalho!!!
- 93 -