HTML Básico de Referência
Código HTML Básico de Referência Completo com Todas as Funcionalidades
Introdução ao HTML5 e Sua Importância
O HTML5 é a base de qualquer site moderno. Ele permite criar páginas web dinâmicas e interativas, oferecendo recursos avançados como áudio, vídeo e formulários. Além disso, o HTML5 facilita a organização do conteúdo por meio de listas, tabelas e imagens. Neste artigo, você aprenderá a construir um código básico que inclui todas essas funcionalidades. Isso ajudará desenvolvedores iniciantes e experientes a entenderem melhor o potencial da linguagem.
Para começar, vamos explorar a estrutura inicial de um documento HTML5. Em seguida, adicionaremos elementos essenciais, como cabeçalhos, parágrafos e links. Esses componentes formam a base de qualquer página web. Por fim, integraremos recursos multimídia para tornar o conteúdo mais envolvente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documento HTML Básico</title> <style> /* CSS básico */ body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; color: #333; } header, footer { background-color: #f4f4f4; padding: 20px; text-align: center; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } </style> </head> <body> <!-- Cabeçalho --> <header> <h1>Meu Site HTML</h1> <p>Um exemplo completo de HTML básico</p> </header> <!-- Navegação --> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#sobre">Sobre</a></li> <li><a href="#servicos">Serviços</a></li> <li><a href="#contato">Contato</a></li> </ul> </nav> <!-- Conteúdo principal --> <main> <section id="home"> <h2>Bem-vindo</h2> <p>Este é um exemplo de parágrafo em HTML. Aqui podemos escrever texto normal.</p> <article> <h3>Artigo Recente</h3> <p>Este é um artigo independente dentro da seção.</p> </article> </section> <section id="sobre"> <h2>Sobre Nós</h2> <p>Esta seção contém informações sobre o site ou empresa.</p> <!-- Listas --> <h3>Nossos Valores</h3> <ul> <li>Qualidade</li> <li>Transparência</li> <li>Inovação</li> </ul> <h3>Etapas do Processo</h3> <ol> <li>Consulta</li> <li>Planejamento</li> <li>Execução</li> </ol> </section> <section id="servicos"> <h2>Nossos Serviços</h2> <!-- Tabela --> <table border="1"> <thead> <tr> <th>Serviço</th> <th>Descrição</th> <th>Preço</th> </tr> </thead> <tbody> <tr> <td>Web Design</td> <td>Criação de sites</td> <td>R$ 1.500,00</td> </tr> <tr> <td>SEO</td> <td>Otimização para buscadores</td> <td>R$ 800,00</td> </tr> </tbody> </table> </section> <!-- Formulário --> <section id="contato"> <h2>Contato</h2> <form action="/enviar" method="post"> <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="assunto">Assunto:</label> <select id="assunto" name="assunto"> <option value="duvida">Dúvida</option> <option value="sugestao">Sugestão</option> <option value="reclamacao">Reclamação</option> </select> </div> <div> <label for="mensagem">Mensagem:</label> <textarea id="mensagem" name="mensagem" rows="4" required></textarea> </div> <div> <button type="submit">Enviar</button> </div> </form> </section> <!-- Elementos diversos --> <section> <h2>Outros Elementos</h2> <p>Texto com <strong>ênfase forte</strong> e <em>ênfase itálica</em>.</p> <p>Link para <a href="https://www.google.com" target="_blank">Google</a>.</p> <p>Imagem:</p> <img src="https://via.placeholder.com/150" alt="Imagem de exemplo"> <p>Áudio:</p> <audio controls> <source src="audio.mp3" type="audio/mpeg"> Seu navegador não suporta áudio. </audio> <p>Vídeo:</p> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Seu navegador não suporta vídeo. </video> </section> </main> <!-- Conteúdo lateral --> <aside> <h3>Informações Adicionais</h3> <p>Este conteúdo é relacionado mas não essencial.</p> </aside> <!-- Rodapé --> <footer> <p>© 2023 Meu Site. Todos os direitos reservados.</p> <address> </address> </footer> </body> </html><!-- Abixo o html como aparece, incluindo suas funcionalidades --> |
Meu Site HTML
Um exemplo completo de HTML básico
Bem-vindo
Este é um exemplo de parágrafo em HTML. Aqui podemos escrever texto normal.
Artigo Recente
Este é um artigo independente dentro da seção.
Sobre Nós
Esta seção contém informações sobre o site ou empresa.
Nossos Valores
- Qualidade
- Transparência
- Inovação
Etapas do Processo
- Consulta
- Planejamento
- Execução
Nossos Serviços
| Serviço | Descrição | Preço |
|---|---|---|
| Web Design | Criação de sites | R$ 1.500,00 |
| SEO | Otimização para buscadores | R$ 800,00 |
Contato
Outros Elementos
Texto com ênfase forte e ênfase itálica.
Link para Google.
Imagem:
Áudio:
Vídeo:
Estrutura Básica e Elementos Essenciais
Abaixo está um exemplo de estrutura básica em HTML5. O código começa com a declaração <!DOCTYPE html>, seguida pelo elemento <html>. Dentro dele, encontramos a seção <head>, onde definimos o título da página e os metadados. Na seção <body>, podemos adicionar o conteúdo visível aos usuários.
Por exemplo, use <h1> para títulos principais e <p> para parágrafos. Para criar links, utilize a tag <a href="URL">Texto do Link</a>. Além disso, listas ordenadas (<ol>) e não ordenadas (<ul>) são úteis para organizar informações. Cada item da lista deve ser colocado entre tags <li>.
Agora que a base está pronta, podemos avançar para recursos mais complexos, como formulários e mídia.
Formulários e Recursos Multimídia
Formulários são essenciais para coletar dados dos usuários. No HTML5, você pode criar campos de entrada usando <input type="tipo">. Por exemplo, type="text" para texto, type="email" para endereços de e-mail e type="submit" para botões de envio. Combine isso com as tags <form> e </form> para encapsular o formulário.
Além disso, o HTML5 suporta mídia de forma nativa. Para adicionar uma imagem, use <img src="URL_da_imagem" alt="Descrição">. Para áudio, utilize <audio controls><source src="URL_do_audio" type="audio/mpeg"></audio>. Vídeos podem ser incorporados com <video controls><source src="URL_do_video" type="video/mp4"></video>.
Esses recursos tornam o conteúdo mais atrativo e acessível. Agora, vamos explorar tabelas.
Tabelas para Organização de Dados
Tabelas são ideais para exibir dados de forma clara e organizada. Use <table> para criar uma tabela e <tr> para definir linhas. Dentro de cada linha, insira células com <td> para dados ou <th> para cabeçalhos. Por exemplo:
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1"> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr> <td>Maria</td> <td>25</td> </tr> </table> |
Esse código cria uma tabela simples com duas colunas. Combinando tabelas com outros elementos, você pode criar páginas web completas e funcionais.
Considerações Finais e Aplicação Prática
O HTML5 é uma ferramenta poderosa para desenvolvimento web. Ao dominar suas funcionalidades básicas, como listas, formulários, imagens, áudio, vídeo e tabelas, você estará preparado para criar sites modernos e interativos. Lembre-se de sempre testar seu código em diferentes navegadores para garantir compatibilidade.
Com prática e dedicação, você poderá expandir seus conhecimentos e explorar recursos ainda mais avançados. Aproveite este guia como referência para seus projetos futuros.
Enfim, espero que tenha gostado dessa postagem.
Certamente esses websites também podem te interessar:
- Origamania.com – Origamis, papel modelismo, artesanatos e aviões de papel.
- Textículos.com – Significados de Nomes, frases famosas, ferramenta de textos e letras diferentes, e muito mais.
- Portal do Economaster – Economia e Finanças de um jeito fácil de entender.
- Cardápio de Receitas – Receitas de dar água na boca. Tudo o que você precisa pra fazer uma boa receita.
- Mortadela Show – Muito assunto divertido, guia do cubo mágico, curiosidades e muito mais.
- Web-Zoneware – Muito mais do que uma Academia Web, Informática, Hardware e Softwares.
Agora veja mais conteúdos do Code X Easy, seu novo site de Referência na Web.
