Uma das características mais interessantes da
Internet é a oportunidade que todos os usuários têm de disseminar informações.
Tanto um vencedor do prêmio Nobel, quanto um estudante do primeiro ano de
faculdade contam com os mesmos canais de distribuição para expressar suas
idéias. Com o surgimento da World Wide Web, esse meio só foi enriquecido.
O conteúdo da rede ficou mais atraente com a possibilidade de incorporar imagens
e sons. Um novo sistema de localização de arquivos criou um ambiente em que
cada informação tem um endereço único e pode ser encontrada por qualquer usuário
da rede.
Isso significa que na prática
não existe nenhuma diferença entre as páginas de uma grande
empresa na Web e as páginas que o leitor irá produzir. Ambas
podem ser acessadas com a mesma facilidade. A diferença é uma só:
a criatividade. Este texto tem o objetivo de fornecer as
ferramentas básicas para exercitar a criatividade na Web. Será
preciso aprender um pouco de HTML (HyperText Markup Language), a
linguagem utilizada para criar as páginas. Você também
encontrará uma porção de dicas, truques e exemplos.
O que é a Internet?
Existem muitos termos que
tentam definir a Internet. Super-estrada da informação,
preferem os políticos. Rede de redes, insistem os cientistas. O
certo é que cada um desses grupos prefere ver a rede segundo
seus próprios interesses. Para os políticos, uma nova fronteira
de construção e investimentos coletivos é um desafio. Já os
cientistas, rigorosos em suas definições, enxergam a virtude da
Internet em conectar computadores de qualquer tipo em todo o
globo.
As visões distintas da rede não
param por aí. Há quem veja na Internet uma perigosa fonte de
pornografia. As indústrias sonham com o dia em que poderão
vender diretamente aos consumidores, sem nenhum intermediário.
Empresas de comunicação esperam o meio que vai reunir rádio,
TV e televisão em um mesmo sistema de produção. Pais de
estudantes no exterior matam as saudades pelo monitor. E paqueras
virtuais acontecem a toda hora em cada canto da rede.
A Internet é tudo isso ao
mesmo tempo. E com certeza muito mais. A rede é o que cada
pessoa quiser que ela seja. Em toda a história da Internet foram
os usuários que inventaram novos recursos e novas aplicações.
é um terreno fértil para boas idéias.
Isso tudo porque a Internet é
uma invenção muito simples. Nada mais é do que uma forma fácil
e barata de fazer com que computadores distantes possam se
comunicar. A partir daí, a revolução está nas mãos das
pessoas.
Cada usuário recebe uma
identificação única, conhecida como endereço. Com esse endereço,
ele pode se comunicar, enviando mensagens para outras pessoas. é
o que se chama de correio eletrônico. Graças ao esforço de
instituições como Universidades e empresas ligadas à pesquisa,
dispostas a investir dinheiro e pessoal para criar e manter os
pontos principais da rede ; os servidores (computadores de alto
desempenho) ; é possível conseguir programas de graça e
consultar bancos de dados públicos.
Hoje, com o sucesso da Internet,
toda empresa se vê na obrigação de colocar a cara na rede. Os
serviços se multiplicam. Os bancos planejam oferecer todas as
suas operações pelo computador. Notícias são distribuídas
imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de
discos vendem seus produtos.
No entanto, boa parte do
material da rede é produzido por indivíduos querendo expressar
ao mundo suas preferências. Um usuário reúne tudo que tinha
sobre Jornada nas Estrelas e coloca na Internet. Outro, com
objetivos mais práticos, escreve um currículo e espera que seus
talentos sejam descobertos. Todo mundo que um dia sentiu vontade
de compartilhar suas façanhas agora pode fazer isso. O tal
terreno fértil da Internet tem um nome. Se chama World Wide Web,
ou apenas Web.
Como Funciona a Web?
A Web funciona basicamente com
dois tipos de programas: os clientes e os servidores. O cliente
é o programa utilizado pelos usuários para ver as páginas,
enquanto os servidores ficam responsáveis por armazenar e
permitir o acesso ao conteúdo da rede. Neste texto chamamos o
programa cliente de navegador (em inglês, browser). O que o
navegador faz é requisitar um arquivo para um servidor. Se a
informação pedida realmente estiver armazenada naquele servidor,
o pedido será enviado de volta e mostrado na tela do navegador.
A informação na Web é
organizada na forma de páginas, que podem conter texto, imagens,
sons e, mais recentemente, pequenos programas. Além disso, as páginas
da Web podem ser ligadas umas com as outras, formando o que se
chama de um conjunto de hipertextos. Assim é possível, por
exemplo, que um trabalho de faculdade faça referência direta a
um texto que serviu de base para o estudo. O leitor interessado
na fonte de pesquisa pode saltar imediatamente para o texto
original. Dessa forma, qualquer documento pode levar a um outro
texto que também esteja disponível na rede. A possibilidade de
criar uma malha de informação em torno do planeta
deu origem ao nome World Wide Web, que significa teia de
alcance mundial.
O navegador
Como foi dito há pouco, os usuários
circulam por essa teia com um programa chamado navegador. Esse
programa envia pedidos de páginas pela rede e as apresenta na
tela do usuário. Existem vários navegadores para todos os tipos
de computadores. Os mais conhecidos são o Netscape Navigator, o
Microsoft Internet Explorer e o NCSA Mosaic.
Os servidores
Os pedidos dos navegadores são
atendidos por uma combinação de computadores e programas que
formam os servidores. Esses computadores e programas armazenam as
páginas e podem exercer algum tipo de controle sobre quais usuários
podem acessá-las. São máquinas potentes instaladas em
universidades, empresas e órgãos do governo conectadas
permanentemente à Internet. Também é possível montar um
servidor de Web em casa, com um computador pessoal. Existe
programas de servidores de Web tanto para Mac como para PC.
Apesar de poderem ser
instalados em praticamente todos os tipos de computadores, os
servidores devem estar conectados 24 horas por dia na rede para
que os usuários possam requisitar as páginas a qualquer momento.
A melhor solução para montar um conjunto de páginas é
procurar uma empresa que aluga espaço em um servidor Web.
O que é uma URL?
A Web permitiu que cada
documento na rede tenha um endereço único, que indica o nome do
arquivo, diretório, nome do servidor e o método pelo qual ele
deve ser requisitado. Esse endereço foi chamado de URL (Uniform
Resource Locator, numa tradução literal, localizador uniforme
de recursos). Uma URL tem a seguinte estrutura:
http://www.seed.net.tw/~milkylin/htmleasy.html
Onde:
http:// é o método pelo qual
ocorrerá a transação entre cliente e servidor. HTTP (HyperText
Transfer Protocol, ou protocolo de transferência de arquivos de
hipertexto) é o método utilizado para transportar páginas de
Web pela rede. Outros métodos comuns são: ftp:// (para
transferir arquivos), news:// (grupos de discussão) e mailto://
(para enviar correio eletrônico).
www.seed.net.tw é o nome do
servidor onde está armazenado o arquivo. Nem sempre o nome de um
servidor de Web inicia por WWW. Existem servidores de Web com
nomes como cs.dal.ca.
/~milkylin/ é o diretório
onde está o arquivo. às vezes uma URL indica apenas o diretório
(ou o servidor). Nesse caso, o servidor se encarrega de procurar
e enviar o arquivo adequado.
htmleasy.html é o nome do
arquivo. A extensão .html indica que se trata de uma página Web.
Uma URL pode indicar outras extensões. Quando o navegador recebe
um arquivo com a extensão .txt, o arquivo é tratado como um
texto comum. Em outros casos, como nas extensões .zip (arquivo
comprimido) e .exe (um programa), o navegador abre uma janela
perguntando ao usuário o que fazer com o arquivo.
Esse endereço único de um
documento pode ser utilizado pelo usuário para localizar um
arquivo com o navegador. Nesse caso, o usuário deve preencher
com o endereço uma janela do navegador conhecida como Location,
Open ou Address e teclar Enter. A URL será enviada até o
servidor, que tentará localizar o arquivo e enviá-lo para o usuário.
Caso o arquivo não esteja disponível no servidor, o usuário
receberá uma mensagem de erro.
As URLs também são colocadas
dentro de páginas de WWW para fazer referência a outras informações
disponíveis na Internet. Nesse caso, determinados itens (trechos
de texto ou imagens) da página, conhecidos como links, podem ser
utilizados pelos usuários para saltar de um lugar a outro na
rede. Os links podem conter ligação com qualquer tipo de
arquivo. Essa ligação entre os documentos é o que se chama de
hipertexto.
MONTANDO UMA PÁGINA WEB
SIMPLES
Apesar dessa aparente sofisticação,
as páginas Web não passam de documentos de texto simples. Podem
ser produzidas com qualquer editor de texto, como o Notepad do
Windows. A diferença é que as páginas Web contêm algumas
marcas especiais para determinar o papel de cada elemento dentro
do texto. Alguns elementos são marcados como títulos, outros
como parágrafos. As marcações são usadas também para indicar
os links que levam a outros documentos na rede. Essas marcas são
chamadas de tags e estão especificadas dentro da linguagem
utilizada para criar as páginas Web, HTML.
O mínimo que você precisa
saber sobre HTML...
O primeiro conceito que deve-se
ter em mente ao projetar páginas Web é que HTML não foi criada
para controlar a aparência dos documentos, ao contrário dos
processadores de texto e programas de layout de página. Como
dissemos há pouco, os tags de HTML apenas informam ao navegador
o que são os elementos que estão na página. Eles dizem, por
exemplo, que um determinado trecho é o título principal do
documento e outro é um item de lista. A formatação do trecho
é deixada para o navegador. Cada navegador mostra a página de
uma forma um pouco diferente, o que dificulta o trabalho de
programação visual na Web. Para complicar ainda mais, cada usuário
pode modificar a configuração padrão de seu navegador para que
o seu programa mostre o texto na fonte (tipo de caractere) que
quiser.
Em compensação é muito
simples criar uma página básica para colocar na Internet com
HTML. Neste capítulo, apresentamos um exemplo enxuto, que aos
poucos ficará mais sofisticado.
Software necessário para esta
seção
Como a página Web é um
documento de texto comum, pode-se utilizar um editor de texto
simples, como o Notepad do Windows. Existem editores de HTML que
podem facilitar a confecção das páginas.
é importante notar que os
exemplos descritos aqui devem ser gravados no formato texto e com
a extensão .htm ou .html. Portanto, se for utilizado um
processador de texto, como o Word, WordPerfect ou WordStar, o
arquivo deve ser salvo no formato somente texto. O
navegador de Web não vai entender um arquivo gravado nos
formatos específicos dos processadores de texto (.doc, por
exemplo).
Será necessário também um
programa de desenho para criar as imagens, como o Paintbrush do
Windows ou um mais sofisticado, como o Photoshop. Também é
preciso cuidado na hora de gravar as imagens. O formato mais
aceito pelos navegadores é o GIF. O Paintbrush do Windows grava
arquivos apenas nos formatos BMP ou PCX. Será necessário um
outro programa para fazer a conversão, como o Lview. Veja a
lista dos programas recomendados para edição em HTML no capítulo
Programas. Além disso, será necessário um navegador de Web
para visualizar as páginas.
Acentuação...
Não é recomendável que os
documentos Web contenham acentos. Ainda que todos os navegadores
existentes entendam a presença de um caractere acentuado,
existem ocasiões em que o texto em HTML pode ficar truncado. Por
exemplo, quando alguém copia uma página Web e a envia para
outra pessoa através de correio eletrônico. Para contornar este
problema, existe uma tabela de códigos que substituem os acentos.
Os navegadores transformam estes códigos em caracteres
acentuados e o documento poderá ser transmitido por qualquer
meio. Sugestão: o documento pode ser escrito com os acentos e,
antes de ir para o servidor de Web, ser submetido a uma macro de
processador de texto para substituí-los pelos códigos HTML. O
Apêndice A mostra a tabela de acentos ISO 8859 Latin-1. Para
facilitar a leitura, os exemplos deste texto contêm os acentos
normais de um editor de texto ao invés dos códigos.
Tags básicos
Existem quatro pares de tags
que devem ser sempre colocados na página. O par de tags e deve
englobar todo o conteúdo da página (estar presente no início e
no fim do texto) para indicar ao navegador que se trata de um
documento HTML. O documento, por sua vez, está dividido em duas
partes: o cabeçalho e o corpo do texto, cada um indicado por um
par de tags diferente. Tudo que estiver entre o par e irá compor
o cabeçalho, não aparecendo na página. O elemento principal do
cabeçalho é o título do documento, que deve ser colocado entre
o par . Os navegadores mostram o título na barra de título do
programa e na área em aparecem as páginas já visitadas. Por
fim, existe o par e , que serve para indicar o corpo do texto, ou
seja, a parte mostrada na janela do navegador.
Títulos
No corpo do texto podem ser
colocados até seis níveis de títulos. A hierarquia começa em
<.H1.>, como o maior título, e termina em <.H6.>,
como o menor. Os títulos <.H5.> e <.H6.> aparecem tão
pequenos no navegador que provavelmente nunca serão usados.
Parágrafos
Os parágrafos são digitados
normalmente. O tag <.P.> serve para indicar o início de um
novo parágrafo. Se o tag <.P.> for colocado antes de um título
(<.H2.>, por exemplo), a marca de parágrafo é ignorada.
Nesse caso, o próprio título se encarrega de colocar o espaço
necessário.
Linhas
Assim como as marcas de parágrafo,
as quebras de linha são indicadas por um tag simples. Para abrir
uma nova linha, usa-se o tag <.BR.>.
Listas
O início de uma lista pode ser
indicado com <.UL.> e o final com <./UL.>. Esse tag
descreve listas não-ordenadas (unordered lists, em inglês) e
simplesmente coloca um elemento gráfico (um círculo, um
quadrado etc.) no começo de cada item da lista. Existem outros
tipos de listas. A relação completa pode ser encontrada no Apêndice
B. O início de cada item é indicado com o tag <.LI.>.
Margem
Outro controle sobre o
alinhamento dos elementos da página pode ser conseguido através
da mudança de margem. O texto sempre começa a uma determinada
distância da janela do navegador (um pouco diferente em cada
navegador). às vezes, será necessário aumentar essa margem e
fazer com que o texto comece mais para dentro da página. O par
de tags <.BLOCKQUOTE.> e <./BLOCKQUOTE.> serve para
aumentar a margem. O efeito desse tag pode ser acumulado para
conseguir margens maiores. Veja os exemplos:
Texto pré-formatado
Existe ainda uma terceira forma
de modificar o alinhamento. é a utilização do par de tags <.PRE.>
e <./PRE.>. Usando esses tags, todos os espaços e entradas
de parágrafo (o resultado da tecla enter) são respeitados. Em
um texto normal, qualquer espaço a mais entre duas palavras é
ignorado pelo navegador. Com a pré-formatação, pode-se
controlar o espaçamento com a barra de espaço e colocar o texto
em praticamente qualquer lugar da página.
Apesar da vantagem dessa forma
de alinhamento arbitrário, o tag <.PRE.> muda o tipo de
caractere para uma fonte monoespaçada. Uma fonte monoespaçada
é aquela na qual todos os caracteres ocupam o mesmo espaço
horizontal, ao contrário da fonte proporcional, na qual o i
ocupa menos espaço do que o a, por exemplo.
Borda
É possível colocar uma borda
em volta da imagem. O atributo é BORDER. O valor da borda é
expresso em pixels.
Alinhamento da imagem
No exemplo anterior, a imagem
ficou alinhada à esquerda da tela e o texto imediatamente
posterior a ela alinhou-se com o canto inferior direito da imagem.
Esse é o alinhamento padrão de textos com imagens. é possível
mudar o alinhamento utilizando o atributo ALIGN= dentro do tag
<.IMG.>.
Cores dos hyperlinks
Da mesma forma que é possível
definir cores diferentes para o fundo e o texto, pode-se mudar a
cor dos links. As cores das âncoras de hipertexto variam de
acordo com a sua condição: visitados, nunca visitados e ativos.
Os navegadores sabem quais foram os hyperlinks já visitados pelo
usuário em um determinado período de tempo. Por isso, a cor dos
links já visitados deve ser diferente da cor das referências
nunca visitadas. Além disso, o link pisca em uma cor ainda
diferente dessas duas logo depois que é clicado pelo usuário. A
cor dos links é definida no tag <.BODY.>.
<.BODY LINK=RED ALINK=BLUE
VLINK=GREEN.>
Texto alternativo
De nada vai adiantar caprichar
na produção de uma imagem, se a pessoa que está vendo as páginas
utiliza um navegador incapaz de mostrar imagens (sim, eles
existem e são bastante utilizados, principalmente o lynx).
Outros usuários também
ajustam o navegador para não carregar imediatamente as imagens.
Por causa de conexões lentas, algumas pessoas preferem receber o
texto e depois pedir as imagens. Mas para isso elas precisam
saber do que se tratam as imagens. Essa é a função do texto
alternativo. Pode-se colocar o título ou a melhor descrição
possível de uma imagem utilizando o atributo alt:
<.IMG SRC=imagem.gif ALT=nome_da_imagem.>
Margens
Pode-se controlar o espaço em
volta da imagem colocando o valor em pixels da margem desejada.
é possível definir as margens separadamente ou em conjunto.
Para mais espaço em cima e embaixo da imagem, o atributo é
VSPACE. Se o problema for espaço dos lados da imagem, usa-se o
atributo HSPACE para definir as margens horizontais.
<.IMG SRC=imagem.gif
VSPACE=10 HSPACE=20.>
Cada um desses atributos (HSPACE
e VSPACE) adiciona espaço nas duas faces da imagem (em cima e em
baixo e à direita e à esquerda). Não há como definir uma
margem maior apenas à esquerda ou somente na parte inferior.
Formatos e interlaceamento
Os formatos de imagem mais
aceitos pelos navegadores são GIF e JPG. A vantagem do formato
GIF é que se pode gravar na opção GIF89 para conseguir que a
imagem seja carregada progressivamente, um efeito conhecido como
interlaceamento. Com o carregamento progressivo, o usuário tem a
impressão da imagem estar sendo carregada mais rápido.
O formato JPG oferece um fator
de compressão maior do que o GIF. As imagens ocupam menos espaço
em bytes. Mas o processo de compressão do JPG pode causar alguma
perda de qualidade à imagem. Como regra geral, o formato JPG
deve ser usado em imagens fotográficas e o GIF em imagens
criadas em computador ou desenhadas. A compressão do formato GIF
se dá ainda melhor com imagens com poucas cores e trechos contínuos
de uma cor só.
Dimensões
Se as dimensões da imagem
forem colocadas na referência, o usuário terá a impressão de
que a página foi carregada mais rápido.
Fornecendo as dimensões, o
navegador reserva o espaço para a imagem e vai carregando o
texto para que o usuário possa começar a ler. Depois de
carregado o texto, as imagens começam a ser mostradas. Deve-se
escrever a referência de imagem neste formato:
<.IMG SRC=imagem.gif
width=310 height=220.>
BGSOUND
Carrega um arquivo de áudio
como trilha sonora da página.
Exemplo:
Aceito por: Internet Explorer
Atributos
SRC=som.wav: define o nome do arquivo de áudio
a ser carregado Sendo que som.wav é o nome do arquivo a ser carregado. Aceita
os formatos .WAV, .AU e .MID.