HTTP i HTML

El protocol de transferència d'hipertext o HTTP (HyperText Transfer Protocol) estableix el protocol per a l'intercanvi de documents d'hipertext i multimèdia al web.

HTTP segueix un model client-servidor on el client (generalment un navegador web) inicia la petició d'informació establint una connexió TCP/IP. A continuació, s'envien una sèrie de capçaleres amb metainformació sobre el tipus de document multimèdia demanat a un recurs d'Internet, la referència al qual es fa mitjançant les URL (Universal Resource Locator), que són les direccions que s'escriuen als navegadors.

La resposta del servidor és un Acknowledge seguit del fitxer demanat sense xifrar, un missatge d'error, etc.

La connexió establerta és tancada en finalitzar la transferència i la informació no és emmagatzemada enlloc. Aquesta característica ha fet proliferar l'ús de Cookies com a sistema per guardar paquets d'informació útils sobre cada usuari i així fer possible que el servidor el reconegui quan torni a fer-li una consulta.

HTML (acrònim d’Hyper Text Markup Language) és un llenguatge de marcat dissenyat per estructurar textos i relacionar-los en forma d'hipertext (text amb víncles que permeten navegar d'un document a altre). Gràcies a Internet i als navegadors web, s'ha convertit en un dels formats més populars que existeixen per a la construcció de documents a la web.

Per tal de fer feina amb aquests conceptes i d'explotar les capacitats de la nostra Raspberry Pi, anem a instal·lar un servidor web i a estudiar el llenguatge HTML per poder fer una pàgina que pugui ser consultada des de qualsevol punt de la nostra LAN.

Instal·lació d'un servidor web

Con ja hem vist anteriorment, un servidor és un ordinador connectat constantment a una xarxa amb un software instal·lat que el fa capaç d'escoltar les peticions reallitzades des d'altres màquines i donar una resposta.

Apache és una aplicació de servidor web molt popular que es pot instal·lar a la Raspberry Pi. Ella tota sola és capaç de servir pàgines HTML sobre el protocol HTTP, i si s'afegeixen més mòduls, pot servir pàgines web dinàmiques aprofitant llenguatges com PHP.

Per instal·lar-ho, només cal escriure al terminal:

• $ sudo apt-get install apache2 -y

Modificació de la pàgina principal d'Apache

Aquesta pàgina web per defecte no és més que un arxiu HTML que es pot trobar a /var/www/html/index.html. S'ha de destacar que el nom "index.html" és obbligatori per aquell document que volem que sigui la portada del nostre lloc web.

Per defecte, aquest document és propietat de l'usuari root, pel que no podrem fer modificacions. Per canviar-ho, s'ha de navegar amb un terminal fins a la carpeta que conté l'arxiu i escriure:

• $ sudo chown pi: index.html

Ara ja es pot editar! Prova obrint l'arxiu amb l'editor de text, esborra tot el que hi ha i escriu alguna cosa que t'identifiqui com "Soc Fulanito i aquesta és la meva pàgina web!".

Accés a les altres pàgines de la LAN

Ara, encara que moooooolt bàsica, cadascú té una pàgina personal que es serveix mitjançant Apache a tots els ordinadors de la xarxa. Però, com poden els altres accedir a la meva pàgina?

Fàcil, només han d'escriure a la barra d'adreces del navegador la meva IP: http://192.168.1.10 (o la IP que correspongui).

Això, amb la nostra configuració de xarxa, a la que tenim un DHCP, és un inconvenient, però es pot salvar fent servir el hostname i escrivint al navegador hostname.local.

Llenguatge HTML

Per tal d'aprendre el llenguatge HTML i poder editar la nostra pàgina personal, anem a utilitzar un recurs extern: Codecademy. Entra dins d'aquesta pàgina, crea un usuari i comença el curs de HTML i CSS.

Edició de la pàgina personal

Ara que ja temim uns coneixements bàsics sobre HTML, anme a editar l'arxiu "index.html" de l'Apache de la nostra Raspberry Pi. Per fer-ho, instal·larem un editor d'HTML amb gramàtica ressaltada anomenat Bluefish.

• $ sudo apt-get install bluefish

Aquest programa et permet navegar per totes les carpetes i editar els arxius HTML, amb l'avantatge de que totes les etiquetes apareixeran amb colors ressaltats i això ens permetrà veure quan hem escrit una etiqueta de manera incorrecta.

Exercici

1. Edita la pàgina "index.html" per crear una pàgina vinculada amb una afició personal.