Facebook Instagram Youtube Twitter Pinterest Linkedin Github
Agendar Call

HTML Básico – Primeiros Passos

Início » HTML Básico – Primeiros Passos

Introdução ao HTML5
Essa é a parte 2 de 16 na série HTML

HTML

No post anterior, fiz uma breve introdução ao HTML para que você conhecesse um pouco do conceito e da história dessa linguagem de marcação que é o padrão da web.

Nesse conteúdo, vamos já ir para os primeiros passos e ver como é uma estrutura básica de um documento HTML.

Eu poderia ser bem simplista aqui e dizer que o HTML seria um arquivo de texto, só que salvo com uma extensão .html ou .html.

Se você é muito iniciante, devo dizer que extensão é o sufixo no nome de um arquivo de computador que indica a codificação do seu conteúdo ou uso.

Basicamente, eles servem para identificar o tipo de arquivo, e alguns exemplos comuns incluem .png, .jpeg, .exe, .dmg, .txt, .rar, .iso e .doc.

Sobre a questão de criar arquivos HTML, devo dizer que comecei escrevendo os códigos em folha de caderno, em seguida, passava para um bloco de notas e, por fim, abria-o em um navegador.

Na época que eu comecei era realmente bem simples e usava os navegadores Internet Explorer ou um que se chamava Netscape.

Hoje em dia, você tem editores de código, dos mais simples aos mais complexos, que dão suporte ao desenvolvedor facilitando a codificação.

Você pode usar o próprio blocos de notas do seu sistema operacional, bastando salvar o arquivo como .html ou .htm, em seguida, poderá abrí-lo também no seu navegador favorito.

Se quiser um pouco mais de recursos, pode usar o editor Notepad++ ou o Visual Studio Code.

Muito bem, vamos começar?

Iniciando com o HTML

Nesse segundo post do Curso de HTML, vamos já aprender a criar um documento HTML ou também podemos chamar de página web, se preferir.

Espero que você já tenha se decidido sobre onde vai editar os códigos e já tenha atualizado seu navegador, preferencialmente.

Então, vamos começar abrindo um editor de texto ou de código para criar um novo arquivo em nosso computador.

Ah! Sobre editor de texto, se não quiser instalar nada, use o bloco de notas do Windows ou o TextEdit do Mac, mas não use Word ou Wordpad.

Você vai acompanhar os próximos passos fazendo junto e, no final, terá criado um arquivo HTML que vai exibir a clássica frase da programação “Olá mundo!”.

Chega de papo, vamos codificar…

Abra um documento novo e digite o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Um Simples Documento HTML</title>
</head>
<body>
    <p>Olá mundo!<p>
</body>
</html>

Agora você vai salvar esse arquivo em uma pasta qualquer – recomendo que crie uma pasta para o curso – nomeando esse arquivo de “minha-pagina-01.html”.

Vale dizer que, se você estiver usando o bloco de notas, verifique se em tipo está selecionado “Todos os arquivos”, pois precisamos salvar esse arquivo com a extensão “.html”.

O padrão do bloco de notas é salvar como “.txt”, então, se acontecer, caso não tenha marcado o tipo “todos os arquivos”, poderá salvar novamente (Salvar como) ou, simplesmente renomear o arquivo com a extensão.

Outro detalhe, se você não estiver vendo as extensões dos arquivos na sua pasta, precisará fazer essa pequena configuração:

Windows Explorer > Seu Diretório do Curso > Arquivo > Opções.

E desmarcar a opção que oculta as extensões aqui:

Agora que você salvou seu primeiro arquivo simples HTML, pode abri-lo em um navegador dando duplo clique ou, no navegador usando o atalho “Ctrl+O” (Open) e selecionado-o.

Agora vamos ver alguns detalhes.

Explicando o Código HTML

Mesmo sendo bem simples, se você é um completo iniciante, talvez não tenha entendido nada ou talvez traduzido algumas tags já que estão em inglês.

  1. A primeira linha tem o <!DOCTYPE html> que é a declaração do tipo de documento (vamos falar mais sobre isso depois). Basicamente, essa linha informa ao navegador que se trata de um documento HTML;
  2. Na próxima temos a abertura da tag html com a indicação do idioma <html lang="pt-br">;
  3. Em seguida temos o <head> que é a cabeça, ou que chamamos de “container” onde fornecemos informações sobre o documento, como o título através da tag <title>;
  4. Na sequência temos o corpo representado pela tag <body> do documento que é o conteúdo a ser mostrado na tela. É nele que vamos incluir todo conteúdo e que será renderizado pelo navegador.

Não se preocupe, vamos conhecer diferentes elementos e tags HTML, esse foi apenas um documento com uma estrutura básica.

Um detalhe importante é que, mesmo não aparecendo no corpo da página o conteúdo da tag de título <title></title>, esse título vai aparecer lá em cima na janela do navegador.

Observação: uma declaração DOCTYPE aparece na parte superior de uma página da web antes de todos os outros elementos; entretanto, a declaração doctype em si não é uma tag HTML. Cada documento HTML requer uma declaração de tipo de documento para garantir que suas páginas sejam exibidas corretamente.

Tags e elementos HTML

Você está começando a conhecer os elementos que consistem em tags de marcação.

Essas tags são fundamentais no HTML para que sejam definidos os tipos de conteúdo que o navegador deve renderizar.

Como vimos, essas tags são cercadas por sinais de menor e maior, tais como <html>, <head>, <title>, <body>, entre outras.

Além disso, é importante dizer que as tags HTML normalmente vêm em pares <body> e </body>, sendo a primeira o que chamamos de tag de abertura e a outra seria a tag de fechamento.

Basicamente o que distingue uma da outra é a barra “/” após o sinal de menor que é colocado nas tags de fechamento, justamente para informar que aquele elemento foi concluído.

Por exemplo, poderíamos incluir um parágrafo, representado por um tag com a letra “p” em nosso documento, dessa forma:

<p>Isso é um parágrafo.</p>
<!-- Isso é um comentário que podemos fazer no HTML
       para passar algumas informações -->
<p>
    Isso é <b>outro</b> parágrafo.
</p>

A tag <b> representa Bold (negrito)!

O que tá achando até aqui?

Deixe um comentário ou dúvida abaixo e, no próximo post, vamos conhecer mais elementos HTML.

Navegação<< HTML Básico – IntroduçãoHTML Básico – Elementos >>

Comments are closed.

Table of Contents

Shopping Basket