Formatação de Citações HTML com a Tag <cite>

Introdução

Este laboratório irá apresentá-lo à tag HTML <cite>, que é usada para exibir uma citação em um formato diferente do texto normal. Neste laboratório, você aprenderá como usar a tag <cite> juntamente com a tag <blockquote> para citar o autor de uma citação em seu documento HTML.

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.

Inclua o elemento

Para usar o elemento <cite>, ele deve ser incluído em seu documento HTML. A sintaxe necessária para isso é dada abaixo:

<cite> ... </cite>

Adicione conteúdo dentro do elemento

Para exibir uma citação, o conteúdo a ser citado é incorporado dentro da tag <cite>.

<cite>The text to be cited</cite>

Use os elementos

e juntos

Para citar o autor de uma citação, usamos a tag <blockquote> juntamente com a tag <cite>.

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

Nota: O texto citado é envolvido em aspas e o nome do autor é envolvido na tag <cite>.

Aplique CSS à tag

Por padrão, o texto dentro da tag <cite> é exibido em itálico. Também podemos aplicar estilos CSS adicionais à tag <cite> para alterar a aparência da citação. Aqui está um exemplo:

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

Resumo

Neste laboratório, aprendemos como usar a tag HTML <cite> para exibir uma citação em um formato diferente do texto normal. Também aprendemos como usar a tag <cite> juntamente com a tag <blockquote> para citar o autor de uma citação em nosso documento HTML. Finalmente, discutimos como aplicar estilos CSS à tag <cite> para alterar a aparência da citação.