Escriu per cercar…

Box

Tot element HTML és una capsa rectangular col·locada dins d'una altra capsa.

WebCodi
S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments estàticsASIXDAMDAWDAW-BIO

Introducció

Cada element d’un document HTML és una capsa rectangular.

No importa què hi ha a dins: un títol, un paràgraf, una imatge o una llista.

El navegador el dibuixa sempre com un rectangle dins d’un altre rectangle.

En aquesta activitat veuràs quines propietats tenen aquestes capses i com les pots modificar.

Crea una carpeta amb el nom document-box i obre-la amb VS Code.

Comença amb aquesta plantilla:

html
box.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Box</title>
</head>
<body class="p-5">
  <h1 class="text-2xl">Hello boxes!</h1>
</body>
</html>

Fixa’t que el <body> no porta la classe prose.

prose posa uns marges i unes mides pensats per llegir text, i taparien justament allò que vols estudiar.

En aquesta activitat les mides les poses tu.

div

Totes les capses que has vist fins ara volen dir alguna cosa: <h1> és un títol, <p> un paràgraf, <li> un element d’una llista.

L’element <div> no vol dir res.

És una capsa buida de significat que fas servir per agrupar altres elements i donar-los un estil comú.

És el bloc bàsic de construcció d’una pàgina web.

html
Capses dins de capses
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Capses dins de capses</title>
</head>
<body class="p-5">
  <div class="m-5 border-4">
    <ul class="border-4 border-red-500">
      <li class="border-4 border-blue-800">Dilluns</li>
      <li class="border-4 border-blue-800">Dimarts</li>
      <li class="border-4 border-blue-800">Dimecres</li>
    </ul>
  </div>
</body>
</html>

Cada <li> és una capsa dins la capsa <ul>, que és dins la capsa <div>, que és dins la capsa <body>.

Display

Tot element té una propietat display.

La majoria en tenen un valor per defecte: block o inline.

Un element block ocupa tota l’amplada disponible, encara que no li faci falta.

Per això dos paràgrafs es col·loquen un sota l’altre.

html
block
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>block</title>
</head>
<body class="p-5">
  <p class="border-4">Hola!</p>
  <p class="border-4">Adeu!</p>
</body>
</html>

Un element inline només ocupa l’amplada que necessita, i deixa lloc al del costat.

<span> és la capsa inline sense significat, el germà petit del <div>.

html
inline
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>inline</title>
</head>
<body class="p-5">
  <span class="border-4">Hola!</span>
  <span class="border-4">Adeu!</span>
</body>
</html>

Estàs llegint una vista prèvia.

Inicia sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.