Creació de Web I
Disseny de pàgines web.



El primer codi, en qualsevol document HTML, és precisament

i indica al navegador que la informació que ve a continuació és un document HTML.
El codi corresponent que tanca indica el final d'un document HTML.

Qualsevol altra informació haurà d'anar entre aquests dos codis.

D'altra banda, els codis que teniu a continuació, ens indiquen el principi i el final de la capçalera del document (entre aquests codis ha d'anar per exemple el títol o informacions sobre paraules clau per cercar la pàgina a internet, etc.)



Els codis

obliguen al navegador a mostrar el text tal i com s'ha escrit, respectant tabulacions, espais, canvis de línia, etc..

Per indicar un canvi de línia s'ha de fer servir el codi

i per a canviar de paràgraf (deixant una línia en blanc entremig) s'utilitza el codi

Aquests codis no necessiten acabament.

El codi que mostra una línia recta horitzontal d'amplada i gruix determinable. No necessita acabament i té els següents paràmetres opcionals :

align ='posició'; (Alinea la línia a l'esquerra (left), a la dreta (right) o centrada (center))
noshade (No mostra ombra, evitant l'efecte en tres dimensions)
size = 'nombre' (Indica el gruix de la línia en píxels)
width = 'nombre' o '%' (Indica l'amplada de la línia en píxels o en tant per cent en funció de l'amplada de la finestra del navegador)




Incloure un enllaç de correu electrònic.


Podeu fer que una part del text es transformi en un enllaç de correu electrònic, de manera que en fer clic a sobre d'ell s'obri la finestra del programa de correu electrònic predeterminat i es pugui enviar un missatge a l'adreça que apareix a l'enllaç, sense necessitat de teclejar-la. Afegiu els codis següents (si escriviu una adreça correcta es podran enviar missatges):


jgonzalez@hotmail.com

Utilització de fons de pàgina.

Com s'ha indicat abans, els codis BODY i /BODY indiquen l'inici i el final de la pàgina web. Entre aquests heu de posar els continguts de la pàgina: text, gràfics, enllaços, etc... Aquests codis tenen una sèrie de paràmetres opcionals que ens permetran modificar l'aspecte global del document: background= 'nom de fitxer gràfic'. Indica el nom d'un gràfic que servirà de iefonsl. per a la nostra pàgina. Si la imatge no ocupa tot el fons del document serà reproduïda automàticament tantes vegades com sigui necessari, formant una espècie de mosaic.


bgcolor = 'codi de color'. Indica un color per al fons de la nostra pàgina.
text = 'codi de color'. Indica un color per al text. Si no posam res, es fa servir el predeterminat, que sol ser el negre.
link = 'codi de color'. Indica el color del text dels hiperenllaços. Per defecte és blau.
vlink = 'codi de color'. Indica el color del text dels hiperenllaços visitats. Per defecte és porpra.

Exemples de codis de color:
Negre: #000000
Vermell: #FF0000
Verd: #00FF00
Blau: #0000FF
Blanc: #FFFFFF

De totes formes, la majoria dels editors HTML vos permetran escollir directament el color d'una paleta de colors incorporada.

Per posar una imatge de fons


podeu seguir l'exemple que teniu baix, l'expressió IMATGES/clouds.gif indica que com a fons de la pàgina farem servir l'arxiu clouds.gif que es troba en el subdirectori IMATGES.

Naturalment podem incloure qualsevol altre en format .gif o .jpg que tinguem disponible al directori de treball

Existeixen programes que faciliten l'edició de pàgines (els anomenats 'Editors de pàgines web'), encara que és convenient que en començar vos acostumeu a fer servir els codis amb una certa soltesa, a fi de comprendre l'estructura de les pàgines, ja que dels editors que hi ha actualment al mercat, cap incorpora tots els codis existents i sempre vos veureu obligats a fer alguna modificació a mà.


Assistents HTML.


Les darreres versions dels programes ofimàtics per a Windows (processadors de textos, fulls de càlcul, bases de dades, programes de presentacions, etc.), com les de Corel WordPerfect o Microsoft Office , incorporen la possibilitat de convertir directament arxius senzills de processador de textos, base de dades, full de càlcul, etc., en pàgines web, amb algunes limitacions. Això vol dir per exemple que podeu escriure un document amb el processador de textos (o agafar un que ja estigui fet) i convertir-lo després en una pàgina web, encara que amb aquest procediment només podreu elaborar pàgines molt senzilles.

Editors HTML.


Existeixen multitud d'editors de pàgines web, como el Hot Metal Pro, FrontPage Express, Netscape Composer, Macromedia Dreamweaver, etc.
Netscape Redactor (o Composer, si utilitzau una versió en anglès), FrontPage Express i Macromedia Dreamweaver. Els dos primers venen inclosos amb el NetsCape communicator i amb l'Internet Explorer, respectivament, són gratuïts i podeu obtenir-los a la pàgina del fabricant, però no permeten fer tots els exercicis del curs, i en alguns casos haureu d'introduir el codi HTML a mà. L'editor més adequat per fer la resta d'exercicis del curs és el Macromedia Dreamweaver , que no és gratuït, però disposa d'una versió d'avaluació (gratuïta) per 30 dies i en anglès, que podeu descarregar de l'adreça:
C:\Red\Programoteca Centre\DreamWeaver 4

De tota manera, donada la varietat de programes existents al mercat i que les darreres versions dels més potents requereixen equips més moderns que no disposem al centre, emprerem a totes les pràctiques el programa AceHTML, el podeu engegar fent clic a l'icona corresponent que teniu al vostre escriptori:



Anem llavors a "File/New ... a fer el nostre primer petit projecte. Explicarem 4 cosetes del programari anomenat de lliure distribució , donarem unes quantes adreces interessants i trierem un fons de pàgina.

Dels botons de la part baixa de la finestra d'edició, ni ha dos, Editor i Viewer que ens permeten alternar entre l'edició del codi HTML i també l'aspecte que tindrà la pàgina quan sigui visualitzada amb un navegador d'Internet.


El codi font de tota pàgina en blanc que cream amb el programa és sempre el mateix, el teniu dins l'arxiu de text New.txt

Nosaltres afegirem bàsicament text, juntament amb altres elements com imatges, gif animats, links, ... entre les etiquetes BODY i /BODY que són propiament les que contenen el cos de la pàgina web.
  1. Modifiqueu el codi de la pàgina en blanc que teniu oberta
  2. posant el títol, alguns termes relacionats amb la pàgina, llevau l'adreça de correu
  3. i ompliu el cos del document tal com teniu a l'ariu de text Programari.txt
  4. amb la barrra de botons standard de dalt, poseu color al títol i justifiqueu els dos paràgrafs de text.
  5. Feu també el document més "estret" amb el botó corresponent.

Llavors la pàgina tindrà un aspecte semblant al que teniu a continuació:

Triau ara un fons adequat i afegiu al final una línia semblant a :
Més informació a l'adreça http://jornadespl.upc.es/
Guardeu la pàgina amb el nom de Programari lliure.html

Hipertext i hiperenllaços.

Fixau-vos que en la majoria de pàgines es fan servir tres tipus d'enllaços:

· de text,
· amb imatges i
· de correu electrònic.


D'aquests enllaços alguns remeten a una altra pàgina web del mateix ordinador, altres que remeten a un lloc diferent de la mateixa pàgina i altres que remeten a una pàgina situada a un altre servidor (per exemple, el que ens porta a la pàgina inicial del servidor web de l'Ajuntament de Palma).

Taules

Podeu inserir i utilitzar taules de manera molt semblant a com ho feu amb un processador de textos, si feis:
  • Amb Netscape Redactor: Insereix, Taula, Taula... (o amb el botó )
  • Amb FrontPage Express: Tabla, Insertar tabla (o amb el botó )
  • Amb Macromedia Dreamweaver: Insert, Table (Insertar, Tabla)

Les taules es poden utilitzar per col·locar imatges i text en una posició determinada de la pantalla, ja que els editors de pàgines web encara estan molt limitats pel que fa a la composició de text i imatges. Vegem un petit exemple amb AceHTML 5:

Jocs Imatges
Materials Sons
Eines Figures vectorials