Text

Introducció

A continuació tens un document HTML:

<!doctype html>
<html>
  <head>
    <title>Hello</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Document de text

Obre un terminal de Powershell

Crea una carpeta html amb un fitxer hello.html:

new-item -type directory html
new-item html/hello.html

Obre el fitxer hello.html amb el Bloc de notes del Windows:

notepad html/hello.html

Copia el contingut del document HTML de l’inici al “notepad”:

Guarda el fitxer i tanca el “notepad”.

Els documents HTML es visualitzen amb navegadors.

Obre el document amb un navegador:

invoke-item html/hello.html

Pots veure que en el navegador només apareix el text!

Tot el marcatge ha desaparegut, no es mostra!

I el text que està entre les marques <h1> i </h1> apareix més gran i fosc.

Qué és el marcatge?

Tot el text que està dins dels caràcters < i > són marques.

Editor

Per treballar amb HTML utilitza l’editor VS Code.

irm https://sh.xtec.dev/ide.ps1 | iex

Obre la carpeta html amb VS Code:

code html

VS Code té moltes ajudes per escriure HTML tal com s’explica en aquest document: HTML Programming.

Instal·la l’extensió Live Preview (Microsoft) que ens permet visualitzar el document en el mateix editor amb un navegador integrat.

Un cop has instal·lat l’extensió apareixerà una icona nova a la part superior dreta de l’editor:

Apreta la icona “Show Preview” ; apareixerà un nou panell a la dreta.

Cada cop que modifiques el document l’HTML en el panell de l’esquerra, s’actualitza el navegador del panell de la dreta:

Marcatge

L’HTML té un conjunt de marques predefinides (“tags”) que tenen un significat “semàntic” per als navegadors i els buscadors:

Un troç de text es marca amb un “tag” <p> d’obertura i un “tag” de tancament </p>.
El tag de tancament </p> ha de tenir el mateix nom que el tag d’obertura <p>
El tag de tancament </p> és un tag de tancament perquè comença amb </
Entre el “tag” <p> d’obertura i un “tag” de tancament </p>, poden haver molts més tags.

A continuació tens un exemple:

<!doctype html>
<html>
  <head>
    <title>Barcelona</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Barcelona</h1>
    <p>Barcelona és un ciutat mediterrànea i la capital de catalunya.</p>
    <h2>Sagrada Familia</h2>
    <p>La Sagrada Familia és una basílica dissenyada per Antoni Gaudí ...</p>
  </body>
</html>

En el codi anterior:

La marca d’obertura <html> indica que tot el que hi ha a continuació d’aquesta marca fins a la marca de tancament </html> és codi HTML.
La marca d’obertura <body> indica que tot el que hi ha a continuació d’aquesta marca fins a la marca de tancament </body> s’ha de mostrar a la finestra principal del navegador.
La marca d’obertura <h1> indica que tot el que hi ha a continuació d’aquesta marca fins a la marca de tancament </h1> és una capçalera (“heading”), o títol, de nivell 1.
La marca d’obertura <p> indica que tot el que hi ha a continuació d’aquesta marca fins a la marca de tancament </p> és una paràgraf (“paragraph).

Estil

Un tag pot tenir atributs.

Els atributs són com “paràmetres” del tag.

Un dels atributs més utilitzats és class, que permet estilitzar el contingut.

Per exemple, si vull centrar un paràgraf:

<p class="text-center">Estic al mitg</p>

La majoria dels atributs:

Només es poden utilitzar en determinats elements.
La majoria dels valors d’atributs estan predefinits o segueixen un format estipulat.

😊

L’atribut class és l’excepció més important al que acabem de dir.

Body, Head & Title

<!doctype html>
<html>
  <head>
    <title>Aquest és el titol de la pàgina</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1>Això és el cos de la pàgina</h1>
    <p>Tot el que estigui dins del cos de la pàgina web és el que es mostra al navegador.</p>
</body>
</html>

En teoria només el que està dins l’element <body> es mostra dins de la finestra principal del navegador.
Abans de l’element <body> és habitual que vagi l’element <head>. L’element <head> té diferents elements que no es renderitzen al navegador com meta-informació, enllaços a fulls d’estils o scripts, etc..
L’element <title> està dins de l’element <head> i es mostra a la part superior del navegador, a sobre d’on normalment escrius l’URL de la pàgina que vols visitar, o a la pestanya d’aquesta pàgina.

Text

Les etiquetes (o “tags”) marquen parts del document i proporcionen un significat addicional que permet als navegadors mostrar als usuaris l’estructura adequada per a la pàgina.

Encapçalaments

HTML té sis “nivells” d’encapçalaments:

<!doctype html>
<html>
 <head>
   <title>Encapçalaments</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 </head>
 <body>
   <h1>Aquest és un encapçalament principal</h1>
   <h2>Aquest és un encapçalament de nivell 2</h2>
   <h3>Aquest és un encapçalament de nivell 3</h3>
   <h4>Aquest és un encapçalament de nivell 4</h4>
   <h5>Aquest és un encapçalament de nivell 5</h5>
   <h6>Aquest és un encapçalament de nivell 6</h6>
</body>
</html>

<h1> s’utilitza per als encapçalaments principals
<h2> s’utilitza per als subtítols
Si hi ha més seccions sota els subtítols, s’utilitza l’element <h3>, i així successivament…

Els navegadors mostren el contingut dels encapçalaments en diferents mides. El contingut d’un element <h1> és el més gran i el contingut d’un element <h6> és el més petit. La mida exacta en què cada navegador mostra els encapçalaments pot variar lleugerament.

Headers

<h1>: Heading 1

<h2>: Heading 2

<h3>: Heading 3

<h4>: Heading 4

<h5>: Heading 5

<h6>: Heading 6

Els usuaris també poden ajustar la mida del text al seu navegador.

Paràgrafs

Paragraph

Un paràgraf consta d’una o més frases que formen una unitat de discurs autònoma. L’inici d’un paràgraf s’indica amb una línia nova.

El text és més fàcil d’entendre quan es divideix en unitats de text. Per exemple, un llibre pot tenir capítols. Els capítols poden tenir subtítols. Sota cada encapçalament hi haurà un o més paràgrafs.

Per crear un paràgraf, envolta les paraules que componen el paràgraf amb una etiqueta d’obertura <p> i una etiqueta de tancament </p>.

<p class="border-2 border-red-500">Un paràgraf consta d'una o més frases que formen una unitat de discurs autònoma. L'inici d'un paràgraf s'indica amb una línia nova.</p>

<p class="border-2 border-red-500">El text és més fàcil d'entendre quan es divideix en unitats de text. Per exemple, un llibre pot tenir capítols. Els capítols poden tenir subtítols. Sota cada encapçalament hi haurà un o més paràgrafs.</p>

Per defecte, el navegador mostrarà cada paràgraf en una línia nova amb un, i només un espai, entre aquest i els paràgrafs posteriors.

Pots veure fem servir l’atribut class per estilitzar l’element <p> i ens mostri la vora de l’element, i així poder veure l’espai que introdueix el navegador.

Superíndex i subíndex

<p>Un byte són 8 bits i pot representar 2<sup>8</sup> nombres diferents.</p>

<p>El CO<sub>2</sub> és una mol·lècula ... .</p>

L’element <sup> s’utilitza per caràcters que han de ser superíndex, per exemple conceptes matemàtics com augmentar un nombre a una potència de 2: 2²

L’element <sub> s’utilitza per caràcters que han de ser subíndex, com les notes a peu de pàgina o fórmules químiques com H₂O.

Sup

Un byte són 8 bits i pot representar 2⁸ nombres diferents.

El CO₂ és una mol·lècula … .

Espai blanc

<p>La lluna s'allunya de la Terra.</p>


<p>La lluna
s'allunya de la Terra.</p>

<p>La lluna s'allunya
                         Terra.</p>

Quan el navegador troba dos o més espais al costat de l’altre, només mostra un espai. De la mateixa manera, si es troba amb un salt de línia, també el tracta com un espai únic. Això es coneix com “white space collapsing”.

White Space

La lluna s’allunya de la Terra.

La lluna s’allunya Terra.

Marcatge semàntic

Emphasis

Aquesta joguina té moltes peces petites i, potser, no és apta per a nens menors de cinc anys.

Els tags <strong> i <em> es fan servir per donar significat semàntic a un troç de text.

<strong> és per ressaltar el text.
<em> per emfatitzar el text

<p>Aquesta joguina té moltes peces petites i, <em>potser</em>, <strong>no és apta per a nens menors de cinc anys. </strong></p>

Un navegador mostra un <strong> en negreta, i un <em> en lletres itàliques.

Un assistent de veu apuja el to en l’<strong> i utilitza un to diferent en l’<em>.

Estil

Per modificar l’estil del text utilitzem TailwindCss.

text-align

Per exemple, pots modificar l’alineament del text tal com s’explica a text-align

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

Fixa’t que és start i end, no left i right, perquè hi ha idiomes com l’àrab que s’escriu de dreta a esquerra i l’start seria a la dreta.

text-align

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

font-size

Amb font-size pots canviar la mida de la lletra de la secció marcada.

<p class="text-xs">text-xs</p>
<p class="text-sm">.text-sm</p>
<p class="text-base">text-base</p>
<p class="text-lg">text-lg</p>
<p class="text-xl">text-xl</p>
<p class="text-2xl">text-2xl</p>

Amb les etiquetes <h1>, …, <h6> també es canvia la mida de la lletra, però per motius semàntics.

Amb fs només té un objectiu visual, semànticament una <p> segueix sent una <p>.

font-size

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

font-weight

Amb font-weight pots controlar la “foscor” de l’element marcat:

<p class="font-light">The quick brown fox jumps over the lazy dog.</p>
<p class="font-normal">The quick brown fox jumps over the lazy dog.</p>
<p class="font-medium">The quick brown fox jumps over the lazy dog.</p>
<p class="font-semibold">The quick brown fox jumps over the lazy dog.</p>
<p class="font-bold">The quick brown fox jumps over the lazy dog.</p>

font-weight

The quick brown fox jumps over the lazy dog.

font-style

<p class="italic">Italic text.</p>
<p class="not-italic">Text with normal font style</p>

font-style

Italic text.

Text with normal font style

line-height

Amb line-height pots controlar el leading, o alçada de línia, d’un element.

<p class="leading-5">Topant de cap en una i altra soca, avançant d'esma pel camí de l'aigua, se'n ve la vaca tota sola. És cega.</p>
<p class="leading-10">D'un cop de roc llançat amb massa traça, el vailet va desfer-li un ull, i en l'altre se li ha posat un tel: la vaca és cega.</p>
<p class="leading-15">Ve a abeurar-se a la font com ans solia, mes no amb el ferm posat d'altres vegades ni amb ses companyes, no: ve tota sola.</p>
<p class="leading-20">Ses companyes, pels cingles, per les comes, pel silenci dels prats i en la ribera, fan dringar l'esquellot mentre pasturen l'herba fresca a l'atzar, ella cauria!</p>

line-height

Topant de cap en una i altra soca, avançant d’esma pel camí de l’aigua, se’n ve la vaca tota sola. És cega.

D’un cop de roc llançat amb massa traça, el vailet va desfer-li un ull, i en l’altre se li ha posat un tel: la vaca és cega.

Ve a abeurar-se a la font com ans solia, mes no amb el ferm posat d’altres vegades ni amb ses companyes, no: ve tota sola.

Ses companyes, pels cingles, per les comes, pel silenci dels prats i en la ribera, fan dringar l’esquellot mentre pasturen l’herba fresca a l’atzar, ella cauria!

Utilitza les utilitats de mida de font com text-sm/6 i text-lg/7 per establir la mida de la font i l’alçada de línia d’un element al mateix temps:

font-size/line-height

Topant de cap en una i altra soca, avançant d’esma pel camí de l’aigua, se’n ve la vaca tota sola. És cega.

D’un cop de roc llançat amb massa traça, el vailet va desfer-li un ull, i en l’altre se li ha posat un tel: la vaca és cega.

color

Amb color pots controlar el color text d’un element.

<p class="text-red-600">text-red-600</p>
<p class="text-blue-600">text-blue-600</p>
<p class="text-orange-500">text-orange-500</p>
<p class="text-pink-900">text-pink-900</p>

color

text-red-600

text-blue-600

text-orange-500

text-pink-900

span

Si vols estilitzar un troç de text i prou, pots utilitzar l’element neutre <span>.

TODO exemple

Llistes

Una llista pot ser ordenada (té números per indicar l’ordre) o no.

Llistes ordenades

<ol>
 <li>Chop potatoes into quarters</li>
 <li>Simmer in salted water for 15-20  minutes until tender</li>
 <li>Heat milk, butter and nutmeg</li>
 <li>Drain potatoes and mash</li>
 <li>Mix in the milk mixture</li>
</ol>

Una llista ordenada es crea amb l’element <ol>: ordered list.

Cada element de la llista es col·loca entre l’etiqueta d’obertura <li> i l’etiqueta de tancament </li> etiqueta (li vol dir list item).

Ordered List

Chop potatoes into quarters
Simmer in salted water for 15-20 minutes until tender
Heat milk, butter and nutmeg
Drain potatoes and mash
Mix in the milk mixture

Per defecte el navegador sagna les llistes.

Llista no ordenada

<ul>
 <li>1kg King Edward potatoes</li>
 <li>100ml milk</li>
 <li>50g salted butter</li>
 <li>Freshly grated nutmeg</li>
 <li>Salt and pepper to taste</li>
</ul>

La llista no ordenada es crea amb el l’element <ul>: **u*nordered list.

Unordered List

1kg King Edward potatoes
100ml milk
50g salted butter
Freshly grated nutmeg
Salt and pepper to taste

Llistes imbricades

<ul>
 <li>Mousses</li>
 <li>Pastries</li>
 <li>
   <ul>
     <li>Croissant</li>
     <li>Mille-feuille</li>
     <li>Palmier</li>
     <li>Profiterole</li>
   </ul>
 </li>
 <li>Tarts</li>
</ul>

Pots posar una segona llista dins d’un element <li> per crear una subllista o llista imbricada.

List

Mousses
Pastries
- Croissant
- Mille-feuille
- Palmier
- Profiterole
Tarts

Els navegadors mostren llistes imbricades amb un sagnat més enllà de la llista principal.

A les llistes no ordenades imbricades, el navegador normalment canviarà també l’estil de la vinyeta.

Estil

List group - Bootstrap v5.2. Els grups de llistes són un component flexible i potent per mostrar una sèrie de contingut.

<ul class="list-group">
 <li class="list-group-item">An item</li>
 <li class="list-group-item">A second item</li>
 <li class="list-group-item">A third item</li>
</ul>

List Group

An item
A second item
A third item

Normalment s’estitlitza d’aquesta manera per crear menús.

Taules

Les taules en HTML no són com les taules del Word perquè no són quadrícules, encara que ho puguin semblar, i és molt important que recordis això.

Una taula en HTML és un conjunt de files, i només files. No hi ha columnes encara que visualment sembli que la taula és una quadrícula amb files i columnes.

Una fila es marca amb <tr> (“table row”) i pot tenir tantes cel.les com tu vulguis.

Les cel.les es marquen amb <td> (“table data”).

Per estilitzar les taules fem servir la fulla d’estils definida per bootstrap: Taules · Bootstrap v5.1

Si totes les files (“row”) tenen el mateix número de cel.les (“data”) es veurà una cuadricula

Però si no tenen el mateix número de cel.les no semblarà una taula com es pot veure en aquest exemple:

<table class="table">
    <tr>
        <td>Gos</td>
        <td>Gat</td>
    </tr>
    <tr>
        <td>Tortuga</td>
    </tr>
    <tr>
        <td>Nutria</td>
        <td>Dolfí</td>
        <td>Sardina</td>
    </tr>
</table>

Table Bad

Gos	Gat
Tortuga
Nutria	Dolfí	Sardina

Table heading

L’element <th> s’utilitza igual que l’element <td> però el seu propòsit és representar l’encapçalament d’una columna o d’una fila( th vol dir table heading).

<table>
    <tr>
        <th></th>
        <th scope="col">Saturday</th>
        <th scope="col">Sunday</th>
    </tr>
    <tr>
        <th scope="row">Tickets sold:</th>
        <td>120</td>
        <td>135</td>
    </tr>
    <tr>
        <th scope="row">Total sales:</th>
        <td>$600</td>
        <td>$675</td>
    </tr>
</table>

Table Heading

	Saturday	Sunday
Tickets sold:	120	135
Total sales:	$600	$675

Fins i tot si una cel·la no té contingut, has de fer servir un element <td> o <th> per representar la presència d’una cel·la buida, en cas contrari, la taula no es representarà correctament. (La primera cel·la de la primera fila d’aquest exemple mostra una cel·la buida.)

Utilitzar elements <th> per a encapçalaments ajuda a les persones que utilitzen lectors de pantalla, milloren la capacitat dels motors de cerca d’indexar les vostres pàgines i també us permeten controlar millor l’aparença de les taules quan comenceu a utilitzar CSS.

Pots utilitzar l’atribut scope a l’element <th> per indicar si és un encapçalament d’una columna o una fila. Pot prendre el valor row per indicar un encapçalament per a una fila o col per indicar un encapçalament per a una columna.

Els navegadors solen mostrar el contingut de l’element <th> en negreta i al mig de la cel·la.

Spanning columns

A vegades és possible que necessitis que les entrades d’una taula s’estiguin en més d’una columna.

Table Span Col

	9am	10am	11am	12am
Monday	Geography		Math	Art
Tuesday	Gym			Home Ec

L’atribut colspan es pot utilitzar en l’element <th> o <td> element i indica quantes columnes ha de travessar aquesta cel·la.

<table class="table table-bordered">
 <tr>
   <th></th>
   <th>9am</th>
   <th>10am</th>
   <th>11am</th>
   <th>12am</th>
 </tr>
 <tr>
   <th>Monday</th>
   <td colspan="2">Geography</td>
   <td>Math</td>
   <td>Art</td>
 </tr>
 <tr>
   <th>Tuesday</th>
   <td colspan="3">Gym</td>
   <td>Home Ec</td>
 </tr>
</table>

En aquest exemple pots veure un horari amb cinc columnes; la primera columna conté l’encapçalament d’aquesta fila (el dia), les quatre restants representen franges horàries d’una hora.

Si mires la cel·la de la taula que conté les paraules “Geografia”, veuràs que el valor de l’atribut colspan és 2, que vol dir que la cel.la s’ha d’extendre dues columnes. A la tercera fila, “Gym” s’estén a través de tres columnes.

Pots veure que la segona i la tercera fila tenen menys elements <td> que el número de columnes. Això és degut a que quan una cel·la s’estén més d’una columna, les cel.les <td> o <th> que haurien d’estar al lloc de les cel·les exteses no s’inclouen al codi.

Spanning Rows

També és possible que necessites entrades en una taula per estendre’s cap avall en més d’una fila.

	ABC	BBC	CNN
6pm - 7pm	Movie	Comedy	News
7pm - 8pm	Movie	Sport	Current Affairs

L’atribut rowspan es pot utilitzar en un element <th> o <td> per indicar quantes files ha d’omplir una cel·la a la taula.

<table class="table table-bordered">
 <tr>
   <th></th>
   <th>ABC</th>
   <th>BBC</th>
   <th>CNN</th>
 </tr>
 <tr>
   <th>6pm - 7pm</th>
   <td rowspan="2">Movie</td>
   <td>Comedy</td>
   <td>News</td>
 </tr>
 <tr>
   <th>7pm - 8pm</th>
   <td>Sport</td>
   <td>Current Affairs</td>
 </tr>
</table>

A l’exemple pots veure que ABC mostra una pel·lícula de 18 a 20 hores, mentre que els canals de la BBC i CNN mostren dos programes durant aquest període de temps (cadascun d’ells dura una hora).

Si mires l’últim element <tr> només conté tres elements tot i que la taula té quatre “columnes”.

Això és perquè l’element <tr> que mostra l’horari de la película fa servir l’atribut rowspan per extendres cap avall i ocupar la cel·la de sota.

Activitats

Has d’escriure el codi HTML dels troços que es mostren a continuació.

La solució no ha de ser exacta, però s’ha de semblar bastant.

1.- Basic Chemistry

Química bàsica

Si tenim 3050molècules de H²O potser no tenim res.

Si fos H₂O potser tidriem quelcom

<h1>Química bàsica</h1>
<p>Si tenim <del>30</del>
    <ins>50</ins>
    molècules de H<sup>2</sup>O <em>potser no tenim res</em>.
</p>
<p><u>Si fos</u> H<sub>2</sub>O <strong>potser</strong> tidriem quelcom</p>

2.- Quixote

Extracto de capítulos de la primera parte

Extracto de los capítulos que contiene esta famosa historia del valeroso caballero don Quijote de laMancha

Capítulo I

Que trata de la condición y ejercicio del famoso y valiente hidalgo don Quijote de la Mancha

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor

<h1 class="text-uppercase fs-3 text-center">Extracto de capítulos de la primera parte</h1>

<p class="text-center lh-1 fst-italic text-secondary"> Extracto de los capítulos que contiene esta famosa historia
    del valeroso caballero don Quijote de laMancha</p>

<h2 class="text-uppercase fs-5 text-center">Capítulo I</h2>

<p class="text-center lh-1 fst-italic text-secondary"> Que trata de la condición y ejercicio del famoso y valiente
    hidalgo don Quijote de la Mancha</p>


<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de
    lanza en astillero, adarga antigua, rocín flaco y galgo corredor</p>

3.- Un dia qualsevol

Un dia qualsevol foradaré la terra i em faré un clot profund, perquè la mort m’arreplegui dempeus, reptador, temerari.

Suportaré tossudament la pluja i arrelaré en el fang de mi mateix.Quiti de mots, em bastarà l’alè per afirmar una presència d’estricte vegetal.

<p class="lh-1 font-monospace text-info">Un dia qualsevol foradaré la terra i em faré un clot profund, perquè la
    mort
    m'arreplegui dempeus, reptador, temerari.</p>

<p class="lh-lg text-success">Suportaré tossudament la pluja i arrelaré en el fang de mi mateix.Quiti de mots, em
    bastarà l'alè per afirmar una presència d'estricte vegetal.</p>

4.- La vaca cega

Topant de cap en una i altra soca,

avançant d’esma pel camí de l’aigua,

se’n ve la vaca tota sola. És cega.

D’un cop de roc llançat amb massa traça,

el vailet va buidar-li un ull, i en l’altre

se li ha posat un tel: la vaca és cega.

<p class="fs-1 text-center fw-bold">Topant de cap en una i altra soca,</p>

<p class="fs-2 text-center fw-bolder">avançant d'esma pel camí de l'aigua,</p>

<p class="fs-3 text-center fw-semibold">se'n ve la vaca tota sola. És cega.</p>

<p class="fs-4 text-center fw-normal">D'un cop de roc llançat amb massa traça,</p>

<p class="fs-5 text-center fw-light">el vailet va buidar-li un ull, i en l'altre</p>

<p class="fs-6 text-center fw-lighter">se li ha posat un tel: la vaca és cega.</p>

5.- Vaixell de paper

Com es fa un vaixell de paper?

Material que necessitem:

1 cartolina mida DIN A4
1 llapis
Goma

Pasos a seguir per fer el vaixell

Dobleguem la cartolina per la meitat
Baixem els dos extrems superiors i els unim al centre
Pugem l’extrem inferior formant un rectangle i tocant els dos extrems superiors
Dobleguem les puntes d’aquest rectangle cap al costat contrari

<h3>Com es fa un vaixell de paper?</h3>
<p>Material que necessitem:</p>
<ul class="list-group mb-3">
    <li class="list-group-item">1 cartolina mida DIN A4</li>
    <li class="list-group-item">1 llapis</li>
    <li class="list-group-item">Goma</li>
</ul>
<p>Pasos a seguir per fer el vaixell</p>
<ol class="list-group list-group-numbered">
    <li class="list-group-item">Dobleguem la cartolina per la meitat</li>
    <li class="list-group-item">Baixem els dos extrems superiors i els unim al centre</li>
    <li class="list-group-item">Pugem l'extrem inferior formant un rectangle i tocant els dos extrems superiors</li>
    <li class="list-group-item"> Dobleguem les puntes d'aquest rectangle cap al costat contrari</li>
</ol>

5.- Canelons

Canelons a la catalana o de Sant Esteve

Com fer canelons a la catalana o de Sant Esteve pas a pas

Agafem un bol i fiquem els diferents tipus de carn. Amb l’ajuda d’una forquilla aixafem i barregem totes les carns fins a obtenir una barreja més o menys homogènia.
En una fusta pelem i tallem la ceba al estil Brunoise.
En una paella afegim una mica d’oli d’oliva i deixem escalfar a foc mig fins que l’oli estigui ben calent.
Afegim la ceba i deixem cuinar uns 2-3 minuts a foc mig.
Seguidament afegim la barreja de carns de vedella …

<h1 class="text-center text-success">Canelons a la catalana o de Sant Esteve</h1>

<p>Com fer canelons a la catalana o de Sant Esteve pas a pas</p>
<figure class="figure">
    <img src="canelons.png" class="figure-img img-fluid rounded" alt="Canelons">
        <figcaption class="figure-caption">Uns canalons de Sant Esteve</figcaption>
</figure>

<ol class="list-group  list-group-numbered">
    <li class="list-group-item"> Agafem un bol i fiquem els diferents tipus de carn. Amb l'ajuda d'una forquilla
        aixafem i barregem totes les carns fins a obtenir una barreja més o menys homogènia.
    </li>
    <li class="list-group-item">En una fusta pelem i tallem la ceba al estil Brunoise.</li>
    <li class="list-group-item">En una paella afegim una mica d'oli d'oliva i deixem escalfar a foc mig fins que
        l'oli estigui ben calent.
    </li>
    <li class="list-group-item">Afegim la ceba i deixem cuinar uns 2-3 minuts a foc mig.</li>
    <li class="list-group-item">Seguidament afegim la barreja de carns de vedella ...</li>
</ol>

6.- Dakar

Clasificaciones 2023 al final de la etapa 9

Distancia total recorrida: 686 km

Pos.	N°	Piloto-Equipo	Equipo	Tiempo	Diferencia
1	77	(arg) LUCIANO BENAVIDES	HUSQVARNA FACTORY RACING	03h 18’ 44”
2	8	(aus) TOBY PRICE	RED BULL KTM FACTORY RACING	03h 19’ 46”	+ 00h 01’ 02”
3	10	(usa) SKYLER HOWES	HUSQVARNA FACTORY RACING	03h 21’ 41”	+ 00h 02’ 57”
4	68	(esp) TOSHA SCHAREINA	KTM RACING TEAM	03h 23’ 37”	+ 00h 04’ 53”
5	17	(fra) ROMAIN DUMONTIER	TEAM DUMONTIER RACING	03h 24’ 54”	+ 00h 06’ 10”

<h1 class="text-center fs-3">Clasificaciones 2023 al final de la etapa 9</h1>
<p class="text-center fs-5">Distancia total recorrida: <strong>686 km</strong></p>

<table class="table table-striped table-sm">
    <thead>
    <tr>
        <th scope="col">Pos.</th>
        <th scope="col">N°</th>
        <th scope="col">Piloto-Equipo</th>
        <th scope="col">Equipo</th>
        <th scope="col">Tiempo</th>
        <th scope="col"> Diferencia</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="text-primary fw-bold">1</td>
        <td>77</td>
        <td class="fw-bold">(arg) LUCIANO BENAVIDES</td>
        <td>HUSQVARNA FACTORY RACING</td>
        <td class="font-monospace text-secondary">03h 18' 44''</td>
        <td></td>
    </tr>
    <tr>
        <td class="text-primary fw-bold">2</td>
        <td>8</td>
        <td class="fw-bold">(aus) TOBY PRICE</td>
        <td>RED BULL KTM FACTORY RACING</td>
        <td>03h 19' 46''</td>
        <td class="font-monospace text-secondary">+ 00h 01' 02''</td>
    </tr>
    <tr>
        <td class="text-primary fw-bold">3</td>
        <td>10</td>
        <td class="fw-bold">(usa) SKYLER HOWES</td>
        <td>HUSQVARNA FACTORY RACING</td>
        <td>03h 21' 41''</td>
        <td class="font-monospace text-secondary">+ 00h 02' 57''</td>
    </tr>
    <tr>
        <td class="text-primary fw-bold">4</td>
        <td>68</td>
        <td class="fw-bold">(esp) TOSHA SCHAREINA</td>
        <td>KTM RACING TEAM</td>
        <td>03h 23' 37''</td>
        <td class="font-monospace text-secondary">+ 00h 04' 53''</td>
    </tr>
    <tr>
        <td class="text-primary fw-bold">5</td>
        <td>17</td>
        <td class="fw-bold">(fra) ROMAIN DUMONTIER</td>
        <td>TEAM DUMONTIER RACING</td>
        <td>03h 24' 54''</td>
        <td class="font-monospace text-secondary">+ 00h 06' 10''</td>
    </tr>
    </tbody>
</table>

7.- Horari

CFGS - Desenvolupament Aplicacions Web

Horari del CGFS-DAW
	Dilluns	Dimarts	Dimecres	Dijous	Divendres
8:30 9:30	DAW-04 de Mingo or43	DAW-10 Alonso or43
9:30 10:30		DAW-10 Alonso or43	DAW-11 Maria or43	DAW-2 Montesinos or43	DAW-1 Verdegal or43
10:30 11:30		DAW-3 Bardají or43	DAW-11 Maria or43	DAW-2 Montesinos or43	DAW-1 Verdegal or43
11:30 12:00
12:00 13:00	DAW-3 Bardají or43	DAW-3 Bardají or43	DAW-3 Bardají or43	DAW-2 Montesinos or43	DAW-5

<h1 class="text-center fs-3">CFGS - Desenvolupament Aplicacions Web</h1>
<table class="table table-bordered">
    <caption>Horari del CGFS-DAW</caption>
    <tr>
        <th></th>
        <th scope="col">Dilluns</th>
        <th scope="col">Dimarts</th>
        <th scope="col">Dimecres</th>
        <th scope="col">Dijous</th>
        <th scope="col">Divendres</th>
    </tr>
    <tr>
        <th scope="col">8:30<br/>9:30</th>
        <td rowspan="3">
            <div class="fw-bold text-danger">DAW-04</div>
            <div>de Mingo</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td rowspan="2">
            <div class="fw-bold text-danger">DAW-10</div>
            <div>Alonso</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th scope="col">9:30<br/>10:30</th>
        <td rowspan="2">
            <div class="fw-bold text-danger">DAW-11</div>
            <div>Maria</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td rowspan="2">
            <div class="fw-bold text-danger">DAW-2</div>
            <div>Montesinos</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td rowspan="2">
            <div class="fw-bold text-danger">DAW-1</div>
            <div>Verdegal</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
    </tr>
    <tr>
        <th scope="col">10:30<br/>11:30</th>
        <td>
            <div class="fw-bold text-danger">DAW-3</div>
            <div>Bardají</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
    </tr>
    <tr>
        <th scope="col">11:30<br/>12:00</th>
        <td colspan="5"></td>
    </tr>
    <tr>
        <th scope="col">12:00<br/>13:00</th>
        <td rowspan="3">
            <div class="fw-bold text-danger">DAW-3</div>
            <div>Bardají</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td>
            <div class="fw-bold text-danger">DAW-3</div>
            <div>Bardají</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td rowspan="2">
            <div class="fw-bold text-danger">DAW-3</div>
            <div>Bardají</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td>
            <div class="fw-bold text-danger">DAW-2</div>
            <div>Montesinos</div>
            <div class="text-muted fst-italic">or43</div>
        </td>
        <td rowspan="2">
            <div class="fw-bold text-danger">DAW-5</div>
        </td>
    </tr>
</table>

Avaluació

1.- Aigua pesant

Aigua pesant

L’aigua pesant és aigua (H₂O) en la qual els àtoms d’hidrogen han estat substituïts pel deuteri (D). La seva fórmula química és doncs D₂O.

Fórmula: D₂O
Densitat: 1,11 g/cm³
Massa molar: 20,0276 g/mol

<h1>Aigua pesant</h1>

<p>L'<strong>aigua pesant</strong> és aigua (H<sub>2</sub>O) en la qual els àtoms d'hidrogen <u>han estat
    substituïts
    pel deuteri (D)</u>. La seva fórmula química és doncs D<sub>2</sub>O.</em></p>

<ul>
<li><strong>Fórmula:</strong> D<sub>2</sub>O</li>
<li><strong>Densitat:</strong> 1,11 g/cm<sup>3</sup></li>
<li><strong>Massa molar: </strong>20,0276 g/mol</li>
</ul>

2.- A un avariento

En la poesia és un dels pocs casos en que és correcte fer servir el tag <br/> per trencar la línia.

A un avariento

En aqueste enterramiento
humilde, pobre y mezquino,
yace envuelto en oro fino
un hombre rico avariento.

Murió con cien mil dolores
sin poderlo remediar,
tan sólo por no gastar
ni aun gasta malos humores.

Francisco de Quevedo

<h1 class="fs-4 text-center text-primary"> A un avariento</h1>

<p class="text-start text-secondary lh-sm">En aqueste enterramiento <br>
    humilde, pobre y mezquino,<br>
    yace envuelto en oro fino <br>
    un hombre rico avariento.</p>

<p class="text-end lh-lg text-danger"> Murió con cien mil dolores <br>
    sin poderlo remediar,<br>
    tan sólo por no gastar<br>
    ni aun gasta malos humores.</p>
<p class="text-center fst-italic text-success">Francisco de Quevedo</p>

3.- Premi Turing

Premi Turing

El Premi Turing és considerat per molts com el Premi Nobel de la Informàtica.

Guardonats

Any	Nom	Motiu
1966	Alan Perlis	Per la seva influència en les àrees de tècniques de programació avançades i construcció de compiladors.
1967	Maurice V. Wilkes	Pel disseny i construcció d’EDSAC, el primer ordinador de programa emmagatzemament en memòria interna.
1968	Richard Hamming	Per la seva feina en mètodes numèrics, sistemes de codificació automàtics, i pel desenvolupament de codis de detecció i correcció d’errors.
1969	Marvin Minsky	Per les seves aportacions a intel·ligència artificial.
1970	JH Wilkinson	Per les seves investigacions en anàlisi numèrica per facilitar l’ús de computadors digitals d’alta velocitat.

<h1 class="fs-2">Premi Turing</h1>

<p>El <strong>Premi Turing</strong> és considerat per molts com el Premi Nobel de la Informàtica.</p>

<h2 class="fs-3">Guardonats</h2>

<table class="table table-bordered table-striped table-sm">
    <tr class="fs-bold">
        <th>Any</th>
        <th>Nom</th>
        <th>Motiu</th>
    </tr>
    <tr>
        <td class="fw-light">1966</td>
        <td class="text-primary fw-semibold">Alan Perlis</td>
        <td class="lh-sm">Per la seva influència en les àrees de tècniques de programació avançades i construcció de
            compiladors.
        </td>
    </tr>
    <tr>
        <td class="fw-light">1967</td>
        <td class="text-primary fw-semibold">Maurice V. Wilkes</td>
        <td class="lh-sm">Pel disseny i construcció d'EDSAC, el primer ordinador de programa emmagatzemament en
            memòria
            interna.
        </td>
    </tr>
    <tr>
        <td class="fw-light">1968</td>
        <td class="text-primary fw-semibold">Richard Hamming</td>
        <td class="lh-sm">Per la seva feina en mètodes numèrics, sistemes de codificació automàtics, i pel
            desenvolupament de codis de detecció i correcció d'errors.
        </td>
    </tr>
    <tr>
        <td class="fw-light">1969</td>
        <td class="text-primary fw-semibold">Marvin Minsky</td>
        <td class="lh-sm">Per les seves aportacions a intel·ligència artificial.</td>
    </tr>
    <tr>
        <td class="fw-light">1970</td>
        <td class="text-primary fw-semibold">JH Wilkinson</td>
        <td class="lh-sm">Per les seves investigacions en anàlisi numèrica per facilitar l'ús de computadors
            digitals
            d'alta velocitat.
        </td>
    </tr>
</table>

El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.