HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
errore di testo Etichette: Annullato Modifica visuale |
m Annullata la modifica di 93.47.123.20 (discussione), riportata alla versione precedente di Simone Biancolilla Etichetta: Rollback |
||
| (12 versioni intermedie di 7 utenti non mostrate) | |||
Riga 17:
|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
[[File:Print dialog - print with interface.pdf|alt=Esempio di pagina HTML|miniatura|Esempio di pagina HTML]]
Nel
Nel
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
Nel
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
== Descrizione ==
[[File:HTML logo.png|miniatura|150px|Logo dell'HTML]]
L'HTML è un
{{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=<
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>.
Line 57 ⟶ 55:
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
=== Sintassi ===
Il componente principale della [[sintassi]] di questo linguaggio è l
Ogni elemento è racchiuso all'interno di marcature dette
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
Alcuni tag presentano un'applicazione puntuale, come per esempio il tag {{Codice|codice=<
== Struttura di un documento 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.
Line 75 ⟶ 73:
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
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=<
All'interno dei tag {{Codice|codice=<
* la sezione di intestazione o ''header'', delimitata tra i tag {{Codice|codice=<
* la sezione del corpo o ''body'', delimitata tra i tag {{Codice|codice=<
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.
Line 110 ⟶ 108:
* inserimento di contenuti [[interattività|interattivi]] ([[script]], applicazioni esterne)
Tra quelli elencati sopra, il tag {{Codice|codice=<
=== Tag Principali ===
Line 116 ⟶ 114:
<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
; Esempio
Line 129 ⟶ 125:
|-
|
<syntaxhighlight lang="haml" line="1">
%div.recipes
%div
%h4= ricetta.descrizione
</syntaxhighlight>
|
<syntaxhighlight lang="erb" line="1">
<div class="ricette">
<
<div>
</syntaxhighlight>
|
<syntaxhighlight lang="html" line="1">
<div>
<h4>A base di pasta e zucchero. Di solito di forma circolare e ha circa 400 calorie.</h4>
</div>
</syntaxhighlight>
|}
== Mappe 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''
=== HTML puro ===
Una mappa immagine lato client in HTML è composta da due parti:
# l'immagine reale, che è incorporata con il tag
# Un elemento
Gli elementi
* [[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 ===
Line 190 ⟶ 192:
=== 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>
Line 257 ⟶ 233:
<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>
Line 317 ⟶ 266:
<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 {
content: "";
top: 0;
height: 80px;
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>
Line 370 ⟶ 297:
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>
Line 408 ⟶ 321:
=== HTML Tidy ===
{{
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 ''
== Note ==
| |||