Arquitetura Web e HTML/CSS

Arquitetura Web e HTML/CSS
Bem-vindo ao nosso guia completo sobre os fundamentos de desenvolvimento web. Aqui você aprenderá como criar páginas incríveis usando HTML e CSS, os pilares da web moderna.
Objetivos da Aula
Estrutura Web
Compreender a arquitetura fundamental de aplicações web e como os componentes se relacionam entre cliente e servidor.
HTML5
Aprender a criar páginas estruturadas com HTML5, utilizando as principais tags e elementos semânticos.
CSS3
Dominar as técnicas de estilização com CSS3 para transformar estruturas básicas em designs atrativos e responsivos.
O que é uma Aplicação Web?
Uma aplicação web é um software que roda em um navegador, acessível através da internet. Diferente dos programas tradicionais instalados em computadores, as aplicações web não exigem instalação e podem ser acessadas de qualquer dispositivo com conexão à internet.
A base tecnológica dessas aplicações consiste em:
HTML para estruturação do conteúdo
CSS para estilização visual
JavaScript para interatividade e comportamento dinâmico
As aplicações web podem ser simples como um blog ou complexas como uma rede social, dividindo-se em frontend (parte visível ao usuário) e backend (processamento no servidor).
Arquitetura Cliente-Servidor
Cliente (Navegador)
O navegador é a interface do usuário, responsável por interpretar e renderizar o HTML, CSS e JavaScript recebidos do servidor. Exemplos incluem Chrome, Firefox e Safari.
Servidor
Computador remoto que armazena e processa dados, enviando ao cliente quando solicitado. Hospeda os arquivos do site e pode executar lógica de negócios mais complexa.
Banco de Dados
Armazena informações de forma persistente. Embora estudaremos isso mais tarde, é importante entender seu papel na arquitetura web.
Essa comunicação ocorre principalmente através do protocolo HTTP, com o cliente fazendo requisições e o servidor retornando respostas com os recursos solicitados.
Pilha Web (Web Stack)
1
2
3
4
5
1
HTML
Estrutura - Define o esqueleto e organização do conteúdo
2
CSS
Estilo - Determina a aparência visual e o layout
3
JavaScript
Comportamento - Adiciona interatividade e funcionalidades dinâmicas
4
Backend
Processamento - Lida com operações no servidor (veremos em aulas futuras)
5
Banco de Dados
Armazenamento - Guarda informações de forma persistente
O que é HTML?
HTML (HyperText Markup Language) é a linguagem fundamental para criação de páginas web. É importante entender que HTML não é uma linguagem de programação, mas sim uma linguagem de marcação.
Através do HTML, definimos a estrutura e o conteúdo das páginas, indicando onde cada elemento deve aparecer: textos, imagens, links, formulários e outros componentes.
O HTML utiliza tags (marcações) para definir os diferentes elementos na página. Essas tags são escritas entre colchetes angulares (<>) e geralmente aparecem em pares: uma tag de abertura e uma de fechamento.
Sintaxe Básica do HTML
Todo documento HTML começa com a declaração do tipo de documento <!DOCTYPE html> seguida pela estrutura básica.
<!DOCTYPE html>
<html>
  <head>
    <title>Minha Primeira Página</title>
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
    <p>Este é meu primeiro site em HTML.</p>
  </body>
</html>
Este exemplo contém os elementos essenciais de qualquer página HTML: a declaração do tipo de documento, as tags html, head, title, body, além de um título (h1) e um parágrafo (p).
Estrutura Básica do HTML
1
DOCTYPE
Informa ao navegador qual versão do HTML está sendo usada. A declaração <!DOCTYPE html> indica HTML5.
2
HTML
É o elemento raiz que envolve todo o conteúdo da página. <html></html>
3
HEAD
Contém metadados e informações não visíveis diretamente na página, como título, links para CSS, meta tags para SEO e charset.
4
BODY
Abriga todo o conteúdo visível da página: textos, imagens, links, formulários e outros elementos interativos.
Tags Principais do HTML
Texto e estrutura
<h1> a <h6> - Títulos e subtítulos
<p> - Parágrafos de texto
<div> - Divisão/seção genérica
<span> - Contêiner inline para texto
Conteúdo
<a> - Links para outras páginas
<img> - Imagens
<ul>, <ol>, <li> - Listas
<table> - Tabelas
Formatação de Texto em HTML
Tags semânticas
Essas tags dão significado ao texto além da formatação visual:
<strong> - Texto importante (negrito)
<em> - Texto enfatizado (itálico)
<mark> - Texto destacado (marcado)
<del> - Texto deletado (tachado)
Quebras e separadores
<br> - Quebra de linha
<hr> - Linha horizontal (separador)
<p>Texto com <strong>negrito</strong> e <em>itálico</em>.</p>
<p>Primeira linha<br>Segunda linha</p>
Prefira sempre usar tags semânticas em vez de tags puramente visuais como <b> ou <i>, pois elas ajudam na acessibilidade e SEO do seu site.
Links e Imagens
Links <a>
Os links permitem navegar entre páginas e são criados com a tag anchor:
<a href="https://www.exemplo.com">Visite o site</a>
<a href="contato.html">Página de contato</a>
<a href="#secao">Ir para seção</a>
O atributo target="_blank" abre o link em uma nova aba.
Imagens <img>
Para inserir imagens usamos a tag img, que é autocontida (não tem fechamento):
<img src="foto.jpg" alt="Descrição da imagem">
O atributo alt é essencial para acessibilidade e SEO, descrevendo a imagem para leitores de tela e quando a imagem não carrega.
Listas em HTML
Lista não ordenada <ul>
Usada quando a ordem dos itens não importa:
<ul>
  <li>Maçã</li>
  <li>Banana</li>
  <li>Laranja</li>
</ul>
Resultado:
Maçã
Banana
Laranja
Lista ordenada <ol>
Usada quando a ordem é importante:
<ol>
  <li>Primeiro passo</li>
  <li>Segundo passo</li>
  <li>Terceiro passo</li>
</ol>
Resultado:
Primeiro passo
Segundo passo
Terceiro passo
Você também pode criar listas aninhadas colocando uma lista dentro de um item <li> de outra lista.
Tabelas em HTML
As tabelas são usadas para apresentar dados em formato de linhas e colunas. Embora não devam ser usadas para layout da página (use CSS para isso), elas são ideais para exibir informações tabulares.
<table>
 <thead>
 <tr>
 <th>Nome</th>
 <th>Idade</th>
 <th>Profissão</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Ana</td>
 <td>25</td>
 <td>Desenvolvedora</td>
 </tr>
 <tr>
 <td>Pedro</td>
 <td>32</td>
 <td>Designer</td>
 </tr>
 </tbody>
</table>
Formulários em HTML
Formulários são usados para coletar dados dos usuários e enviá-los ao servidor. A estrutura básica inclui:
<form> - Container do formulário
<input> - Campo de entrada (texto, senha, etc.)
<label> - Rótulo para os campos
<button> - Botão de envio ou ação
<form action="/processar" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Enviar</button>
</form>
Os formulários podem incluir diversos tipos de campos como checkbox, radio, select, textarea e muitos outros, que estudaremos em detalhes mais adiante.
HTML Semântico: Boas Práticas
O que é HTML semântico?
É o uso de tags HTML que transmitem significado sobre o conteúdo, não apenas sobre a aparência. Isso melhora a acessibilidade, o SEO e a manutenção do código.
Principais tags semânticas
<header> - Cabeçalho da página ou seção
<nav> - Menu de navegação
<main> - Conteúdo principal
<section> - Seção temática
<article> - Conteúdo independente
<aside> - Conteúdo relacionado indiretamente
<footer> - Rodapé da página ou seção
O que é CSS?
CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a apresentação de documentos HTML. Enquanto o HTML cuida da estrutura e conteúdo, o CSS controla como esse conteúdo deve aparecer visualmente.
Com CSS você pode:
Definir cores, fontes e tamanhos de texto
Criar layouts complexos
Adicionar animações e efeitos visuais
Adaptar a aparência para diferentes dispositivos
O CSS funciona através de regras que selecionam elementos HTML e aplicam propriedades de estilo a eles. A "cascata" no nome refere-se à maneira como os estilos são aplicados e podem se sobrepor uns aos outros.
Formas de Aplicar CSS
1
CSS Inline
Aplicado diretamente no elemento usando o atributo style:
<p style="color: blue; font-size: 16px;">Texto azul</p>
Vantagem: aplicação rápida. Desvantagem: difícil manutenção, mistura conteúdo e estilo.
2
CSS Interno
Definido na seção <head> do documento usando a tag <style>:
<head>
  <style>
    p { color: blue; font-size: 16px; }
  </style>
</head>
Vantagem: afeta múltiplos elementos. Desvantagem: não é reutilizável entre páginas.
3
CSS Externo (Recomendado)
Arquivo .css separado, vinculado através da tag <link>:
<head>
  <link rel="stylesheet" href="estilos.css">
</head>
Vantagem: separação completa entre conteúdo e estilo, reutilizável, manutenção facilitada.
Exemplo de CSS
Este é um exemplo básico de arquivo CSS externo:
/* Estilo para o corpo da página */
body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

/* Estilo para títulos */
h1 {
  color: #2c3e50;
  font-size: 28px;
  text-align: center;
}

/* Estilo para parágrafos */
p {
  color: #34495e;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Estilo para uma classe específica */
.destaque {
  background-color: #ffeaa7;
  padding: 10px;
  border-left: 3px solid #fdcb6e;
}
As regras CSS são compostas por:
Seletores: determinam quais elementos serão estilizados
Declarações: conjunto de propriedades e seus valores
Propriedades: características que você deseja alterar
Valores: configurações específicas para as propriedades
Seletores CSS
Seletor de Tag
p { color: blue; }
Seleciona todos os elementos de um tipo específico (todos os parágrafos, por exemplo).
Seletor de Classe
.destaque { background-color: yellow; }
Seleciona todos os elementos que possuem a classe especificada: <p class="destaque">
Seletor de ID
#cabecalho { font-size: 24px; }
Seleciona o elemento com o ID específico: <div id="cabecalho">. Um ID deve ser único na página.
Seletores Combinados
nav a { text-decoration: none; }
Seleciona elementos dentro de outros (todos os links dentro do elemento nav).
Propriedades CSS Comuns
Texto
color: Cor do texto
font-family: Tipo de fonte
font-size: Tamanho da fonte
font-weight: Peso da fonte (negrito)
text-align: Alinhamento do texto
line-height: Altura da linha
Espaçamento
margin: Espaço externo ao elemento
padding: Espaço interno ao elemento
Cores e Fundos
background-color: Cor de fundo
background-image: Imagem de fundo
Dimensões
width: Largura do elemento
height: Altura do elemento
Bordas
border: Borda completa
border-radius: Arredondamento da borda
Box Model do CSS
O Box Model (Modelo de Caixa) é um conceito fundamental do CSS que descreve como cada elemento HTML é representado como uma caixa retangular com diferentes camadas:
Content (Conteúdo): Área onde o texto e imagens aparecem
Padding (Preenchimento): Espaço entre o conteúdo e a borda
Border (Borda): Linha que envolve o padding e o conteúdo
Margin (Margem): Espaço transparente fora da borda
O tamanho total de um elemento é calculado somando todas essas camadas:
Largura total = width + padding-left + padding-right 
              + border-left + border-right
              + margin-left + margin-right
No CSS moderno, você pode usar box-sizing: border-box; para fazer com que a largura e altura definidas incluam o padding e a borda, tornando o cálculo mais intuitivo.
Layout com Flexbox
Flexbox é um modelo de layout unidimensional que permite organizar elementos em linhas ou colunas de forma flexível. É ideal para componentes de interface e layouts pequenos.
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Propriedades principais:
display: flex: Ativa o flexbox
flex-direction: row (padrão) ou column
justify-content: Alinhamento no eixo principal
align-items: Alinhamento no eixo cruzado
O Flexbox simplifica muito a criação de layouts responsivos e a centralização de elementos, tarefas que eram complexas com métodos antigos de layout.
Responsividade com Unidades Relativas
Unidades Fixas (Evitar)
px: Pixels - tamanho fixo independente do dispositivo
Problema: não se adapta a diferentes tamanhos de tela
Unidades Relativas (Recomendadas)
%: Porcentagem relativa ao elemento pai
em: Relativo ao tamanho da fonte do elemento pai
rem: Relativo ao tamanho da fonte do elemento raiz
vw/vh: Porcentagem da largura/altura da viewport
As unidades relativas são essenciais para criar designs responsivos que se adaptam a diferentes tamanhos de tela, desde celulares até desktops.
Atividade Prática 1: Criando uma Página Simples
Vamos começar com uma página básica utilizando as tags aprendidas:
Abra um editor de texto (como Notepad, VSCode ou outro)
Crie um arquivo chamado index.html
Adicione a estrutura básica com !DOCTYPE, html, head e body
Inclua um título h1, uma imagem img e um parágrafo p
Adicione um link a para algum site
Esta atividade permite praticar a criação da estrutura básica de uma página HTML com os elementos essenciais.
<!DOCTYPE html>
<html>
<head>
 <title>Minha Primeira Página</title>
 <meta charset="UTF-8">
</head>
<body>
 <h1>Bem-vindo ao meu site</h1>
 <img src="foto.jpg" alt="Minha foto">
 <p>Esta é minha primeira página HTML.
 Estou aprendendo desenvolvimento web.</p>
 <a href="https://www.google.com">
 Visite o Google
 </a>
</body>
</html>
Atividade Prática 2: Adicionando Estilo Básico
Agora vamos adicionar estilos à página que criamos usando CSS interno:
Dentro da tag <head>, adicione uma tag <style>
Defina uma cor de fundo para o body
Altere a cor do texto do título h1
Defina uma largura máxima para a imagem
Estilize o parágrafo com uma fonte diferente
Personalize o link para que mude de cor ao passar o mouse
<style>
 body {
 background-color: #f0f8ff;
 font-family: Arial, sans-serif;
 margin: 20px;
 }
 
 h1 {
 color: #2c3e50;
 text-align: center;
 }
 
 img {
 max-width: 100%;
 display: block;
 margin: 0 auto;
 }
 
 p {
 color: #34495e;
 line-height: 1.6;
 }
 
 a {
 color: #3498db;
 text-decoration: none;
 }
 
 a:hover {
 color: #e74c3c;
 text-decoration: underline;
 }
</style>
Atividade Prática 3: CSS Externo e Layout Flexbox
Passos para criar um arquivo CSS externo:
Crie um novo arquivo chamado estilos.css
Mova os estilos da tag <style> para este arquivo
Vincule o arquivo à sua página HTML usando a tag <link> no <head>
Agora vamos adicionar um layout de duas colunas usando Flexbox:
/* No arquivo estilos.css */
.container {
  display: flex;
  gap: 20px;
}

.coluna {
  flex: 1;
  padding: 15px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
Atualizando o HTML:
<!-- No arquivo index.html -->
<head>
 <title>Minha Primeira Página</title>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="estilos.css">
</head>
<body>
 <h1>Bem-vindo ao meu site</h1>
 
 <div class="container">
 <div class="coluna">
 <img src="foto.jpg" alt="Minha foto">
 </div>
 <div class="coluna">
 <p>Esta é minha primeira página...</p>
 <a href="https://www.google.com">
 Visite o Google
 </a>
 </div>
 </div>
</body>
Atividade Prática 4: Criando um Formulário de Contato
Vamos criar um formulário de contato básico para praticar os elementos de formulário:
Adicione uma nova seção à sua página
Crie um formulário com o elemento <form>
Adicione campos para nome, email e mensagem
Inclua labels adequados para cada campo
Adicione um botão de envio
Estilize o formulário com CSS
<h2>Entre em contato</h2>
<form>
 <div>
 <label for="nome">Nome:</label>
 <input type="text" id="nome" name="nome" 
 required>
 </div>
 
 <div>
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" 
 required>
 </div>
 
 <div>
 <label for="mensagem">Mensagem:</label>
 <textarea id="mensagem" name="mensagem" 
 rows="4" required></textarea>
 </div>
 
 <button type="submit">Enviar mensagem</button>
</form>
Resultado Esperado das Atividades
Ao completar as quatro atividades práticas, você terá criado um site simples com:
Estrutura e conteúdo (HTML)
Cabeçalho com título principal
Layout de duas colunas
Imagem e texto descritivo
Links para outros sites
Formulário de contato funcional
Aparência (CSS)
Cores personalizadas
Tipografia legível
Espaçamento adequado
Layout responsivo com Flexbox
Efeitos visuais em interações (hover)
Este site básico incorpora todos os conceitos que aprendemos até agora e serve como base para projetos mais complexos no futuro.
Revisão dos Conceitos
Arquitetura Web
O modelo cliente-servidor forma a base da web, com navegadores interpretando HTML/CSS e servidores fornecendo conteúdo e processando dados.
HTML
Estrutura o conteúdo da página com tags semânticas que definem a organização hierárquica dos elementos.
CSS
Estiliza e formata o conteúdo HTML, controla cores, fontes, espaçamentos e layouts através de seletores e propriedades.
Estes três pilares trabalham em conjunto para criar experiências web completas. O HTML fornece significado e estrutura, o CSS adiciona estilo e organização visual, enquanto a arquitetura web garante que tudo seja entregue e processado corretamente.
Tarefa para a Próxima Aula
Mini site pessoal
Crie um site pessoal simples que inclua:
Página inicial com seu nome, foto e breve descrição
Seção sobre seus interesses ou hobbies
Formulário de contato
Pelo menos 2 páginas interligadas
CSS externo com estilos personalizados
Layout responsivo usando Flexbox
Use todos os conceitos aprendidos nesta aula e pesquise recursos adicionais quando necessário.
Publicação do projeto
Após concluir seu site, publique-o gratuitamente em uma destas plataformas:
CodeSandbox: Ambiente de desenvolvimento online que permite editar e visualizar o código em tempo real
GitHub Pages: Serviço de hospedagem gratuito diretamente do seu repositório GitHub
Netlify: Plataforma de hospedagem gratuita com funcionalidades avançadas
Compartilhe o link do seu projeto para receber feedback na próxima aula.