Curso de HTML – Aula 2: Títulos, listas e outras tags

Esta é a segunda aula do Curso de Desenvolvimento Web com HTML. Depois de conhecermos na aula anterior alguns conceitos sobre a criação de páginas web e a sintaxe da linguagem de marcação de texto HTML, estudaremos agora outras tags para fazermos um exercício mais elaborado: o currículo do nosso amigo José da Silva.

Caso ainda não tenha lido, recomendo que leia antes o artigo de Introdução ao Curso de Desenvolvimento Web com HTML e o artigo da Aula 1: Estrutura de uma página web .

curso de html

Títulos

Assim como em um livro, uma página web pode conter uma hierarquia de títulos e subtítulos para estabelecer uma divisão de seu conteúdo e, para conseguirmos realizar essa tarefa, utilizamos as tags de título h1, h2, h3, h4, h5 e h6.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um título (h vem de “heading” – cabeçalho ou título ), sendo <h1> o título de primeiro nível apresentado com o maior tamanho de texto; <h2> o subtítulo de segundo nível apresentado com tamanho de texto um pouco menor; e <h6> o subtítulo de sexto nível apresentado com o menor tamanho de texto. Vamos a um exemplo:

Exemplo de cabeçalhos:

<h1>Este é um título</h1>
<h2>Este é um sub-título</h2>

Veja na imagem abaixo como o navegador exibe o código do exemplo acima.

Curso de HTML - Exemplo de Título

Para cada tag de título o navegador atribui um tamanho diferente de fonte (letra). Esse tamanho pode ser alterado através de regras CSS que veremos posteriormente em outro curso, mas, por enquanto, utilizaremos o tamanho padrão da fonte definido pelo navegador.

Dica extra: Sites como o Google, Yahoo! e Bing utilizam as tags de título como parâmetro de ranqueamento nos resultados das suas buscas orgânicas. Dessa forma, devemos utilizar essas tags de forma a atender as chamadas técnicas de SEO (Search Engine Optimization) que ajudam a melhorar o ranqueamento de páginas dentro dos buscadores.


Lista ordenada e não ordenada

Em diversas situações do nosso dia a dia necessitamos listar todo tipo de coisas. Na criação de páginas web não é diferente, e por essa razão aprenderemos agora a criar os dois tipos de listas mais comuns: as listas ordenadas e não ordenadas.

Listas ordenadas, como o próprio nome já diz, são utilizadas para exibir qualquer conteúdo de forma ordenada. Por exemplo:

  1. São Paulo
  2. Rio de Janeiro
  3. Belo Horizonte
  4. Curitiba

Para criarmos uma lista assim precisaremos dessa vez de duas tags para trabalhar em conjunto, a tag <ol> e a <li>. Segue abaixo um exemplo de como fazemos para reproduzir em html a lista ordenada acima.

<ol>
     <li>São Paulo</li>
     <li>Rio de Janeiro</li>
     <li>Belo Horizonte</li>
     <li>Curitiba</li>
</ol>

Observação: A tag <ol> deve possuir pelo menos uma tag <li> para ser considerada uma lista ordenada.

Veja agora na imagem abaixo como o navegador exibe o código da lista ordenada no exemplo acima.

Curso de HTML - Exemplo de Listas

Listas não ordenadas, por sua vez, são utilizadas para exibir qualquer conteúdo de forma aleatória, não ordenada. Por exemplo:

  • Feijão
  • Arroz
  • Salada
  • Farofa

Para criarmos uma lista assim precisaremos também trabalhar em conjunto com duas tags, com a <ul> e a <li>. Segue abaixo um exemplo de como fazemos para reproduzir em html a lista não ordenada acima.

<ul>
     <li>Feijão</li>
     <li>Arroz</li>
     <li>Salada</li>
     <li>Farofa</li>
</ul>

Observação: A tag <ul> deve possuir pelo menos uma tag <li> para ser considerada uma lista não ordenada.

Veja na imagem abaixo como o navegador exibe o código da lista não ordenada do exemplo acima.

Curso de HTML - Exemplo de Listas

Tags isoladas

Tags isoladas são aquelas que são abertas e fechadas em uma única tag como, por exemplo, a tag <br /> já citada no capítulo anterior.

Exemplo de tag isolada:

<p>Início do meu parágrafo e <br />continua na linha abaixo</p>

No exemplo acima a tag <br /> informa ao navegador para realizar uma quebra de linha e, embora todo o texto esteja dentro da tag <p>, vemos o parágrafo da seguinte forma:

Curso de HTML - Exemplo de tags

Observação: Note que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra “/” no final: <br />.

Outra tag isolada é a <hr /> que serve para definir uma linha horizontal. Veja no código abaixo um exemplo de como podemos utilizar essa tag.

<h1>Titulo do meu site</h1>
<hr />
<p>Linha horizontal acima</p>

Veja agora na imagem abaixo como o navegador exibe o código do exemplo acima.

Curso de HTML - Exemplo de tags

Formatação em negrito e itálico

De acordo com os novos padrões de desenvolvimento definidos pela W3C, não é mais correto utilizar as tags <b> e <i> para formatar textos com negrito e itálico. Porém, enquanto não chegamos às tão esperadas CSS no próximo curso, vamos utilizar essas tags em desuso nos nossos exercícios para efeito didático e também de conhecimento.

Para colocarmos um texto em negrito devemos adicioná-lo entre a tags <b> e </b> da seguinte forma:

<p>Aqui esta um parágrafo e <b>deste ponto em diante está em
   negrito</b></p>

Veja na imagem abaixo como o navegador exibe o código do exemplo acima.

Curso de HTML - Exemplo de negrito

Para colocarmos um texto em itálico devemos adicioná-lo entre a tags <i> e </i> da seguinte forma:

<p>Aqui esta outro parágrafo e <i>deste ponto em diante está em
   itálico</i></p>

Veja na imagem abaixo como o navegador exibe o código do exemplo acima.

Curso de HTML - Exemplo de itálico

Se for necessário podemos também combinar as tags de negrito e itálico trabalhando da seguinte forma:

<p>Mais um parágrafo e <b><i>agora está negrito e itálico ao
   mesmo tempo</i></b></p>

Veja na imagem abaixo como o navegador exibe o código do exemplo acima.

Curso de HTML - Exemplo de itálico e negrito

Dica extra: As tags <strong> e <em> causam visualmente o mesmo resultado que as <b> e <i>, respectivamente. A diferença está no fato de que além de causarem o efeito visual de negrito e itálico, as tags <strong> e <em> dão ênfase ao texto informando para as ferramentas de buscas que aquele trecho em especifico é importante e merece maior destaque nos resultados de buscas.


Exercício:

Utilizando as tags estudadas no capítulo 1 e 2 desse curso, crie uma página HTML que exiba o currículo do nosso amigo José da Silva, conforme a imagem abaixo.

Curso de HTML - Exercício de Currículo

Conseguiu fazer o exercício dessa aula? Encontrou alguma dificuldade? Entre em contato através do formulário de contato (clique aqui) e me diga como foi. Se quiser você pode também me enviar por e-mail o código do exercício e eu ficarei muito feliz em corrigi-lo.

Continue este curso em: Aula 3: Inserindo imagens no html