Introdução ao HTML
HTML é a linguagem de marcação padrão para criar páginas da web.
O que é HTML?
HTML significa Hyper Text Markup Language
HTML é a linguagem de marcação padrão para a criação de páginas da web
HTML descreve a estrutura de uma página da web
HTML consiste em uma série de elementos
Os elementos HTML informam ao navegador como exibir o conteúdo
Os elementos HTML rotulam partes de conteúdo como "isto é um título", "isto é um
parágrafo", "isto é um link", etc.
Um Documento HTML Simples
Exemplo:
Exemplo Explicado
A declaração <!DOCTYPE html> define que este documento é um documento
HTML5
O elemento <html> é o elemento raiz de uma página HTML
O elemento <head> contém meta informações sobre a página HTML
O elemento <title> especifica um título para a página HTML (que é mostrado na
barra de título do navegador ou na guia da página)
O elemento <body> define o corpo do documento e é um contêiner para todo o
conteúdo visível, como títulos, parágrafos, imagens, hiperlinks, tabelas, listas,
etc.
O elemento <h1> define um grande título
O elemento <p> define um parágrafo
O que é um elemento HTML?
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final:
<tagname> O conteúdo vai aqui … </tagname>
O elemento HTML é tudo, desde a tag inicial até a tag final:
<h1> Meu primeiro título </h1>
<p> Meu primeiro parágrafo. </p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nota: alguns elementos HTML não têm conteúdo (como o elemento <br>). Esses
elementos são chamados de elementos vazios. Os elementos vazios não possuem
uma tag final!
Navegadores da web
O objetivo de um navegador da web (Chrome, Edge, Firefox, Safari) é ler
documentos HTML e exibi-los corretamente.
Um navegador não exibe as tags HTML, mas as usa para determinar como exibir o
documento:
Estrutura da página HTML
Abaixo está uma visualização da estrutura de uma página HTML:
Nota: Apenas o conteúdo dentro da seção <body> (a área branca acima) será
exibido em um navegador.
História HTML
Desde os primeiros dias da World Wide Web, houve muitas versões de HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Editores HTML
Um editor de texto simples é tudo que você precisa para aprender HTML.
Aprenda HTML usando o Notepad ou TextEdit
As páginas da Web podem ser criadas e modificadas usando editores HTML
profissionais.
No entanto, para aprender HTML, recomendamos um editor de texto simples como o
Notepad (PC) ou o TextEdit (Mac).
Acreditamos que usar um editor de texto simples é uma boa maneira de aprender
HTML.
Siga as etapas abaixo para criar sua primeira página da web com o Notepad ou
TextEdit.
Etapa 1: Abra o Bloco de Notas (PC)
Windows 8 ou posterior:
Abra a tela inicial (o símbolo da janela no canto inferior esquerdo da tela). Digite
Notepad .
Windows 7 ou anterior:
Abra Iniciar > Programas > Acessórios > Bloco de notas
Etapa 1: Abra o TextEdit (Mac)
Abra Finder > Aplicativos > TextEdit
Altere também algumas preferências para fazer com que o aplicativo salve os
arquivos corretamente. Em Preferências> Formato> escolha "Texto Simples"
Em seguida, em "Abrir e salvar", marque a caixa que diz "Exibir arquivos HTML
como código HTML em vez de texto formatado".
Em seguida, abra um novo documento para colocar o código.
Etapa 2: Escreva algum HTML
Escreva ou copie o seguinte código HTML no Bloco de notas:
Etapa 3: Salve a página HTML
Salve o arquivo no seu computador. Selecione Arquivo> Salvar como no menu do
Bloco de notas.
Nomeie o arquivo "index.htm" e defina a codificação para UTF-8 (que é a codificação
preferida para arquivos HTML).
Dica: Você pode usar .htm ou .html como extensão de arquivo. Não há diferença, é
com você.
Etapa 4: Visualize a página HTML em seu navegador
Abra o arquivo HTML salvo em seu navegador favorito (clique duas vezes no arquivo
ou clique com o botão direito do mouse - e escolha "Abrir com").
O resultado será parecido com este:
Editor online da W3Schools
Com nosso editor online gratuito, você pode editar o código HTML e visualizar o
resultado em seu navegador.
É a ferramenta perfeita quando você deseja testar o código rapidamente. Ele
também possui um código de cores e a capacidade de salvar e compartilhar códigos
com outras pessoas:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
Exemplo
Exemplos básicos de HTML
Neste capítulo, mostraremos alguns exemplos básicos de HTML.
Não se preocupe se usarmos tags que você ainda não conhece.
Documentos HTML
Todos os documentos HTML deve começar com uma declaração do tipo de
documento: <!DOCTYPE html>.
O próprio documento HTML começa <html> e termina com </html>.
A parte visível do documento HTML está entre <body> e </body>.
Exemplo
A declaração <! DOCTYPE>
A declaração <!DOCTYPE> representa o tipo de documento e ajuda os navegadores
a exibir as páginas da web corretamente.
Deve aparecer apenas uma vez, no topo da página (antes de quaisquer tags HTML).
A declaração <!DOCTYPE> não diferencia maiúsculas de minúsculas.
A declaração <!DOCTYPE> para HTML5 é:
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags <h1>para <h6>.
<h1>define o título mais importante. <h6>define o título menos importante:
Exemplo:
Parágrafos HTML
Os parágrafos HTML são definidos com a <p> tag:
Exemplo:
Links HTML
Os links HTML são definidos com a <a> tag:
Exemplo:
O destino do link é especificado no atributo href.
Os atributos são usados para fornecer informações adicionais sobre os elementos
HTML.
Você aprenderá mais sobre atributos em um capítulo posterior.
Imagens HTML
As imagens HTML são definidas com a tag <img>.
O arquivo de origem (src), o texto alternativo (alt), width e height são fornecidos
como atributos:
Exemplo:
Como visualizar o código-fonte HTML?
Você já viu uma página da Web e se perguntou "Ei! Como eles fizeram isso?"
Ver código-fonte HTML:
Clique com o botão direito em uma página HTML e selecione "Exibir código-fonte"
(no Chrome) ou "Exibir código-fonte" (no Edge) ou algo semelhante em outros
navegadores. Isso abrirá uma janela contendo o código-fonte HTML da página.
Inspecione um elemento HTML:
Clique com o botão direito em um elemento (ou em uma área em branco) e escolha
"Inspecionar" ou "Inspecionar Elemento" para ver de que elementos são compostos
(você verá o HTML e o CSS). Você também pode editar o HTML ou CSS
rapidamente no painel Elementos ou Estilos que é aberto.
Elementos HTML
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final.
Elementos HTML
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final:
<tagname> O conteúdo vai aqui ... </tagname>
O elemento HTML é tudo, desde a tag inicial até a tag final:
<h1> Meu primeiro título </h1>
<p> Meu primeiro parágrafo. </p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nota: alguns elementos HTML não têm conteúdo (como o elemento <br>). Esses
elementos são chamados de elementos vazios. Os elementos vazios não possuem
uma tag final!
Elementos HTML aninhados
Os elementos HTML podem ser aninhados (isso significa que os elementos podem
conter outros elementos).
Todos os documentos HTML consistem em elementos HTML aninhados.
O exemplo que se segue contém quatro elementos HTML
(<html>, <body>, <h1> e <p>).
Exemplo:
Exemplo Explicado
O elemento <html> é o elemento raiz e define todo o documento HTML.
Possui uma tag de início <html>e uma tag de fim </html>.
Então, dentro do <html>elemento, há um <body> elemento:
O elemento <body> define o corpo do documento.
Possui uma tag de início <body>e uma tag de fim </body>.
Então, dentro do <body>elemento, existem dois outros elementos: <h1>e <p>:
O elemento <h1> define um título.
Ele tem uma tag de início <h1>e uma tag de fim </h1>:
O elemento <p> define um parágrafo.
Ele tem uma tag de início <p>e uma tag de fim </p>:
Nunca ignore a tag final
Alguns elementos HTML serão exibidos corretamente, mesmo se você esquecer a
tag final.
Exemplo:
No entanto, nunca confie nisso! Resultados inesperados e erros podem ocorrer se
você esquecer a tag final!
Elementos HTML vazios
Os elementos HTML sem conteúdo são chamados de elementos vazios.
A tag <br> define uma quebra de linha e é um elemento vazio sem uma tag de
fechamento.
Exemplo:
HTML não diferencia maiúsculas de minúsculas
As tags HTML não diferenciam maiúsculas de minúsculas: <P>significa o mesmo
que <p>.
O padrão HTML não requer tags em minúsculas, mas o W3C recomenda minúsculas
em HTML e exige minúsculas para tipos de documentos mais restritos, como
XHTML.
Na W3Schools, sempre usamos nomes de tags em minúsculas.
Referência de tag HTML
A referência de tag W3Schools contém informações adicionais sobre essas tags e
seus atributos.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
Para obter uma lista completa de todas as tags HTML disponíveis, visite
nossa Referência de tags HTML.
