1. Aspectes generals

 

Índex | Tema 2

Conceptes generals

Internet és una xarxa d'abast mundial d'ordinadors interconnectats de manera que es pot trametre una còpia d'un document contingut en l'ordinador base - anomenat host - a qualsevol altre, des d'on es pot consultar. Per Internet circulen diversos tipus de documents. Aquí ens ocuparem dels anomenats documents d'hipertext que són documents amb text, imatges, so, etc. i un mecanisme, anomenat hipervincle, de remissió a d'altres documents anàlegs. Els documents d'hipertext s'anomenen també pàgines web.

En principi, cada document d'hipertext queda identificat inequívocament per una adreça, que especifica el host on resideix el document i la posició que ocupa aquest document dins el host.

Per a la circulació i la consulta dels documents d'hipertext hi ha dos sistemes complementaris de codis:

En aquest curs ens ocupem exclusivament del codi HTML; farem només les mínimes referències imprescindibles a qualsevol altre protocol, entre els quals el mailto:, que s'ocupa, com indica el seu nom, de la circulació del correu electrònic.

 

Consulta i preparació

Per a la consulta dels documents d'internet fem servir unes eines especials anomenades navegadors. Els navegadors tenen, doncs, dues funcions bàsiques: la primera, aconseguir, mitjançant el protocol HTTP, una còpia del document exterior desitjat, i la segona, intepretar-lo segons les especificacions del llenguatge HTML. A més, cada vegada s'hi inclouen noves utilitats secundàries.

Els navegadors més usats són l'Explorer de Microsoft, el Navigator de Netscape i el successor d'aquest, el Firefox de la Fundació Mozilla.

Normalment els documents d'hipertext es preparen en un ordinador diferent del host on seran allotjats. Per a transferir-los al host es fa servir un protocol especial anomenat FTP (File Transfer Protocol). Alguns navegadors contenen una eina molt rudimentària de transferència, però normalment es fan servir programes FTP especials; n'hi ha de gratuïts - molt simples - i de pagament, molt més complets. Alguns hosts faciliten la seva pròpia eina FTP, conjuntament amb diverses eines d'administració del web.

 

HTML: elements i etiquetes

Quan observem un document HTML mitjançant un navegador, veiem allò que l'autor s'ha proposat que veiem, però no ens adonem del codi que ho fa possible. Per observar el codi tenim diversos recursos:

Per tal de facilitar-ne l'anàlisi, hem procurat que en els exemples es fessin servir els mínims recursos possibles, d'acord amb el punt que en cada moment s'està il·lustrant.

Però a fi d'evitar presentacions massa pobres o no prou il·lustratives i de proveir mecanismes de retorn, s'han fet servir, des del primer moment, alguns recursos encara no explicats. Arribat el moment, i sense excepció, se'n donarà compte.

I si hem fet una còpia del document en el nostre ordinador (Fitxer > Anomena i desa o opció anàloga), podem accedir-hi amb qualsevol eina de tractament de text, i això també ens permetrà la visió del codi.

En els documents vistos així es perceben, intercalats en el text, una sèrie de conjunts formats per una o més lletres i els signes < >. Aquests conjunts s'anomenen etiquetes.

Vegem-ho en el següent exemple:

Exemple

En general, les etiquetes van en sèries de dues: n'hi ha una d'inicial i una de final, caracteritzada aquesta pel símbol "/":

Tot el que queda comprès entre dues etiquetes homòlogues és un element. Quan ens hàgim de referir a un element, l'esmentarem mitjançant les lletres de l'etiqueta corresponent. Així direm que l'element P és delimitat per les etiquetes <p>...</p>.

 

HTML I XHTML

El llenguatge HTML és un desenvolupament d'un llenguatge més bàsic, anomenat SGML. Posteriorment s'ha desenvolupat un altre llenguatge bàsic, anomenat XML, forma restringida de l'anterior, orientat a un ventall de plataformes més àmplia que la del ordinadors convencionals i que permet extensions futures amb més facilitat que el SGML. Sobre aquest XML s'ha desenvolupat una nova versió d'HTML, anomenada XHTML. S'ha procurat que les diferències externes entre l'un i l'altre siguin molt petites: a efectes pràctics el XHTML és un HTML amb unes petites addicions i unes poques restriccions.

Tots els navegadors actuals reconeixen les dues codificacions, però cal acostumar-se a la versió XHTML, que ha d'anar substituint la primera.

 

Especificacions vigents

El W3C estableix una sèrie d'especificacions. Les més difoses avui són l'HTML 4.01 i l'XHTML 1.0. Cada una d'aquests presenta tres variants:

L'especificació Strict és més exigent en la interrelació entre els elements d'un document i bandeja totalment les etiquetes i atributs no estructurals; totes les qüestions formals queden confiades a fulls d'estil. Un document Transitional és menys exigent, però, com indica el mateix adjectiu, es tracta d'una situació provisional. Un document és Frameset que s'hi fan servir les etiquetes relatives a marcs.

Els temes i els exemples d'aquest curs són escrits en les versions XHTML 1.0 Strict o, quan cal, XHTML 1.0 Frameset. En alguns exemples, i per a il·lustrar algun punt concret, es fa servir la versió XHTML 1.0 Transitional, o fins i tot recursos anòmals. N'advertim expressament i ho justifiquem en cada cas.

Quan no es diu res sobre una etiqueta, significa que la seva forma és comuna a XHTML i a HTML. Quan hi hagi variació, es presentarà la versió HTML entre parèntesis i de color blau:

  • <p>...</p> (forma comuna a HTML i a XHTML).
  • <br /> (<br>) (forma XHTML, compatible amb HTML, i forma exclusivament HTML).

Els usos transitional de les diverses etiquetes s'indicaran expressament.

També es presentaran, en vermell, els principals recursos bandejats però encara molt difosos.

 

Caracterització, HEAD i BODY

Dins tot document hi ha tres parts clarament diferenciades: caracterització, HEAD i BODY.

L'estructura general del document és la següent:

El contingut del document es situa a BODY; allò que afecta el document en conjunt va a HEAD.

 

Caracterització del document

Cal caracteritzar els documents indicant-hi la versió i la variant de del codi HTML o d'XHTML que s'hi faci servir:

En HTML sovint es prescindeix de la caracterització, tot i que és molt recomanable indicar, almenys,

 

Contingut de HEAD

El HEAD conté:

 

Contingut de BODY

Dins BODY es situen:

 

Preparació dels documents HTML

Els documents HTML es poden crear amb qualsevol programa de tractament de text, com ara el simple Bloc de Notes del Windows, o una eina anàloga. S'han de desar sense format i amb la terminació .htm o .html. Obrint-los amb l'eina de text veurem el codi, i si cal podrem modificar-lo; en canvi, obrint-los amb el navegador, veurem la interpretació que aquest en fa.

La introducció del codi HTML en un document exigeix conèixer el llenguatge, i a més pot fer-se feixuga si el document és una mica complex. Per aquest motiu s'han desenvolupat els editors del tipus wysiwyg (what you see is what you get): allò que veus és allò que obtens. En principi no cal preocupar-se dels codis, sinó solament de l'aparença final del document, que es pot veure en pantalla en tot moment.

El navegador de Netscape té l'editor inclòs en el propi navegador (Communicator > Redactor). Però el seu successor, el Firefox de la Fundació Mozilla - de moment almenys - no n'inclou.

Pel que fa a Microsoft, hi ha l'editor FrontPage, que actualment forma part de l'Office.

També hi ha editors més complets, generalment de pagament.

En general, els editors tenen diverses vistes, cosa que ens permet alternar la codificació automàtica i la conscient.

 

 

Títol de la finestra i paràgrafs

 

L'estudi sistemàtic pot resultar àrid. Al final dels primers temes avançarem coneixements amb la finalitat que el lector pugui crear exemples reals des del primer moment. Comencem doncs donant dues informacions succintes:

El text s'agrupa en paràgrafs i aquests es delimiten amb les etiquetes <p> </p> dins BODY

El títol de la finestra es delimita amb les etiquetes <title> </title> dins HEAD.

Exemple