|
Já sabemos que o
Outlook Express possibilita a visualização do código fonte das
mensagens na aba "Origem" (ou código fonte). É aí que encontra-se
visível a linguagem HTML e também onde podem ser inseridos os
scripts (javascript ou vbscript).
É possível lidarmos com
formatações de e-mails mesmo sem conhecer profundamente HTML, ou
a linguagem dos scripts, mas é importante que tenhamos ao menos uma
noção geral.
O que é HTML
?
A linguagem HTML (Hypertext Markup Language - Linguagem de Marcação de Hipertexto)
é usada para criar as páginas divulgadas na World Wide Web (www), o
serviço mais popular da Internet.
Os comandos básicos da
linguagem html são denominados TAGS. São
comandos que avisam ao browser (navegador) quais efeitos
exibir.
A linguagem HTML dispõe de uma grande quantidade de
tags, cada um com uma função diferente.
Os tags são
palavras-chave contidas entre os sinais < (menor que) e >
(maior que).
Entre esses sinais estará o comando especificado
sempre por uma palavra na língua inglesa, por exemplo HEAD (cabeça)
, BODY (corpo), TITLE (título), etc.
A cada tag que dá início
a um comando deve corresponder outro tag de fechamento do comando,
por exemplo: para cada tag de abertura (ex.: <head>) deve
existir um outro tag de fechamento (ex.: </head>). Esse tag de
fechamento é idêntico ao de abertura, apenas com o acréscimo de uma
barra invertida.
HTML
Mínimo
Todo documento deve
ser identificado como HTML (<html> </html>), ter uma
área de cabeçalho (<head></head>) com o nome para o
documento (<title> </title>), um título principal e uma
área definida como corpo(<body></body>) do conteúdo do
documento. Como o exemplo a seguir:
<HTML>
<HEAD>
<TITLE>Título do
Documento</TITLE>
<STYLE></STYLE>
</HEAD>
<BODY>
(aqui,
no corpo do HTML, entram os tags de tabelas, scripts,
etc.)
</BODY>
</HTML>
Alguns dos
principais comandos de HTML
<HTML> e seu corresponde
</HTML> - deve englobar todo o conteúdo da página (estar
presente no início no fim do texto) para indicar ao navegador que se
trata de um documento HTML.
<HEAD> e seu correspondente
</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>
<TITLE> e seu correspondente
</TITLE> - entre esses tags deve-se colocar o título da sua
página.
OBS. A colocação do título é usual no caso de
sites.
<STYLE> e seu correspondente </STYLE> -
deve conter as características de estilo tais como: os comandos para
moldura e barra de rolagem colorida; definição da fonte, de margens,
etc.
<BODY> e seu correspondente </BODY> -
delimita o corpo da página, que é a parte da página que o leitor
visualiza na sua tela. Entre esses dois tags está a parte principal
do conteúdo, isto é, os textos, as figuras, as tabelas e os
links.
O tag <BODY> pode possuir atributos, tais como:
TEXT, BGCOLOR, LINK, VLINK e BACKGROUND.
Nas formatações de
e-mails encontraremos com freqüência: BGCOLOR= indica a cor do
fundo da página e BACKGROUND= indica a imagem a ser aplicada no
plano de fundo. Os atributos são seguidos do sinal de = e a sua
especificação deverá estar entre "aspas".
Ex. <BODY
bgColor=#ffffff background="endereço da imagem">
Outros
comandos de HTML que também serão vistos com freqüência nos e-mails
formatados
<FONT> e seu correspondente </FONT> -
onde é definido o tamanho, cor e tipo de fonte. Seus atributos
são:
<FONT size= "tamanho"> - define o TAMANHO da
fonte
<FONT color= "cor"> - define a COR da
fonte
<FONT face= "tipo"> - define o TIPO da fonte
(arial, verdana, etc.)
<TABLE> e seu correspondente
</TABLE> - delimita a tabela dentro da
página.
<TR> e seu correspondente </TR> - define
uma linha da tabela.
<TD> e seu correspondente
</TD> - define uma célula da linha da tabela.
<IMG
SRC> - insere uma imagem in-line (terminação .gif ou .jpg) na
posição corrente da página.
<BGSOUND> - utilizado para
tocar automaticamente uma música (MIDI, WAV e .AU).
Sua
sintaxe é <bgsound src="musica.mid" loop=x> onde o atributo
"loop" controla a quantidade de vezes que a música é
tocada.
DHTML e
CSS
HTML (Hypertext Markup
Language) não é uma linguagem de programação porque não executa
comandos. É considerado uma linguagem de marcação de texto.
Quem
executa e exibe o texto formatado é o navegador (IE, Netscape,
etc.)
O HTML puro há muito não dava mais conta da rapidez do
desenvolvimento da informática e das necessidades dos webmasters,
por isso, foram criados outros recursos (outras linguagens mais
sofisticadas tipo asp e php) e também o DHTML.
DHTML (Dynamic HTML ou HTML Dinâmico) é uma
combinação do HTML com CSS e script languages (javascript e
vbscript).
DHTML não é uma linguagem, mas sim uma reunião de
recursos utilizados para a construção de sites
CSS - (Cascading Style Sheet) que
traduzido seria "folha de estilos em cascata" é uma técnica que usa
certos comandos e que visa fundamentalmente definir num único
arquivo o estilo de todas as páginas de um site de
web.
Tentando explicar melhor: imaginem um site com 500
páginas e no qual o webmaster tivesse que alterar o cor da fonte de
todas elas, ou o estilo das molduras, etc. Antigamente teria de
fazer isso em cada página (pensem o quanto de tempo e o trabalho que
precisaria para efetuar essas alterações).
Com o advento de
CSS a formatação de todas as páginas está centralizada em 1 arquivo
com extensão .css
Assim, se for preciso fazer alterações, basta
alterar nele e imediatamente todas a páginas serão
alteradas.
Sim... mas o que nós, que lidamos com formatações
de e-mails, temos a ver com isso?
Temos tudo a ver, pois em
nossas formatações, usamos muitos comandos e conceitos de CSS e nem
sabíamos disso. Querem ver um exemplo?
Se vocês usarem o
programa scrollbar (que está disponível na parte de Material de
apoio) para definir o código de cor da barra de rolagem, da fonte e
do bgcolor, teremos algo mais ou menos assim:
<!-- CSS
Code, ready for Use -->
<style
type="text/css">
<!--
body
{scrollbar-face-color:#804040;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#C0C0C0;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#808080;
scrollbar-arrow-color:#C0C0C0;
scrollbar-track-color:#EFE9E0;
color:#000000;
background-color:#EFE9E0;
font-family:verdana,arial;
font-size:12px}
/*
End of style section.
*/
-->
</style>
Aquele comando inicial
marcado em cor branca e que definirá o estilo da nossa formatação é
um comando de CSS.
A função do <style type="text/css"> é
informar ao browser (navegador) que serão utilizados comandos
Cascading Style Sheets.
Temos usado também outros
conceitos de CSS tais como: id e class.
Quando usamos o id (identificador) para elementos de HTML
(tabela, por exemplo) estamos criando as condições para que algumas
das suas propriedades possam ser alteradas por scripts (javascript
ou vbscript).
Outro conceito importantíssimo do CSS é o class, que refere-se a uma "classe de estilos"
que será aplicada a várias páginas de um site.
Esses assuntos
(DHTML, CSS, etc.) são objeto de cursos específicos que demandam
tempo e estudo. Nesta página era nosso objetivo apenas dar uma visão
geral. |
