Elaboració de pàgines Web

Bioinformàtica - 2on trimestre curs 2009/2010 - UPF
Toni Gabaldon



Internet i el World Wide Web

Avui en dia, sovint s'identifica internet amb la xarxa de planes web que podem visitar utilitzant un programa navegador, com ara el Netscape, el Mozilla o l'Internet Explorer. Aquest entramat de planes es coneix en termes més tècnics com el World Wide Web, la creació del qual es remunta a l'any 1989 en el laboratori suís de física de partícules, el CERN. Podeu trobar els fets resumits que van dur al CERN a desenvolupar el WWW en la següent plana. No obstant, internet és molt més que el WWW, i els seus origens es remunten al 1969:

Podeu trobar la historia resumida d'internet en aquesta plana, d'on pertany la figura anterior.

L'exit del WWW com a medi de soport a l'accés d'informació a través de la xarxa d'internet es deu, en gran mesura, al seu disseny independent de tota arquitectura hardware, i més concretament al continu desenvolupament del llenguatge que permet especificar, transmetre i interpretar els continguts d'una plana web, el llenguatge HTML.

Què volen dir les sigles HTML ?

Volen dir HyperText Markup Language, o Llenguatge d'Etiquetat de Texte Jeràrquic.

El llenguatge HTML ens permet etiquetar (o marcar) les parts d'un document donat, de forma que queda especificada una estructura lògica determinada en el document i, a mes a mes, ens permet proporcionar instruccions sobre l'aspecte que ha de pendre el document per la seva difussió a través del World Wide Web.

Què és un document HTML ?

    <html>

      <head>
        <title>Mai Jompeix</title>
      </head>

      <body>
        <h1>My Homepage</h1>

        <p>Benvingut a la meva primera p&agrave;gina web.
      </body>

    </html>

És un texte amb una estructura lògica determinada per un conjunt d'etiquetes insertades al llarg d'aquest texte. L'estructura lògica del document HTML, determinada pel conjunt d'etiquetes, ens permetrà identificar diverses parts del document que anomenarem els elements del document. Cada element d'un document HTML pot contenir texte, altres elements o tots dos.

Per tal de crear una pàgina web, avui en dia, existeix gran quantitat de programes que permeten editar de forma visual el contingut de la pàgina i generen automàticament el codi HTML corresponent. Malgrat això, nosaltres escriurem el codi HTML ''a pel'' i aquesta serà la única forma en què elaborarem la documentació dels treballs de l'assignatura.

La utilització de programes per al disseny de pàgines web, sense experiència prèvia, sol acabar en l'elaboració de pàgines que utilitzen elements no estàndars que fan que la pàgina no es pugui veure correctament en tots els navegadors.

Copieu i enganxeu el codi HTML anterior en un arxiu de texte que es digui, per exemple, prova.html, i proveu-lo d'obrir des del navegador.

Quin són els elements principals d'un document HTML ?

Els elements principals són els següents:

Taules

Un dels elements més útils a l'hora de organitzar la informació són les taules (l'element <table>) que ens permeten colocar blocs de texte, imatges o d'altres elements HTML en forma de files i columnes. L'element taula s'especifica obrint una etiqueta <table> i tancant amb una etiqueta </table>:
<table>
    ....
</table>
entre aquestes dues etiquetes hi especificarem primer els elements fila amb l'etiqueta <tr>, i després els elements columna amb l'etiqueta <td>:
<table>
  <tr>
    <td>fila 1 columna 1</td>
    <td>fila 1 columna 2</td>
    <td>fila 1 columna 3</td>
  </tr>
  <tr>
    <td>fila 2 columna 1</td>
    <td>fila 2 columna 2</td>
    <td>fila 2 columna 3</td>
  </tr>
</table>

que dona lloc a la següent taula:
fila 1 columna 1 fila 1 columna 2 fila 1 columna 3
fila 2 columna 1 fila 2 columna 2 fila 2 columna 3

on podem assenyalar els bordes afegint la següent opció a l'etiqueta <table>:

<table border="1">

i quedaria així:
fila 1 columna 1 fila 1 columna 2 fila 1 columna 3
fila 2 columna 1 fila 2 columna 2 fila 2 columna 3

i si la volem centrar afegirem la següent opció:

<table border="1" align="center">

i quedaria així:
fila 1 columna 1 fila 1 columna 2
fila 2 columna 1 fila 2 columna 2 fila 2 columna 3

on hem substituit el texte de la fila 1 i columna 3 per una imatge. Com podem apreciar, l'element taula ajusta automàticament el tamamny de files i columnes. Això és el que precisament fa més útil les taules a l'hora d'organitzar els continguts d'una plana sencera.

Com puc mostrar accents i dièresis ?

Els accents i les dièresis pròpies del català, i d'altres llengües no s'escriuen utilitzant un teclat nacionalitzat sino que el propi llenguatge HTML ens permet codificar-ho de la següent manera:

CODI HTML       SÍMBOL
&agrave;          à
&aacute;          á
&egrave;          è
&eacute;          é
&igrave;          ì
&iacute;          í
&ograve;          ò
&oacute;          ó
&ugrave;          ù
&uacute;          ú
&ccedil;          ç
&iuml;            ï
&uuml;            ü
&ntilde;          ñ

per tal de mostrar aquests símbols en majúscules només haurem de ficar la lletra associada al símbol, que ve al darrera del &, en majúscules.

Utilizació dels fulls d'estil

Els fulls d'estil, anomenats Cascading Styles Sheets o CSS, son una forma de donar un estil i un aspecte uniforme a un conjunt de planes HTML a partir d'un codi d'estil enregistrat en un fitxer CSS que enllaçarem desde la nostra plana HTML incloent la següent línia dins la secció <head>:
<head>
<link rel="stylesheet" type="text/css" href="treballbioinformatica.css"/>
</head>
on en aquest exemple treballbioinformatica.css seria el full d'estil que estem utilitzant i que hauria d'estar enregistrat en el mateix directori d'on l'estem referenciant. El full d'estil ens pot determinar aspectes que van des del tamany que ocupa el texte a la plana, fins al tipus de lletra, passant pels colors dels enllaços.

És això tot el que puc fer amb HTML?

No! però podeu apendre a fer coses noves en HTML simplement mirant el codi font d'aquelles pàgines que trobeu interessants utilitzant l'opció del navegador preparada per aquest propòsit (al Mozilla i al Netscape es ''View'' i ''Page Source'').

Podeu trobar un curs de HTML en castellà als següent enllaços:

i material en anglès a

També trobareu informació sobre tots els darrers desenvolupaments al voltant del estàndar del llenguatge HTML i tot el relacionat amb el world wide web en general a la web del consorci WWW.

Exercici

Proveu de editar una plana en HTML fent anar el full d'estil treballbioinformatica.css que reprodueixi el contingut que observeu en el següent fitxer JPG, on necessitareu la imatge en aquest fitxer GIF i aquest programa escrit en llenguatge Perl.