|
|
|||||||||||||||||||
 |
|||||||||||||||||||
| Pràctica |
 |
 |
 |
 |
 |
 |
Exercicis
|
 |
|||||||||||
|
Inserir imatges i text en una taula La finalitat de la pràctica següent és la creació d'una pàgina on es relacionin tres webs de la comarca de la Garrotxa, amb la seva descripció i una imatge de cada enllaç. La utilització d'una taula facilitarà columnar, facilitarà l'alineació i la presentació de les imatges i el text a la pàgina. L'objectiu serà construir un portal amb enllaços a llocs d'interès de la Garrotxa igual o semblant al del fitxer websintres.htm. |
|||
| Desenvolupament de la pràctica | |||
 |
Primer de tot, creeu una pàgina nova, poseu-li el color de fons blanc des de Propiedades de la página (#FFFFFF), i deseu-la amb el nom garrotxa.htm. És convenient desar la pàgina tant al principi com al final del vostre treball per no perdre'n l'estructura. Inseriu una taula d'una sola fila i una columna amb els valors següents:
Apliqueu el color de fons de la cel·la #33FFFF, que correspon a un blau verdós.Dins la cel·la, escriviu el text: Webs d'interès Ara, procediu a crear un estil de text per a aquest títol, tal com heu vist a la pràctica anterior.
|
||
| Ara, només s'ha d'aplicar aquest estil al títol que acabeu d'escriure. | |||
 |
|||
| Just a sota, creeu una taula nova de 649 píxels d'amplada, tres files, dues columnes, 8 d'amplada interior i sense contorn. | |||
|
|
|||
Des del menú Insertar, inseriu
les imatges olot.gif,
parc_garrotxa.gif
i net.gif
a cadascuna de les cel·les de l'esquerra. Descarregueu-les fent
clic sobre l'enllaç amb el botó dret (Anomena
i desa la destinació). Observeu que, a la finestra Propiedades,
us ha quedat definit a Origen la ruta
de la ubicació d'aquestes imatges. Si volguéssiu canviar-la
o modificar el lloc on es troba, podeu localitzar-la fent clic sobre la
carpeta petita del costat. Enllaços sobre les imatges Ara feu que aquesta imatge sigui un botó d'enllaç a la
web: http://www.olot.org/turisme/.
Escriviu aquesta adreça a Vínculo
de la finestra Propiedades: Recordeu d'anar desant el treball a mesura que aneu treballant.
|
|||
 |
Un cop arribat aquest punt, repasseu per un moment el que heu vist al mòdul 1 sobre el codi HTML. | ||
|
|||
|
Inserir el text Ara només us queda introduir el text a les cel·les corresponents i donar-li el format adequat. Per estalviar-vos feina, podeu copiar-lo directament des de l'arxiu t1m4p1.rtf. Estil de text Desplegueu el menú Estilo de la finestra Propiedades per crear-ne dos de nous que anomenareu text i vincle, respectivament. L'estil vincle tindrà les propietats següents: Estil text
Estil vincle
|
||
| Un cop creats els estils, els apliqueu sobre cadascun d'aquests estils i, així, aconseguiu que tot el text tingui un aspecte uniforme. | |||
Finalment, per acabar de polir la pàgina, inseriu la línia blava que hi ha sota la taula:
|
|||
|
|
Les taules us permeten situar els elements de la web de manera ordenada.
|
||
| A la pràctica 5, veureu la manera de crear fulls d'estil CSS, que us servirà per utilitzar els mateixos estils de text a diferents pàgines, sense necessitat de definir-los per a cada una. | |||
 |
|||
|
|||
Redimensioneu, si cal, la línia central de separació de
les columnes per ajustar-les.
.
En aquest cas, la imatge us porta a una adreça externa, però
si volguéssiu que us enllacés amb un altre arxiu local,
el podríeu localitzar a través de la carpeta groga. També
haureu d'afegir a Destino el paràmetre
_blank perquè aquest enllaç s'obri en una finestra
nova mantenint la vostra. Això és molt important fer-ho
sempre als vincles externs.
(menú