FAZENDO HOME PAGE

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 livro 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. O leitor também vai encontrar uma porção de dicas, truques e exemplos, além de um guia com as empresas que alugam espaço na Web.

O que é a Internet

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 oferecem 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 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

Os servidores

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 é  URL

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.

Uma página  simples

O que você precisa saber sobre HTML

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

É 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. Além disso, será necessário um navegador de Web para visualizar as páginas.

Primeiro Exemplo

Assim que o exemplo for salvo no editor de texto com a extensão .htm ou .html, pode-se visualizá-lo em um navegador. Para abrir o arquivo, deve-se escolher Open, Open File ou Open Local File no menu File do navegador. Alguns navegadores tem um botão Open na barra de botões.

Como funcionam os tags

Tags básicos

Títulos

Parágrafos

Linhas

Listas

Melhorando a aparência

Alinhamento

Desta vez, o tag <P> ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar um tag de fechamento (</P>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente.

Margem

Texto pré-formatado

No Netscape, é possível colocar tags de título dentro do par <PRE> e </PRE>, permitindo a manutenção da fonte proporcional (Times New Roman, por exemplo). Na maioria dos navegadores, porém, os tags de título são ignorados e se sobrepõem aos tags de pré-formatação, eliminando o seu efeito.

Estilos de caracteres

Ao contrário de <PRE>, o tag <TT> ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, o tag <TT> funciona exatamente como texto normal. Os tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos.

Tamanhos de fontes

O tag <FONT> também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo.

Também é possível modificar o tamanho de todo o texto de uma vez só colocando o tag <BASEFONT> no topo do texto.

Cores diferentes

O exemplo acima produz uma página com fundo branco e texto na cor preta. Os valores dos atributos são definidos em uma tabela de cores no padrão RGB ou pelo nome da cor. Pode-se definir ainda a cor de determinados trechos de texto, com o atributo color no tag <FONT>.

Dessa forma, é possível ter texto de várias cores na mesma página.

Mudando o tipo de fonte

O Internet Explorer, navegador da Microsoft lançado no segundo semestre de 1995, trouxe a novidade de permitir a mudança do tipo de caractere do texto. O autor de uma página Web pode definir qual será o tipo de determinada parte do texto, mas o usuário precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows.

Hyperlinks

Os pontos que ligam esses hipertextos são chamados de hyperlinks, links ou âncoras de hipertexto. O tag que indica a região a ser tratada como um hyperlink é o par <A> e </A>. Dentro desse tag, na forma de atributo, é colocada a referência ao arquivo ligado. A referência indica a URL do documento. Quando o usuário clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo ligado será requisitado ao servidor e mostrado na janela do navegador.

Neste exemplo, o texto HTML Easy! Pro home page aparece no navegador realçado de alguma forma, normalmente em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mãozinha quando colocado sobre o texto realçado. Ao clicar no link, o arquivo htmleasy.html, do diretório /~milkylin/ do servidor www.seed.net.tw será transmitido pela rede e mostrado na tela.

Colocando uma URL no atributo HREF do tag <A>, pode-se ligar uma página com qualquer outro documento disponível na Internet. Pode-se fazer uma página com uma lista de páginas preferidas da rede com suas devidas ligações de hipertexto.

Neste exemplo, as URLs estão entre aspas. Isso significa que o servidor vai considerar a diferença entre maiúsculas e minúsculas (o que se chama de sensitivo à caixa) na hora de localizar o arquivo. Se no exemplo acima o arquivo HTML_quick.html estiver gravado no servidor como html_quick.html, o documento não será localizado e o usuário receberá uma mensagem de erro. Nem sempre é necessário colocar uma URL completa em uma âncora de hipertexto. É possível indicar apenas o nome do servidor.

Neste exemplo, os servidores da Apple e do The Spot se encarregarão de indicar qual é a página que deve ser carregada. Essa página principal é chamada normalmente de home page.

Quando a âncora apontar para uma página armazenada no mesmo servidor, não é necessário colocar o endereço da máquina. Se o documento estiver no mesmo diretório, basta indicar o nome do arquivo.

O link acima chama o arquivo exemplo1.htm, que deve estar no mesmo diretório da página. Se o documento estiver em um subdiretório de onde está o arquivo que contém a âncora, é preciso indicá-lo.

Digamos que agora seja necessário traçar o caminho de volta, colocando uma âncora no arquivo exemplo1.htm para a página anterior.

A referência cruzada entre arquivos armazenados no mesmo computador mas em diretórios diferentes merece bastante atenção. Digamos que existam dois diretórios colocados no mesmo nível. Um chamado musica e outro, comida. Um arquivo chamado rock.htm, do diretório musica deve fazer uma referência ao arquivo feijoada.htm, do diretório comida. A âncora de hipertexto do documento rock.htm deve ficar assim:

Também pode-se fazer uma referência a uma outra parte do mesmo documento. Isso é particularmente útil quando se está fazendo um índice de um texto. A âncora para um texto no mesmo documento fica assim:

Enquanto o alvo do link fica desta forma:

Neste exemplo, quando o usuário clicar sobre o link <A HREF=#cap1>Capítulo 1</A>, ele será remetido ao ponto onde está a referência <A NAME=cap1>Capítulo 1</A>. A parte do texto que é referenciada (o alvo de um link) não fica realçada como os hyperlinks. Além de ser invisível, não é obrigatório que exista um link apontando para ela.

Pode-se colocar referências do tipo <A NAME> em um documento longo apenas para que outras pessoas produzindo páginas Web possam fazer ligações para determinadas partes do texto. Para citar uma determinada parte de um outro texto, a referência é:

Sendo que exemplo.htm é o nome do arquivo referenciado e capítulo1 é a referência a uma parte daquele texto.

Cores dos hyperlinks

Onde:

LINK determina a cor dos links não visitados
ALINK determina a cor que os links devem piscar quando clicados
VLINK determina a cor dos links já visitados

Neste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, e os visitados em verde. Para não confundir os usuários, a cor dos links já visitados deve ser uma versão mais clara da cor das ligações ainda não visitadas.

Imagens

Neste exemplo, a imagem imagem.gif aparece alinhada entre as frases "Aqui você vê uma imagem:" e "Note que a imagem...". Se a imagem estiver em um diretório diferente do arquivo de texto, é preciso especificá-lo na referência. Recomenda-se que as imagens sejam colocadas em um diretório separado para facilitar a manutenção dos arquivos. Exemplo:

Agora a imagem ficou alinhada à esquerda e com o topo do texto "Note que a imagem...". Para alinhar a imagem à esquerda, mas com o texto no centro, usa-se ALIGN=MIDDLE. O texto utilizado imediatamente depois da imagem nos exemplos anteriores é curto. Se for usado um texto mais longo, apenas uma linha ficará alinhada com a imagem. O restante será jogado para a linha seguinte. Exemplo:

Este problema pode ser contornado utilizando outros atributos de alinhamento que fazem a imagem "flutuar" ao lado do texto. Exemplo:

Neste exemplo, a imagem ficou alinhada à esquerda e permitiu que todo o texto imediatamente posterior ficasse alinhado à direita. Para alinhar a imagem à direita, usa-se o atributo ALIGN=RIGHT. No entanto, quando usa-se os atributos ALIGN=LEFT ou ALIGN=RIGHT, todo o texto imediatamente posterior é puxado para o lado da imagem. Se for necessário interromper o fluxo de texto ao lado da imagem, pode-se usar o tag <BR> com o atributo CLEAR=ALL.

Borda

Texto alternativo

Margens

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

Dimensões