Document

HTML (Hypertext Markup Language) és un llenguatge estàndard que permet crear documents amb:

  1. Marques no visibles a l’usuari que modifiquen la presentació del text (Markup).
  2. Enllaços a altres documents mitjançant hiper enllaços (Hypertext)

Al principi l’HTML es va dissenyar per escriure documents com els que escrius quan fas servir el Word, amb la diferència que és un format molt senzill que no té problemes de compatibilitat i permet compartir documents amb tothom a través d’Internet.

A continuació tens un document HTML que només té marques, excepte la paraula Hola!.

<!doctype html>
<html>
  <head>
    <title>Test</title>
    <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>Hola!</body>
</html>

Per tant el navegador només mostrarà una pàgina en blanc amb el text Hola!, perquè tot el que està escrit entre < i > són marques i no es mostren a la pantalla del navegador.

Important! Fixa’t que en aquest document hi ha una linea que posa Bootstrap.

Quan vagis a treballar et demanaran si saps Bootstrap (o Tailwind), no pas CSS 🧐!

Text simple

Un document HTML és un document de text sense format que és pot crear i editar amb l'editor básic de Windows.

Escriu aquest document en un fitxer de text amb el nom hola.html amb el Notepad i obre'l amb el navegador:

Pots veure que no hi ha cap diferència entre un fitxer txt i un fitxer html perquè els documents HTML no tenen ni estil ni format.

Però si fas servir un editor que permeti posar color a les lletres, canviar el tamany de les lletres, etc., encara que diguis que és un fitxer html perquè li poses l'extensió .html no és un fitxer html tal com pots veure a continuació.

Borra el fitxer hola.html i crea'l de nou amb OpenOffice (recorda que l’has de guardar com hola.html).

Quan obres el navegador veuras un document semblant a aquest:

Marques

Són necessàries tantes marques? Depen.

També pots escriure aquest document

Hola!

I el resultat serà gairebé el mateix.

Els navegadors són molt permisius, i sempre presenten els documents el millor que poden i a la seva manera si no els hi dius altre cosa. Això al principi et va molt bé perquè no t’has de fixar massa en escriure l’HTML de manera correcta perquè sempre es veu més o menys bé, però a mida que el document es va fent més gran i complex passen coses i no es mostra el que vols, i llavors no saps perquè passa i no t’en saps sortir.

Per tant és molt important que escriguis HTML correctament.

Editor

Escriure codi HTML amb el Notepad no és gaire aconsellable.

Per això existeixen editors d'HTML i un d’ells és VS Code.

A l'ordinador de l'institut utilitza l'última versió de VS Code tal com s'explica a Box.

> Start-Code

Visual Studio Code proporciona per defecte un suport bàsic per a la programació HTML tal com s’explica en aquest document: HTML Programming.

Encara que el suport bàsic està bé, a l’editor se li poden afegir moltes extensions per ampliar la seva funcionalitat.

Una d’elles és Live Preview (Microsoft) que ens permet veure el document renderitzat en el mateix editor.

Un cop has instal.lat l’extensió apareixerà una icona nova a la part superior dreta de l’editor que ens permet mostrar el document (Show Preview)

Si apretes la icona la pantalla es dividirà en dues parts, i cada cop que modifiques l’HTML de l’esquerra s’actualitza el renderitzat a la dreta:

Estructura

Quan escrius un document en Word fas servir les icones de l’aplicacició per indicar que aquest tros de texte és una capçalera, aquesta paraula és important (per exemple posant-la en negreta), etc., i el text canvia de color i de tamany per mostrar que són coses diferents.

En canvi en HTML fas servir elements de marcatge que no modifiquen el color ni el tamany del text, ja que HTML és text sense format (“plain text”).

L’HTML té un conjunt de marques predefinides que tenen un significat concret per al navegador, i es fan servir per marcar un contingut amb una marca d’inici i una marca identica de tancament (té una barra inclinada adicional).

<!doctype html>
<html>
  <head>
    <title>Títol</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 (excepte les marques).

  • 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”).

Com que els navegadors sempre són molt permisius pots escriure aquest codi, i el resultat visual és bastant semblant:

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

I aquesta permisivitat et fa feliç fins que fas alguna pifia, i el navegador no fa el que tu vols, com pots comprobar a continuació:

<h1>Barcelona
<p>Barcelona és un ciutat mediterrànea i la capital de catalunya.
<h2>Sagrada Familia</h2>
<p>La Sagrada Familia és una basílica dissenyada per Antoni Gaudí ...

Com pots veure la marca <h1> no ésta tancada i el navegador decideix que tot és una capçalera de nivell 1 fins la marca <h2>.

També pots escriure sense marques:

Barcelona
Barcelona és un ciutat mediterrànea i la capital de catalunya.
Sagrada Familia
La Sagrada Familia és una basílica dissenyada per Antoni Gaudí ...

Exercici. Crea un document HTML amb contingut visible després de la marca de tancament , per exemple:

  ...
 </body>
 <p>Navegador, ets genial!<p>
</html>

En principi la marca <body> és per indicar al navegador que és el que ha de mostrar, però com que els navegadors són molt permisius i els programadors molt despistats, verifica que fa el navegador amb el contingut visible que no està marcat com que forma part del cos (“body”) del document.

Estil

L’HTML es va inventar fa molts anys quan encara no existia el Windows, i les pantalles eren terminals en blanc i negre (més aviat verd) com quan fas servir la consola de l’ordinador (Shell) quan no et queda més remei.

Però un text ha de tenir estil: colors, tamanys i fonts de lletres diferents, alineament diferent, etc. Per aconseguir això fem servir CSS, però no directament, sinò mitjançant una llibreria que es diu Bootstrap.

Quan es va introduïr CSS la majoria de les pantalles eren de 1024x768 pixels, però ara mateix els usuaris tenen pantalles d’ordinador amb més definició, i les pàgines web es veuen en mòbils i tablets amb pantalles de definició molt diversa. Aquest és el motiu que les pàgines han de ser responsives, i només és possible si fem servir una llibreria per donar estil al nostre document (poca gent és capaç de fer-ho directament per si sol).

Les marques <meta> i <link> que es troben dins de <head> tenen aquest propòsit:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>

Els atributs ens diuen més sobre els elements

Els atributs proporcionen informació addicional sobre el contingut d'un element. Apareixen a l'etiqueta d'obertura de l'element i estan formats per dues parts: un nom i un valor separats per un signe igual.

<p class="text-center">Estic al mitg</p>
  • El nom de l'atribut indica quin tipus d'informació addicional estàs proporcionant sobre el contingut de l'element. S'ha d'escriure en minúscula.

  • El valor és la informació o la configuració de l'atribut. S'ha de posar entre cometes dobles. Els diferents atributs poden tenir diferents valors.

  • Aquí un atribut amb el nom de class s'utilitza per indicar la classe d’aquest element.

    La fulla d’estil de bootstrap que importem amb el tag <link> fa servir el valors dels atributs class per donar estil al document.

La majoria dels atributs:

  • Només es poden utilitzar en determinats elements, encara que alguns atributs (com ara class) pot aparèixer en qualsevol element.

  • La majoria dels valors d'atributs estan predefinits o segueixen un format estipulat. Veurem els valors permesos a mesura que introduïm cada nou atribut.

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">
    <link rel="stylesheet"href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
  </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

Quan crees una pàgina web, afegeixes etiquetes al contingut de la pàgina.

Aquestes etiquetes marquen parts del document i proporcionen un significat addicional que permet als navegadors mostrar als usuaris l'estructura adequada per a la pàgina.

Marcatge estructural

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">
   <link rel="stylesheet"href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
 </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.

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

Paràgrafs

<p class="border border-3 border-danger">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 border-3 border-danger">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 crear un paràgraf, envolta les paraules que componen el paràgraf amb una etiqueta d’obertura <p> i una etiqueta de tancament </p>.

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

Com 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 respresentar 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.

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

Marcatge semàntic

Hi ha alguns elements de text que no tenen la intenció d'afectar l'estructura de la pàgines, però que afegeixen informació addicional a la pàgina; es coneixe com a marcatge semàntic.

Els navegadors sovint mostren el contingut dels elements de marcatge semàntic d'una manera diferent. Per exemple, el contingut de l’element <em> es mostra en cursiva i l’element <blockquote> sol estar sagnat. Però no hauríeu d'utilitzar-los per canviar l'aspecte del teu text; el seu propòsit és descriure el contingut de les vostres pàgines web amb més precisió.

El motiu d'utilitzar aquests elements és que altres programes, com ara lectors de pantalla o motors de cerca, poden utilitzar aquesta informació addicional. Per exemple, la veu d'un lector de pantalla pot afegir èmfasi a les paraules marcades amb l’element <em> element, o un motor de cerca podria registrar que la vostra pàgina inclou una cita si utilitzas l'element <blockquote>.

Strong

<p><strong>Compte:</strong> Els carteristes operen en aquesta zona.</p>

L'ús de l’element <strong> indica que el seu contingut té una gran importància. Per defecte, els navegadors mostraran el contingut de l’element <strong> en negreta.

Emphasis

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

L’element <em> indica èmfasi que canvia subtilment el significat d'una frase. Per defecte, els navegadors mostren el contingut de l'element <em> en cursiva.

Estil

Pots modificar l’estil d’un text tal com s’explica a Text · Bootstrap v5.3

Alineació

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

font size

fs és un acrònim de font size i canvia el tamnay de la lletra de la secció marcada.

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

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

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

font-weight

Amb fw pots controlar la “foscor” de l’element marcat:

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>

font style

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

line height

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

color

Pots modificar el color d’un text tal com s’explica a Colors · Bootstrap v5.3.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Llistes

Hi ha moltes ocasions en què hem d'utilitzar llistes. HTML ens ofereix tres tipus diferents:

  • Llistes ordenades són llistes on cada element de la llista està numerat. Per exemple, la llista pot ser un conjunt de passos per a una recepta que s'ha de realitzar per ordre, o un contracte legal on cada punt s'ha d'identificar amb un número de secció.

  • Llistes no ordenades són llistes que comencen amb una vinyeta (en lloc de caràcters que indiquen l'ordre).

  • Llistes de definicions estan formats per un conjunt de termes juntament amb les definicions de cadascun d'aquests termes.

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

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

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

Llistes imbricades

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

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

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

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>

Taula

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, pero 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>

Encapçalaments de la taula

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

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>

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.

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.

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

Per veure la solució pots fer click a "link" i en la pàgina botó dret del ratolí i ..

1.- Basic Chemistry

2.- Quixote

3.- Un dia qualsevol

4.- La vaca cega

5.- Vaixell de paper

5.- Canelons

6.- Dakar

7.- Horari

Avaluació

Part teòrica

Part pràctica

1.- Aigua pesant

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.

3.- Premi Turing