TECNOSOLUTION: Tutorial HTML – Criando uma pagina de teste

terça-feira, 23 de outubro de 2012

Tutorial HTML – Criando uma pagina de teste – Parte 03

Para criarmos a nossa primeira página em HTML, como já havia dito no tutorial anterior, basta qualquer simples editor de texto, como o Bloco de notas. Podemos começar por inserir o seguinte:

<HTML>

<HEAD>
<TITLE>A minha primeira página</TITLE>
</HEAD>

</HTML>

Dica:

Devemos criar uma pasta nova no nosso disco para conter a página, e devemos gravar o nosso arquivo 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 default (Padrão) chama-se, index.html ou index.htm.

Se visualizarmos a página que acabamos de criar num browser (programa que permita navegar na internet, por ex. Chome), 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!

Me Chamo Carlos Eduardo

</BODY>

Consequentemente, 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 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!

<BR>
Me Chamo Carlos Eduardo

</BODY>

Este <BR> (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! Me Chamo Carlos 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!
       
Me Chamo Carlos 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 fato de ser uma linguagem de hiper-texto. Vamos agora tentar introduzir uma ligação a outra página:

<BODY>
Olá mundo! Me Chamo Carlos Eduardo<BR>
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 acabamos 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 onde é 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.tecnosolution.blogspot.com.br"> (neste caso é indispensável o prefixo http://) ou qualquer outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer um link para download usar-se-ia <A HREF="ficheiro">.

Dica:

IMPORTANTE: Aconselho 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 um link a ‘pagina.htm’, quando o ficheiro se chama ‘Pagina.htm’, este link não funcione.