:: Tutorial de E-mails ::

Entendendo um pouco de HTML

Para trabalharmos melhor com os vários scripts que irão aparecer nos e-mails, é importante conhecer um pouco da linguagem HTML.

HTML ( (Hyper Text Markup Language) é uma linguagem de marcação que permite a inserção e visualização de conteúdos das páginas na Internet. Podemos dizer que é um código básico em que muitas páginas são construídas.

Escrever em html significa basicamente escrever textos com tags que são comandos que avisam ao browser (navegador) quais efeitos exibir.

A estrutura de um documento HTML apresenta os seguintes componentes básicos:

<HTML>
<HEAD><TITLE>Titulo do Documento</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

<html> e </html>: indicam o começo e o fim da página HTML;

<head> e </head>: indicam o início e o fim de uma seção de cabeçalho para a página. Sempre tem que estar entre <html> e <body>;

<body> e </body>: indicam o início e o fim do corpo da página, no qual vai todo o conteúdo real de uma página HTML, isto é: os textos, as figuras, as tabelas e os links.

Cada tag é composto por dois símbolos : o sinal "<" denominado "menor que", e o sinal ">" denominado "maior que". No meio desses símbolos especiais é que vem o comando propriamente dito, sempre uma palavra na lingua inglesa, como body (corpo). Não importa se tais comandos são digitados em maiúsculas ou minúsculas, porém o ideal, e também um padrão de fato, é se utilizar apenas de comandos em minúsculas.

Um cuidado importante com estes e com a maioria dos tags, é que eles sempre andam aos pares. Para cada tag de abertura (ex.: <head>) deve existir um outro tag de fechamento (ex.: </head>). E este tag de fechamento é idêntico ao de abertura, apenas com a adição de uma barra logo após o sinal de "menor que".

o TAG <BODY> pode possuir atributos, que são:

BGCOLOR= indica a cor do fundo da página

TEXT= indica a cor do texto da página

LINK= indica a cor do link a ser visitado

VLINK= indica a cor do link visitado

BACKGROUND= indica a imagem, o papel de carta, o fundo de seu e-mail (ou página)

Por serem atributos do BODY, eles devem estar próximo a ele:

<HTML>

<HEAD>

<TITLE>O título</TITLE>

</HEAD>

</BODY>

</HTML>

Observação:todos os atributos são seguidos do sinal de = e a sua especificação está entre "aspas".

Veja agora alguns tags e suas utilidades.

TAG	O que faz	Objetivo	Sintaxe Básica
<tittle>	Título	definir um texto como sendo o título de uma página ou e-mail	<tittle> Título </tittle>
<font> (Atributos da fonte) <FONT size= "tamanho"> <FONT color= "cor"> <FONT face= "tipo">	ALTERA A FONTE TAMANHO da fonte COR da fonte TIPO da fonte	definir a fonte (letra) a ser utilizada no e-mail ou na página. Indicar o tamanho, a cor e o tipo de fonte usada, diferente da fonte padrão.	<FONT>Texto</FONT> <FONT size=2 color=black face=verdana></FONT>
<p>	PARÁGRAFO	definir o encerramento da linha atual, saltando uma linha após, como no encerramento de um parágrafo num documento de texto.	frase ou parágrafo<p> outra frase </p>
<br>	QUEBRA DE LINHA	definir o encerramento da linha atual, saltando para a próxima linha, como no meio de um parágrafo num documento de texto.	Linha <br> outra linha
<hr>	LINHA HORIZONTAL	traçar uma linha que divide horizontalmente a página, usada em geral para separar seções de uma mesma página.	<hr width=85%> (define a linha horizontal como tendo o tamanho de 85% da página)
<b>	TEXTO EM NEGRITO	realçar um texto por meio de letras em negrito	Linha <b> texto </b>
<i>	TEXTO EM ITÁLICO	realçar um texto por meio de letras em itálico.	Linha <i> texto </i>
<u>	TEXTO SUBLINHADO	realçar um texto por meio de letras sublinhadas	Linha <u> texto </u>
<center>	CENTRALIZA NA PÁGINA	centralizar o texto ou imagens desse ponto até o tag de encerramento.	<center> texto centralizado</center>
<h1>...<h6>	DEFINE UM NÍVEL DE CABEÇALHO	realçar os diversos níveis de cabeçalhos em ordem numa página; os níveis vão desde <h1> até <h6>	Linha <h2> Cabeçalho de Nivel 2</h2>
<img src>	INSERE UMA IMAGEM	inserir uma figura	<img src="lili.gif">
<img / align>	ALINHA a Imagem com o Texto	Uma das variantes da tag <img src> é a inserção do atributo align atributo este que permite posicionar uma imagem com o texto	Para colocar uma figura ao lado de um texto curto default:<img src="lili.gif"> texto à esquerda: <img src="lili.gif" align="top">texto à direita: <img src="lili.gif" align="middle"> texto Para colocar uma figura ao lado de um texto mais longo: à esquerda: <img src="lili.gif" align="left"> à direita: <img src="lili.gif" align="right"> Sintaxe Básica: <img src="lili.gif" align="top">
<a href>	INSERE UM LINK	insere um link na página, destacando o "endereço" com uma linha sublinhada que possibilita ao destinatário clicar sobre o link e ir diretamente ao " endereço linkado".	Texto <a href="endereço"> mais texto
<a href="mailto:>	INSERE UM LINK PARA E-MAIL	insere um link de E-Mail, permitindo ao destinatário que clicar sobre o link, enviar um e-mail diretamente ao endereço indicado no comando.	<a href="mailto:e-mail"> mais texto
<table> <tr> <td>	TABELA LINHAde Tabela CÉLULA de Dados da Tabela	quando queremos usar uma tabela para diversas finalidades	deve começar sempre com o tag <table> o qual deve ser imediatamente seguido pelos tags <tr> (linha da tabela) e <td> (célula de dados da tabela). O final da tabela é definido pelo tag </tr> </td> </table>.
<bgsound>	MÚSICA DE FUNDO	utilizado para automaticamente tocar uma música .MIDI (também aceita formatos .WAV e .AU) O atributo loop controla a quantidade de repetições da música.	este tag deve ser colocado entre <head> ... </head> <bgsound src="musica.mid loop="x">
<!-- . . . -->	COMENTÁRIOS	colocar comentários que não irão aparecer no e-mail ou na página, apenas no código fonte.	<!-- . . . -->

Fonte: Tittel, Stewart e Pitts, HTML4, Ed. Berkeley, São Paulo, 1998.

Dica elaborada por Lilian Russo


	.