Introdução ao HTML e Visual
Studio
Aula Prática
Construindo websites como quem constrói uma casa: HTML como estrutura, CSS como decoração
e JavaScript como funcionalidades.
Duração: 2h30 Nível: Iniciante Aula prática
<html>
<head>...</head>
<body>
<h1>Minha primeira página</h1>
</body>
</html>
Professor Reginaldo Xavier
JOSÉ JOAQUIM DA SILVA FILHO
Boas-vindas e Apresentação
Início da nossa jornada de construção web
Sobre o Instrutor Vamos Interagir!
Seu professor com experiência em desenvolvimento web
"Alguém já viu um site por dentro?"
Objetivo: Criar sua primeira página HTML usando o Visual
Studio
Vamos descobrir juntos o que forma a estrutura de uma
Ao final da aula, você terá construído seu primeiro site! página web!
Nossa Analogia Central
Construir um site = Construir uma casa
Estrutura = HTML Decoração = CSS Funcionalidades = JS
Paredes, telhado, fundação Cores, estilo, aparência Instalações elétricas, hidráulicas
Hoje vamos focar na estrutura (HTML) da nossa casa digital!
HTML = Estrutura de uma Casa
Entenda HTML através de analogias com a construção civil
Elementos Comparativos
<!DOCTYPE> Fundação da casa
<html></html> Terreno completo
<head></head> Planta da casa
<body></body> A casa em si
<h1></h1> Telhado/fachada
<p></p> Paredes
Assim como uma casa precisa de estrutura sólida para existir, uma página web precisa de HTML bem estruturado. CSS seria a decoração da
casa e JavaScript as funcionalidades (eletricidade, água, etc).
JOSÉ JOAQUIM DA SILVA FILHO
O que é HTML?
A estrutura fundamental da nossa casa digital
Definição Analogia da Casa
HTML (HyperText Markup Language) é uma linguagem de Criar um site é como construir uma casa: HTML =
marcação utilizada para: Estrutura (paredes, telhado) CSS = Decoração
Estruturar o conteúdo de páginas web (pintura, móveis) JavaScript = Funcionalidades
Definir significado e organização do conteúdo Ser
(luz, água)
interpretada pelos navegadores
Tags HTML
As tags são os elementos básicos do HTML:
<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>
<img src="[Link]" alt="Descrição">
Estrutura: Tag de abertura + Conteúdo + Tag de
fechamento
As tags HTML funcionam como os tijolos e materiais da
sua casa digital
Exemplo Prático de Código HTML
Nossa primeira página web: a estrutura básica de uma casa digital
Minha Casa Digital
Código HTML
<!DOCTYPE html> Olá, eu sou João!
<html>
Estou aprendendo a construir sites.
<head>
<title>Minha Casa Digital</title> Futebol
</head> Música
<body> Programação
<h1>Olá, eu sou João!</h1>
<p>Estou aprendendo a construir sites.</p>
<ul>
Imagem
<li>Futebol</li>
<li>Música</li>
<li>Programação</li>
</ul>
Elementos principais:
<img src="[Link] alt="Foto">
</body> <!DOCTYPE html>: Alicerce que define o tipo do documento
</html> <html>: Estrutura completa da casa
<head>: Informações invisíveis ao visitante
<body>: Conteúdo visível da página
Dica: Copie e cole esse código no VS Code, salve como [Link] e abra no navegador para ver o resultado!
JOSÉ JOAQUIM DA SILVA FILHO
Anatomia de um Elemento HTML
Entendendo as partes que formam a estrutura básica
<p> Meu gatinho é muito mal humorado </p>
Tag de abertura Conteúdo Tag de fechamento
Indica onde o elemento começa O texto ou elementos que ficam Indica onde o elemento termina
Nome do elemento entre < e > dentro das tags Nome do elemento com / antes
Define o tipo do conteúdo O que será exibido no navegador Fecha a estrutura do elemento
Pode conter atributos Pode conter outros elementos Sempre deve corresponder à tag de
Na analogia da casa: é como o início da (aninhamento) abertura
parede Parte visível ao usuário Na analogia da casa: é o final da parede
Na analogia da casa: o que fica dentro das
paredes
Importante: Elementos devem ser abertos e fechados corretamente para evitar erros. Alguns elementos como <img>e <br>
não possuem conteúdo e são chamados de elementos vazios.
JOSÉ JOAQUIM DA SILVA FILHO
Visual Studio Code: Sua Oficina Digital
A oficina completa para construir casas digitais
O que é o VS Code?
Editor de código gratuito, leve e poderoso desenvolvido pela
Microsoft. Ideal para iniciantes e profissionais.
Analogia da Oficina
Arquivos HTML: Plantas da casa
Editor de código: Bancada de trabalho Explorador de
arquivos: Armário de ferramentas Terminal: Área de
construção
Extensões: Ferramentas especializadas
VS Code: Onde seus projetos digitais ganham vida
Dica: Hoje usaremos o VS Code por ser leve e gratuito. Você pode baixá-lo em [Link]
JOSÉ JOAQUIM DA SILVA FILHO
Mãos à Obra: Criando sua Primeira Página
Guia passo a passo para construir sua primeira "casa digital"
1 Abrir o VS Code 2 Criar [Link] 3 Estrutura básica
Abra o Visual Studio Code em seu Crie uma pasta para seu projeto e Digite o esqueleto HTML básico ou use
computador. A "oficina" está pronta para dentro dela um arquivo chamado atalho: ! + Tab no VS Code
trabalhar! [Link]
4 Adicionar conteúdo 5 Salvar e visualizar
Adicione elementos básicos à sua página: Salve o arquivo ( Ctrl+S ) e abra no navegador para ver o
Título principal com <h1> (o telhado) resultado!
Parágrafos com <p> (as paredes) Listas
com <ul> e <li> (o mobiliário) Imagem com Salvar Visualizar
<img> (as janelas)
Dica: Salvar é como "fechar a obra" do dia!
Dica importante!
Se errar, não se preocupe! Todos os pedreiros deixam cair tijolos no começo. Use Ctrl+Z para desfazer alterações e continue construindo!
Demonstração ao Vivo
Veja o código se transformar em uma página web real
Orientações para o Instrutor Fluxo de Trabalho
Abra o VS Code mostrando o arquivo [Link] criado
Digite o código HTML básico passo a passo explicando cada
parte
Salve o arquivo (Ctrl+S) - "feche a obra do dia!" [Link] Navegador
Abra o arquivo no navegador arrastando-o ou clicando com
botão direito
Mostre como alterações no código refletem ao Efeito "Uau!"
recarregar a página É importante reforçar o momento de visualização da página pela
primeira vez. Mostre como o trabalho de código se transforma em
Dica do instrutor: algo visual - como tijolos e cimento se transformam em uma casa!
Incentive os alunos a olharem pela "janela"
(navegador) para ver como a "casa" está ficando. Erros são
normais e parte do aprendizado! Da linha de código à página web
Reserve 5-10 minutos para perguntas durante esta demonstração
JOSÉ JOAQUIM DA SILVA FILHO
Ferramentas Alternativas para Programar
Diferentes veículos para chegar ao mesmo destino
VS Code Sublime Text
Analogia: Carro esportivo moderno Analogia: Moto rápida e potente
Gratuito e de código aberto Extremamente rápido e responsivo
Altamente personalizável com extensões Interface minimalista
Integração com Git e terminal Excelente desempenho com arquivos grandes
Leve, apesar das funcionalidades Mais Pacotes de extensão disponíveis
popular entre desenvolvedores Pago, mas com avaliação gratuita
Ideal para: Desenvolvimento web e uso diário Ideal para: Desenvolvedores que valorizam velocidade
Brackets Notepad++
Analogia: Bicicleta simples e fácil Analogia: Chave de fenda básica
Focado especificamente em design web Leve e simples de usar
Visual limpo e minimalista Totalmente gratuito
Visualização ao vivo integrada Suporte a múltiplas linguagens
Da Adobe, gratuito e open source Consumo mínimo de recursos
Curva de aprendizado menor Apenas para Windows
Ideal para: Designers web e iniciantes em HTML/CSS Ideal para: Edições rápidas e computadores mais antigos
Todas essas ferramentas permitem criar sites, mas com diferentes níveis de conforto e recursos.
Experimente algumas e descubra qual se adapta melhor ao seu estilo de trabalho!
Projeto Prático Guiado: Página Sobre Você
Crie sua primeira página HTML personalizada - 30 minutos de prática
[Link]
Desafio
<!DOCTYPE html>
Crie uma página HTML sobre você utilizando os elementos que <html>
aprendemos. <head>
<title>Sobre Mim</title>
</head>
Elementos necessários: <body>
<h1>Maria Silva</h1>
Título com seu nome
<p>Olá! Sou estudante de programação...</p>
<h1>Seu Nome</h1>
<h2>Meus hobbies:</h2>
<ul>
Um parágrafo sobre você
<p>Texto sobre você</p>
Lista de hobbies
<ul>e <li> Dicas para o instrutor
Circule pela sala ajudando os alunos com dúvidas
Uma imagem
<img src="..."> Incentive os alunos a personalizarem suas páginas
Lembre que não existe "erro", apenas aprendizado
Tempo estimado: 30 minutos
JOSÉ JOAQUIM DA SILVA FILHO
Compartilhamento e Feedback
Momento de celebração e aprendizado coletivo
Compartilhando projetos Perguntas para reflexão
3 voluntários mostram suas páginas HTML para a turma
"O que você achou mais fácil na atividade?"
Comentários positivos e encorajadores (destaque os pontos
fortes)
"Qual foi o maior desafio para você?"
Sugestões construtivas (como melhorar ainda mais)
Celebre esta primeira conquista! Todos já são
construtores web! "Como a analogia da casa ajudou a entender
HTML?"
Dica: Incentive a participação de todos. Não há
respostas certas ou erradas!
Dica para o instrutor
Este é um momento importante para reforçar a confiança dos alunos. Mesmo os projetos mais simples merecem reconhecimento. Lembre a todos
que estamos apenas no início da jornada!
JOSÉ JOAQUIM DA SILVA FILHO
Encerramento e Próximos Passos
O que aprendemos Próximas Aulas Recursos
HTML = estrutura da casa Visual Recomendados
CSS:
Studio = oficina digital Tags HTML = Vamos decorar nossa casa digital! VS Code (Download)
tijolos e materiais Navegador = Curso em Vídeo (YouTube)
JavaScript:
janela para a casa Adicionaremos funcionalidades MDN Web Docs W3Schools
interativas
Lembre-se: Todo expert já foi iniciante um dia. Continue praticando!
Agradecimentos
Obrigado pela sua participação! Continue construindo e compartilhe seus projetos.
JOSÉ JOAQUIM DA SILVA FILHO
Dúvidas Finais
Espaço para Perguntas
Este é o momento para esclarecer todas as suas dúvidas sobre:
Tags e estrutura HTML Visual Studio Code
Criação de páginas web Outras ferramentas de desenvolvimento
Lembre-se
Não se preocupe com os erros! Até os pedreiros derrubam tijolos durante a construção de uma casa!
O mais importante é persistir e continuar aprendendo.
Continue Praticando
Crie novas páginas HTML em casa e pratique o que aprendeu hoje. Na
próxima aula: CSS - Vamos decorar nossa casa digital!