1. Aspectes generals

 

Índex

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 documents HTML, que són documents amb text, imatges, so, etc. i un mecanisme, anomenat hipervincle, de remissió a d'altres documents anàlegs. Aquests documents s'anomenen també pàgines web.

En principi, cada document 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

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 Firefox de la Fundació Mozilla, l'Opera, el Safari d'Apple, etc.

 

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:

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.

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>.

 

Etiquetes, atributs i valors

Molt sovint les etiquetes inicials contenen, a més del nom de l'element que delimiten, una o més parelles d'atribut i valor, indicada així:

Per exemple,

Exemple

Aquestes parelles d'atribut i valor tenen tres usos fonamentals:

 

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.

Normalment els documents HTML 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 4, XHTML i HTML 5

La codificació dels documents HTML no deixa d'evolucionar. A l'estiu de 2011 les especificacions més usades són les següents:

Tots els navegadors actuals reconeixen les dues primeres codificacions, i parcialment, la tercera. L'Explorer de Microsoft exigeix, en les versions anteriors a la 9, el concurs d'un programa en JavaScript de lliure distribució. En parlarem arribat el cas.

En aquest curs, quan hi hagi discrepància entre la forma XHTML i l'HTML, es presentarà la segona entre parèntesis i de color blau.

 

Nota sobre els exemples

Tots els temes contenen nombrosos exemples. Per tal de facilitar-ne l'anàlisi, hem procurat que s'hi 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 de l'exemple al tema, s'hi han fet servir, des del primer moment, alguns recursos encara no explicats. Arribat el moment, i sense excepció, se'n donarà compte.

És molt important que el lector s'animi a fer els seus propis exemples aplicant els coneixements adquirits. En fer-ho, tingueu present que, d'acortd amb el que s'acaba de dir, tinguin una aparença una mica més pobra que els exemples d'aquest curs. No us preocupeu, i acontenteu-vos de moment si el resultat és correcte d'acord amb els coneixements adquirits.

 

 

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