El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

Les llistes són una part fonamental de l'HTML i s'utilitzen per organitzar informació en un format estructurat. Hi ha dos tipus principals de llistes en HTML: llistes ordenades i llistes desordenades. En aquesta secció, aprendrem com crear i utilitzar aquests dos tipus de llistes.

Llistes desordenades

Què és una llista desordenada?

Una llista desordenada és una col·lecció d'elements de llista que no tenen un ordre específic. Els elements de la llista es mostren amb punts (bullets) per defecte.

Sintaxi

La sintaxi per crear una llista desordenada és la següent:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Exemple pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Llistes desordenades</title>
</head>
<body>
  <h1>Llista de tasques</h1>
  <ul>
    <li>Comprar menjar</li>
    <li>Fer exercici</li>
    <li>Llegir un llibre</li>
  </ul>
</body>
</html>

Explicació

<ul>: Etiqueta que defineix una llista desordenada.
<li>: Etiqueta que defineix un element de la llista.

Llistes ordenades

Què és una llista ordenada?

Una llista ordenada és una col·lecció d'elements de llista que tenen un ordre específic. Els elements de la llista es mostren amb números per defecte.

Sintaxi

La sintaxi per crear una llista ordenada és la següent:

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

Exemple pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Llistes ordenades</title>
</head>
<body>
  <h1>Passos per cuinar una truita</h1>
  <ol>
    <li>Bat els ous</li>
    <li>Escalfa la paella</li>
    <li>Afegeix els ous batuts</li>
    <li>Cuina fins que estigui daurada</li>
  </ol>
</body>
</html>

Explicació

<ol>: Etiqueta que defineix una llista ordenada.
<li>: Etiqueta que defineix un element de la llista.

Llistes niades

Què és una llista niada?

Una llista niada és una llista dins d'una altra llista. Pot ser una llista desordenada dins d'una llista ordenada o viceversa.

Exemple pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Llistes niades</title>
</head>
<body>
  <h1>Planificació de viatge</h1>
  <ol>
    <li>Preparatius
      <ul>
        <li>Comprar bitllets</li>
        <li>Reservar hotel</li>
      </ul>
    </li>
    <li>Empaquetar
      <ul>
        <li>Roba</li>
        <li>Documents</li>
      </ul>
    </li>
  </ol>
</body>
</html>

Explicació

<ul> i <ol> poden ser combinats per crear llistes niades.
Els elements de llista (<li>) poden contenir altres llistes.

Exercicis pràctics

Exercici 1: Crear una llista desordenada

Crea una llista desordenada amb els teus fruits preferits.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Llista de fruits</title>
</head>
<body>
  <h1>Els meus fruits preferits</h1>
  <ul>
    <li>Poma</li>
    <li>Plàtan</li>
    <li>Maduixa</li>
  </ul>
</body>
</html>

Exercici 2: Crear una llista ordenada

Crea una llista ordenada amb els passos per preparar una tassa de te.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preparar una tassa de te</title>
</head>
<body>
  <h1>Passos per preparar una tassa de te</h1>
  <ol>
    <li>Escalfa l'aigua</li>
    <li>Posa la bossa de te a la tassa</li>
    <li>Afegeix l'aigua calenta</li>
    <li>Deixa reposar durant 3-5 minuts</li>
  </ol>
</body>
</html>

Resum

En aquesta secció, hem après a crear llistes desordenades i ordenades en HTML. Les llistes desordenades utilitzen punts per mostrar els elements, mentre que les llistes ordenades utilitzen números. També hem vist com crear llistes niades, que són llistes dins d'altres llistes. Aquests conceptes són fonamentals per organitzar informació de manera clara i estructurada en les pàgines web.

Llistes: Ordenades i desordenades

Introducció

Llistes desordenades

Què és una llista desordenada?

Sintaxi

Exemple pràctic

Explicació

Llistes ordenades

Què és una llista ordenada?

Sintaxi

Exemple pràctic

Explicació

Llistes niades

Què és una llista niada?

Exemple pràctic

Explicació

Exercicis pràctics

Exercici 1: Crear una llista desordenada

Solució

Exercici 2: Crear una llista ordenada

Solució

Resum

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