Text

  • web/document-text
    document-text-87397c.gitlab.io

    • Un document HTML és un document de text "pla" amb marques que indiquen el tipus de contingut, com s'ha de visualitzar, etc.

    Introducció

    A continuació tens un document HTML estilitzat amb Tailwind:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <title>Document - Text</title>
</head>
<body class="prose">
    <h1>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:

    1. Un troç de text es marca amb un “tag” <p> d’obertura i un “tag” de tancament </p>.

    2. El tag de tancament </p> ha de tenir el mateix nom que el tag d’obertura <p>

    3. El tag de tancament </p> és un tag de tancament perquè comença amb </

    4. 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: 22

    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 H2O.

    Sup

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

    El CO2 é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 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.

    The quick brown fox jumps over the lazy dog.

    The quick brown fox jumps over the lazy dog.

    The quick brown fox jumps over the lazy dog.

    The quick brown fox jumps over the lazy dog.

    font-style

    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

    1. Chop potatoes into quarters
    2. Simmer in salted water for 15-20 minutes until tender
    3. Heat milk, butter and nutmeg
    4. Drain potatoes and mash
    5. 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

    GosGat
    Tortuga
    NutriaDolfí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

    SaturdaySunday
    Tickets sold:120135
    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

    9am10am11am12am
    MondayGeographyMathArt
    TuesdayGymHome 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.

    ABCBBCCNN
    6pm - 7pmMovieComedyNews
    7pm - 8pmSportCurrent 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 H2O potser no tenim res.

    Si fos H2O potser tidriem quelcom

    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

    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.

    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.

    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

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

    5.- Canelons

    Canelons a la catalana o de Sant Esteve

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

    Canelons
    Uns canalons de Sant Esteve
    1. 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.
    2. En una fusta pelem i tallem la ceba al estil Brunoise.
    3. En una paella afegim una mica d’oli d’oliva i deixem escalfar a foc mig fins que l’oli estigui ben calent.
    4. Afegim la ceba i deixem cuinar uns 2-3 minuts a foc mig.
    5. Seguidament afegim la barreja de carns de vedella …

    6.- Dakar

    Clasificaciones 2023 al final de la etapa 9

    Distancia total recorrida: 686 km

    Pos.N°Piloto-EquipoEquipoTiempo Diferencia
    177(arg) LUCIANO BENAVIDESHUSQVARNA FACTORY RACING03h 18’ 44”
    28(aus) TOBY PRICERED BULL KTM FACTORY RACING03h 19’ 46”+ 00h 01’ 02”
    310(usa) SKYLER HOWESHUSQVARNA FACTORY RACING03h 21’ 41”+ 00h 02’ 57”
    468(esp) TOSHA SCHAREINAKTM RACING TEAM03h 23’ 37”+ 00h 04’ 53”
    517(fra) ROMAIN DUMONTIERTEAM DUMONTIER RACING03h 24’ 54”+ 00h 06’ 10”

    7.- Horari

    CFGS - Desenvolupament Aplicacions Web

    Horari del CGFS-DAW
    DillunsDimartsDimecresDijousDivendres
    8:30
    9:30
    DAW-04
    de Mingo
    or43
    DAW-10
    Alonso
    or43
    9:30
    10:30
    DAW-11
    Maria
    or43
    DAW-2
    Montesinos
    or43
    DAW-1
    Verdegal
    or43
    10:30
    11:30
    DAW-3
    Bardají
    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

    Avaluació

    1.- Aigua pesant

    Aigua pesant

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

    • Fórmula: D2O
    • Densitat: 1,11 g/cm3
    • Massa molar: 20,0276 g/mol

    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

    3.- Premi Turing

    Premi Turing

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

    Guardonats

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