HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Nessun oggetto della modifica |
m Annullata la modifica di 93.47.123.20 (discussione), riportata alla versione precedente di Simone Biancolilla Etichetta: Rollback |
||
Riga 1:
{{Formato file
|nome = HTML
|icona =
|estensione = .html, .htm, .shtml, .shtm
|mime = text/html
|sviluppatore = [[World Wide Web Consortium|W3C]]
|proprietario =
|licenza =
|data_pubblicazione= giugno 1993<ref name="html1">{{cita web|lingua=en|titolo=Hypertext Markup Language (HTML) - A Representation of Textual Information and MetaInformation for Retrieval and Interchange|autore=Tim Berners-Lee|autore2=Daniel Connolly|anno=1993|url=https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt|sito=World Wide Web Consortium}}</ref>
|ultima_versione = 5.2
|data_ultima_versione = 14 dicembre 2017<ref name=html5>https://html.spec.whatwg.org/multipage/</ref>
|genere = [[Linguaggio di markup]]
|estensione_di = [[Standard Generalized Markup Language|SGML]]
|esteso_a = [[XHTML]]
|standard = ISO/IEC 15445
|aperto = Sì
|sito = html.spec.whatwg.org/
}}
L{{'}}'''HyperText Markup Language''' ({{lett|linguaggio di marcatura d'ipertesto}}), comunemente noto con l'acronimo '''HTML''', è il [[linguaggio di marcatura]] più usato per i documenti web. Nato per la [[Formattazione del testo|formattazione]] e [[impaginazione]] di documenti [[ipertesto|ipertestuali]] disponibili nel [[Web statico|web 1.0]], oggi è utilizzato principalmente per il disaccoppiamento della struttura logica di una [[pagina web]] (definita appunto dal markup) e la sua rappresentazione, gestita tramite gli stili [[CSS]] per adattarsi alle nuove esigenze di comunicazione e pubblicazione all'interno di [[Internet]].<ref name="Bochiccio-Mostarda">{{Cita libro|autore=Daniele Bochiccio|autore2=Stefano Mostarda|titolo=HTML5 con CSS e JavaScript|anno=2015|editore=Hoepli|p=20}}</ref>
L'HTML è un linguaggio di [[pubblico dominio]], la cui [[sintassi]] è stabilita dal [[World Wide Web Consortium]] (W3C). È derivato dall'[[SGML]], un [[metalinguaggio]] finalizzato alla definizione di linguaggi utilizzabili per la stesura di documenti destinati alla trasmissione in formato elettronico. La versione attuale, la quinta, è stata pubblicata dal W3C nell'ottobre 2014.
Il motivo principale che ha spinto il W3C e i suoi membri a sviluppare [[HTML5]] è stata la necessità di fornire direttamente le funzionalità che in precedenza erano fruibili tramite estensioni proprietarie all'esterno dei browser, come [[Adobe Flash]] e simili. Un secondo obiettivo che gli sviluppatori si erano prefissati era quello di garantire una maggiore compatibilità tra i diversi browser, indipendentemente dalla [[piattaforma (informatica)|piattaforma]] software utilizzata, e principalmente mirata all'espansione dei [[dispositivo mobile|dispositivi mobili]].<ref name="Bochiccio-Mostarda" />
== Storia ==
L'HTML è stato sviluppato nei primissimi [[anni novanta]] del [[XX secolo]] da [[Tim Berners-Lee]] al [[CERN]] di [[Ginevra]] ([[Svizzera]]), assieme al protocollo [[Hypertext Transfer Protocol|HTTP]] dedicato al trasferimento di documenti in tale formato. Nel 1989 Berners-Lee propose un progetto che riguardava la pubblicazione di [[Ipertesto|ipertesti]], noto con il nome di "[[world wide web]]". All'interno di questo progetto in seguito nacquero sia il server web "[[httpd]]" (HyperText Transfer Protocol Daemon), sia il client [[WorldWideWeb]] (il primo browser della storia), il cui sviluppo partì nell'ottobre del 1990, e il cui uso fu esclusivamente interno al CERN fino alla sua pubblicazione nella rete [[internet]] nel corso del 1991. Assistito dai suoi colleghi all'interno dell'istituto Svizzero, Berners-Lee concorse alla definizione della prima versione dell'HTML, che fu ufficialmente resa pubblica nel giugno del 1993, co-firmata insieme a Daniel Connolly e sostenuta dal gruppo di lavoro dell'[[Internet Engineering Task Force]] (IETF) chiamato ''Integration of Internet Information Resources'' ("Integrazione delle risorse informative di Internet"), per proporla come standard IETF.<ref name="html1"/>
[[File:Print dialog - print with interface.pdf|alt=Esempio di pagina HTML|miniatura|Esempio di pagina HTML]]
Nel 1994 il linguaggio ha avuto una forte diffusione in seguito ai primi utilizzi commerciali del [[web]], così nello stesso anno nacque il [[World Wide Web Consortium]], e da quel momento in poi, lo sviluppo dell'HTML diverrà prerogativa del W3C.
Nel 1995 il [[W3C]] definì la versione 3.0 di HTML, a cui seguì la versione 3.2 nel 1997, e infine arrivarono nel 1998 le prime specifiche di [[HTML 4.0|HTML4]].
La versione 4.01, pubblicata il 24 dicembre 1999 e penultima versione ufficiale, costituisce il frutto dei diversi ampliamenti e miglioramenti del decennio precedente, in particolare nella separazione del livello presentazionale della formattazione, cioè quella che descrive gli aspetti grafici del documento, in un'entità separata dall'HTML, i fogli di stile a cascata ([[CSS (informatica)|CSS]]), definiti nello stesso anno nella loro prima versione, il livello 1<ref>{{cita web|titolo=Cascading Style Sheets, level 1|sito=World Wide Web Consortium|url=https://www.w3.org/TR/1999/REC-CSS1-19990111|lingua=en}}</ref>. Tale distinzione, tra contenuto e aspetto finale del documento, permette a browser e dispositivi differenti di rappresentare gli stessi contenuti in maniera consona alle diverse capacità grafiche e dimensioni disponibili. Se da una parte questo impone agli [[Web developer|sviluppatori web]] la creazione di personalizzazioni dei fogli di stile, dall'altra ha garantito la massima diffusione del web ed evitato che esso diventasse un [[mass media|medium]] di [[Élite (sociologia)|élite]].
Nel gennaio 2000, viene pubblicato come standard [[XHTML]] 1.0<ref>{{cita web|lingua=en|titolo=XHTML 1.0: The Extensible HyperText Markup Language - A Reformulation of HTML 4 in XML 1.0 - W3C Recommendation|sito=World Wide Web Consortium|data=26 gennaio 2000|url=https://www.w3.org/TR/xhtml1/}}</ref>, una variante di [[HTML 4.0|HTML4]] che usa [[XML]] 2.0 anziché [[SGML]] come metalinguaggio di markup, per migliorarne l'interoperabilità con altri linguaggi della famiglia come [[Scalable Vector Graphics|SVG]] e [[MathML]]<ref>{{cita pubblicazione|lingua=en|titolo=Why the need for XHTML?|opera=XHTML 1.0 Specification|capitolo=§1.1|editore=World Wide Web Consortium|data=26 gennaio 2000|url=https://www.w3.org/TR/xhtml1/#why}}</ref> Il W3C decise di riformulare l'HTML4 e di continuare lo sviluppo solo su XHTML<ref name=html-history>{{cita pubblicazione|lingua=en|titolo=History|opera=HTML5 - A vocabulary and associated APIs for HTML and XHTML - W3C Recommendation|capitolo=§1.4|editore=World Wide Web Consortium|data=28 ottobre 2014|url=https://html.spec.whatwg.org/multipage/introduction.html#history-2}}</ref> e nel maggio 2011 XHTML 1.1 diventa uno standard ufficiale<ref>{{cita web|lingua=en|titolo=XHTML 1.1 - Module-based XHTML - W3C Recommendation|sito=World Wide Web Consortium|data=31 maggio 2001|url=https://www.w3.org/TR/2001/REC-xhtml11-20010531/}}</ref>.
Nel corso del nuovo millennio, il [[W3C]] cominciò a lavorare a due nuovi progetti, uno orientato a estendere l'[[XHTML]], e l'altro destinato a definire un nuovo linguaggio che non sarebbe stato compatibile con le vecchie versioni di HTML e XHTML, noto con il nome di [[XHTML 2]] (quest'ultimo progetto è stato dichiarato ufficialmente fallito alla fine del 2010, in favore di un approccio meno rigido).
Nel 2004, a seguito di una giornata di studi, nasce un gruppo di lavoro alternativo al consorzio: [[Apple]], [[Mozilla Foundation]], [[Opera Software]] e, in un secondo momento, anche [[Google]], si riuniscono nel [[Web Hypertext Application Technology Working Group]] ([[WHATWG]]) e cominciano lo sviluppo di una nuova versione dell'HTML, preoccupati dal disinteresse per l'HTML dimostrato dal consorzio<ref>{{cita web|url=https://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F|lingua=en|titolo=What is the WHATWG?|accesso=19 gennaio 2017}}</ref>. Nel 2006 il W3C decide di prendere parte allo sviluppo di [[HTML5]] e nel 2007 si unì al [[WHATWG]], i due gruppi collaborano fino al 2011, quando si rendono conto di avere obiettivi inconciliabili: il consorzio voleva tracciare una linea e pubblicare una nuova versione delle specifiche standard, mentre il WHATWG voleva uno standard in continua evoluzione<ref name="html-history" />. Il W3C ha pubblicato la quinta revisione delle specifiche il 28 ottobre 2014<ref name="html5" />.
Attualmente i documenti HTML sono in grado di incorporare molte tecnologie, che offrono la possibilità di aggiungere al documento ipertestuale controlli più sofisticati sulla resa grafica, [[interattività|interazioni]] dinamiche con l'utente, animazioni interattive e contenuti [[multimedialità|multimediali]]. Si tratta di linguaggi come [[Foglio di stile|CSS]], [[JavaScript]], [[XML]], [[JSON]], o di altre applicazioni multimediali di [[Scalable Vector Graphics|animazione vettoriale]] o di [[streaming audio]] o [[video]].
Al giorno d'oggi molti [[web designer]] delegano la scrittura del codice HTML ad [[Applicazione (informatica)|applicazioni]] specifiche, come per esempio i cosiddetti editor [[WYSIWYG]] che permettono al designer di occuparsi dell'aspetto grafico finale della pagina mentre il codice vero e proprio viene generato automaticamente. Gli sviluppatori puri preferiscono invece utilizzare direttamente il codice HTML, in modo da avere un maggior controllo sul risultato finale e sulla pulizia del codice scritto, cosa che gli editor WYSIWYG odierni nonostante siano sempre più avanzati non possono sempre garantire, vuoi anche per la diversa resa dei browser sulle parti di codice HTML.
== Descrizione ==
[[File:HTML logo.png|miniatura|150px|Logo dell'HTML]]
L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica ([[Impaginazione|layout]]) del contenuto, testuale e non, di una pagina web attraverso ''[[Tag HTML|tag]]'' di formattazione. Sebbene l'HTML supporti l'inserimento di [[Linguaggio di scripting|script]] e [[Oggetto (informatica)|oggetti]] esterni quali [[immagine digitale|immagini]] o [[video|filmati]], non è un [[linguaggio di programmazione]]: non prevedendo alcuna definizione di [[variabile (informatica)|variabili]], [[strutture dati]], [[funzione (informatica)|funzioni]] o [[struttura di controllo|strutture di controllo]] che possano realizzare [[Programma (informatica)|programmi]], il suo codice è in grado soltanto di strutturare e decorare dati testuali.<ref>
{{cita libro |autore=Thomas Powell |titolo=HTML & XHTML: the complete reference |url=https://archive.org/details/htmlxhtmlcomplet0000powe |editore=McGraw-Hill |anno=2003 |isbn=0-07-222942-X |p=[https://archive.org/details/htmlxhtmlcomplet0000powe/page/25 25] |citazione=''HTML is not a programming language''|lingua=en}}
</ref><ref>{{cita libro |autore=Jennifer Niederst Robbins |titolo=Learning Web Design |url=https://archive.org/details/learningwebdesig00robb |editore=O'Reilly |anno=2007 |isbn=978-0-596-52752-5 |p=[https://archive.org/details/learningwebdesig00robb/page/n5 4] |citazione=''HTML is not a programming language; it is a markup language''|lingua=en}}</ref>
Il linguaggio HTML, o la sua variante [[XHTML]], ha come scopo quello di gestire i contenuti associandone o specificandone allo stesso tempo la struttura grafica ([[Impaginazione|layout]]) all'interno della pagina web da realizzare grazie all'utilizzo di ''[[elemento HTML|tag]]'' diversi. Ogni tag (ad esempio {{Codice|codice=<h1>|linguaggio=HTML}} o {{Codice|codice=<p>|linguaggio=HTML}}) specifica un diverso ruolo dei contenuti che esso contrassegna (quindi il tag {{Codice|codice=<h1>|linguaggio=HTML}} definirà un'importanza maggiore del tag {{Codice|codice=<p>|linguaggio=HTML}}). La formattazione consiste nell'inserimento nel testo di marcatori o etichette, detti ''tag'', che descrivono caratteristiche come la funzione, il colore, le dimensioni, la posizione relativa all'interno della pagina. I [[browser]] che leggono il codice mostrano all'utente formattazioni predefinite per ogni tag che incontrano (così per esempio i contenuti marcati con il tag {{Codice|codice=<h1>|linguaggio=HTML}} avranno carattere 18pt e i contenuti marcati da {{Codice|codice=<p>|linguaggio=HTML}} avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il controllo dell'utente, che può modificarla nelle impostazioni del proprio browser.
Quando un [[ipertesto|documento ipertestuale]] scritto in HTML è memorizzato in un [[file]] la sua [[Estensione (file)|estensione]] è tipicamente <code>.html</code> o <code>.htm</code>.
=== Archiviazione e manipolazione ===
I documenti HTML vengono immagazzinati sui [[disco rigido|dischi rigidi]] di macchine elaboratrici ([[computer]]-[[server]]) costantemente collegate e [[connessione (informatica)|connesse]] alla rete [[Internet]]. Su queste macchine è installato un software specifico ([[web server]]) che si occupa di produrre e inviare i documenti ai browser degli utenti che ne fanno richiesta usando il protocollo [[Hypertext Transfer Protocol|HTTP]] per il [[trasmissione (telecomunicazioni)|trasferimento]] dati.
Spesso il documento HTML viene generato del tutto o parzialmente tramite un [[codice eseguibile]] residente sul server Internet (elaborazione [[lato server]]) in grado di interagire con altre applicazioni presenti sul server stesso, come per esempio una [[base di dati]], e inviare poi al browser il risultato finale, realizzando le cosiddette ''[[pagina web dinamica|pagine web dinamiche]]'' con cui un utente può compiere operazioni [[interattività|interattive]] avanzate (ad esempio filtrare gli articoli all'interno di un catalogo on-line, inviare e registrare dati, fare [[login]] ecc.). È il caso di documenti scritti in linguaggi come [[Active Server Pages|ASP]], [[PHP]], [[Perl]] o [[Java (linguaggio di programmazione)|Java]]. In altri casi invece alcuni tipi di elaborazione sono operati [[lato client]] con linguaggi come [[JavaScript]].
=== Sintassi ===
Il componente principale della [[sintassi]] di questo linguaggio è l'[[Elemento HTML|elemento]], inteso come struttura di base a cui è delegata la funzione di formattare i dati o indicare al [[browser]] delle informazioni.
Ogni elemento è racchiuso all'interno di marcature dette [[tag HTML|''tag'']], costituite da una sequenza di caratteri racchiusa tra due parentesi angolari o uncinate (<code><></code>), cioè i segni minore e maggiore (Es.: {{Codice|codice=<br />|linguaggio=HTML}}; il tag di questo esempio serve per indicare un ritorno a capo).
Quando il tag deve essere applicato a una sezione di testo o di codice, l'ambito di applicazione deve essere delimitato fra un tag di apertura e uno di chiusura (chiusura esplicita), che coincide col tag di apertura preceduto da una barra (''/'') dopo la parentesi angolare aperta (Es.: {{Codice|codice=<b>testo testo testo</b>|linguaggio=HTML}}, in questo caso, il testo compreso tra questi due tag verrà visualizzato in grassetto dal browser).
Alcuni tag presentano un'applicazione puntuale, come per esempio il tag {{Codice|codice=<img>|linguaggio=HTML}} che serve per inserire un'immagine in un determinato punto della pagina, e in quanto tali non richiedono il tag di chiusura; in questo caso si parla di ''tag'' a chiusura implicita. In [[XHTML]], invece, la chiusura implicita è proibita e tutti i tag devono essere sempre chiusi esplicitamente tramite un tag di chiusura o, nel caso dei tag puntuali, usando il carattere '/' alla fine del tag stesso (per esempio {{Codice|codice=<br />|linguaggio=HTML}}). Per questi tag, i browser sono in grado di accettare entrambe le modalità, per motivi di compatibilità.
== Struttura di un documento HTML ==
{{Vedi anche|Elemento HTML}}
[[File:Struttura html.svg|thumb|upright=1.2|Struttura di un generale documento HTML.]]
Un documento HTML inizia con una dichiarazione del tipo di documento, una breve stringa che indica in quale sintassi e relativa versione esso sia scritto, per esempio HTML 4.0 Strict. Tale informazione è necessaria al browser per identificare le regole di interpretazione e visualizzazione appropriate per lo specifico documento, ed è per questa ragione che la dichiarazione deve precedere il documento vero e proprio.
Ogni versione del linguaggio HTML precedenti alla quinta, ovvero fino ad HTML 4.01 o XHTML 1.1, possiede una sintassi formalmente definita da una [[Document Type Definition|definizione del tipo di documento (DTD)]] che, pubblicata sul web dal W3C, indica, per ogni versione, quali elementi, attributi ed entità possano o debbano essere utilizzati, e in quale maniera; pertanto in questi casi la dichiarazione del tipo di documento deve (può, nel caso delle varianti XML) comprendere anche l'[[Uniform Resource Locator|URL]] di tale risorsa. La quinta versione di HTML, invece, non possiede alcuna DTD, pertanto in questi casi la dichiarazione iniziale indica la mera dicitura "HTML".
Per dichiarare un documento che utilizzerà lo standard HTML5 si utilizza il tag {{Codice|codice=<!DOCTYPE html>|linguaggio=HTML}}.
Dopo la dichiarazione del tipo di documento, il documento HTML presenta una struttura ad albero annidato, composta da sezioni delimitate da tag opportuni che al loro interno contengono a loro volta sottosezioni più piccole, sempre delimitate da tag.
La struttura più esterna è quella che delimita l'intero documento, eccetto la DTD, ed è compresa tra i tag {{Codice|codice=<html>|linguaggio=HTML}} e {{Codice|codice=</html>|linguaggio=HTML}}.
All'interno dei tag {{Codice|codice=<html>|linguaggio=HTML}} lo standard prevede sempre la definizione di due sezioni ben distinte e disposte in sequenza ordinata:
* la sezione di intestazione o ''header'', delimitata tra i tag {{Codice|codice=<head>|linguaggio=HTML}} e {{Codice|codice=</head>|linguaggio=HTML}}, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l'eccezione di alcuni elementi
* la sezione del corpo o ''body'', delimitata tra i tag {{Codice|codice=<body>|linguaggio=HTML}} e {{Codice|codice=</body>|linguaggio=HTML}}, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser.
Al di sotto di questa suddivisione generale, lo standard non prevede particolari obblighi per quanto riguarda l'ordine e il posizionamento delle ulteriori sottosezioni all'interno dell{{'}}''header'' o del ''body'', a parte l'indicazione del rispetto dei corretti annidamenti (le sottosezioni non si devono sovrapporre, ossia ogni sottosezione deve essere chiusa prima di iniziare la sottosezione successiva), lasciando così completa libertà allo sviluppatore o al progettista per quanto riguarda la strutturazione e l'organizzazione successive.
=== Tag della ''head'' ===
I tag utilizzati nella sezione ''head'' sono tipicamente di tipo diverso da quelli utilizzati nella sezione ''body'', essendo destinati a scopi differenti. I tag utilizzati nella sezione ''head'' normalmente non vengono visualizzati dal browser ma servono come informazioni di controllo e di servizio quali:
* ''metadata'' per convogliare informazioni utili ad applicazioni esterne (es. motori di ricerca) o al browser (es. codifica dei caratteri, utile per la visualizzazione di alfabeti non latini)
* ''metadata'' di tipo ''http-equiv'' per controllare informazioni aggiuntive nel protocollo [[Hypertext Transfer Protocol|HTTP]]
* collegamenti verso file di servizio esterni ([[CSS (informatica)|CSS]], script, icone visualizzabili nella barra degli indirizzi del browser)
* inserimento di [[script]] (codice eseguibile) utilizzati dal documento
* informazioni di stile (CSS locali)
* il titolo associato alla pagina e visualizzato nella finestra principale del browser
=== Tag del ''body'' ===
All'interno della sezione di ''body'', che racchiude la parte visualizzabile del documento, si utilizzano i tag specifici previsti per la [[Formattazione del testo|formattazione]] dei contenuti accessibili all'utente finale, ossia per il controllo di:
* intestazioni (titoli di capitoli, di paragrafi eccetera)
* strutture di testo (testo indentato, paragrafi, eccetera)
* aspetto del testo (grassetto, corsivo, eccetera)
* elenchi e liste (numerate, generiche, di definizione)
* tabelle
* [[form|moduli elettronici]] (campi compilabili dall'utente, campi selezionabili, menu a tendina, pulsanti eccetera)
* [[Collegamento ipertestuale|collegamenti ipertestuali]] e [[Anchor|ancore]]
* layout generico del documento
* inserimento di immagini
* inserimento di contenuti [[multimedialità|multimediali]] ([[audio]], [[video]], animazioni eccetera)
* inserimento di contenuti [[interattività|interattivi]] ([[script]], applicazioni esterne)
Tra quelli elencati sopra, il tag {{Codice|codice=<a>|linguaggio=HTML}} è quello che gioca un ruolo chiave in quanto descrive un collegamento (o ''link'') a un altro documento ipertestuale consentendo, con un click del [[mouse]] o con un'operazione da [[tastiera (computer)|tastiera]], di abbandonare la pagina o il sito che si sta visualizzando e caricare quella indicata dal link, realizzando così la funzione di navigazione tipica dell'uso di Internet.
=== Tag Principali ===
Il codice HTML è costituito da tag che definiscono i vari elementi della pagina web, come il testo, le immagini, le tabelle, i moduli e così via. I tag vengono inseriti all'interno del codice HTML utilizzando parentesi angolari, e la maggior parte dei tag viene aperta con un tag di apertura e chiusa con un tag di chiusura corrispondente. Alcuni tag, come il tag per l'immagine, non richiedono un tag di chiusura. Ecco la lista dei principali tag:
<html><head><body><title><link><script><p><a><img><hr><br><table><thead><tbody><tr><td><style><th><tfoot><span><div><ul><ol><li><img><video><object><embed><audio><label><option><select><option><h1><h2><h3><h4><h5><input><textarea><button><iframe><source><form><small><em><b><u><i><video><embed><strong><article><footer><header><nav><section>
== Haml ==
'''Haml''' (HTML Abstraction Markup Language) è un sistema di modelli progettato per evitare di scrivere codice ''inline'' in un documento web e rendere l'HTML più pulito. Haml offre la flessibilità di avere alcuni contenuti dinamici in HTML. Simile ad altri linguaggi web come PHP, ASP, JSP e sistemi di modelli come eRuby, Haml incorpora anche del codice che viene eseguito durante il [[runtime]] e genera codice HTML per fornire alcuni contenuti dinamici. Per eseguire il codice Haml, i file devono avere un'estensione <code>.haml</code>. Questi file sono simili ai file <code>.erb</code> o eRuby; aiutano anche a incorporare il codice Ruby durante lo sviluppo di un'applicazione web<ref>{{Cita web|url=https://haml.info/|titolo=Haml|sito=haml.info|accesso=4 febbraio 2021}}</ref>.
; Esempio
Haml utilizza il rientro degli spazi (due spazi) per la nidificazione e l'ambito dei tag che funge da sostituto per le coppie di tag ''open-end'', rendendolo asciutto e più pulito. L'esempio seguente confronta le sintassi di Haml ed eRuby (Embedded Ruby), insieme all'output HTML.
{| class="wikitable"
!Haml
!ERB
!HTML
|-
|
<syntaxhighlight lang="haml" line="1">
%div.category
%div.recipes
%h1= ricetta.nome
%h3= ricetta.categoria
%div
%h4= ricetta.descrizione
</syntaxhighlight>
|
<syntaxhighlight lang="erb" line="1">
<div class="category">
<div class="ricette">
<h1><%= ricetta.nome %></h1>
<h3><%= ricetta.categoria %></h3>
</div>
<div>
<h4><%= ricetta.descrizione %></h4>
</div>
</div>
</syntaxhighlight>
|
<syntaxhighlight lang="html" line="1">
<div class="category">
<div class="ricette">
<h1>Cookie</h1>
<h3>Dessert</h3>
</div>
<div>
<h4>A base di pasta e zucchero. Di solito di forma circolare e ha circa 400 calorie.</h4>
</div>
</div>
</syntaxhighlight>
|}
== Mappe immagine ==
{{Vedi anche|mappa immagine}}
=== Lato client ===
Le mappe immagine lato client sono state introdotte in HTML 3.2 e non richiedono alcuna logica speciale per essere eseguite sul server (sono completamente lato client). Inoltre non richiedono JavaScript.
[[File:Html-area-shape.png|miniatura|Sopra una mappa immagine fatta con il ''tag'' {{Codice|codice=<map>|linguaggio=HTML}}. Sotto tre immagini [[PNG (informatica)|PNG]] trasparenti (si può usare anche il formato [[Graphics Interchange Format|GIF]]) inserite con {{Codice|codice=<img>|linguaggio=HTML}} e aventi dei link {{Codice|codice=<a>|linguaggio=HTML}}. Solo per quanto riguarda quadrati e rettangoli il risultato è lo stesso. Il rosso rappresenta un'immagine e il giallo le aree cliccabili]]
=== HTML puro ===
Una mappa immagine lato client in HTML è composta da due parti:
# l'immagine reale, che è incorporata con il tag {{Codice|codice=<img>|linguaggio=HTML}}. Il tag "image" deve avere un attributo ''usemap,'' che ''assegna'' un nome alla mappa immagine da utilizzare per questa immagine (possono esistere più mappe immagine su una singola pagina).
# Un elemento {{Codice|codice=<map>|linguaggio=HTML}} e, al suo interno, elementi {{Codice|codice=<area>|linguaggio=HTML}}, ciascuno dei quali definisce una singola area cliccabile all'interno della mappa immagine. Essi sono simili al tag {{Codice|codice=<a>|linguaggio=HTML}} che definisce l'URL da aprire per un normale collegamento web. Un attributo <code>title</code> può essere inserito e visualizzato come un suggerimento se un utente desktop passa il puntatore del mouse sull'area. Per motivi di [[Accessibilità (web)|accessibilità web]], è spesso importante — e in alcuni casi può anche essere un requisito legale o contrattuale — fornire un attributo <code>alt</code> che descriva il collegamento che il software di lettura dello schermo può leggere, per esempio, per gli utenti non vedenti<ref name="access-ability">{{Cita web|url=http://accessibility.psu.edu/imagemaps|titolo=Image Maps in HTML|editore=[[Penn State University]]|accesso=6 ottobre 2013|opera=AccessAbility}}</ref>.
Gli elementi {{Codice|codice=<area>|linguaggio=HTML}} possono essere rettangoli (<code>shape="rect"</code>), poligoni (<code>shape="poly"</code>) o cerchi (<code>shape="circle"</code>). I valori di forma sono coppie di coordinate. Ogni coppia ha un valore <math>X</math> e <math>Y</math> (da sinistra / in alto di un'immagine) ed è separata da una virgola.
* [[Rettangolo]]: impostare quattro coordinate: <code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>
* [[Poligono]]: impostare tutte le coordinate che si desidera (un multiplo di due): <code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>, [...] <code>xn</code>, <code>yn</code>
* [[Cerchio]]: una coppia di coordinate e un altro valore con un raggio: <code>x1</code>, <code>y1</code>, <code>raggio</code>
L'esempio seguente definisce un'area rettangolare (9,372,66,397). Quando un utente fa clic in un punto qualsiasi di quest'area, viene indirizzato alla home page di Wikipedia in inglese.
<syntaxhighlight lang="html" line="1"><img src="image.png" alt="Mappa sito web" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map></syntaxhighlight>
=== Creazione e utilizzo ===
È possibile creare mappe immagine lato client a mano utilizzando un editor di testo, ma per farlo è necessario che i web designer sappiano come codificare HTML e come enumerare le coordinate delle aree che desiderano posizionare sull'immagine. Di conseguenza, la maggior parte delle mappe immagine codificate a mano sono semplici poligoni. Poiché la creazione di mappe immagine in un editor di testo richiede molto tempo e impegno, molte applicazioni sono state progettate per consentire ai web designer di creare mappe immagine rapidamente e facilmente, proprio come creerebbero forme in un editor di grafica vettoriale. Esempi di queste applicazioni sono [[Adobe Dreamweaver|Dreamweaver]] di Adobe o KImageMapEditor (per KDE) e un plugin di mappe immagine di [[GIMP]]<ref>{{Cita web|url=https://www.gimp.org/tutorials/Image_Map/|titolo=GIMP - Image Map Tutorial|lingua=en|accesso=22 marzo 2021}}</ref>.
Le mappe di immagini che non rendono evidenti le loro aree cliccabili rischiano di sottoporre l'utente a una navigazione misteriosa. Anche quando lo fanno, dove conducono potrebbe non essere ovvio. Questo può essere parzialmente risolto con effetti di rollover<ref>{{Cita libro|nome=Vincent|cognome=Flanders|titolo=Web Pages That Suck: Learn Good Design by Looking at Bad Design|url=https://archive.org/details/webpagesthatsuck00flan|data=March 1998|editore=Sybex Inc|città=San Francisco|isbn=978-0-7821-2187-2}}</ref>.
=== Immagini SVG ===
Poiché il formato immagine SVG ([[Scalable Vector Graphics]]) fornisce i propri meccanismi per l'aggiunta di collegamenti ipertestuali e altre forme più sofisticate di interattività alle immagini, le tecniche tradizionali di mappatura delle immagini non sono generalmente necessarie quando si lavora con immagini vettoriali nel formato SVG. Esempio (una mappa immagine rettangolare)<ref>{{Cita web|url=http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG|titolo=Create A Responsive Imagemap With SVG|autore=Dudley Storey|sito=the new code|lingua=en|accesso=22 marzo 2021}}</ref>:<syntaxhighlight lang="html" line="1">
<figure id="prova">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet">
<image width="1200" height="808" xlink:href="prova.jpg"></image>
<a xlink:href="http://www.sito.it/">
<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750"></rect>
</a>
</svg>
</figure>
</syntaxhighlight>CSS:<syntaxhighlight lang="css" line="1">
#prova {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#prova svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
</syntaxhighlight>
=== Alternative ===
Esistono alternative visivamente identiche alle mappe immagine create con il ''tag'' {{Codice|codice=<map>|linguaggio=HTML}}. Esse consistono nel creare forme e/o maschere di immagini con varie tecniche CSS, renderle cliccabili, nasconderle con opacità "0" o inserendo GIF o PNG o SVG trasparenti e infine sovrapporle ad un'immagine<ref>{{Cita web|url=https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/|titolo=The Many Ways to Link Up Shapes and Images with HTML and CSS|sito=CSS-Tricks|data=1º ottobre 2019|lingua=en|accesso=23 marzo 2021}}</ref><ref>{{Cita web|url=https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image|titolo=Masking Images in CSS Using the mask-image Property|sito=DigitalOcean|lingua=en|accesso=23 marzo 2021}}</ref><ref>{{Cita web|url=https://css-tricks.com/masking-vs-clipping-use/|titolo=Masking vs. Clipping: When to Use Each|sito=CSS-Tricks|data=7 giugno 2017|lingua=en|accesso=23 marzo 2021}}</ref>.
==== Clip-path CSS ====
Esempio (un'area cliccabile a forma di stella):
HTML<syntaxhighlight lang="html" line="1">
<a href="http://www.sito.com">
<img height="100px" width="100px" src="immagine.jpg" class="clip">
</a>
<a class="star-link clip" href="http://www.sito.com"></a>
<svg>
<defs>
<clipPath id="clip">
<polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" />
</clipPath>
</defs>
</svg>
</syntaxhighlight>CSS<syntaxhighlight lang="css" line="1">
.clip {
clip-path: url(#clip);
}
.star-link {
position: absolute;
left: 125px;
background-color: blue;
min-height: 100px;
height: 100px;
width: 100px;
min-width: 100px;
}
.clip:hover {
opacity: 0.5;
}
</syntaxhighlight>
==== Forme CSS ====
Esempio (un'area cliccabile a forma di cuore):
HTML<syntaxhighlight lang="html">
<a id="heart" href="https://www.sito.it"></a>
</syntaxhighlight>CSS<syntaxhighlight lang="css" line="1">
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</syntaxhighlight>
==== Mask-image CSS ====
Esempio (un'area cliccabile triangolare):
HTML<syntaxhighlight lang="html" line="1">
<svg width="0" height="0" viewBox="0 0 400 600">
<defs>
<mask id="my-svg-mask">
<rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
<polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
</mask>
</defs>
</svg>
</syntaxhighlight>CSS<syntaxhighlight lang="css" line="1">
.mask5 {
-webkit-mask-image: url(#my-svg-mask);
mask-image: url(#my-svg-mask);
}
</syntaxhighlight>
== Strumenti ==
=== W3C Validator ===
{{Vedi anche|W3C Validator}}
Il [[World Wide Web Consortium]] cura un sito web chiamato [[W3C Validator]], progettato per validare rapidamente una qualsiasi pagina HTML e segnalare eventuali errori, al fine di poter effettuare una rapida correzione verso un rispetto più rigido agli standard e alle raccomandazioni ufficiali.<ref>{{Cita web|https://validator.w3.org/|W£C Markup Validation Service|4 febbraio 2022|lingua = en|sito=[[W3C]]}}</ref><ref>{{Cita web|https://packages.debian.org/bullseye/w3c-markup-validator|Package: w3c-markup-validator|sito=[[Debian]]|lingua=en|4 febbraio 2022}}</ref>
Il ''W3C Validator'' è spesso citato nelle dichiarazioni di [[Accessibilità (web)|accessibilità]] dei siti web, fra cui siti web della pubblica amministrazione.<ref>{{Cita web|https://www.comune.grugliasco.to.it/it/accessibility|Accessibilità del sito del comune di Grugliasco|4 febbraio 2022|citazione=Tutte le pagine del sito sono state testate hanno superato la validazione HTML5 effettuata con il W3C Validator}}</ref>
=== HTML Tidy ===
{{Vedi anche|HTML Tidy}}
HTML Tidy è uno strumento ideato dal ricercatore e sviluppatore [[Dave Raggett]]<ref>{{Cita web|https://www.w3.org/People/Raggett/cv.html|Dave Raggett|4 febbraio 2021|lingua=en|sito=[[W3C]]}}</ref>, per aiutare ad evitare di fare errori nella stesura di codice HTML.
Tidy infatti si occupa di correggere tutti gli errori più tipici in cui si incorre durante lo sviluppo di codice web. Inoltre si occupa di rendere leggibile il codice generato da editor HTML, e di segnalare all'utente dove deve prestare più attenzione. Riesce a riconoscere una vasta gamma di errori, segnalandoli come ''warnings'' (avvertimenti), ai quali affianca numero di riga e colonna.
== Note ==
<references/>
== Bibliografia ==
* {{RivistaVG|mc|177|316-320|10|1997|titolo=La storia dell'HTML}}
== Voci correlate ==
* [[Applicazione HTML]]
* [[CSS]]
* [[Document Type Definition]]
* [[Elemento HTML]]
* [[HTML5]]
* [[HTML Tidy]]
* [[Linguaggio di markup]]
* [[XHTML]]
* [[MHTML]]
== Altri progetti ==
{{interprogetto|b=Linguaggio HTML|wikt|preposizione=sull'}}
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{FOLDOC|Hypertext Markup Language|Hypertext Markup Language}}
* {{cita web|https://www.w3.org/TR/html4/|Specifiche ufficiali di HTML, versione 4 del W3C|lingua=en}}
* {{cita web|https://html.spec.whatwg.org/multipage/|Specifiche ufficiali di HTML, versione 5 del W3C|lingua=en}}
* {{cita web|https://www.html.it/guide/guida-html/|Guida HTML}}
<!-- NON INSERIRE ALTRI LINK ESTERNI, EVENTUALMENTE SEGNALARLI SU DMOZ, GRAZIE -->
{{Norme IEC}}
{{Browser Internet}}
{{Controllo di autorità}}
{{Portale|internet|telematica}}
[[Categoria:Standard W3C]]
[[Categoria:HTML| ]]
[[Categoria:Formati di file]]
[[Categoria:Standard ISO/IEC|15445]]
| |||