Consulta de Códigos

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

" data-tipo="outro">

Passo a Passo para criar tabelas no XAMPP

Tipo: Outro

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>

este é um exemplo usando a fonte brush script mt.

</p>

" data-tipo="outro">

Como usar em um texto HTML:

Tipo: Outro

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: Outro

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>

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.

" data-tipo="outro">

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: Botão

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: Outro

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: Outro

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>";
        }
    }
}