Curs de disseny de pàgines web amb Nvu (Mòdul...

Curs de dissenyde pàgines web amb Nvu

(Mòdul 1)

Guillem A. Suñer Sabater

Juliol 2007 (revisió: juliol 2008)

Materials de Formació

Curs de disseny de pàgines web amb Nvu

Guillem A. Suñer Sabater 2

Curs de disseny de pàgines web amb Nvu (Mòdul 1)

Guillem A. Suñer Sabater

D'aquesta edició:Servei de Formació Permanent del ProfessoratDirecció General d’Innovació i Formació del ProfessoratConselleria d’Educació i Cultura

Juliol de 2007 (revisió: juliol 2008)



CONVENCIONS Els símbols utilitzats en aquest text són:

Activitats d'introduccióActivitats completament guiades amb exposició gradual de continguts, que permetinassegurar els continguts mínims de la programació del mòdul de formació.

Activitats de consolidació i reforç: Aquestes activitats presenten una dificultat un poc superior ja que no són tan guiades ipermetran un millor domini dels temes estudiats.

Activitats de lliurament obligatLes activitats que vénen marcades per aquesta icona s'hauran d'enviar obligatòriament ala tutoria per tal de poder superar el curs de formació.

Activitats opcionalsActivitats d'ampliació de coneixements que permeti aprofundir en la temàtica tractada. Nosón obligatòries i no s’han de fer si es veu que hi haurà dificultat per seguir el ritmeaconsellat per al curs.

Recomanacions o comentarisRecomanacions o comentaris que permetran una millor realització de les activitatsencomanades.

AjudaPer algunes activitats, si la seva resolució presenta problemes, es podrà consultar l'ajudaque donarà pistes per facilitar la seva realització.

Recursos addicionalsPer poder ampliar els coneixements, es posa a la disposició dels alumnes unadocumentació complementària de consulta o d'ampliació.



1. OBJECTIUS DEL CURS I CONSIDERACIONS PRÈVIES.......................................................................5

2. INTRODUCCIÓ A INTERNET......................................................................................................................6

3. INTRODUCCIÓ A PÀGINES WEB...............................................................................................................8

4. EL PROGRAMA NVU...................................................................................................................................10

PROCÉS D'INSTAL·LACIÓ.........................................................................................................................................10COMPONENTS DEL PROGRAMA ...............................................................................................................................12

5. EL LLENGUATGE HTML...........................................................................................................................17

ETIQUETES BÀSIQUES DEL LLENGUATGE HTML ....................................................................................................22QÜESTIONS PRELIMINARS .......................................................................................................................................25

6. CREACIÓ D’UN LLOC WEB AMB NVU ..................................................................................................28

CREACIÓ DE LA NOSTRA WEB .................................................................................................................................30ELS TEXTOS ............................................................................................................................................................34LES IMATGES ..........................................................................................................................................................38ENLLAÇOS ..............................................................................................................................................................42

Àncores .............................................................................................................................................................43Enllaços a pàgines web del nostre lloc .............................................................................................................45Enllaços a arxius o documents del nostre lloc ..................................................................................................46Enllaços a pàgines d'Internet............................................................................................................................47Enllaços a adreces de correu electrònic ...........................................................................................................48Imatges amb enllaços........................................................................................................................................49

7. LES TAULES..................................................................................................................................................51

CONTROL DE LA TAULA ..........................................................................................................................................52

8. ELS FORMULARIS.......................................................................................................................................59

PROGRAMARI UTILITZAT EN EL CURS:

• Programa d'edició de pàgines web Nvu v.1

• Programa d'edició digital d'imatges GIMP v.2

• Programa compresor Winzip o winRar

• Navegador d'Internet: Mozilla Firefox, Internet Explorer

• Programa editor de text Bloc de Notes (o equivalent)



1. OBJECTIUS DEL CURS I CONSIDERACIONS PRÈVIES

Amb aquest curs es pretén que en acabar-lo els assistents siguin capaços d'elaborar una web educativa (laweb d'un centre educatiu, d'una revista escolar, d'una unitat didàctica, les pàgines personals d'un professoro professora, etc.) amb un grau de complexitat mitjà. Per aquest motiu, en el curs es tracten aspectes dedisseny de la pàgina, estructura de la informació, llenguatge HTML, utilització d'un editor visual per a larealització de pàgines web i d'un editor gràfic per al tractament d'imatges.

Tot i que el curs comença amb una introducció elemental al llenguatge HTML, és important que elsparticipants tinguin un nivell de coneixements previs equivalents al del curs d'Aprofundiment en les TIC(Windows avançat, treball amb fitxers i carpetes, instal·lació de programari, navegació i recerca per Internet,compressió d'arxius, edició elemental d'imatges digitals…), ja que en cas contrari el seguiment del curs espot tornar molt dificultós.



2. INTRODUCCIÓ A INTERNET

Hem d'entendre Internet com un mètode d'interconnexió d'ordinadors (i altres aparells electrònics, comPDA, mòbils…) basat en un conjunt de protocols anomenats TCP/IP (protocol de control de transmissió /protocol d'Internet). Aquests protocols garanteixen que les nombroses xarxes físiques d'ordinadorsfuncionin com una única xarxa. Per això també es coneix Internet com la "xarxa de xarxes".

Damunt aquesta xarxa física mundial —conjunt detotes les xarxes d'ordinadors del món— que ésInternet, s'ofereixen una sèrie de serveis (entreparèntesi s'indica el nom del protocol), com podenésser:

accés remot a altres ordinadors (telnet, ssh) transferència d'arxius (FTP) correu electrònic (SMTP) butlletins electrònics (newsgroups) missatgeria instantània (IRC) transmissió d'arxius (P2P) World Wide Web (HTTP) …i altres serveis.

De tots aquests serveis, el més conegut és el WorldWide Web o WWW, però que no s'ha de confondreamb Internet.

Mapa topològic de la xarxa europea GEANT2

Es pot definir El web o WWW (acrònim anglès de World Wide Web, Gran teranyina mundial) com una xarxade pàgines escrites en hipertext, amb el llenguatge de marcatge HTML, i connectades entre sí, de maneraque formin un sol cos de coneixement fàcilment navegable. Per accedir-hi, l'única eina indispensable és unnavegador web, com per exemple: Internet Explorer, Mozilla Firefox, Opera, Apple Safari, Konkeror,Netscape…

El web es basa en tres estàndards per funcionar:

L'URL (Uniform Resource Location, Localitzador Uniforme de Recursos), que s'encarrega de donar unaadreça única per tal de localitzar cada pàgina. És una cadena de caràcters que informa al navegador delservidor —ordinador que emmagatzema la informació— a on està la pàgina i del protocol que had'utilitzar per obtenir-la.

L'HTTP (Hyper Text Transfer Protocol, Protocol de Transferència d'Hiper Text) és el protocol queespecifica la manera com s'enviarà i es rebrà la informació entre el navegador i el servidor.

L'HTML (Hyper Text Markup Language, llenguatge de marcat d'hipertext) és un mètode per especificarcom s'ha de veure aquesta informació al navegador. L’hipertext és un sistema d’organització de lainformació basat en la possibilitat de moure’s per dins d’un text i cap a textos diferents per mitjà deparaules clau.

A la imatge de la pàgina següent s'analitza una URL, marcant les diferents parts que la composen:

el protocol, el domini del servidor, i el directori, allà on està allotjada en darrer terme la pàgina



Exemple: aquesta és l'URL de la pàgina web anomenada "inscripcio_.htm" que està al WEIB

En català, quan es parla del web en masculí es fa referència al sistema, però quan es parla de la web enfemení es fa referència a només una de les pàgines del sistema.



3. INTRODUCCIÓ A PÀGINES WEB

Una pàgina web és un document de la World Wide Web, normalment escrit en el llenguatge o codidenominat HTML (també existeix el format XHTML) i amb extensions de fitxer .html o .htm. El seu contingutés coneix com hipertext, que significa que la informació de la pàgina conté enllaços —també denominatshipervincles— per facilitar la navegació d'una pàgina o secció a una altra. Les pàgines web sovint fan servirfitxers d'imatge per mostrar il·lustracions, i aquestes també poden ser hipervincles. Un usuari pot veure unapàgina web amb un navegador web.

A la WWW veig pàgines web que no acaben amb les extensions .htm o .html. Quèsón?

Les pàgines web que consisteixen en text estàtic normalment utilitzen l'extensió de l'arxiu .htmo .html. Ara bé, hi ha altres pàgines denominades "dinàmiques", que a partir d'una sèried'instruccions, construeixen al moment la pàgina web amb la informació sol·licitada.Les pàgines dinàmiques utilitzen extensions que generalment reflecteixen el llenguatge otecnologia que s'ha utilitzat per a crear el codi, com .php (PHP), .jsp (JavaServer), etc.

Una pàgina web pot contenir qualsevol dels següents elements:

- Text.- Fitxers d'imatge (PNG, GIF i JPG).- Fitxers de so (mid o wav).- Contingut multimèdia que requereixi l'ús d'endollats (plug-ins) com Flash o VML.- applets (programes que s'executen dins de la pàgina) que sovint proveeixen gràfics en moviments,interacció i so.

També poden contenir elements que no es veuen al navegador:

- Guions (scripts) normalment JavaScript, que afegeixen funcionalitats a la pàgina.- Etiquetes meta, que són contingut ocult amb informació sobre la pàgina: autor i idioma de lamateixa, programa que l'ha creada, jocs de caràcters utilitzats, versió del codi HTML, paraules clausi instruccions per a robots de cerca, etc. - Fulls d'estil en cascada (CSS, Cascading Style Sheets) que determina el format de la pàgina. Ambels CSS se separa l'estructura d'un document de la seva presentació.

Les pàgines web poden ser més grans que la finestra del navegador web. Sovint són més llarguesverticalment i requereixen l'ús de barres de desplaçament. Algunes pàgines tenen contingut a la dreta queno seria visible en finestres petites sense desplaçament horitzontal. Les pàgines dissenyades per serdesplaçades horitzontalment són menys comunes, entre altres raons per la dificultat d'imprimir-lescorrectament o el fet que els visitants les troben inconvenients.

Una pàgina web pot ser també un conjunt de marcs (en anglès: frameset, codi html: <frameset>). Cadaun d'aquests marcs conté una pàgina web individual. La seva utilitat és mantenir part del contingut(normalment un menú de navegació) sempre visible mentre altres continguts poden ser desplaçats. Aquestefecte també és pot aconseguir fent servir CSS i en cas de ser necessari es recomana fer servir aquestsegon mètode.

Un lloc web és una col·lecció de pàgines web emmagatzemades en un directori o entre directoris relacionatsd'un servidor web. Cada lloc web inclou una pàgina índex. Aquest és un fitxer amb un nom especial,normalment index.html o default.html, que és definit a la configuració del servidor web. Quan un visitantrequereix una adreça web URL que no inclou una pàgina (per exemple: www.exemple.cat) el servidor webretornarà la pàgina índex a aquest usuari. Si no existeix aquesta pàgina índex, el visitant veurà una llista ambel contingut del directori, o una pàgina d'error (depenent de la configuració del servidor).

Una consideració en dissenyar i provar pàgines web és que aquestes haurien de complir les recomanacionsper la correcció d'HTML, CSS i altres estàndards definits pel World Wide Web Consortium (W3C). Aquestsexisteixen per mantenir la web lliure i disponible per a tothom. Si un dissenyador web segueix aquests



estàndards el seu lloc web serà adequat per molts navegadors diferents, amb resolucions de pantalladiferents i accessible per gent amb deficiències visuals. El "target" d'audiència, la manca de pressupost oel desconeixement dels problemes d'accessibilitat sovint són la causa que un lloc web no sigui tantaccessible com podria ser. Fer servir capacitats que només funcionen en un navegador sense posar a l'abastcap contingut alternatiu és considerat una mala pràctica, i per això el W3C treballa amb els dissenyadors denavegadors i servidors web per desenvolupar estàndards i per encoratjar el seu compliment.

Aquesta informació ha estat extreta de l'enciclopèdia lliure Wikipedia —escritacol·laborativament des d'Internet per voluntaris, usant un programa lliure anomenatMediaWiki—.

Wikipedia en castellà: http://es.wikipedia.org Viquipèdia en català: http://ca.wikipedia.org Wikipedia en anglès: http://www.wikipedia.org/

Podeu consultar les xarxes topològiques d'Internet a http://www.dante.net/Pàgina del World Wide Web Consortium: http://www.w3.org/Iniciativa d'accessibilitat web: http://www.w3.org/WAI/

Una curiositat: a l'any 1969 hi havia 4 servidors d'Internet (imatge inferior), i en eljuliol de 2006 n'hi havia 439.286.364!

Imatge i dades extretes de: http://www.zakon.org/robert/internet/timeline/

http://es.wikipedia.org/

http://ca.wikipedia.org/

http://www.wikipedia.org/

http://www.dante.net/

http://www.w3.org/

http://www.w3.org/WAI/

http://www.zakon.org/robert/internet/timeline/



4. EL PROGRAMA NVU

L’Nvu (pronunciat, en anglès, com a N-view, per a new view) és un complet programa de codiobert per editar pàgines web que combina la gestió de tots els fitxers del lloc web i la facilitat d'ús de l’editorgràfic o mode WYSIWYG (de l'anglès What You See Is What You Get i que vol dir que el que es veu a l’editorés el que s’obté a la xarxa) per a l'edició. Està basat en el Mozilla Composer, però és d’execucióindependent.

L'Nvu està dissenyat per ser extremadament senzill d'utilitzar, convertint-se en l'eina ideal per aquells usuarisd’ordinadors sense massa coneixements tècnics que volen crear una web atractiva i d'aspecte professionalsense necessitat de conèixer els marcadors HTML o els detalls de la programació web. El codi que l’Nvugenera és molt fiable (la definició del codi generat és W3C//DTD HTML 4.01 Transitional) i capaç defuncionar amb els navegadors més coneguts i utilitzats com ara Mozilla Firefox o Internet Explorer.

A més l’Nvu integra l’administrador d’arxius via FTP i una plataforma integrada de CSS (Cascading StyleSheets) o fulls d’estil. Com els més importants editors HTML comercials, l’Nvu permet alternar entre el modeWYSIWYG i el codi HTML amb un simple clic en les pestanyes adients, a més d’incorporar un tercer moded’edició basat en les etiquetes HTML. També possibilita el fer feina amb diverses pàgines a la vegada. Moltesmés característiques completen aquest editor com ara la gestió de treball mitjançant projectes i tots elselements típics de les pàgines web com són els formularis, les taules, les plantilles de disseny, els fulls d’estilabans esmentats, etc.

D’altra banda, i això pot ser el millor, aquesta aplicació té una llicència GPL (General Public License) quepermet fer totes les còpies que necessitem per a la feina a l’aula així com per proporcionar a tots aquellsalumnes que no disposin d’Internet a ca seva per tal que puguin continuar per ells mateixos la feina encetadaa una sessió de l’institut o l’escola.

Finalment, s’ha de dir que l'Nvu és un programa amb la seva interfície (barra de menús) traduïda al català,i que a més és un programa multiplataforma: es pot instal·lar sota els sistemes operatius Windows,GNU/Linux i Mac OS X.

Procés d'instal·lació

És molt recomanable que la instal·lació del programa Nvu es faci descarregant l’arxiu d’instal·lació desd’Internet, ja que al ser un programa de codi lliure i obert pot estar en constant evolució, tal com succeeixamb el paquet ofimàtic OpenOffice o el programa d’edició d’imatges digitals Gimp.

IMPORTANT: Kompozer, nova versió de l'Nvu

Per favor, llegiu les notes referent a una nova versió del programa Nvu —anomenadaKompoZer— que trobareu a l'Annex 3 del Mòdul 2 d'aquest tutorial.

No existeix cap impediment per a tenir els programes Nvu i KompoZer instal·lats de manerasimultània en el vostre ordinador.

Activitat 1Instal·lació de l'Nvu

Si desitgem instal·lar el programa en català en el nostre ordinador, podem anar directamenta l'enllaç proporcionat per Softcatalà:

• http://www.softcatala.org/wiki/Nvu (per a les tres plataformes)

Tal com s’ha dit abans, la descàrrega i instal·lació es pot realitzar per als diferents sistemesoperatius Linux, Mac o Windows i és molt simple i intuïtiva.

http://www.softcatala.org/wiki/Nvu



A continuació s’explica una instal·lació típica a la plataforma Windows.

En fer clic a l’enllaç corresponent, s’obrirà lafinestra que demana autorització per a davallarl’arxiu d’instal·lació i que es correspondràaproximadament a la imatge de l’esquerra. Enaquest moment es pot optar bé per baixarl’arxiu, desar-ho al nostre ordinador i desprésexecutar-ho o fer la instal·lació directament.Per això haurem de seleccionar i pitjar o bé elbotó Guardar o bé el botó Ejecutar. En aquestcas ho desarem en el nostre ordinador.

Una finestra ens demanarà a on volem desarl’arxiu (pot desar-se directament a l’escriptori).Una vegada hagi acabat la descàrrega, tindremun arxiu com aquest de la dreta.

En fer doble clic sobre l’arxiu, posarem enmarxa l’instal·lador.

La primera pantalla és una advertència delsistema operatiu Windows, ja que no potcomprovar el fabricant del programa.

De totes formes, s’ha de pitjar Ejecutar.

La pantalla següent ja és l’assistentd’instal·lació de l’aplicació Nvu i se’ns avisaque s’instal·larà la versió corresponent del’aplicació (en el cas de la il·lustració és la 1.0).En fer clic a Següent s’obrirà la finestrad’acceptació de la llicència d’ús. Acceptem ifem clic a Següent.

A partir d’aquí la seqüència d’imatges ensmostra el procés d’instal·lació, a on només calacceptar totes les pantalles amb el botóSegüent.



Triades les opcions desitjades començarà elprocés d’instal·lació que prepara el programaper poder ser utilitzat al nostre ordinador.

Per això farem clic a l’opció Instal·la.

Quan acaba el procés satisfactòriament,l’instal·lador ens avisa donant l’opciód’executar directament el programa.

Per sortir de l’instal·lador farem clic a l’opcióFinalitza.

Components del programa

Activitat 2Posta en funcionament del programa

• Aneu a Inicio > Programas > Nvu > Nvu, o bé cliqueu la icona d’accés directe enl’escriptori (cas que haguem triat aquesta opció en fer la instal·lació):

Entrareu al programa.

• Si voleu, podeu desactivar la finestra Trucs de Nvu, desmarcant la casella "Mostra elsconsells a l'engegada".



Recordeu que l'Nvu és un programa dissenyat per facilitar al màxim el treball visual. Per tant, en obrir elprograma, ens trobarem, de dalt a baix, amb els elements següents:

Barra de títol. De color blau, apareix a l'esquerra el logotip de l'Nvu i el títol de la pàgina web que estameditant, i el nom de l'arxiu, en cas de què ja hagi estat desat prèviament. Si és un document nou, apareixeràcom "sense títol". A la dreta hi ha els botons de control de les finestres: minimitzar, restaurar i tancar.

…

Barra de menús. Com qualsevol altre programa, amb els menús Fitxer, Edita, Visualitza, Insereix, Format,Taula, Eines i Ajuda podem accedir a totes les opcions del programa. Només cal fer un clic a sobre per adesplegar les finestres de submenús. Obtindrem el mateix resultat si pitgem la tecla <Alt> i la teclacorresponent a la lletra subratllada (per exemple, <Alt> + T obri el menú Taula). Aquesta barra no es potsuprimir ni amagar.

Barra d’eines de composició. Són una sèrie d’icones que ens permeten realitzar les operacions méshabituals del programa, com ara crear una nova pàgina, obrir un fitxer, desar-ho, o bé inserir elements típicsd’una pàgina web: una imatge, un enllaç, una taula, etc. Ho podem considerar com una manera d’accedira aquestes funcions més ràpidament.

Barra d’eines de format. A la línia superior hi trobem les icones i botons que ens permeten accedir a lesopcions més bàsiques per a donar format a un text, i que són similars a les de qualsevol processador de text.A la línia inferior hi ha botons de format més específics del llenguatge HTML com els relacionats amb elsestils i les capes.



Aquestes dues barres d’eines (composició i format) comparteixen unes característiques:• si passem el cursor per sobre una icona, s’obri una petita finestra amb informació referent a la funció

de la icona, tal com es veu a la imatge següent:

• les barres d’eines es poden personalitzar afegint-hi o llevant-li elements mitjançant el menúVisualitza > Mostra/Amaga > Personalitza la barra d’eines > Barra d’eines principal o Barrad’eines de format, tal com es mostra a la imatge següent:

(I si trobeu que aquest menú és massa llarg, proveu a fer clic sobre qualsevol icona d'aquestes dues barresd'eines amb el botó dret del ratolí.)

Finestra Gestor de llocs web.

Aquesta finestra està situada a l’esquerra i serveix per al’administració dels llocs. Com que l’Nvu està pensat per poderfer feina en línia, és a dir connectats amb el nostre servidord’Internet, encara que això no implica que les seves prestacionssiguin menors quan fem feina en local, per defecte apareixaquesta finestra que ens permet gestionar tots els nostres llocsweb.En local, també ens servirà per poder tenir estructurat i a lavista el directori del web que estem creant.

Amb les icones podrem: refrescar ellloc, crear una nova carpeta, canviar el nom d'un arxiu ocarpeta, esborrar i aturar la transmissió FTP.

Tant en un cas com en l’altre, des d’aquí és on es pot fer la transferència dels fitxers mitjançant el protocolFTP, per la seva publicació definitiva a la xarxa.

Es pot tancar/obrir aquesta finestra amb el menú Visualitza > Mostra/Amaga > Gestor de llocs web osimplement pitjant la tecla F9.

Finestra de l’àrea d’edició. Aquesta és la finestra més important, perquè és allà on es va editant i dissenyantla nostra web. És possible tenir més d’una feina oberta al mateix temps i cadascuna d’elles estaràrepresentada per una pestanya a la part superior. Les imatges a la pàgina següent ens mostren aquestafinestra, amb una única pàgina activa que seria l’anomenada “sense títol” (esquerra) i amb dues pàginesobertes (dreta).



Quan tinguéssim més d'una pàgina activa, alternaríem entre elles fent clic a la pestanya corresponent decadascuna.Dins aquesta finestra es poden mostrar / amagar les regles amb el menú Visualitza > Mostra/Amaga >Regles

Fent un clic a sobre una pestanya amb el botó dret delratolí s'obrirà un petit submenú amb una sèried'opcions.

Sempre es pot tancar una pàgina fent clic sobre lapetita icona . El programa demanarà si volem desarels canvis.

A la part inferior de la finestra de l’àrea d’edició hi ha la barra del mode d’edició. Són quatre pestanyesamb les que podrem canviar la manera de treballar dins la finestra de l’àrea d’edició.

• Normal o mode WYSIWYG: recordeu que significa que el que es veu ja és l’aspecte final.• Marcadors HTML: és una visualització esquemàtica dels marcadors o etiquetes utilitzades.• Codi font HTML: accedim al codi font de la pàgina, amb el veritable llenguatge HTML.• Previsualització: ens mostra la forma en què la nostra feina es visualitzarà mitjançant un navegador.

Aquí tenim un exemple de com es veu la mateixa pàgina web dins la finestra de l’àrea d’edició, segons lapestanya seleccionada.

Mode normal Mode marcadors HTML



Mode codi font HTML Mode previsualització

Finalment, avall de tot, trobem la barrad’estat que ens mostra la informaciórelativa a l’etiqueta en què ens trobem dinsla pàgina. Des d’aquí podem editar oassignar les propietats d'una etiqueta, fentclic i seleccionant amb el botó dret del ratolíl'opció que cal aplicar sobre aquesta.

La imatge de la dreta mostra aquesta barraen el moment de seleccionar una etiquetaamb el botó dret del ratolí:

Per tancar el programa, com a moltes altres aplicacions, tenim diferents camins:

(a) Podem fer clic damunt la creu que apareix a la part superior dreta de la barra de títol: (b) Podem desplegar el menú Fitxer i seleccionar l’opció Surt (menú Fitxer > Surt)(c) Polsar la combinació de tecles <Ctrl> + Q(d) En cas que tinguem activa la finestra de l’àrea d’edició, polsar la combinació de tecles <Alt> + F4.



5. EL LLENGUATGE HTML

Fins fa molt poc temps, la creació de pàgines webestava reservada a aquelles persones que tenien gransconeixements d’informàtica, perquè el llenguatge quesuporta una web, que ja hem dit que és l’HTML, té lesseves dificultats. A més, és un llenguatge en contínuaevolució. També s'ha de remarcar que en els inicis, lespàgines web es creaven "a mà", ja que encara noexistien programes d'edició de llenguatge HTML.

Tan sols a tall d’exemple i sense ànim d’espantar ningúpodem observar el resultat d’una pàgina a l’exploradori el codi que la suporta. Aquesta és la visualització dela pàgina...

... i aquest és el codi HTML:

<html><head><meta http-equiv="Content-Language" content="es"><meta name="GENERATOR" content="Microsoft FrontPage 5.0"><meta name="ProgId" content="FrontPage.Editor.Document"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>CP REI JAUME I</title></head><body background="imatges/fondo.jpg"><p align="center"> </p><p align="center"><img border="0" src="imatges/jaume1.gif" width="425"height="57"></p><table border="1" cellspacing="1" style="border-collapse: collapse; border-width: 0"bordercolor="#111111" width="100%" id="AutoNumber1"> <tr align="center" valign="middle"><td width="33%" style="border-style: none; border-width: medium"> <p align="center"> <img border="0" src="imatges/logo_jaumei1.gif" width="106" height="100"> <p align="center"><img src="imatges/logo.jpg" width="87" height="82"></td> <td width="33%" style="border-style: none; border-width: medium"> <a href="principal.htm"><img border="0" src="imatges/fasana1.gif" width="283"height="227"></a></td> <td width="34%" style="border-style: none; border-width: medium"> <p align="center"><img border="0" src="links/mallorcaweb.gif" width="110"height="30"> <p align="center"><img src="5aldia.jpg" width="72" height="67"> <p align="center"><img src="imatges/logosocrates.jpg" width="113" height="58"> </td></tr></table><p align="center"> </p><p align="center"> <applet code="fphover.class" codebase="./" width="120" height="24" align="middle"> <param name="color" value="#000080"> <param name="hovercolor" value="#0000FF"> <param name="textcolor" value="#FFFFFF"> <param name="text" value="ENTRAU"> <param name="effect" value="glow"><param name="url" valuetype="ref" value="principal.htm"> </applet></p></body></html>



A on són les imatges?

Una pàgina web no és com un document de text editat amb MS Word o OpenOffice. Amb unprocessador de texts com els anteriors, les imatges s'inclouen dins del document, i a l'hora dedesar-ho, tenim només un únic arxiu. En una pàgina web, el seu codi HTML té les instruccionsprecises perquè el navegador vagi a cercar les imatges a un lloc determinat, i llavors lescarregui dins la pàgina web.

És important destacar que una única pàgina web pot estar formada —i de fet ho està habitualment— per mésd'un arxiu. Generalment ens trobarem que cadascuna de les pàgines d'una web està formada per un conjuntd'arxius.

Un arxiu de text ASCII (text sense cap dels caràcters o elements especials que s'utilitzen alsprocessadors de text per donar format a un document) que obligatòriament ha de tenir l'extensió .htmo .html (com per exemple: index.htm o index.html) i que conté el text de la pàgina i les etiquetes queindiquen al navegador on i amb quin aspecte ha de mostrar aquest text, quines imatges han d'aparèixeri on, els enllaços a altres pàgines o arxius (per exemple cap a un arxiu PDF, cap a un arxiu ZIP…), etc.

Els altres arxius que formen la pàgina: imatges, sons, vídeos, animacions de Flash, applets de Java, etc.

Per aquest motiu, quan envieu una pàgina web a la tutoria o la publiqueu a Internet, haureu d'enviar nonomés l'arxiu o arxius HTML (els que acaben en .htm o .html) sinó tots els arxius associats (imatges, sons,vídeo, etc.)

Atès que els documents HTML estan escrits en format ASCII, per crear-los, modificar-los o simplement perveure el seu codi HTML podem fer servir un editor de textos qualsevol, com per exemple el Bloc de notesde Windows.

Per visualitzar aquests documents no cal estar connectats a Internet, sinó que si teniu els arxius al vostreordinador, ho podeu fer simplement obrint l'arxiu corresponent amb el navegador.

Anem, doncs, a veure amb un exemple l'estructura d'una pàgina web simple.

Activitat 3Obrir una pàgina web amb el Bloc de notes

• Descomprimiu al disc dur del vostre ordinador el fitxer arxius.zip, que trobareu a la pàginade materials del curs.

Es crearà una carpeta anomenada cursNvu i es descomprimiran a dins tots els arxius queutilitzareu per a les activitats del curs.

• A continuació, poseu en marxa el navegador que utilitzeu habitualment i obriu l'arxiucursNvu/exemple_1/index.htm (amb Internet Explorer és el menú Archivo > Abrir…i amb Mozilla Firefox és el menú Fitxer > Obri un fitxer…)

Veureu una cosa semblant a:



• Ara aneu a la carpeta cursNvu, obriu-la, i obriu la carpeta exemple_1.

El que hi ha a dins és l'arxiu index.htm, el que acabeu de veure amb el vostre navegador, i unacarpeta anomenada imatges, amb sis arxius amb extensions .gif i .jpg a dintre.

En realitat, això que sembla només un arxiu vist en el navegador, està format per 7 arxius:colegio.jpg: arxiu que conté la fotografia de l'escola.catala.gif: arxiu amb la imatge de la bandera catalana.b_arrow.gif: arxiu que conté la imatge de la fletxa.bienvenido.gif: arxiu amb la imatge de la bandera espanyola.welcome.gif: arxiu amb la imatge de la bandera anglesa.clouds.gif: arxiu que conté la imatge que dóna el fons de pàgina.index.htm: és l'arxiu de text ASCII que conté el text de la pàgina i tots els codis HTML, queindiquen al navegador com ho ha de mostrar tot: les imatges que han d'aparèixer, on hand'estar col·locades, els enllaços que hi ha d'haver, etc.

Com que l'arxiu index.htm és un arxiu de text, podem fer servir el Bloc de notes (o un altreeditor de text similar) per obrir-lo i d'aquesta manera podem observar els codis de què hemestat parlant (tot i que de moment no entendreu res, però això ho solucionarem ben aviat).

• Obriu l'arxiu cursNvu/exemple_1/index.htm amb el Bloc de notes (menú Archivo >Abrir i Tipo de archivos: Todos los archivos) i veureu alguna cosa semblant a la imatgeinferior de la dreta:



Les imatges de l'esquerra les podeu visualitzar amb qualsevol programa d'edició d'imatges quetingueu al vostre ordinador, o simplement amb el visor d'imatges de Windows.

• En acabar, tanqueu el Bloc de notes.

Activitat 4Repetir l'anterior activitat amb el programa Nvu.

• Engegueu el programa Nvu. Amb el menú Fitxer > Obre un fitxer (o amb les tecles <Ctrl>+ O) obriu l'arxiu cursNvu/exemple_1/index.htm.

Per defecte, l'Nvu ens mostrarà qualsevol pàgina amb el mode Normal, és a dir, amb lapestanya Normal activada, dins de la barra del mode d'edició:

I el que hem de veure dins la finestra de l'àrea d'edició serà una cosa semblant a:

Recordeu que aquest és el mode gràfic o WYSIWYG, a on la tasca que es fa a la pàgina jaes veu com quedarà finalment. Els requadres vermells són taules (amb vores invisibles)utilitzades per a fer la composició.



• Si clicam sobre la pestanya Marcadors HTML:

veurem com apareixen unes etiquetes grogues. Aquestes etiquetes són les corresponents alllenguatge HTML, i ens mostren de manera visual l'estructura de la pàgina:

• Si clicam sobre la pestanya Codi font HTML:

hem de veure el mateix text que ja havíem observat amb el Bloc de notes:

• I finalment, clicant la pestanya Previsualització:

veurem la pàgina web tal com ja l'havíem vista amb el navegador:



Un detall important: des de qualsevol de les quatre pestanyes es pot editar i modificar lapàgina web que tenim dins de la finestra de l'àrea d'edició.

Etiquetes bàsiques del llenguatge HTML

Afortunadament, avui en dia no cal conèixer res del llenguatge HTML per fer una pàgina web, ja que elsnombrosos programes d'edició de pàgines web —l'Nvu entre ells— utilitzen un mode gràfic per a l'edició, ideixen la manipulació del llenguatge HTML en un segon terme.

Per tant, i només com a mode d'exemple, ja que no utilitzarem el codi HTML directament per crear pàginesweb, donarem una petita introducció al llenguatge HTML.

El llenguatge HTML està basat en la utilització d'etiquetes, anomenades tag en anglès. Les etiquetesbàsiques d'HTML, que haurien d'aparèixer en tot document són:

<!DOCTYPE>: És l'etiqueta que permet definir el tipus de document HTML que s'empra. Existeixentres tipus bàsics: l'estricte (Strict), el transicional (Transitional) i el de marcs (Frameset).[NOTA: aquesta etiqueta no és estrictament obligatòria.]

<html>: És l'etiqueta arrel de qualsevol document HTML o XHTML.

<head>: Defineix la capçalera del document HTML. Permet declarar metainformació del documentque no es mostra directament en el navegador. Aquesta informació és d'especial rellevància pelsindexadors i cercadors automàtics.

<body>: Defineix el cos del document. Aquesta és la part del document HTML que es mostra en elnavegador.

Dintre de la capçalera <head> hi podem trobar:

<title>: Permet definir el títol de la pàgina. En navegadors gràfics el contingut del title apareix a labarra del títol a sobre de la finestra.

<meta>: Permet definir metainformacions del document tal com l'autor, la data de realització, lacodificació del document (UTF, ISO, etc.), les paraules clau i la descripció del mateix

<link>: Permet definir metadades complementàries a les del meta tal com el document anterior, elsegüent, el capítol al qual pertany el document, la pàgina glossari, etc.

Dintre del cos <body> hi podem trobar, entre d'altres:

<a>: Etiqueta àncora. Crea un enllaç a un altre document o a una altra zona del mateix, segons elsatributs.



<h1>, <h2>,... <h6>: capçaleres o títols del document, acostumen a distingir-se per mida.

<div>: Divisió estructural de la pàgina.

<p>: Paràgraf.

<br>: Salt de línia.

<table>: Indica el començament d'una taula, després s'haurà de definir les files amb <tr> i lescel·les dintre de les files amb <td>.

<ul>: Llista desordenada (sense numerar). Els ítems es defineixen amb <li> .

<ol>: Llista ordenada (numerat). Els ítems es defineixen amb <li>.

<dl>: Llista de definició. Hi ha dos tipus d'ítem; el dt i el dd.

<dt>: Terme a definir. <dd>: Definició del terme.

Excepte unes poques etiquetes, la majoria requereixen ser tancades escrivint la mateixa etiqueta precedidad'una barra "/". Per exemple:

<html>...</html>L’estructura típica d’una pàgina web molt simple és la següent:

En primer lloc, la pàgina ha de començar i acabar amb l'etiqueta html:

<html></html>

La pàgina en si està dividida en dues zones principals:

(a) L'encapçalament, indicat amb l'etiqueta head. Dins de l'encapçalament hi ha informació de la pàgina,que no es veu per la pantalla del navegador.

<html><head></head>

</html>

D'aquesta informació de la pàgina, l'única que ha d'aparèixer de manera obligatòria és el títol de la pàginaweb, que utilitza l'etiqueta title.

<html><head>

<title> </title></head>

</html>

El títol d'una pàgina web és el nom que apareix a la barra blava superior de qualsevolnavegador, i que en general indica el contingut de la pàgina. Per exemple: Pàgina del nostre col·legi

El nom d'una pàgina web és el nom de l'arxiu, i que duu l'extensió .htm o .html. Per exemple colegi.htm



b) i la segona zona de la pàgina és el cos, indicat per l'etiqueta body. És la part fonamental de la pàgina,ja que contindrà tot el que s'ha de veure en el navegador: texts, imatges, etc.

<html><head>

<title> </title></head>

<body></body></html>

Així, l'estructura mínima d'una pàgina web queda tal com:

<html><head>

<title> títol de la pàgina </title></head>

<body>

</body></html>

Si obrim una pàgina web nova amb el programa Nvu, veurem com la finestra de l'àrea d'edició està en blanc,però en pitjar sobre la pestanya Codi font HTML, observarem com la pàgina web en blanc ja té inseridesles etiquetes mínimes que formen un document web:

Afortunadament, i com ja hem dit abans, amb qualsevol programa actual d'edició de pàgines web no calconèixer res del llenguatge HTML, ja que l'únic que hem de fer és inserir text, donar-li format, posar imatges,indicar enllaços… i el programa s'encarrega de generar el codi HTML corresponent.

Ara bé, com que una pàgina web no deixa de ser un document de text ASCII, us proposem fer l'activitatopcional següent.

Activitat opcional 1Fer una pàgina web molt senzilla amb el Bloc de notes.

• Obriu el Bloc de notes o un editor similar. A la pàgina en blanc escriviu el següent:

<html><head><title>Benvinguts al nostre Centre</title></head><body>

CONTINGUT



<center><h1>EL MEU CENTRE</h1><p>Hola, companys del curs de Nvu<br>aquesta és la nostra <b>web</b><br><i>Us donem la benvinguda</i></center></body></html>

Aneu en compte de no equivocar-vos amb els símbols ">", "<" i "/".

• Deseu l'arxiu creat amb el menú Archivo > Guardar como… És fonamental que en elcamp Nombre de archivo poseu el nom exemple.htm. L'important és l'extensió .htm, jaque si ho deseu amb l'extensió .txt no tindreu una pàgina web.

• Ara, amb el vostre navegador, obriu aquest arxiu. Si tot ha anat bé, veureu la vostrapàgina web amb aquest resultat:

Fixeu-vos com el text que heu escrit entre les etiquetes <title> i </title> apareix a labarra blava superior del vostre navegador.

Si teniu problemes, teniu una còpia de l'arxiu a cursNvu/exemple_2/exemple2.htm

Qüestions preliminars

Per un millor aprofitament del curs, recomanaríem que, si no en teniu, cerqueu un espai on allotjar les vostrespàgines web. Si al vostre domicili teniu contractada una línia ADSL o de cable el vostre proveïdor normalmentofereix espai web gratuït i sense publicitat. En cas contrari hi ha molts servidors que ofereixen la possibilitatde mantenir un espai web gratuït. El procediment per sol·licitar l'espai sol estar indicat a la pàgina principali habitualment consisteix a registrar-vos com a usuaris per obtenir un nom d'usuari i una paraula de pas pertal de poder enviar els arxius al directori que us hauran assignat. Com a contrapartida solen col·locarinformació publicitària a les vostres pàgines i/o la velocitat de navegació és una mica lenta. Per acabar,l'administrador del servidor us indicarà quina URL cal utilitzar per accedir a les vostres pàgines des d'Internet.

Recursos addicionalsPer trobar empreses que ofereixen allotjament web gratuït només cal fer una recerca ambGoogle (http://www.google.es) o un cercador similar. Si més no, aquí teniu un petit llistat.Seria important confirmar que disposen del servei d’accés FTP.

http://www.aldeaglobal.net/ http://www.bravenet.com http://espacio.ya.com

http://www.google.es/

http://www.aldeaglobal.net/

http://www.bravenet.com/

http://espacio.ya.com/



http://www.tripod.lycos.es/ http://www.freeservers.com http://galeon.hispavista.com/ http://www.aldeavirtual.com http://www.fortunecity.es

Unes altres qüestions a tenir en compte serien:

• Els noms de les pàgines web i de les carpetes haurien d’estar formats per una única paraula o seqüènciade text i números.

• La seva extensió ha de ser htm o bé html.• No hauria de tenir més de 8 caràcters, si be no hi ha problema en utilitzar més caràcters.• Aquests caràcters no haurien de tenir accents, ni majúscules, ni les lletres ç i ñ, ni espais en

blanc. Millor evitar qualsevol signe que no sigui un número o una lletra.

Exemples:

pàgina del departament de Matemàtiques.htm NO!

pagina_departament_matematiques.htm SÍ!

[Carpeta] fotos del viatge 2005 NO!

[Carpeta] fotos_viatge_2005 SÍ!

• Abans de començar la fase de realització, convé una fase de planificació de com serà la nostra web,distingint entre els diferents blocs de continguts i les relacions que s’establiran entre ells, creant unsistema de navegació amb l’objectiu de poder explorar les diferents pàgines que configuraran el nostrelloc web. Aquests enllaços són els hipervincles que són els camins que s’utilitzaran per accedir d’un aaltre bloc d’informació.

Activitat opcional 2

Una bona manera d’ajudar-se a plantejar la pròpia web, o la del nostre centre, és veure quèés el que ja està fet i, per tant, dedicar-hi unes quantes hores a la navegació. Per aixòrecomanem, en primer lloc, fer una ullada a les web dels centres educatius no universitaris deles Illes Balears que estan recollides en el nostre Web Educatiu de les Illes Balears (WEIB):

http://weib.caib.es/Centres/centres_.htm

Molts altres llocs mostren pàgines de centres educatius com ara poden ser la de la xarxa dela Generalitat de Catalunya (http://xtec.cat/centres/index.htm) o la de la Junta d’Andalusia(http://www.juntadeandalucia.es/averroes/centros/centros_integrados.php3).

Navega per una sèrie de pàgines web de centres o pàgines educatives. Procura obtenir ideesi anota-les. També pots intentar fer un diagrama d’aquelles que més t’agradin.

Activitat d’entrega obligada 1Participació en el fòrum

• Cerqueu a Internet l'adreça d'algun recurs educatiu que us sembli interessant i envieu-laal fòrum anomenat "Recursos educatius a Internet", juntament amb un petit comentari delque s'hi pot trobar a dins.

• En el mateix missatge o en un missatge posterior, comenteu el que us hagi semblat algundels recursos suggerits per algun company o companya del curs.

http://www.tripod.lycos.es/

http://www.freeservers.com/

http://galeon.hispavista.com/

http://www.aldeavirtual.com/

http://www.fortunecity.es/

http://weib.caib.es/Centres/centres_.htm

http://www.xtec.cat/centres/index.htm

http://www.juntadeandalucia.es/averroes/centros/centros_integrados.php3



A l’hora de pensar en la nostra pàgina web o la del nostre centre, hem de tenir en compte una sèrie derequisits:

• Hem de pensar bé quina informació, i amb quina profunditat, volem presentar aquesta informació. • Hem de facilitar la navegació pel nostre lloc web. Les possibles visites davant d’una informació mal

estructurada abandonaran ràpidament la recerca. La navegació, doncs, ha de ser molt intuïtiva,estructurant la navegació per àrees o blocs de continguts molt definits.

• Atenció al pes de les pàgines. Una pàgina amb gràfics o imatges molt “pesades” tarda molt en carregar-se, és per això que hem de tenir cura en compatibilitzar la bona presentació amb la lleugeresa de lapàgina.

• És convenient provar les nostres pàgines, sempre que això sigui possible, amb diferents equipsconfigurats amb diferents sistemes operatius (diferents versions de Windows, Macintosh, Linux…), ambdiferents navegadors (Explorer, Mozilla…) i amb diferents resolucions de pantalla del monitor (800, 1024píxels,…). En molts casos, una pàgina que pot aparèixer molt bé en unes condicions, pot tenir unsresultats pèssims en unes altres.



6. CREACIÓ D’UN LLOC WEB AMB NVU

L’Nvu està pensat per treballar directament sobre el lloc web a Internet, encara que també pot treballar ambfitxers en local. En qualsevol cas, el primer de tot és organitzar els fitxers i l’estructura de carpetes queemprarem. Si tenim un servidor de pàgines web ja ho penjarem més endavant. Ara ens centrarem en fer lanostra web en local.El primer que hem de fer és crear, per exemple a l’escriptori, la carpeta on anirem col·locant tota la nostrafeina. Anomeneu-la com web del curs, la meva web, mi web, o així com vulgueu. Dins aquesta carpetacrearem dues subcarpetes més, una que podem anomenar imatges i una altra anomenada pagines (senseaccent!).Ara ja podem començar la feina.

IMPORTANT! Preferències del programa Nvu

• Per a un correcte funcionament del programa, i abans de començar a fer les activitatssegüents, és del tot convenient anar al panell de preferències, que s'obri amb el menúEines > Preferències… Dins l'apartat "General", s'ha de deixar DESMARCADA la casellaUtilitza estils CSS en comptes d'elements HTML i atributs, tal com es mostra a laimatge següent:

Activitat 5Creació del lloc web dins de l'Nvu

• Per mantenir tots els fitxers ben ordenats, el primer que s'ha de fer amb l'Nvu és crear unlloc web. Per fer-ho, hi ha dues maneres: O bé s'ha de seleccionar l'opció de menú Edita> Publica els paràmetres del lloc web… o bé, des de la finestra de l'esquerra Gestorde llocs web de l'Nvu (si no apareix aquesta finestra, basta pitjar la tecla F9), s'ha deseleccionar el botó Edita llocs:

i es mostrarà la finestra següent, que és la utilitat per gestionar els llocs web:



Malgrat que l’Nvu està pensat per poder fer feina en línia, és a dir connectats amb un servidord'Internet, per ara només farem feina en local, és a dir, dins del nostre ordinador. I per tant, aranomés cal:

• Escriure en el camp Nom del lloc web un text per identificar el lloc que crearem dins elprograma. És un text que es mostrarà en la llista de llocs i quan calgui podremseleccionar-ho de manera ràpida. Per comoditat i coherència podem posar el mateix nomde la carpeta creada: web del curs

• Pitjar el botó Selecciona directori. S'obrirà una finestra anomenada Buscar carpeta queens permetrà navegar pel nostre ordinador. Hem de cercar i marcar de color blau, fent unclic a sobre, la carpeta web del curs que acabem de crear. Pitgem Aceptar i llavorsD'acord, dins la finestra dels Paràmetres de publicació.

Així apareixerà en la finestra Gestor de llocs web el nostre lloc web anomenat web del curs.Fent un clic a sobre el petit símbol "+" de l'esquerra, o bé doble clic sobre el nom, esdesplegaran les dues subcarpetes imatges i pagines.

• En tornar a pitjar el botó Edita llocs, i seleccionant el nostre lloc —l'únic de la llista—veurem les dades del nostre lloc. Des d'aquesta finestra podrem afegir més llocs web ambel botó Nou lloc web. Per eliminar un lloc, cal seleccionar-lo de la llista i polsar el botóSuprimeix lloc web. Per establir un lloc per defecte, si és que tenim més d’un, s'ha deseleccionar de la llista i polsar el botó Estableix per defecte. El nom del lloc es posaràen negreta indicant que és l'establert per defecte.



En resum, una vegada definit el lloc web, en la finestra Gestor de llocs web es mostraran totsels fitxers i subcarpetes existents. Fent doble clic sobre un fitxer, s'obrirà una pestanya novadins la finestra de l'àrea d'edició. Si es fa doble clic sobre una carpeta, se'ns mostrarà elcontingut.

Creació de la nostra web

Començarem per crear un document que serà la pàgina principal de la nostra web. El podem anomenarindex.html.

Els elements d’una pàgina web són essencialment els següents:• Text. S’introdueix com a qualsevol altre processador de textos i se’l pot donar una sèrie de

característiques de format.• Imatges. Poden ser estàtiques o animades.• Fitxers multimèdia. Generalment seran sons o seqüències de vídeo digital.

Activitat 6Creació de la primera pàgina web: anomenar i desar

Una vegada creat el nostre lloc web, fixeu-vos com encara hi ha un full en blanc a la finestrade l'àrea d'edició, i amb el text "(sense títol)" a la pestanya superior.

• Anem al menú Fitxer > Anomena i desa… S'obrirà aquesta finestra:

a on escriurem el títol de la nostra pàgina. Per exemple: Benvinguts al nostre centre. En pitjarel botó D'acord, ens apareixerà una finestra que demana:

1. a on volem desar l'arxiu: hem de seleccionar la nostra carpeta arrel web del curs.



2. El nom de l'arxiu: Per defecte el programa posa el títol de la pàgina com a nom, és a dir,Benvinguts al nostre centre.html

HEM DE TENIR MOLTA CURA DE CANVIAR-LI EL NOM, I ESCRIURE index.html

(Recordeu la diferència entre el nom de l'arxiu i el títol de la pàgina!)

En desar l'arxiu, aquest ja apareix en la finestra Gestor de llocs web i amb el títolcorresponent:

Activitat 7Preferències de la pàgina web: els colors

• Per definir el títol de la pàgina i altrespropietats com ara la metainformacióobrirem el menú Format > Títol de pàginai propietats…

S’obrirà una finestra on podem definir el títol (ocanviar l'existent), l’autor, una descripció de lanostra pàgina i altres opcions com l’idioma, ladirecció de l’escriptura, el conjunt de caràctersi la informació per a usuaris avançats quepuguin fer servir codi HTML que s’inserirà dinsel <head> de la pàgina. Aquest head és lapart que utilitzen els motors dels cercadors perindexar les pàgines. És per això que ladescripció que podem posar ha de ser unextracte acurat del contingut de la nostrapàgina mitjançant paraules clau (keywords enanglès).



• Per definir els colors que utilitzarem per altext i del fons de la pàgina anirem aFormat > Colors de la pàgina i delfons…

S’obrirà la finestra que ens permetrà definir elscolors per defecte del text de la pàgina i delfons i, fins i tot, una imatge.

En el cas del text, tenim el text normal i el textde l'enllaç. Quan un text correspon a un enllaço hipervincle, pot tenir un color diferent del textnormal (per defecte el color d'un enllaç ésblau), i quan s'hi fa un clic, també pot canviarde color).

Per definir qualsevol color (per exemple el fonsde la pàgina) pitjarem sobre el requadre

corresponent:

• Triarem el color simplement clicant sobre qualsevol de les tres paletes de color que hi ha(veure imatge inferior), o bé modificant els valors numèrics: el percentatge de colorVermell, Verd i Blau, que són els colors RGB (—red, green, blue— en anglès), o els valorsde tonalitat, saturació i lluminositat.

L'important és que qualsevol color s'expressa mitjançant un codi hexadecimal de 6 dígits, iaquest és el que apareix dins el codi font HTML de la pàgina.Per exemple, el codi del color vermell és #FF0000, i per al color rosa és #FFC0CB

Finestra de les paletes de color

Recursos addicionals

A http://es.wikipedia.org/wiki/HTML_(colores) hi trobareu més informació sobre els colorsHTML, així com una completa paleta de colors i els seus codis hexadecimals.

http://es.wikipedia.org/wiki/HTML_(colores)



Activitat 8Preferències de la pàgina web: una imatge de fons

• Aneu a la carpeta cursNvu, i de la subcarpeta imatges, copieu l'arxiu leather.jpg a dinsde la supcarpeta imatges del vostre lloc web web del curs. L'arxiu ha d'aparèixer dins dela finestra del Gestor de llocs web.

• Ara anem altra vegada a Format > Colors de lapàgina i del fons… i pitgem el botó Escull unfitxer… Cercarem l'arxiu leather.jpg que estàdins la carpeta imatges, i ho seleccionarem.

L'arxiu ha d'aparèixer ara dins del camp Imatge defons. És molt important que la casella "La URL ésrelativa a la localització de la pàgina" estiguiseleccionada:

leather.jpg

• En clicar D'acord ja apareixerà la imatge leather.jpg com a fons de pàgina dins la finestrade l'àrea d'edició (en mode Normal).

De fet, aquesta imatge només és un quadre de 94x94 píxels. Si s'utilitza com a fons depàgina, el que fa el navegador és repetir-la tantes vegades com sigui necessari per omplirtota la pàgina, com si fos un enrajolat.

Fins que no desem els canvis fets a la nostra pàgina, hi haurà a la pestanya superior, al'esquerra del títol de la pàgina, una petita icona —un disquet vermell— com a advertènciaque la feina no està desada.

Podem desar la feina fent clic a la icona , en el menú Fitxer > Desa o amb les tecles<Ctrl> + S.



Els textos

Els textos hauran d’ésser el pilar bàsic de la informació de la nostra i de qualsevol web. Haurem de tenir encompte una sèrie de regles bàsiques a l’hora de redactar-los:

• En primer lloc, no hem d’abusar d’estils massa recarregats que tan sols aconseguirien desviar l’atenciódel contingut.

• Hem de reservar el subratllat per al hipervincles. Si volem ressaltar els títols o alguna idea, és millorutilitzar la negreta o la cursiva.

• No tots els ordinadors tenen instal·lats els mateixos tipus de lletra (fonts). Per tant hem de defugir de lautilització de fonts especials. Times, Arial o Courier són les fonts més comunes. Utilitzant aquests tipusde lletra ens assegurem que l’aspecte de la nostra pàgina no canviï quan el navegador d’un altreordinador l'obre. També és convenient tenir en compte que hi ha les fonts proporcionals i les noproporcionals. En les proporcionals cada caràcter empra un espai diferent. La lletra "w" utilitza molt mésespai que, per exemple, la lletra "i". D’aquest tipus és la font Times New Roman, mentre que la fontCourier és de tipus no proporcional i per tant, cada caràcter ocupa el mateix espai. Ho veurem millorcomparant aquestes dues frases, escrita cada una d’elles amb una font diferent:

En Times New Roman, la frase queda així de llarga quan l'escrivim (Times New Roman 10)En Courier, la frase queda així de llarga quan l'escrivim (Courier 10)

• Introduir el text, com a altres processadors, es pot fer mitjançant el porta-retalls, és a dir, copiant des d’unaltre programa i finalment aferrant en el document de la nostra web.

Activitat 9Formatar un text

• Amb el Bloc de notes o editor similar, obriu l'arxiu colegi.txt que està a la carpetacursNvu/texts. Seleccioneu tot el text amb el menú Edición > Seleccionar todo, o béamb <Ctrl> + E, o bé seleccionant tot el text amb el botó esquerre del ratolí pitjat.

• Copieu el text al porta-retalls (menú Edición > Copiar, o <Ctrl> + C, o botó dret del ratolí,opció Copiar del menú conceptual).

• Aneu al programa Nvu —encara tenim la pàgina web index.html a la finestra de l'àread'edició— i enganxeu el text abans copiat amb qualsevol d'aquestes ordres:

Amb el menú Edita > Enganxa. Amb <Ctrl> + V. Amb un clic amb el botó dret del ratolí dins la finestra de l'àrea d'edició, opció Enganxa

del menú conceptual.

Amb la icona , si prèviament heu personalitzat la barra d'eines, afegint-hi aquestaicona.

Tindrem així un text pla a dins la nostra pàgina web:



Anem a donar-li un format al text, de manera molt similar a qualsevol processador de text, iutilitzant bàsicament la barra d'eines de format.

Però recordeu que les mateixes operacions es poden fer amb la barra de menús, o segonsquines amb una combinació de tecles. Per exemple, per marcar un text amb negreta, podem:

a) Pitjar el botó de la barra d'eines de format; ob) a la barra de menús, escollir Format > Estil del text > Negreta; oc) pitjar <Ctrl> + B.

També recordeu que qualsevol canvi realitzat a la pàgina web, si no us agrada el resultat,ho podeu desfer, simplement anant al menú Edita > Desfés, o amb <Ctrl> + D.

Comencem:

• Seleccioneu amb el ratolí el text Nom del Col·legi: EL MEU COL·LEGI, i a la llista

desplegable de barra d'eines de format trieu l'opcióEncapçalament 1.

• De la llista desplegable trieu la font del text, en aquest cas Arial.

• Feu un clic sobre el petit quadre negre per definir el color del text. S'obrirà la mateixapaleta de colors que ja hem vist abans. Trieu un color taronja (#FF9900) de la paleta decolors predefinits, i marqueu D'acord. (El quadre blanc és per definir el color del fons dela pàgina, però està invalidat ja que tenim una imatge com a fons.)

• Feu un clic a per a centrar el text.

• Proveu ara a donar format a les línies següents (direcció, telèfon, fax, e-mail), ambencapçalaments 2 i 3, font Arial i distints colors.

• Seleccioneu el text "Benvinguts i benvingudes a la pàgina…". Trieu la font Arial i un color.

Per a la mida del text, proveu a pitjar les icones per disminuir/augmentar la mida.

Activitat 10Inserir una línia horitzontal

• Per afegir una línia horitzontal com a separador entre dos blocs de continguts, heu desituar primer el cursor al lloc corresponent, i anar al menú Insereix > Línia horitzontal.

També es pot utilitzar la icona si prèviament heu personalitzat la barra d'eines.

• Inseriu una línia horitzontal a sota de l'adreça de correu electrònic.

Activitat 11Paràgrafs i salts de línia

Sempre que tinguem escollida l'opció , en pitjar la tecla INTROfarem un salt de línia, sense canviar de paràgraf. (Aquesta operació equival a introduir un codi<br>.)

Si l'opció escollida és , en pitjar la tecla INTRO farem un canvi deparàgraf. (Aquesta operació equival a introduir un codi <p>.)



• En el text "Benvinguts i benvingudes a la pàgina…" situeu el cursor darrera el primer punt.Comproveu que hi ha l'opció Text del cos. Pitgeu la tecla INTRO. El resultat serà:

Benvinguts i benvingudes a la pàgina web del nostre centre.Esperam que trobeu tota la informació necessària per a poderrealitzar els vostres estudis.

• Desfeu aquest canvi. Ara escolliu l'opció Paràgraf, torneu a situar el cursor darrera elprimer punt i pitgeu la tecla INTRO. El resultat serà:

Benvinguts i benvingudes a la pàgina web del nostre centre.

Esperam que trobeu tota la informació necessària per a poderrealitzar els vostres estudis.

Activitat 12Utilització de llistes

Les llistes poden ser no numerades o de vinyetes (l'Nvu les anomena pics), i consisteix aposar un punt negre a l'inici de cada línia; o bé numerades, posant un número a l'inici de cadalínia.• Per fer una llista no numerada, simplement

seleccioneu el text que defineix els objectius peral curs 05/06, i feu un clic a la icona .Les línies de text apareixeran amb una vinyetaque assenyala l'inici de línia.

• Per escriure una llista no numerada, primer calpitjar la icona , que introdueix una primeravinyeta. Escriviu el text i pitgeu INTRO. Tindreuuna segona vinyeta…En acabar la llista, torneu a pitjar .

• Per fer una llista numerada, el procediment éstotalment idèntic a l'anterior, i només cal utilitzarla icona .

• Proveu a fer llistes amb els texts de la pàgina.

Com sempre, també podem donar format a les llistes: font, mida, color, etc.

Què he de fer si vull canviar l'estil de les llistes?

• Amb la llista seleccionada, aneu al menú Format > Propietats de llista…



S'obrirà la finestra de l'esquerra, a on podreu triarel tipus de llista: de pics, numerada o de definició.

♦ Per a la llista de pics, llavors podreu triar l'estilde pic: automàtic, cercle sòlid (•), cercle obert(○)o quadrat sòlid (□).

♦ Per a la llista numerada, llavors podreu triarl'estil de nombres. Aquest poden ser:

1, 2, 3…I, II, III…i, ii, iii…A, B, C…a, b, c…

I a més, indicar-li amb quin número o lletra hade començar la llista.

Activitat 13Altres formats

A la barra d'eines de format, tenim les icones que serveixen per posar negreta,cursiva o subratllat a un text respectivament.

També tenim les icones d'alineament del text, a l'esquerra, centrat, a la dretai justificat. Per defecte, l'alineament a l'esquerra és el que està activat.

I finalment, les icones de sagnat de text: .

Totes aquestes icones estan a la barra d'eines de format ja que són les més utilitzades a l'horade formatar un text. Ara bé, hi ha altres opcions, no tan comunes, que només es poden trobaren el menú Format.

• Feu un recorregut pels diferents submenús de Format. Aprofiteu per acabar de donar estil(fonts, mides, colors, alineament, llistes, etc.) a tot el text de la pàgina index.html.

• Deseu els canvis.

Sovint es pot donar el cas que volguéssim incorporar text d'Internet a la nostra pàgina web,amb l'opció de copiar i enganxar. Ara bé, amb l'ordre Edita > Enganxa també enganxem elsestils i altre codi HTML dins la nostra pàgina. Si el que realment ens interessa és només eltext pla, llavors hem d'utilitzar l'ordre Edita > Enganxa sense formatar.

D'aquesta manera, ens assegurem d'introduir només el text pla, i després ja el podremformatar al nostre estil.

Activitat de reforç 1Comprovar el codi font HTML

Si bé l'objectiu d'aquest curs no és aprendre el llenguatge HTML, sinó utilitzar editors gràficscom l'Nvu per realitzar pàgines web, seria bo que de tant en tant, miréssiu la vostra pàginaweb amb els altres modes d'edició: Marcadors HTML i Codi font HTML.



El desitjable seria comprovar els codis HTML abans i després de fer una operació. Perexemple, si hem introduït aquest text pla, en el mode Normal es veu:

• Doncs anem al mode Marcadors HTML i veurem només l'etiqueta del cos de pàgina<BODY>

• Mentre que en el mode Codi font HTML només hi ha el codi de salt de línia <br>:

• Tornem al mode Normal, seleccionem el text i li donem el format d'encapçalament 1, perdonar-li aparença d'un títol. Obtindrem aquest resultat:

• Si canviem ara al mode Marcadors HTML, hi veurem una nova etiqueta H1:

• Mentre que en el mode Codi font HTML apareix el text entre les etiquetes <h1> i </h1>:

Les imatges

Les imatges a una pàgina web poden tenir dues utilitzacions:

Utilitzar-les com a fons de pàgina. Ho hem vist en les activitats anteriors.

Inserir-les com a il·lustració de manera semblant a un processador de textos.

És important tenir en compte que els estàndards de fitxers d’imatges que admeten els navegadors web sónels GIF, PNG i JPG. Els altres formats no es mostrarien a la nostra pàgina. A més, és recomanable que elfitxer d’imatge que haurem d’emprar, pel que fa a la seva mida, el preparem abans amb un editor d’imatgestipus GIMP (veure l'Annex 1 del Mòdul 2) i així, amb l'Nvu tan sols ho haurem de carregar.

♦ Els GIF tenen menys qualitat en relació amb el seu pes, però permeten les transparències (veure l'Annex2 del Mòdul 2) i les animacions. S’empren més pels dibuixos.

♦ Els JPG i PNG tenen una major qualitat en relació al seu pes, però no permeten ni transparències nianimacions. Són més adequades, en general, per les fotografies.

Recordeu que en les pàgines web, les imatges no queden inserides dins la pàgina (a l'estil d'un documentde Word), sinó que només s'indica a on ha d'anar el navegador a trobar la imatge, i com l'ha de mostrar.



Al final del Mòdul 2, hi ha dos annexes que expliquen el procediment per escalar imatges i per fer imatgesamb fos transparent amb el programa de codi lliure GIMP v.2.

Activitat 14Inserir una imatge

• Aneu a la carpeta cursNvu, i de la subcarpeta imatges, copieul'arxiu colegio.jpg a dins de la supcarpeta imatges del vostrelloc web web del curs.

L'arxiu ha d'aparèixer dins de la finestra del Gestor de llocs web.Si l'arxiu index.html no apareix a la finestra de l'àrea d'edició, obriu-lo fent-hi dos clics a sobre de l'arxiu que hi ha en el Gestor de llocsweb.

Per inserir una imatge a la nostra pàgina web, primer ens hem de situar amb el cursor al llocde la pàgina on vulguem que hi aparegui. Per exemple, podem fer baixar una línia el títol dela pàgina Nom del Col·legi: EL MEU COL·LEG i deixar el cursor a dalt de tot.

• Aneu al menú Insereix > Imatge o bé directament a la icona corresponent de la barra

d'eines de composició:

Així s’obrirà una finestra amb diferents pestanyes:

♦ Ubicació: Mostra la ruta per seleccionar laimatge.

Haurem de fer servir el botó Escull un fitxer…per poder navegar pel nostre ordinador i elegirla imatge que volem inserir: colegio.jpg. A la mateixa finestra tenim l’opció de mostrar untext alternatiu mentre es carrega la imatge i elrètol indicatiu (tooltip) que es mostrarà quanl’usuari passi amb el ratolí per damunt deldocument gràfic. Aquestes opcions no són obligatòries, però sísón aconsellables, ja que així les pàgines tenenuna millor accessibilitat.

En el cas del text alternatiu, seria el que es mostraria en aquells navegadors configurats permostrar text solament o que tinguin deshabilitada l’opció de carregar imatges. A més, l’Nvu,en el cas que es tingui seleccionada l’opció “Text alternatiu” i no s’hagi omplert el camp, faràsaltar una alerta. Si no volem utilitzar text alternatiu haurem de seleccionar l’opció “No utilitzisun text alternatiu”.

Els rètols indicatius (tooltip) són eines d’ajuda visual patentada per Microsoft que funcionenen situar o fer clic damunt d’un element gràfic, mostrant una ajuda addicional a l'usuari. Acontinuació tenim un exemple de tooltip en el mateix programa Nvu. Observeu la finestretad’informació amb fons de color groc que apareix en col·locar el cursor damunt de la iconad’Inserir Imatge:



Quan tenim una imatge seleccionada se’ns mostra a la mateixa finestra una vista preliminaramb la mida de la imatge en píxels.

És molt important que la casella "La URL és relativa a la localització de la pàgina" estiguiseleccionada.

♦ La pestanya Dimensions ens proporciona informació sobre la mida actual. Si volem canviar les dimensions haurem de seleccionar la casella Mida personalitzada i llavorsintroduir els nous valors d'amplada i d'alçada, en píxels o en tant per cent (per exemple, un50% de la finestra implica reduir a la meitat les dimensions de la imatge).

Si modifiquem els valors d'amplada i alçada enpíxels, haurem de tenir marcada la casellaConstrain. Llavors, bastarà modificar només unvalor perquè l'altre s'ajusti de maneraautomàtica per tal de mantenir la proporció dela imatge.

És del tot preferible que, en lloc d'utilitzar aquest sistema per reduir una imatge dedimensions molts grans (i amb una mida d'arxiu molt elevada), primer utilitzem unprograma d'edició digital d'imatges (veure l'Annex 1 del Mòdul 2) per reduir-la, i llavorsmarcar la mida actual.

La raó és que si bé la imatge sortiria reduïda per la pantalla del navegador, aquest primerhauria de descarregar-la d'Internet, endarrerint tot el procés.



♦ A la pestanya Aparença podem seleccionar l’espaiat en píxels d’esquerra a dreta, elsuperior i inferior i un contorn sòlid optatiu.

A la part dreta podem alinear el text a la imatge fent ús d’alguna de les opcions que el menúdesplegable ens mostra. L’Nvu convertirà la nostra opció en el paràmetre ALIGN del codiHTML. Hem d’aclarir que a la base del text és la línia allà on descansen totes les lletres de l’alfabeta excepció d’algunes com la p, la g o la j.

L’aspecte final de l’alineació, segons l’opció triada, es pot veure a la taula següent:

Per què és important que la casella "La URL és relativa a la localització de la pàgina"estigui seleccionada?

Perquè si guardem els enllaços de forma relativa, totes les referències a imatges o altresarxius queden registrats, de forma que es guarda la seva ubicació en el sistema de carpetesrespecte a la posició de la pàgina que conté els enllaços. És indiferent que tota l’estructura decarpetes a què es fa referència es trobi guardada al disc C: o al D: o que es traslladi a un altreordinador on el disc dur té un altre nom. El navegador sempre podrà localitzar els arxius(sempre que la referència es mantingui en la mateixa unitat de disc). Això és molt importantquan es publica una estructura de carpetes o directoris a Internet, o si volem que la nostra webes mostri correctament no només a l’ordinador on l’hem creada, sinó en qualsevol altre.



Activitat d’entrega obligada 2Enviar el resultat de les activitats anteriors

• Una vegada que tingueu la pàgina index.html amb el fons de pàgina, tot el text amb estilsi les llistes corresponents, i la imatge de l'escola a la part superior de la pàgina, proveu avisualitzar-la amb un navegador.

• Per això basta clicar sobre la icona , o amb el menú Fitxer > Navega pàgina. Ala finestra de confirmació cal pitjar el botó Executa l'aplicació, i s'obrirà la pàgina webindex.html dins del navegador que té el vostre ordinador per defecte.

• Si trobeu que tot és correcte, comprimiu la carpeta web del curs amb el programa WinZipo WinRar —si estan instal·lats en el vostre ordinador, basta seleccionar la carpeta ambel botó dret del ratolí, i triar "Add to web del curs.zip" en el cas del WinZip, o bé "Afegeixa web del curs.rar" si és el WinRar.—

Feu la comprovació següent: copieu l'arxiu zip o rar creat en un altre lloc del vostreordinador (per exemple en l'escriptori). Descomprimiu l'arxiu, fent-li clic amb el botó dretdel ratolí i trieu l'opció Extract… o Extreure… En descomprimir-se, s'ha de crear la mateixaestructura d'arxius i carpetes, i si feu dos clics a l'arxiu index.html, aquest s'ha de mostrarcorrectament a dins del navegador.

• Envieu l'arxiu comprimit a la tutoria, seguint les instruccions del Moodle.

Enllaços

Els enllaços, també anomenats hiperenllaços, vincles o links (anglès) que hi ha a les pàgines web enspermeten "navegar" dins de l'estructura d'aquestes, simplement amb un clic del ratolí. Hi ha diferents tipus d'enllaços:

Enllaços que ens permeten passar d'un lloc a l'altre de la mateixa pàgina. Són les anomenades àncores.

Enllaços que ens permeten anar d'una pàgina a una altra pàgina web o arxiu

dins del mateix ordinador. Són els enllaços relatius. o d'un ordinador a un altre a través d'Internet. Són els enllaços absoluts.

Enllaços que ens permeten enviar un missatge de correu electrònic.

Qualsevol element d'una pàgina web (text, imatge, etc.) pot contenir un enllaç d'aquest tipus, anomenatgenèricament hiperenllaç. Abans, els hiperenllaços es reconeixien per què el text de l'enllaç apareixia decolor blau i subratllat. En el cas d'una imatge, hi havia un marc de color blau, tal com s'aprecia a la imatgesegüent:

Si bé ara, amb la utilització d'estils, aquestes regles no són vàlides, i l'única manera per reconèixer un enllaçés situar el cursor a sobre, i veure com aquest és transforma en una mà que assenyala:



Anem a fer una sèrie d'activitats per utilitzar els enllaços.

S'ha d'anomenar i desar una nova pàgina abans d'inserir enllaços, imatges…

El primer que hem de fer quan creem un nou document HTML amb l'Nvu és donar-li un nomi una ubicació dins del nostre lloc web. Així, tots els elements que es vulguin inserir (enllaços,imatges…) tindran referències relatives correctes i no presentaran problemes a l'hora devisualitzar les nostres pàgines en un altre ordinador.

Àncores

Les àncores dins les pàgines web són punts de la mateixa pàgina que són referències per poder traslladar-seràpidament dins ella. Cadascuna de les àncores estarà identificada amb un nom distint. La icona querepresenta una àncora en el mode d’edició Normal o Marcadors HTML no pot ser més explícita: Les àncores o els encapçalaments són especialment útils en aquelles pàgines amb una gran quantitat detext o que tenen un índex inicial.

Activitat 15Posar àncores dins una pàgina web

• Creeu una nova pàgina web dins del nostre lloc web anomenat web del curs. Per això feu

un clic a la icona per obrir directament una pàgina en blanc dins de la finestra del'àrea d'edició.

Si utilitzem el menú Fitxer > Nou, o <Ctrl> + N, ens surt una finestra prèvia, a onseleccionem que volem crear un Document en blanc.

• Abans de començar la feina, anomeneu i deseu la pàgina,

simplement amb la icona (o menú Fitxer > Anomena idesa).Com a títol de la pàgina poseu-hi "un poema molt bonic", i hodeseu amb el nom poema.html dins de la carpeta pagines delnostre lloc web.



• De la carpeta cursNvu/texts trieu l'arxiu de text alcover.txt (és el poema "Record deSóller" d'en Joan Alcover) o espronceda.txt (és el poema "Canción del pirata" de José deEspronceda). Si ho desitgeu, cerqueu per Internet un poema escrit en estrofes. Com aexemple, aquí hem triat el poema de n'Alcover.

• Copieu i enganxeu el text dins la nostra pàgina web poema.html.

• Inseriu una línia davall el nom del poeta i escriviu el text següent:

estrofa 1 - estrofa 2 - estrofa 3 - estrofa 4 - estrofa 5estrofa 6 - estrofa 7 - estrofa 8 - estrofa 9 - estrofa 10

• Practiqueu tot el que hem vist abans referent a donar format a la pàgina:

Un color suau com a fons de pàgina, per exemple #FFFFCC Centrar tot el text de la pàgina. Se selecciona primer tot el text amb Edita > Selecciona-

ho tot o <Ctrl> + A. Una font de lletra per a tot el text, per exemple Verdana. Un encapçalament 1 i color #FF0000 per al títol del poema, encapçalament 2 i color

#009900 per al nom de l'autor, i encapçalament 4 per a les línies estrofa 1, etc. Una imatge a la vora del títol. Per fer-ho, primer copieu la imatge a utilitzar (per exemple

catala.gif de la carpeta cursNvu/imatges) a dins de la carpeta imatges del nostre llocweb.

Una línia horitzontal just abans de l'inici del poema.

Per ara, el resultat s'hauria de ser semblant a:

Comencem amb les àncores. Ja haureu endevinat que el que volem aconseguir és que al ferun clic sobre el text "estrofa 8", per exemple, el navegador ens dugui directament a l'inici del'estrofa 8. Dit d'una altra manera, que el navegador "faci un salt" o "navegui" directament al'estrofa desitjada.

Per fer-ho, seguirem aquestes passes:

• Situeu el cursor davant de la primera línia de la primera estrofa.

• Feu clic a la icona o en el menú Insereix > Àncora…



• S'obri la finestra Propietats d'àncora. Adins del camp Nom de l'àncora hiintroduïm un nom. Aquest nom hauria deser curt, i només compost de lletres i/onúmeros, sense cap símbol (accents, ç,ñ…) o espais en blanc.

En el nostre cas, escriviu e1 i pitgeu elbotó D'acord.

Apareix el símbol de l'àncora a la vora del text:

• Repetiu aquesta operació per a les estrofes restants, amb els noms e2, e3, e4… per a lesàncores restants. Amb aquesta operació s'haurà creat una llista interna d'àncores que araaprofitarem.

• Seleccioneu amb el ratolí el text "estrofa 1":

• Feu un clic a la icona o en el menúInsereix > Hiperenllaç… S'obrirà lafinestra Propietats de l'enllaç. En elcamp Ubicació de l'enllaç, bastaràdesplegar la llista amb els noms de lesàncores i seleccionar la corresponent. Siho volguéssiu fer a mà, caldria escriure#e1.Pitjar el botó D'acord.

A la pàgina web ja apareixerà l'hipervincle en el text:

• Repetiu l'operació per a fer la resta d'hipervincles.

• Deseu la pàgina web. Proveu a obrir-la amb el navegador, utilitzant la icona iproveu els enllaços creats.

Perquè funcionin bé els hipervincles de les darreres estrofes, el que s'ha de fer és afegirlínies en blanc a sota del poema, per deixar així espai suficient.

Enllaços a pàgines web del nostre lloc

Activitat 16Fer un enllaç a una pàgina web del nostre lloc web

• Obriu amb l'Nvu l'arxiu index.html. A la part inferior de la pàgina hi podeu escriure un textsemblant a: Poema utilitzat a la classe de llengua i literatura catalana

• Perquè ressalti la línia, podeu afegir-li a l'inici una petita imatge, tal com led1.gif, quetrobareu a cursNvu/imatges (penseu a copiar-la a la vostra carpeta imatges!). Doneuformat al text.

• Amb el ratolí, seleccioneu la paraula Poema.



• Feu un clic a la icona per obrir la finestra Propietats de l'enllaç. Fixeu-vos com ala part superior apareix el text d'enllaç amb la nostra paraula seleccionada. Com el quevolem és que en fer clic sobre la paraula "Poema" naveguem fins a la pàgina webpoema.html, el que heu de fer és clicar el botó Escull un fitxer… i cercar l'arxiupoema.html que està dins la carpeta pagines del nostre lloc web.

• Convé desplegar tota la finestra Propietats de l'enllaç amb el botó i en el camp Objectiu, marcar la casella L’enllaç és per a ser obert, i de la llistadesplegable triar, de les diverses opcions, en el marc pare:

El correcte seria que els enllaços que apuntessin a altres pàgines del nostre lloc webs’obrissin dins de la mateixa finestra del navegador, i que els enllaços que apuntessin apàgines web d’Internet s’obrissin dins una nova finestra del navegador.

Recursos addicionals

A la finestra Propietats de l'enllaç també apareixen unes opcions anomenades Technoratii Friendship. Aquestes opcions pertanyen al món de la Web 2.0, a on els webs estanorientats a la interacció i a les xarxes socials, i per tant són pàgines que contínuament estanen procés de canvi (per exemple, els blogs). Aquestes opcions no són objecte d’aquest cursi per tant no ens aturarem més en elles.

Més informació a http://es.wikipedia.org/wiki/Web_2.0

Enllaços a arxius o documents del nostre lloc

Activitat 17Fer un enllaç a un arxiu del nostre lloc web

A la pàgina web index.html, afegiu ara el text Calendari escolar 2007-2008 a la part inferior dela pàgina. Podeu donar-li un estil, de manera idèntica a abans.

• Com el que volem pretendre és que aquesta frase sigui un enllaç que obrirà un arxiu ambla informació referent al calendari escolar —aquest arxiu és un BOIB, que està en formatPDF—, i com que aquest arxiu ha d’estar en el nostre lloc web, primer heu de crear unanova carpeta dins del vostre lloc web, utilitzant la finestra del Gestor de llocs web. Peraixò:

http://es.wikipedia.org/wiki/Web_2.0



feu clic a la icona de la finestra del Gestor de llocs web per crear una nova carpeta.Una finestra ens demana el nom del nou directori. Escriviu documents i pitgeu D’acord.Es crearà la carpeta documents.

copieu l’arxiu calendari_escolar_0708_boib.pdf que trobareu a cursNvu/documentsdins de la nova carpeta creada abans.

• Ara seleccioneu el text Calendari escolar 2007-2008 i feu un clic a la icona . A lafinestra Propietats d'enllaç pitgeu el botó Escull un fitxer…, i aneu a la carpetadocuments. No es veu l'arxiu PDF? Fixeu-vos com en el camp inferior Tipo de archivos apareixFitxers HTML. Només marcant l'opció Tots els fitxers podreu seleccionar el PDF.

• Abans de pitjar D'acord, acordeu-vos de seleccionar en el camp Objectiu: L'enllaç és pera ser obert en una nova finestra.

Els enllaços a arxius funcionaran si en el nostre ordinador tenim el programa adient pera aquests tipus d'arxius, ja que el navegador fa una crida al programa en qüestió. En elnostre cas, el document PDF s'obrirà si tenim instal·lat el programa Adobe Reader. Dela mateixa manera, un enllaç a un document Word (*.doc) s'obrirà dins del MS Word.

Enllaços a pàgines d'Internet

Activitat 18Fer un enllaç a una pàgina web d'Internet

• A la pàgina web index.html, afegiu ara el text El Web Educatiu de les Illes Balears a la partinferior de la pàgina. Podeu donar-li un estil, de manera idèntica a abans.

El que volem és que en clicar sobre aquest text, aparegui una nova finestra del navegadoramb la pàgina web del Web Educatiu de les Illes Balears (WEIB), que té la URL següent:http://weib.caib.es/

• Seleccioneu el text, i feu un clic a la icona . A la finestra Propietats d'enllaç haureud'escriure el URL dins del camp Ubicació de l'enllaç:

• Abans de pitjar D'acord, acordeu-vos de seleccionar en el camp Objectiu: L'enllaç és pera ser obert en una nova finestra.

URL vàlid

Aneu en compte a l'hora d'escriure un URL, ja que qualsevol errada farà que l'enllaç nofuncioni. Per exemple, darrera les lletres del protocol http hi ha d'haver obligatòriament els

http://weib.caib.es/



símbols :// (dos punts, barra, barra).

El que es pot fer és copiar la ubicació de l'enllaç d'una pàgina web, i llavors enganxar-ho dinsdel camp Ubicació de l'enllaç. Per això, bé podem copiar l'URL que apareix a la barra denavegació del navegador:

O bé ens podem col·locar damunt un enllaçd'una pàgina web, fer clic amb el botó dret delratolí i triar l'opció Copia la ubicació del'enllaç, si utilitzem el navegador MozillaFirefox.En el navegador Internet Explorer l'opció ésCopiar acceso directo, i per al navegadorOpera és Copiar dirección del enlace.

Enllaços a adreces de correu electrònic

En fer clic sobre un enllaç de correu electrònic, el navegador fa una crida al programa gestor de correuconfigurat en el vostre ordinador i obri una finestra de missatge nou, amb l'adreça de correu electrònic jaescrita en el camp corresponent.

Activitat 19Fer un enllaç a una adreça de correu

• A la pàgina web index.html, seleccioneu el text [email protected]. Copieu-lo amb Edita> Copia, <Ctrl> + C o amb el menú conceptual del botó dret del ratolí.

• Feu un clic a la icona . A la finestra Propietats d'enllaç enganxeu el text dins delcamp Ubicació de l'enllaç (amb <Ctrl> + V o amb el menú conceptual del botó dret delratolí).

• Seleccioneu la casella L'anterior és una adreça de correu, i finalment el botó D'acord.

Activitat 20Comprovació dels enllaços creats

• Una vegada desat l'arxiu index.html, feu clic a la icona per obrir el navegador.

• Comproveu el funcionament correcte dels enllaços creats, així com de l'adreça de correuelectrònic:



Activitat opcional 3Canviar els colors dels enllaços

• Recordeu que amb el menú Format > Colors de la pàgina i del fons… s’obrirà aquestafinestra:

que ens permetrà definir el color dels enllaços. L'opció Text de l'enllaç és el color que tindrà el text abans de fer-hi un clic a sobre. L'opció Text de l'enllaç actiu és el color que tindrà el text en el moment de fer-hi un clic

a sobre. L'opció Text de l'enllaç visitat és el color que tindrà el text una vegada s'hagi visitat la

pàgina o document corresponent a l'enllaç.

Una bona opció és deixar el color blau per al text de l'enllaç, el color vermell per al textde l'enllaç actiu i morat per al text de l'enllaç visitat.

Imatges amb enllaços

Tot el que s'ha explicat fins ara per crear diferent tipus d'enllaços en texts d'una pàgina web, també serveixper crear enllaços en imatges. És a dir, una imatge pot contenir un enllaç cap a una altra pàgina, cap a undocument, una adreça de correu…

Una vegada tenim introduïda una imatge dins la nostra pàgina web, la seleccionem fent un clic a sobre, i a

continuació obrim la finestra Propietats d'imatge, bé amb la icona , o bé amb el menú conceptual del



botó dret del ratolí, opció Propietats d'imatge…

A la finestra oberta, triem la pestanya Enllaç. El que apareix a sota són exactament les mateixes opcionsque ja hem vist a la finestra Propietats d'enllaç.

Activitat de reforç 2Fer que una imatge tingui enllaços

• Copieu els arxius bot-mail.gif, pdf_arxiu.gif i logo_weib.gif de la carpeta cursNvu/imatges a la carpeta imatges del vostre lloc web.

• Inseriu aquestes imatges dins de la pàgina web index.html. A la primera li afegiu un enllaçd'adreça electrònica, a la segona un enllaç cap al document PDF del calendari escolar ia la tercera un enllaç cap al WEIB.



7. LES TAULES

A les pàgines web les taules són elements molt utilitzats. S'utilitzen per presentar dades i, principalment, permaquetar els textos de manera que apareguin dins la pàgina a la ubicació que determinem. Les tauless’organitzen en files i columnes, formant cel·les.

Dins cadascuna de les cel·les podrem introduir textos, imatges i, finsi tot, altres taules que se solen denominar anidades o imbricades.

A la imatge de l'esquerra tenim un exemple de taules anidades: unataula principal, amb contorn visible de color gris, de dues files i unacolumna. Dins cada cel·la (1 i 2) hi ha una taula de color vermell, d'unafila i dues columnes.

Les taules de color vermell són sense contorn, i quan es visualitzala pàgina web, les vores són invisibles. Aquestes són les utilitzadesper maquetar pàgines web.

Per inserir una taula a la nostra pàgina, anirem a la icona de la barra de composició o bé mitjançantla barra de menús, bé mitjançant el menú Taula > Insereix… > Taula, bé mitjançant aquest altre Insereix> Taula… Qualsevol d’aquestes opcions farà aparèixer una finestra anomenada Insereix taula amb trespestanyes:

1 2 3

♦ La pestanya per defecte és l’anomenada Ràpidament i que ens permet, de manera ràpida i amb ajudadel ratolí seleccionar el nombre de cel·les que ha de tenir la nostra taula. En el cas de la imatge (1) s'haseleccionat dues files i dues columnes, és a dir, quatre cel·les.

♦ Si optem per la pestanya Amb precisió, l’aspecte de la finestra serà el de la imatge (2).A aquesta opció podem introduir el nombre de files i columnes manualment, definir l’amplada total dela taula (en total de píxels o en percentatge de la finestra del navegador) i definir el contorn amb la sevaamplada en píxels. Els valors predeterminats són 2 files, 2 columnes, 100 píxels i 1 píxel de contorn. Sivolguéssim que la nostra taula no tingués contorn, aquest atribut el podríem posar a 0. En aquest cas,l’Nvu ens mostrarà els contorns mitjançant línies vermelles que després no són visibles al navegador,tal i com hem vist abans.

♦ Finalment, la pestanya Cel·la, a la imatge (3), ens pot ser útil per definir els atributs de les cel·les.Podrem ajustar l’alineació horitzontal del text (esquerra, centre i dreta), l’alineació vertical (superior, migi inferior), si s’ha d’ajustar o no el text a la cel·la (si optem per ajustar serà el text el que s’adapti a lacel·la i si optem per no ajustar, serà la cel·la la que s’adapti al text en cas que sigui més extens que ella),l’espai entre cel·les que per defecte ve predeterminat en 2 píxels, i la darrera opció que és l’espai interioro marges entre el contorn i el text de cada cel·la.



En totes les finestres apareix l’opció Edició avançada… que ens permetria aplicar atributs addicionals a lataula, mitjançat la introducció o modificació del codi HTML, com en el cas de les imatges.

Control de la taula

Una vegada introduïda una taula dins de la nostra pàgina web,apareixen a les vores de la primera cel·la uns petits símbols, tal

com i .

Aquests símbols es desplacen si fem un clic a dins de les cel·lesrestants (fer un clic dins una cel·la implica que s'ha seleccionatdita cel·la), i serveixen per a:

inserir una columna a l'esquerra || esborrar columna || inserir una columna a la dreta.

inserir una fila superior || esborrar fila || inserir fila inferior.

Selecció de la 1ª columna

Si bé aquestes operacions es poden dur a terme des delmenú Taula > Insereix > (opcions) o Taula > Suprimeix >(opcions). A més, amb el menú Taula > Selecciona > (opcions) podemseleccionar una fila, una columna, una cel·la o tota la taula.La selecció també la podem fer clicant i arrossegant persobre la taula. La selecció es veu de color blau, tal commostra la imatge de l'esquerra.

Una vegada feta una selecció dins de la taula —ja sigui una cel·la tota sola, una fila, unacolumna o la taula sencera—, es poden realitzarnombroses operacions si despleguem el menúconceptual (imatge de la dreta), fent un clic ambel botó dret del ratolí.

La llista d'operacions inclou les ja comentadesabans, referent a inserir / seleccionar / eliminarparts de la taula.

També hi trobem les opcions per retallar, copiar,enganxar i suprimir el contingut de les cel·les,que com ja hem dit, pot ser text, imatges o altrestaules anidades.

Ara bé, una de les opcions més importants ésPropietats de Cel·la de la taula…, tambépresent en el menú Taula > Propietats de la

taula… o simplement fent un clic sobre

La finestra Propietats de la Taula ens mostra dues pestanyes.



♦ A la pestanya Taula hi apareixen les propietatsque afecten a tota la taula.

A la secció Mida hi ha les opcions de modificar elnombre de files i columnes, i l'amplada de la taula, envalor absolut de píxels o en percentatge de la finestradel navegador.

A la secció Espaiat, hi ha les opcions de modificar elcontorn o vores de la taula (recordeu que quan elcontorn=0, les vores són invisibles), així com l'espaiatentre cel·les i la separació entre el contorn de lescel·les i el contingut.

Finalment, es pot decidir l'alineació de la taula respectea la finestra del navegador (a l'esquerra, centrat o a ladreta), i el color de fons.

♦ A la pestanya Cel·les, hi apareixen les propietats que es poden definir a parts d'una taula.

En concret, a la secció Selecció, es pot triar una cel·la,una columna o una fila en concret (la selecció es veua la finestra de l'àrea d'edició), i per dita selecció es potdefinir la Mida: alçada i amplada (en píxels o enpercentatge), alineació del contingut (vertical ihoritzontal), estil de cel·la, ajust del text i color de fons.

Una vegada introduïdes les opcions desitjades, amb elbotó Aplica es veuran els canvis a la finestra de l'àread'edició, sense tancar la finestra, i amb els botonsAnterior i Següent de la secció Selecció es pot"navegar" per les altres parts de la taula.

En l'activitat següent, anem a crear una pàgina web amb una taula, el més semblant possible a l'existent enla carpeta cursNvu/exemple_3. El nom de l'arxiu és horaris_bat.htm.

NOTA: En el WEIB hi ha la mateixa taula, però amb un disseny diferent:http://weib.caib.es/Normativa/Curriculum_IB/batxillerat/estructura/horari_bat_.htm

La taula principal conté 18 files i 3 columnes en total:

http://weib.caib.es/Normativa/Curriculum_IB/batxillerat/estructura/horari_bat_.htm



Activitat 21Crear una taula

• Creeu una pàgina web nova amb la icona . Deseu-la tot d'una amb la icona ,i per títol hi escriviu Horaris del batxillerat. El nom de l'arxiu ha de ser horaris.html i esdesarà dins de la carpeta pagines del vostre lloc web.

• Feu un clic a la icona i seleccioneu la pestanya Amb precisió.

• A la secció Dimensions, i en els campscorresponents, escriviu 18, per a files; 3,per a columnes, i una Amplada de 80. Dela llista desplegable, trieu "% de lafinestra"El contorn ha de ser 1.

NO PITGEU ENCARA D'acord!

• Seleccioneu la pestanya Cel·la, imarqueu Alineació horitzontal: Centre;Alineació vertical: Mig, Ajust del text:Ajusta.Els valors d'espaiat i separació de lescel·les ha de ser 1 i 4

• Pitgeu el botó D'acord.

A la finestra de l'àrea d'edició hi apareix una taula:

• Obriu la finestra Propietats de la taula, be fent un clic a la icona , be anant almenú Taula > Propietats de la taula…, be fent un clic amb el botó dret del ratolí sobrela taula i seleccionant Propietats de cel·la de la taula…

• Aneu a la pestanya Cel·les. A la secció Selecció, trieu "Columna". Observeu com lacolumna de l'esquerra ha quedat seleccionada.



• A la secció Mida, introduïu el valor 50% de la taula per a l'Amplada. La casella deverificació queda automàticament marcada. Pitgeu el botó Aplica.

• Passeu a la columna següent amb el botó: . Fixeu-vos com araqueda seleccionada la columna central.

• Per a aquesta columna, marqueu una amplada d'un 25% de la taula, i pitgeu Aplica.

• Repetiu el procediment per a la tercera columna (també un 25%). Pitgeu Aplica iD'acord.

• Si mireu el codi font HTML podeu intentar relacionar els codis amb les opcions triades:

…Per exemple, la taula està centrada (align="center"), amb una amplada del 80%(width="80%") i un contorn d'1 (border="1").

• Ara ja podeu escriure el text a les caselles corresponents, o copiar i enganxar senseformatar el text. Amb la tecla de tabulació ens podem moure per les distintes cel·les.Tindreu una pàgina tal com:



• Seleccioneu tota la taula, simplement arrossegant el cursor per tota la taula amb el botóesquerre pitjat, i llavors trieu la font Arial. Ara tot el contingut té aquesta font.

Seleccioneu la primera fila amb el cursor, i trieu un encapçalament 3. A continuació obriu elmenú Taula > Color de fons de la taula o la cel·la (o utilitzant el menú conceptual del botódret del ratolí). Marqueu un color blau, per exemple.

En triar un color, apareix el seu valorhexadecimal (a la imatge de l’esquerra és#33CCFF). Si sabem el codi exacte, hopodem substituir.

En el nostre cas, el color hauria de ser#D9FFFF

• Per a les cel·les amb les matèries, seleccioneu-les amb el cursor i trieu el color #FFCCCC

• Per a les cel·les amb les hores, seleccioneu-les amb el cursor i trieu el color #F3F3F3

Per ara, tindreu una taula tal com:

• Poseu el cursor dins de la cel·la amb el contingut “comunes”. Seleccionem nomésaquesta cel·la, anant per exemple a Taula > Selecciona > Cel·la. Una vegadaseleccionada, marquem a la barra de composició negreta i color vermell, utilitzant les

icones i .

• Obriu la finestra Propietats de la Taula, per exemple amb Taula > Propietats de lataula… i aneu a la pestanya Cel·les.

• A l'alineació del contingut, trieu “Esquerra” per a l'alineació horitzontal, i pitgeu D’acord.

• Finalment, seleccioneu TOTA la fila, i aneu al menú Taula > Uneix cel·lesseleccionades (aquesta opció també està en el menú conceptual). Tindreu així aquestresultat:



• Repetiu el procés per a les cel·les amb els continguts: “de modalitat” i “optatives”. Fixeu-vos que les files de les cel·les “tutoria” i “hora de lliure disposició” no s’han d’unir.

• Seleccioneu les dues cel·les que es veuen a la imatge inferior i les uniu.

• A la darrera fila, el text va en negreta; el color per a la cel·la amb el text és #00CCFF i pera les hores és #CCCCCC.

• Deseu l’arxiu. Amb la icona comproveu com es veu en el vostre navegador.

Activitat 22Afegir altres taules

Intentarem que la pàgina horaris.html se sembli més a la pàgina horaris_bat.htm, existent ala carpeta cursNvu/exemple_3.

• Per això, primer copieu les imatges logo_CEC.gif, logo_CIB.gif, stars_anim.gif ipaper10.jpg de la carpeta cursNvu/imatges a la carpeta imatges del vostre lloc web.

• Inseriu un parell de línies blanques a la part superior de la pàgina horaris.html.

• Ara introduïu una taula d’una fila i 3 columnes, de 600 píxels d’amplada, i amb contorn,separació i espaiat a 0. L’alineació del contingut serà centrat i mig.

Apareixerà una taula amb les vores vermelles (sense contorn quan surti pel navegador).

• Deixeu el cursor dins de la primera cel·la, i amb la icona , inseriu la imatgelogo_CEC.gif. A la segona cel·la hi col·loqueu la imatge stars_anim.gif, i logo_CIB.gifa la tercera.

• Entre les dues taules n’hi introduïu una tercera, una taula d’una sola cel·la, centrada, de80% d’amplada, amb contorn 0, espaiat 2 i separació 5.

• El color de fons de la taula ha de ser un verd #009900. El contingut, centrat, és “HORARISDEL BATXILLERAT”, amb font Helvetica, Arial, encapçalament 3 i color blanc.

• Finalment, utilitzeu l’arxiu paper10.jpg per donar un fons de pàgina.

• Veureu com amb un fons de pàgina, les cel·les que abans havíem deixat com a blanques(de fet, per què no havíem seleccionat cap color), ara mostren el fons de pàgina. Per tant,ens cal seleccionar-les i afegir un fons de color blanc #FFFFFF

El resultat, una vegada desat l'arxiu, hauria de ser semblant a:



Activitat 23Posar un enllaç a la pàgina index.html

• Obriu la pàgina index.html, escriviu un text tal com "Horaris del batxillerat 2005/2006" iafegiu-li un enllaç cap a la pàgina horaris.html.



8. ELS FORMULARIS

Els formularis, dins una pàgina web, ens permeten recollir la informació que ens remeten els usuaris. Elsformularis s’utilitzen molt per fer enquestes, encarregar productes en les pàgines de venda electrònica, o cominterfícies de recerca. Els formularis ens permeten recopilar informació de la persona que veu la pàgina,processar-la i respondre les seves demandes.

Els formularis necessiten dos components: d’una banda el codi HTML que generarà l’Nvu i que s’encarregade descriure el formulari i una aplicació al servidor on estigui allotjada la pàgina o una seqüència decomandaments a la mateixa pàgina que s’encarregaran de processar la informació i actuar en conseqüència.Així, doncs, tot aquest procés s’inicia amb la creació dins de la nostra pàgina del formulari d’entrada dedades, amb diferents camps que ens permetran recopilar la informació de l’usuari. Aquestes dades seranenviades al servidor on el programa adient (una base de dades, per exemple) processarà les dades. Tambépodem rebre directament aquestes dades mitjançant el correu electrònic. Hi ha més utilitats dels formularis,però aquesta del correu electrònic és la bàsica i la que utilitzarem en aquest tutorial.

Dins d'un formulari pot haver-hi diferents tipus de camps, tal com es pot apreciar a la imatge inferior:

Els diferents tipus de camp del formulari són:

Camp de text: Recull el text que vulguem que respongui l’usuari, com per exemple, nom, llinatges, etc.Es pot definir la mida del camp i el màxim de caràcters que acceptarà.

Contrasenya: És també un camp de text, però els caràcters que s’introduiran no seran visibles a lafinestra ja que són substituïts per punts.

Quadre de verificació: Permet seleccionar diverses opcions. Per exemple, en un llistat d'hobbies,l’usuari podria marcar-ne més d’un.

Botó de grup: A diferència dels quadres de verificació, serveixen per elegir una opció d’entre vàries demanera excloent. Per exemple, triar un grup d’edats. Si triem que tenim entre 18 i 30 anys, no podemtriar també entre 31 i 50.

Llista de selecció: Les opcions es presenten dins una llista desplegable. Es pot configurar per triar unao vàries opcions.

Àrea de text: És un camp a on es pot introduir quantitats grans de text (per exemple un missatge). Espot configurar les columnes i files del camp, i aquest té la propietat d'scroll o desplaçament vertical.



Fitxer: Gràcies al botó "Examinar…", l'usuari pot adjuntar al formulari un fitxer que estigui dins del seuordinador.

Botó de tramesa: Executa l’acció de trametre el formulari mitjançat l'opció predefinida dins del mateix.

Botó de reinici: Esborra el contingut del formulari.

Camps amagats: Són camps que l’usuari no veu però que trameten informació addicional a qui rebràel correu. Per exemple, amb el valor "REMOTE_HOST", obtindrien l’adreça HTTP des de la qual s’haenviat el correu.

En l'activitat següent, reproduirem un formulari com el que podeu trobar dins la carpeta cursNvu/exemple_6

Activitat 24Elaborar un formulari

• Obriu un full nou amb l'Nvu. Deseu-lo amb el títol "Formulari d'ajuda" i amb el nom d'arxiuformulari.html, dins de la carpeta pagines del vostre lloc web.

• Poseu un color de fons verd (#006600) a la pàgina, i escriviu FORMULARI a la partsuperior. El text hauria d'estar centrat, amb encapçalament 1 i de color blanc perquèressalti.

• Per sota del títol, inseriu una taula d'una fila i una columna, centrada, d'amplada un 90%de la finestra, amb alineació esquerra del text i amb un color de fons groc (#FFFF99).Això és una manera fàcil de diferenciar el formulari de la resta de continguts de la web.

• Col·loqueu el cursor dins la cel·la i feu unclic sobre el petit triangle a la dreta de la

icona Formulari: Es desplegarà el següent menú:

També es pot arribar-hi amb el menúInsereix > Formulari >

• El primer que s'ha de fer ara és definir elsparàmetres del formulari, amb l'opcióDefineix un formulari…



• S'obrirà la finestra Propietats del formulari. En el primer camp haureu d’introduir el nomdel formulari que pot servir per identificar-ho en altres processos; en aquest exemple hohem anomenat formulari1.En el camp URL d’Acció introduireu la vostra adreça de correu precedida pelcomandament mailto: ("mailto:" és l'ordre HTML per definir una adreça de correuelectrònic).En el Mètode heu de seleccionar l'opció POST. Hi ha dos mètodes pel tractament delsformularis: el POST i el GET. El GET manipula els camps en forma de paràmetres quellavors s'adrecen a una base de dades. Amb el POST, el contingut del formulari s'enviaper correu electrònic a l'adreça abans definida.A Codificació triareu l’opció text/plain, perquè el contingut del formulari s'enviï com atext pla, evitant així problemes de configuració.El Marc de destinació es pot deixar en blanc, ja que amb el mètode POST aquestaopció és irrellevant.

Si es fa un clic sobre la icona , s'obri aquesta finestra directament.

• Una vegada pitjat el botó d'Acord,apareixerà dins de la cel·la un requadre delínies verdes intermitents. Tots elscontinguts del formulari s'han de definir dinsdel requadre verd.

• Per comoditat de feina, el millor és introduir tot el text que ha d'acompanyar als campsde formulari, i llavors s'aniran creant aquests camps. Per això, podeu copiar i enganxarsense formatar el text de l'arxiu formulari.txt que trobareu a la carpeta cursNvu/texts.

• El format per a tot el text pot ser tipus de lletra Arial i mida més petita.

Anem a començar a definir els camps dels formularis.

• Poseu el cursor a la dreta del text "Nom i llinatges". Desplegueu el menú del formulari(recordeu el petit triangle a la dreta de la icona) i trieu l'opció Camps del formulari…



• El tipus de camp és Text. En elsParàmetres del camp, escriviu nom per alnom del camp. Això vol dir que si algúescriu pep elias bordoy dins del camp delformulari, el que rebrem nosaltres serànom=pep elias bordoyEl valor inicial pot quedar en blanc. A l'opcióTamany del camp escrivim 50, una llargàriaapropiada per poder escriure un nom illinatges.

• Poseu el cursor davant del text "Home" i repetiu el procés per obrir la finestra Propietatsde camp de formulari.

• El tipus de camp és Botó de grup, ja queles opcions a triar són excloents. En el nomdel grup poseu sexe, i en el valor de camphome. Quan es marqui aquesta opció, elque rebrem nosaltres serà sexe=home.

És fonamental que el nom del grup siguiidèntic per a tots els botons de grup.

• Ara, per posar el botó davant del text "Dona", o bé repetiu el procés, o bé, marqueu elbotó que heu fet abans, ho copieu (Edita > Copia) i ho enganxeu (Edita > Enganxa)davant del text "Dona". Llavors, amb el botó seleccionat, obriu la finestra Propietats decamp de formulari (també ara es pot obrir amb el menú conceptual), i només usquedarà canviar el valor del camp, posant dona en lloc d'home.

Aquestes operacions —posar el cursor allà on volem un camp de formulari, obrir lafinestra Propietats de camp de formulari, així com copiar un botó, enganxar-ho imodificar-li el valor— les utilitzarem per a la resta del formulari, i per tant no les tornarema explicar.

• Per a l'adreça electrònica, el tipus de camptorna a ser Text. El nom del camp serà, perexemple; email.Com a novetat, en el valor inicial podeuposar _@_. Aquest símbol apareixerà jad'inici dins del camp, indicant-li a l'usuarique escrigui el seu nom d'usuari i servidorde correu, avant i darrera de l'arrova.

• Per als estudis cursats, el camp també ésun Botó de grup. El nom del grup seràestudis (i idèntic per a les 4 opcions). Elvalor del camp per a la primera opció potser 1eso. De manera semblant, la resta devalors poden ser: 2eso, FP, bat. Així, si unusuari marca "Batxillerat", el que rebremnosaltres serà estudis=bat.



• Per a la "Informació que sol·licita", el tipusde camp és Quadre de verificació, ja quel'usuari pot triar més d'una opció. El nomdel camp serà informacio (i idèntic per a les3 opcions). Com a valors de camputilitzareu calendari, matricula i llibres,respectivament.

Com el que hem de rebre per correu és un missatge de text pla, és molt recomanableque com a Nom del camp i Valor del camp utilitzem paraules sense accents i altressímbols. Així evitarem rebre missatges de formulari amb una codificació estranya.

• Per als "serveis complementaris", el tipusde camp torna a ser Quadre de verificació,ja que l'usuari pot triar més d'una opció. Elnom del camp ara serà serveis (i idèntic pera les 3 opcions). Com a valors de camputilitzareu menjador, transport i poliesportiu,respectivament.

• Per a la pregunta "Té germans al centre" fareu una llista de selecció. Per això anireu al

menú desplegable de la icona i triareu l'opció Llista de selecció… S'obriràla finestra Selecció de propietats de la llista.

• Com a Nom de la llista, escriviu germans. Si voleu que dins del camp de la llista esvegin totes les opcions, en lloc de desplegar-les, poseu en Alçada un número idèntic alnúmero d'opcions de la llista. Si voleu poder fer selecció múltipla, marqueu la casella. Enel nostre cas ho deixem en blanc.



• Pitgeu el botó Afegeix opció. Ara a la part inferior apareixen els camps Text i Valor.Escriviu en el camp Text la primera opció: no. Veureu com també queda copiat en elcamp Valor.

• Cada vegada pitgeu Afegeix opció iescriviu les opcions: "si, 1" "si, 2" "si, mésde 2". Us quedarà una llista tal com laimatge de la dreta:

• Per a la pregunta “Té interès en fer unprograma internacional? Si No”, torneu aposar un Botó de grup. El nom del grupserà programainternacional, i els valors delcamp seran, naturalment, si i no. Aquí la novetat és que el botó de grup “Si”ja està inicialment seleccionat i es mostraràd’aquesta manera en el formulari:

• Si estam disposats a fer un programainternacional, harem de triar-ho d’una llistadesplegable. Creeu una llista de selecció,amb el nom de llista programes, i amb lesopcions: Comenius 2.2.C, Comenius 2.2.B,Grundtvig 3, Grundtvig 4, Leonardo da Vincii Arió. La primera opció pot està inicialmentseleccionada.

• Per a incloure una àrea de text anireu almenú desplegable de la icona Formulari itriareu l'opció Àrea de text… A la finestraPropietats d’Àrea de text escriureu infocom a Nom del camp. El camp tindrà 4 filesi 40 columnes, una mida raonable per adeixar un missatge. Si aquest passa de les4 línies, el camp col·locarà un scroll vertical.

• Ara situeu el cursor al final del formulari(però sense sortir del requadre verd!).Obriu la finestra Propietats de camp deformulari, i trieu l’opció Botó de tramesa.En els dos paràmetres del camp, escriviuEnvia. Aquest serà el botó que lliurarà el contingutdel formulari per correu electrònic.



• Finalment, feu el mateix per al Botó dereinici, amb el valor Esborra per ambdóscamps.Aquest botó ens servirà per esborrar tot elque hem introduït dins dels camps delformulari.

Sempre convé que en un formulari hi hagi aquests dos botons:

• Deseu el formulari. Utilitzeu la icona per veure-ho amb el navegador. Comproveuque si empleneu aquest formulari i pitgeu el botó Envia (heu de tenir connexió aInternet), s'envia un missatge de correu amb el contingut introduït a les caselles del

formulari a la direcció indicada a , que per fer les proves convéque sigui la vostra.

Per a un formulari com el nostre, basat en el mètode POST, d’enviament d’un missatge de correu electrònic,el que succeeix quan s’han emplenat els camps, tal com:

i es pitja el botó Envia, en aquest moment el navegador fa una crida al programa gestor de correu del nostreordinador, i es genera un missatge de correu electrònic, ja amb l’adreça electrònica definida dins delformulari, i amb el contingut dels camps, escrits en text pla, tal com es veu a la imatge següent:



Activitat 24Posar un enllaç a la pàgina index.html

• Obriu la pàgina index.html, escriviu un text tal com "Sol·licitud d'Informació" i afegiu-li unenllaç cap a la pàgina formulari.html.

Activitat d’entrega obligada 3Enviar el resultat de les activitats anteriors

• Una vegada acabades les activitats anteriors, comproveu que els enllaços que teniu a lapàgina index.html obrin les pàgines poema.html, horaris.html, formulari.html, el calendariescolar (en PDF) i el WEIB.

• Podeu consultar un exemple dins la carpeta cursNvu/exemple_4.

• Si trobeu que tot és correcte, comprimiu la carpeta web del curs i envieu l'arxiu comprimita la tutoria, seguint les instruccions del Moodle.



Per acabar aquest mòdul, farem un ràpid repàs per tot el vist fins ara, amb l'activitat d'entrega obligadasegüent:

Activitat d’entrega obligada 4Elaborar un treball per als nostres alumnes

Aquesta activitat consisteix a fer 4 pàgines web, destinades al nostre alumnat. Es tractarà depresentar a un personatge important de la vostra assignatura.

En concret, hi haurà:

a) una pàgina d’inici o portada.b) una biografia del personatge en qüestió.c) una obra escrita, un experiment, una demostració, un descobriment, una llei, etc. que

pertanyi o faci referència al nostre personatge.d) un qüestionari referent al que es pugui llegir a les pàgines b) i c). Les preguntes del

qüestionari han d'estar recollides en forma d'un formulari.

Penseu en les possibilitats de realitzar preguntes tipus test (vertader/fals), d’escolliropcions (marcant caselles de verificació o d’una llista desplegable), d’omplir paraulesque falten...

Les 4 pàgines s'han de realitzar seguint totes les pautes indicades a continuació. Seriaconvenient que creéssiu un lloc web nou dins de l'Nvu per a aquest treball, per exemple, ambel nom "Treball del Seminari".

Abans de començar, llegiu els suggeriments de la pàgina següent.

A) Pàgina d’inici

El nom de la pàgina ha de ser treball.html, i el seu títol Treball del Seminari. Hi afegireu unfons a la pàgina mitjançant la icona clouds.gif, que trobareu a la carpeta cursNvu/imatges.

A l'inici de la pàgina hi haurà 6 línies, centrades, amb tipus de lletra Tahoma i ambencapçalament de l’1 al 6. Podeu triar els colors.

Amb encapçalament 1: Nom de l’assignatura Amb encapçalament 2: Nom del treball Amb encapçalament 3: el vostre nom Amb encapçalament 4: "Curs d’edició de pàgines web" Amb encapçalament 5: Nom del vostre centre escolar Amb encapçalament 6: Data

A sota hi haurà una taula, de 3 files i 2 columnes, centrada, amplada 80% de la finestra, iamb contorn, separació i espaiat de 2 píxels.

la primera columna ha de tenir un 15% de la taula, amb alineació del contingut: migi centre. Color del fons de les cel·les: #F0FCF0

la segona columna ha de tenir un 85% de la taula, amb alineació del contingut: migi esquerra. Color del fons de les cel·les: #FFFF99

El contingut de la taula serà:

1 – Biografia de ....2 – el nom de l’obra, experiment, descobriment, etc...3 – Qüestionari

Els números han d'anar en negreta. Els títols seran enllaços a les pàgines webrespectives. El tipus de lletra ha de ser Times New Roman.



B) Biografia

El nom de la pàgina ha de ser treball1.html i el seu títol “Biografia de...” Hi afegireu el colorde fons #FFDDA8

Incloureu una taula, de 2 files i 1 columna, amplada 100% de la finestra, i amb contorn,espaiat i separació de 3 píxels.

A la primera fila hi posareu el nom del personatge, amb tipus de lletra Arial, centrat,color vermell i mida “més gran”. El fons de la cel·la ha de ser blanc.

A la segona fila, primer hi posareu el color de fons #FFFFCC. Llavors hi afegireuuna taula anidada [*], amb les propietats següents: 1 fila, 2 columnes, amplada 100% de la cel·la (ja que està dins una cel·la), contorn:0píxels, espaiat i separació: 2 píxels

♦ dins la primera columna, que tindrà un 20% d'amplada i alineació de contingutsuperior i centre, hi afegireu una imatge del personatge, obtinguda d’Internet. Sila imatge és gran, la podeu reduir modificant les dimensions de la imatge (imatge> propietats d'imatge > dimensions > mida personalitzada), però seria mésconvenient utilitzar un programa d'edició digital d'imatges per reduir-la (vegeul'Annex 1 del Mòdul 2)

♦ a la segona columna, que tindrà un 80% d'amplada i alineació de contingut:superior i centre, hi afegireu un text de la biografia del personatge, obtingudad'Internet, copiada i enganxada sense formatar. El tipus de lletra ha de ser Arial,mida petita.

Finalment, a sota de la taula, hi ha d'haver una llista no ordenada, de l'estil:

anar a l'inici anar al text anar al qüestionari

Cada un d'ells serà un enllaç cap a la pàgina en qüestió, per així poder facilitar la navegacióentre les quatre pàgines del treball.

C) Text

El nom de la pàgina ha de ser treball2.html i el seu títol “Obra, experiment…" Repetireu totesles passes que en l'apartat B), fins arribar al punt a on s'ha d'inserir una taula anidada [*]. Arala taula a inserir serà de 2 files i 1 columna, amplada 100% de la cel·la (ja que està dins unacel·la), contorn:0 píxels, espaiat i separació: 2 píxels

♦ A la primera fila hi afegireu una imatge, centrada, representativa de l'obra escrita,experiment, demostració, descobriment, llei, etc. Es reduirà si cal.

♦ a la segona fila hi afegireu el text explicatiu. El tipus de lletra ha de ser Verdana,mida petita.

Finalment, a sota de la taula, hi ha d'haver els enllaços de navegació: anar a l'inici anar a la biografia anar al qüestionari

D) Qüestionari

El nom de la pàgina ha de ser treball3.html i el seu títol “Qüestionari”. Repetireu totes lespasses que en l'apartat B), fins a tenir una taula de 2 files i 1 columna.



A la primera fila hi posareu el text QÜESTIONARI, amb tipus de lletra Arial, centrat,color vermell i mida “més gran”. El fons de la cel·la ha de ser blanc.

A la segona fila, a dins de la cel·la hi inserireu un formulari, amb una bateria depreguntes i/o exercicis que els alumnes haurien de contestar, ja sigui omplint unquadre de text, seleccionant una o vàries respostes, escrivint una resposta dins unaàrea de text, etc.

El formulari hauria d'estar configurar per ser tramés a la vostra adreça de correu.

A l'igual que les altres pàgines, a sota de la taula, hi ha d'haver els enllaços de navegació: anar a l'inici anar a la biografia anar al text

Suggeriments:

Introduir a sota dels texts els enllaços cap a les pàgines d'Internet a on heu trobat lainformació.

Les imatges també poden ser enllaços cap al document original. Estructurar el vostre lloc web: la pàgina treball.htm hauria d'estar a l'arrel del lloc web,

i les altres pàgines (treball1, treball2 i treball3.html) a dins d'una supcarpeta anomenadapagines, així com les imatges utilitzades a dins d'una segona supcarpeta anomenadaimatges.

Exemple de lloc web estructurat

• Podeu consultar un exemple dins la carpeta cursNvu/exemple_8.

• Envieu un arxiu comprimit amb el vostre lloc web a la tutoria, seguint les instruccions delMoodle.

Curs de disseny de pàgines web amb Nvu (Mòdul...

Documents

Transcript of Curs de disseny de pàgines web amb Nvu (Mòdul...