Curso de HTML Grátis – 3

Nesse post vamos dar continuidade do nosso Curso de HTML Grátis, onde vamos explicar o funcionamento de algumas tags HTML de texto, que são básicas para gerar conteúdo.

Essas são as tags mais básicas, então o objetivo aqui é você começar a entender o funcionamento e como você vai fazer a demarcação do conteúdo no seu documento HTML.

Umma observação: com exceção do DOCTYPE visto no post anterior, todas as outras tags html são digitadas sempre em minusculo.

Tags inline e tags block

Basicamente, você vai ter sempre dois tipos de tags: tags do tipo em inline e tags do tipo block.

Mas qual a diferença entre elas?

As tags do tipo inline são tags que estão “em linha” e ocupam exatamente o espaço do conteúdo que elas contém.

Já as tags do tipo block sempre vão ocupar um certo espaço, mesmo que o conteúdo delas seja menor.

você pode pensar em tags inline como se fossem tijolos. Você pode colocar vários tijolos em uma linha, ou seja, quantos couberem.

E usando a mesma analogia, você pode pensar nas tags do tipo block como se fossem canos. Mesmo que não tenha nada dentro deles, eles sempre vão ocupar um espaço determinado.

Vamos dar um exemplo explicando duas tags: SPAN e P. Faça esse teste:

<span>Batata</span><span>Batata</span><span>Batata</span><span>Batata</span>
<p>Tomate</p><p>Tomate</p><p>Tomate</p>

Como esses conteúdos serão exibidos no navegador:

BatataBatataBatata
Tomate
Tomate
Tomate

Repare que embora o conteúdo tenha a mesma quantidade de letras, cada “Tomate” ficou em uma linha, porque ele ocupa um “bloco”, ou seja, 100% do tamanho disponível.

As tags de texto

Vamos agora especificar as tags de texto que você pode utilizar, com as definições se são elementos em bloco ou inline:

P – (bloco) Adiciona um parágrafo.
SPAN – (Inline) Demarca um texto para ser estilizado.
BLOCKQUOTE – (bloco) Adiciona um quote (comentário) do tipo Bloco.
Q – (inline) Demarca um texto para como quote, adicionando aspas ao conteúdo

Elementos Inline dentro de blocos

Você também podem combinar elementos inline dentro de elementos bloco, dessa forma:

<p>Tomate e <spam>Beringela</span></p>
<p>E então, ele disse <q>Feliz estava eu</q> quando lhe perguntaram</p>

E o resultado ficaria assim:
Tomate e Beringela
E então, ele disse “Feliz estava eu” quando lhe perguntaram

Você pode se perguntar: mas porqueu eu faria isso? Um dos motivos seria para você conseguir estilizar a “beringela”. Se você trabalhar com CSS, é possível deixar apenas a beringela com um estilo diferente, assim:

Tomate e Beringela
E então, ele disse “Feliz estava eu” quando lhe perguntaram

Listas

O HTML permite 2 tipos de listas: ordenadas e não ordenadas.

As listas ordenadas permitem que você adicione números ou letras a uma listagem. Uma lista não ordenada conterá marcadores (bullets) antes dos itens da lista:

OL – Listas Ordenadas
UL – Listas Não ordenadas
LI – Um elemento da lista (ordenada ou não ordenada)

A sintaxe de uso acontece como abaixo:
<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>

O resultado fica como abaixo:

• Item 1
• Item 2
• Item 3

1. Item 1
2. Item 2
3. Item 3

Você também pode colocar uma lista dentro de outra.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>

O resultado fica como abaixo:

• Item 1
• Item 2
• Item 3
  • Sub 1
  • Sub 2
  • Sub 3
• Item 4

Quebra de Linha

Quando você estiver adicionando conteúdo no seu site, você pode em alguns casos precisar usar uma quebra de linha.

Para isso, temos duas tags <hr/> e <br/>, que fazem essa função. Mas qual a diferença?

O BR vai inserir uma quebra de linha no ponto especificado e a partir dele o texto continua.

Já o HR vai quebrar o texto e inserir uma linha que ocupa todo o tamanho da tela. Antigamente ele tinha uma função apenas estética, mas hoje em dia tem também função semântica, ou seja, serve para separar o conteúdo.

A diferença entre elas é que o HR simplesmente quebra a linha, enquanto que o HR quebra o texto e adiciona uma linha que ocupa toda a largura da tela. Abaixo dessa linha o texto continua. Olhe como funciona:

Veja por exemplo esse texto<br/> que foi quebrado com a tag BR. Agora, veja esse texto <hr/> que foi quebrado com a tag HR.

Que ficaria assim:

Veja por exemplo esse texto
que foi quebrado com a tag BR. Agora, veja esse texto

---

que foi quebrado com a tag HR.

Parágrafos

Essa tag já foi abordada. Sempre que você precisar escrever um texto, deve envolve-lo entre as tags <p> e </p>, delimitando seu inicio e fim.

Nota: lembre de envolver cada parágrafo com essa tag.

Caso você queira fazer um teste, é possivel simplesmente colocar o texto no documento HTML e ele será exibido sem problemas. Então porque você deve usar essa tag?

A resposta é simples: o HTML apenas demarca o que cada parte do documento faz. Mas para estilizar (cor, margem, etc) você vai precisar usar CSS.

E para o CSS funcionar, você precisa especificar qual tag vai receber a formatação. Ou seja: se você não delimitar um texto como parágrafo não conseguirá alterá-lo com o CSS.

Além disso, todo o conteúdo do documento deve estar envolvido com as suas respectivas tags.

Títulos

E já que estamos falando e parágrafos, nada mais justo que falarmos de títulos.

Os títulos em HTML são numerados, indo de H1, H2, H3, H4, H5 até H6. Sendo que o H1 tem um peso maior, enquanto o H6 tem um peso bem menor.

Pense nos titulos como estando aninhados, um dentro do outro, separando o conteúdo e separando as informações, com títulos, substítulos e novas serações para compor o conteúdo.

Como regra, apenas a tag H1 exige uma atenção especial: você deve utilizar obrigatoriamente 1 tag H1 no seu documento e APENAS um H1.

Próximos passos

No próximo post vamos falar da tag A, IMG, I, B, EM, STRONG e… um pouco de SEO!