CursosTutoriais & Dicas Maiores Dicas de HTML: Tudo o que Você Precisa Saber para Começar Por Redação junho 24, 2024 Por Redação junho 24, 2024 0 Comente Compartilhe 0FacebookTwitterPinterestEmail 1,1K Aprenda os conceitos essenciais de HTML com este guia completo para iniciantes. Abrange desde elementos e atributos HTML até a criação e formatação de páginas web, com exemplos claros e explicações detalhadas. O cheatsheet de HTML é um recurso valioso para qualquer pessoa que trabalhe com HTML, oferecendo acesso rápido a elementos, atributos, tags, formulários e containers comuns. Seja você um iniciante ou um desenvolvedor experiente, este cheatsheet pode economizar tempo e melhorar sua produtividade. É uma ferramenta essencial, proporcionando uma coleção abrangente de trechos de código e exemplos ao seu alcance. Estrutura Geral da Página <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Exemplo</title> </head> <body> </body> </html> Comentários <!-- Este é um comentário --> Os comentários são ignorados pelo navegador. Use-os para anotações no código. Tags de Texto Títulos <h1>Título 1</h1> <h2>Título 2</h2> <h3>Título 3</h3> <h4>Título 4</h4> <h5>Título 5</h5> <h6>Título 6</h6> Nota: Só deve haver um <h1> por página. Parágrafo <p>Este é um parágrafo.</p> Listas Lista não Ordenada <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Nota: <ul> só pode ter <li> como filhos diretos. Lista Ordenada <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Adiciona números à frente de cada item da lista. Listas Aninhadas <ul> <li>Item 1</li> <li>Item 2</li> <li> <strong>Sublista</strong> <ul> <li>Subitem 1</li> <li>Subitem 2</li> </ul> </li> </ul> Links Link Externo <a href="https://www.example.com">Exemplo</a> <a href="https://www.example.com" target="_blank">Exemplo</a> <a href="https://www.example.com" target="_blank" title="Exemplo">Exemplo</a> Nota: target="_blank" abre o link em uma nova janela. Link de Email <a href="mailto:email@example.com">Envie um email</a> Link Âncora <a href="#section">Ir para a seção</a> <div id="section">Seção de destino</div> Link para uma seção na mesma página. Separadores Quebra de Linha Texto com <br /> quebra de linha. Linha Horizontal Texto acima<hr />Texto abaixo Atributos Classes <a href="https://www.example.com" class="link">Exemplo</a> <div class="header important">Cabeçalho</div> Ids <a href="https://www.example.com" id="link-id">Exemplo</a> Ids devem ser únicos em uma página. Containers Div <div>Exemplo</div> <div class="container">Exemplo</div> Elemento de bloco, usado para agrupar conteúdo. Span <span>Exemplo</span> <span class="highlight">Exemplo</span> Elemento inline, usado para agrupar conteúdo dentro de uma linha de texto. Tags de Mídia Imagem <img src="imagem.jpg" alt="Descrição da imagem" width="400" /> Vídeo <video src="video.mp4" controls></video> Áudio <audio controls src="audio.mp3"></audio> Tags de Formulário Formulário <form action="/submit"> <label for="name">Nome:</label> <input type="text" id="name" name="name" required /> <input type="submit" value="Enviar" /> </form> Botão <button class="button">Clique aqui</button> Estilização Negrito <strong>Texto em negrito</strong> Itálico <em>Texto em itálico</em> CSS no HTML CSS Interno <head> <style> body { background: #f8f5ff; } h1 { color: purple; text-align: center; } </style> </head> CSS Externo <head> <link rel="stylesheet" href="style.css" /> </head> JavaScript no HTML JavaScript Interno <body> <h1>Exemplo</h1> <script> alert("Hello, World!"); </script> </body> JavaScript Externo <body> <h1>Exemplo</h1> <script src="script.js"></script> </body> SEO Título <title>Título do Site - Marca</title> Meta Descrição <head> <meta name="description" content="Descrição do site."> </head> Tabelas Estrutura da Tabela <table> <thead> <tr> <th>Nome</th> <th>Sobrenome</th> <th>Nacionalidade</th> </tr> </thead> <tbody> <tr> <td>João</td> <td>Silva</td> <td>Brasileiro</td> </tr> <tr> <td>Ana</td> <td>Souza</td> <td>Brasileira</td> </tr> </tbody> </table> Esta cheatsheet de HTML cobre os conceitos básicos e avançados, facilitando o aprendizado e a referência rápida para desenvolvedores de todos os níveis. CódigoCSSCursosdestaquesHTMLHTML5JavaScriptPáginas WebProgramaçãoSiteTutoriaisWeb Compartilhe 0 FacebookTwitterPinterestEmail Redação Posts anteriores Rockstar Abre Vaga de Emprego no Brasil! Veja Como se Inscrever Próximo post Adeus, Android! Huawei lança sistema operacional ‘construído do zero’ Você também pode gostar Confira os 40 Melhores Sites para Conquistar o Sonho do Trabalho Remoto... outubro 10, 2024 Permissão de pastas e arquivos: Para que serve isso setembro 12, 2024 Domine os Atalhos do VS Code e Torne-se um Ninja da Produtividade!... setembro 7, 2024 Como Criar Imagens com IA no Midjourney Sem o Discord: Veja Como... setembro 4, 2024 Escrevendo CSS como um Ninja: A Nova Sintaxe SCSS Nativa agosto 28, 2024 Kanban nos Estudos: Organize-se e Tire Suas Matérias de Letra! agosto 27, 2024 Como a IA Pode Turbinar Sua Carreira em 2024 agosto 26, 2024 5 Dicas Avançadas para Debugar Interfaces de Usuário como um Profissional agosto 25, 2024 Como Ativar o Modo Super Alexa agosto 25, 2024 Vírus de computador: De brincadeira ao medo julho 8, 2024 Deixe um comentário Cancel Reply Salve meu nome, email e website neste navegador para a próxima vez que eu comentar.