LIFTOFF A BEBIDA ENERGÉTICA
Iniciação HTML		 NULLSH.com Jornal de Noticias Interessantes!
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’. *2. As bases do HTML* 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: 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 ‘/’): Todos os ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo: O primeiro a abrir é o último a fechar, e vice-versa. É ERRADO. É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’. Nestes tutoriais irei utilizar maiúsculas apenas por uma questão de leitura. é igual a e a Todas as páginas em HTML são identificadas pelo ‘tag’ , que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com . . . . Todas as páginas em HTML contêm duas partes: Aquela definida por , e que contém todas as informações do cabeçalho da página; Outra parte definida por , contém quase tudo aquilo que iremos ver realmente na nossa página. . . . . * 3. Uma primeira 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: A minha primeira página 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: Image: http://forum.inforpascoa.pt//imgforum/html1.jpg Que conclusão podemos tirar? O texto que aparece como título da janela é definido pelo ‘tag’ , 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 Olá mundo! Iremos obter o seguinte resultado: Image: http://forum.inforpascoa.pt//imgforum/html2.jpg Como já disse antes, a área definida pelo ‘tag’ é aquela onde reside quase todo o conteúdo visível de uma página. Vamos concentrar-nos nesta área. Comecemos por acrescentar uma frase: Olá mundo! Chamo-me Eduardo. Inesperadamente, o resultado obtido será o seguinte: Image: http://forum.inforpascoa.pt//imgforum/html3.jpg 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’: Olá mundo!
Chamo-me Eduardo. Este
(de Break) dá instruções ao browser para fazer uma mudança de linha. Assim, o resultado deverá ser este: Image: http://forum.inforpascoa.pt//imgforum/html4.jpg Vamos agora tentar o seguinte: Olá mundo! Chamo-me Eduardo. Iremos obter novamente o seguinte resultado: Image: http://forum.inforpascoa.pt//imgforum/html5.jpg 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: Olá mundo!         Chamo-me Eduardo. O resultado será este: Image: http://forum.inforpascoa.pt//imgforum/html6.jpg 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: Olá mundo! Chamo-me Eduardo.
Visitem a minha outra página. 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. Image: http://forum.inforpascoa.pt//imgforum/html7.jpg Este ‘tag’ é um pouco diferente dos que já vimos. Pode parecer confuso, mas não é. O ‘tag’ é 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 . O parâmetro HREF pode conter também o endereço de outro site, como em (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 . 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. 4. Formatação e aspecto 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: Página com cor Texto normal
Texto com link O resultado será o seguinte: Image: http://forum.inforpascoa.pt//imgforum/html8.jpg Aqui foram acrescentados três parâmetros adicionais ao ‘tag’ . 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:
TEXTO CENTRADO
TEXTO À DIREITA
Texto à esquerda O texto em maiúsculas tem o seu alinhamento alterado, a utilização do ‘tag’
também provoca quebras de linha: Image: http://forum.inforpascoa.pt//imgforum/html9.jpg Porquê? O ‘tag’

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

Bloco de texto

Outro bloco de texto
com mudança de linha

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: Image: http://forum.inforpascoa.pt//imgforum/html10.jpg 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: Normal
Carregado
Italico
Sublinhado
Carregado e Italico Obtemos este resultado: Image: http://forum.inforpascoa.pt//imgforum/html11.jpg Além disto, também podemos escolher a fonte, o seu tamanho e cor com :

Letra normal

Letra com a fonte Arial

Tamanho 5

Tamanho 2

Azul T.5

Vermelho T.5

Podemos combinar varios parametros

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: Image: http://forum.inforpascoa.pt//imgforum/html12.jpg O parâmetro COLOR, que já vimos aplicado no ‘tag’ , 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. 5. Multimédia: Som e Imagem 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: Página com imagem Imagem de fundo Teremos como fundo da página a imagem especificada no parametro BACKGROUND, presente na mesma pasta que a nossa página. Image: http://forum.inforpascoa.pt//imgforum/html13.jpg 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’ . 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.

Olá, sou o Eduardo

Sou eu!

Tem o resultado seguinte: Image: http://forum.inforpascoa.pt//imgforum/html14.jpg As imagens são objectos inseridos no meio do texto, pelo que a sua colocação requer algum planeamento:
Olá, sou o Eduardo.Sou eu! Benvindos à minha página.
Tem um resultado um pouco infeliz: Image: http://forum.inforpascoa.pt//imgforum/html15.jpg Vamos então analizar o ‘tag’ . 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 ALT indica 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’ , de modo a criar uma link nessa imagem:

Clique abaixo para continuar

Teremos então uma link para ‘paginadois.htm’ na imagem ‘link.gif’: Image: http://forum.inforpascoa.pt//imgforum/html16.jpg 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 , senão será igual à cor do texto. Podemos ainda utilizar BORDER="0" para suprimir a borda. CONTINUA...

in forum.ipweb.pt

Pagina Principal do IPJornal.com
http://forum.inforpascoa.pt/html/1092-in
iciacao-html.html
Publicado em 2007/09/25 na categoria Fórum Inforpáscoa