HTML – INTRODUZIONE
L’HyperText Markup Language (HTML; traduzione letterale: linguaggio a marcatori per ipertesti), in informatica è il linguaggio di markup solitamente usato per la formattazione e impaginazione di documenti ipertestuali disponibili nel World Wide Web sotto forma di pagine web, nato assieme al web 1.0.
È un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C), e che è derivato da un altro linguaggio avente scopi più generici, l’SGML.
Caratteristiche generali
L’HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso tag di formattazione. Sebbene l’HTML supporti l’inserimento di script e oggetti esterni quali immagini o filmati, non è un linguaggio di programmazione: non prevedendo alcuna definizione di variabili, strutture dati, funzioni o strutture di controllo che possano realizzare programmi, il suo codice è in grado soltanto di strutturare e decorare dati testuali.
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 (layout) all’interno della pagina web da realizzare grazie all’utilizzo di tag diversi. Ogni tag (ad esempio <h1> o <p>) specifica un diverso ruolo dei contenuti che esso contrassegna (quindi il tag <h1> definirà un’importanza maggiore del tag <p>). 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ì ad esempio i contenuti marcati con il tag <h1> avranno carattere 18pt e i contenuti marcati da <p> avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il controllo dell’utente, che può modificarla nelle Impostazioni del suo browser.
Quando un documento ipertestuale scritto in HTML è memorizzato in un file la sua estensione è tipicamente .html o .htm
Archiviazione e manipolazione
I documenti HTML vengono immagazzinati sui dischi rigidi di macchine elaboratrici (computer-server) costantemente collegate e 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 https per il 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 un database, e inviare poi al browser il risultato finale, realizzando le cosiddette pagine web dinamiche con cui un utente può compiere operazioni interattive avanzate (ad es. 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 ASP, PHP, Perl o 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, 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, costituite da una sequenza di caratteri racchiusa tra due parentesi angolari o uncinate (<>), cioè i segni minore e maggiore (Es.: <br />; 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 ed uno di chiusura (chiusura esplicita), che coincide col tag di apertura preceduto da una barra (/) dopo la parentesi angolare aperta (Es.: <b>testo testo testo</b>, 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 <img> 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 <br / >). Per questi tag, i browser sono in grado di accettare entrambe le modalità, per motivi di compatibilità.
Struttura di un documento HTML
Un documento HTML comincia 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 debba 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 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’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”.
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 <html> e </html>.
All’interno dei tag <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 <head> e </head>, 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 <body> e </body>, 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 https-equiv per controllare informazioni aggiuntive nel protocollo https
– collegamenti verso file di servizio esterni (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 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
– moduli elettronici (campi compilabili dall’utente, campi selezionabili, menu a tendina, pulsanti eccetera)
– collegamenti ipertestuali e ancore
– layout generico del documento
– inserimento di immagini
– inserimento di contenuti multimediali (audio, video, animazioni eccetera)
– inserimento di contenuti interattivi (script, applicazioni esterne)
Tra quelli elencati sopra, il tag <a> è 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, 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.
Applicazione HTML
Un’ applicazione HTML (HTA) è un’applicazione per Microsoft Windows scritta in HTML e HTML dinamico. La possibilità di scrivere HTA è stata introdotta a partire dalla release 5.0 di Microsoft Internet Explorer. Un file HTA può essere ottenuto da un normale HTML semplicemente cambiando l’estensione in .hta. Per personalizzare l’aspetto di una HTA è stato introdotto un nuovo tag con attributi: <hta:application …> inserito nella sezione <head>…</head> dei documenti HTA.
Le funzionalità di un file HTML ordinario sono limitate dal modello di sicurezza del browser web – per esempio può comunicare col server, manipolare pagine (di solito per validare form e/o creare effetti grafici), scrivere cookie. Un HTA invece viene eseguito come applicazione fully trusted e quindi possiede più privilegi di un normale file HTML – per esempio può creare / modificare / eliminare file ed entry del registro di sistema di Windows.
HTML5
L’HTML5 è un linguaggio di markup per la strutturazione delle pagine web, pubblicato come W3C Raccomandato da ottobre 2014.
Novità
Le novità introdotte dall’HTML5 rispetto all’HTML4 sono finalizzate soprattutto a migliorare il disaccoppiamento fra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l’HTML5 prevede il supporto per la memorizzazione locale di grandi quantità di dati scaricati dal web browser, per consentire l’utilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet.
In particolare:
– vengono rese più stringenti le regole per la strutturazione del testo in capitoli, paragrafi e sezioni;
– vengono introdotti elementi di controllo per i menu di navigazione;
– vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici;
– vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <video> e <audio>);
– vengono deprecati o eliminati alcuni elementi che hanno dimostrato scarso o nessun utilizzo effettivo;
– vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati all’accessibilità, finora previsti solo per alcuni tag;
– viene supportato Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap;
– introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi mobili (quali Android e iOS, tra i più diffusi);
– sistema alternativo ai normali cookie, chiamato Web Storage, più efficiente, il quale consente un notevole risparmio di banda;
– standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di utilizzare alcuni siti offline;
– sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE html>.
Very interesting!
Great article, very clear excellent exposure.
Exceptional blog post.
great article
Іt’s always interesting tо rеad articles fгom other authors and use
a littlｅ something from otheг web sitеs.
At this moment I аm going away to do mʏ breakfaѕt, afterward having my brｅakfast coming again to read additional news.
Asking questions are actually nice thing if you are not
understanding something fully, however this post
presents pleasant understanding yet.
Wow, tһat’s what I was looking for, whɑt a stuff! existing here at this weblоg,
thanks admin of this web site.
Ηello there, just became aware of your blⲟg through Google, and found
that it’s really informative. I’m going to watch out for brussеls.
I wilⅼ be grateful if you continue this in future.
A lot of people will be benefited from your writing.
Cheers!
_____
TY!
Sito ad alti contenuti. Dovresti continuare così per sempre! Buona fortuna.