02 – Introdução ao HTML

<Aula Anterior – Próxima aula>

O que significa HTML

HTML é uma linguagem utilizada para descrever documentos da internet (páginas da internet).

HTML é a abreviatura de Hyper Text Markup Language, ou em uma tradução direta, linguagem de hiper texto com marcadores.
As marcações ocorrem através de textos dentro de sinais de menor (“<“) e maior (“>”) chamados de etiquetas.
Os documentos em HTML são descritos através destas etiquetas e cada etiqueta descreve uma parte do conteúdo.
O Arquivo HTML nada mais é do que um arquivo de texto simples, podendo ser editado com o notepad do windows ou text edit do mac..

Como funcionam as etiquetas

As etiquetas são palavras chave dentro de colchetes, ex..

<NOME>conteúdo</NOME>
  • As etiquetas geralmente vem em pares, por exemplo <p> </p>;
  • A primeira etiqueta se chama etiqueta de abertura, e a segunda, etiqueta de fechamento;
  • A etiqueta de fechamento é escrita como a etiqueta de abertura, mas com uma barra antes de seu nome.

Assim, com diversas etiquetas criamos o documento HTML, conforme o exemplo abaixo.

Exemplo de Código HTML

<!DOCTYPE html>
    <html>
    <head>
    	<title>Título da página</title>
    </head>
    <body>
        <h1>Isso é um cabeçalho</h1>
        <p>Isso é um paragrafo.</p>
    </body>
</html>

Explicando o exemplo

  • A etiqueta DOCTYPE define que o documento é HTML
  • O texto entre as etiquetas <html> e </html> descreve o conteúdo de uma página html
  • O texto entre as etiquetas <head> e </head> informa detalhes sobre o documento
  • O texto entre as etiquetas <title> e </title> define o título do documento
  • O texto entre as etiquetas <body> e </body> descreve a parte visível da página
  • O texto entre as etiquetas <h1> </h1> descreve um cabeçalho
  • O texto entre as etiquetas <p> e </p> descreve um paragrafo

Com esta descrição, um navegador exibirá uma página com cabeçalho e um paragrafo.


Navegadores

A finalidade de um navegador (Chrome, IE, Firefox, Safari, Opera) é processar os documentos HTML e exibi-los.
Lembrando que as tags HTML não serão exibidas, mas sim seu conteúdo. Na imagem abaixo mostra como o exemplo acima seria exibido por um navegador.

Como funciona a estrutura do HTML

Segue uma visualização de como o navegador processa uma página HTML.

O título da página aparece na barra do navegador;
Somente o que está dentro das etiquetas “body” é exibido, ou seja, somente o que está em branco na imagem acima;
É comum para os iniciantes terem erros em suas páginas por não fechar as etiquetas, por isso sempre confira se todas as suas etiquetas foram fechadas.

O que é o <!doctype>

Como existem diversos tipos de documento HTML na internet, a etiqueta <!doctype> informa ao navegador o tipo de documento e assim ele mostra a página corretamente.
Para a sorte de todos, para esta declaração é indiferente se usar caixa alta ou baixa, então assim sendo você pode digitar como os exemplos abaixo e todos serão interpretados do mesmo modo pelo navegador.

<!DOCTYPE HTML>
<!doctype html>
<!doctype HTML>
<!Doctype Html>

Versões do HTML

HTML 5

<!doctype HTML>

HTML 4.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Versões

Desde os primórdios da internet, o HTML teve diversas versões, a tabela abaixo mostra as principais e seu ano de implementação:

VersãoAno
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.11999
XHTML2000
HTML 52014