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:
Para saber mais sobre HTML, leia o meu livro: HOME PAGE SEM TRAUMAS, Editora BRASPORT, ou obtenha o programa Cleuton's Web Wizard, em minha Home Page:
Para maiores informações, leia o livro Home Page sem Traumas, de minha autoria, editado pela BRASPORT, ou consulte-me via e-mail.
Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Temos duas seções básicas:
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>
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.
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>:
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:
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:
Use: <UL> (ou <OL>) <LI>Texto do item</LI> <LI>Outro item</LI> </UL> (ou </OL>)
Use: <DL> <DT>Termo</DT> <DD>Definição do termo.</DD> </DL>
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.
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>
<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>
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:
<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:
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.
Graças ao Roberto Stelling descobri como gerar mapas de imagens clicáveis e colocá-los no ar sem ter que incomodar o Webmaster.
Se desejar borda, retire o parâmetro BORDER=0, ou aumente o valor dela.