Entendendo sites em HTML

Por enquanto, não vamos aprender como criar um site, mas entender como funciona cada parte de uma página web feita em HTML.
 
É muito provável que você já tenha as ferramentas que precisa. Você tem um "navegador". Navegador é um programa que permite visualizar e navegar por páginas na Internet. Você está lendo está página em um navegador. Não importa qual você use. O mais comum é o Microsoft Internet Explorer, mas existem outros, tais como, Opera e Mozilla Firefox, que podem ser usados para acessarem as páginas da internet.
 
Alguns programas são utilizados para facilitar o trabalho com HTML, como o Macromedia Dreamweaver ou mesmo Microsoft Word, que podem criar websites para você. Por ora, esqueça estes programas! Eles não têm grandes utilidades para visualizar um website.
 
Para isso, você precisará de um simples editor de textos. Se você tem instalado o Windows, poderá usar o Notepad, que normalmente pode ser encontrado no menu “Programs em Accessories (Programas » Acessórios)”.
 
Inicialmente vamos criar um página web mais simples possível. Para fazer isso, basta abrir um editor de texto e escrever os seguintes códigos:
 
<html>
<head>
</head>
<body>
Página básica em HTML
</body>
</html>
 
Lembrando que os arquivos em HTML, caso tenha nome de “pagina”, ela deve ser nomeada como “pagina.html”, isso deve ser feito para que o navegador possa entender que se trata de uma página web e não somente um arquivo de texto.
 
Temos aqui três conjuntos de 'tags'.  As tags, normalmente são em pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html.
 
Dentro da tag <html> existem mais dois pares de tags. <head>...</head> contém informações que não foram definidas ainda, a mais importante destas informações é o título da página que aparece na barra do navegador. Pode-se dar um título a página, escrevendo-o dentro da tag title, como mostrado abaixo:
 
<html>
<head>
<title>Entendendo sites HTML</title>
</head>
<body>
Este é o conteúdo da minha página Web!
</body>
</html>
 
Qualquer conteúdo deve ser colocado entre o par de tags <body>...</body> para que o navegador possa renderizá-lo.
 
Em HTML, existem diferentes tags que são utilizadas para poder formatar o texto. Vemos algumas mais usadas abaixo.
 
Itálico: <i>texto</i>
Sublinhado: <u>texto</u>
Negrito: <b>texto</b>
Texto Riscado: <s>texto</s>
Novo Parágrafo: <p>texto</p>
Quebra de linha: <br> (não é necessário fechar a tag)
Centrar: <center>texto</center>
Alinhar texto à esquerda: <p align="left">texto</p>
Alinhar texto à direita: <p align="right">texto</p>
Mudar cor do texto: <font color="red">texto</font>
Mudar a fonte: <font face="Arial">texto</font>
Título: <h1>texto</h1> (tamanho do título pode variar de h1, h2 e aumentando, quanto maior o valor, menor será o tamanho do título)
 
Outra coisa comum nas páginas HTML, é a utilização de imagens, elas podem ser colocadas tanto no plano de fundo de nossa página web assim como colocar imagens distribuídas pelo site.
 
Para colocar uma imagem de fundo use o seguinte código:
 
<body background="fotos/imagem.jpg">
 
Esse código utilizam a localização do ficheiro da imagem. Se trata do caminho da pasta "fotos" que está no site. Pode também usar um link de imagens de outros sites, será o código abaixo:
 
<body background="http://www.seudominio.com/fotos/imagem.jpg">
 
E a tag para se inserir imagens é
 
<img src="imagem.jpg">
 
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:
 
<img src="fotos/imagem.jpg">
 
Para finalizar essa introdução veremos a tag para se inserir links, que é:
 
<a href="http://www.pagina.com">Nome do Link</a>
 
Esses links são usados para uma infinidade de coisas, tanto imagens que redirecionam para outras páginas, assim como criar menus de navegação.
 
Agora entendendo todas essas tags que foram mostradas, podemos criar uma pequena página com algumas formatações simples. E em textos futuros veremos como entender a estruturação da página HTML, utilizando tabelas e enquadramentos.
 
A direita de imagem temos os códigos vistos até então em um documento de texto, e na esquerda os mesmos códigos só que visualizados em um navegador.