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.htmle 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.
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!
