Introducció

Què trobaràs?

  • Els elements més comuns d’HTML i CSS.
  • Com resoldre dubtes quan tinguem problemes.
  • Eines professionals del món real.

Les definicions seran simplificades, assumint que tothom comença de zero. Per això i per facilitar la comprensió, els conceptes molts cops no seran 100% precisos però si correctes i pràctics. A banda d’això trobaràs enllaços a W3C amb les definicions formals.

Què necessitem?

  • Un navegador.
  • Un editor de codi o de text. (Sublime Text és una bona opció. També n’hi ha d’online: codeopen).

Nota:

És possible que et soni algun software com Dreamweaver, Frontpage, etc. Personalment no en recomano cap d’aquests per aprendre perquè inclouen botons que introdueixen codi, això fa que molts cops s’introdueixi codi que no es necessita o que no sabem què significa, i per tant no aprenem i en cas d’error no sabrem arreglar-ho.

Conceptes

  • Servidor web. Un ordinador que accepta requeriments HTTP de clients, normalment coneguts com a navegadors web, i de servir-los pàgines web, que normalment són documents HTML.
  • Allotjament web. Normalment conegut com a servidor. És un ordinador connectat a internet en el que hi ha instal·lat un servidor HTTP i li podem sol·licitar recursos.
  • Navegador. És un programa que entén i transforma el codi que rep des d’un servidor en una cosa entenedora per una persona (una web, imatges, etc.)
  • Peticions HTTP. Quan el navegador vol accedir a una pàgina web a través d’HTTP, fa una petició al servidor.
    • GET. Per a sol·licitar informació.
    • POST. Per enviar informació.
      • 200. S’ha trobat correctament el fitxer/recurs.
      • 403. No tenim permís per accedir al fitxer/recurs.
      • 404. El fitxer/recurs que li hem sol·licitat no s’ha pogut trobar al disc dur (pot ser perquè no hi sigui o perquè la ruta és incorrecta).

HTML

HTML (Hypertext Markup Language) és un llenguatge de marques (que no és el mateix que un llenguatge de programació) que serveix per definir l’estructura i la semàntica de la nostra pàgina web.

HTML va ser creat i és mantingut per una organització sense ànim de lucre anomenada W3C. El W3C és un consorci format per més de 400 empreses (entre elles les que desenvolupen els principals navegadors com Google, Microsoft, Mozilla, Apple …), etc.

Des del consorci treballen contínuament en definir com ha d’evolucionar aquest llenguatge i altres estàndards que conformen la web. Posteriorment els fabricants de navegadors preparen els mateixos intentant aconseguir que un codi funcioni igual en tots els navegadors. Encara que no sempre és així, cada vegada és una realitat més propera.

Per tant, al llarg dels anys les versions d’HTML han evolucionat: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), etc. amb l’objectiu d’adaptar-se als nous temps i així donar suport a noves necessitats (estandardització dels sistemes d’àudio, vídeo, etc.).

DevTools

Són eines de desenvolupador web que incorporen els navegadors, on podem obtenir diferent informació tant sobre la comunicació entre servidor i navegador, com del contingut del lloc web que estem visitant.

  • Xarxa. Ens permet veure els recursos que recupera el nostre navegador utilitzant peticions HTTP mentre carregem i usem la web.
  • Inspector/Elements. Ens permet veure i modificar el codi de la web.
  • Depurador/Fonts (Sources). Ens permet navegar pels fitxers que utilitza la web.

Validació

Que el codi es mostri en el nostre navegador web com volíem no implica necessàriament que l’hàgim escrit bé.

En moltes ocasions el navegador és capaç de detectar errors humans i corregir de manera automàtica perquè l’usuari vegi bé la pàgina, però això no és sempre així. Si volem assegurar-nos que la nostra pàgina està correctament escrita podem usar el Validador d’HTML del W3C, que a més en cas de trobar errors ens donarà pistes sobre com resoldre’ls.