HTML

HTML
Extensió	.html, .htm, .shtml, .shtm
Tipus MIME	text/html
Desenvolupat per	W3C
1a publicació	Juny de 1993 [1]
Última versió	5.2 (14 de desembre de 2017 [2] )
Paio	Llenguatge de marques
Extensió de	SGML
Estès a	XHTML
Estàndard	ISO / IEC 15445
Voleu obrir el format ?	Sí
Lloc web	html.spec.whatwg.org/

En informàtica, el llenguatge de marcatge HyperText (traducció literal: llenguatge marcador per a l’ hipertext ), conegut habitualment amb les sigles HTML , és un llenguatge de marques . Nascut per al format i la disposició de documents d’ hipertext disponibles al web 1.0 , avui s’utilitza principalment per al desacoblament de l’estructura lògica d’una pàgina web (definida amb precisió per l’etiquetatge) i la seva representació, gestionada a través d’estils CSS per adaptar-se al noves necessitats de comunicació i publicació a Internet ^[3] .

HTML és un llenguatge de domini públic , la sintaxi del qual està establert pel World Wide Web Consortium (W3C). Deriva de SGML , un metallenguatge orientat a definir idiomes que es poden utilitzar per a la redacció de documents destinats a la seva transmissió en format electrònic. La versió actual, la cinquena, va ser publicada pel W3C a l'octubre del 2014 .

El motiu principal que va motivar W3C i els seus membres a desenvolupar HTML5 va ser la necessitat de proporcionar directament una funcionalitat que abans es podia utilitzar mitjançant extensions propietàries fora dels navegadors, com ara Adobe Flash i similars. Un segon objectiu que els desenvolupadors s'havien marcat era assegurar una major compatibilitat entre diferents navegadors, independentment de la plataforma de programari utilitzada, i principalment orientada a l'expansió de dispositius mòbils . ^[3]

Història

L’HTML va ser desenvolupat a principis dels anys noranta del segle XX per Tim Berners-Lee al CERN de Ginebra ( Suïssa ), juntament amb el protocol HTTP dedicat a la transferència de documents en aquest format. El 1989 Berners-Lee va proposar un projecte que consistia en la publicació d' hipertext , conegut com a " world wide web ". Dins d’aquest projecte, van néixer tant el servidor web " httpd " (dimoni del protocol de transferència d’hipertext) com el client WorldWideWeb (el primer navegador de la història), el desenvolupament del qual es va iniciar a l’octubre de 1990 i l’ús del qual era exclusivament intern del CERN fins a la seva publicació a Internet el 1991. Ajudat pels seus col·legues de l’institut suís, Berners-Lee va contribuir a la definició de la primera versió d’HTML, que es va fer pública oficialment el juny de 1993 , co-signada amb Daniel Connolly i recolzada perInternet Engineering Task. Grup de treballForce (IETF) anomenat Integration of Internet Information Resources , per proposar-lo com a estàndard IETF. ^[1]

Exemple de pàgina HTML

El 1994 el llenguatge va tenir una forta difusió després dels primers usos comercials de la web , de manera que el mateix any va néixer el World Wide Web Consortium i, a partir d’aquest moment, el desenvolupament de l’HTML es convertirà en la prerrogativa del W3C.

El 1995, el W3C va definir la versió 3.0 d'HTML, que va ser seguida de la versió 3.2 el 1997 , i finalment va arribar les primeres especificacions HTML4 el 1998 .

La versió 4.01, publicada el 24 de desembre de 1999 i la penúltima versió oficial, és el resultat de les diverses ampliacions i millores de la dècada anterior, en particular en la separació del nivell de presentació del format, és a dir, el que descriu el gràfic aspectes del document, en una entitat independent d'HTML, fulls d'estil en cascada ( CSS ), definits el mateix any a la seva primera versió, nivell 1 ^[4] . Aquesta distinció, entre el contingut i l'aspecte final del document, permet a diferents navegadors i dispositius representar el mateix contingut d'una manera adequada a les diferents capacitats i mides gràfiques disponibles. Si per una banda això requereix que els desenvolupadors web creïn personalització de fulls d’estil, per altra banda ha garantit la màxima difusió de la web i ha impedit que es converteixi en un mitjà d’ elit .

Al gener de 2000, XHTML 1.0 ^{[5] es} va publicar com a estàndard, una variant d' HTML4 que utilitza XML 2.0 en lloc de SGML com a llenguatge de marcatge, per millorar la seva interoperabilitat amb altres llenguatges de la família com SVG i MathML ^{[6]. ]} El W3C va decidir reformular HTML4 i continuar el desenvolupament només amb XHTML ^[7] i al maig de 2011 XHTML 1.1 es converteix en un estàndard oficial ^[8] .

Al llarg del nou mil·lenni, el W3C va començar a treballar en dos nous projectes, un dirigit a ampliar XHTML i l’altre destinat a definir un nou llenguatge que no seria compatible amb versions anteriors d’HTML i XHTML, conegut com el nom de XHTML. 2 (aquest darrer projecte es va declarar oficialment en fallida a finals del 2010, a favor d'un enfocament menys rígid).

El 2004 , després d’un dia d’estudi, va néixer un grup de treball alternatiu al consorci: Apple , la Fundació Mozilla , l’ Opera Software i, posteriorment, també Google , es van reunir al grup de treball de tecnologia d’aplicacions d’hipertext web ( WHATWG ) i van començar el desenvolupament d’una nova versió d’HTML, preocupat pel poc interès en HTML que mostra el consorci ^[9] . El 2006, el W3C va decidir participar en el desenvolupament d’ HTML5 i el 2007 es va unir al WHATWG , els dos grups col·laboren fins al 2011, quan s’adonen que tenen objectius irreconciliables: el consorci volia traçar una línia i publicar una nova versió de les especificacions. estàndard, mentre que el WHATWG volia un estàndard en evolució ^[7] . El W3C va publicar la cinquena revisió de l'especificació el 28 d'octubre de 2014 ^[2] .

Actualment, els documents HTML poden incorporar moltes tecnologies, que ofereixen la possibilitat d’afegir controls més sofisticats sobre la representació gràfica, interaccions dinàmiques amb l’usuari, animacions interactives i continguts multimèdia al document d’hipertext . Es tracta de llenguatges com CSS , JavaScript , XML , JSON o altres aplicacions multimèdia d’ animació vectorial o transmissió d’àudio o vídeo .

Actualment, molts dissenyadors web deleguen l’escriptura del codi HTML a aplicacions específiques, com els anomenats editors WYSIWYG que permeten al dissenyador tenir cura de l’aspecte gràfic final de la pàgina mentre es genera automàticament el codi real. Els desenvolupadors purs, en canvi, prefereixen utilitzar el codi HTML directament per tal de tenir un major control sobre el resultat final i la neteja del codi escrit, cosa que els actuals editors WYSIWYG, tot i estar cada vegada més avançats, no sempre poden garantir , també per a la representació diferent de navegadors en parts del codi HTML.

Descripció

HTML és un llenguatge de format que descriu els mètodes de paginació o visualització gràfica ( disseny ) del contingut, textual o no, d’una pàgina web mitjançant etiquetes de format . Tot i que HTML admet la inserció de scripts i objectes externs com imatges o pel·lícules , no és un llenguatge de programació : ja que no proporciona cap definició de variables , estructures de dades , funcions o estructures de control que puguin implementar programes , el seu codi és capaç només per estructurar i decorar dades textuals. ^{[10] [11]}

El llenguatge HTML, o la seva variant XHTML , té la finalitat de gestionar els continguts associant o especificant alhora l’estructura gràfica ( disseny ) dins de la pàgina web que es crearà gràcies a l’ús de diferents etiquetes . Cada etiqueta (com ara <h1> o <p> ) especifica un rol de contingut diferent que marca (de manera que l'etiqueta <h1> definirà una importància més gran que l'etiqueta <p> ). El format consisteix a inserir marcadors o etiquetes al text, anomenades etiquetes , que descriuen característiques com la funció, el color, la mida i la posició relativa dins de la pàgina. Els navegadors que llegeixen el codi mostren a l'usuari el format predefinit per a cada etiqueta que trobin (de manera que, per exemple, el contingut marcat amb l'etiqueta <h1> tindrà un caràcter de 18 punts i el contingut marcat amb <p> tindrà un caràcter de 12 punts ). No obstant això, aquest format està completament sota el control de l'usuari, que el pot canviar a la configuració del seu navegador.

Quan un document d’hipertext escrit en HTML s’emmagatzema en un fitxer, la seva extensió sol ser .html o .htm .

Arxiu i manipulació

Els documents HTML s’emmagatzemen als discs durs de les màquines de processament ( ordinador - servidor ) connectats i connectats constantment a Internet . En aquestes màquines s’instal·la un programari específic ( servidor web ) que s’encarrega de produir i enviar documents als navegadors dels usuaris que els sol·liciten mitjançant el protocol HTTP per a la transferència de dades.

Sovint, el document HTML es genera totalment o parcialment a través d’un codi executable que resideix al servidor d’Internet (processament del servidor ) capaç d’interactuar amb altres aplicacions del propi servidor, com ara una base de dades , i després enviar el resultat al navegador. , creant les anomenades pàgines web dinàmiques amb les quals un usuari pot realitzar operacions interactives avançades (per exemple, filtrar elements dins d’un catàleg en línia, enviar i enregistrar dades, iniciar la sessió, etc.). És el cas dels documents escrits en idiomes com ASP , PHP , Perl o Java . En altres casos, alguns tipus de processament es realitzen al client amb idiomes com JavaScript .

Sintaxi

El component principal de la sintaxi d’aquest llenguatge és l’ element , destinat a ser una estructura bàsica a la qual es delega la funció de formatar dades o indicar informació al navegador .

Cada element està inclòs dins de marques anomenades etiquetes , que consisteixen en una seqüència de caràcters inclosos entre dos claudàtors o ganxos (<>), és a dir, els signes menor i major (per exemple: <br /> ; l'etiqueta d'aquest exemple serveix per indicar una devolució de carro).

Quan l'etiqueta s'ha d'aplicar a una secció de text o codi, l'abast s'ha de delimitar entre una etiqueta d'obertura i de tancament (tancament explícit), que coincideix amb l'etiqueta d'obertura precedida d'una barra inclinada ( / ) després del claudàtor obert (Per exemple: <b>testo testo testo</b> , en aquest cas, el text entre aquestes dues etiquetes es mostrarà en negreta pel navegador).

Algunes etiquetes tenen una aplicació específica, com ara l'etiqueta <img> que s'utilitza per inserir una imatge en un punt determinat de la pàgina i, per tant, no requereixen l'etiqueta de tancament; en aquest cas parlem d’ etiquetes de tancament implícites . En XHTML , en canvi, està prohibit el tancament implícit i totes les etiquetes sempre s'han de tancar explícitament mitjançant una etiqueta de tancament o, en el cas d'etiquetes puntuals, mitjançant el caràcter '/' al final de l'etiqueta mateixa ( per exemple <br /> ). Per a aquestes etiquetes, els navegadors poden acceptar tots dos modes, per motius de compatibilitat.

Estructura d’un document HTML

El mateix tema en detall: element HTML .

Estructura d’un document HTML general.

Un document HTML comença amb una declaració de tipus de document, una cadena curta que indica la sintaxi i la versió en què està escrit, per exemple HTML 4.0 Strict. Aquesta informació és necessària perquè el navegador identifiqui les regles d’interpretació i visualització adequades per al document específic, i és per aquest motiu que la declaració ha de precedir el document real.

Cada versió del llenguatge HTML anterior a la cinquena, és a dir, fins a HTML 4.01 o XHTML 1.1, té una sintaxi definida formalment per una definició de tipus de document (DTD) que, publicada al web pel W3C, indica, per a cada versió, que es poden o s'han d'utilitzar elements, atributs i entitats i de quina manera; per tant, en aquests casos, la declaració del tipus de document (també pot incloure, en el cas de variants XML), l' URL d'aquest recurs. La cinquena versió d'HTML, en canvi, no té cap DTD, de manera que en aquests casos la declaració inicial indica la simple redacció "HTML".

Per declarar un document que utilitzarà l'estàndard HTML5, utilitzeu l' <!DOCTYPE html> .

Després de la declaració del tipus de document, el document HTML presenta una estructura d'arbre niat, composta per seccions delimitades per etiquetes adequades que al seu interior contenen subseccions més petites, sempre delimitades per etiquetes.

L’estructura més externa és la que delimita tot el document, excepte el DTD, i s’inclou entre les etiquetes <html> i </html> .

Dins de les etiquetes <html> , l'estàndard sempre proporciona la definició de dues seccions diferents ordenades en una seqüència ordenada:

• la capçalera o secció de capçalera , delimitada entre les etiquetes <head> i </head> , que conté informació de control que normalment no mostra el navegador, a excepció d'alguns elements
• la secció del cos o del cos , delimitada entre les etiquetes <body> i </body> , que conté la part d'informació real, és a dir, el text, les imatges i els enllaços que componen la part que mostra el navegador.

Per sota d’aquesta subdivisió general, la norma no preveu obligacions particulars pel que fa a l’ordre i el posicionament d’altres subseccions dins de la capçalera o el cos , a part de la indicació del compliment dels nidificacions correctes (les subseccions no s’han de superposar, és a dir, cada subsecció ha de ser tancat abans d’iniciar la següent subsecció), deixant així total llibertat al desenvolupador o dissenyador quant a l’estructuració i l’organització posteriors.

Etiqueta del cap

Les etiquetes que s'utilitzen a la secció del cap solen ser d'un tipus diferent de les que s'utilitzen a la secció del cos , ja que estan destinades a diferents propòsits. Normalment el navegador no mostra les etiquetes que s’utilitzen a la secció de capçalera, però serveixen com a informació de control i servei, com ara:

• metadades per transmetre informació útil a aplicacions externes (per exemple, motors de cerca) o al navegador (per exemple, codificació de caràcters, útil per visualitzar alfabets no llatins)
• Metadades http-equiv per controlar informació addicional al protocol HTTP
• enllaços a fitxers de serveis externs ( CSS , scripts, icones que es mostren a la barra d'adreces del navegador)
• inserir scripts (codi executable) que fa servir el document
• informació d'estil (CSS local)
• el títol associat a la pàgina i que es mostra a la finestra principal del navegador

Etiqueta del cos

Dins de la secció del cos , que inclou la part visible del document, s’utilitzen les etiquetes específiques proporcionades per al format del contingut accessible per a l’usuari final, és a dir, per al control de:

• encapçalaments (títols de capítols, títols de paràgrafs, etc.)
• estructures de text (text sagnat, paràgrafs, etc.)
• aparença del text (negreta, cursiva, etc.)
• llistes i llistes (numerades, genèriques, definició)
• taules
• formularis electrònics (camps que l'usuari pot omplir, camps seleccionables, menús desplegables, botons, etc.)
• hipervincles i ancoratges
• disseny genèric del document
• inserir imatges
• inserció de continguts multimèdia ( àudio , vídeo , animacions, etc.)
• inserció de continguts interactius ( scripts , aplicacions externes)

Entre els llistats anteriorment, l’etiqueta <a> té un paper clau ja que descriu un enllaç (o enllaç ) a un altre document d’hipertext que permet, amb un clic del ratolí o amb una operació de teclat , sortir de la pàgina del lloc on sou visualitzant i carregant l’indicat per l’enllaç, realitzant així la funció de navegació pròpia de l’ús d’Internet.

Haml

Haml (HTML Abstraction Markup Language) és un sistema de plantilles dissenyat per evitar escriure codi en línia en un document web i fer que l'HTML sigui més net. Haml ofereix la flexibilitat de tenir contingut HTML dinàmic. De manera similar a altres llenguatges web com PHP, ASP, JSP i sistemes de plantilles com eRuby, Haml també incorpora algun codi que s’executa en temps d’ execució i genera codi HTML per proporcionar contingut dinàmic. Per executar el codi Haml, els fitxers han de tenir una extensió .haml . Aquests fitxers són similars als fitxers .erb o eRuby; també ajuden a incrustar el codi Ruby quan desenvolupen una aplicació web ^[12] .

Exemple

Haml utilitza un sagnat d’espai (dos espais) per a l’anidament i l’abast d’etiquetes que actua com a substitut dels parells d’etiquetes de punta oberta , cosa que el fa més sec i net. L'exemple següent compara la sintaxi de Haml i eRuby (Embedded Ruby), juntament amb la sortida HTML.

 % div .category 
   % div .recipes 
       % h1 = recepta. nom 
       % h3 = recepta. categoria 
   % div 
       % h4 = recepta. Descripció

<div class = "category"> 
    <div class = "receptes"> 
        <h1> <% = recepta. nom%> </ h1> 
        <h3> <% = recepta. categoria%> </ h3> 
    </ div> 
    <div> 
        <h4> <% = recepta. descripció%> </ h4> 
    <
</ div>

<div class = "category"> 
    <div class = "receptes"> 
        <h1> Cookie </ h1> 
        <h3> Postres </ h3> 
    </ div> 
    <div> 
        <h4> A base de pasta i sucre. Normalment de forma circular i té al voltant de 400 calories. </ h4> 
    </ div> 
</ div>

CodePen

Logotip de CodePen

CodePen és una comunitat en línia per provar i mostrar fragments de codi HTML, CSS i JavaScript creats per l'usuari. Funciona com a editor de codi en línia i entorn d'aprenentatge de codi obert , on els desenvolupadors poden crear fragments de codi, anomenats "bolígrafs", i provar-los. Va ser fundada el 2012 pels desenvolupadors full-stack Alex Vazquez i Tim Sabat i front-end dissenyador Chris Coyier ^[13] . Els seus empleats treballen a distància, poques vegades es reuneixen personalment. CodePen és una de les comunitats més grans de dissenyadors i desenvolupadors de webs per mostrar les seves habilitats de programació ^[14] , amb uns 330.000 usuaris registrats el 2015 ^[15] i 14,16 milions de visitants mensuals el 2019 ^[16] .

HTML ordenat

El mateix tema en detall: HTML Tidy .

HTML Tidy és una eina dissenyada per Dave Raggett per ajudar a evitar errors en escriure codi HTML.

De fet, Tidy s’encarrega de corregir tots els errors més típics trobats durant el desenvolupament del codi web. També s’encarrega de fer llegible el codi generat per l’editor HTML i d’indicar a l’usuari on s’ha de prestar més atenció. Pot reconèixer una àmplia gamma d'errors, marcant-los com a ADVERTÈNCIES , que estan flanquejats per números de fila i columna.

Nota

Bibliografia

• La història de l'HTML ( JPG ), a MCmicrocomputer , n. 177, Roma, Technimedia, octubre de 1997, pp. 316-320, ISSN 1123-2714 ( WC ACNP ) .

Articles relacionats

• Aplicació HTML
• CSS
• Definició del tipus de document
• Element HTML
• HTML5
• HTML ordenat
• Llenguatge de marques
• XHTML
• MHTML

Altres projectes

• Viquillibres conté text o manualsHTML
• El Viccionari conté el diccionari lema « HTML »
• Wikiversity conté recursos en HTML
• Wikimedia Commons conté imatges o altres fitxers en HTML

Enllaços externs

• Lloc oficial , a w3.org .
• Lloc oficial , a html.spec.whatwg.org .
• Lloc oficial , a w3c.github.io .
• ( EN ) HTML , a Encyclopedia Britannica , Encyclopædia Britannica, Inc.
• ( EN ) Treballs relacionats amb HTML , a Open Library , Internet Archive .
• Dipòsit de fonts HTML , a github.com .
• Dipòsit de fonts HTML , a github.com .
• Lloc d'informes d'errors , a github.com .
• ( EN ) Especificació HTML oficial, versió 4 del W3C , a w3.org .
• Especificacions HTML oficials (EN) , versió 5 del W3C a html.spec.whatwg.org.
• Guia HTML , a html.it.

Portale Internet

Portale Telematica