Curso Básico de Criação de Sites

Do Zero ao Site no Ar

MÓDULO 2

HTML do básico ao intermediário

O que significa HTML? – Esta sigla vem o inglês HyperText Markup Language que, traduzindo seria Linguagem de Marcação de Hipertextos. Estas marcações no texto é o que denominaremos como TAGS (importando do original inglês).

Preparação Básica de Conhecimento

1 – Estrutura – Entende-se por ESTRUTURA a forma de dispor o conteúdo do programa, as linhas que compõem os blocos, etc; enfim, devemos seguir um padrão já estabelecido e aprovado para facilitar nosso trabalho e deixar tudo bonito e organizado. Pode parecer mais uma complicação, mas não é – pelo contrário – com o hábito você perceberá que não poderia ser diferente – e agradece!.

– Estrutura básica de uma página HTML (importante!) – Quem é programador nesta área sabe da importância em se manter a coerência, organização, visibilidade, etc… Nesta programação, embora sua simplicidade, não dispensa estes cuidados. Por isto, a criação da estrutura básica necessária. Nada complicado, tudo muito simples…

2. – Tags – O que são tags? (Marcas)

Tags HTML são marcadores que estruturam e formatam o conteúdo de uma página da web, indicando ao navegador como exibir títulos, parágrafos, imagens e links. Elas geralmente vêm em pares de abertura (como <p>) e fechamento (como </p>), escritas entre sinais de menor e maior (< >), embora algumas não precisem de fechamento. 
 Simplificando: significa assim – você determina um SINAL (Tag) para informar ao NAVEGADOR que, a partir deste ponto (onde você colocou o sinal) o procedimento é TAL (dependo do sinal) e vai finalizar quando ele (NAVEGADOR) encontrar o mesmo SINAL de fechamento.
 Exemplo: <p> a partir daqui tudo será entendido como PARÁGRAFO, até encontrar o mesmo sinal de fechamento </p>

– Tags principais: headings, parágrafos, listas, links, imagens, tabelas – São as personalidades que compõem a estrutura dita acima.

– Formulários simples (nome, e-mail, mensagem) – Mais uma personalidade com finalidade bem específica…

– Semântica(*) HTML5 (header, nav, main, section, article, footer) – Mais personagens neste grande palco que iremos usar.

(*)Estrutura Semântica: – A estrutura semântica do HTML5 usa tags que descrevem o significado do conteúdo, em vez de apenas apresentar a informação. 

Elementos como <header>, <footer>, <nav>, <main> e <article>
  são semânticos porque indicam o propósito de sua seção, melhorando a acessibilidade para leitores de tela e a otimização para mecanismos de busca (SEO). Em vez de usar apenas tags genéricas como <div>, a abordagem semântica organiza o código de forma clara e legível.  

– Exercícios práticos: montar currículo, cardápio de restaurante, landing page simples – Exercícios que servirão para fixar definitivamente o conteúdo estudado.

TEORIA:

────────────────────────

“Boa noite, meus futuros web designers!.
 Hoje é o dia que o site de vocês NASCE de verdade.
 Vamos criar o primeiro arquivo HTML do zero.
 E eu prometo: se você souber salvar um arquivo de Word, você vai conseguir fazer isso aqui.”

1 – O que vamos fazer hoje

• Criar a pasta do projeto 
• Criar o primeiro arquivo index.html 
• Entender as tags mais importantes 
• Fazer 4 mini-projetos reais (currículo, cardápio, landing page e portfólio simples) 
• E no final da aula você já vai ter um site com várias páginas funcionando!.

PARTE 1 – Criando a casa do site

Primeira coisa: vamos criar a pasta onde o site vai morar.

1. Abre o seu computador 
2. Crie uma PASTA; Clica com botão direito na Área de Trabalho → Novo → Pasta 
3. Nomeia a pasta: Coloca o nome: meu-primeiro-site 
4. Abre essa pasta (clique duplo sobre a pasta) → botão direito → Novo → Documento de Texto 
5. Apaga o nome todo e escreve: index.html (o .html é importante!) – index.html vai ser o nome do seu arquivo, onde estará o SCRIPT do seu programa.  
6. Quando o Windows perguntar ‘quer mesmo mudar a extensão?’, fala SIM.

Pronto!- Acabou de nascer o seu primeiro site.

Agora abre esse arquivo com o VSCode (duplo clique – para abrir – ou arrasta pra dentro do VSCode).

 Ver o vídeo (curso – video 1a + audio)

”PARTE 2 – A estrutura MÁGICA que todo site tem.

“Todo site do planeta Terra tem essa estrutura básica.
 É como se fosse o esqueleto humano. Se tirar, a pessoa desmonta.Copie exatamente isso que eu vou colar agora:”

Observação: Pode copiar e colar se preferir. Porém, se já começar a escrever cada linha, já vai se acostumando…

<!DOCTYPE html>

<html lang=”pt-BR”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Título que aparece na aba do navegador</title>

</head>

<body>

    <!– Aqui dentro vai todo o conteúdo que a pessoa vê –>

    <h1>Olá, mundo!</h1>

    <p>Meu primeiro site feito com o Prof. Luiz Pimentel!</p>

</body>

</html>

Lembrando:

<html>…</html> — TAGS iniciais de abertura e fechamento da SEÇÃO de programação em HTML.

<head>… </head> – São TAGS. Significam CABEÇA (cabeçalho) e aparecem sempre em dupla –  a primeira abre a SEÇÃO e a segunda fecha a SEÇÃO.

<body>… </body> — TAGS que significam CORPO. A dupla funciona igual à anterior: a primeira abre e a segunda fecha a SEÇÃO.

Estas TAGS (MARCAS) compõem a ESTRUTURA BÁSICA de uma SEÇÃO em HTML.

“Explicando linha por linha (com paciência e carinho de avô):

• <!DOCTYPE html> → é o RG do site, fala pro navegador “oi, sou HTML5 moderno” 
• <html lang=”pt-BR”> → fala que o site é em português brasileiro 
• <head> → é a cabeça (coisas que ninguém vê, mas são importantes – ou seja: tudo que está nesta parte do programa é informação expressa para o NAVEGADOR) 
• <title> → é o que aparece na aba do navegador e no Google 
• <body> → é o corpo, aqui vai tudo que a pessoa vê na tela 
• <h1> → título grandão 
• <p> → parágrafo normal

Observação Importante (apenas pra seu conhecimento): Na área do script (o que está escrito) inciado pela TAG <head> até </head> usamos 2 META TAGS:   <meta charset=”UTF-8″> que informa o grupo de caracteres a serem usados (*1); e <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> para Configurar a área de visualização para que seu site tenha uma boa aparência em todos os dispositivos (computador, celular, etc) (*2).

Explicando sobre:
 (*1) – Existem muitos grupos de caracteres, para suportar os diversos tipos de grafias que existe pelo mundo afora.  O UTF-8 (Unicode Transformation Format – 8 bits) é o padrão de codificação de caracteres mais usado na web.

(*2) — Esta informação garante que o conteúdo de sua página será bem apresentada em telas de tamanhos variados, tipo: PC, notebook, celular, etc. É o que se denomina como RESPONSIVIDADE.

Seguindo: Marca todo o texto em azul, acima, desde <!DOCTYPE html> até </html>.

Salva (Ctrl + S) e agora faz o seguinte:

 Clica com botão direito no arquivo index.html → Open with Live Server, ou clica em RUN—>Run Without Debugging e escolhe um Navegador (Chrome ou Edge) e…TCHARAM!- Seu primeiro site tá no ar!.
 http://127.0.0.1:5500 → isso é um servidor local dentro do seu computador.

Se até aqui já deu certo, pode comemorar. 90% das pessoas param aqui e nunca mais fazem site. Você já passou da linha de largada!”

PARTE 3 – As tags que você vai usar 95% do tempo

“Agora vamos conhecer as tags mais importantes.
 Pensa que são os tijolos da sua casa.”

1. Cabeçalhos (h1 até h6) – como títulos de jornal 
2. Parágrafo <p> 
3. Negrito <strong> e itálico <em> 
4. Listas (ordenada <ol> e não ordenada <ul>) 
5. Links <a href=”https://site.com”>texto do link</a> 
6. Imagens <img src=”fotos/eu.jpg” alt=”Minha foto”> 
7. Quebra de linha <br> e linha horizontal <hr>

Exercício ao vivo 1 – Currículo rápido.

“Vamos fazer um currículo em 10 minutos. Copie isso:”

<h1>Maria da Silva</h1>

<h2>Artesã Profissional</h2>

<hr>

<img src=”https://via.placeholder.com/200″ alt=”Foto da Maria”>

<p>Telefone: (11) 98765-4321 | E-mail: maria@email.com</p>

<h3>Sobre mim</h3>

<p>Faço artesanato há 15 anos, trabalho com crochê, bordado e pintura em tecido.</p>

<h3>Principais produtos</h3>

<ul>

    <li>Toalhas de crochê</li>

    <li>Panos de prato pintados</li>

    <li>Tapetes personalizados</li>

</ul>

____________

Observação importante!- na linha do código: <img src=”https://via.placeholder.com/200″ alt=”Foto da Maria”>

O link não vai mostrar uma foto real da Maria, mas uma imagem virtual criada pelo computador, só pra compor o quadro…

“Salva e olha no Live Server.

Exatamente como fizemos no exemplo anterior. Pode até encurtar os passos: copia o código acima. Abre o VS Code. Substitui o script antigo (do primeiro exemplo). Apaga o código (marca tudo e deleta) que está entre as TAGS <body>…</body> e substitui (cola o novo código).

Pode rodar e ver como ficou !!!.

Pronto!- Currículo profissional em 5 minutos.

”Exercício ao vivo 2 – Cardápio de restaurante.

<h1>Pizzaria do João</h1>

<h2>Cardápio 2025</h2>

<h3>Pizzas Grandes – R$ 45,00</h3>

<ol>

    <li>Calabresa</li>

    <li>Marguerita</li>

    <li>Frango com Catupiry</li>

</ol>

<h3>Pizzas Doces – R$ 50,00</h3>

<ul>

    <li>Chocolate com Morango</li>

    <li>Banana com Canela</li>

</ul>

PARTE 4 – Estrutura semântica (HTML5 – a cereja do bolo)

Agora vamos deixar o site bonito pro Google amar a gente.
 As tags novas que parecem mágica:

• <header> → cabeçalho da página 
• <nav> → menu de navegação 
• <main> → conteúdo principal 
• <section> → seção do site 
• <article> → post ou produto 
• <aside> → barra lateral 
• <footer> → rodapé

Vamos refazer o currículo com estrutura profissional:

<header>

    <h1>Maria da Silva – Artesã</h1>

    <nav>

        <a href=”#sobre”>Sobre</a> |

        <a href=”#produtos”>Produtos</a> |

        <a href=”#contato”>Contato</a>

    </nav>

</header>

<main>

    <section id=”sobre”>

        <h2>Sobre mim</h2>

        <p>Texto aqui…</p>

    </section>

</main>

<footer>

    <p>© 2025 Maria da Silva – Site feito no curso do Prof. Luiz Pimentel</p>

</footer>

Neste script usamos a SEMÂNTICA, já explicado anteriormente. Em caso de dúvida, reveja o texto.

PARTE 5 – Formulário de contato

Todo site precisa de um jeitinho da pessoa falar com você.

Formulário simples (não envia e-mail ainda, só a estrutura):

<section id=”contato”>

    <h2>Fale comigo</h2>

    <form>

        <p>

            <label>Nome:</label><br>

            <input type=”text” placeholder=”Seu nome aqui” required>

        </p>

        <p>

            <label>E-mail ou WhatsApp:</label><br>

            <input type=”text” required>

        </p>

        <p>

            <label>Mensagem:</label><br>

            <textarea rows=”5″ placeholder=”Escreva aqui…”></textarea>

        </p>

        <button type=”submit”>Enviar mensagem</button>

    </form>

</section>
 

Dica: Usando o VS Code – você nota que o script está todo organizado e colorido. Isso ajuda muito e futuramente você poderá constatar isso. Se você colocar o cursor do mouse sobre algum elemento em azul e permanecer alguns segundos, obterá a informação sobre o item.

FECHAMENTO DO MÓDULO 2

Resumo do que você aprendeu:

1. Criou sua primeira página HTML do zero 
2. Conhece as tags principais (h1, p, img, a, listas, form) 
3. Fez 3 mini-projetos reais 
4. Já sabe estrutura semântica (header, main, footer) 
5. Tem um site com várias seções e formulário!

Tarefa de casa (obrigatória pra próxima aula): Faça UM dos 4 projetos abaixo e mande foto no grupo:

1. Currículo seu ou de alguém da família 
2. Cardápio (pode ser lanchonete, salão, artesanato) 
3. Landing page de um produto que você vende ou gostaria de vender 
4. Portfólio com 3 fotos suas

Próxima aula (Módulo 3): vamos deixar tudo isso LINDO com CSS.
 Prepare-se: vai parecer mágica!-Beijo no coração e até lá, meus gênios!”

_________________________0-0_______________________

Tente responder estas questões

QUESTIONÁRIO – MÓDULO 2 

HTML do básico ao intermediário 

1. Qual é a primeira linha que TODO arquivo HTML precisa ter? 
2. a) `<html>` 
3. b) `<!DOCTYPE html>`
4. c) `<head>` 
5. d) `<body>`

2. Qual tag abre o “corpo” do site (onde aparece o que o visitante vê)?
3. a) `<head>` 
4. b) `<title>` 
5. c) `<body>`
6. d) `<header>`

3. Para o título que aparece na aba do navegador, usamos a tag: 
4. a) `<h1>` 
5. b) `<title>`
6. c) `<header>` 
7. d) `<meta>`

4. Qual tag cria um título grandão na página? 
5. a) `<h6>` 
6. b) `<p>` 
7. c) `<h1>` 
8. d) `<strong>`

5. Como fazemos um parágrafo de texto normal? 
6. a) `<text>` 
7. b) `<p>` 
8. c) `<paragraph>` 
9. d) `<div>`

6. Para colocar uma imagem no site, usamos a tag: 
7. a) `<picture>` 
8. b) `<img src=”foto.jpg” alt=”descrição”>`
9. c) `<image>` 
10. d) `<foto>`

7. Qual tag cria um link que abre outra página ou site? 
8. a) `<link>` 
9. b) `<a href=”endereço”>texto do link</a>`
10. c) `<url>` 
11. d) `<goto>`

8. Qual é a diferença entre `<header>` e `<footer>` (tags semânticas)? 
9. a) Header é o rodapé e footer é o cabeçalho 
10. b) Header é o cabeçalho (topo) e footer é o rodapé (baixo)
11. c) As duas são a mesma coisa 
12. d) Só serve pra deixar bonito

9. Para criar um formulário de contato simples, começamos com a tag:
10. a) `<contact>` 
11. b) `<form>`  
12. c) `<input>` 
13. d) `<send>`

10. (Pergunta aberta – essa é a que eu mais gosto!) 

    “Me manda o código HTML de uma página bem simples que tenha: 

    – um título grande com seu nome 

    – uma foto sua 

    – um parágrafo contando quem você é 

    – um link pro seu WhatsApp 

    Pode ser só as linhas principais, quero ver se virou mestre mesmo!”

────────────────────────

 Não deixe de enviar o seu gabarito pelo nosso Whatsapp ou Email (use o CONTATO). Anexe também suas dúvidas. Serão respondidas prontamente.

FIM DO MÓDULO 2