|
Aprenda HTML
HTML é a linguagem de marcação padrão para páginas da Web.
Com HTML você pode criar seu próprio site.
HTML é fácil de aprender - você vai gostar!
HTML é a linguagem de marcação padrão para criação de páginas da Web.
O que é HTML?
- HTML significa Linguagem de Marcação de Hipertexto
- HTML é a linguagem de marcação padrão para 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 "este é um título", "este é um parágrafo", "este é um link", etc.
Um documento HTML simples
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Exemplo Explicado
- A
<!DOCTYPE html>declaração define que este documento é um documento HTML5 - O
<html>elemento é o elemento raiz de uma página HTML - O
<head>elemento contém meta informações sobre a página HTML - O
<title>elemento 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
<body>elemento 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
<h1>elemento define um grande título - O
<p>elemento define um parágrafo
O que é um elemento HTML?
Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final:
O elemento HTML é tudo, desde a tag inicial até a tag final:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Observação: alguns elementos HTML não têm conteúdo (como o elemento <br>). Esses elementos são chamados de elementos vazios. Elementos vazios não têm 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:
Observação: o conteúdo dentro da seção <body> será exibido no navegador. O conteúdo dentro do elemento <title> será exibido na barra de título do navegador ou na aba da página.
Histórico do HTML
Desde os primórdios 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 |
Este tutorial segue o padrão HTML5 mais recente.
Editores HTML
Um editor de texto simples é tudo o que você precisa para aprender HTML.
Aprenda HTML usando o Bloco de Notas ou o TextEdit
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 os passos abaixo para criar sua primeira página web com o Bloco de Notas ou o 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 Bloco de Notas .
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 que o aplicativo salve os arquivos corretamente. Em Preferências > Formato > escolha "Texto Simples".
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 inserir o código.
Etapa 2: Escreva algum HTML
Escreva ou copie o seguinte código HTML no Bloco de Notas:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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 como 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; a escolha é sua.
Etapa 4: visualize a página HTML no seu navegador
Abra o arquivo HTML salvo no seu navegador favorito (clique duas vezes no arquivo ou clique com o botão direito e escolha "Abrir com").
O resultado será mais ou menos assim:
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>