Tag Blockquote em HTML: Melhorando Citações em Páginas Web

Introdução

Em HTML, usamos a tag <blockquote> para exibir citações em uma página web com o nome do autor ou a fonte. A tag é usada como um elemento de nível de bloco e é exibida como um parágrafo separado. Neste laboratório, você aprenderá como criar um blockquote usando a tag HTML <blockquote>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

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 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Adicione a estrutura HTML

Crie um arquivo HTML chamado index.html e abra-o em um editor de código.

Adicione a estrutura HTML conforme mostrado abaixo:

<!doctype html>
<html>
  <head>
    <title>HTML Blockquote Tag</title>
  </head>
  <body>
    <h1>HTML Blockquote Tag</h1>

    <!-- Add the blockquote -->
  </body>
</html>

Adicione a Tag Blockquote

Adicione a tag blockquote ao seu código HTML usando a seguinte sintaxe:

<blockquote>
  Your quote comes here...
  <cite>- Author Name</cite>
</blockquote>

Nota: A tag cite é adicionada dentro da tag blockquote para fornecer o nome do autor ou a fonte da citação.

Adicionar Estilo CSS

Adicione a estilização CSS à tag blockquote usando o seguinte trecho de código:

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

Nota: Este código define alguma estilização básica para a tag blockquote. A propriedade border-left adiciona uma borda esquerda à tag blockquote.

Adicione a citação que você deseja exibir na página web, substituindo Your quote comes here....

Salve o arquivo HTML e abra-o em um navegador web para ver o blockquote exibido na página web.

Resumo

Neste laboratório, você aprendeu sobre a tag <blockquote> para exibir uma citação em um bloco separado em uma página web. Você também aprendeu sobre os atributos que podem ser usados com a tag e como estilizá-la usando CSS. Com a tag blockquote, você pode exibir citações em sua página web com facilidade!

Bloco de Texto Citado em HTML

Introdução

Adicione a estrutura HTML

Adicione a Tag Blockquote

Adicionar Estilo CSS

Resumo