Escrevendo o Código HTML

Para escrever o código html vamos precisar de um editor de texto puro. Existem vários editores de texto, pagos e gratuitos, vamos usar o Sublime Text, que pode ser baixado gratuitamente no site www.sublimetext.com.

Crie um arquivo novo pressionando as teclas Ctrl + N ou clicando em File / New File.

Grave o arquivo numa pasta única para cada projeto, pressionando as teclas Ctrl + S ou clicando em File / Save.

Nomeie o arquivo como index.html, esse será o arquivo principal, o primeiro que o navegador vai abrir, por convenção, deve ser nomeado de index.html.

Os outros arquivos do seu projeto, se tiverem mais de um nome, para serem melhor indexados pelos motores de busca, devem ser nomeados com dash-case, ou seja, todas as letras minúsculas, sem acentos ou caracteres especiais, sem espaços e com um hífen (-) separando as palavras.

No arquivo em branco digite html e pressione a tecla Enter, o Sublime Text já preenche o arquivo com uma estrutura html básica.

Escreva o atributo lang com o valor pt-br dentro da tag de abertura html. Escreva um título para a barra de título do navegador com a tag title, essa tag também é usada pelos motores de busca. Dentro da tag body, abra e feche a tag p de parágrafo e dentro dela escreva: Testando Parágrafo.

O arquivo ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Título da Página</title>
    </head>
    <body>
        <p>Testando Parágrafo</p>
    </body>
</html>

Abra o arquivo index.html num navegador, vamos usar o Google Chrome nos exemplos, o resultado no navegador será o seguinte:

O navegador não exibiu corretamente os acentos porque a codificação de caracteres padrão do navegador é o ISO-8859-1 e para exibir corretamente os acentos e caracteres do português brasileiro, devemos explicitar para o navegador a codificação de caracteres UTF-8, para isso usamos a tag meta dentro da tag head, com o atributo charset e o valor utf-8.

O arquivo ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Título da Página</title>
    </head>
    <body>
        <p>Testando Parágrafo</p>
    </body>
</html>

Salve o arquivo e o abra novamente no navegador e agora já será exibido os acentos corretamente:

<< Anterior Próxima >>