Ebook: Programação para Web I
Capítulo 1: Apresentação da Disciplina
Objetivos da disciplina:
Introduzir os conceitos iniciais sobre a Web
Capacitar o aluno a construir páginas web estáticas com HTML
Desenvolver habilidades com ferramentas de desenvolvimento como o VS Code
Ferramentas necessárias:
Navegador (Chrome, Firefox, Edge, etc.)
Visual Studio Code
Capítulo 2: Considerações Iniciais sobre a Web e a World Wide Web
(WWW)
O que é a Web? A World Wide Web é um sistema de documentos interligados
acessados pela Internet por meio de navegadores. Foi criada por Tim Berners-Lee em
1989.
Diferença entre Web e Internet:
Internet: infraestrutura de rede
Web: serviço que roda sobre a internet (como e-mail, redes sociais, sites)
Funcionamento Básico:
Um navegador faz uma requisição HTTP a um servidor web, que responde com
arquivos HTML.
Capítulo 3: Instalação da Ferramenta VS Code
Passos para instalar:
1. Acesse: https://code.visualstudio.com/
2. Baixe a versão para seu sistema operacional
3. Instale e abra
4. Instale a extensão "Live Server" para visualizar as páginas em tempo real
Capítulo 4: Estrutura Básica de um Documento HTML
<!DOCTYPE html>
<html>
<head>
<title>Minha Página</title>
</head>
<body>
<h1>Olá Mundo</h1>
</body>
</html>
Tags principais:
<html>: define o início e fim do documento
<head>: contém metadados
<body>: conteúdo visível da página
Capítulo 5: Conhecendo as Primeiras Tags HTML
Títulos e Parágrafos:
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Esse é um parágrafo.</p>
Ênfase no texto:
<strong>Negrito</strong> e <em>itálico</em>
Capítulo 6: Uso de Meta Tags e Listas, Imagens e Links
Meta tags:
<meta charset="UTF-8">
<meta name="description" content="Página de exemplo">
Listas:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Imagens e links:
<img src="imagem.jpg" alt="Descrição da imagem">
<a href="https://google.com">Google</a>
Capítulo 7: Criar e Configurar Tabelas em HTML
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>Maria</td>
<td>22</td>
</tr>
</table>
Capítulo 8: Criar Formulários em HTML
<form action="/enviar" method="post">
Nome: <input type="text" name="nome"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Enviar">
</form>
Campos comuns: text, email, number, radio, checkbox, textarea
Capítulo 9: Estrutura dos Arquivos de um Site
Organização típica:
projeto/
|-- index.html
|-- css/
| |-- estilo.css
|-- img/
| |-- logo.png
|-- js/
|-- script.js
Capítulo 10: Atividade Avaliativa Pratique - Criação de uma Página Web
com Seu Perfil Pessoal
Objetivo: Criar uma página chamada perfil.html com:
Nome completo
Imagem pessoal
Lista com habilidades
Tabela com experiências
Formulário de contato
Exemplo simplificado:
<h1>Maria da Silva</h1>
<img src="maria.jpg" alt="Foto de Maria">
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<table>
<tr><th>Empresa</th><th>Cargo</th></tr>
<tr><td>TechX</td><td>Dev Junior</td></tr>
</table>
<form>
Email: <input type="email">
</form>
Capítulo 11: Exercícios Propostos com Respostas
Exercício 1: Crie uma página com:
Título
Dois parágrafos
Imagem
Link
Exemplo:
<h1>Bem-vindo</h1>
<p>Esse é o primeiro parágrafo.</p>
<p>Mais um conteúdo aqui.</p>
<img src="foto.jpg">
<a href="https://youtube.com">YouTube</a>
Exercício 2: Crie um formulário com os seguintes campos:
Nome, Email, Gênero (radio), Linguagens favoritas (checkbox)
Exemplo de resposta:
<form>
Nome: <input type="text"><br>
Email: <input type="email"><br>
Gênero: <input type="radio" name="genero" value="M">Masculino
<input type="radio" name="genero" value="F">Feminino<br>
Linguagens:<br>
<input type="checkbox">HTML<br>
<input type="checkbox">CSS<br>
</form>
Se quiser, posso gerar a versão PDF deste conteúdo ou adicionar CSS e JavaScript no
próximo volume.
