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:

Inserir un enllaç

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.

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, tal i com hem vist a la pàgina anterior.

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:
   

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: