Criando Documento HTML5

1. Escolha um Editor de Texto

Para criar documentos HTML, precisamos de um editor de texto. Neste tutorial, utilizaremos o IntelliJ IDEA Community, que possui suporte avançado para HTML. Para facilitar o desenvolvimento, recomendamos instalar os seguintes plugins:

  • HTML Tools: Melhora a edição de arquivos HTML.

  • Emmet: Atalhos para escrever código HTML mais rápido.

  • Lombok Plugin: Útil para quem também trabalha com Java.

Caso prefira outro editor, você pode utilizar alternativas como VS Code, Sublime Text, ou Notepad++.

2. Criar uma Pasta para Organização

  • Vamos criar uma pasta chamada cursoHTML5 na Área de Trabalho para organizar os arquivos do curso.

3. Abrir o IntelliJ IDEA e Criar um Novo Projeto

  • Abra o IntelliJ IDEA, vá até File > New > Project, selecione Empty Project e escolha a pasta cursoHTML5.

4. Estrutura de um Documento HTML5

  • Um documento HTML é formado por tags. A maioria das tags possui uma abertura e um fechamento:

<tag>Conteúdo</tag>

  • A primeira linha do código HTML deve especificar que estamos trabalhando com HTML5:

<!DOCTYPE html>

5. Criar a Estrutura Base do Documento HTML

  • Agora, vamos criar a estrutura principal do documento HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Primeira Página</title>
</head>
<body>
    Olá, mundo!
</body>
</html>

6. Explicação do Código

  • <!DOCTYPE html>: Declara que o documento segue o padrão HTML5.

  • <html lang=”pt-br”>: Define o início do documento e especifica que a linguagem da página é o português do Brasil.

  • <head>: Contém informações sobre a página, como o título e a codificação de caracteres.

  • <meta charset=”UTF-8″>: Define o conjunto de caracteres, evitando problemas com acentos.

  • <title>Primeira Página</title>: Define o título da página.

  • <body>: Contém o conteúdo visível da página, como textos, imagens e links.

7. Salvando o Arquivo

Pressione Ctrl + S para salvar o arquivo. Escolha Salvar como, vá até a pasta cursoHTML5, nomeie como primeira_pagina.html e selecione Hypertext Markup Language (.html).

8. Abrindo o Arquivo no Navegador

Vá até a pasta cursoHTML5, clique com o botão direito no arquivo primeira_pagina.html e selecione Abrir com > Google Chrome.

Se tudo foi feito corretamente, você verá “Olá, mundo!” exibido no navegador.

9. Adicionando um Título e Corrigindo Problemas de Codificação

Se houver problemas com acentos, verifique se a linha <meta charset=”UTF-8″> está presente no <head>. Essa linha garante que os caracteres especiais sejam exibidos corretamente.