Formatando um documento HTML

Formatando uma página Web

  Agora, você irá aprender a formatar uma página Web usando tags. Primeiro você irá aprender a formatar uma página Web exibindo:

• Texto em negrito.
• Texto em itálico.
• Texto sublinhado.

Exibindo um texto em negrito

  Você usa a tag Bold (negrito) <b> </b> para exibir um texto em negrito em uma página Web. A sintaxe é exibida na imagem.

Exibindo um texto em itálico

  Outra opção é a tag Italic (itálico) <i> </i>, para exibir um texto em itálico numa página Web. Observe a imagem.

Exibindo um texto sublinhado (underline)

Usa-se a tag Underline (Sublinhado) <u> </u> para exibir um texto sublinhado em uma página Web. A sintaxe é exibida na imagem ao lado.

  Um browser interpreta as tags Bold (negrito), Italics (itálico) e Underline (Sublinhado) no documento HTML e exibe o texto entre estas tags na página Web correspondente.

Utilizando a tag parágrafo

  Você pode usar parágrafos para agrupar linhas de texto em uma página Web. O browser irá exibir o texto em um único parágrafo se você não criar outros.

Inserindo quebras de linhas em uma página Web

  Por padrão, os browsers automaticamente encaixam o texto de uma página Web na janela do browser.

  Se você precisar exibir uma parte do texto em uma nova linha, você pode inserir uma quebra de linha utilizando a tag Break, como mostra a imagem. 
  O browser exibe a parte do texto escrito depois da tag Break <br>, em uma nova linha.

  No caso da tag Paragraph (Parágrafo) <p></p>, o browser também insere uma linha em branco antes de começar o novo parágrafo.Inserindo linhas horizontais em uma página Web.

Inserindo linhas horizontais em uma página Web 

  Você irá aprender agora a inserir linhas horizontais em uma página Web. Você usa estas linhas horizontais para dividir a informação exibida em diferentes blocos. Você usa uma linha horizontal usando a tag Horizontal Ruling <hr>. Observe um exemplo na imagem: uma imagem destaca a tag e a outra o resultado de sua aplicação.

  O browser exibe uma linha horizontal na página Web no ponto que você especificou a tag Horizontal Ruling. Ele também exibe uma linha em branco antes da linha horizontal.

Criando subtítulos

   Agora vamos observar como adicionar títulos, subtítulos e comentários em uma página Web. Com o uso da tag Heading <hX> </hX> você pode incluir títulos e subtítulos em diferentes blocos de texto numa página, a fim de aumentar a legibilidade. Por exemplo, se você precisar fornecer dois níveis de títulos em uma página, você pode usar o conjunto de tags <h1> </h1> e <h2> </h2>.

  Pode-se utilizar as tags <h1> </h1> para especificar o título principal e as tags <h2>,</h2>para o subtítulo secundário.

Adicionando comentários

  Você pode adicionar comentários para incluir notas, sugestões e explicações que não fazem parte do documento. Você usa a tag Comment (comentário) <!-- xxxxxx --> para adicionar comentários a um documento HTML.

  Web browsers ignoram texto, tags e outros objetos que estão entre a tag de inicio e de fim da tag Comment (comentário).

  Normalmente você usa a tag Comment (comentário) para fornecer informações sobre o autor do documento ou para adicionar uma mensagem de copyright.

Usando Tag pré-formatada

  Você aprenderá agora a usar a tag Pre-formatted. Por padrão, os browsers não exibem os espaços extras e linhas em branco de um documento HTML na página Web correspondente.

  Podemos exibir espaços múltiplos e linhas em branco em uma página usando a tag Pre-formatted (Pré-formatado). A sintaxe é exibida na imagem. 

  O browser exibe na janela, o bloco de texto entre a tag de inicio e fim da tag Pre-formatted como está escrito no documento HTML correspondente. Vale lembrar que podemos utilizar a tag <br> para adicionar linhas em branco à uma página.

Tipos de listas

  Agora você aprenderá sobre os tipos de listas do HTML e também a criar diferentes tipos de listas em uma página Web.

  Uma lista é uma coleção de itens relacionados. Você usa uma lista para organizar dados como uma sequência de passos ou itens em um grupo.

  O HTML fornece quatro tipos:

• Numeradas
• Não Numeradas
• Definição
• Intercaladas

Funções das listas

  Uma lista numerada é usada para exibir um conjunto de itens depois de um número ou uma letra

  Uma lista numerada é também chamada de lista ordenada.

  Uma lista não numerada é usada para exibir um conjunto de itens depois de uma marcação.

  Uma lista não numerada é chamada também de lista de marcação, ou ainda não-ordenada.

  Você usa uma lista de definições para exibir um conjunto de itens e suas descrições.

  Uma lista intercalada é uma combinação de duas ou mais listas. Você intercala a estrutura de uma lista com outra.

  As listas intercaladas são muito pouco utilizadas hoje, por isso não entraremos em detalhes sobre seu uso e sua sintaxe.

Criando listas ordenadas

  Agora você irá aprender a criar uma lista ordenada. Para lembrar: uma lista ordenada é aquela que cada item é exibido depois de um número ou letra, numa sequência lógica. Sua sintaxe é exibida na imagem. 

 Pode-se usar também outras tags de formatação, como a tag Font (fonte) e as tags Bold, Italic e Underline, entre outras. Para isso, elas devem ser colocadas entre a tag de inicio e de fim da tag da lista numerada <ol> </ol>.

Criando listas não numeradas

  Você aprendeu a criar uma lista numerada. Agora você irá aprender a criar uma lista não ordenada, na qual cada item é exibido depois de uma marcação.

  A lista não numerada é utilizada quando não há uma relação ou estrutura especifica entre os itens da lista. Sua sintaxe <ul></ul> é exibida na imagem acima. Este tipo de lista também pode ser chamada de não-ordenada.

O que significa lista intercalada?

  Até agora foi demonstrado como criar listas numeradas (ordenadas) e não numeradas (não-ordenadas). Também é possível criar combinações destas listas em uma página Web.  A combinação de uma ou mais listas é chamada de lista intercalada, na qual estão alternadas a definição de uma lista com a definição da outra. 

Fonte:

  Escola Virtual - Fundação Bradesco