Com estructurar el document HTML?

Podem utilitzar taules o frames per organitzar i subdividir la nostra pàgina web.
Amb les taules, obtenim un conjunt de files i columnes que podem omplir amb la informació que volguem. Podem determinar el nombre de caselles i les seves mides.
Amb els frames en canvi, el que aconseguim és mostrar més d'un document HTML a la mateixa finestra. Ho expliquem més endevant.
Abans, una petita explicació dels colors a les pàgines web i de com s'utilitzen.

6.1. COLORS

Els colors RGB que s'utilitzen a les pàgines webs estan representats mitjançant un sistema hexadecimal (del 0 a la F).
Així, el color #ff0000 és vermell,
el color #00ff00 és verd,
i el color #0000ff és blau.
Per als colors més comuns es pot posar el seu nom entre cometes ("red"). Per a qualsevol altre color, al programa Photoshop pots trobar la seva nomenclatura en sistema hexadecimal o bé a l'enllaç de la dreta trobaràs els noms dels colors suportats per tots els navegadors.

Com a fons del nostre web podem posar un color determinat o una imatge. Hem d'afegir: bgcolor="color qualsevol" a l'etiqueta del "body". El codi és el següent:

CODI:


 <body bgcolor= "blue">

Si volem posar una imatge com a fons en lloc d'un color:
Exemple web amb una imatge com a fons

CODI:


 <body background= "imatge.jpg">

És important fixar la mida de la imatge (mida pantalla) abans d'inserir-la, perquè si la imatge és més petita que la pantalla, la mateixa imatge es repetirà fins omplir tota la pantalla i si és més gran es tallarà.

A continuació s'explica com es fan i com es modifiquen les taules i els frameset.

Exercici 11: Fes una taula senzilla de quatre caselles com la de l'apartat següent (6.2.) en un nou document html amb el nom "web03.html"

6.2. TAULES

PRIMERA FILA, PRIMERA CEL·LA	PRIMERA FILA, SEGONA CEL·LA
SEGONA FILA, PRIMERA CEL·LA	SEGONA FILA, SEGONA CEL·LA

Les taules es formen d'esquerra a dreta i de dalt a baix (com la lectura), quan fem una taula, primer donem l'ordre taula <table>, després obrim una fila <tr> (de l'anglès table row) i posem tantes caselles con vulguem <td> (de l'anglès table data) sense oblidar tancar-la abans de afegir una altra: </td>, una vegada hem acabat de posar las caselles d'una mateixa fila, hem de tancar la fila </tr> i així repetidament afegint tantes files com vulguem tingui la nostra taula. Quan acabem, tanquem la taula: </table>.

La mida de les taules es pot donar en píxels, definint l'ample (width) o l'alçada (height) de la taula o de cada cel·la o bé, donant un tant per cent (% de la pantalla que volem que ocupi la taula).

CODI:

 
    <table width=50% border=1>
     <tr>
      <td> PRIMERA FILA, PRIMERA CEL·LA </td>
      <td> PRIMERA FILA, SEGONA CEL·LA </td>
     </tr>
     <tr>
      <td> SEGONA FILA, PRIMERA CEL·LA </td>
      <td> SEGONA FILA, SEGONA CEL·LA </td>
     </tr>
    </table>

Si volem que a la taula es vegin les línies de les caselles, haurem d'afegir: border= "1" (o més).

Per fer que a totes les taules del document es vegin les línies ho podem fer d'un sol cop al Bloc de Notes amb l'eina "Reemplazar" en "Edición / Reemplazar...". Així, a la casella "Buscar" posem: border= "0" i a "Reemplazar por" posem: border= "1".
D'aquesta manera s'ens canvien totes les línies de les taules d'un cop.

Exercici 12: Modifica els colors de fons de les caselles i els colors de les línies de la teva taula seguint les instruccions del següent apartat.

Per canviar els colors de fons de cada casella, hem d'afegir l'etiqueta "bgcolor="color" en cada casella, és a dir a l'etiqueta <td>: <td bgcolor="color">. I per canviar les línies de les caselles, hem d'escriure: <td bordercolor="color">.

CODI:


  <td bgcolor= "red" bordercolor= "blue">

Si volem canviar el color i les línies de tota la taula, afegirem aquestes mateixes ordres a l'etiqueta "table":

CODI:


  <table bgcolor= "red" bordercolor= "blue">

En aquest exemple hem canviat les línies i colors de cada casella i les línies exteriors de la taula:

PRIMERA FILA, PRIMERA CEL·LA	PRIMERA FILA, SEGONA CEL·LA
SEGONA FILA, PRIMERA CEL·LA	SEGONA FILA, SEGONA CEL·LA

CODI:

 
 <table width=50% border=1 bordercolor= "black">
 <tr>
  <td bgcolor="cyan" 
      bordercolor= "blue">PRIMERA FILA, PRIMERA CEL·LA</td> 
  <td bgcolor="pink" 
      bordercolor= "blue">PRIMERA FILA, SEGONA CEL·LA</td>
 </tr>
 <tr>
  <td bgcolor="gold" 
      bordercolor= "blue">SEGONA FILA, PRIMERA CEL·LA</td>
  <td bgcolor="goldenrod" 
      bordercolor= "blue">SEGONA FILA, SEGONA CEL·LA</td>
 </tr>
 </table>

Exercici 13: Modifica les caselles de la teva taula amb les eines "colspan" i "rowspan" (explicades a continuació) per aconseguir aquesta taula:

primera fila, primera cel·la
segona fila, primera cel·la	segona fila, segona cel·la

(Nota: fes la taula amb un ample de 150 píxels)

6.1.2. FORMES A LES TAULES:

Modificarem ara la forma de les cel·les amb les tags COLSPAN i ROWSPAN:
El sentit sempre és cap a la dreta i cap a baix.

6.1.2.1. Colspan: Uneix dues o més columnes.

PRIMERA FILA, PRIMERA CEL·LA
SEGONA FILA, PRIMERA CEL·LA	SEGONA FILA, SEGONA CEL·LA

CODI:

 
   <table width=50% border=1>
 <tr>
  <td colspan=2> PRIMERA FILA, PRIMERA CEL·LA </td> </tr> 
 <tr>
  <td> SEGONA FILA, PRIMERA CEL·LA </td>
  <td> SEGONA FILA, SEGONA CEL·LA </td>
  </tr>
  </table>

6.1.2.2. Rowspan: Uneix dues o més files.

PRIMERA FILA, PRIMERA CEL·LA	PRIMERA FILA, SEGONA CEL·LA
	SEGONA FILA, SEGONA CEL·LA

CODI:

 
   <table width=50% border=1 >
 <tr>
  <td rowspan=2> PRIMERA FILA, PRIMERA CEL·LA </td> 
  <td> PRIMERA FILA, SEGONA CEL·LA </td> </tr>
  <tr> <td> SEGONA FILA, SEGONA CEL·LA </td>
  </tr>
  </table>

6.1.3. CELLSPACING i CELLPADDING: espais en les celdes.

6.1.3.1. Cellspacing: atribut que especifica l'espai entre cel·les.

Exemple taula amb cellspacing=0:

A B

C D

CODI:

<table width=200 bordercolor="black" border=1 cellspacing=0> <tr> <td width=50> A </td> <td width=50> B </td> </tr> <tr> <td width=50> C </td> <td width=50> D </td> </tr> </table>

Exemple taula amb cellspacing=1:

A B

C D

CODI:

<table width=200 bordercolor="black" border=1 cellspacing=1> <tr> <td width=50> A </td> <td width=50> B </td> </tr> <tr> <td width=50> C </td> <td width=50> D </td> </tr> </table>

6.1.3.2. Cellpadding: atribut que especifica l'espai entre la paret de la cel·la i el contingut d'aquesta.

Exemple taula amb cellpadding=0:

A B

C D

CODI:

<table width=200 bordercolor="black" border=1 cellpadding=0> <tr> <td width=50> A </td> <td width=50> B </td> </tr> <tr> <td width=50> C </td> <td width=50> D </td> </tr> </table>

Exemple taula amb cellpadding=10:

A B

C D

CODI:

<table width=200 bordercolor="black" border=1 cellpadding=10> <tr> <td width=50> A </td> <td width=50> B </td> </tr> <tr> <td width=50> C </td> <td width=50> D </td> </tr> </table>

Si ens surten errors a les taules és convenient que li donem valor=0 tant al cellspacing com al cellpadding per veure clarament quines línies fallen.

Podem també moure el contingut de cada casella horitzontalment i verticalment. Les ordres són aquestes:

Moviment horitzontal (align):

alinear-ho a la dreta: <td align="right">
alinear-ho a la esquerra: <td align="left">
alinear-ho al mig: <td align="middle">

Moviment vertical (valign):

alinear-ho a dalt: <td valign="top">
alinear-ho a baix: <td valign="bottom">
alinear-ho al centre: <td valign="center">

Exercici 14: Fes una altra taula com la del següent apartat (taules "niuades").

6.1.4. TAULES "NIUADES": una taula dins una altra.
Farem com a exemple una taula verda dins una vermella.

A	B
C	D

CODI:

 
 <table width=400 border=1 bordercolor="red" 
                  cellspacing=0 cellpadding=10>
  <tr>
  <td width=200 align="middle">

      <!--aquí comença la taula verda-->

   <table width=100 border=1 bordercolor="green" 
                                  cellspacing=0> 
    <tr><td align="middle"> A </td> 
        <td align="middle"> B </td></tr>
    <tr><td align="middle"> C </td> 
        <td align="middle"> D </td></tr>
   </table>

      <!--aquí acaba la taula verda-->

  </td><td width=200> &nbsp; </td>
  </tr>
  </table>

Nota: quan fem una taula i volem alguna casella buida (sense contingut) el que hem de fer és posar un espai en blanc:  
Per a més informació sobre  , podem anar a Tutorial I (Espai en blanc)

Exercici 15: Aquesta pàgina és una taula amb línies no visibles (border=0). Canvia les línies de la taula al seu codi de la font de la següent manera:

obre el codi de la font de la pàgina i guarda-ho a la teva carpeta amb nom: web04.html
Atenció: al guardar-la, a la casella "tipo" hem de triar l'opció: guardar com a "Pàgina web, sólo HTML (*.htm, *.html)"
la tornem a obrir des de la nostra carpeta amb el Bloc de notes
en el codi de la font canvia l'opció "border" i escriu: border=1
canvia també el color de les línies de la taula: bordercolor=blue
afegeix: cellspacing=0
canvia el tamany i el contingut de les caselles d'aquesta forma:
- primera casella: posa un color qualsevol de fons
- segona casella: esborra el contingut actual i insereix totes les taules que hem fet al document anterior "web03.html"
- tercera casella: posa un color qualsevol de fons
- quarta casella: insereix una imatge qualsevol
La nova taula ha de quedar més o menys com a aquesta:

taula 1

taula 2

imatge

6.3. FRAMESET

És un document HTML que no té 'body' i el que ens mostra a la pantalla són varis documents HTML relacionats entre ells.
L'etiqueta <frameset> defineix com dividir la finestra en frames.
Cada frameset defineix un conjunt de files i columnes.
Els valors de les files/columnes indiquen la quantitat d'àrea de pantalla que cada fila/columna ocuparà.
L'etiqueta <frame> defineix quin document HTML posar dins de cada frame.
Els framesets poden ser verticals i horitzontals o inclús es poden fer framesets "niuats".

Aquest mateix web és un exemple de frameset horitzontal, on la franja fixa de dalt fa de menú i la resta de la pàgina ens mostra el contingut de cada apartat.

Exemple de frameset vertical

Exemple de frameset "niuat"

Exercici 16: Fes un altre document (web05.html) amb un frameset vertical amb els links a les diferents sessions fetes (web01.html, web02.html, web03.html i web04.html) seguint les següents explicacions.

Per fer un frameset fan falta al menys tres documents html:

Frameset: on s'especifica el conjunt de frames que es volen mostrar i la proporció entre ells.

CODI:


 <html>
 <head><title>frameset</title></head>

  <frameset cols="150,*">

   <frame src="menu.html" name="menu">
   <frame src="contingut.html" name="contingut">
  
  </frameset>

 </html>

Menú: sol utilitzar-se com una banda fixa a la pantalla que fa d'índex de la pàgina.

CODI:

 
 <html>
  <head><title>menu</title></head>
   <body bgcolor="gold">
   <h3>menu</h3>
   <a href="http://www.upc.edu" 
            target="contingut">sessió 1</a><br>
                               sesión 2<br>
                               sesión 3<br>
   </body>
 </html>

Contingut: és el cos de la pàgina, segons els apartats del menú ens mostra uns continguts o uns altres.

CODI:


 <html>
  <head><title>contingut</title></head> 
   <body bgcolor="lightblue">

    <h3>contingut</h3>

   </body>
 </html>

6.4. FULLS D'ESTIL CSS (Cascading Style Sheets)

Els Fulls d'Estil externs t'habiliten per canviar l'aspecte i traçat de totes les pàgines en un lloc Web, només editant un sol arxiu. Es guarden normalment en arxius .css externs.

Els Fulls d'Estil externs poden estalviar molta feina quan volem que múltiples pàgines web tinguin una mateixa aparença.

En lloc de afegir a cada document els atributs que volem (tipus lletra, mida, colors, format de links...) el que fem és fixar tots els paràmetres a un sol arxiu (Full d'Estil), afegint després a cada arxiu una etiqueta fent referència al nostre Full d'Estil.

6.4.1. COM FUNCIONA?

Moltes de les propietats utilitzades en CSS són similars a les de HTML, les reconeixeràs fàcilment. Mira el següent exemple.

Diguem que volem posar un color vermell com a fons del nostre web:

Utilitzant HTML ho podríem haver fet així:

Amb CSS, el mateix resultat s'obté així:

body {background-color=red;}

Com pots veure els codis són molt semblants.

Veiem que un arxiu CSS té dues parts principals: un selector, i una o més declaracions:

El selector és normalment l'element HTML al que vols donar un estil.
Cada declaració es forma per una propietat i un valor. La propietat és l'atribut que vols canviar. Cada propietat té un valor.

Les declaracions CSS sempre terminen amb un punt i coma, i els grups de declaracions s'envolten per aquests parèntesis: { }

Per fer el CSS més fàcil de llegir, pots posar una declaració a cada línia així:

CODI:


       h1 {

       color:red;
       text-size:"10";
       font-family:arial; }

6.4.2. COM COMENÇAR?

Hem vist com funciona, ara expliquem com començar a fer el teu primer Full d'Estil:

obrim un nou document amb el Bloc de notes
escrivim el selector i les declaracions que volem fixar, com per exemple això:


  body {

  font-family: verdana, arial, helvetica;
  color: black; 
  size: 2; }

guardem com a "miestilo.css"

Amb aquest Full d'Estil hem fet que el tipus de lletra sigui verdana (en cas de no trobar el tipus verdana, seria arial o helvetica), el color serà negre i la mida "2".

Si volem fixar més paràmetres, com per exemple, fer que tots els links de les nostres pàgines no es vegin subratllats o tinguin uns colors determinats per a links visitats i links actius hauríem d'afegir això al nostre Full d'Estil:

CODI:


       a {
       text-decoration: none; }
       a:link {
         color: blue; }
       a:visited {
         color: red; }
       a:hover {
         color: yellow; }
       a:active {
         color: orange; }

Amb aquestes ordres hem fet que:

cap link aparegui subratllat ({text-decoration:none;})
els links encara no visitats siguin de color blau (link {color:blue;})
els links visitats siguin de color vermell (visited {color:red;})
els links en el moment de clicar siguin de color groc (hover {color:yellow;}
els links quan el ratolí pasa per sobre siguin de color taronja (active {color:orange;}

6.4.2. COM APLICAR EL FULL D'ESTIL A UN DOCUMENT HTML?

Una vegada tenim fet el nostre Full d'Estil CSS haurem d'aplicar-ho al document HTML que vulguem.

Ho fem creant un link des del document HTML (.html) al Full d'Estil (.css).

CODI:


   <head>
   <link rel="stylesheet" href="miestilo.css"/>
   </head>

Com qualsevol link, haurem de fixar-nos en escriure bé la referència.

Podem linkar un mateix Full d'Estil a tants documents HTML com vulguem.
Aquesta tècnica ens pot estalviar molta feina quan per exemple volem fer un canvi del color de fons de 100 documents HTML, amb el Full d'Estil CSS aquest canvi es pot fer en pocs segons només canviant un codi en el Full d'Estil.

Més informació sobre els colors a les pàgines web: Colors

Nota: tot allò que escrivim dins aquests símbols  (tags del programador) només és visible al codi de la font del document html. És molt útil per fer anotacions nostres que ens ajudin a aclarir-nos dins el document, però que no volem que surtin a la pàgina web.
A més a més, serveix per anul·lar el que conté si esborrem els símbols que aquí estan en vermell:


<!--aquí comença la taula verda-->

   <table width=100 border=1 
            bordercolor="green">
   <tr><td>A</td> <td>B</td></tr>
   <tr><td>C</td> <td>D</td></tr>
   </table>

 <!--aquí acaba la taula verda-->

Així, si tenim diverses taules i ens surten errors podem anar anul·lant-les, i localitzar quina és la que conté l'error.

Tutorial I: Imatges

Més informació sobre CSS