A maneira mais simples de aprender HTML 5 – Introdução

  • Categoria: HTML
  • Acessos: 3913
  • Imprimir

Finalmente um curso completo de HTML onde você vai aprender a criar seus próprios sites, é fácil de aprender, é divertido, essencial para quem trabalha na WEB, e você vai adorar as aulas.

Introdução ao HTML

Mas o que é HTML, para que ele serve? HTML é a linguagem de marcação padrão para criar páginas na WEB, todo site que você acessa é renderizado nessa linguagem. O HTML não é exatamente uma linguagem de programação, seu significado é: Hyper Text Markup Laguage (Linguagem de Marcação de HiperTexto). O HTML descreve a estrutura da página usando marcação através de alguns elementos, esses elementos são blocos de construção e são representados por tags. As tags HTML classificam partes do conteúdo como: titulo, parágrafo, tabela, imagem etc. Os navegadores não exibem as tags HTML, mas as usam para renderizar o conteúdo da página, e o que você vê quando acessa um site, é o resultado dessa codificação de tags HTML. Veja um exemplo simples de um documento HTML.

Código HTML Resultado 

    <!DOCTYPE html>
    <html>
      <head>
        <title>Título da página</title>
      </head>
      <body>
        <h1>Meu primeiro título</h1>
        <p>Meu primeiro parágrafo.</p>
      </body>
    </html>

Meu primeiro título

Meu primeiro parágrafo.

Explicando tudo:

  • A <!DOCTYPE html> declaração que define este documento como HTML5;
  • O <html> é o elemento raiz de uma página HTML;
  • O <head> elemento que contém informações destinada ao navegador, como título e/ou arquivos que devem ser incluídos no documento, dentre outros;
  • O <title> elemento que especifica um título para o documento;
  • O <body> elemento contém o conteúdo da página visível, aqui vai tudo que é mostrado na tela;
  • O <h1> elemento define um cabeçalho grande;
  • O <p> elemento define um parágrafo.

Essas são algumas das tags HTML, elas são nomes de elementos entre colchetes angulares. Ex: <nomedatag> conteúdo vai aqui... </nomedatag>

As tags HTML normalmente vêm em pares como <p> e </p> onde a primeira está indicando o início ou abertura e a segunda o fim ou fechamento, a diferença entre elas é a barra (/) que diz para os interpretadores que aquela é o fechamento da tag. Seria mais ou menos como escrever algo entre parênteses () ou colchetes []. 

As tags HTML são interpretadas e renderizadas pelos navegadores da web (chrome, IE, Firefox, Safari etc), isso significa que os navegadores irão ler documentos HTML e exibi-los. O navegador não exibe as tags, mas utiliza para determinar como deve ser exibido o documento.

A baixo está uma visualização da estrutura da página HTML acima:

<!DOCTYPE html>
<html>
<head>
  <title>Título da página</title>
</head>
<body>
  <h1>Meu primeiro título</h1>
  <p>Meu primeiro parágrafo.</p>
</body>
</html>
Obs.: Apenas o conteúdo dentro da seção <body> (área marcada acima) é exibido em um navegador.

A declaração <DOCTYPE html> representa o tipo de documento e ajuda os navegadores a exibir corretamente as páginas web, mas lembre-se, ela deve aparecer apenas uma vez e no topo da página, é a primeira tag a ser escrita.

Apesar de não fazer diferença entre maiúscula ou minúscula, a W3C recomenda, como uso de boas práticas, que essa tag seja escrita em letras maiúsculas: <!DOCTYPE html>. Ao pé da letra, o que você está dizendo para o navegador é: “Esse é um documento HTML5”.

Versões do HTML

 

  • HTML 1991
  • HTML 2.0 1995
  • HTML 3.2 1997
  • HTML 4.01 1999
  • XHTML 2000
  • HTML5 2014

Para começar a escrever tags HTML não é necessário nenhum programa especial, você pode usar o Notepad (PC) ou o TextEdit (Mac). No entanto, eu recomendo um editor não tão simples assim, o <a>Sublime Text</a>. A versão atual é a 3 e você pode baixar gratuitamente em https://www.sublimetext.com/3. O Sublime é um editor de texto que vai melhorar o entendimento das tags HTML, ele diferencia cores de tags, atributos etc, tem suporte a várias linguagens, inclusive HTML5. A codificação HTML se torna muito mais interessante com Sublime, vai por mim.

Depois de baixar e instalar o Sublime, crie seu primeiro documento HTML seguindo os passos abaixo:

  • Passo 1: Abra o Sublime (pode ser o Bloco e Notas se você quiser);
  • Passo 2: Escreva algum código HTML; 
    <!DOCTYPE html>
<html>
<head>
  <title>Título da página</title>
</head>
<body>
  <h1>Meu primeiro título</h1>
  <p>Meu primeiro parágrafo.</p>
  <p>Meu segundo parágrafo.</p>
</body>
</html>
  • Passo 3: Salve o arquivo na sua pasta do projeto, ex. Documentos/Aprendendo HTML5/index.html
    Não se esqueça de salvar o documento com a extensão .html, caso o contrário o navegador não irá interpretar como um documento HTML.
  • Passo 4: Dê 2 cliques no arquivo salvo, ele irá abrir com seu navegador padrão e mostrar seu código renderizado.

PARABÉNS, você criou sua primeira página HTML.

Rogério Rios

Essa foi uma breve introdução a HTML, continue seus estudos e siga para o próximo capítulo. Lembre-se, se tiver alguma dúvida, entre em contato conosco, ou pelo site através do nosso formulário de contato ou pelas nossas redes sociais. Não esqueça de colocar a série, e o capítulo para que nossa equipe tenha mais agilidade ao responder.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.