.:Creck Web Page
 
       
 

 
 
 
 
.:Conceitos de HTML

INTRODUÇÃO

 

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.