Formatação de Texto HTML: Estruture Conteúdo Web

Introdução

Bem-vindo ao laboratório de Formatação de Texto em HTML! Nesta sessão prática, você aprenderá a estruturar e formatar texto em uma página web usando tags HTML fundamentais. Texto formatado corretamente é crucial para criar conteúdo web legível, acessível e bem organizado.

Você trabalhará com um único arquivo HTML, index.html, e aprenderá a usar as seguintes tags:

<h1>: Para títulos principais.
<p>: Para parágrafos.
<strong>: Para dar forte importância ao texto, geralmente exibido em negrito.
<em>: Para enfatizar texto, geralmente exibido em itálico.
<br>: Para inserir uma quebra de linha.

Ao longo do laboratório, você poderá ver suas alterações em tempo real salvando o arquivo e visualizando-o na aba "Web 8080" em seu espaço de trabalho.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 86%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Adicionar tag h1 para o título principal

Nesta etapa, você adicionará um título principal à sua página web. Em HTML, os títulos são definidos com as tags <h1> a <h6>. A tag <h1> define o título mais importante e é tipicamente usada para o título principal de uma página.

Primeiro, abra o arquivo index.html localizado no diretório ~/project usando o explorador de arquivos no lado esquerdo do WebIDE.

Agora, adicione uma tag <h1> dentro da seção <body> do seu arquivo index.html. Substitua o comentário  pela seguinte linha de código:

<h1>Welcome to My Web Page</h1>

Sua seção <body> agora deve parecer com isto:

<body>
  <h1>Welcome to My Web Page</h1>
</body>

Após adicionar o código, salve o arquivo (Ctrl+S ou Cmd+S). Para ver o resultado, clique na aba "Web 8080" no topo da interface. Você deverá ver seu título exibido na página.

Inserir tag p para texto de parágrafo

Nesta etapa, você adicionará um parágrafo de texto abaixo do seu título. A tag <p> é usada para definir um parágrafo em HTML. Os navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e depois de um parágrafo.

No arquivo index.html, adicione uma nova linha após sua tag <h1> e insira a seguinte tag <p>:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some important information.
</p>

Sua seção <body> agora deve conter tanto o título quanto o novo parágrafo:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some important information.
  </p>
</body>

Salve o arquivo index.html e atualize a aba "Web 8080" para ver o parágrafo recém-adicionado exibido abaixo do título.

Usar tag strong para texto em negrito

Nesta etapa, você aprenderá como fazer o texto aparecer em negrito. A tag <strong> é usada para indicar que o texto tem forte importância, seriedade ou urgência. Os navegadores geralmente renderizam o conteúdo dentro de uma tag <strong> como negrito.

Vamos modificar o parágrafo que você adicionou na etapa anterior para destacar a frase "important information". Envolva essa frase com as tags <strong> e </strong>.

Modifique a tag <p> no seu arquivo index.html para que fique assim:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some <strong>important information</strong>.
</p>

O <body> completo do seu arquivo agora deve ser:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
</body>

Salve o arquivo e verifique a aba "Web 8080". Você notará que o texto "important information" agora está em negrito.

Aplicar tag em para texto em itálico

Nesta etapa, você aprenderá como enfatizar texto, que é tipicamente exibido em itálico. A tag <em> (abreviação de "emphasis") é usada para este propósito. Ela indica que o texto contido deve ser acentuado ou enfatizado.

Vamos adicionar um novo parágrafo que inclua algum texto enfatizado. Adicione o seguinte código abaixo do seu parágrafo existente em index.html:

<p>
  You can also use other tags to format text. For example, the em tag is used
  for <em>emphasized</em> text.
</p>

Sua seção <body> agora deve parecer com isto:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. For example, the em tag is used
    for <em>emphasized</em> text.
  </p>
</body>

Salve o arquivo e visualize a aba "Web 8080". Você verá um novo parágrafo, e a palavra "emphasized" estará em itálico.

Inserir tag br para quebras de linha

Nesta etapa, você aprenderá como forçar uma quebra de linha dentro de um bloco de texto. A tag <br> insere uma única quebra de linha. É uma tag vazia, o que significa que não possui tag de fechamento.

Vamos adicionar uma quebra de linha no meio do segundo parágrafo que você criou. Isso é útil quando você deseja iniciar uma nova linha sem iniciar um novo parágrafo.

Modifique a segunda tag <p> no seu arquivo index.html para incluir uma tag <br>:

<p>
  You can also use other tags to format text. <br />For example, the em tag is
  used for <em>emphasized</em> text.
</p>

O conteúdo final do seu <body> deve ser:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. <br />For example, the em tag is
    used for <em>emphasized</em> text.
  </p>
</body>

Salve o arquivo e atualize a aba "Web 8080". Você verá que o segundo parágrafo agora está dividido em duas linhas.

Resumo

Parabéns por completar o laboratório! Você aprendeu com sucesso os fundamentos da formatação de texto em HTML.

Neste laboratório, você praticou o uso de:

<h1> para criar um título principal.
<p> para estruturar o conteúdo em parágrafos.
<strong> para dar forte importância ao texto (negrito).
<em> para enfatizar texto (itálico).
<br> para inserir quebras de linha.

Essas tags são os blocos de construção essenciais para criar conteúdo bem estruturado e legível em qualquer página da web. Continue praticando e explorando outras tags HTML para aprimorar suas habilidades de desenvolvimento web.