CREACIÓ DE PÀGINES WEB AMB KOMPO
1. Formats de text

 

Els objectius de la primera lliçó són:

Activitat 1.1 Aplicar formats

Per començar a utilitzar Kompozer, anem a conèixer els diferents formats que podem aplicar al text d’un document. A la segona secció realitzarem una activitat que consistirà en aplicar aquests formats a un text.

Els formats amb què es pot transformar el text d’una pàgina web no són tants com els que té un bon processador de textos, ja que el llenguatge HTML no té elements avançats de disseny. No obstant això, en la lliçó 7 veurem que les fulles d’estils ens permeten un major refinament en el format i el disseny general de la pàgina. De tota manera, programes com Kompozer tenen les suficients eines per aconseguir una bona presentació del text i un disseny consistent, el que es pot aconseguir polsant en els següents botons i menús desplegables de les barres de format:

  1. Amb el primer menú desplegable podem donar format als paràgrafs i als textos dels títols, que compten amb sis encapçalats predeterminats.
     

  2. Al menú desplegable on apareix la Amplària variable, es pot triar la amplada del text i el tipus de lletra, però de moment no convé canviar-lo, o si ho fem, el millor és triar aquells tipus de lletra que es troben instal·lats en la major part dels ordinadors de defecte, que solen ser els tipus Times New Roman i Arial, entre d’altres pocs. Aquest escàs control sobre la tipografia es veurà pal·liat per les fulles d’estils, com ja veurem en la lliçó 7.
     

  3. A la barra superior, tenim vuit botons que corresponen al títol que apareix si es col·loca damunt d’ells el cursor del ratolí:
     

    1. Emfatitzar, que és similar a la lletra cursiva.
       

    2. Gran èmfasi, que és similar a la lletra negreta.
       

    3. Llista numerada, que serveix per numerar ítems.
       

    4. Llista de vinyetes, que tenen diverses formes segons s’indiqui en el seu codi.
       

    5. Sagnar text, que s’indenta el text, és a dir, redueix l’amplada de la línia del text.
       

    6. Dessagnar text, que el col·loca amb els mateixos marges que la resta del text.
       

    7. Terme i descripció de la definició, que és un tipus de llista que s’utilitza per definir termes, col·locant en una línia el terme definit i en la següent, la definicicón.
       

  4. A la barra inferior hi ha altres botons de format:
     

    1. Els dos primers redueixen o augmenten en tipus de lletra, però ja hem dit que això és millor fer-ho amb fulles d’estil.
       

    2. Els tres següents botons serveixen per fer la lletra negreta o cursiva, i per subratllar text, encara que això últim no és gens aconsellable, ja que es pot confondre amb el text subratllat dels enllaços.
       

    3. Finalment, tenim els botons de alineació del text : a l’esquerra, centrat, a la dreta i justificat. Aquest últim és el text alineat tant a esquerra com a dreta, igual que en els llibres, però no és aconsellable el seu ús, perquè a la web no hi ha separació sil·làbica i pot quedar molt espai entre paraules, el que perjudica la lectura.

Per aplicar els formats dels botons cal marcar o destacar el text que vulguem canviar. Per a això, es col·loca el punter del ratolí al principi o al final del text, es prem el botó esquerre del ratolí i, sense deixar de prémer, s’arrossega el punter sobre el text escollit. Al final, es deixa anar el botó esquerre del ratolí i apareix el text de color blanc amb el fons negre. Llavors ja es pot aplicar el format desitjat prement el botó o el menú corresponent. També es pot marcar una paraula fent un doble clic a sobre de la paraula, i es pot continuar destacant les paraules següents amb un clic del ratolí alhora que es prem la tecla de majúscules. Alguns d’aquests formats també funcionen simplement col·locant el punter del ratolí a sobre d’una paraula o d’una línia del text que volem transformar.

Tots aquests formats i alguns més també es poden aplicar obrint el menú Format de la barra superior de menús. Convé que practiquem amb ells per descobrir quins resultats donen a la pàgina.

Cal destacar especialment la opció Llista del menú Format, que utilitzarem quan vulguem formatar una llista de vinyetes o numerada, ja que ens permet més possibilitats que els botons que apareixen a la barra de format. Quan utilitzem l’opció Llista -> Propietats de llista, apareix una finestra on podem escollir diversos tipus i estils de llista. A més podem triar el nombre pel que volem que comenci la llista. Quan volem fer una llista que tingui més d’un nivell, hem d’utilitzar el botó de Sagnar text (fent doble), i després triar el tipus de llista per a aquest nivell. Per tornar a la secció anterior, utilitzem el botó de dessagnar text. Per exemple:

Es poden utilitzar dos tipus de llistes:

  1. Amb bales:

    • Del tipus "disk".

      • Del tipus "circle".

        • Del tipus "square"

  2. Numerada:

    1. Amb nombres romans.

      1. Amb lletres

Activitat 1.2. Activitat nº 1: Aplicar formats a un text

És hora ja de presentar al nostre Monstre, que ens acompanyarà durant tot el curs. Aquest personatge trist i alhora divertit ha escrit una breu presentació per a la seva pàgina personal amb la qual anem a començar a utilitzar Kompozer a fons. La presentació es troba a l’arxiu texto.htm, dins de la carpeta monstre, que s’instal·la dins de la carpeta principal d’aquest curs si s’ha utilitzat el programa d’instal·lació que es descarrega des de la primera pàgina d’aquest curs. Si es treballa directament des d’Internet, es pot copiar aquest arxiu al disc dur des del navegador després d’obrir aquest arxiu en una finestra al prémer el següent botó:

Text sense formats

L’activitat consisteix a aplicar formats a aquest text de manera que quedi igual al que es troba a l’arxiu formatos.htm, que es pot veure en una nova finestra fent clic en el botó:

Text amb formats

Anem a començar utilitzant l’arxiu texto.html. Aquest text s’ha elaborat per endavant en un editor de textos, ja que és una forma de procedir molt habitual si es té en compte que en aquest tipus de programes es pot escriure i corregir el text amb comoditat i eficàcia. Per desgràcia, Kompozer no té correctors d’ortografia i d’estil, pel que resulta recomanable escriure en un processador de textos el text que anem a incloure en una pàgina web, però sense incloure cap tipus de formats de text per no embrutar el codi HTML generat quan obrim l’arxiu amb Kompozer. El text final elaborat en el processador de textos el guardarem amb format d’HTML, amb la extensió.html, encara que també podria ser.htm.

El primer que farem és obrir en Kompozer l’arxiu text.html des del menú Fitxer de la barra de menús i l’opció Obre fitxer. Aquest fitxer s’ha de buscar en la carpeta monstre, que es troba dins de la carpeta principal d’aquest curs.

En el text que apareix a la pantalla cal aplicar diferents formats de text per deixar-ho igual que l’arxiu que hem vist abans en prémer el botó de Text amb formats. En definitiva, el que cal fer és el següent:

  1. Al títol del document cal aplicar-li el títol 1 ; i al subtítol, el  títol 3. Les dues línies cal centrar-les en la pàgina.
     

  2. La línia tercera estarà centrada i tota en negreta ; a més, anem a inserir un salt de línia  (amb la tecles Control + ENTER) després de l’única coma que hi ha en aquest text. També posarem en negreta els noms de les tres direccions de pàgines web de la secció Enllaços de por.
     

  3. Les línies cinquena i sisena han de constituir una llista amb vinyetes.
     

  4. En la línia sisena la paraula aportació ha d’estar en cursiva.
     

  5. Als tres títols de les seccions (Professió, Aficions i Enllaços de por) els apliquem el  Títol 2.
     

  6. A la secció Aficions, totes les línies excepte la primera han d’anar incloses en una llista numerada.
     

  7. A la secció enllaços de por, cal formatar els títols dels enllaços (Halloween.com, etc.) amb el format anomenat Terme de la definició, i els paràgrafs explicatius de cada un d’ells amb el format Descripció de la definició.
     

  8. L’última línia del text, que indica l’autoria de la pàgina web, anirà centrada.
     

  9. Quant als colors, anem a pintar de blau el títol de la pàgina, la tercera línia i els títols de les seccions.

Activitat 1.3. Guardar el document creat

Finalment, hem de guardar la pàgina en el disc dur, però abans cal escriure el títol intern del document; en cas contrari, ens ho demanarà el programa abans de desar el fitxer. Per a això obrim el menú Format -> Títol i propietats de la pàgina..., i completem el formulari, del qual només és obligatori el títol del document. Aquest títol de la pàgina no serà visible en el document que hem elaborat, ja que és el títol que manejarà el navegador i que apareixerà a la barra de títols del navegador, a la barra de tasques de l’escriptori i al menú de pàgines visitades del navegador.

A la part de Informació general, el títol del document i la descripció són importants per identificar el document i el seu contingut de manera que els cercadors web puguin indexar adequadament i els usuaris puguin trobar el que busquen. A la secció de Internacionalització, farem bé en triar l’idioma del document, Espanyol /Espanya [ca], ja que pot ser d’utilitat per a qui busqui textos en espanyol de la temàtica del nostre document. I el conjunt de caràcters ja ve especificat, de la qual cosa parlarem més endavant.

Un cop fet això, guardem l’arxiu des del menú Fitxer -> Desa com... a la carpeta monstre, que ja està preparada per a això, i l’anomenarem index.html, ja que aquest és el nom que habitualment es dóna a l’arxiu principal perquè ho reconeguin els usuaris, els servidors i els cercadors. No cal teclejar l’extensió.html, perquè en aquest cas ja s’encarrega el programa d’això, però convé afegir-lo, ja que en altres casos el programa no ho afegeix automàticament. També s’accepta l’extensió.htm, si bé nosaltres preferim la primera.

És important que tots els arxius que anem elaborant els guardem en la mateixa carpeta. En el nostre curs hem creat una carpeta anomenada monstre, on l’usuari pot guardar els seus arxius; en ella hem copiat un arxiu titulat text.html, que utilitzarem en aquest curs. Dins d’aquesta carpeta hem creat una altra trucada imatges, on guardem algunes imatges que també ens seran útils. Quan les pàgines web tenen molts arxius, convé guardar-los en carpetes diferents dins de la carpeta principal.

Cal tenir en compte que, per evitar problemes amb els diferents tipus de servidors d’Internet, és convenient nomenar les carpetes i els arxius amb lletres minúscules i sense accents ni altres caràcters especials. Els noms han de ser curts i d’una paraula; si volem usar més paraules, les hem d’unir amb un guió baix (meva_pagina.htm), o sense (mevapagina.htm), però mai separades (la meva pagina.htm).

És convenient que de tant en tant veiem la nostra pàgina en els navegadors Internet Explorer i Mozilla Firefox, que són els més utilitzats a la Xarxa, per assegurar-nos que la pàgina es vegi bé en tots dos navegadors. Per a això, cal guardar el nostre treball regularment i després obrir els fitxers amb aquests navegadors, tenint en compte que de vegades haurem de prémer el botó d’actualitzar document que hi ha als ells perquè el navegador reculli els canvis que hàgim efectuat en les nostres pàgines. Tots dos navegadors mostren de forma semblant els elements bàsics d’HTML, que són els que utilitzarem en aquest curs, i per tant el problema no és important en aquest nivell.

I ja hem creat la nostra primera pàgina, tot i que en les següents lliçons l’anirem millorant i completant.

Activitat 1.4. Primeres nocions d’HTML

El HTML és un llenguatge senzill que s’utilitza per elaborar pàgines d’Internet. No és l’únic que s’utilitza a la xarxa, però encara segueix sent fonamental per generar els milions de documents que poblen la World Wide Web. Hi ha altres llenguatges que milloren les funcionalitats multimèdia i interactiva de les pàgines web, però l’HTML constitueix la base. Es poden crear pàgines d’Internet simplement escrivint codi HTML en un arxiu de text i guardant amb les extensions .htm o .html. El navegador que utilitzem s’encarregarà després de traduir aquest codi perquè vegem les pàgines a la Xarxa. Per tant, aplicacions com Kompozer no són imprescindibles per generar codi HTML però ens faciliten enormement la tasca. En tot cas, encara que no sigui necessari conèixer el llenguatge HTML per crear pàgines, sempre convé familiaritzar-se amb ell, sobretot a l’hora de millorar el disseny dels documents i perfeccionar les seves qualitats interactives.

La informació que del llenguatge HTML es va a oferir en aquesta secció del nostre curs és bàsica però suficient per entendre el funcionament d’aquest llenguatge. Els seus diferents versions no han modificat la seva estructura, que segueix sent compatible amb els dos navegadors principals, l’Internet Explorer i el Firefox, si bé hi ha aspectes que els dos navegadors no interpreten de la mateixa manera. En aquest curs, l’ensenyament de l’HTML anirà lligada a les activitats pràctiques que es vagin realitzant i, per tant, no pretén ser exhaustiva.

Ara anem a veure el codi font de la nostra pàgina, que ha creat automàticament Kompozer. Hem d’obrir el menú Veure de la barra de menús i prémer en l’opció HTML.... Apareixerà una finestra que mostra les tripes de la nostra pàgina.

El primer que cal saber és que HTML (Hypertext Markup Language) és un llenguatge de etiquetes o marcadors, és a dir, d’ordres que donem mitjançant un codi escrit en anglès. Les etiquetes bàsiques de tota pàgina web són les següents:

<Html>
<head>
<title> La meva pàgina </title>
</head>
<body>
<p> Per Text inclòs l’usuari </p>
</body>
</html>

La primera etiqueta que cal escriure al fitxer és <html>, i l’última </html> (tant és que sigui en majúscules o minúscules), que es diferencien en la barra /, la qual indica el tancament de l’etiqueta. Gairebé totes les etiquetes han de tancar d’aquesta manera, però hi ha algunes que no tenen tancament. Aquesta etiqueta indica que el fitxer és de llenguatge HTML.

L’etiqueta <head> obre la capçalera de la pàgina. Aquesta secció s’utilitza, entre altres funcions, per oferir informació als cercadors d’Internet amb les etiquetes <meta>, per introduir llenguatges de scripts, per enllaçar arxius de fulls d’estils i per a indicar el títol de la pàgina mitjançant l’etiqueta <title>. Res del que s’escriu aquí apareix a la pàgina que veu l’usuari, excepte el títol, que apareix a la barra de títol del navegador, a la barra de tasques de Windows i al menú de pàgines visitades.

Tot el que es va a veure al document està inclòs en l’etiqueta <body>, que és el cos de la pàgina. Aquí hem escrit la frase "Text inclòs per l’usuari", amb l’etiqueta <p>, que indica que aquest text forma un paràgraf.

A continuació estudiarem les etiquetes que ha produït l’activitat d’aquesta lliçó i que el programa ha escrit en el cos de l’arxiu, entre les etiquetes <body> d’obertura i de tancament:

  1. S’ha inclòs el color de fons (bgcolor) com atribut de <body>, és a dir, dins de l’etiqueta d’obertura, que en aquest cas és el blanc :<body bgcolor = "# FFFFFF">.
     

  2. Al títol i al subtítol se’ls ha aplicat el encapçalat 1 (<h1>) i el 3 (<h3>) respectivament i les dues línies s’han alineat al centre:align = "center". Als títols de les tres seccions se’ls ha aplicat el encapçalat 2 (<h2>).
     

  3. El text normal es tanca dins de les etiquetes <p> d’obertura i de tancament, el que indica que és un paràgraf. A la tercera línia de text hem inserit un salt de línia, l’etiqueta és <br>, que no té tancament. La diferència entre les dues etiquetes és que la primera comença un paràgraf i per tant deixa més espai entre les línies.
     

  4. Les vinyetes s’han aplicat amb l’etiqueta <ul>, és a dir, llista no numerada. Entre aquesta etiqueta i la de tancament (</ul>), s’han introduït les vinyetes pròpiament dites amb les dues etiquetes <li>. I en la segona secció (Aficions) s’ha inclòs una llista numerada (<ol>). Els tipus de llistes amb vinyetes s’introdueixen com a atributs dins de l’etiqueta <ul> d’aquesta manera: <ul type = "disc" start = "1">, quan és un cercle negre; si es tracta d’un cercle amb l’interior blanc, llavors el tipus és type = "circle", i si és un quadrat negre, és type = "square". L’atribut start = "1" significa que la numeració ha de començar a 1. Quant a les vinyetes numerades (<ol>), els tipus poden ser: "i" o "I" per numeració romana, minúscules o majúscules respectivament, o bé "a" o "A", si es vol que siguin lletres.
     

  5. La llista de definició s’ha incorporat en l’última secció (Enllaços) amb les etiquetes <dl>, <dt> i <dd>.
     

  6. En el text de la llista amb vinyetes s’ha aplicat la lletra cursiva amb l’etiqueta <em>, que altres programes apliquen amb l’etiqueta<i>.La negreta s’ha aplicat amb l’etiqueta <strong>, encara que altres programes apliquen l’etiqueta <b>. Cal destacar que l’etiqueta de tancament de la negreta i de la cursiva són anteriors a l’etiqueta de tancament de la llista, el que s’anomena nidificació :<li> Per deixar constància de la meva <em> existència </em> sobre la Terra </li>
    Això passa amb molta freqüència en el llenguatge HTML i pot ser causa d’errors quan es fa manualment.

Altres etiquetes de format que no hem utilitzat són les següents:

  • <Blockquote> S’utilitza per sagnar el text </blockquote>
     

  • <Cite> S’utilitza per incloure una cita, i el text apareix en cursiva </cite>
     

  • <Code> S’utilitza per indicar que és text de codi </code>
     

  • <Font face = "Arial" color = "# FF0000" > S’utilitza amb l’atribut face per indicar el tipus de lletra i amb l’atribut color per al color del text. No obstant això, les fulles d’estils són la millor tècnica per aconseguir això. </font>