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 la sessió amb Google per llegir la pàgina sencera.

Inicia la sessió amb Google

Només et demanarem que acceptis les condicions del servei.