Les etiquetes serveixen per classificar o per separar els diferents recursos dins un tema o setmana, per destacar algun punt important o, simplement, per donar una aparença més clara al curs. Per tant, i en puresa, no són recursos formatius sinó merament d’ordenació.

Això sí, es poden formatar amb l’ajut de l’editor HTML de Moodle de manera que tinguin imatges, recursos multimèdia o, simplement, un tipus de lletra, de color o de mida més gran o diferent de la resta de recursos.

Creació d’un recurs Etiqueta

1. Activeu l’edició del curs prement el botó Activa l’edició que trobareu a la part superior dreta o, també, des del bloc Administració.
2. Escolliu el punt on voleu inserir l’etiqueta: a la part comuna del curs, o bé a la setmana o tema corresponent.
3. Aneu al menú Afegeix un recurs i desplegueu-lo.
4. Trieu l’opció Insereix una etiqueta:
   
5. Aquesta acció fa que s’obri la pàgina d’edició de l’etiqueta.
6. Escriviu el Text de l’etiqueta. Podeu utilitzar escriure normalment i en acabat donar-li el format desitjat. També podeu afegir-hi una imatge, so o un vídeo, tal com veureu en les seccions següents, on estudiareu l’editor HTML de Moodle.
   
7. Decidiu, finalment, si la voleu mostrar ara mateix o deixar-la de moment oculta i fer-la visible més endavant a través de les opcions Mostra o Oculta del desplegable Visible.
   
8. Premeu el botó Desa el canvis per fer-los permanents.
   
9. Ara s’obre la pàgina del curs amb l’etiqueta acabada de crear:
   
   Observeu, tanmateix, que està situada per sota els altres recursos. Mitjançant les icones d’edició del recurs, que es veurà tot seguit, podeu canviar-la de lloc.

Un dels avantatges de Moodle sobre altres entorns virtuals és l’enorme facilitat que té a l’hora de modificar els continguts. Només cal prémer el botó

que trobareu a la part superior dreta de la pàgina del curs.

Aquesta acció fa que aparegui la pàgina amb totes les icones d’edició de blocs i, també, de recursos i activitats.

Les icones d’edició dels recursos són aquestes:

	Mou a la dreta el recurs. Es pot utilitzar més d’una vegada i obtenir diferents sagnats.
	Mou a l’esquerra el recurs. Només es visualitza quan, prèviament, s’ha desplaçat a la dreta.
	Mou el recurs a un altre punt del curs, sigui un altre tema o setmana, sigui més amunt o avall dins del mateix bloc.
	Actualitza el recurs. Obre la pàgina d’edició i permet editar-lo de nou.
	Suprimeix el recurs. Quan es prem apareix una pantalla per assegurar la supressió, perquè és un procés irreversible.
	Oculta el recurs de la vista dels estudiants; el professorat, però, el continua veient d’un color més clar.
	Mostra el recurs als estudiants. Només és visible en els recursos ocults.

Canviar la ubicació d’un recurs etiqueta

1. Activeu l’edició del curs prement el botó Activa l’edició que trobareu a la part superior dreta o, també, des del bloc Administració.
2. Escolliu l’etiqueta o recurs que voleu moure. Aquí seguirem l’exemple de l’etiqueta creada en la secció anterior. Cliqueu sobre la icona Mou
3. Veureu que ara, a la pàgina del curs, apareixen totes les possibles destinacions indicades per una fletxa que assenyala un rectangle:
   
   Feu clic sobre el lloc desitjat; a l’exemple, al principi del mòdul 2:
   
4. A continuació ja veureu l’etiqueta situada al lloc triat.
   Tanmateix, si encara no resteu satisfets podeu tornar-la a moure amb l’ajut de les icones d’edició.

És una eina de molt fàcil ús que Moodle posa a l’abast de tots els usuaris, professorat i estudiants, per tal que puguin millorar força l’aspecte del seus escrits. Aquesta millora passa per afegir format de pàgina web al text, cosa que permet des de canviar el tipus de lletra o el color, fins a inserir imatges o recursos multimèdia.

El funcionament de l’editor HTML és molt senzill i, en la majoria dels casos, funciona simplement seleccionant el text i prement el botó corresponent.

Els botons de l’editor són els següents:

• botons de tipus de lletra:

	desplegable per canviar de tipus de lletra
	desplegable per canviar la mida de la lletra
	desplegable per canviar el format del paràgraf

• botons per formatar text:

	lletra negreta
	lletra cursiva
	text subratllat
	text tatxat
	superíndex, exponent
	subíndex

• botons d’edició de text:

	copia el text seleccionat
	retalla el text seleccionat
	enganxa
	neteja el codi HTML de text enganxat des de Word
	desfà la darrera acció
	refà la darrera acció
	acoloreix el text seleccionat
	acoloreix el fons del text seleccionat
	cerca i reemplaça

• botons de paràgraf:

	alinea a l’esquerra el paràgraf
	centra el paràgraf
	alinea a la dreta el paràgraf
	justifica el paràgraf
	sentit de l’escriptura d’esquerra a dreta
	sentit de l’escriptura de dreta a esquerra
	numera el paràgraf
	insereix una vinyeta al paràgraf
	disminueix sagnat del paràgraf
	augmenta sagnat del paràgraf

• botons HTML:

	insereix una línia horitzontal
	insereix una àncora al text seleccionat
	insereix un enllaç al text seleccionat
	elimina l’enllaç del text seleccionat
	impedeix la inserció d’enllaços automàtics
	insereix una imatge
	insereix una taula
	insereix una emoticona
	insereix un caràcter especial
	canvia a vista de codi HTML
	canvia a editor ampliat

El llenguatge HTML és el llenguatge de les pàgines web i es caracteritza per la possibilitat de formatar text, d’inserir-hi enllaços a altres pàgines web i, finalment, de visualitzar imatges, escoltar sons o veure fitxers multimèdia.

En aquesta segona pràctica veureu les accions més bàsiques, les que podeu fer directament a través de l’editor HTML de Moodle. I a la pràctica 4 veureu les opcions més avançades, com ara la inserció de so, vídeo i multimèdia.

Mireu en aquesta animació com n’és, de fàcil, formatar el text amb l’editor HTML:

La inserció d’enllaços també és molt senzilla amb l’editor HTML:

Us podeu trobar amb dos casos diferents a l’hora d’inserir una imatge en un punt del text HTML que esteu editant:

1. Teniu el fitxer d’imatge a la carpeta de fitxers del curs i només heu d’enllaçar-la. Si encara no l’heu pujada des de la funcionalitat Fitxers del bloc Administració però la teniu ja al vostre ordinador, des de la finestra d’inserció d’imatges tindreu l’opció de pujar-la.
2. La imatge es troba en un altre lloc web però teniu la URL i la voleu enllaçar de manera que, sense tenir-la desada, aparegui al vostre text.

En qualsevol dels casos, tanmateix, ho fareu a través de la icona d’inserció d’imatges de l’editor HTML.

Inserir una imatge desada

Quan disposeu de diferents fitxers d’imatges que vulgueu enllaçar des d’algun recurs (etiqueta, pàgina web, etc.) el més recomanable és tenir-los agrupats en una carpeta d’imatges que haureu creat dins la carpeta de fitxers del curs. Repasseu la pràctica 1 d’aquest mateix mòdul 2 per veure com es creen carpetes i s’hi pugen fitxers.

Partirem del supòsit que teniu un fitxer d’imatge ADN_animation.gif dins el directori imatges de la carpeta de fitxers del curs:

1. Activeu l’edició del curs, cliqueu el botó Actualitza del recurs etiqueta i entrareu a la pàgina d’actualització:
2. Situeu el cursor al punt del text on voleu que aparegui la imatge i cliqueu sobre la icona
3. Veureu que s’obre una finestreta emergent que us permet inserir la imatge:
4. Heu de veure el fitxer d’imatge a la finestreta Explorador de fitxers de la part esquerra, però com que és dins la carpeta imatges, primer cal clicar sobre el nom d’aquesta carpeta per obrir-la i veure’l:
5. Quan feu clic sobre el nom de la imatge, en veureu la Visualització prèvia a la finestreta de la dreta i us apareixerà escrita la ruta on es troba el fitxer en la primera casella, la que diu URL de la imatge.
6. Si esteu d’acord a escollir aquesta imatge, escriviu un Text alternatiu a la casella corresponent (ADN a l’exemple) i premeu el botó D’acord.
   Aquest text alternatiu es mostra al lloc que ocuparia la imatge quan aquesta no s’està descarregant:
   
   També apareix dins un requadret groc emergent quan deixem uns instants el cursor sobre la imatge:
   
7. Ara torneu a ser a la pàgina d’actualització del recurs, però veieu la imatge inserida al lloc triat:
8. Quan acabeu l’edició del recurs Etiqueta, deseu els canvis i torneu al curs, veureu la imatge al lloc on l’heu inserida:

Inserir una imatge d’una web externa

A vegades pot ser interessant enllaçar a una imatge d’una web externa perquè aquesta va canviant i actualitzant-se molt freqüentment i no podem acudir a la web a descarregar-la cada cop que canvia. Pensem en un mapa meteorològic que va actualitzant-se cada 8 hores, però sempre sota el mateix nom de fitxer d’imatge.

Per exemple, el mapa de la previsió del temps per l’endemà de meteocat té com a nom dema.jpg, però lògicament no mostra sempre la mateixa imatge. En aquest cas, si volem inserir el mapa canviant del pronòstic en un recurs, hem d’enllaçar amb la imatge i no tenir-la desada.

Per saber exactament l’adreça de la imatge el millor és deixar que sigui el mateix navegador, el Firefox en l’exemple següent, qui la recordi. Podeu seguir aquestes passes:

1. Visiteu el lloc on es troba la imatge. Per exemple, la pàgina de **meteocat** on hi ha els mapes de previsions
2. Situeu el cursor sobre la imatge desitjada i feu-hi però amb el botó dret del ratolí. Això fa que aparegui un menú contextual amb diferents opcions.
   L’opció que us interessa ara, i que heu de triar, és Copia la ubicació de la imatge perquè el que fa és copiar a la memòria de l’ordinador l’adreça URL exacta de la imatge, per molt llarga o complicada que sigui.
3. En el moment d’escriure aquesta adreça haureu de fer una acció similar. Situeu el cursor sobre el lloc on voleu bolcar aquesta adreça URL i premeu el botó dret del ratolí. Però del menú contextual que us pareixerà ara haureu de triar l’opció Enganxa:
   

Aquest procés us serà força útil per inserir la imatge canviant al recurs:

1. Activeu l’edició del curs, cliqueu el botó Actualitza del recurs etiqueta i entrareu a la pàgina d’actualització:
2. Situeu el cursor al punt del text on voleu que aparegui la imatge canviant i cliqueu sobre la icona
3. Veureu que s’obre la finestreta emergent que us permet inserir la imatge:
4. En el cas actual no heu de triar cap imatge dels fitxers del curs, sinó escriure l’adreça URL on es troba a la casella URL de la imatge.
   Si heu seguit el procediment anterior, aquesta adreça ha de trobar-se a la memòria de l’ordinador. Per tant, situeu el cursor a la casella URL de la imatge, premeu el botó DRET, trieu Enganxa i veureu que apareix escrita l’adreça URL completa:
   
5. Abans d’acabar d’inserir la imatge, val la pena omplir els detalls, començant pel Text alternatiu.
6. Podeu decidir quina alineació respecte al text que l’envolta tindrà la imatge triant-la del desplegable Alineació
   
   També podeu escriure un valor diferent de 0 a Gruix del contorn, si voleu un marc al voltant de la imatge.
7. Des del requadre Espaiament podeu determinar la distància de la imatge al text:
   
   Escriviu un valor diferent de 0, per exemple 5, per separar 5 píxela la imatge del text.
8. Des del requadre Mida podeu imposar una mida diferent de la que té la imatge.
   
   Cal tenir en compte, però, que si només canvieu un dels valors, l’amplada però no l’alçada per exemple, podeu distorsionar la imatge.
   El millor és conèixer la mida “real” de la imatge i fer-ne la reducció o ampliació de manera proporcional. Aneu a la pàgina web on es troba la imatge original, feu-hi clic amb el botó dret del ratolí i trieu l’opció Propietats:
   
   Amb aquestes dades ja podeu fer els càlculs necessaris.
9. Finalment, premeu el botó D’acord per acabar el procés. Veureu que la imatge procedent de l’altra pàgina web es mostra a la vostra: