Make your own free website on Tripod.com

Garça Selvagem

Home | HTML | JavaScript | CSS | Serviços

Curso de HTML parte 1

Introdução ao 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
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
Não existem diferenças entre .HTM e .HTML , pois ambos arquivos são considerados arquivos HTML. Essa pequena variação ocorreu porque o Windows herdou uma característica do MS-dos: a extensão do arquivo tem 3 letras, já a origem do .HTML se deve ao Mac OS que tem como padrão a extensão de 4 letras. Aí surgiu estes dois tipos de arquivo, mas todos são a mesma coisa, ok?
Depois de salvo o arquivo você tem que abri-lo em um navegor (Internet Explorer ou Netscape). Para isto basta abrir como se estivesse abrindo um arquivo qualqer. No menu ARQUIVO ou FILE do seu navegador selecione a opçao ABRIR ou OPEN, informe o nome do arquivo. Em alguns navegadores aparecem e uma caixa de texto para digitar o caminho e o nome do arquivo, caso isso for o seu caso, você tem que apertar num botão chamado PROCURAR... ou BROWSER... ou CHOOSE FILE ou algo deste tipo. Depois você verá o resutado do código no seu navegador. Da próxima vez basta apetar no botão ATUALIZAR ou RELOAD para recarregar o mesmo arquivo.

 

 

Elementos básicos
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 :

<CENTER> </CENTER>

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> (paragrafo) e <br> (esta tag apenas faz descer uma linha pra baixo).

 

Mãos à obra!!!
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.

 

Estrutura básica de um documento
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:

<HR SIZE=8 WIDTH=80%>

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:

<IMG SCR="mircnow.gif>

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 da página 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>

O mesmo método é usado para  VC colocar downloads em um site. Basta que VC direcione a tag <a href= > para o arquivo .ZIP que vc deseja disponibilizar para download.

<a href="arquivo_para_download.ZIP"> Baixar arquivo </a>


 

>