LAB – 10/03/2026

Por /

Revisando tecnologias

1. HTML (Estrutura da Página)

O HTML (HyperText Markup Language) é a linguagem usada para criar a estrutura de uma página web.

Ele define elementos como:

  • títulos
  • parágrafos
  • imagens
  • formulários
  • tabelas
  • botões

Exemplo simples de HTML

<h1>Minha página</h1><p>Bem-vindo à minha loja online.</p><img src="mouse.jpg"><button>adquirir</button>

No projeto de produtos usamos HTML para:

  • criar o formulário de cadastro
  • mostrar os produtos na tela
  • criar tabelas para listagem
  • mostrar imagens e botões

2. CSS (Estilo da Página)

O CSS (Cascading Style Sheets) é utilizado para deixar a página bonita.

Ele controla:

  • cores
  • fontes
  • tamanho de textos
  • espaçamento
  • layout da página

Exemplo simples de CSS

body{
    font-family: Arial;
    background-color: #f4f4f4;
}h1{
    color: blue;
}

No projeto usamos CSS para:

  • organizar os produtos em caixas
  • mudar cores e fontes
  • deixar a página mais organizada e agradável

Sem CSS, as páginas ficariam muito simples.

3. JavaScript (Interatividade)

O JavaScript é a linguagem usada para adicionar interatividade nas páginas web.

Ele permite:

  • validar formulários
  • criar animações
  • reagir a cliques de botões
  • alterar conteúdo da página

Exemplo simples

function mensagem(){
    alert("Produto adicionado!");
}
<button onclick="mensagem()">Comprar</button>

Quando o usuário clicar no botão, aparecerá uma mensagem na tela.

No projeto de produtos, o JavaScript pode ser usado para:

  • validar o formulário de cadastro
  • mostrar mensagens ao usuário
  • atualizar elementos da página

4. PHP (Lógica do Sistema)

O PHP é uma linguagem que roda no servidor.

Ele é responsável pela lógica do sistema.

Com PHP podemos:

  • receber dados de formulários
  • conectar ao banco de dados
  • salvar informações
  • buscar dados no banco
  • gerar páginas HTML automaticamente

Exemplo simples

<?php$nome = $_POST['nome'];echo "Produto cadastrado: " . $nome;?>

No projeto usamos PHP para:

  • inserir produtos no banco
  • listar produtos cadastrados
  • conectar ao banco MySQL
  • executar comandos SQL

5. MySQL / SQL (Banco de Dados)

O MySQL é um sistema de banco de dados usado para armazenar informações.

Já o SQL (Structured Query Language) é a linguagem usada para manipular os dados do banco.

No nosso projeto o banco guarda informações como:

  • nome do produto
  • descrição
  • preço
  • imagem

Criando a tabela de produtos

CREATE TABLE produtos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(100),
    descricao TEXT,
    preco DECIMAL(10,2),
    imagem VARCHAR(255)
);

Inserindo um produto

INSERT INTO produtos (nome, descricao, preco, imagem)
VALUES ('Mouse Gamer', 'Mouse com LED', 89.90, 'mouse.jpg');

Listando produtos

SELECT * FROM produtos;

Como tudo funciona junto

No sistema web, as tecnologias trabalham juntas da seguinte forma:

1️⃣ HTML cria a estrutura da página
2️⃣ CSS deixa a página bonita
3️⃣ JavaScript adiciona interatividade
4️⃣ PHP processa os dados no servidor
5️⃣ MySQL armazena as informações

Fluxo simplificado

Usuário preenche formulário
↓
HTML envia dados
↓
PHP recebe os dados
↓
PHP executa SQL
↓
MySQL salva os dados
↓
PHP busca os produtos
↓
HTML mostra na tela

Conclusão

Essas tecnologias formam a base de uma das maneiras utilizadas no desenvolvimento web tradicional.

Elas permitem criar sistemas como:

  • lojas virtuais
  • sistemas de cadastro
  • blogs
  • plataformas administrativas

Mesmo projetos simples, como um cadastro de produtos, já utilizam várias dessas tecnologias trabalhando juntas.

ATIVIDADE DE LABORATÓRIO

  1. Acesse o material da disciplina e baixe o projeto.zip no endereço: https://ciro.dev.br/lab/
  2. Após extrair os arquivos, no arquivo produtos.html, ao ser aberto no navegador, percebe-se que a página não exibe as imagens. Corrija o problema das imagens:
    • Baixe 03 imagens da internet
    • Salve as imagens na mesma pasta do arquivo produtos.html
    • Altere o código HTML da página para exibir as 03 imagens baixadas

Rolar para cima