Oi turma, tudo bem com vocês?
Neste tutorial de introdução de HTML, vamos aprender os conceitos básicos dessa linguagem de marcação amplamente utilizada para criar páginas web. O HTML (HyperText Markup Language) é a base fundamental para a construção de qualquer site e permite estruturar o conteúdo e adicionar elementos interativos.
Toda página HTML segue uma estrutura básica que consiste em elementos essenciais. Vejamos como é essa estrutura:
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<!-- Conteúdo da Página -->
</body>
</html>
<!DOCTYPE html>: Declaração que informa ao navegador que o documento é uma página HTML.<html>: Elemento raiz que envolve todo o conteúdo da página.<head>: Cabeçalho da página, onde são definidas informações sobre o documento, como o título exibido na barra do navegador.<title>: Define o título da página, que aparece na aba do navegador.<body>: Corpo da página, onde todo o conteúdo visível é colocado.Agora, vamos conhecer algumas das principais tags HTML que nos permitem estruturar e formatar o conteúdo:
Os títulos são usados para estruturar a hierarquia da informação em uma página, enquanto os parágrafos são usados para adicionar texto corrido.
<h1>Título Principal</h1> <h2>Título Secundário</h2> <h3>Título 3</h3> <h4>Título 4</h4> <h5>Título 5</h5> <h6>Título 6</h6> <p>Este é um parágrafo de exemplo.</p> <p>Este é outro parágrafo.</p>
As listas permitem organizar informações em forma de itens ordenados (<ol>) ou não ordenados (<ul>).
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Os links são utilizados para criar referências a outras páginas web ou a seções dentro da mesma página.
<a href="https://www.example.com">Visite o Exemplo</a>
As imagens são inseridas usando a tag <img> e são exibidas na página.
<img src="caminho/para/imagem.jpg" alt="Descrição da Imagem">
Tabelas são elementos utilizados com frequência para exibir dados de forma organizada em linhas e colunas. No HTML, elas são formadas por três tags básicas: table, para delimitar a tabela; tr, para indicar as linhas; e td para formar as colunas. Abaixo temos um exemplo simples de tabela com três linhas e duas colunas.
<table> <tr> <td>Linha 1, Coluna 1</td> <td>Linha 1, Coluna 2</td> </tr> <tr> <td>Linha 2, Coluna 1</td> <td>Linha 2, Coluna 2</td> </tr> <tr> <td>Linha 3, Coluna 1</td> <td>Linha 3, Coluna 2</td> </tr> </table>
As tags de formatação de texto ajudam a destacar trechos da parte escrita da página, seja para fins de SEO ou por requisitos do conteúdo. Formatações como negrito e itálico podem ser aplicadas com facilidade utilizando as várias tags disponíveis para esse fim:
<p>Texto em negrito com <b>bold</b> e <strong>strong</strong>.</p> <p>Texto em itálico com <i>italics<i> e <em>emphasis</em>.</p> <p>Texto <sup>sobrescrito</sup> e <sub>subscrito</sub>.</p> <p>Texto <ins>inserido</ins> e <del>excluído</del>.</p> <p>Texto <small>pequeno</small> e <mark>destacado</mark>.</p>
Os formulários permitem que os usuários enviem dados para o servidor, como preenchimento de campos de texto, seleção de opções ou envio de arquivos.
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Enviar">
</form>
Esses são apenas alguns exemplos das principais tags HTML. Existem muitas outras tags disponíveis para criar diferentes elementos e estruturas em uma página.
Esse pequeno tutorial de HTML fornece uma introdução aos conceitos fundamentais dessa linguagem de marcação. À medida que você avança, pode explorar recursos mais avançados, como estilos CSS e interatividade com JavaScript.
Também serão detalhados em posts específicos, mais funcionalidades que existes nos elementos citados, como por exemplo abrir links em novas páginas e colocar rodapés em imagens.
Dúvidas ou Sugestões? Deixe o seu comentário!
Um abraço a até o próximo post. Valeu!
Está gostando do conteúdo?
Considere pagar um cafezinho para nossa equipe!
