Bem pessoal, como prometido está aqui a primeira aula. Para criar um documento HTML não precisamos de nenhum programa sofisticado. Basta um Editor de Texto simples como o Bloco de Notas do Windows ou o Gedit do Linux ou qualquer Editor de HTML que você encontra fácilmente na internet em sites de downloads como o Baixaki e um Navegador de Internet (Browser) como o Internet Explorer, Mozilla Firefox, Google Chrome, etc.
O Editor de Texto será usado para editar o código HTML e o Navegador será usado para interpretar o código e exibir o resultado.
Considerando que você já tem os programas necessários a disposição, crie uma pasta para salvar os arquivos criados.
Não vou entrar em detalhe em relação a história do HTML e do CSS, isso você encontra fazendo uma simples pesquisa em algum site de busca. Vamos direto ao assunto...
1º) Abra seu editor de texto preferido e digite a estrutura básica de um documento HTML seguindo o exemplo abaixo:
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
(Deixe aqui um espaço de 2 ou mais linhas para colocar o conteúdo da página)
</body>
</html>
2º) Agora salve este documento com o nome pagina1.html dentro da pasta que você criou. Como estamos usando um editor de texto, devemos sempre acrescentar a extensão .html após o nome do arquivo senão ele será salvo como um arquivo de texto comum.
3º) Agora abra a pasta onde o arquivo foi salvo e execute o arquivo pagina1.html. Observe que o arquivo será aberto automaticamente no seu navegador padrão. Observe que por enquanto a página criada está em branco e aparecerá apenas o título "Minha primeira página" na parte superior do seu navegador, na barra de título.
Pronto! Está criada sua primeira página. Agora mantenha a janela dos dois programas abertas para que possamos editar a página e visualizá-la.
4º) O próximo passo agora é colocar algum conteúdo no corpo da página. Por isso, vamos digitar uma lista de palavras abaixo da tag <body>. Veja como ficará:
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
Amor
Sonho
Feliz
Tranquilo
Verdadeiro
Apaixonado
Felicidade
Vida
Silêncio
Futebol
</body>
</html>
5º) Agora salve as alterações realizadas no arquivo, clique na janela do seu navegador que está aberto e pressione a tecla F5 para atualizar a página. Pronto! Sua página agora tem um texto no corpo dela.
6º) Observe que no editor de texto as palavras estão uma abaixo da outra, mas no navegador elas aparecerem uma ao lado da outra. Isso significa que não adianta usarmos a tecla ENTER para fazer quebra de linha, para isso, vamos utilizar a tag <br> no final de cada palavra.
Veja como ficará:
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
Amor<br>
Sonho<br>
Feliz<br>
Tranquilo<br>
Verdadeiro<br>
Apaixonado<br>
Felicidade<br>
Vida<br>
Silêncio<br>
Futebol<br>
</body>
</html>
7º) Salve as alterações realizadas no arquivo e atualize a página no seu navegador. Pronto! Agora as palavras estão aparecendo normalmente uma abaixo da outra.
Entenda as tags usadas nesta aula:
<html></html> - Define o início e o fim do documento HTML
<head></head> - Define o início e o fim do cabeçalho da página. Deve ser sempre aberto antes da tag <title> e fechado após a tag </title>.
<title></title> - Define o início e o fim do título da página.
<body></body> - Define o início e fim do corpo da página.
<br> - Usado para fazer quebra de linha. Para quebrar mais de uma linha, basta colocar as tags <br> uma ao lado da outra.
Bem pessoal, espero que tenham entendido. Se tiverem dúvidas deixem comentários abaixo deste post. Até a próxima aula...
