Desenvolvimento Web Completo - HTML - CSS e JavaScript para Iniciantes

Prévia do material em texto

Desenvolvimento Web Completo: HTML, CSS e JavaScript para Iniciantes 
Resumo 
 
O desenvolvimento web é uma das áreas mais promissoras da Tecnologia da Informação. Praticamente 
todas as empresas e organizações utilizam websites e aplicações web para oferecer produtos, serviços e 
informações aos usuários. Este material apresenta os fundamentos das principais tecnologias utilizadas 
no desenvolvimento web: HTML, CSS e JavaScript. São abordados conceitos essenciais, estrutura de 
páginas, estilização, interatividade e boas práticas de desenvolvimento, proporcionando uma base 
sólida para estudantes e iniciantes. 
 
Palavras-chave: Desenvolvimento Web, HTML, CSS, JavaScript, Front-End, Programação Web. 
 
1. Introdução 
 
A internet tornou-se um dos principais meios de comunicação e negócios do mundo moderno. 
Websites, lojas virtuais, redes sociais e sistemas corporativos dependem de tecnologias web para 
funcionar. 
 
O desenvolvimento web pode ser dividido em duas áreas principais: 
 
Front-End 
 
Parte visual com a qual o usuário interage. 
 
Tecnologias principais: 
 
HTML 
CSS 
JavaScript 
Back-End 
 
Parte responsável pelo processamento dos dados. 
 
Tecnologias comuns: 
 
Python 
PHP 
Java 
Node.js 
C# 
2. O Que é HTML? 
 
HTML (HyperText Markup Language) é a linguagem utilizada para estruturar páginas web. 
 
O HTML define: 
 
Títulos; 
Textos; 
Imagens; 
Tabelas; 
Formulários; 
Links. 
Estrutura Básica de uma Página HTML 
 
 
 
 Minha Página 
 
 
 
 Bem-vindo ao meu site 
 
 Primeiro parágrafo. 
 
 
 
3. Principais Tags HTML 
Títulos 
Título Principal 
Subtítulo 
Título Menor 
Parágrafos 
Este é um parágrafo. 
Links 
 
Visitar Site 
 
Imagens 
 
Listas 
Lista Ordenada 
 
 Item 1 
 Item 2 
 
Lista Não Ordenada 
 
 Item A 
 Item B 
 
4. O Que é CSS? 
 
CSS (Cascading Style Sheets) é utilizado para definir a aparência visual das páginas. 
 
Com CSS é possível: 
 
Alterar cores; 
Definir fontes; 
Ajustar tamanhos; 
Criar layouts; 
Produzir animações. 
Exemplo de CSS 
h1 { 
 color: blue; 
 font-size: 32px; 
} 
Aplicando CSS Interno 
 
h1 { 
 color: blue; 
} 
 
Aplicando CSS Externo 
 
5. Seletores CSS 
Seletor por Elemento 
p { 
 color: green; 
} 
Seletor por Classe 
.destaque { 
 color: red; 
} 
 
HTML: 
 
 
Texto importante 
 
Seletor por ID 
#titulo { 
 color: purple; 
} 
 
HTML: 
 
 
Meu Título 
 
6. Layout com CSS 
Box Model 
 
Todo elemento HTML possui: 
 
Margin 
Border 
Padding 
Content 
 
Representação: 
 
Margin 
 └─ Border 
 └─ Padding 
 └─ Conteúdo 
Exemplo 
div { 
 margin: 20px; 
 padding: 10px; 
 border: 1px solid black; 
} 
7. O Que é JavaScript? 
 
JavaScript é a linguagem responsável pela interatividade das páginas web. 
 
Com JavaScript podemos: 
 
Criar animações; 
Validar formulários; 
Atualizar conteúdos; 
Desenvolver aplicações completas. 
Primeiro Código JavaScript 
alert("Olá Mundo!"); 
Variáveis 
let nome = "Carlos"; 
let idade = 25; 
Exibindo Informações 
console.log(nome); 
8. Estruturas Condicionais 
If 
let idade = 20; 
 
if (idade >= 18) { 
 console.log("Maior de idade"); 
} 
If e Else 
if (idade >= 18) { 
 console.log("Maior"); 
} 
else { 
 console.log("Menor"); 
} 
9. Estruturas de Repetição 
For 
for(let i = 0; i 
Meu Site 
 
 
JavaScript: 
 
document.getElementById("titulo") 
.innerHTML = "Novo Título"; 
12. Formulários 
 
HTML: 
 
 
 
 
 
 
Enviar 
 
 
 
 
Validação JavaScript: 
 
if(nome == "") { 
 alert("Campo obrigatório"); 
} 
13. Desenvolvimento Responsivo 
 
Os sites modernos devem funcionar em: 
 
Computadores; 
Tablets; 
Smartphones. 
Media Queries 
@media(max-width:768px){ 
 
 body{ 
 font-size:14px; 
 } 
 
} 
14. Frameworks Populares 
 
Com o crescimento do desenvolvimento web surgiram ferramentas que aceleram a criação de 
aplicações. 
 
Front-End 
React 
Angular 
Vue.js 
Back-End 
Node.js 
Django 
Laravel 
15. Boas Práticas 
 
Algumas recomendações importantes: 
 
Utilizar nomes claros para variáveis; 
Organizar o código adequadamente; 
Evitar duplicação de código; 
Manter arquivos separados; 
Comentar partes complexas; 
Testar em diferentes navegadores. 
16. Mercado de Trabalho 
 
O desenvolvimento web continua entre as áreas mais procuradas da tecnologia. 
 
Principais cargos: 
 
Desenvolvedor Front-End; 
Desenvolvedor Back-End; 
Desenvolvedor Full Stack; 
UX/UI Designer; 
Engenheiro de Software. 
 
Habilidades valorizadas: 
 
HTML; 
CSS; 
JavaScript; 
Git; 
Bancos de Dados; 
Frameworks modernos. 
Conclusão 
 
O desenvolvimento web é uma das portas de entrada mais acessíveis para o mercado de tecnologia. O 
domínio de HTML, CSS e JavaScript permite criar páginas modernas, responsivas e interativas. Esses 
conhecimentos servem como base para o aprendizado de frameworks avançados e para a construção de 
aplicações web profissionais. 
 
Exercícios Resolvidos 
1. Qual linguagem é responsável pela estrutura da página? 
 
a) CSS 
 
b) JavaScript 
 
c) HTML 
 
d) SQL 
 
Resposta: c) HTML 
 
2. Qual tecnologia é utilizada para estilização? 
 
a) Java 
 
b) CSS 
 
c) Python 
 
d) SQL 
 
Resposta: b) CSS 
 
3. Qual linguagem adiciona interatividade? 
 
a) HTML 
 
b) CSS 
 
c) JavaScript 
 
d) PHP 
 
Resposta: c) JavaScript 
 
4. O que significa DOM? 
 
Resposta: Document Object Model. 
 
Referências 
 
MDN Web Docs 
 
W3Schools 
 
ECMAScript Official Website 
 
HTML Living Standard (WHATWG) 
 
CSS Specifications (W3C)