Formatação e Aspecto

Todas os sites que vemos na net têm algo mais que texto corrido e monótono. Vamos ver alguns desses aspectos analisando o código seguinte:

<HTML><HEAD><TITLE>Página com cor</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#FF0000">
Texto normal <A HREF="outra.htm">Texto com link</A>
</BODY>
</HTML>

Este será o resultado:

Foram acrescentados três parâmetros adicionais ao ‘tag’ <BODY>:

BGCOLOR define a cor de fundo da página,
TEXT a cor por defeito do texto
LINK a cor de uma hiper-ligação.

Existem ainda os parâmetros adicionais ALINK e VLINK que definem, respectivamente, a cor de uma ligação activa (quando se clica sobre ela) e a cor de uma ligação que já foi visitada.

Os parâmetros passados para dentro destas tags estão em hexadécimla, ficam alguns exemplos de cores para usar na tabela seguinte:

Branco: #FFFFFF	Amarelo: #FFFF00
Preto: #000000	Magenta: #FF00FF
Vermelho: #FF0000	Laranja: #FF6600
Cinza: #999999	Azul Claro: #00FFFF
Verde: #00FF00	Verde Escuro: #006600
Azul: #0000FF	Azul Escuro: #000066

O código hexadecimal é dividido em 3 partes RGB (Red, Green, Blue), em que os 2 primeiros números equivalem à quantidade de Vermelho, os 2 seguintes à quantidade de Verde, e os 2 últimos à quantidade de Azul.

Por exemplo para obtermos o vermelho #FF0000, temos O valor de R no valor máximo, e G e B no mínimo.

No entanto, muitas vezes muito mais importante que as cores, é o alinhamento dos elementos da página. Por defeito tudo fica alinhado à esquerda, mas é possível mudar isso:

<BODY>
<DIV ALIGN="CENTER">TEXTO CENTRADO</DIV>
<DIV ALIGN="RIGHT">TEXTO À DIREITA</DIV>
Texto à esquerda
</BODY>

O texto em maiúsculas tem o seu alinhamento alterado, a utilização do ‘tag’ <DIV> também provoca quebras de linha, esse código provocará o seguinte:

O ‘tag’  é utilizado para a definição de parágrafos, como o seguinte exemplo o demonstra:

<BODY>
Bloco de texto
Outro bloco de texto com mudança de linha
</BODY>

Existe uma diferença clara entre o espaçamento introduzido por uma mudança de parágrafo e aquele que surge através do ‘tag’  , de quebra de linha:

Além do aspecto global do texto, podemos também escolher o tipo de letra que utilizamos. Antes de mais, temos os ‘tags’ ,  e , respectivamente para letra carregada, em itálico e sublinhada:

<BODY>
Normal 
Carregado 
Italico 
Sublinhado 
Carregado e Italico
</BODY>

Além disto, também podemos escolher a fonte, o seu tamanho e cor com :

<BODY>
Letra normal
Letra com a fonte Arial

Tamanho 5
Tamanho 2

Azul T.5
Vermelho T.5



Podemos combinar vários parâmetros 
</BODY>

Obtemos este resultado:

O parâmetro COLOR, que já vimos aplicado no ‘tag’ <BODY>, contém a cor do texto no seu código hexadecimal. O parâmetro SIZE contém o tamanho do tipo de letra, que é um algarismo entre 1 (mais pequeno) e 7 (maior). Finalmente, FACE contém o nome do tipo de letra a utilizar.

Apesar de existirem inúmeros tipos de letra, é aconselhável que uma página apenas utilize o Arial ou o Times New Roman, visto que com outros existe uma grande possibilidade que quem vai visitar a página não tenha essa fonte instalada no seu computador.

Veja a 1ª parte, Tutorial HTML - Parte1

Para construir um blog, não é necessário utilizar HTML, mas por vezes é necessário ter algum conhecimento sobre a matéria, especialmente se pretendermos aprimorar o blog ou saber encaixar todas as peças do puzzle que existem hoje na web, tal como referi no post anterior sobre indexação.

Para não assustar os leitores, com pavor de linguagens de programação, em primeiro lugar o HTML não é uma linguagem de programação, é uma linguagem de formatação e em segundo lugar não é necessário conhecer a linguagem de forma aprofundada, mas sim, conhecer a sua estrutura básica e começar a dar os primeiros passos.

O HTML consiste em texto formatado por ‘tags’ ou etiquetas, que obedecem a regras simples:

Todas os ‘tags’ são inseridas entre o sinal de menor e maior

<tag>

À excepção das que representam a posição de um objecto como seja uma imagem, todas as ‘tags’ de formatação devem ser abertas e fechadas

<tag> </tag>

Obedecem a uma hierarquia, como no seguinte exemplo:

<a> <c> </c> </a>

O primeiro a abrir é o último a fechar, e vice-versa.

É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’.

Todas as páginas em HTML são identificadas pelo ‘tag’ <HTML>, que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>.

<HTML>
.

.
</HTML>

Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página; Outra parte definida por <BODY>, que contém o que irá surigir na página.

Podemos neste momento criar uma primeira página (copie o texto para o bloco de notas ou um outro qualquer editor de texto e guarde com a extensão .htm ou .html):

<HTML>
<HEAD>
<TITLE>A primeira página em HTML</TITLE>
</HEAD>
<BODY>
Olá mundo!
</BODY>
</HTML>

Basicamente o exemplo colocará no título do browser o texto "A minha página em HTML" e na página aparecerá o texto "Olá mundo".

Pequenos conceitos que dá para perceber a mecânica da coisa.

veja a segunda parte, Tutorial HTML - Parte 2

Categorias

Tutorial HTML - Parte 2

Formatação e Aspecto

Tutorial HTML - Parte 1