Anar a la pàgina anteriorAnnex “El nostre primer document web” Desenvolupament de l’activitat
Ara que ja hem vist quina és l’estructura bàsica d’una pàgina web i les instruccions que ens poden ser més útils, ja podem començar a crear el nostre primer document web.
El primer pas és obrir el “Bloc de notas” del Windows. El trobem fent clic a “Inicio”, “Todos los programas”, “Accesorios” i “Bloc de notas”.
Un cop s’hagi obert el programa hem de fer clic a “Archivo” i “Guardar”; d’aquesta manera, donem un nom a l’arxiu que conté el codi font. Hem d’escollir la carpeta on volem desar el document o crear-ne una de nova per desar-hi la nostra pàgina web. Hem d’escriure el nom de l’arxiu a l’apartat “Nombre”.
El motiu principal pel qual desem l’arxiu abans de començar a escriure és que d’aquesta manera ja té un nom i està en una carpeta determinada. A partir d’ara, quan el vulguem desar ho podrem fer sense que ens hàgim de preocupar d’haver de donar-li un nom i de crear la carpeta, i només haurem de seleccionar el menú “Archivo” i l’opció “Guardar” o bé prémer la combinació de tecles “Control + G”.
En el nostre cas, com que no penjarem la pàgina web a Internet, podem posar-li el nom que vulguem, però sempre ha de tenir l’extensió “.htm”. Normalment el nom de l’arxiu principal d’una pàgina web es diu “index.htm”. Una vegada fet això, hem de fer clic a “Guardar” i ja podrem començar a escriure al nostre document web.
Si obrim “Mi PC” i anem a la carpeta on hem desat l’arxiu, podem comprovar que s’ha desat correctament i que la icona de l’arxiu, si no tenim instal·lat cap altre navegador ni hem canviat cap configuració de l’ordinador, és la del navegador Windows Internet Explorer. Si obrim l’arxiu amb un doble clic, el navegador visualitza una pàgina en blanc, ja que el nostre arxiu encara està buit.
Si en qualsevol moment se’ns tanca el “Bloc de notas”, el podem tornar a obrir amb un clic a “Inicio”, “Todos los programas”, “Accesorios” i “Bloc de notas”. Una vegada obert, només hem d’anar a “Archivo” i clicar “Abrir”, de manera que s’obre la carpeta on tenim desat l’arxiu. A l’apartat “Tipo” hem de seleccionar “Todos los archivos” i apareix el nostre arxiu. L’hem de seleccionar amb un clic. Una vegada seleccionat, s’obre amb un clic a “Abrir”.
Ara ja podem començar a escriure el codi del nostre document web. El primer que hem de fer és crear l’estructura bàsica d’una pàgina web; més endavant ja l’anirem modificant amb els continguts i amb noves instruccions.
Una vegada creada l’estructura bàsica, el nostre document ha de tenir el codi que apareix a continuació:
No cal escriure les instruccions amb majúscula. Tampoc no és necessari que el codi estigui tabulat, com es veu a l’exemple, però això ens ajuda a localitzar les instruccions més fàcilment.
En aquest exemple hem triat per a l’activitat el tema de la pel·lícula favorita.
Una vegada creada l’estructura bàsica, ja podem començar a introduir-hi els continguts sense format. Després ja aplicarem algunes instruccions per donar una mica de format al text.
Primer de tot hem d’introduir el títol que volem que aparegui a la barra de títol de la finestra del navegador d’Internet. Això ho hem de fer a l’espai que hi ha entre <title> i </title>.
Posem com a títol: “La història de la primera pàgina web” (que és el nom de la nostra pel·lícula).
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador. Recordem que per visualitzar l’arxiu al navegador hem d’anar a “Mi PC”, localitzar l’arxiu i obrir-lo amb un doble clic. A la barra de títol apareix “La història de la primera pàgina web”.
Una vegada introduït el títol, cal que introduïm el text del nostre document. Això ho hem de fer a l’espai que hi ha entre <body> i </body>.
Hi escrivim aquest text:
LA HISTÒRIA DE LA PRIMERA PÀGINA WEB
La pel·lícula tracta d’un grup d’estudiants que fan un curs d’informàtica i que, en una de les sessions, han de crear la seva primera pàgina web. És una pel·lícula plena de situacions divertides que no defraudarà l’espectador.
Durada de la pel·lícula: 120 minuts.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
Ara que ja hem introduït el títol i el text del nostre document web, podem començar a donar una mica de format al document.
Hem d’anar aplicant les instruccions en el mateix ordre en què apareixen a la llista “Altres instruccions que ens poden ser útils”.
La primera instrucció que hi apliquem és la de donar color de fons a la pàgina web. El que hem de fer és substituir <body> per <body bgcolor=”#xxyyzz”> i posar el codi del color a l’espai on posa xxyyzz. En aquest exemple apliquem el color groc, és a dir, fem servir el codi FFFF00.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la d’incloure-hi una línia en blanc. Hi incloem una línia en blanc per separar el títol amb majúscula de la resta del text. Per fer-ho cal que posem la instrucció <br> al codi, entre el títol amb majúscula i la resta del text.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la d’incloure-hi una barra horitzontal de separació. Hi incloem una barra horitzontal per separar el títol amb majúscula de la resta del text. Per fer-ho hem de posar la instrucció <hr> al codi, entre el títol amb majúscula i la resta del text.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la de centrar-ne el text. Per centrar el títol que està amb majúscula, cal que introduïm al codi la instrucció <center> just on comença el títol amb majúscula i la instrucció </center> just on acaba.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la de canviar la mida de la lletra. Per canviar la mida de la lletra del títol hem d’introduir al codi la instrucció <h3> just on comença el títol amb majúscula i la instrucció </h3> just on acaba. Fem servir h3 perquè és una mida de lletra raonable.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la de posar el text en negreta. Per posar en negreta un petit fragment del text hem d’introduir al codi la instrucció <b> just on comença el fragment i la instrucció </b> just on acaba.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la de posar el text en cursiva. Per posar en cursiva un petit fragment del text hem d’introduir al codi la instrucció <i> just on comença el fragment i la instrucció </i> just on acaba.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la de canviar el color de la lletra. Per canviar el color de la lletra del títol hem d’introduir al codi la instrucció <font color=”#xxyyzz”> just on comença el títol (cal que posem el codi del color a l’espai on posa xxyyzz) i la instrucció </font> just on acaba el títol. En aquest exemple hi apliquem el color vermell, que té el codi FF0000.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
La instrucció següent que hi apliquem és la d’incloure una imatge (pot ser en format JPG o GIF) al document web. Per fer-ho hem d’introduir al codi la instrucció <img src=“nom de l’arxiu de la imatge”> i hem de substituir “nom de l’arxiu de la imatge” pel nom complet de la imatge que vam obtenir durant la cerca dels continguts (per exemple, “image_cat.gif”). Recordem que la imatge ha d’estar desada a la mateixa carpeta que el document principal de la pàgina web (en aquest exemple, “index.htm”).
Al davant del codi de la imatge hem de posar un parell de línies en blanc per separar una mica el text de la imatge. Hem d’introduir el codi de la imatge entre els codis <center> </center> perquè la imatge quedi centrada.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
A continuació posem en pràctica l’organització de la informació en taules. Ho fem amb els mateixos continguts que hem fet servir abans. D’aquesta manera podem escollir més endavant com ens agrada presentar la informació a les nostres pàgines web: en format normal o amb taules.
Ara apliquem la instrucció d’organitzar la informació en una taula. Per fer-ho cal que introduïm al codi les instruccions de creació de taules (files i cel·les). La informació que incloem a la taula és el títol de la pel·lícula, l’explicació, la durada i la imatge de la pel·lícula.
Al davant del codi de la taula hem de posar un parell de línies en blanc per separar-la una mica del contingut que hem introduït fins ara.
La informació que incloem a la taula és aquesta:
Títol: LA HISTÒRIA DE LA PRIMERA PÀGINA WEB
Explicació: La pel·lícula tracta d’un grup d’estudiants que fan un curs d’informàtica i que, en una de les sessions, han de crear la seva primera pàgina web. És una pel·lícula plena de situacions divertides que no defraudarà l’espectador.
Durada de la pel·lícula: 120 minuts.
Imatge de la pel·lícula:
Ara que ja sabem quina és la informació que volem introduir a la taula, expliquem el codi necessari per aconseguir el nostre propòsit.
El codi és el següent (hem introduït comentaris al costat del codi separats per //):
<br><br> // parell de línies en blanc abans del codi
<center> // centrar la taula
<table border=1> // inici de taula, amb contorns de mida 1
<tr> // creació de fila (fila del títol)
<td colspan=“2” align=“center”><b>LA HISTÒRIA DE LA PRIMERA PÀGINA WEB</b> //creació de cel·la de la fila; en aquest cas la fila només està formada per una cel·la, però aquesta cel·la és una agrupació de dues cel·les, ja que la resta de files de la taula (explicació, durada i imatge) estan formades per dues cel·les. El contingut d’aquesta cel·la de la primera fila també està centrat, ja que és el títol de la pel·lícula, i va en negreta.
<tr> // creació de fila (fila de l’explicació)
<td><b>Explicació</b> // creació de cel·la de la fila i contingut en negreta
<td> La pel·lícula tracta d’un grup d’estudiants que fan un curs d’informàtica i que, en una de les sessions, han de crear la seva primera pàgina web. És una pel·lícula plena de situacions divertides que no defraudarà l’espectador. // creació de cel·la de la fila i contingut
<tr> // creació de fila (fila de la durada)
<td><b>Durada de la pel·lícula</b> // creació de cel·la de la fila i contingut en negreta
<td> 120 minuts // creació de cel·la de la fila i contingut
<tr> // creació de fila (fila de la imatge)
<td><b>Imatge de la pel·lícula</b> // creació de cel·la de la fila i contingut en negreta
<td><img src=”image_cat.gif”> // creació de cel·la de la fila i contingut, que en aquest cas és una imatge (la mateixa que ja hem posat abans a la pàgina web) que està desada a la mateixa carpeta que el document principal de la pàgina web
</table> // final de taula
</center> // instrucció que completa la taula centrada
Una vegada explicat el codi, ja el podem copiar (sense els comentaris) al document principal de la pàgina web i col·locar-lo després del codi de la imatge que havíem afegit abans de començar a fer la taula.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
Ara ja podem comparar i decidir com ens agrada més presentar la informació: en format normal o amb taules. Si ho fem amb taules podem distribuir els continguts de moltes maneres diferents i fer-ho tot molt més vistós. I si ens agrada fer-ho amb taules però no volem que se’n vegin els contorns, el que hem de fer és substituir en el codi la instrucció <table border=1> per <table border=0>.
Si feu la modificació al codi, deseu l’arxiu i visualitzeu-lo al navegador. El resultat és aquest:
L’última instrucció que hi apliquem és la de crear enllaços a recursos externs i a parts de la mateixa pàgina web (índex).
Per crear un enllaç a un recurs extern hem d’introduir al codi la instrucció <a href=”adreça del recurs extern”>Text que s’ha de clicar amb el ratolí per accedir al recurs</a>, i hem de substituir “adreça del recurs extern” per l’adreça de la pàgina web on volem anar quan fem clic amb el ratolí al text que haguem posat per substituir “Text que s’ha de clicar amb el ratolí per accedir al recurs”.
En aquest cas, creem un enllaç a la pàgina web de l’Obra Social de la Fundació ”la Caixa”. Al davant del codi de l’enllaç hem de posar un parell de línies en blanc per separar-lo una mica del contingut que hem introduït fins ara. El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador.
Com es pot veure en aquesta última imatge, la mida de la nostra pàgina web va creixent i cada vegada és més complicat poder-la veure tota sencera a la finestra del navegador sense haver de desplaçar-nos-hi amb les barres de desplaçament (en aquest cas, amb la barra vertical).
La majoria de pàgines web que podem trobar a Internet ens obliguen a desplaçar-nos-hi verticalment per poder veure’n tot el contingut. Aquest és el motiu pel qual hi ha els enllaços a parts de la pàgina web. La finalitat és facilitar, a través d’un índex, el desplaçament per tot el contingut de la pàgina.
Per crear enllaços a parts de la nostra pàgina web hem d’introduir al codi les instruccions següents:
<a href=”#referencia”>Text que s’ha de clicar amb el ratolí per accedir al recurs</a>
<a name=”referencia”></a>
La primera instrucció <a href=”#referencia”>Text que s’ha de clicar amb el ratolí per accedir al recurs</a> forma part de l’índex que creem al principi de la pàgina web. La segona instrucció <a name=”referencia”></a> forma part del contingut on anem quan fem clic a “Text que s’ha de clicar amb el ratolí per accedir al recurs”.
A la primera instrucció, per exemple, s’ha de substituir “Text que s’ha de clicar amb el ratolí per accedir al recurs” pel nom de la secció on anem a parar quan hi fem clic.
En totes dues instruccions s’ha de substituir “referencia” pel mateix nom. Per exemple, si hem creat les instruccions per facilitar l’accés a la primera part de la pàgina web, podem substituir-les per “1a part”. Així, cada vegada que anem creant el parell d’instruccions per facilitar el moviment per la pàgina web, anem substituint “referencia” pel nom de la secció a la qual volem facilitar l’accés. Quan haguem de modificar el codi o cercar codis erronis, és la millor manera de trobar-los.
Ara practiquem els continguts tractats. Hem d’introduir la primera instrucció al codi que ja tenim creat entre la instrucció <body ....> i la instrucció <center>. Ho fem així perquè ens interessa que l’índex estigui al començament de la pàgina web. Introduïm la segona instrucció allà on volem accedir quan fem clic a la primera instrucció.
Hem de fer el mateix amb tots els enllaços que vulguem crear. En aquest exemple creem tres enllaços: el primer, als continguts en format normal; el segon, als continguts introduïts a la taula, i el tercer, a la part de l’enllaç a l’Obra Social de la Fundació ”la Caixa”.
El codi queda de la manera següent:
Podem desar l’arxiu i obrir-lo per visualitzar-lo al navegador, però només visualitzem l’índex, ja que els efectes de les instruccions no es veuen fins que fem clic als enllaços de l’índex i, tot i així, només es veuen els efectes si la pàgina web té molt contingut i la informació a la qual volem accedir no es visualitza a la pantalla (és a dir, que hauríem de fer servir la barra de desplaçament vertical per anar a aquesta informació).
Podeu provar-ho fent clic als enllaços de l’índex. Una vegada us hagueu desplaçat a una de les seccions, si heu perdut de vista l’índex només us heu de desplaçar al principi de la pàgina amb la barra de desplaçament.
Ara que ja sabeu com funcionen els enllaços a les diferents parts de la pàgina web, podeu continuar practicant i crear un enllaç des de cadascuna de les seccions a l’índex de l’inici de la pàgina. D’aquesta manera us podeu desplaçar a l’índex sense haver de fer servir la barra de desplaçament.
Aquest és el resultat del nostre primer document web.
Una vegada acabat aquest document i ara que hi hem fet servir les instruccions més importants, ja podem fer qualsevol pàgina web que contingui text, imatges, taules, enllaços a recursos externs i enllaços dins la mateixa pàgina. Per exemple, podem crear diverses pàgines i enllaçar-les, amb la qual cosa tindrem una pàgina web molt completa.
Animeu-vos i feu la vostra pròpia pàgina web!
2009. Tots els drets reservats.