logotipo Blog Giovani Da Cruz
Cadastre-se
HTML

Introdução ao HTML

6 min de leitura • • 160 visualizações

Motivos para aprender a programar

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.

Estrutura Básica do HTML

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.

Principais Tags HTML

Agora, vamos conhecer algumas das principais tags HTML que nos permitem estruturar e formatar o conteúdo:

Títulos e Parágrafos

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>

Listas

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>

 

Links

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>

 

Imagens

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 no HTML

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>

 

Formatação de texto

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:

  • b e strong para negrito/texto forte;
  • i e em para itálico/ênfase;
  • sup e sub para sobrescrito e subscrito, respectivamente;
  • ins e del para indicar trechos que foram incluídos ou removidos, respectivamente;
  • small para textos menores que o padrão;
  • mark para texto destacado.
Apesar da tag <b> e <strong> terem resultados visualmente idênticos, eles têm usos diferentes.
A tag <b> deve ser utilizada quando quer se destacar algo que é apenas visual, como por exemplo, deixar um link com mais visível.
Já a tag <strong> por sua vez, além de destacar o visual, dá um destaque semântico ao texto, então se o conteúdo que você quer dar destaque é uma parte relevante do texto, utilize a tag <strong>.
Podemos dizer que o mesmo vale para as tags <i> e <em>, onde a tag <i> é utilizada apenas para formatação visual e a tag <em>dá ênfase semântica ao texto, logo, devendo ser evitado seu uso para efeitos puramente estéticos.
<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>

 

 

Formulários

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!

Visualizações: 160
Tags:

Artigos relacionados

Deixe um comentário

Seu e-mail não será publicado.