Deblogger

Criando uma página HTML

Nesse artigo vamos aprender a criar uma página HTML simples. Então, para começar, precisamos de um editor de texto para criar e editar o código. É possível escrever uma página inteira usando apenas o Bloco de Notas do Windows, por exemplo. No entanto, usar editores de texto como o Word, WordPad ou Bloco de Notas para desenvolvimento não é viável, já que essas ferramentas não foram projetadas para funcionar como um editor de códigos. Um editor HTML conta com diversos recursos para auxiliar na construção de um documento, como:

  • Destaque de sintaxe:
    Usa cores para indicar o papel de cada elemento no HTML;
  • Notificação de erros:
    Indica visualmente erros na escrita do código HTML;
  • Completador automático
    Completa e fecha tags HTML, além de sugerir atributos para os elementos;

Por isso, não faltam de editores de códigos e HTML gratuitos – existem alternativas para todos os gostos. Eu uso o editor Visual Studio Code. Se você quiser usá-lo: clique aqui para baixar o Visual Studio Code. Mesmo que você não queira usar essa IDE, existem editores bem semelhantes, sendo assim, vou deixar outras opções:

Estrutura básica

Para criar sua primeira página e iniciar o entendimento de HTML, vou demonstrar qual a estrutura básica do padrão HTML5. Os códigos HTML são escrito por meio de tags, que são comandos escritos dentro dos sinais < e >. Embora existam exceções, a maioria das tags que são abertas precisam ser fechadas, por meio dos mesmos sinais < e >, acrescido da barra /. Sendo assim, existem duas estruturas de tags: <tag> </tag> e <tag/>. Veremos exemplos no decorrer deste tutorial.

A seguir temos um exemplo clássico de uma página HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" lang="pt-br"/>
        <title> Olá Mundo </title>
    </head>
    <body>
         <h1> Olá Mundo! </h1>
    </body>
</html>

No Visual Studio, clique em File > New File, ou simplesmente use a tecla de atalho Ctrl + N para abrir um novo arquivo.

Como criar um novo arquivo pelo Visual Studio Code
Como criar um novo arquivo pelo Visual Studio Code

Em seguida, cole o conteúdo do exemplo use as teclas de atalho Ctrl + S para salvar o arquivo (essa é a tecla de atalho que vai ser sua aliada daqui pra frente, nunca esqueça de usá-la!).

Exemplo de página HTML no Visual Studio Code
Exemplo de como ficará o arquivo

Ao salvar o arquivo, lembre-se de modificar o tipo para HTML:

Salvando um arquivo como uma página HTML
Salvando o arquivo como uma página HTML

Depois de salvar o arquivo, acesse a pasta onde ele foi salvo, e você perceberá que o ícone do arquivo será o ícone do seu navegador padrão. Isso porque o sistema operacional já identificou que aquele arquivo é referente a uma página da web. Ao abrir, será mostrada uma página como esta:

Demonstração da página HTML criada
Demonstração da página HTML criada.

Mas o que esse código significa?

<!DOCTYPE html>;

A instrução !DOCTYPE  deve ser sempre a primeira a aparecer em uma página HTML e indica para o browser qual versão da linguagem está sendo usada. Nesse caso, estamos trabalhando com a HTML5, versão na qual a declaração do DOCTYPE é bastante simples, como podemos ver na listagem;

  • <html> e </html>;

Abertura e fechamento da tag <html> , que informa ao browser que esse é um documento HTML. Todo o código deve ser escritos dentro dessa tag.

<head> e </head>;

A tag <head>  define o cabeçalho do documento. O conteúdo nesse espaço não é visível no browser, mas contém instruções sobre seu conteúdo e comportamento. Temos, por exemplo, dentro dessa tag no exemplo duas outras tags:

  1. <meta charset="UTF-8"/>
  2. <meta lang="pt-br"/>

A tag <meta> define metadados sobre um documento HTML. Metadados são dados (informações) sobre dados. As tags sempre ficam dentro do elemento <head> e geralmente são usadas para especificar conjunto de caracteres, descrição da página, palavras-chave, autor do documento e configurações da janela de visualização.

Os metadados não serão exibidos na página, mas podem ser analisados ​​por máquina. Os metadados são usados ​​por navegadores (para exibir conteúdo ou recarregar página), mecanismos de pesquisa (palavras-chave) e outros serviços da web

<title> e </title>

A tag <title> é necessária em todos os documentos HTML e define o título do documento. O conteúdo do título da página é muito importante para a otimização de mecanismos de busca (SEO). O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar páginas nos resultados da pesquisa. Funções:

  • Define um título na barra de ferramentas do navegador;
  • Fornece um título para a página quando ela é adicionada aos favoritos;
  • Exibe um título para a página nos resultados do mecanismo de pesquisa;
<body> e </body>

A tag <body> , especifica o “corpo” da página, isto é, marca o espaço no qual deve estar contido o conteúdo visual da página. As demais tags que representam texto, botões, etc. devem ser adicionadas nesse intervalo.

<h1> e </h1>

Esse é um exemplo de tag de título. No próximo artigo serão apresentados mais tags de títulos do HTML.


Conclusão

Espero que este artigo tenha te ajudado nos primeiro passos para criar uma página HTML. É claro que muito ainda precisa ser aprendido, além do que foi citado acima, para realmente conseguir fazer um site. Aproveite para seguir nessa série de artigos e aprender um pouco mais sobre como funciona a linguagem base da internet!



Avalie:
5 (1)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Participe da discussão

1 comentário

  1. Primero tutorial maravilhoso de como usar o html, eu amei msm parabéns, me ajudou bastante, Deus abençoe…

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *