AminhaPágina

Vamos agora aprender a criar a nossa primeira página Web.

Começamos por abrir o bloco de notas e escrever o seguinte:

<html>
<head>
 <title>A minha primeira página</title>
</head>
<body>
</body>
</html>

De seguida devemos criar uma pasta nova para conter a página, e devemos gravar o nosso ficheiro de texto como ‘index.html’ ou ‘index.htm’, e como tipo, ‘todos os ficheiros’.

Porquê index.html ou index.htm?
Quando estamos a ver a página no nosso computador (offline), é 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.

Para vermos a página que acabamos de criar só precisamos abrir o ficheiro ‘index.html’ no internet Explorer ou no Google chrome.

Se visualizarmos a página que acabámos de criar num browser, vemos que o texto que aparece como título da janela é definido pelo ‘tag’ <title>, que vem sempre na secção <head>, secção responsável pelo cabeçalho da página.
Para editar o nosso ficheiro ‘index.html’, temos de o abrir com o bloco de notas.

Vamos acrescentar uma frase na secção <body>:

<body>
Olá, esta é a minha primeira página.
</body>

De seguida guardamos a alteração que fizemos, e no browser fazemos atualizar ou apertamos F5 e verificamos que aparece no corpo da página a frase que acabamos de escrever.

Como disse antes, a área definida pelo ‘tag’ <body> é onde vamos colocar todo o conteúdo que queremos visível na página Web.

Vamos concentrar-nos nesta área.
Comecemos por acrescentar uma frase:

<body>
Olá, esta é a minha primeira página.
O meu nome é Rafael.
</body>

O resultado foi uma frase seguida, sem mudança de linha.

Em HTML, os espaçamentos e mudanças de linha processam-se de uma forma diferente.
Todo o texto é interpretado continuamente, é possível todo o HTML de uma página estar numa única linha.
Os espaços, servem apenas para organizar o código de maneira a torná-lo mais fácil de ler a quem o cria.

Vamos então introduzir o seguinte ‘tag’:

<body>
Olá, esta é a minha primeira página.
 
O meu nome é Rafael.
</body>

Este (the Break) dá instruções ao browser para fazer uma mudança de linha.

Vamos agora tentar o seguinte:

<body>
Olá, esta é a minha primeira página. O meu nome é Rafael.
</body>

O resultado foi de novo uma frase seguida, sem o devido espaçamento.
Os espaços em HTML são um pouco diferente, os browsers só reconhecem um único espaço entre caracteres.
Para contornar isso, utiliza-se uma referência especial,   (Non-Breaking SPace), que não é um ‘tag’.

Antes de mais explicações, experimentem isto:

<body>
Olá, esta é a minha primeira página.
       
O meu nome é Rafael.
</body>

Os carateres especiais são utilizados para definir caracteres que normalmente não são reconhecidos pelo HTML.
Por exemplo, como os sinais de maior e menor são utilizados pelo próprio HTML para definir os ‘tags’, se quisermos estes sinais visíveis na nossa página utilizamos > (>) e < (<).

<html></html> Inicia/termina um documento em HTML.
<head></head> Área de cabeçalho, os elementos não são visíveis na página.
<title></title> Coloca o nome da página na barra de título da janela.
<body></body> Define a área visível do documento.
  Insere uma quebra de linha.
  insere um espaço.

Caracteres usados como funções em programação HTML (Tabela ISO8859-1)

< < > > & & " "
Os browsers não identificam acentuações ou símbolos que habitualmente usam ao escrever um texto num programa de processamento de texto.

Vamos ver alguns carateres que podem ser usados para que a nossa escrita apareça corretamente quando colocamos a nossa página web no ar.

Alguns servidores formatam o texto sem usarmos todo este código iso (International Standardization Organization), mas o meu conselho é formatarem todo o texto conforme ele vai crescendo, assim se por alguma razão resolverem mudar de servidor e o servidor não formatar o texto, o texto já vai estar formatado evitando assim uma perda de tempo infindável, porque hoje começamos com 200 palavras amanha já temos 2000.

Alguns códigos ISO-8859-1

'   '
′   ′
″   ″
‘   ‘
”   ”

“   “
&lsaquo;   ‹
&rsaquo;   ›
&frasl;   ⁄
¦   ¦

ª   ª
®   ®
°   °
⋅   ⋅
¯   ¯

·   ·
&oline;   ‾
»   »
«   «
’   ’
&bdquo;   „

Os acentos, ou cedilha, são compostos de &, seguido da letra maiúscula ou minúscula, seguido do nome do acento de acordo com o código e finaliza com ponto e vírgula.

á

· acute = agudo
· circ = circunflexo
· grave ou crase
· ring = bolinha em cima da letra
· tilde = til
· uml = trema
· cedil = cedilha

Uma das particularidades do HTML é o fato de ser uma linguagem de hiper-texto.

Vamos agora introduzir uma ligação a outra página:

<body> Olá, esta é a minha primeira página. O meu nome é Rafael. 
Visitem a minha <a href="pagina1.html"> pagina1 </a>.
</body>

Obtemos então uma ligação a uma página, que seria o ficheiro ‘pagina1.html’ gravado na mesma pasta que o ficheiro da página que estamos a editar.

(Vamos criar rapidamente a pagina1.html e testar no browser a ligação que acabámos de criar).

Este ‘tag’ é um pouco diferente dos que vimos. Parece confuso, mas não é.
O ‘tag’ <a> introduz uma link, mas no entanto precisa de um parâmetro (o href) para indicar a onde é feita essa ligação.
Tudo aquilo que se segue vai estar ‘linkado’, até o ‘tag’ ser fechado com </a>.
O parâmetro href pode conter também o endereço de outro site ou qualquer outro ficheiro sem ser .HTM ou .HTML, como em <a href="http://www.site.com"> (neste caso é obrigatório o prefixo http://), ou para fazer uma link para download <a href="localização do ficheiro">.

Todos os ficheiros referidos numa página, quer links a outras páginas, quer imagens, etc…, devem ter o nome em minúsculas, porque a grande maioria dos servidores Web distinguem as letras maiúsculas das letras minúsculas.
É possível que uma link a ‘pagina.html’, quando o ficheiro se chama ‘Pagina.html’, não funcione.

<a href="url"></a> tag destinado a introduzir uma link
URL (Universal Resource Locator) O endereço de uma página Web que se escreve na barra de endereços do browser, é um URL.
Aos endereços de ftp completos (ftp://nomedoservidor.com/ficheiro.zip) também se dá o nome de URL.
Um URL é composto pelo nome do protocolo (por exemplo 'http://') o nome do servidor (www.servidor.pt) e o nome do ficheiro (/index.html).
Quando o URL não tem o nome do ficheiro (exemplo: http://www.servidor.pt/) o servidor assume que se está a pedir o ficheiro 'index.html'.
http:// O ''protocolo'' utilizado para navegar na Web é o http (HyperText Transfer Protocol), isto é, ao escrever ''http://www.nome.pt/index.html'' estamos a dizer ao browser para transferir o ficheiro index.html, que está no servidor www.nome.pt, com o protocolo http.
download Traduzido significa ''carregar para baixo''. Quando se está a transferir um ficheiro de um site para o computador está a fazer-se um download.
LinksAs palavras ou imagens de uma página Web nas quais é possível clicar, chamam-se links ou hiperligações.
Hiperligação é a tradução literal de ''Hiperlink''.
Servidor (Server / Host) Computador central, que administra e fornece informação a outros computadores-clientes. Existem servidores Web que disponibilizam páginas online, servidores de correio eletrónico que distribuem mensagens, etc.

Voltando um pouco atrás vemos a tag <a>, á qual podemos acrescentar mais alguns atributos interessantes:

<a href="pagina.htm" target="_blank"></a> indica que a página ou site abre numa outra janela.
<a href="pagina.htm" target="_top"></a> indica que a página ou site abre na mesma janela.
<a href="pagina.htm" target="nome do quadro"></a> indica que a página ou site abre no frame indicado.
<a href="mailto: endereço de correio eletrónico"></a> Cria uma forma do utilizador entrar em contato com o responsável pelo site.

Falaremos destes dois últimos atributos mais para a frente.

0|1|2|3|4|5|6|7|8|9|10|11|12|13|14