HTML

Bem... fazer uma home-page não é um bicho de 7 cabeças, mas exige que a pessoa se dedique-se ao máximo a ela.
Para fazer uma home-page você precisará de um editor de html, de preferencia eu indico o FRONTPAGE 2000 da MIcrosoft, eu acho que é o melhor e mais fácil.
Para fazer a home page você irá usar o editor de html, porém existe alguns comandos que certos editores não realizam, para essas ocasiões você devera usar o bloco de notas ou o wordpad (veja mais abaixo).
Para fazer uma Home-Page você terá que aprender pelo menos um pouco de HTML, (Hipertext Mark-up Language) que pode ser traduzido como linguagem de hipertexto baseada em marcas. A Princípio o nome assusta, mas HTML é bastante fácil.
Apesar da palavra liguagem, que leva a associação com linguagens de programação, ao final deste tutorial você vai perceber que gerar documentos HTML é bastante parecido com o trabalho que você faz quando formata textos no seu processador preferido.
Para que qualquer computador pudesse entender os documentos HTML, sem as complicações que trazem os caracteres de controle e coisas do tipo foi definido que estes documentos deveriam ser gerados em no formato mais simples possível e depois, o bom e velho "txt". Desta forma, documentos HTML podem ser gerados pelo bloco de notas ou pelo wordpad, desde que gravados no em .HTML ou .HTM

Os TAGS ou elementos, são marcas padrões utilizadas para fazer todas as indicações necessárias ao seu Browser (navegador). Estas marcas são digitadas dentro do documento da mesma forma que o conteúdo a ser exibido.
Por exemplo:

<CENTER> conteúdo </CENTER><P>
indica que a palavra conteúdo deve ser apresentada centralizada na linha, e o elemento<P>indica início de novo parágrafo.

Por definição, os elementos são delimitados pelos sinais "<" e ">", sendo indicada a utilização de letras maiúsculas apenas para facilitar a visualização, já que o uso de maiúsculas e minúsculas é igualmente aceito pelos Browsers. Os elementos em sua maioria, são do tipo início-fim, ou seja, trabalham em pares, delimitando um determinado conteúdo. Nesse caso, a marca de fim é idêntica à marca de início, porém sendo sempre precedida de uma barra ( / ). É o caso das marcas :

Outros elementos, são solitários, ou seja, não precisam de complemento. Basta um único elemento para fazer a indicação necessária. É o caso da marca <P>.

Você pode editar o código de sua Home-Page nos mais diversos editores. Existem os editores WYSIWYG (what you see is what you get, ou : o que você vê é o que você obtem). Você digita seu texto, marca as áreas com o mouse, seleciona as opções de menu e o texto à sua frente se transforma imediatamente, com as letras assumindo novos tamanhos, cores, tipos etc. Com este tipo de editor você sequer vê os elementos de HTML (mas insisto em citar que não se vai muito longe sem saber os
fundamentos básicos de HTML, que irão ajudar em atualizações, java script etc.). Um exemplo de editor WYSIWYG é o Netscape Editor disponível no Netscape Navigator Gold, o Adobe PageMil, e o mais recomendado Microsoft Front Page (eu uso ele ).

Existem ainda os editores do tipo NÃO WYSIWYG, que ajudam você a inserir os elementos através de menus. A Vantagem é que não é necessário saber de cor toda linguagem HTML, além do que se for necessário incluir algum elemento ainda não incorporado ao editor, você poderá faze-lo através do teclado. Utilizando-se este tipo de editor, tanto o conteúdo propriamente dito como os elementos HTML estarão visíveis na forma de texto uniforme, da mesma forma que estarão se utilizar um editor de textos qualquer. Será necessário então utilizar um Browser para visualizar os documentos criados. Um exemplo deste tipo de editor é o famoso Hot-Dog. Porém pode ainda ser utilizados o Xtree, o Edit do DOS, o Bloco de Notas do Windows, e praticamente qualquer editor de textos, pois como você já sabe, documentos HTML são na verdade tipo TXT gravados com extensão .HTML ou .HTM
Independente do editor escolhido, uma forma interessante de se trabalhar é copiar o conteúdo a ser apresentado para dentro do editor e incluir as TAGS gradativamente, visualizando os resultados obtidos através de um Browser.

A estrutura básica de um documento HTML é a seguinte:

<HTML>
<HEAD>
<TITLE> Título do documento </TITLE>
</HEAD>
<BODY...>
...
</BODY>
</HTML>

Vamos ver a função básica desses elementos:

<HTML>...</HTML> : Indicam respectivamente o início e o fim do documento, todo o resto deve estar entre essas duas marcas.

<HEAD> </HEAD> : Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento.

<TITLE> </TITLE> : Indicam o título do documento, que será apresentado na barra superior do Browser. Estas marcas devem constar da seção de cabeçalho.

<BODY>...</BODY> : Indica o corpo do documento. Entre essas marcas estará contda a maior parte do conteúdo a ser apresentado, textos, imagens, etc.

Esta estrutura inicial é bem simples. No entanto vamos aproveitá-la para chamar a atenção para alguns detalhes importantes.

1) Todas as marcas apresentadas são do tipo início-fim, ou seja funcionam em pares, uma para abrir e outra para fechar o comando.

2) Em cada dcumento HTML, só deve haver uma marca de cada tipo das que foram apresentadas.

3) Existe uma marca seqüencia lógica entre as marcas,óbviamente você não irá colocar o corpo ( <BODY>) na frente do cabeçalho ( <HEAD> ).

Esses detalhes devem ser observados, pois desrespeitá-los pode fazer com que o browser não consiga apresentar o documento, ou que o documento sejá apresentado com falhas. Assim tome cuidado, pois o fato de um determinado Browser aceitar uma "falha" não significa que os outros browser tenham o mesmo comportamento.

Como o HTML não é uma linguagem de programação, você nunca será avisado de erros cometidos na edição do seu documento. O Simples esquecimento de uma barra pode gerar efeitos colaterais inesperados na visualização de uma página, e estes efietos colaterais serão o único sinal de que algo está errado.

TÍTULOS E SUB-TÍTULOS
O destaque para títulos na sua página é importante pois dá ao visitante uma ideia geral sobre o que o que trata o texto em questão, e portanto a chance de escolher ler ou não. Podemos utilizar até seis níveis de títulos, ou "headings", que são numerados de 1 ( o maior ) até 6 ( o menor ) São elementos do tipo início-fim.

<H1></H1>
<H2></H2>
<H3></H3>

FORMATAÇÃO DE TEXTOS
Como você percebeu no exmplo acima até a quebra de linha (ou parágrafo) deverá ser indicada marcas específicas, pois aquele ENTER tradicional que você tecla em seus documentos não são entendidos por essa linguagem. Note ainda que há mais de um tipo de marca com a mesma função como:

<B></B> ou <STRONG></STRONG> - que indica que o texto deverá ser apresentado em negrito.

<I></I> ou <EM></EM> ou <EMPHASIS></EMPHASIS> - que indica que o texto deve ser apresentado em itálico.

LINHAS HORIZONTAIS
Linhas horizontais são utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre um ítem de informação e outro. Trata-se também de uma marca solitária que pode ser utilizada com alguns atributos opcionais:

ou sem qualquer atributo:

<HR>

No exemplo, o atributo SIZE indica que deve ser apresentada uma linha com 8 pixels de espessura enquanto o atributo WIDTH indica que a linha deve ocupar 80% da largura da janela do Browser.

IMAGENS
Associadas a documentos de HTML, são utilizadas imagens do tipo JPG ou GIF. Para que a imagem seja apresentada em um documento HTML é necessário somente fazer uma referência ao nome do arquivo da imagem através do elemento:

Caso a imagem esteja em um diretório diferente do documento HTML, o nome do diretório deve ser incluído na referência.

LINKS DE HIPERTEXTO
O elemento de link fazx exatamente o que todos os outros fazem. A Diferença é que ele contém um endereço para uma outra página. O tipo mais simples é quando a página apontada está armazenada no mesmo diretório que a corrente

<A HREF="index.html"> Link para a página inicial </A>

O Browser geralmente apresenta os links em azul e sublinhados quando o leitor clicar neste texto ele carregará a página que no caso do nosso exemplo será a index.html . Se a página a ser carregada se encontrar em outro diretório, você deverá incluir o nome do diretório na referência.

Com a mesma facilidade que você constrói um link para uma página na sua própria máquina, você pode fazer também o mesmo para uma página em qualquer lugar do mundo bastando para isso colocar no local do nome da página inserir o endereço onde ela se encontra.

<A HREF="O endereço da sua home-page"> O titulo dela... </A>

Elementos de formatação de tabelas fazem parte da especificação do HTML 3.0, e representam uma interessante ferramenta na

construção de documentos WEB. São suportadas por diversos browsers, como o Netscape 1.1 ou superior, e largamente utilizadas através da WEB. Nas células de uma tabela podemos inserir tudo o que normalmente faz parte do corpo de um documento HTML - Textos, links, imagens ou mesmo outras tabelas.

Elementos básicos

<TABLE> ... </TABLE>
São as marcas que englobam a definição de uma tabela. Todas as demais marcas referentes a tabelas - título, linhas e células - somente serão consideradas se incluídas entre

<CAPTION> ... </CAPTION>
Trata-se de um elemento opcionla que define o título da tabela, e deve constar entre as marcas que a definem, mas fora das marcas que definem linhas e colunas. Como padrão, o título é apresentado acima da tabela centralizado.

<TR> ... </TR>
Este é o elemento utilizado para definição de linhas. Tabelas são definidas em linhas, sendo as linhas compostas de células. O Número de linhas de uma tabela corresponde ao número de
<TD> ... </TD>
Delimitam as células que compõem as linhas, e assim sendo, devem estar inseridas entre marcas de linhas. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML - links, imagens, etc.
Por Default, o alinhamento de uma célula é à esquerda, horizontalmente, e centralizado verticalmente; e caso o número de células varie de uma linha para outra, as linhas com menos células são completadas à direita com células em branco.

<TH> ... </TH>
Elemento que define células de cabeçalho. Célula de cabeçalho têm características idênticas a células de dados definidas por a não ser pelo alinhamento default horizontal, que é centralizado, e pela utilização de fonte em negrito.

Com os elementos básicos descritos acima você já pode construir uma tabela e visualizá-la no seu Browser. Estes elementos básicos, entretanto, possuem alguns atributos que permitem um maior controle sobre alguns detalhes da apresentação da tabela. Esses atributos são inseridos dentro do comando

. Todos são opcionais, mas você certamente vai querer fazer uso de alguns deles.

<TABLE BORDER=...>
Tabelas são apresentadas, como padrão sem bordas. A Presença do atributo BORDER indica justamente que deve ser desenhada uma borda fazendo contorno de cada célula da tabela. BORDER=... A especificação da espessura da borda deve ser em Pixels.
Ex.: <TABLE BORDER="3">

<TABLE WIDTH=...>
Especifica a largura da tabela, que pode ser definida em pixels ou em porcetagem referente a largura da janela. Caso não seja especificado, o próprio browser se encarrega de determinar a largura mais adequada.
Ex.: <TABLE BORDER="3" WIDTH="75%">

<TABLE CELLPADDING=...>
Determina em pixels, o espaço a ser deixado entre o conteúdo e as bordas da célula.
Ex.: <TABLE BORDER="3" WIDTH="75%" CELLSPACING="4" CELLPADDING="4">

<CAPTION ALIGN=...>
Este atributo permite indicar se o título deve ser apresentado em baixo da tabela (ALIGN=bottom) ou em cima (ALIGN=top). Neste último caso o atributo é dispensável, poiso como já foi dito antes, o valor pré-determinado é que o título seja apresentado na posição superior.

<TR ALIGN=...>
Indica se o conteúdo das células de uma linha deve estar alinhado à esquerda (ALIGN=left), à direita (ALIGN=right) , ou centralizado (ALIGN=center). Por default, o alinhamento horizontal é a esquerda para células de dados, e centralizado para células de cabeçalho.

<TR VALIGN=...>
Indica alinhamento vertical dentro das células de uma linha. Pode ser superior (VALIGN=top), inferior (VALIGN=bottom) ou centralizado (VALIGN=middle). Por default, o alinhamento vertical das células é centralizado.

<TR ALIGN=... VALIGN=...>
Dentro de uma célula, estea atributos assumem os mesmos valores e possuem as mesmas funções que quando aplicados à uma linha inteira, sendo que o alinhamento definido aplica-se somente à própria célula . Caso seja definido um alinhamento para a linha e outro para a célula, este último sobrepõe o primeiro.

<TD NOWRAP>
Quando este atributo encontra-se associado a uma célula, o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Significa que toda a coluna terá o mesmo tamanho que o texto nela contido. deve ser usado com cuidado para evitar colunas grandes demais que comprometam o Lay Out de sua página.

<TD COLSPAN=...>
Especifica o número de colunas de uma tabela a serem ocupadas por uma célula. Utilizado portanto para expandir um célula horizontalmente, tendo como default o valor 1 em todas as células. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos que as demais, já que uma de suas células 'vale' por duas.

<TD ROWSPAN=...>
Especifica o número de linhas a serem ocupadas por uma célula. Utilizado para expandir uma célula verticalmente, também assume o valor default de 1 em todas as células. A expansão occore para baixo. Assim ao atribuir ROWSPAN=2 para uma das células, diminui em 1 o número de células da linha abaixo.

Aprenderemos aqui algumas extensões reconhecidas pelo Browser da Netscape à partir da versão 1.1 correspondente ao ao código HTML abaixo:

Para escolher as cores foram usados os seguintes elementos:
BGCOLOR= Define a cor de fundo.
TEXT= Define a cor do Texto.
LINK= Define a cor de um link ainda não visitado.
VLINK= Define a cor de um oinik já visitado.
ALINK= Define a cor que um link terá ao ser clicado.

Todos esses atributos tem seus valores pré-definidos e são usados opcionalmente por você. Se forem utilizados estes atributos, devem ter como valor um número de 6 digitos reprsentados na base hexadecimal precedido do caracter #. Estes dígitos correspondem a uma cor definida no padrão RGB, composto por 3 cores básicas (Red, Green, Blue). Neste caso cada componente do padrão RGB possui associado a si 2 dígitos. Os dois primeiros dígitos correspondem à cor vermelha (Red), os dois dígitos do meio correspondem à cor Verde (Green), e os dois dígitos finais correspondem à cor Azul (Blue). Apesar de esse ser o padrão, os browser mais novos aceitam ter seu código RGB substiuído pelo nome da cor em inglês, como por exemplo: ao invés de LINK="#0000ff" já é possível usar LINK="blue" mas isso pode causar problemas aos visitantes que usem browsers mais antigos então é aconselhável manter o código RGB que é aceito por todos browsers.

Existe ainda outro atributo dentro do elemento BODY que permite escolher a cor de fundo de sua página. basta usar BGCOLOR="#0000ff" sendo que #0000ff também é no padrão RGB assim como a cor dos links. Se você quiserusar uma imagem como fundo, basta usar BACKGROUND="imagem.jpg" sendo que imagem.jpg pode ser qualquer imagem em formato JPG ou GIF. Você perguntará: "Então assim não seria necessário o comando BGCOLOR já que o fundo seria uma imagem ???" Respota: Não sera obrigatório mas é bom que você use mesmo assim o BGCOLOR mesmo junto com o BACKGROUND pois caso a opção de imagens do visitante esteja desabilitada você evitará a cor Cinza de fundo.

Agora veremos algumas extensões aceitas pelo Microsoft Internet Explorer a partir da versão 3.0. A Primeira é o elemento <Marquee> .Com ele você pode colocar uma faixa decorativa com um texto animado em sua página, com um código semelhante ao apresentado baixo:

Você deve ter percebido o uso de vários atributos dentro do elemento MARQUEE no código apresentado acima, veremos abaixo o que significa cada um destes elementos:
ALIGN: Usado para alinhar a faixa, pode assumir os valores: Left, Right, ou Middle.
BEHAVIOR: Define a animação do texto. Pode assumir os valores SCROLL, que faz o texto passar por toda extensão da faixa em um movimento horizontal até sumir; SLIDE que indidca que o texto deve passar por toda a faixa mas parar ao atngir um dos cantos; ALTERNATE que faz com que o texto se alterne entre os laos da faixa.
BGCOLOR: Indica a cor da faixa, Assume os valores equivalentes ao do atributo BGCOLOR do elemento BODY.
DIRECTION: Indica a direção para qual o texto deve encaminhar. Pode assumir os valores LEFT ou RIGHT.
HEIGHT: Define a altura da faixa.
WIDTH: Define a largura da faixa.
HSPACE: Define a distancia na horizontal (distancia em relação à margem) onde a faixa deve ser posicionada.
VSPACE: Define a distancia na vertical (distancia em relação à margem) onde a faixa deve ser posicionada.
LOOP: Define o némero de vezes que a animação será repetida. Pode ser atribuída com o valor INFINITE para que o texto seja animado infinitamente.
SCROLLAMOUNT: Regula a quantidade de informação movimentada de cada vez (o número de pixels que serão movidos entre um desenho e outro). Os valores entre 2 e 5 apresentam bons resultados.
SCROLLDELAY: Define o intervalo entre cada movimento do texto, medido em milésimos de segundos, um valor aconselhável seria em torno de 20.

Vale lembrar que o elemento MARQUEE só é apresentado no Internet Explorer, sendo que no Netscape Navigator a mensagem é exibida como um título.

Uma outra extensão é o elemento BGSOUND, que permite ao browser executar músicas em formato WAV, AU ou MID (MIDs são mais aconselháveis por serem arquivos menores e carregarem mais rapidamente) Os atributos usados são:
SRC: Define o caminho para o arquivo de som
LOOP: Define o número de vezes que o arquivo será lido, pode ser atribuído o valor INFINITE para que o arquivo seja lido um número infinito de vezes.

Imagens sensíveis é como são chamadas aquelas que funcionam como um link diferente em cada lugar que você clica. Essas imagens podem ser usadas na criação barras de navegação, você pode por exemplo criar uma grande imagem com fotos de várias pessoas dentro dessa mesma imagem e cada lugar dessa imagem servir de link para páginas pessoais de cada uma desas pessoas.

Existem dois métodos para tornar sua imagem sensível ao clique do mouse em cada região da figura - Existem os Mapas Locais de Imagens e os Mapas Remotos de Imagens - Você pode escolher entre um e outro após analisarmos suas características principais:

A diferença principal entre os dois é clara e é exatamente o que irá fazer você optar entre uma ou outra, O Mapa Remoto é uma conbinação de CGI HTML e um "arquivo de mapa" que nada mais é que um arquivo que informa as regiões da imagem que você clicou e informa ao servidor WEB, e este tratará de veirificar qual link se refere a esta região e mostrará a URL referente em sua tela.
Já no Mapa local de imagem, odas as informações que definem o mapa estão dentro do próprio código HTML, da página que está sendo mostrada na sua tela, e com isso não há necessidade de recorrer ao servidor para identificar as coordenadas de um clique. Economizamos um acesso ao servidor, e isso dá a você condições de usar mapas de imagem em uma home-page hospedada, na geocities ou terravista além de diminur o tráfego na Rede, e melhorando o tempo para carregar a sua página, então este será o método estudado aqui nesta lição.