Curs: Obtenció, edició i utilització d'imatges digitals

Activitat presencial 2: publicació d'imatges

Pas 1: Introducció

Una pàgina web és un document escrit en llenguatge HTML. Per aquesta activitat no cal que comprenem aquest llenguatge en profunditat, però si com un document HTML incorpora una imatge i així saber-la publicar o actualitzar.

Per a generar o modificar un document html podem utilitzar programari d'edició de pàgines web o simplement un processador bàsic de text. Per poder veure el codi font d'aquest arxiu, cal que executeu des del vostre navegador l'opció de Veure>Codi Font. Aquesta nova finestra és un processador bàsic de codi html que us mostra el codi de la pàgina web. Els navegadors interpreten aquest codi mostrant-lo en la finestra del navegador. Per a facilitar-vos la comprensió d'aquest codi, s'han insertat uns comentaris que s'inicien amb l'etiqueta  i us ajudaran a situar-vos en el lloc precís.

Cal saber que les imatges a les pàgines web no s'inserten a dins de l'arxiu, sinó que s'especifica el camí o ruta que ha de seguir el navegador per a trobar el fitxer de la imatge des del document html. La imatge es publica conjuntament amb l'arxiu html però en fitxers separats. És a dir, que el fitxer de la imatge és independent del document HTML. Recordeu que els navegadors només accepten imatges en format GIF, JPG i PNG.

Es realitza mitjançant l'etiqueta <IMG>. Aquesta és l'ordre perquè el navegador mostri la imatge especificada dins l'atribut SRC que indica la ruta i el nom del fitxer de la imatge que ha de mostrar.

Situeu-vos a la línea del codi sota el comentari:  Veureu la següent instrucció: <IMG SRC="imatge.jpg"> Aquesta instrucció mostrarà la imatge especificada "imatge.jpg" a la finestra del navegador. La imatge es mostra a continuació.

Fixeu-vos en el directori que heu descarregat per a realitzar aquesta activitat. Hi ha dos arxius, un document HTML anomenat activititat.htm i el fitxer de la imatge anomenat imatge.jpg. La instrucció que heu vist, ordena al navegador que mostri l'arxiu especificat. Si el nom de l'arxiu és incorrecte o el fitxer de la imatge no està al mateix directori especificat, la imatge no es mostrarà.

Quan es publica una pàgina web, es publiquen els documents html i els arxius de les imatges. Per tant si substituim el fitxer de la imatge per un altre amb el mateix nom, es canviarà la imatge a mostrar sense haver de modificar el codi font de la pàgina web.

PAS 2: Actualització de la imatge

Tanqueu el navegador.

Utilitzeu el GIMP per a crear un arxiu d'imatge optimitzat per a web en JPG. Deseu-lo com a imatge.jpg i substituiu la imatge del directori de l'activitat.

Executeu l'arxiu activitat.htm i s'obrirà amb el navegador.

Comproveu que es mostra la imatge que heu actualitzat. Tanqueu el navegador.

Comprimiu el directori amb el document html i la imatge i envieu-la al tutor o tutora com a activitatpresencial2-1.zip.

PAS 3: Substitució de la imatge

Utilitzeu el GIMP per a crear un arxiu d'imatge en JPG. Anomeneu-lo com a activitat.jpg i deseu-lo al directori de l'activitat.

Obriu el fitxer activitat.htm. Executeu l'ordre veure>codi font.

Substituiu a la instrucció d'inserció de la imatge el nom de l'arxiu imatge.jpg per el nou: activitat.jpg La nova instrucció ha de quedar així:

<IMG SRC="activitat.jpg">

Deseu el document i tanqueu la finestra del codi font. Actualitzeu la pàgina en el navegador i comproveu que us mostra la nova imatge. Tanqueu el navegador.

Comprimiu el directori amb el document html (activitat.htm) i la imatge (activitat.jpg) i envieu-la al vostre tutor o tutora com a activitatpresencial2-2.zip

Finalització de l'activitat.

Fins aquí la segona activitat presencial. Recordeu-vos d'enviar els fitxers necessaris al vostre tutor o tutora. Rebreu resposta de l'activitat realitzada en els propers dies.