Consulta de Códigos

carrinho correto

Tipo: Layout

….

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Carrinho de Compras</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f4f6fb; padding: 20px; }
        .container { width: 80%; max-width: 600px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        h1 { color: #ff7b00; text-align: center; }
        .item { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 0; }
        .total { font-size: 1.5rem; color: #ff7b00; text-align: right; margin-top: 20px; }
        button { background-color: #ff5e00; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 10px; }
        .limpar { background-color: #ccc; color: #333; }
    </style>
</head>
<body>

    <div class="container">
        <h1>🛒 Itens Selecionados</h1>
        <div id="lista-itens">
            </div>
        
        <div class="total">
            <strong>Total: R$ <span id="valor-total">0,00</span></strong>
        </div>

        <button onclick="alert('Pedido enviado!')">Finalizar Compra</button>
        <button class="limpar" onclick="limparCarrinho()">Esvaziar Carrinho</button>
        <button class="limpar" onclick="window.history.back()">Voltar para Motos</button>
    </div>

    <script>
        function carregarCarrinho() {
            const lista = document.getElementById('lista-itens');
            const totalDisplay = document.getElementById('valor-total');
            let carrinho = JSON.parse(localStorage.getItem('meuCarrinho')) || [];
            
            if (carrinho.length === 0) {
                lista.innerHTML = "<p>Seu carrinho está vazio.</p>";
                totalDisplay.innerText = "0,00";
                return;
            }

            let soma = 0;
            lista.innerHTML = "";
            
            carrinho.forEach((item) => {
                soma += item.preco;
                lista.innerHTML += `
                    <div class="item">
                        <span>${item.nome}</span>
                        <span>R$ ${item.preco.toLocaleString('pt-BR')}</span>
                    </div>
                `;
            });

            totalDisplay.innerText = soma.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
        }

        function limparCarrinho() {
            localStorage.removeItem('meuCarrinho');
            carregarCarrinho();
        }

        // Carrega os dados assim que a página abrir
        window.onload = carregarCarrinho;
    </script>
</body>
</html>

botão java

Tipo: Botão

java

<button onclick="adicionarAoCarrinho('Honda CRF 250', 75000)">Adicionar no carrinho</button>

java

Tipo: Outro

codigo jaja

<script>
    function adicionarAoCarrinho(nome, preco) {
        // 1. Busca o que já existe no carrinho (se não existir, cria uma lista vazia)
        let carrinho = JSON.parse(localStorage.getItem('meuCarrinho')) || [];

        // 2. Adiciona a nova moto na lista
        carrinho.push({ nome: nome, preco: preco });

        // 3. Salva a lista atualizada de volta no navegador
        localStorage.setItem('meuCarrinho', JSON.stringify(carrinho));

        alert(nome + " foi adicionada ao carrinho!");
    }
</script>

carrinho novo

Tipo: Layout

novo

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Carrinho Completo</title>
    <style>
        /* ===== SEU ESTILO ORIGINAL ===== */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6fb;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            max-width: 800px;
            margin: 40px auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
        }

        h1 { text-align: center; color: #5a4fcf; }
        h2 { color: #333; border-bottom: 2px solid #5a4fcf; padding-bottom: 5px; margin-top: 30px;}
        p { color: #555; line-height: 1.6; }

        /* ===== ESTILO DOS PRODUTOS ===== */
        .lista-produtos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }

        .produto-card {
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        /* ===== ESTILO DO CARRINHO ===== */
        .item-carrinho {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dotted #ccc;
        }

        .btn-remover {
            background-color: #ff4d4d;
            padding: 5px 10px;
            font-size: 12px;
            width: auto;
            margin: 0;
        }

        .total-box {
            text-align: right;
            font-size: 1.2rem;
            margin-top: 20px;
            color: #333;
        }

        /* ===== BOTÕES ===== */
        button {
            background-color: #5a4fcf;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: 0.3s;
        }

        button:hover { background-color: #483db0; }
        .btn-adicionar { width: 100%; }
        .btn-finalizar { width: 100%; background-color: #28a745; margin-top: 20px; }
        .btn-finalizar:hover { background-color: #218838; }
    </style>
</head>
<body>

    <div class="container">
        <h1>🛒 Loja Integrada</h1>

        <h2>Produtos Disponíveis</h2>
        <div class="lista-produtos">
            <div class="produto-card">
                <strong>Monitor LED</strong>
                <p>R$ 800,00</p>
                <button class="btn-adicionar" onclick="adicionar(1, 'Monitor LED', 800)">Adicionar</button>
            </div>
            <div class="produto-card">
                <strong>Teclado RGB</strong>
                <p>R$ 150,00</p>
                <button class="btn-adicionar" onclick="adicionar(2, 'Teclado RGB', 150)">Adicionar</button>
            </div>
        </div>

        <h2>Meu Carrinho</h2>
        <div id="carrinho-vazio">
            <p>Seu carrinho está vazio.</p>
        </div>
        <div id="itens-lista">
            </div>

        <div class="total-box">
            <strong>Total: R$ <span id="valor-total">0,00</span></strong>
        </div>

        <button class="btn-finalizar" onclick="finalizar()">Finalizar Compra</button>
    </div>

    <script>
        let carrinho = [];
        let total = 0;

        function adicionar(id, nome, preco) {
            carrinho.push({ id, nome, preco });
            atualizarCarrinho();
        }

        function remover(index) {
            carrinho.splice(index, 1);
            atualizarCarrinho();
        }

        function atualizarCarrinho() {
            const lista = document.getElementById('itens-lista');
            const placeholder = document.getElementById('carrinho-vazio');
            const totalDisplay = document.getElementById('valor-total');
            
            lista.innerHTML = "";
            total = 0;

            if (carrinho.length === 0) {
                placeholder.style.display = "block";
            } else {
                placeholder.style.display = "none";
                carrinho.forEach((item, index) => {
                    total += item.preco;
                    lista.innerHTML += `
                        <div class="item-carrinho">
                            <span>${item.nome} - R$ ${item.preco.toFixed(2)}</span>
                            <button class="btn-remover" onclick="remover(${index})">Remover</button>
                        </div>
                    `;
                });
            }
            totalDisplay.innerText = total.toFixed(2).replace('.', ',');
        }

        function finalizar() {
            if (carrinho.length > 0) {
                alert("Pedido processado com sucesso! Valor total: R$ " + total.toFixed(2));
                carrinho = [];
                atualizarCarrinho();
            } else {
                alert("Adicione pelo menos um item para finalizar.");
            }
        }
    </script>
</body>
</html>

Carrinho

Tipo: Layout

novo

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Minha Loja - Carrinho</title>

    <style>
        /* ===== ESTILO GERAL (Mantido do seu Diário) ===== */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6fb;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            max-width: 800px;
            margin: 40px auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
        }

        h1 {
            text-align: center;
            color: #5a4fcf;
        }

        h2 {
            color: #333;
            border-bottom: 2px solid #5a4fcf;
            padding-bottom: 5px;
            margin-top: 25px;
        }

        p {
            color: #555;
            line-height: 1.6;
        }

        /* ===== AJUSTES PARA O CARRINHO ===== */
        .item-carrinho {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .info-produto {
            flex-grow: 1;
        }

        .preco {
            font-weight: bold;
            color: #5a4fcf;
            margin-left: 20px;
        }

        .total-container {
            text-align: right;
            font-size: 1.2em;
            margin-top: 20px;
        }

        button {
            background-color: #5a4fcf;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            width: 100%; /* Botão largo para destaque */
        }

        button:hover {
            background-color: #483db0;

Carrinho

Tipo: Layout

aula de hj

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Carrinho de Compras</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Loja Tech</h1>
    </header>

    <main class="container">
        <section class="produtos">
            <div class="card" data-id="1" data-nome="Monitor Gamer" data-preco="1200">
                <h3>Monitor Gamer</h3>
                <p>R$ 1.200,00</p>
                <button class="btn-add">Adicionar ao Carrinho</button>
            </div>
            <div class="card" data-id="2" data-nome="Teclado Mecânico" data-preco="350">
                <h3>Teclado Mecânico</h3>
                <p>R$ 350,00</p>
                <button class="btn-add">Adicionar ao Carrinho</button>
            </div>
        </section>

        <aside class="carrinho">
            <h2>Seu Carrinho</h2>
            <ul id="itens-carrinho">
                </ul>
            <div class="total">
                <strong>Total: R$ <span id="valor-total">0.00</span></strong>
            </div>
            <button id="finalizar">Finalizar Compra</button>
        </aside>
    </main>

    <script src="script.js"></script>
</body>
</html>

duda

Tipo: Outro

bbb

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Carrossel de Imagens</title>

<style>
body{
    font-family: Arial;
    background:#f2f2f2;
    text-align:center;
}

.carrossel{
    width:600px;
    height:350px;
    margin:auto;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0px 4px 10px rgba(0,0,0,0.3);
    position:relative;
}

.slides{
    display:flex;
    transition:0.5s;
}

.slides img{
    width:600px;
    height:350px;
    object-fit:cover;
}

/* Botões */

.botao{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    color:white;
    border:none;
    font-size:25px;
    padding:10px;
    cursor:pointer;
}

#anterior{
    left:10px;
}

#proximo{
    right:10px;
}
</style>

</head>

<body>

<h1>Carrossel de Imagens</h1>

<div class="carrossel">

    <div class="slides" id="slides">

        <!-- IMAGEM 1 -->
        <img src="imagem1.jpg">

        <!-- IMAGEM 2 -->
        <img src="imagem2.jpg">

        <!-- IMAGEM 3 -->
        <img src="imagem3.jpg">

        <!-- IMAGEM 4 -->
        <img src="imagem4.jpg">

    </div>

    <!-- BOTÕES -->
    <button class="botao" id="anterior">&#10094;</button>
    <button class="botao" id="proximo">&#10095;</button>

</div>

<script>

let slideIndex = 0;

const slides = document.getElementById("slides");
const totalSlides = slides.children.length;

document.getElementById("proximo").onclick = () => {
    slideIndex++;
    if(slideIndex >= totalSlides){
        slideIndex = 0;
    }
    atualizarSlide();
}

document.getElementById("anterior").onclick = () => {
    slideIndex--;
    if(slideIndex < 0){
        slideIndex = totalSlides - 1;
    }
    atualizarSlide();
}

function atualizarSlide(){
    slides.style.transform = `translateX(-${slideIndex * 600}px)`;
}

</script>

</body>
</html>

aula 06/03

Tipo: Texto

Atividade do dia

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
  <title>Posicionamento com CSS</title>
  <link rel="stylesheet" href="colocar css" type="text/css">
</head>

<body>		

<div class="     ">
  <p>Esquerda em Cima</p>
</div>

<div class="   ">
  <p>Esquerda em Baixo</p>
</div>

<div class="     ">
  <p>Direita em Cima</p>
</div>

<div class="       ">
  <p>Direita em Baixo</p>
</div>

</body>

posicionamento de texto

Tipo: CSS

auxiliar na aula de 06/03

body {
  margin: 0;
  height: 100vh; /* ocupa toda a altura da tela */
  position: relative;
  font-family: Arial, sans-serif;
}

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 2px solid #333;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  position: absolute;
}

/* Esquerda em cima */
.esqcima {
  top: 0;
  left: 0;
}

/* Esquerda em baixo */
.esqbaixo {
  bottom: 0;
  left: 0;
}

/* Direita em cima */
.dircima {
  top: 0;
  right: 0;
}

/* Direita em baixo */
.dirbaixo {
  bottom: 0;
  right: 0;
}

CSS de textos

Tipo: Formulário

aaaa

Aqui está um exemplo completo dos códigos para posicionar os quatro blocos (esquerda em cima, esquerda em baixo, direita em cima e direita em baixo) usando **HTML** e **CSS**.  

### 📄 Arquivo `index2.html`
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Posicionamento com CSS</title>
  <link rel="stylesheet" href="posicionamento.css" type="text/css">
</head>
<body>		

<div class="esqcima">
  <p>Esquerda em Cima</p>
</div>

<div class="esqbaixo">
  <p>Esquerda em Baixo</p>
</div>

<div class="dircima">
  <p>Direita em Cima</p>
</div>

<div class="dirbaixo">
  <p>Direita em Baixo</p>
</div>

</body>
</html>
```

### 🎨 Arquivo `posicionamento.css`
```css
body {
  margin: 0;
  height: 100vh; /* ocupa toda a altura da tela */
  position: relative;
  font-family: Arial, sans-serif;
}

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 2px solid #333;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  position: absolute;
}

/* Esquerda em cima */
.esqcima {
  top: 0;
  left: 0;
}

/* Esquerda em baixo */
.esqbaixo {
  bottom: 0;
  left: 0;
}

/* Direita em cima */
.dircima {
  top: 0;
  right: 0;
}

/* Direita em baixo */
.dirbaixo {
  bottom: 0;
  right: 0;
}
```

👉 Com esse código, cada bloco ficará fixado em um dos cantos da tela, exatamente como descrito.  

Você gostaria que eu te mostrasse também uma versão alternativa usando **Flexbox** ou **Grid**, que são formas mais modernas e flexíveis de posicionar elementos?

aula 02/03/2026

Tipo: Layout

Aula

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Projeto Estrutura HTML</title>

    <style>
        /* ===== RESET BÁSICO ===== */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f4f6f9;
        }

        header{
            background-color: #1e3a8a;
            color: white;
            text-align: center;
            padding: 20px;
        }

        nav{
            background-color: #3b82f6;
            padding: 10px;
            text-align: center;
        }

        nav a{
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }

        section{
            padding: 20px;
            margin: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        footer{
            background-color: #1e3a8a;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 20px;
        }

        .area-exercicio{
            border: 2px dashed #999;
            padding: 20px;
            margin-top: 15px;
            background-color: #f9fafb;
        }
    </style>
</head>

<body>

    <!-- ===== CABEÇALHO ===== -->
    <header>
        <h1>Projeto de Estrutura HTML</h1>
        <h2>Atividade de Inserção de Elementos</h2>
        <p>Complete os espaços indicados pelo professor.</p>
    </header>

    <!-- ===== MENU ===== -->
    <nav>
        <a href="#">Home</a>
        <a href="#">Sobre</a>
        <a href="#">Contato</a>
    </nav>

    <!-- ===== SEÇÃO DE IMAGENS ===== -->
    <section>
        <h2>Área de Imagens</h2>
        <p>Os alunos devem inserir 4 tipos diferentes de imagens abaixo:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Imagem simples
                 2 - Imagem com width e height
                 3 - Imagem com link
                 4 - Imagem com borda personalizada
            -->
        </div>
    </section>

    <!-- ===== SEÇÃO DE BOTÕES ===== -->
    <section>
        <h2>Área de Botões</h2>
        <p>Os alunos devem inserir 4 tipos diferentes de botões:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Botão simples
                 2 - Botão com cor personalizada
                 3 - Botão com link
                 4 - Botão com efeito hover
            -->
        </div>
    </section>

    <!-- ===== SEÇÃO DE LISTAS ===== -->
    <section>
        <h2>Área de Listas</h2>
        <p>Os alunos devem inserir 2 tipos de listas:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Lista não ordenada (ul)
                 2 - Lista ordenada (ol)
            -->
        </div>
    </section>

    <!-- ===== SEÇÃO DE TABELAS ===== -->
    <section>
        <h2>Área de Tabelas</h2>
        <p>Os alunos devem inserir 2 tabelas diferentes:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Tabela simples (3 colunas)
                 2 - Tabela com thead e tbody
            -->
        </div>
    </section>

    <!-- ===== RODAPÉ ===== -->
    <footer>
        <p>Atividade de HTML - Desenvolva sua estrutura corretamente.</p>
    </footer>

</body>
</html>

Código mais fácil

Tipo: Layout

Mais fácil

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Diário</title>

    <style>
        /* ===== ESTILO GERAL ===== */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6fb;
            margin: 0;
            padding: 0;
        }

        /* ===== CONTAINER PRINCIPAL ===== */
        .container {
            width: 80%;
            max-width: 800px;
            margin: 40px auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
        }

        /* ===== TÍTULO PRINCIPAL ===== */
        h1 {
            text-align: center;
            color: #5a4fcf;
        }

        /* ===== SUBTÍTULOS ===== */
        h2 {
            color: #333;
            border-bottom: 2px solid #5a4fcf;
            padding-bottom: 5px;
        }

        /* ===== PARÁGRAFOS ===== */
        p {
            color: #555;
            line-height: 1.6;
        }

        /* ===== IMAGENS ===== */
        img {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 10px;
        }

        /* ===== BOTÕES ===== */
        button {
            background-color: #5a4fcf;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #483db0;
        }
    </style>
</head>

<body>

    <div class="container">

        <!-- TÍTULO PRINCIPAL -->
        <h1>📖 Meu Diário</h1>

        <!-- SOBRE MIM -->
        <h2>Sobre mim</h2>
        <p>
            Este é o meu diário pessoal. Aqui eu escrevo sobre meus dias,
            meus sentimentos, meus sonhos e momentos importantes da minha vida.
        </p>

        <!-- LOCAL PARA IMAGEM DE PERFIL -->
        <!-- Coloque aqui sua imagem -->
        <!-- Exemplo:
        <img src="minha-foto.jpg" alt="Minha foto">
        -->

        <!-- REGISTRO DO DIA -->
        <h2>Registro do Dia</h2>
        <p>
            Hoje foi um dia muito especial. Aconteceram várias coisas interessantes
            que quero guardar como lembrança.
        </p>

        <!-- LOCAL PARA IMAGEM DO DIA -->
        <!-- Exemplo:
        <img src="foto-do-dia.jpg" alt="Foto do dia">
        -->

        <!-- OBJETIVOS -->
        <h2>Meus Objetivos</h2>
        <p>
            Meus objetivos para os próximos dias são estudar mais,
            organizar minha rotina e continuar aprendendo coisas novas.
        </p>

        <!-- LOCAL PARA BOTÕES -->
        <button>Adicionar Novo Registro</button>
        <button>Salvar Diário</button>

    </div>

</body>
</html>

Aula 27/02

Tipo: Layout

Esse é um exemplo de codigo de home

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Home - Aula de HTML</title>

    <!-- Aqui futuramente podemos conectar um arquivo CSS externo -->
    <!-- <link rel="stylesheet" href="style.css"> -->

    <style>
        /* ===== ESTILIZAÇÃO BÁSICA (PODE SER REMOVIDA PARA AULA DE CSS) ===== */

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4f8;
            margin: 0;
            padding: 0;
        }

        .cabecalho {
            background-color: #003366;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .menu {
            background-color: #0055aa;
            padding: 10px;
            text-align: center;
        }

        .menu a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
        }

        .conteudo {
            padding: 30px;
        }

        .secao {
            margin-bottom: 40px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
        }

        .botao-primario {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .botao-secundario {
            background-color: #ffc107;
            color: black;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .botao-perigo {
            background-color: #dc3545;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .rodape {
            background-color: #003366;
            color: white;
            text-align: center;
            padding: 15px;
        }

    </style>
</head>

<body>

    <!-- ===== CABEÇALHO DA PÁGINA ===== -->
    <header class="cabecalho" id="topo">
        <h1>Bem-vindo ao Site da Escola</h1>
        <h2>Aprendendo HTML na prática</h2>
        <h3>Introdução ao Desenvolvimento Web</h3>
    </header>

    <!-- ===== MENU DE NAVEGAÇÃO ===== -->
    <nav class="menu" id="menu-principal">
        <!-- Aqui são links de navegação -->
        <a href="#">Início</a>
        <a href="#">Sobre</a>
        <a href="#">Projetos</a>
        <a href="#">Contato</a>
    </nav>

    <!-- ===== CONTEÚDO PRINCIPAL ===== -->
    <main class="conteudo" id="conteudo-principal">

        <!-- ===== SEÇÃO 1 ===== -->
        <section class="secao" id="secao-apresentacao">
            <h2>Sobre a Aula</h2>

            <p>
                Esta é uma página exemplo para aprendermos HTML.<br>
                Aqui utilizamos títulos, parágrafos, botões e divisões.
            </p>

            <p>
                O HTML é responsável pela estrutura do site.<br>
                Já o CSS será responsável pelas cores e estilização.
            </p>

            <!-- LOCAL PARA IMAGEM -->
            <!-- Professor pode pedir para os alunos inserirem uma imagem aqui -->
            <!-- Exemplo:
            <img src="imagem.jpg" alt="Descrição da imagem" class="imagem-apresentacao">
            -->

        </section>

        <!-- ===== SEÇÃO 2 ===== -->
        <section class="secao" id="secao-projetos">
            <h2>Projetos dos Alunos</h2>

            <h3>Projeto 1 - Página Pessoal</h3>
            <p>
                Cada aluno criará sua própria página utilizando as tags aprendidas.
            </p>

            <h3>Projeto 2 - Site da Escola</h3>
            <p>
                Desenvolveremos uma página institucional simples.
            </p>

            <!-- BOTÕES (3 TIPOS DIFERENTES) -->
            <button class="botao-primario" id="btn-saiba-mais">
                Saiba Mais
            </button>

            <button class="botao-secundario" id="btn-editar">
                Editar Projeto
            </button>

            <button class="botao-perigo" id="btn-excluir">
                Excluir Projeto
            </button>

        </section>

        <!-- ===== SEÇÃO 3 ===== -->
        <section class="secao" id="secao-contato">
            <h2>Contato</h2>

            <p>
                Caso tenha dúvidas, entre em contato com o professor.
            </p>

            <p>
                Email: professor@escola.com.br<br>
                Telefone: (00) 00000-0000
            </p>

            <!-- LOCAL PARA FUTURO FORMULÁRIO -->
            <!-- Aqui os alunos poderão adicionar um <form> futuramente -->

        </section>

    </main>

    <!-- ===== RODAPÉ ===== -->
    <footer class="rodape" id="rodape">
        <p>© 2026 - Aula de Introdução ao HTML</p>
    </footer>

</body>
</html>

Atividade deimproviso

Tipo: Outro

mudem partes do codigo até ficar parecida com seu texto

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <style>
        body { background-color: #F3E5F5; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
        .moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
        h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
        .paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
        .superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
        .imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
        footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
    </style>
</head>
<body>
    <div class="moldura-reflexiva">
        <h1>Como assim sou quase adulto?</h1>
        <p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
        <ul class="superpoderes">
            <li>O direito de votar e decidir caminhos</li>
            <li>A gestão estratégica do próprio tempo</li>
            <li>O início da independência financeira</li>
            <li>A construção da própria identidade</li>
        </ul>
        <img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
        <footer>Crescer é um processo corajoso</footer>
    </div>
</body>
</html>

Aula 23/02

Tipo: Outro

Boa sorte

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <style>
        .moldura-central {
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 15px;
            border: 2px solid #003366;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="moldura-central">

Aula 23/02

Tipo: CSS

Pedaço dos códigos Boa Sorte

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <style>
        .moldura-central {
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 15px;
            border: 2px solid #003366;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="moldura-central">

Passo a Passo para criar tabelas no XAMPP

Tipo: Texto

1. Acesse o phpMyAdmin

Abra o XAMPP e inicie Apache e MySQL

Vá para http://localhost/phpmyadmin

2. Crie o banco de dados

Clique em Novo no menu lateral

Nomeie como diario e clique em Criar

3. Crie a tabela manualmente

Clique no banco diario na lista à esquerda

Em "Criar nova tabela", digite o nome: entradas

Número de colunas: 3

Clique em Executar

4. Preencha os campos da tabela

Nome	Tipo	Comprimento/Valores	A_I (Auto Increment)	Índice	Nulo
id	INT	(deixe em branco)	✅	PRIMARY	❌
data	DATE	(deixe em branco)			❌
texto	TEXT	(deixe em branco)			❌

Marque A_I (Auto Increment) para o campo id

Em Índice, selecione PRIMARY para o campo id

Clique em Salvar

top

SQL

Tipo: Outro

Sql Comando para criação de tabela no XAMPP

CREATE TABLE entradas (
    id INT AUTO_INCREMENT PRIMARY KEY,
    data DATE NOT NULL,
    texto TEXT NOT NULL
);

DB.PHP- Para a aula de 03/11

Tipo: Outro

Conexão dos codigos com o banco de dados XAMPP

<?php
$host = 'localhost';
$usuario = 'root';
$senha = '';
$banco = 'diario';

$conn = new mysqli($host, $usuario, $senha, $banco);

if ($conn->connect_error) {
    die("Erro na conexão: " . $conn->connect_error);
}
?>

INDEX PHP- AULA 03/11

Tipo: Outro

Pagina inicial exemplo para a introdução do php

<?php include 'db.php'; ?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Diário</title>
</head>
<body>
    <h1>Como foi seu dia?</h1>
    <form method="POST">
        <label for="data">Data:</label>
        <input type="date" name="data" required><br><br>

        <label for="texto">Relato:</label><br>
        <textarea name="texto" rows="6" cols="50" required></textarea><br><br>

        <button type="submit">Salvar</button>
    </form>

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $data = $_POST['data'];
        $texto = $_POST['texto'];

        $stmt = $conn->prepare("INSERT INTO entradas (data, texto) VALUES (?, ?)");
        $stmt->bind_param("ss", $data, $texto);

        if ($stmt->execute()) {
            echo "<p>Entrada salva com sucesso!</p>";
        } else {
            echo "<p>Erro ao salvar: " . $stmt->error . "</p>";
        }

        $stmt->close();
    }

    // Mostrar entradas anteriores
    $result = $conn->query("SELECT * FROM entradas ORDER BY data DESC");

    echo "<h2>Entradas anteriores:</h2>";
    while ($row = $result->fetch_assoc()) {
        echo "<p><strong>" . $row['data'] . "</strong>: " . nl2br($row['texto']) . "</p><hr>";
    }

    $conn->close();
    ?>
</body>
</html>

BeatShelf — Layout para Músicas

Tipo: Layout

Estrutura:

Header com navegação: Início, Playlists, Artistas, Gêneros, Login

Seção de destaque: Álbum com imagem e descrição

Mini player fixo: Sempre visível no rodapé, com controles de reprodução

Listas em grid: “Mais tocadas” e “Novos lançamentos” com cards estilizados

Musicas
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>BeatShelf</title>
  <style>
    .controls button {
      background: var(--accent);
      border: 0;
      padding: 10px 14px;
      border-radius: 8px;
      color: #071127;
      font-weight: 700;
    }

    .lists {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      padding: 0 30px 60px;
    }

    .card {
      background: var(--glass);
      padding: 14px;
      border-radius: 10px;
    }

    .mini-player {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #050814;
      padding: 12px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .mini-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .mini-left img {
      width: 48px;
      height: 48px;
      border-radius: 6px;
    }

    @media (max-width: 900px) {
      .hero {
        grid-template-columns: 1fr;
      }

      .lists {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
<header>
<div class="logo">BeatShelf</div>
<nav>
<a href="#">Início</a>
<a href="#">Playlists</a>
<a href="#">Artistas</a>
<a href="#">Gêneros</a>
<a href="#">Login</a>
</nav>
</header>

<section class="hero">
<div class="cover">
<h2>Álbum em destaque</h2>
<img src="https://via.placeholder.com/900x400.png?text=Capa+do+Álbum" alt="capa"/>
<p style="color:var(--muted);margin-top:10px">Novo lançamento — artista X</p>
</div>
<aside class="player card">
<div class="player">
<div class="track-title">Nome da faixa — Artista</div>
<div class="controls">
<button>⏮</button>
<button style="padding:12px 18px">▶</button>
<button>⏭</button>
</div>
<p style="color:var(--muted)">00:42 / 03:21</p>
</div>
</aside>
</section>

<section class="lists">
<div class="card">
<h3>Mais tocadas</h3>
<ul style="list-style:none;padding:0;margin:0">
<li style="padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03)">1. Faixa A — Artista</li>
<li style="padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03)">2. Faixa B — Artista</li>
<li style="padding:10px 0">3. Faixa C — Artista</li>
</ul>
</div>
<div class="card">
<h3>Novos lançamentos</h3>
<div style="display:flex;gap:10px;overflow-x:auto;padding-top:8px">
<img src="https://via.placeholder.com/120" alt="capa" style="border-radius:8px">
<img src="https://via.placeholder.com/120" alt="capa" style="border-radius:8px">
<img src="https://via.placeholder.com/120" alt="capa" style="border-radius:8px">
</div>
</div>
</section>

<div class="mini-player">
<div class="mini-left">
<img src="https://via.placeholder.com/80" alt="capa">
<div>
<div style="font-weight:600">Faixa em reprodução</div>
<div style="color:var(--muted)">Artista • Álbum</div>
</div>
</div>
<div>
<button style="padding:8px 12px;border-radius:8px;border:0">▶</button>
</div>
</div>
</body>
</html>

Como usar em um texto HTML:

Tipo: Texto

Este é um exemplo usando a fonte Brush Script MT.

</p>

abela com 30 Fontes para Usar no HTML
Nº
Nome da Fonte
Exemplo de Uso no HTML
1
Arial
style="font-family: Arial;"
2
Verdana
style="font-family: Verdana;"
3
Tahoma
style="font-family: Tahoma;"
4
Trebuchet MS
style="font-family: 'Trebuchet MS';"
5
Times New Roman
style="font-family: 'Times New Roman';"
6
Georgia
style="font-family: Georgia;"
7
Garamond
style="font-family: Garamond;"
8
Courier New
style="font-family: 'Courier New';"
9
Lucida Console
style="font-family: 'Lucida Console';"
10
Monaco
style="font-family: Monaco;"
11
Impact
style="font-family: Impact;"
12
Comic Sans MS
style="font-family: 'Comic Sans MS';"
13
Palatino Linotype
style="font-family: 'Palatino Linotype';"
14
Segoe UI
style="font-family: 'Segoe UI';"
15
Century Gothic
style="font-family: 'Century Gothic';"
16
Calibri
style="font-family: Calibri;"
17
Candara
style="font-family: Candara;"
18
Franklin Gothic Medium
style="font-family: 'Franklin Gothic Medium';"
19
Gill Sans
style="font-family: 'Gill Sans';"
20
Optima
style="font-family: Optima;"
21
Perpetua
style="font-family: Perpetua;"
22
Book Antiqua
style="font-family: 'Book Antiqua';"
23
Consolas
style="font-family: Consolas;"
24
MS Serif
style="font-family: 'MS Serif';"
25
MS Sans Serif
style="font-family: 'MS Sans Serif';"
26
Brush Script MT
style="font-family: 'Brush Script MT';"
27
Rockwell
style="font-family: Rockwell;"
28
Baskerville
style="font-family: Baskerville;"
29
Courier
style="font-family: Courier;"
30
Futura
style="font-family: Futura;"

Salvar Dados da Tabela (Exibir em Alerta)

Tipo: Outro

Função: Coleta os dados da tabela e exibe em uma janela de alerta.

Uso comum: Pré-visualização de informações antes de enviar ou salvar.

function salvarTabela() {
  let tabela = document.getElementById("minhaTabela");
  let dados = "";
  for (let i = 1; i < tabela.rows.length; i++) {
    let produto = tabela.rows[i].cells[0].innerText;
    let preco = tabela.rows[i].cells[1].innerText;
    dados += `Produto: ${produto}, Preço: ${preco}\n`;
  }
  alert("Dados da Tabela:\n" + dados);
}

Remover Última Linha com Botão

Tipo: Outro

Função: Remove a última linha da tabela, evitando apagar o cabeçalho.

Uso comum: Ajustes em tempo real, exclusão de itens.

function removerLinha() {
  let tabela = document.getElementById("minhaTabela");
  if (tabela.rows.length > 1) {
    tabela.deleteRow(-1);
  }
}

Adicionar Nova Linha com Botão

Tipo: Outro

Função: Insere uma nova linha editável na tabela ao clicar no botão.

Uso comum: Listas de compras, pedidos, cadastros dinâmicos.

function adicionarLinha() {
  let tabela = document.getElementById("minhaTabela");
  let novaLinha = tabela.insertRow();
  let celula1 = novaLinha.insertCell(0);
  let celula2 = novaLinha.insertCell(1);
  celula1.contentEditable = true;
  celula2.contentEditable = true;
  celula1.innerText = "Novo Produto";
  celula2.innerText = "0.00";
}

Tabela HTML Editável

Tipo: Outro

Função: Permite que o usuário edite diretamente o conteúdo das células no navegador.

Uso comum: Formulários dinâmicos, planilhas simples, protótipos interativos.

<td contenteditable="true">Maria</td>

Mover Texto com Margens Laterais

Tipo: Outro

Função: Posiciona o texto com espaçamento lateral.

Uso comum: Ajustes finos em layout, destaque de blocos específicos.

<!-- Direita -->
<div style="margin-left: 100px;">...</div>

<!-- Esquerda -->
<div style="margin-right: 100px;">...</div>

<!-- Personalizado -->
<div style="margin: 50px 150px;">...</div>

Reduzir Largura do Texto (Margens Laterais)

Tipo: Outro

Função: Limita a largura do texto e centraliza o bloco.

Uso comum: Layouts responsivos e leitura confortável.

<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <p>Este parágrafo está centralizado com largura limitada.</p>
</div>

Estilo Geral de Fonte para Toda a Página

Tipo: CSS

Função: Define estilo padrão para todo o conteúdo da página.

Uso comum: Uniformizar visual e melhorar legibilidade.

<style>
  body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
  }
</style>

Colocar Texto em Negrito

Tipo: Outro

Função: Destaca o texto visualmente.

Diferença:

<b>: apenas visual

<strong>: semântico (indica importância para leitores de tela)

<p><b>Texto em negrito com &lt;b&gt;</b></p>
<p><strong>Texto em negrito com &lt;strong&gt;</strong></p>

Alinhar Texto à Direita, Esquerda ou Centro

Tipo: Outro

Função: Controle total sobre o alinhamento horizontal.

Uso comum: Layouts personalizados, rodapés, cabeçalhos.

<p style="text-align: right;">Texto à direita</p>
<p style="text-align: left;">Texto à esquerda</p>
<p style="text-align: center;">Texto centralizado</p>

Justificar um Texto

Tipo: Outro

Função: Alinha o texto uniformemente nas margens esquerda e direita.

Uso comum: Textos longos, como artigos ou relatórios.

<p style="text-align: justify;">
  Este parágrafo está com o texto justificado.
</p>

Centralizar um Texto

Tipo: Outro

Função: Alinha o conteúdo horizontalmente ao centro.

Uso comum: Títulos, chamadas visuais, blocos de destaque.

<h2 style="text-align: center;">Título Centralizado</h2>
<p style="text-align: center;">Este parágrafo está centralizado também.</p>

Mudar a Fonte da Letra

Tipo: Outro

Função: Aplica uma fonte monoespaçada (tipo máquina de escrever).

Uso comum: Exibir códigos ou dar estilo retrô.

<p style="font-family: 'Courier New', monospace;">
  Este texto está com a fonte Courier New.
</p>

Novo Texto com Estilo

Tipo: Outro

Função: Define tamanho e cor do texto diretamente no parágrafo.

Uso comum: Destaque visual em seções específicas.

<p style="font-size: 18px; color: #333333;">
  Este é um novo parágrafo com estilo personalizado.
</p>

Link para Outra Página

Tipo: Outro

Função: Cria um link clicável que leva o usuário para outro site.

Atributos importantes:

href: define o endereço do link

target="_blank": abre o link em uma nova aba do navegador

Uso comum: Referências externas, fontes de informação, links úteis

🔍 Visual: O texto “G1” aparece como um link azul sublinhado. Ao clicar, o usuário é levado ao site de notícias G1 em uma nova aba.

<p>
  Veja mais notícias em <a href="https://www.g1.com.br" target="_blank">G1</a>.
</p>

Inserir Vídeo do YouTube

Tipo: Outro

Função: Embeda (insere) um vídeo do YouTube diretamente na página.

Atributos importantes:

src: o link do vídeo no formato https://www.youtube.com/embed/ID_DO_VIDEO (substitua ID_DO_VIDEO pelo código do vídeo)

width e height: definem o tamanho do player

allowfullscreen: permite que o vídeo seja assistido em tela cheia

Uso comum: Tutoriais, apresentações, vídeos explicativos ou promocionais

<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_DO_VIDEO" 
title="YouTube video player" frameborder="0" allowfullscreen></iframe>

Imagem que Também é um Botão

Tipo: Imagem

Função: Torna a imagem clicável, como um botão

Uso comum: Banners promocionais, links visuais

Destaque: cursor: pointer indica que é interativo

<img src="Nome da imagem"
     onclick="window.location.href='local pra onde ela vai'"
     style="cursor: pointer;">

Usando uma Tabela

Tipo: Imagem

Função: Organiza imagem e texto em colunas

Uso comum: Estruturas fixas, relatórios, prints

Limitação: Menos flexível para layouts responsivos

<table>
  <tr>
    <td><img src="sua_imagem.jpg" width="200"></td>
    <td>Texto ao lado da imagem.</td>
  </tr>
</table>

Usando Flexbox (forma moderna e responsiva)

Tipo: Imagem

Função: Alinha imagem e texto lado a lado com controle moderno

Vantagens: Responsivo, fácil de centralizar verticalmente

Uso comum: Interfaces modernas, cards, seções de destaque

<div style="display: flex; align-items: center;">
  <img src="sua_imagem.jpg" style="margin-right: 20px;">
  <p>Texto alinhado horizontalmente com a imagem.</p>
</div>

Usando float (forma simples)

Tipo: Imagem

Função: Faz a imagem “flutuar” à esquerda e o texto se ajusta ao lado

Uso comum: Artigos, blogs, layouts simples

<img src="sua_imagem.jpg" style="float: left; margin-right: 20px;">
<p>Texto ao lado da imagem.</p>

Posicionar Imagem com position: absolute

Tipo: Imagem

Função: Posiciona a imagem em coordenadas exatas dentro de um contêiner

Uso comum: Sobreposição de elementos, layouts personalizados

Importante: O contêiner precisa ter position: relative

<div style="position: relative;">
  <img src="sua_imagem.jpg" style="position: absolute; top: 50px; left: 100px;">
</div>

Mover Imagem com Margens

Tipo: Imagem

Função: Adiciona espaço à esquerda da imagem

Uso comum: Ajustar posicionamento fino sem alterar o layout geral

Mover Imagem para os Lados ou Centralizar

Tipo: Imagem

Função: Posiciona a imagem à esquerda, direita ou centro

Técnicas usadas: float para esquerda/direita, text-align: center para centralizar

Uso comum: Layouts com texto ao lado da imagem ou imagens centralizadas

<!-- Direita -->
<img src="sua_imagem.jpg" style="float: right;">

<!-- Esquerda -->
<img src="sua_imagem.jpg" style="float: left;">

<!-- Centralizada -->
<div style="text-align: center;">
  <img src="sua_imagem.jpg">
</div>

Adicionar Imagem

Tipo: Imagem

Função: Exibe uma imagem na página.

Atributos:

src: caminho da imagem

alt: texto alternativo (acessibilidade)

width: define a largura da imagem

Uso comum: Inserir imagens ilustrativas, banners, fot

Botão com efeito hover (CSS)

Tipo: CSS

Função: Cria um botão estilizado com efeito visual ao passar o mouse.

Uso comum: Interfaces modernas e atraentes.

Destaque: Usa CSS para definir cor, borda, espaçamento e efeito hover.

<style>
  .meu-botao {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .meu-botao:hover {
    background-color: #0056b3;
  }
</style>

<button class="meu-botao">Botão Estilizado</button>

Botão que muda cor de texto

Tipo: Botão

Função: Altera a cor do texto para vermelho ao clicar no botão.

Uso comum: Interações visuais, feedback dinâmico.

Destaque: Manipula o estilo CSS diretamente via JavaScript.

<p id="meutexto">Texto que mudará de cor.</p>
<button onclick="document.getElementById('meutexto').style.color = 'red';">Mudar Cor</button>

Botão com Alerta

Tipo: Botão

Função: Exibe uma janela de alerta com uma mensagem personalizada.

Uso comum: Testes, notificações rápidas ou interações simples.

Destaque: Usa alert() para mostrar uma caixa de diálogo.

<button onclick="alert('Você clicou no botão!')">Mostrar Alerta</button>

Botão com Link

Tipo: Botão

Função: Redireciona o usuário para o site do Google ao clicar.

Uso comum: Navegação entre páginas ou sites externos.

Destaque: Usa onclick com window.location.href para simular um link.

<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>

Botão Simples

Tipo: Botão

Função: Cria um botão básico sem nenhuma ação associada.

Uso comum: Interface visual, aguardando que o JavaScript defina uma ação.

Visual: Apenas o texto “Clique Aqui” dentro de um botão padrão do navegador

<button>Clique Aqui</button>

Tabela de Dados

Tipo: Outro

Essa tabela é usada para exibir dados pessoais ou administrativos, com estilo mais refinado e bordas visíveis.

Tag usada: <table> com border-collapse para unir bordas

Cabeçalho: <th> com estilo personalizado

Linhas de dados: <tr> com <td> para cada célula

Estilo: Fundo cinza claro no cabeçalho, bordas pretas e espaçamento interno

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid #000; padding: 10px;">Nome</th>
    <th style="border: 1px solid #000; padding: 10px;">Idade</th>
    <th style="border: 1px solid #000; padding: 10px;">Cidade</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding: 10px;">Maria</td>
    <td style="border: 1px solid #000; padding: 10px;">25</td>
    <td style="border: 1px solid #000; padding: 10px;">São Paulo</td>
  </tr>
</table>

Tabela nutricional ou cronograma

Tipo: Outro

Esse código exibe uma tabela com bordas e espaçamento, ideal para informações organizadas como dados nutricionais ou cronogramas.

Tag usada: <table> com atributos visuais (border, cellpadding, cellspacing)

Cabeçalho: <th> define os títulos das colunas

Linhas de dados: <tr> com <td> para cada célula

Estilo: Fundo cinza no cabeçalho, branco no corpo

<table border="1" cellpadding="10" cellspacing="0" style="margin-top: 20px; background-color: #fff;">
  <tr style="background-color: #ccc;">
    <th>Item</th>
    <th>Quantidade</th>
    <th>Calorias</th>
  </tr>
  <tr>
    <td>Açúcar</td>
    <td>100g</td>
    <td>387 kcal</td>
  </tr>
</table>

Lista não ordenada

Tipo: Texto

Esse código cria uma lista com marcadores, usada para listar itens sem ordem específica.

Tag usada: <ul> (unordered list)

Cada item: <li> representa um ingrediente ou elemento

Exemplo de uso: Lista de compras, ingredientes, tópicos

Visual: Os itens aparecem com bolinhas ou outros marcadores

<ul>
  <li>3 cenouras médias</li>
  <li>4 ovos</li>
  <li>1 xícara de óleo</li>
  <li>2 xícaras de açúcar</li>
</ul>

Lista ordenada

Tipo: Texto

Esse código cria uma lista numerada, ideal para instruções passo a passo, como receitas ou tutoriais.

Tag usada: <ol> (ordered list)

Cada item: <li> representa uma etapa

Exemplo de uso: Receita de bolo, instruções de montagem, guia de tarefas

Visual: Os itens aparecem com números (1, 2, 3...)

<ol>
  <li>Preaqueça o forno a 180°C.</li>
  <li>Bata os ingredientes no liquidificador.</li>
  <li>Despeje em uma forma untada.</li>
  <li>Asse por 40 minutos.</li>
</ol>

botão

Tipo: Botão

um breve codigo sobre botão

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $tipo = trim($_POST['tipo'] ?? '');
    $titulo = trim($_POST['titulo'] ?? '');
    $descricao = trim($_POST['descricao'] ?? '');
    $codigo = trim($_POST['codigo'] ?? '');

    if ($tipo === '' || $titulo === '' || $descricao === '' || $codigo === '') {
        echo "<div style='color:red; text-align:center;'>Todos os campos são obrigatórios.</div>";
    } else {
        $sql = "INSERT INTO codigos (tipo, titulo, descricao, codigo, criado_em)
                VALUES (:tipo, :titulo, :descricao, :codigo, NOW())";

        try {
            $stmt = $pdo->prepare($sql);
            $stmt->bindParam(':tipo', $tipo);
            $stmt->bindParam(':titulo', $titulo);
            $stmt->bindParam(':descricao', $descricao);
            $stmt->bindParam(':codigo', $codigo);
            $stmt->execute();
            header("Location: ".$_SERVER['PHP_SELF']."?sucesso=1");
            exit;
        } catch (PDOException $e) {
            echo "<div style='color:red; text-align:center;'>Erro ao inserir: " . $e->getMessage() . "</div>";
        }
    }
}