HTML

Introducció

HTML (acrònim d’Hyper Text Markup Language, en català, "llenguatge de marcat d'hipertext"), és un llenguatge de marcat que deriva de l'SGML dissenyat per estructurar textos i relacionar-los en forma d'hipertext. 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 per a la web.

Breu història

En el seu origen, l'HTML era un llenguatge dissenyat per compartir informació científica entre científics de tot el món. Era purament un llenguatge estructural, en què no hi havia forma de descriure l'aparença de les pàgines (ni tan sols la possibilitat de posar un text en negreta o cursiva). Més endavant s'hi van afegir nombroses opcions per formatar i presentar text i gràfics.

A mitjans de la dècada de 1990 van començar les ampliacions de l'HTML per aconseguir la presentació desitjada, però sempre des de diferents perspectives de diferents desenvolupadors, que van acabar amb diverses solucions no estàndards per a diferents navegadors. Això va provocar l'aparició d'un consorci que controla l'evolució de l'HTML: el W3C (World Wide Web Consortium).

Aquesta evolució tenia un punt_clau: la separació del contingut i l'aparença. Amb la versió 4 de l'HTML es recomanava un altre mecanisme per controlar la visualització del nostre contingut HTML: els fulls d'estil (CSS: Cascading Style Sheets).

El W3C recomana l'ús de l'XHTML, que manté la mateixa sintaxi i els mateixos mecanismes que l'HTML, però reformulat amb les normes d'un XML, preparant-se així per a aprofitar els avantatges d'aquest llenguatge.

D'altra banda el WHATWG—grup de treball compost per la Fundació Mozilla i Opera— estan plantejant una especificació per un HTML 5 estenent l'HTML 4.01 i el DOM. L'HTML 5 intenta millorar la part d'aplicació web amb l'especificació Web Forms 2.0. Aquest grup surt com a reacció pel canvi brusc del pas d'HTML a XHTML que, si no fos per l'Apendix C de l'especificació XHTML 1.0 no es podria usar en navegadors que no suporten el MIME type application/xhtml+xml.

No s'ha d'entendre el WHATWG com una organització paral·lela al W3C sinó un grup complementari, ja que quan té un esborrany el proposa al W3C per tal d'estandarditzar-lo.

La darrera especificació vigent és l'XHTML 1.1 que ja no contempla cap compatibilitat amb versions anteriors i, per tant, només es pot servir com a application/xhtml+xml excloent qualsevol navegador antic.

El punt més polèmic actualment és la proposta d'especificació (en estat d'esborrany) XHTML 2.0 que deixa de ser compatible amb versions anteriors no només a nivell de MIME type sinó que l'estructura de document i elements estructurals canvien.

WEB 1.0

El Web 1.0 era una etapa primerenca de l'evolució conceptual de la World Wide Web, al voltant d'un enfocament de dalt a baix a la utilització del web i la seva interfície d'usuari. Socialment, [aclariment necessari] els usuaris només podien veure pàgines web, però no contribueixen al contingut de les pàgines web. Segons Cormode, G. i Krishnamurthy, B. (2008): "els creadors de continguts eren pocs en Web 1.0 amb la gran majoria dels usuaris simplement actuen com a consumidors de contingut." . Tècnicament, la informació del web 1.0 restringeix l'edició externa. Per tant, la informació no és dinàmica, s'actualitza només pel webmaster. [Cita requerida] Econòmicament, els ingressos generats del web es concentraven en els webs més visitats i en els cicles d'actualització de programari.Tecnològicament, el Web 1.0 es concentra en la presentació, i no en la creació de manera que el contingut generat per l'usuari mai estava disponible.

WEB 2.0

El terme Web 2.0 (emprat des del 2006 fins a l’actualitat) s’associa habitualment amb les aplicacions web que faciliten la compartició interactiva d’informació, el disseny centrat en l’usuari i la col·laboració dins el World Wide Web. Alguns exemples del Web 2.0 serien les comunitats basades en web, els llocs de P2P, els wikis i els blogs. Un lloc Web 2.0 permet interaccionar amb altres usuaris o canviar el contingut del lloc; enfront dels llocs web no interactius on els usuaris es limiten a mirar passivament la informació que se'ls proporciona

El concepte "Web 2.0" va ser esmentat per primer cop per O'Reilly Media el 2004, referint-se a la percepció que la segona generació de la Web es basava en comunitats i en serveis d'allotjament (hosting en anglès), com ara els espais web de treball en xarxa,les wikis, i Folksonomy folksonomies que faciliten la col·laboració i en el fet de compartir entre usuaris espais per a fotografies, textos i vincles amb altres "llocs Web" (Web-sites), els tres exemples més clars són Flickr, del.icio.us i Youtube. O'Reilly Media va titular una sèrie de conferències al voltant d'aquest concepte i des d'aleshores ha estat àmpliament adoptat.

Encara que el terme suggereix una nova versió de la Web, no fa referència a una actualització o evolució d'Internet o de la tecnologia específica de la World Wide Web, però sí que es refereix als canvis que es fan en l'ús de la plataforma. D'acord amb Tim O'Reilly," Web 2.0 és la revolució del negoci en la indústria dels ordinadors causat per la mobilitat de la plataforma d'Internet, i un intent d'entendre les regles per a l'èxit sobre el que és nou a la plataforma". La web 3.0, suggerida per analogia, seria la web semàntica o intel·ligent, que selecciona els continguts d'acord amb les preferències de l'usuari alhora que en permet la interacció.

Alguns experts en tecnologia, principalment Tim Berners-Lee, han qüestionat el terme considerant que s'ha magnificat, molts dels components tecnològics de "Web 2.0" ja eren presents en la creació de la primera World Wide Web.

El terme va ser encunyat per Dale Dougherty de O'Reilly Media en una pluja d'idees amb Craig Cline de MediaLive per desenvolupar idees per a una conferència. Dougherty va suggerir que la web estava en un renaixement, amb regles que canviaven i models de negoci que evolucionaven. Dougherty va posar exemples - "DoubleClick era la Web 1.0; AdSense és la Web 2.0. Ofoto és Web 1.0; Flickr és Web 2.0." - En comptes de definicions, i va reclutar a John Battelle per donar una perspectiva empresarial, i O'Reilly Media, Battelle, i MediaLive va llançar la seva primera conferència sobre la Web 2.0 a l'octubre de 2004. La segona conferència es va celebrar l'octubre de 2005.

El 2005, Tim O'Reilly va definir el concepte de Web 2.0. Un mapa mental elaborat per Markus Angermeier resumeix la relació del terme Web 2.0 amb altres conceptes.

En la seva conferència, O'Reilly, Battelle i Edouard van resumir els principis clau que creuen que caracteritzen les aplicacions web 2.0: la web com a plataforma, dades com el "Intel Inside", efectes de xarxa conduïts per una "arquitectura de participació"; innovació i desenvolupadors independents, petits models de negoci capaços de redifundir serveis i continguts, el perpetu beta, programari per sobre d'un sol aparell.

En general, quan esmentem el terme Web 2.0 ens referim a una sèrie d'aplicacions i pàgines d'Internet que utilitzen la intel·ligència col·lectiva i la intercreativitat per proporcionar serveis interactius en xarxa.

Web 3.0

Web 3.0 és un terme que s'utilitza per descriure l'evolució de l'ús i la interacció a la xarxa a través de diferents camins. Això inclou, la transformació de la xarxa en una base de dades, un moviment cap a fer els continguts accessibles per múltiples aplicacions non-browser, l'empenta de les tecnologies d'intel·ligència artificial, la web semàntica, la web Geoespacial, o la web 3D. Freqüentment és utilitzat pel mercat per promocionar les millores respecte a la Web 2.0. El terme Web 3.0 va aparèixer per primera vegada el 2006 en un article de Jeffrey Zeldman, crític de la Web 2.0 i associat a tecnologies com AJAX. Actualment hi ha un debat considerable al voltant del que significa Web 3.0, i quina seria la definició més adequada

Innovacions

Les tecnologies de la Web 3.0, com programes intel·ligents, que utilitzen dades semàntiques, s'han implementat i usat a petita escala en companyies per aconseguir una manipulació de dades més eficient. En els últims anys, però, hi ha hagut un major enfocament dirigit a traslladar aquestes tecnologies d'intel·ligència semàntica al públic general.

Bases de dades

El primer pas cap a la "Web 3.0" és el naixement de la "Data Web", ja que els formats en què es publica la informació a Internet són dispars, com XML, RDF i microformats, el recent creixement de la tecnologia SPARQL, permet un llenguatge estandarditzat i APIper a la recerca a través de bases de dades a la xarxa. La "Data Web" permet un nou nivell d'integració de dades i aplicació inter-operable, fent les dades tan accessibles i enllaçables com les pàgines web. La "Data Web" és el primer pas cap a la completa "Web Semàntica". En la fase "Data Web", l'objectiu és principalment fer que les dades estructurats siguin accessibles utilitzant RDF. L'escenari de la "Web Semàntica" ampliarà la seva abast en tant que les dades estructurats i fins i tot, el que tradicionalment s'ha denominat contingut semi-estructurat.

Intel·ligència artificial

Web 3.0 també ha estat utilitzada per descriure el camí evolutiu de la xarxa que condueix a la intel·ligència artificial. Alguns escèptics ho veuen com una visió inabastable. No obstant això, companyies com IBM i Google estan implementant noves tecnologies que recullen informació sorprenent, com el fet de fer prediccions de cançons que seran un èxit, prenent com a base informació de les webs de música de la Universitat. Existeix també un debat sobre si la força conductora darrera el Web 3.0 seran els sistemes intel·ligents, o si la intel·ligència vindrà d'una forma més orgànica, és a dir, de sistemes d'intel·ligència humana, a través de serveis col·laboratius com del.icio.us, Flickr i Digg, que extreuen el sentit i l'ordre de la xarxa existent i com la gent interacciona amb ella.[2]

Web semàntica i SOA

Amb relació a la direcció de la intel·ligència artificial, la Web 3.0 podria ser la realització i extensió del concepte de la "Web semàntica". Les investigacions acadèmiques estan dirigides a desenvolupar programes que puguin raonar, basats en descripcions lògiques i agents intel·ligents. Aquestes aplicacions, poden dur a terme raonaments lògics utilitzant regles que expressen relacions lògiques entre conceptes i dades a la xarxa. Sramanas Mitra difereix amb la idea que la "Web Semàntica" serà l'essència de la nova generació d'Internet i proposa una fórmula per encapsular Web 3.0

Fonaments del llenguatge

En aquest apartat aprendrem els conceptes bàsics d'HTML: què és, què fa, un resum de la seva història i quina estructura té un document en HTML. Els apartats que trobareu després d'aquest, expliquen cadascuna de les parts específiques de l'HTML amb molta més profunditat.

Aspecte de l'HTML

L'HTML és només una representació textual del contingut i del seu significat general. Per exemple, el codi per a l'encapçalament "Aspecte de l'HTML" és el següent:

<h2 id="htmllooks">Aspecte de l'HTML</h2>

La part <h2> és un marcador (que es coneix com a "etiqueta") que significa "el que segueix s'ha de considerar com un títol de segon nivell". </h2> és una etiqueta que indica on acaba el títol de segon nivell (i es coneix com a "etiqueta de tancament"). L'etiqueta d'obertura, l'etiqueta de tancament i tot el que hi ha entre elles es coneix com a "element". Molta gent utilitza els termes element i etiqueta indistintament, la qual cosa no és del tot correcta. id="htmllooks" és un atribut; més endavant ja en parlarem, dels atributs.

La majoria dels navegadors incorporen una opció "Codi font" o "Veure el codi font", normalment sota el menú "Veure". Si el vostre navegador incorpora aquesta opció, seleccioneu-la i dediqueu uns moments a mirar el codi font HTML d'aquesta pàgina.

L'estructura d'un document HTML

El document HTML5 vàlid més petit possible seria alguna cosa similar a això:

<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="utf-8">
    <title>Pàgina d'exemple</title>
  </head>
  <body>
    <h1>Hola món</h1>
  </body>
</html>

El document comença amb un element de tipus de document o doctype. Aquest element descriu el tipus d'HTML que s'utilitza per tal que els agents d'usuari puguin determinar com cal interpretar el document i saber si segueix les normes que diu que seguirà.

Tot seguit es pot veure l'etiqueta d'obertura de l'element html. Aquest és un element que inclou tot el document. L'etiqueta html de tancament és l'última cosa que hi ha en qualsevol document HTML.

Dintre de l'element html hi ha l'element head. Aquest és un element que conté informació sobre el document (les metadades). Aquest element es descriu més detalladament en el següent apartat. A la capçalera hi ha l'element title, que defineix el títol "Pàgina d'exemple" de la barra del menú.

Després de l'element head hi ha l'element body, que és l'element que inclou el contingut real de la pàgina; en aquest cas només hi ha un element d'encapçalament de nivell u (h1), que conté el text "Hola món". I aquest és tot el nostre document.

Tal com es pot veure, sovint els elements contenen altres elements. El cos del document inclourà inevitablement molts altres elements. Les divisions de pàgina creen l'estructura general del document i contindran subdivisions. Aquestes contindran títols, paràgrafs, llistes, etc. Els paràgrafs poden contenir elements que creïn enllaços cap a altres documents, cites, èmfasi... A mesura que aneu avançant en aquesta sèrie anireu sabent més coses sobre aquests elements.

La sintaxi dels elements HTML

Tal com ja hem vist, un element bàsic en HTML consisteix en dos marcadors al principi i al final d'un bloc de text. Hi ha alguns elements que no envolten el text, i en la majoria dels casos els elements poden contenir subelements (com l'html que conté head i body a l'exemple anterior).

Els elements també poden tenir atributs, que poden modificar el comportament de l'element i introduir-hi un significat addicional.

<div id="masthead">
   <h1>Conceptes bàsics del 
 <abbr title="llenguatge de marcat d'hipertext">HTML</abbr>
   </h1>
</div>

En aquest exemple hi ha un element div (divisió de pàgina, una manera de partir els documents en blocs lògics) amb un atribut id afegit que té el valor de masthead. L'element div conté un element h1(encapçalament de primer nivell o més important), que alhora conté text. Part d'aquest text està inclòs en un element abbr (que s'utilitza per a especificar l'expansió de les sigles), que té l'atribut title, el valor del qual està definit com a llenguatge de marcat d'hipertext.

Molts dels atributs d'HTML són comuns per a tots els elements, tot i que alguns són específics d'un o diversos elements concrets. Aquests tenen sempre la forma paraulaclau="valor". El valor ha d'aparèixer sempre entre cometes senzilles o dobles (en algunes circumstàncies es poden ometre les cometes, però això no és una pràctica recomanable pel que fa a la predictibilitat, la comprensió i la claredat; s'han de posarsempre els valors entre cometes).

La majoria dels atributs i els seus valors possibles estan definits per les especificacions HTML; no és possible crear atributs propis sense invalidar l'HTML, ja que això podria confondre els agents d'usuari i provocar problemes a l'hora d'interpretar correctament la pàgina web. Les úniques excepcions reals són els atributs id i class; els seus valors estan totalment sota el vostre control, ja que serveixen per a afegir significat i semàntica propis als vostres documents.

Un element que es troba dintre d'un altre element es coneix com un "fill" d'aquest element. Així, doncs, en l'exemple anterior, abbr és un fill de l'element h1, que alhora és un fill de div. I a la inversa, l'element divseria un "pare" de l'element h1. Aquest concepte de pare/fill és molt important, ja que és la base de CSS i es fa servir molt en JavaScript.

Elements de bloc i en línia

En l'HTML hi ha dues categories generals d'elements que corresponen a dos tipus de continguts i estructures que representen aquests elements: elements de bloc i elements en línia.

Els elements de bloc són elements de nivell superior i normalment defineixen l'estructura del document. Pot ser útil veure els elements de bloc com aquells que comencen en una línia nova i que representen un trencament amb el que hi ha abans.

Alguns elements de bloc comuns inclouen els paràgrafs, les llistes, els títols i les taules.

Els elements en línia són aquells que es troben inclosos en els elements estructurals de bloc i que inclouen només parts petites del contingut del document, i no paràgrafs sencers ni grups de contingut.

Un element en línia no farà que aparegui una línia nova en el document; són els tipus d'elements que apareixen dins un paràgraf de text. Alguns elements en línia comuns inclouen els vincles d'hipertext, les paraules o frases destacades o les cites curtes.

Referències de caràcter

Un últim aspecte que cal mencionar d'un document HTML és la manera d'incloure-hi caràcters especials. En l'HTML, els caràcters <, > i & són especials. Aquests caràcters inicien i finalitzen parts del document HTML, i no representen els caràcters de "més petit que", "més gran que" i "et".

Un dels primers errors que pot cometre un autor de webs és fer servir un caràcter "et" en un document i llavors veure que hi apareix alguna cosa inesperada. Per exemple, si s'escriu la frase "Imperial units measure weight in stones&pounds" pot ser que en alguns navegadors es vegi "...stones£s".

Això passa perquè en l'HTML la cadena literal "&pound;" és en realitat una referència de caràcter. Una referència de caràcter és una manera d'incloure en un document un caràcter que és difícil o impossible d'escriure des d'un teclat, o en una codificació de document concreta.

El símbol "et" (&) introdueix la referència i el punt i coma (;) l'acaba. No obstant això, molts agents d'usuari poden ser molt condescendents a l'hora de perdonar errors en l'HTML, com per exemple el d'oblidar el punt i coma, i interpretaran "&pound" com una referència de caràcter. Les referències poden ser números (referències numèriques) o paraules abreujades (referències d'entitats).

HTML + CSS

 

Cascading Style Sheets (CSS, en català: Fulls d'Estil en Cascada) és un llenguatge de fulls d'estil utilitzat per descriure la semàntica de presentació (l'aspecte i format) d'un document escrit en un llenguatge de marques. La seva aplicació més comuna és dissenyar pàgines web escrites en HTML i XHTML, però el llenguatge també pot ser aplicat a qualsevol classe de document XML, incloent-hi SVG i XUL.

CSS està dissenyat principalment per permetre la separació de contingut del document (escrit en HTML o un llenguatge de marques similar) de la presentació del document, incloent-hi elements com la disposició, colors, i fonts. Aquesta separació pot millorar l'accessibilitat al contingut, proporcionar més flexibilitat i control en l'especificació de característiques de presentació, permetre que múltiples pàgines comparteixin un format comú, i redueix complexitat i repetició en el contingut estructural (com per exemple al permetre disseny web sense taules). CSS també pot deixar la mateixa pàgina de marques ser presentada en estils diferents mitjançant mètodes de render diferents, com a la pantalla, en impressió, per veu (quan és llegida en veu alta per un navegador amb lector o pantalla lectora) i amb mecanismes tàctils amb sistemesBraille. Mentre que l'autor d'un document típicament associa els documents amb un full d'estil CSS, els lectors poden utilitzar un full d'estil diferent, potser un al seu propi ordinador, per invalidar aquell que l'autor ha especificat.

CSS especifica un esquema de prioritat per determinar quines regles d'estil s'apliquen si més d'una regla està associada amb un element en particular. En aquests fulls anomentas en cascada, es calculen prioritats o pesos i s'assignen a regles, de manera que els resultats siguin previsibles.

Les especificacions CSS són mantingudes pel World Wide Web Consortium (W3C). El tipus de mitja d'Internet (Tipus MIME) text/css és registrat per a l'ús amb CSS per RFC 2318 (Març de 1998).

Avantatges d'utilitzar els fulls d'estil

Els avantatges d'utilitzar CSS (o un altre llenguatge d'estil) són:

  • Control centralitzat de la presentació d'un lloc web complet amb el qual s'agilita de forma considerable l'actualització del mateix.
  • Els navegadors ens permeten als usuaris especificar la seva pròpia fulla d'estil local que serà aplicada a un lloc web, amb el qual augmenta considerablement l'accessibilitat. Per exemple, persones amb deficiències visuals poden configurar la seva pròpia fulla d'estil per augmentar la grandària del text o remarcar més els enllaços.
  • Una pàgina pot disposar de diferents fulles d'estil segons el dispositiu que la mostri o fins i tot a elecció de l'usuari. Per exemple, per ser impresa, mostrada en un dispositiu mòbil, o ser "llegida" per un sintetitzador de veu.
  • El document HTML en si mateix és més clar d'entendre i s'aconsegueix reduir considerablement la seva grandària (sempre que no s'utilitzi estil en línia).

Fonts consultades

http://mosaic.uoc.edu/ac/le/ca/m3/ud1/

https://ca.wikipedia.org/wiki/Cascading_Style_Sheets

https://ca.wikipedia.org/wiki/Web_3.0