HTML comandos básicos

Primeira semana de estudos de HTML e CSS. Vamos abordar: Preparação para escrever o código - como baixar o vs code , usar o live server Estrutura do HTML Títulos, parágrafos, listas Imagens e links Criar uma página simples

Miguel

3/26/20264 min read

Semana 1 — HTML

Começando do Zero: Estrutura, Comandos Básicos e Sua Primeira Página Web

Criar sua primeira página na web é quase como abrir a porta de um novo mundo. É simples, acessível e, ao mesmo tempo, poderoso. HTML é a base de tudo — e entender essa base muda completamente a forma como você enxerga a internet. Nesta primeira semana, vamos construir juntos o alicerce que sustenta qualquer site: a estrutura, os comandos essenciais e a prática real de montar sua primeira página.

Introdução: Por que começar pelo HTML?

Se você está entrando no universo da programação, especialmente no desenvolvimento web, o HTML é o ponto de partida natural. Ele não é uma linguagem de programação, mas sim uma linguagem de marcação — e é ela que diz ao navegador o que deve ser exibido na tela.

É como montar uma casa: antes de pensar na decoração (CSS) ou na automação (JavaScript), você precisa das paredes, portas e janelas. O HTML é essa estrutura.

E o melhor: você não precisa de nada complexo para começar. Só um editor de código, um navegador e vontade de aprender.

Preparação para escrever o código

Instalando o VS Code e configurando o ambiente

Antes de escrever qualquer linha de HTML, vamos preparar seu ambiente de trabalho. Isso faz toda a diferença para aprender com fluidez.

1. Baixando o VS Code

O Visual Studio Code é um dos editores mais usados no mundo — leve, rápido e cheio de extensões úteis.

Acesse o site oficial, clicando aqui.
Baixe a versão para o seu sistema operacional
Instale normalmente

2. Instalando a extensão Live Server

O Live Server permite visualizar sua página atualizando automaticamente a cada alteração. É como ver seu site “ganhar vida”.

Passo a passo:

Abra o VS Code
Vá em Extensions
Pesquise por Live Server
Clique em Install

Depois disso, basta clicar com o botão direito no seu arquivo HTML e selecionar Open with Live Server.

Como podem ver na imagem o Live Server já está instalado e uso também o Drakula, me ajuda bastante a programar com suas cores.

Estrutura do HTML

Entendendo o esqueleto de uma página

Todo arquivo HTML começa com uma estrutura básica. Pense nisso como o DNA da sua página.

<!DOCTYPE html>

<html>

<head>

<title>Minha Primeira Página</title>

</head>

<body>

</body>

</html>

O que cada parte significa

— diz ao navegador que estamos usando HTML5
— envolve todo o conteúdo
— configurações, título, metadados
— tudo o que aparece na tela

Essa estrutura nunca muda. É o ponto de partida para qualquer projeto.

Sempre escrevo o código assim de um lado o VS CODE e do outro o navegador com LIVE SERVER

Títulos, parágrafos e listas

Organizando o conteúdo da sua página

Agora que você já tem a estrutura, vamos começar a colocar conteúdo.

Títulos

Os títulos vão de <h1> a <h6>, sendo <h1> o mais importante.

<h1>Bem-vindo ao meu site</h1> <h2>Subtítulo da página</h2>

Parágrafos

Para textos comuns, usamos <p>:

<p>Esse é o meu primeiro parágrafo em HTML.</p>

Listas

Existem dois tipos principais:

Listas ordenadas (numeradas)

<ol>

<li>Primeiro item</li>

<li>Segundo item</li>

</ol>

Listas não ordenadas (com bolinhas)

<ul>

</ul>

Esses elementos são essenciais para organizar qualquer conteúdo.

Imagens e links

Deixando sua página mais visual e navegável

Imagens

Para inserir uma imagem:

src: caminho da imagem
alt: descrição para acessibilidade e SEO

Links

Links são criados com <a>:

<a href="https://google.com">Ir para o Google</a>

Você também pode criar links internos, como navegar entre páginas do seu próprio site.

Criando sua primeira página completa

Exemplo prático

Aqui está um exemplo de página simples usando tudo o que aprendemos:

Basta clicar aqui que deixei um código HTML para download. O arquivo está em .TXT, basta colar no seu editor de códigos.

Insights importantes para iniciantes

HTML é simples, mas extremamente poderoso
Você não precisa decorar tudo — só entender a lógica
A prática é o que realmente faz você evoluir
Começar pequeno é melhor do que tentar criar algo gigante de primeira
O Live Server acelera muito o aprendizado.

Conclusão: Você acabou de dar o primeiro passo

Se você chegou até aqui, parabéns. De verdade.
A maioria das pessoas trava antes mesmo de abrir o editor de código. Você não só abriu — como escreveu, estruturou e entendeu a base da web.

A partir daqui, tudo fica mais interessante: estilização, interatividade, projetos reais.

E essa foi só a Semana 1.

Se quiser continuar evoluindo comigo, acompanhe as próximas semanas e se inscreva na newsletter do blog. Vamos construir sua jornada na TI passo a passo, de forma prática e real.

Acesse todo conteúdo do curso aqui.