Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

Editores de HTML


Um editor de texto simples é tudo que você precisa para aprender HTML.


Aprenda HTML usando o Bloco de Notas ou TextEdit

As páginas da Web podem ser criadas e modificadas usando editores profissionais de HTML.

No entanto, para aprender HTML, recomendamos um editor de texto simples como o Bloco de Notas (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 Bloco de Notas ou o TextEdit.


Passo 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


Passo 1: Abra o TextEdit (Mac)

Abra o 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 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 um pouco de 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>

Bloco de anotações



Etapa 3: salve a página HTML

Salve o arquivo em 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).

Ver no navegador

Dica: Você pode usar .htm ou .html como extensão de arquivo. Não há diferença, depende de 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á muito parecido com isso:

Ver no navegador


Editor online do W3Schools - "Experimente você mesmo"

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 codificação por cores e a capacidade de salvar e compartilhar código com outras pessoas:

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>

Clique no botão "Experimente você mesmo" para ver como funciona.


Espaços W3Schools

Se você deseja criar seu próprio site e salvar seu código online, experimente nosso construtor de sites gratuito , chamado W3schools Spaces :