Tutorial Maluko: Tutorial de HTML

HTML significa ‘HyperText Markup Language’, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples: Certos itens de um documento contêm uma ligação a outra zona do mesmo documento ou, como é mais vulgar, a outros documentos.

A principal aplicação do HTML é a criação de páginas na Web, e convém esclarecer que não se trata de uma linguagem de programação. De facto, o HTML é antes uma espécie de linguagem de formatação, um ficheiro de texto que é formatado através de uma série de comandos – ‘tags’.

Antes de mais, importa esclarecer que para a criação de uma página em HTML não é necessário nenhum software especial. Se bem que existam programas especializados, o Notepad do Windows ou mesmo o Edit do MS-DOS são mais que suficientes para a criação de uma página.

Como disse no Capítulo I, o HTML consiste em texto formatado por ‘tags’. Embora existam várias dezenas destes ‘tags’, apenas uma pequena parte destes é utilizada normalmente. Há algumas regras básicas que é necessário compreender antes de se começar com a criação de páginas...

Todos os ‘tags’ são inseridos entre o sinal de menor e maior:

<tag>

Tirando aqueles que representam a posição de um objecto (a inserção de uma imagem, por exemplo), todos os ‘tags’ de formatação devem ser abertos e fechados (utilizando o caracter ‘/’):

<tag> </tag>

Todos os ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo:
<a> <c> </c> </a>

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

<a> <c> </a> </c> É ERRADO.

É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’. Nestes tutoriais irei utilizar maiúsculas apenas por uma questão de leitura.
<tag> é igual a <TAG> e a <Tag>

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>, contém quase tudo aquilo que iremos ver realmente na nossa página.

Para criarmos a nossa primeira página em HTML, como já disse no capítulo anterior, basta qualquer simples editor de texto, como o Notepad. Podemos começar por inserir o seguinte:
<HTML>
<HEAD><TITLE>A minha primeira página</TITLE></HEAD>
<BODY></BODY>
</HTML>

Dica:

Devemos criar uma pasta nova no nosso disco para conter a página, e devemos gravar o nosso ficheiro de texto como 'index.htm'. Porquê? Quando a página está a ser visualizada no nosso disco, é indiferente, mas nos servidores onde são alojadas as páginas na Internet, a página inicial por defeito chama-se index.html ou index.htm.

Se visualizarmos a página que acabámos de criar num browser (programa que permita navegar na internet, por ex. IExplorer), teremos qualquer coisa como isto:

Que conclusão podemos tirar? O texto que aparece como título da janela é definido pelo ‘tag’ <TITLE>, que surge sempre na área correspondente ao cabeçalho da página (<HEAD>).

Vamos agora fazer a seguinte alteração:<HTML>
<HEAD>
<TITLE>A minha primeira página</TITLE>
</HEAD>
<BODY>
Olá mundo!
</BODY>
</HTML>

Iremos obter o seguinte resultado:

Como já disse antes, a área definida pelo ‘tag’ <BODY> é aquela onde reside quase todo o conteúdo visível de uma página. Vamos concentrar-nos nesta área.
Comecemos por acrescentar uma frase:
<BODY>
Olá mundo!
Chamo-me Eduardo.
</BODY>

Inesperadamente, o resultado obtido será o seguinte:

Convém então esclarecer algo: Em HTML, os espaçamentos e mudanças de linha processam-se de um modo algo diferente. Todo o texto é interpretado continuamente, e na verdade é possível que todo o HTML de uma página esteja numa única linha. Os espaços, tal como neste tutorial, apenas servem para tornar o código mais legível a quem o cria. Vamos introduzir o seguinte ‘tag’:<BODY>
Olá mundo!
 
Chamo-me Eduardo.
</BODY>

Este   (de Break) dá instruções ao browser para fazer uma mudança de linha. Assim, o resultado deverá ser este:

Vamos agora tentar o seguinte:
<BODY>
Olá mundo! Chamo-me Eduardo.
</BODY>

Iremos obter novamente o seguinte resultado:

Porquê? Como foi dito, a noção de espaçamento em HTML é um pouco diferente, e os browsers não reconhecem mais que um único espaço entre caracteres. Para contornar isto, utiliza-se uma referência especial -   (Non-Breaking SPace), que convém esclarecer que não é um ‘tag’. Antes de mais explicações, experimentemos isto:<BODY>
Olá mundo!
       
Chamo-me Eduardo.
</BODY>

O resultado será este:

Dica:

Estes caracteres especiais são utilizados para definir caracteres que normalmente não são reconhecidos pelo HTML. Por exemplo, visto que os sinais de maior e menor são utilizados pelo próprio HTML para definir os ‘tags’, se quisermos utilizar estes sinais na nossa página utilizaremos > e <respectivamente.

Uma das bases do HTML é o facto de ser uma linguagem de hiper-texto. Vamos agora tentar introduzir uma ligação a outra página:<BODY>
Olá mundo! Chamo-me Eduardo. 
Visitem a minha <A HREF="outra.htm"> outra página</A>.
</BODY>

iremos então obter uma ligação a uma página, que seria o ficheiro ‘outra.htm’ gravado na mesma pasta que o ficheiro da página que estamos a editar. Seria interessante criar rapidamente essa página para testar a ligação que acabámos de criar.

Este ‘tag’ é um pouco diferente dos que já vimos. Pode parecer confuso, mas não é. O ‘tag’ <A> é aquele destinado à introdução de uma link, mas no entanto necessita de um parâmetro (o HREF) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar ‘linkado’, até o ‘tag’ ser fechado com </A>.
O parâmetro HREF pode conter também o endereço de outro site, como em <A HREF="http://www.site.com"> (neste caso é indispensável o prefixo http://) ou qualquer outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para download usar-se-ia <A HREF="ficheiro">.

Dica:

IMPORTANTE: Aconselho vivamente que todos os ficheiros referidos numa página, quer links a outras páginas, quer imagens, etc, tenham o seu nome em minúsculas, pois a grande maioria dos servidores Web fazem uma distinção entre maiúsculas e minúsculas. Existe uma forte possibilidade que se tivermos uma link a ‘pagina.htm’, quando o ficheiro se chama ‘Pagina.htm’, esta link não funcione.

Todas as páginas que vemos na Internet têm algo mais que texto corrido e monótono. Antes de mais, podemos mudar a cor de uma página:
<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>
O resultado será o seguinte:

Aqui 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 já visitada previamente.
O que está dentro destes parâmetros? O código hexadecimal correspondente à cor (mais informação sobre isto encontra-se no artigo sobre o uso da cor, na seguinte tabela podemos ver alguns dos mais importantes:

Dicas:

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

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:

Porquê? 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>

Obtemos este resultado:

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 varios parametros
</BODY>

Este já está um pouco mais complicado. Existem várias maneiras de fazer isto, mas esta demonstra como se devem hierarquizar os ‘tags’ correctamente. Bem executado, teremos este resultado:

O parâmetro COLOR, que já vimos aplicado no ‘tag’ <BODY>, contém a cor do texto no seu código hexadecimal (ver Apêndice E). 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.

Dica:

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.

Toda a manipulação de texto e de cor que vimos pode parecer interessante, mas é raríssima a página na Internet que não contém pelo menos uma imagem.
Podemos começar por ver como se insere um fundo numa página:
<HTML>
<HEAD><TITLE>Página com imagem</TITLE></HEAD>

<BODY BACKGROUND="imagem.jpg">
Imagem de fundo
</BODY>
</HTML>

Teremos como fundo da página a imagem especificada no parametro BACKGROUND, presente na mesma pasta que a nossa página.

Embora não se veja na imagem acima, a imagem repete-se em padrão. Não é aconselhável a utilização de fundos complexos, visto que podem tornar o texto pouco legível. Também é recomendável a escolha de uma cor suficientemente contrastante para o texto.
No entanto, para colocarmos uma imagem no corpo da nossa página utilizamos o ‘tag’ <IMG>. Este ‘tag’ insere uma imagem no ponto onde é colocado, e não é fechado, visto que não se trata de um ‘tag’ de formatação.
<BODY BGCOLOR="#66CCFF">
Olá, sou o Eduardo
<IMG SRC="eduardo.jpg" ALT="Sou eu!">
</BODY>
Tem o resultado seguinte:

As imagens são objectos inseridos no meio do texto, pelo que a sua colocação requer algum planeamento:<DIV ALIGN="CENTER">
Olá, sou o Eduardo.<IMG SRC="eduardo.jpg" ALT="Sou eu!">
Benvindos à minha página.
</DIV>
Tem um resultado um pouco infeliz:

Vamos então analizar o ‘tag’ <IMG>. O parâmetro SRC (SouRCe) indica o ficheiro da imagem. Deve ser um ficheiro .GIF ou .JPG (ver Dicas para um bom design), e devemos ter atenção às maiusculas e minúsculas do seu nome. O parâmetro ALTindica o texto que irá aparecer enquanto a imagem não é descarregada da Internet, ou que aparece quando passamos com o rato por cima da Imagem.Uma conclusão muito importante é que podemos inserir uma imagem numa secção formatada pelo ‘tag’ <A>, de modo a criar uma link nessa imagem:
Clique abaixo para continuar

<A HREF="paginadois.htm"><IMG SRC="link.gif" BORDER="4"></A>

Teremos então uma link para ‘paginadois.htm’ na imagem ‘link.gif’:

O parâmetro BORDER define a largura da borda da imagem. No caso de esta fazer uma hiper-ligação, a cor desta borda será a cor por defeito, aquela que pode ser definida por <BODY LINK="…">, senão será igual à cor do texto. Podemos ainda utilizarBORDER="0" para suprimir a borda...

sexta-feira, 17 de junho de 2011

Tutorial de HTML

Nenhum comentário:

Postar um comentário