# Llenguatge html/Llistes i taules

* Llenguatge html
* Introducció
* Regles bàsiques del codi
* Crear un document html
* Escriure text
* Estil del text
* Imatges
* Llistes i taules
* Enllaços
* Estils CSS
* Altres
* Penjar la web a internet
Les llistes i les taules, són uns elements de vital importància als documents html, aquí t'explicarem com crear-les i editar-les.

## Llistes

Hi ha dos tipus de llistes, les llistes ordenades i les llistes desordenades.

### Llistes desordenades

Per començar una llista desordenada utilitzarem l'element UL amb l'etiqueta <UL> per començar i </UL> per acabar la llista. Es pot personalitzar la llista amb diversos atributs, com ara:
* Type: Amb aquest atribut podem triar si els elements de la llista han de tenir un punt (circle), quadre (square) o disc introduint-los. Per tant quedarà TYPE = circle, TYPE = disc o TYPE = square, depenent del que vulguem.
* Plain: Elimina els marcadors (punts, quadres o discos)
* SRC: Amb això podem utilitzar una imatge com a marcador. Quedaria així: SRC = <imatge>.
* WRAP: Ens permet triar si s'han de disposar els elements vertical o horitzontalment. WRAP = horiz, WRAP = vert.
* Style: Permet designar estils a la taula.
Un altre element es l'etiqueta és LH que funciona amb les etiquetes <LH> i </LH>; són per delimitar el títol.
Molt bé, però com posem elements a la llista? Molt fàcil, amb l'element LI, que té dues etiquestes: <LI> per obrir i </LI> per tancar. L'element LI també té els atributs Type i Style que hem vist per l'atribut UL.
Amb tot el que hem vist quedaria quelcom similar a això:
Quedaria així:
* Aquest és un element introduït per un cercle
* Aquest és un altre element. No s'especifica per quin símbol ha d'anar introduït.
* Un tercer element...
També es poden crear subllistes:
Quedaria així:
* Primer element
* Segon element
* Terçer element
* Quart element
* Cinquè element

### Llistes ordenades

Utilitzant l'atribut OL per començar i acabar la llista crearem una llista ordenada. Es fa amb les etiquetes <OL> i </OL>.
Les llistes ordenades poden tenir els següents elements:
* Continue: Continua la numeració allà on s'ha quedat la llista anterior.
* Start: Indica el nombre pel que es comença a comptar; quedaria així: START = 2, per exemple.
* Type: Indica el tipus de marca (1, 2, 3, 4.. | a, b, c... | A, B, C, D... | i, ii, iii, iv... | I, II, III, IV...). Quedaria així: Type = 1, Type = a, Type = A, Type = i o Type = I
* Skip: Avança la numeració fins al valor indicat. Quedaria així: SKIP = 2, per exemple.
Com amb les llistes desordenades també s'utilitza l'atribut LI per separar els diferents elements; té els següents atributs:
* Style: Per definir estils.
* Type: Funciona igual que el Type per a l'atribut OL que hem vist una mica més a dalt.
* Value: Defineix un valor (nombre) per el qual reiniciar la seqüència.
Podríem crear per exemple, a hores d'ara, una llista així:
Que quedaria semblant a això:
* Primer element
* Segon element
* Tercer element

### Llistes de definició

Estan constituïdes per concepte i definició. Amb els atributs DL, DT i DD.
* DL: Serveix per delimitar la llista: indicar on comença i on acaba. <dl> i </dl>.
* DT: S'utilitza per indicar el concepte a definir. <dt> i </dt> (la de tancament és opcional, però sempre és millor utilitzar-la per evitar errors de visualització).
* DD: Indica la definició del concepte a definir. <dd> i </dd> (la de tancament és opcional, però sempre és millor utilitzar-la per evitar errors de visualització).
Podríem crear quelcom similar a això:
Que quedaria així:

#### HTML

    HyperText Markup Language

#### WWW

    World Wide Web

## Taules

Les taules serveixen perquè en diferents ordinadors amb una resolució diferent puguin veure la mateixa informació igual d'ordenada i atractiva.
Les etiquetes principals de les taules són Table (
, serveix per crear la taula), Table Row (, per crear files) i Table Distribution (, per crear columnes, ha d'anar entre les i ).
Un exemple de taula simple seria: <table> <tr><td>Cel·la 1</td><td>Cel·la 2</td></tr> <tr><td>Cel·la 3</td><td>Cel·la 4</td></tr> </table> (Sempre dins de les etiquetes body)
A les taules també s'hi poden afegir imatges, formats per el text, altres taules, etc.
A més hi podem afegir títols, que quedaren centrats a dalt de la taula, això es fa amb l'etiqueta CAPTION (<caption></caption>).
Un nou exemple: <table> <caption>Provant de fer una taula</caption> <tr><td><img height="100" alt="Laberint de triple espiral" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Triple-Spiral-labyrinth-variant.png" width="100"></td><td><big><span style="background-color: red"><span style="color:yellow;">Cel·la 2</span></span></big></td></tr> <tr><td>Cel·la 3</td><td>&nbsp</tr> </table>
Aquí hem utilitzat l'etiqueta caption, hem posa't una imatge a la cel·la 1, format al text de la cel·la 2, hem deixa't igual la cel·la 3, però... i la quatre? A la quatre hi hem afegit , s'anomena Non-breaking space i serveix per deixar caràcters en blanc, en aquest cas un cel·la, així podem fer que la primera fil·la tingui dues cel·les i la segona només una.
Anem complicant la cosa, ara afegirem vores a la taula: dins de l'etiqueta table hi posem border="2" i a més li posarem color bordercolor="red". També afegirem color de fons bgcolor i posarem vores a les cel·les Cellpadding (per determinar la el gruix de cada vora) i Cellspacing (per determinar la distància entre cel·les).
Vegem com quedaria:
Si vulguéssim posar una imatge de fons en comptes d'un color hauríem de canviar bgcolor per background. Posaríem, per exemple, això:
Ara volem posar títol a les files i columnes, per això utilitzarem l'etiqueta TH, quedarà així: