Aprendendo HTML

por Cleuton Sampaio

HTML significa Hypertext Markup Language e é a linguagem de descrição de documentos usada na World Wide Web. Ela é orientada por marcadores ou TAGs. Cada TAG informa ao programa visualizador, ou Browser, como ele deverá formatar o texto. Os TAGs podem ser únicos ou duplos, com início e fim. Exemplos:


Veja agora um resumo do que fazer em uma Home Page:

Para:

Para maiores informações, leia o livro Home Page sem Traumas, de minha autoria, editado pela BRASPORT, ou consulte-me via e-mail.

Para Iniciar um documento

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Temos duas seções básicas:

HEAD
Contém parâmetros de configuração do documento.
BODY
Contém o documento em si.

A estrutura de um documento HTML é:

<HTML>
<HEAD>
<TITLE>Título da Home Page</TITLE>
</HEAD>
<BODY BACKGROUND="imagem">
*** Conteúdo da Home Page ***
</BODY>
</HTML>

Tags usados no início do documento:

<HTML>...</HTML>
Envolvem todas as seções de um documento (HEAD e BODY).
<HEAD>...</HEAD>
Envolvem a seção de cabeçalho do documento.
<TITLE>...</TITLE>
Indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da sua Janela no Windows.
<BODY>...</BODY>
Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND.

Inicie seu documento com um esqueleto padronizado, como o que eu mostrei no início deste capítulo. Se você é um feliz usuário do Cleuton's Web Wizard, basta iniciar um novo documento com a opção GABARITO.


Voltar ao início.

Títulos e subtítulos

Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), juntamente com as opções CENTER ou BLINK.

Veja alguns exemplos:

Texto inserido entre <H1> e </H1>:

H1

Texto inserido entre <H2> e </H2>:

H2

Texto inserido entre <H3> e </H3>:

H3

Texto inserido entre <H3><CENTER> e </CENTER></H3> :

H3

Texto inserido entre <H3><BLINK> e </BLINK></H3> :

H3


Voltar ao início.

Parágrafos e frases

Os parágrafos de texto devem estar inseridos entre os TAGs: <P> e </P>. Para dar destaque a algumas frases e palavras, existem os TAGs:

<B>... </B>
Coloca em negrito o texto envolvido.
<I>... </I>
Coloca em itálico o texto envilvido.
<PRE>... </PRE>
Coloca em fonte sem espacejamento proporcional.


Voltar ao início.

Listas e glossários

Podemos criar vários tipos de listas. Temos Listas Ordenadas, onde cada elemento recebe uma numeração em seqüência; Listas Não Ordenadas, onde cada elemento recebe apenas um marcador; e Listas de Definição, ou Glossários, onde aparece um Termo e sua Definição:

Lista Ordenada:


  1. Acordar.
  2. Escovar os dentes.
  3. Tomar café.

Lista não ordenada:



Use:
<UL> (ou <OL>)
<LI>Texto do item</LI>
<LI>Outro item</LI>
</UL> (ou </OL>)

Glossário:

BITMAP
Imagem codificada na forma de mapa de bits, com correspondência para cada pixel da tela.
VETORIAL
Instruções para desenhar a imagem, usando elementos da GDI do Windows.
Use:
<DL>
<DT>Termo</DT>
<DD>Definição do termo.</DD>
</DL>

Voltar ao início.

Imagens

Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de cuidado, para não onerar a transmissão para o usuário.

Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels.

Para inserir uma imagem, uso o TAG: <IMG>, que é único, não exigindo um TAG finalizador. Exemplo:

<IMG SRC="figura1.gif">

Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML.


Voltar ao início.

Links

Os Links servem para criar Palavras Quentes, que permitem a interligação entre documentos HTML e outros documentos ou até arquivos FTP.

Veja o seguinte exemplo:

<ul>
<li><a href=#inicio>Para o próprio documento</a></li>
<li><a href="ivl.htm#inicio">Para outro documento</a></li>
<li><a href="http://www.ibase.org.br/~cleuton/index.html">Para minha Home Page</a></li>
<li><a href="filme1.jpg">Âncora para imagem externa</a></li>
</ul>

Use:

<A HREF=destino>Texto ou imagem</A>
<A NAME=nome>...</A>

O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#". Por exemplo: 

<A NAME="AQUI">Aqui é um ponto para desvios</A>
...
<A HREF="#AQUI">Desvia para o ponto "AQUI"</A>


Voltar ao início.

Formulários

Formulários são uma maneira de obtermos dados dos usuários de nossas Home Pages. Os dados são recebidos por um programa CGI, residente no servidor, que os armazena para podermos consultá-los. O CGI que eu uso recebe os dados digitados e os devolve por e-mail, na forma: VARIÁVEL = VALOR DIGITADO. Consulte o Web Master da sua instalação sobre os CGI's disponíveis.

Um formulário é formado pelos TAGS <FORM> e </FORM>, e pode conter vários tipos de campos. Podemos ter os seguintes elementos:

Veja o seguinte exemplo: (este formulário é fictício, não tecle "Enviar")

Informe seu nome:

Informe seu sexo: Masculino

Veja como foi criado este formulário:

<FORM ACTION="/cgi-bin/submitform.pl?usuario=login&pagina=pagina.html" METHOD="POST">
<P>Informe seu nome: <INPUT NAME="NOMEUSUARIO" TYPE="text" SIZE="30"></P>
<P>Informe seu sexo: <INPUT TYPE="radio" NAME="SEXO" VALUE="MASC">Masculino
<INPUT TYPE="radio" NAME="SEXO" VALUE="FEM>Feminino</P>
<P>Sua opinião sobre este trabalho: <TEXTAREA NAME="OPINIAO" ROWS="3" COLS="30"></TEXTAREA></P>
<INPUT TYPE="submit" VALUE="Enviar">
<INPUT TYPE="reset" VALUE="Cancelar">
</FORM>

O INPUT cria um campo para digitação. O parâmetro TYPE define qual o tipo:

TEXT
Campo para pegar texto. O Size define a largura do campo.
RADIO
Campo de botão de rádio, ou de escolha. Quando um é marcado, os que possuem o mesmo NAME são desmarcados.

O TEXTAREA serve para abrir uma área de digitação de textos, com múltiplas linhas e colunas.

Os tipos SUBMIT e RESET, servem para, respectivamente, Enviar ou Cancelar.


Voltar ao início.

Imagens Clicáveis

Graças ao Roberto Stelling descobri como gerar mapas de imagens clicáveis e colocá-los no ar sem ter que incomodar o Webmaster.

Faça o seguinte:

  1. Obtenha o programa MAPEDIT.
  2. Crie um arquivo de imagem (GIF) e abra-o com o MAPEDIT
  3. Indique, usando as opções de SQUARE, CIRCLE ou POLYGON, as áreas sensíveis da imagem.
  4. Para cada área marcada, indique a Home Page a ser acessada.
  5. Envie o arquivo MAP gerado (*.map) e a sua imagem GIF para o Servidor.
  6. Em sua Home Page, coloque os TAGS:
    • <A HREF="http://www.ibase.org.br/~seulogin/nomedomapa.map">
    • <IMG SRC="http://www.ibase.org.br/~seulogin/nomedaimagem.gif" ismap border=0></A>

    7. Se desejar borda, retire o parâmetro BORDER=0, ou aumente o valor dela.


    Voltar ao início.