El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Cites i text preformatat

Següent ►
►

En aquest tema, aprendrem com utilitzar les etiquetes HTML per a crear cites i text preformatat. Aquestes etiquetes són útils per a mostrar text citat, com ara frases famoses o referències, així com per a mostrar text amb formatació específica, com ara codi o text amb espais i salts de línia preservats.

Cites en HTML

Etiqueta <blockquote>

L'etiqueta <blockquote> s'utilitza per a definir una secció que és una citació d'una altra font. Aquesta etiqueta normalment s'utilitza per a cites llargues.

Sintaxi:

<blockquote cite="URL_de_la_font">
  Contingut de la cita.
</blockquote>

Exemple:

<blockquote cite="https://www.example.com">
  "La vida és el que passa mentre estàs ocupat fent altres plans."
</blockquote>

Etiqueta <q>

L'etiqueta <q> s'utilitza per a cites curtes dins d'un paràgraf. Aquesta etiqueta afegeix automàticament cometes al voltant del text citat.

Sintaxi:

<q cite="URL_de_la_font">Text de la cita curta</q>

Exemple:

<p>John Lennon va dir, <q cite="https://www.example.com">"La vida és el que passa mentre estàs ocupat fent altres plans."</q></p>

Exemple complet de cites

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exemple de cites</title>
</head>
<body>
  <h1>Exemple de cites en HTML</h1>
  <h2>Cita llarga</h2>
  <blockquote cite="https://www.example.com">
    "La vida és el que passa mentre estàs ocupat fent altres plans."
  </blockquote>
  
  <h2>Cita curta</h2>
  <p>John Lennon va dir, <q cite="https://www.example.com">"La vida és el que passa mentre estàs ocupat fent altres plans."</q></p>
</body>
</html>

Text preformatat en HTML

Etiqueta <pre>

L'etiqueta <pre> s'utilitza per a mostrar text preformatat. El text dins d'aquesta etiqueta es mostra amb una font monoespaiada, i els espais i salts de línia es preserven.

Sintaxi:

<pre>
  Text preformatat aquí.
</pre>

Exemple:

<pre>
  Això és un text preformatat.
  Els espais i salts de línia es preserven.
</pre>

Exemple complet de text preformatat

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exemple de text preformatat</title>
</head>
<body>
  <h1>Exemple de text preformatat en HTML</h1>
  <pre>
    Això és un text preformatat.
    Els espais i salts de línia es preserven.
  </pre>
</body>
</html>

Exercicis pràctics

Exercici 1: Crear una cita llarga

Crea una pàgina HTML que contingui una cita llarga utilitzant l'etiqueta <blockquote>. La cita ha de ser de la teva elecció i ha de tenir un atribut cite amb l'URL de la font.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Cita llarga</title>
</head>
<body>
  <h1>Cita llarga</h1>
  <blockquote cite="https://www.example.com">
    "El coneixement és poder."
  </blockquote>
</body>
</html>

Exercici 2: Crear una cita curta

Crea una pàgina HTML que contingui una cita curta dins d'un paràgraf utilitzant l'etiqueta <q>. La cita ha de ser de la teva elecció i ha de tenir un atribut cite amb l'URL de la font.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Cita curta</title>
</head>
<body>
  <h1>Cita curta</h1>
  <p>Albert Einstein va dir, <q cite="https://www.example.com">"La imaginació és més important que el coneixement."</q></p>
</body>
</html>

Exercici 3: Crear text preformatat

Crea una pàgina HTML que contingui text preformatat utilitzant l'etiqueta <pre>. El text ha de tenir diversos espais i salts de línia.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Text preformatat</title>
</head>
<body>
  <h1>Text preformatat</h1>
  <pre>
    Això és un text preformatat.
    Els espais i salts de línia es preserven.
  </pre>
</body>
</html>

Conclusió

En aquesta secció hem après com utilitzar les etiquetes <blockquote> i <q> per a crear cites llargues i curtes, respectivament, així com l'etiqueta <pre> per a mostrar text preformatat. Aquestes etiquetes són útils per a donar format al contingut textual de manera que sigui més comprensible i visualment atractiu. En el proper tema, explorarem com crear hiperenllaços en HTML.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats