IL LINGUAGGIO HTML 2 Introduzione al linguaggio HTML HTML è l’acronimo di e si potrebbe tradurre con “linguaggio che utilizza i markup per descrivere gli ipertesti”. Hyper Text Markup Language Un documento HTML normalmente è composto da testo e tag che, insieme, formano quello che prende il nome di markup. I servono a “ ” specifiche per trasformarlo in qualcosa di diverso, per esempio un link o un’immagine, o per esprimere informazioni sulla struttura della pagina web. tag etichettare parti di testo I tag sono testi inseriti all’interno dei simboli e che > vengono usati come se fossero delle parentesi I termini che vengono inseriti all’interno dei tag non sono testo casuale, ma sono parole che seguono precise regole di sintassi. I tag possono essere: : cioè su cui vengono applicati come se fossero loro stessi delle parentesi. In questo caso il è al tranne per il fatto che all’inizio ha anche una barra /; doppi inseriti all’inizio e alla fine del testo tag di chiusura uguale tag di apertura : ovvero costituiti dal ; singoli solo tag di apertura : è possibile allo stesso testo, seguendo le stesse regole di annidamento con cui si applicano le normali parentesi. multipli applicare più tag I tag di apertura, in alcuni casi, possono contenere degli , cioè parole speciali che controllano il comportamento di un elemento. Agli attributi è possibile assegnare dei . Nel caso in cui vengano utilizzati più attributi, l’ordine con cui vengono scritti all’interno del tag è irrilevante. attributi valori esempio attenzione Il linguaggio HTML non è case sensitive , cioè non fa distinzione tra maiuscole e minuscole. Tuttavia, per convenzione, solitamente vengono utilizzate le lettere minuscole, sia per scrivere i tag, sia per scrivere gli attributi. Il linguaggio HTML , perché la sua funzione non è quella di specificare un insieme di istruzioni attraverso le quali controllare il funzionamento di una macchina producendo eventuali output, ma permette di all’interno di una pagina web. non è un linguaggio di programmazione indicare come disporre gli elementi attenzione Quando si scrive in linguaggio HTML si devono usare sempre le virgolette " . Lo sapevi che Il termine tag significa targhetta o cartellino, come quelli che vengono utilizzati per il prezzo sui capi di abbigliamento. >> pagina 340 La struttura di un documento HTML Un documento HTML è composto da un “contenitore” principale delimitato dal , che racchiude tutto quello che verrà scritto, suddiviso in due distinte: tag <html> sezioni : contiene soprattutto impostazioni e informazioni utili per la pagina; head ▶ : contiene sostanzialmente tutto ciò che il browser deve mostrare. body ▶ Per semplificare, potremmo dire che nella head viene scritto “tutto quello che non si vede” nella pagina web, mentre nel body viene inserito “tutto quello che si vede”. Per esempio le immagini e il testo della pagina vengono inseriti nel body, mentre le informazioni sugli eventuali altri linguaggi (per esempio CSS, JavaScript ecc.) utilizzati per realizzare la pagina vengono scritti nella head. In realtà, la suddivisione “si vede/non si vede” non è formale e non è neanche così netta. Per esempio il testo contenuto nel tag <title>, pur trovandosi nella head visualizza un testo nella scheda del broswer. esempio Scriviamo nel Blocco note un codice HTML, salviamolo come index.txt e quindi cambiamo la sua estensione in .html. Nell’esempio possiamo notare che: i , come se fossero delle parentesi, contengono fra questi tag tutto il codice html e indicano al browser “tutto il testo contenuto fra questi tag è stato scritto in linguaggio HTML”; tag <html> i e delimitano le due sezioni. Il testo “Contenuto del documento......” viene visualizzato all’interno del browser, mentre il testo “Titolo del documento”, essendo inserito fra i tag <title>, viene visualizzato come titolo della scheda del browser. tag <head> <body> Se il tag <title> non fosse presente, in mancanza di specifiche indicazioni, nella scheda del browser verrebbe visualizzato il nome del file (che in questo caso è index.html). Approfondimento – Il testo nel tag <title> / head testa / body corpo >> pagina 341 L’importanza del file index.html Nell’esempio precedente abbiamo chiamato il file index.html perché, per convenzione, è il che i server web cercano in una cartella e solitamente corrisponde alla home page di un sito web. nome di default del primo file HTML Quando il sito viene salvato sul disco del PC, le pagine web risultano visibili solo da quel computer. Per su Internet, occorre caricarlo su un server web che lo renda fruibile a chiunque, ovunque e in qualunque momento. Dopo che il sito web è stato caricato, è possibile in due modi: pubblicare il sito web accedere alla prima pagina se la 1. pagina ha un nome generico (per esempio primapagina.html): l’utente deve specificare esplicitamente il nome della pagina iniziale all’interno dell’indirizzo (per esempio http://www.ilmiosito.it/primapagina.html); se la 2. pagina si chiama index.html : l’utente può digitare semplicemente http://ilmiosito.it/ e il server web, di default, visualizza il file index.html. prova tu Vero o falso? Il tag è un testo inserito all’interno dei due simboli < e >. V F Il tag può essere solo singolo e può contenere degli attributi. V F L’HTML è un linguaggio di programmazione. V F La <head> contiene impostazioni e informazioni utili alla pagina. V F L’ambiente Notepad++ Come abbiamo visto, utilizzando esclusivamente un editor di testo e un browser, teoricamente, è possibile realizzare siti web anche complessi: basta conoscere i linguaggi. Tuttavia, al crescere del numero di tag, lavorare in questo modo non risulta semplice, infatti i programmatori (o sviluppatori) utilizzano specifici ambienti che facilitano notevolmente il lavoro. Notepad++ è un , scaricabile gratuitamente da Internet, che fornisce un buon ambiente di lavoro per sviluppare siti web. editor di testo Nella finestra principale possono essere individuati: un foglio di lavoro all’interno del quale poter scrivere il codice; un menu testuale; una serie di pulsanti con gli strumenti principali. Scrivendo un codice HTML nel foglio di lavoro, apparentemente l’effetto è identico a quello che si ottiene utilizzando Blocco note, nel quale l’unico modo per aumentare la leggibilità del codice è utilizzare manualmente l’indentazione. L’ del testo consiste nell’inserimento di spazi vuoti all’inizio delle righe per far rientrare il testo verso destra. In informatica è una convenzione molto diffusa. indentazione Notepad++ consente di migliorare ulteriormente la leggibilità del codice i tag con colori che rendono più evidenti i contenuti testuali. Per attivare questa funzionalità occorre segnalare al programma che il testo è stato scritto usando il linguaggio HTML: selezionando il menu → → . evidenziando automaticamente Linguaggio H HTML Come per Blocco note, anche con Notepad++ occorre . È sufficiente fare clic sul pulsante e scegliere un nome. Se è stato selezionato il linguaggio HTML, il programma salva con l’estensione corretta. salvare il file Salva Per (per esempio Google Chrome) fare clic su → → . visualizzare il documento HTML all’interno del browser Visualizza Visualizza file attuale in Chrome attenzione Notepad++ è in grado di riconoscere anche le parole chiave e la sintassi di altri linguaggi come per esempio il linguaggio C, il C++, Java, JavaScript, PHP e Python. >> pagina 342 I tag principali I tag del linguaggio HTML sono moltissimi, di seguito descriviamo i principali. I tag di commento Quando uno sviluppatore scrive può avere la necessità di inserire delle note all’interno del codice. È evidente che questi appunti non possono essere semplicemente inseriti nel documento perché verrebbero visualizzati dal browser. Occorre quindi inserirli all’interno di opportuni . Il , interpretando il codice, , anche se si trova distribuito su più righe. tag di commento browser ignorerà tutto il testo racchiuso nei tag I tag di commento, all’interno dei quali scrivere il testo, sono e . <!-- --> esempio attenzione In informatica il programmatore viene anche chiamato sviluppatore di software. Lo sviluppatore web , in particolare, è specializzato nello sviluppo di applicazioni per il World Wide Web . >> pagina 343 I tag àncora per collegare le pagine I link generalmente collegano due pagine web. Sulla viene inserita una frase (o una parola chiave) che fa riferimento a un argomento specifico che deve essere approfondito. Facendo clic sulla frase viene aperta una web che contiene l’approfondimento. Solitamente il link ha un colore diverso rispetto al resto del testo e, al passaggio del mouse, la forma del puntatore cambia. prima pagina seconda pagina Per in una pagina si utilizza il al quale si devono associare : inserire un link tag àncora due informazioni 1. su quali parole si deve fare clic (per raggiungere la nuova pagina): questa informazione deve essere inserita fra i tag; 2. quale pagina viene aperta (quando si fa clic sul link): il riferimento ipertestuale alla pagina collegata deve essere inserito come valore nell’attributo href (abbreviazione di Hypertext REFerence ), che deve essere sempre presente. In linguaggio HTML la sintassi per inserire un collegamento a una pagina è: indirizzo della pagina da aprire testo del link <a href=" "> </a> Se la pagina da aprire è quella di un sito web già caricato in rete occorre specificare il suo URL. esempio È possibile scegliere dove aprire la nuova pagina web, modificando il valore dell’attributo (che è facoltativo). Per aprire la pagina: target in una : si deve assegnare il valore ; nuova scheda _blank nella : si deve assegnare il valore (valore di default). stessa scheda _self esempio Il codice dell’esempio precedente diventa: nuova scheda <a href="https://www.google.com" >Vai al motore di ricerca!</a> target="_blank" stessa scheda <a href="https://www.google.com" > Vai al motore di ricerca!</a> target="_self" Se la nuova pagina da aprire è offline, creata e salvata in locale, dobbiamo: creare la pagina alla quale fare riferimento nel link (per esempio pagina2.html); creare la pagina (per esempio pagina1.html) all’interno della quale richiamare la precedente; salvare entrambe le pagine nella stessa cartella. esempio Anche nel caso di pagine offline può essere inserito l’attributo facoltativo target per aprire (oppure no) il link in una nuova scheda. Esiste anche la possibilità di far in cui è inserito il link su cui fare clic. Questo può essere utile allo sviluppatore quando crea la pagina che contiene il link prima di aver creato la seconda pagina alla quale puntare, inserendo un link “fittizio”, ma funzionante. puntare l’attributo href alla stessa pagina Per inserire in una pagina un link che punta alla pagina stessa, si deve scrivere: <a >testo del link</a> href="#" attenzione La scelta di inserire tutti i file del sito web nella stessa cartella semplifica il lavoro perché consente di non specificare il path dei file coinvolti. Questa scelta non è attuabile nel caso di siti web grandi e complessi. prova tu Quale tag permette di definire un link alla pagina che si chiama “pagina3.html”? <a href="pagina.html">pagina3.html</a> <a src="pagina3.html">pagina3 html</a> <a href="pagina3.html">pagina html</a> >> pagina 345 I tag di intestazione I tag che indentificano e i all’interno della pagina si chiamano titoli sottotitoli tag di heading sono dei tag doppi e sono identificati dal carattere h e da numeri che vanno da 1 a 6 (<h1>, <h2>, <h3> ecc.). Via via che il numero cresce, la dimensione del carattere diminuisce. I (cioè inseriscono nel proprio indice) i siti presenti nel web, catalogandoli che vengono trattati all’interno delle loro pagine. Per “capire” qual è l’argomento di cui si parla nel sito web, i , in generale, motori di ricerca indicizzano in base agli argomenti motori di ricerca ricercano le parole chiave anche nei tag di heading considerando maggiormente importanti quelle contenute negli <h1> rispetto a quelle contenute negli <h6> (o nei paragrafi del testo, che tratteremo di seguito). Quindi se, per esempio, un sito web tratta con priorità l’argomento “Torta di mele” è buona norma che lo sviluppatore scriva queste parole chiave all’interno del tag <h1> e inserisca “Torte della nonna” in <h3>. Per giudicare se un sito è “fatto bene”, e quindi se merita di essere fra i primi risultati della SERP, i motori di ricerca danno sempre meno importanza al contenuto degli heading e maggiore rilievo ad altri parametri (→ unità 9). posizionato La (così come quella dei paragrafi) non è quella di definire l’aspetto estetico di un testo, ma piuttosto quella di nella pagina, all’interno delle quali inserire blocchi di testo. principale funzione degli heading identificare delle sezioni Il tag del paragrafo Nel linguaggio HTML il , identificato dal , definisce un all’interno del quale può essere inserito un . paragrafo tag contenitore blocco di testo Come abbiamo visto, il testo potrebbe anche essere inserito direttamente all’interno del body senza bisogno di utilizzare il tag . Tuttavia la presenza di questo tag contribuisce a fornire un’identità più chiara ai contenuti testuali della pagina, aiutando i motori di ricerca a interpretarli con maggiore correttezza. <p> I tag di stile del carattere Al testo contenuto in una pagina web possono essere alcuni visti per i programmi applicativi. applicati degli stili e degli effetti di formattazione del testo Nella seguente tabella sono raccolti i diversi stili con i tag di riferimento. Stile Tag Esempio grassetto <b>...</b> testo grassetto corsivo <i>...</i> testo corsivo sottolineato <u>...</u> testo sottolineato barrato <s>...</s> testo barrato pedice <sub>...</sub> testo a pedice apice <sup>...</sup> testo ad apice rafforzato <strong>...</strong> testo rafforzato enfatizzato <em>...</em> testo enfatizzato attenzione Per un browser, dal punto di vista estetico, applicare a un testo uno stile rafforzato equivale ad applicare un grassetto e applicare uno stile enfatizzato equivale a un corsivo. Per un , invece, esiste una : il testo racchiuso all’interno dei (o ) è importante e quindi viene , mentre il testo racchiuso nei tag <b> (o <i>) è un testo irrilevante che viene solo evidenziato dal browser. motore di ricerca sostanziale differenza tag <strong> <em> considerato durante l’indicizzazione Lo sapevi che Il è l’abbreviazione del termine inglese tag <em> emphasize che si traduce con enfatizzare, cioè dare rilievo. >> pagina 346 Il tag a capo Al termine della visualizzazione di un heading (o di un paragrafo), il browser inserisce sempre un “a capo”. Nel caso in cui sia necessario inserire un a capo in una posizione diversa, per esempio a metà di una frase, scrivere il testo nella riga successiva del documento HTML non ha alcun effetto sulla visualizzazione della pagina: il browser, infatti, . ignora tutti i ritorni a capo che sono presenti nel codice HTML deve quindi essere inserito esplicitamente utilizzando il (abbreviazione dell’inglese L’inizio in una nuova riga tag a capo <br> ▶ break ). Ciascun tag <br> corrisponde a una pressione virtuale del tasto . INVIO esempio / break interruzione >> pagina 347 Il tag per inserire una riga orizzontale Il (abbreviazione di ) nella pagina. tag <hr> ▶ horizontal row inserisce una linea orizzontale La principale funzione di questo tag è quella di inserire una più che una riga estetica. pausa tematica esempio / horizontal row riga orizzontale Il tag immagine e i suoi attributi Per (fotografia o disegno) in una pagina web si usa il . inserire un’immagine tag immagine <img> Si tratta di un tag singolo, privo di chiusura, dentro al quale si inseriscono diversi attributi, alcuni obbligatori e altri facoltativi: l’attributo obbligatorio (abbreviazione dell’inglese ): contiene il e , che si intende inserire nella pagina; src ▶ source nome l’estensione dell’immagine l’attributo facoltativo (abbreviazione dell’inglese ): contiene . La funzione principale del testo è quella di all’interno della pagina nel caso in cui il file sorgente non venisse trovato dal browser; alt ▶ alternative il testo che descrive l’immagine sostituire l’immagine gli attributi facoltativi e : servono per anche, eventualmente, deformandola. ▶ width ▶ height modificare le dimensioni dell’immagine Per ridimensionare l’immagine mantenendo le proporzioni è possibile intervenire su uno solo dei due attributi. La sintassi per inserire un’immagine con gli attributi descritti è: nome file testo descrittivo valore altezza valore larghezza <img src=" " alt=" " height=" " width=" "> / source sorgente (luogo di origine) / alternative alternativo / width larghezza / height altezza attenzione Quando inseriamo un’immagine in una pagina, non inseriamo il file nel documento html , ma inseriamo un “collegamento”. È fondamentale salvare l’immagine dentro alla stessa cartella in cui si trova la pagina che la richiama. esempio Inseriamo l’immagine di un fiore in una pagina web, indicando anche un testo alternativo. Nel file index.html scriviamo il codice: <img src="fiore.jpg" alt="Fiorellino"> Quando carichiamo la pagina del browser vediamo l’immagine nelle sue dimensioni effettive. Se cancelliamo il file fiore.jpg dalla cartella in cui è salvato e ricarichiamo la pagina del browser, leggiamo il testo descrittivo inserito con l’attributo alt. Se vogliamo modificare le dimensioni dell’immagine inserita dobbiamo aggiungere al codice anche gli attributi height e width. per mantenere le proporzioni: <img src="fiore.jpg" alt="Fiorellino" width="200"> per deformare <img src="fiore.jpg" alt="Fiorellino" height="140" width="70"> L’ utilizzata per definire altezza e larghezza dell’immagine è il quindi, non si tratta di un’unità di misura assoluta, come potrebbe essere per esempio il centimetro: la grandezza dell’immagine espressa in pixel dipende dai dpi (▶ unità 3). Questo significa che su dispositivi diversi, la dimensione in centimetri dell’immagine può variare. unità di misura pixel Come sappiamo, è possibile di un’immagine senza perdere qualità, al contrario , superati i quali l’immagine appare quadrettata per la perdita di informazioni. sempre ridurre la dimensione l’ingrandimento è possibile solo entro certi limiti Più informazione è contenuta all’interno dell’immagine, minore è la possibilità di sgranarla ingrandendola, ma un’ ha un “peso” maggiore e quindi necessita non solo di per essere salvata, ma soprattutto di per essere trasmessa. Se in una pagina web vengono nel browser viene notevolmente e occorre più tempo per poterne usufruire (soprattutto se la rete con cui si accede ha dei limiti). immagine con molte informazioni più spazio più tempo inserite immagini pesanti il caricamento del sito web rallentato I motori di ricerca posizionano i siti “lenti” più in basso nella SERP. Per gli sviluppatori web utilizzano prevalentemente le (jpg e gif) perché pesando poco vengono . evitare il “declassamento” immagini a 72 dpi caricate nel browser molto rapidamente attenzione Anche le immagini possono essere trasformate in collegamenti ipertestuali. Per farlo è sufficiente racchiudere il tag <img> all’interno del tag àncora <a>. Per esempio: <a href="http://www.google. it"><img src="fiore.jpg"></a> Lo sapevi che Le parole inserite nell’attributo alt sono anche quelle che vengono lette automaticamente dai software per i non vedenti e vengono utilizzate dai motori di ricerca come ulteriori parole chiave per indicizzare i contenuti della pagina. >> pagina 349 I tag delle liste Le liste sono un modo per all’interno di una pagina. In generale, vengono perché all’interno della pagina. organizzare gli elenchi apprezzate dai motori di ricerca permettono di ripetere le parole chiave Nel linguaggio HTML ogni singolo elemento della lista ( ) viene racchiuso fra i . list item tag <li> Le liste possono essere di due tipi: : sono gli in cui vengono elencati elementi senza un particolare ordine sequenziale (per esempio la lista della spesa). Per inserire nel documento HTML una lista non ordinata si utilizza il tag ; liste non ordinate ▶ elenchi puntati <ul> : sono gli in cui gli elementi vengono elencati seguendo un preciso ordine sequenziale (per esempio ingredienti da aggiungere in una ricetta). Per inserire nel documento HTML una lista ordinata si utilizza il tag . liste ordinate ▶ elenchi numerati <ol> Se non viene specificato nulla, la numerazione degli elementi della lista parte da 1, se invece si vuole partire da un numero diverso si deve usare l’attributo start. esempio / lista non ordinata unordered list / lista ordinata ordered list >> pagina 350 I tag delle tabelle Per all’interno della pagina HTML si utilizza il . visualizzare una tabella tag <table> Ciascuna riga della tabella è individuata dal tag ( ) e ciascun elemento nella riga è individuato dal tag ( ). Gli elementi che si trovano nell’intestazione della tabella possono essere enfatizzati utilizzando il tag ( ). <tr> table row <td> table data <th> table header Se non viene specificata esplicitamente la presenza di un bordo, il contenuto della tabella viene visualizzato senza. Utilizzando l’attributo , è possibile inserire un bordo nero che viene applicato alla tabella (rettangolo esterno), alle intestazioni (rettangoli in alto), ai dati (altri rettangoli). Lo spessore del bordo viene specificato dal numero nell’attributo border (per esempio 1). border ApprofondiMENTO IL DOM Quando un browser legge e interpreta quello che c’è scritto in un documento HTML, genera una rappresentazione ad albero della struttura della pagina web. Questa rappresentazione si chiama DOM ( Document Object Model Il DOM è unico ma viene interpretato in modo diverso da ogni browser, per questo motivo lo stesso codice HTML potrebbe essere visualizzato in modo diverso su browser diversi. >> pagina 351 L’evoluzione del linguaggio HTML Il introdotto da Tim Berners-Lee all’inizio degli anni Novanta ha subìto un’ . linguaggio HTML evoluzione nel corso del tempo Nella sua prima versione l’HTML 1.0 era un linguaggio semplice che consentiva principalmente di strutturare i testi e di creare collegamenti ipertestuali tra i documenti. Nel 1994, presso il MIT ( ) Berners-Lee, in collaborazione con il CERN di Ginevra, fondò il World Wide Web Consortium (W3C), un’organizzazione internazionale tuttora esistente che stabilisce gli standard per i linguaggi e i protocolli di comunicazione del web, con lo scopo di sviluppare al meglio le potenzialità del World Wide Web. Massachusetts Institute of Technology Nel 1995 il W3C approvò lo standard HTML 2.0 seguito, nel 1997, dallo standard HTML 3.2 che aggiunse nuove funzionalità, adeguandosi fortemente al browser Netscape che, in quegli anni, dominava il web. Fra le introdotte dalla comparvero l’ per impostare un colore di sfondo, l’ per inserire un’immagine di sfondo e il per modificare font, dimensione e colore del testo. innovazioni versione HTML 3.2 attributo bgcolor attributo background tag <font> Codice Funzione <body bgcolor="red"> Inserisce uno sfondo rosso nella pagina <body background="fiore.jpg"> Inserisce un’immagine di sfondo nella pagina <font face="verdana" size="2" color="blue">Testo…</font> Modifica il font, la dimensione e il colore del testo La possibilità di poter intervenire sull’estetica delle pagine rese molto più gradevole il loro aspetto, ma per gli sviluppatori introdusse una che fino a quel momento non si era ancora presentata. nuova problematica Il doveva essere del sito web. Quindi, per esempio, per applicare lo stesso colore di sfondo a tutte le pagine di un sito web, era necessario inserire in tutti i tag <body> l’attributo bgcolor. Se un sito aveva 100 pagine l’operazione andava ripetuta 100 volte, con il rischio di introdurre errori o dimenticanze; inoltre, l’eventuale modifica del colore di sfondo imponeva la correzione di 100 istruzioni. markup legato all’estetica applicato a ogni singolo tag di ogni singola pagina Gli sviluppatori si resero conto che la presenti nella pagina (per esempio la pagina contiene un’intestazione e sei paragrafi) (per esempio l’intestazione è rossa e i sei paragrafi vengono disposti su due colonne). descrizione degli elementi doveva prescindere dalla loro visualizzazione Video – Evoluzione dell'HTML Nel dicembre 1997 venne introdotto lo con il quale iniziò un’inversione di tendenza. Gli cominciarono a essere standard HTML 4.0 elementi HTML strettamente legati all’estetica gradualmente deprecati e il markup come bgcolor, background e <font> iniziò a essere considerato obsoleto. Anche l’attributo border che abbiamo usato per le tabelle rientra fra quelli ritenuti ormai obsoleti. Il iniziò a essere gradualmente e tutti gli aspetti strettamente legati alla degli elementi all’interno della pagina, cominciarono a essere . markup obsoleto rimosso dal codice HTML visualizzazione gestiti con il linguaggio CSS Uno dei principali vantaggi del CSS è quello di consentire l’utilizzo dei , cioè file di testo (con estensione .css) all’interno dei quali inserire le istruzioni che riguardano l’aspetto estetico di una singola pagina. Il viene e viene che devono essere visualizzate con quella modalità estetica. fogli di stile foglio di stile scritto una sola volta collegato a tutte le pagine La possibilità di modificare l’aspetto di un intero sito web intervenendo su un unico foglio di stile ha notevolmente semplificato la vita degli sviluppatori. Dopo l’HTML 4.01 del 1999 per alcuni anni non venne rilasciata nessuna nuova versione del linguaggio, perché il W3C spostò la propria attenzione sullo sviluppo di un linguaggio parallelo chiamato XHTML (basato su XML). Nel 2008 cominciò a farsi strada il linguaggio HTML 5 che nel 2014 divenne a tutti gli effetti uno standard completo. Nonostante siano già passati molti anni, i dal web e per questo motivo anche i browser più recenti continuano a visualizzarli correttamente. siti realizzati con markup obsoleto non sono ancora completamente scomparsi Approfondimento – I tag obsoleti attenzione Anche se in italiano la parola deprecare significa “pregare affinché una sciagura venga tenuta lontana”, in informatica è usato come italianizzazione di to deprecate che si traduce con “disapprovare” e solitamente viene riferito a ciò che sarebbe bene smettere di utilizzare . Lo sapevi che In una scena del film del 1997 ambientato nello stesso periodo, la protagonista, interpretata da Jodie Foster, parla in videoconferenza con un collega. La finestra mostrata sul PC è quella del browser Netscape Navigator che era uno dei più diffusi in quegli anni. Contact Lo sapevi che Il termine obsoleto in italiano significa “antiquato”, “passato di moda” e viene frequentemente utilizzato in ambito informatico per indicare le componenti hardware (o software) che non vengono più supportate dalle nuove tecnologie e che sono destinate a essere abbandonate . >> pagina 352 Il web semantico Nel 2001 Tim Berners-Lee ipotizzò un modello per il web: il (Web 3.0). Se i contenuti del web venissero scritti enfatizzando il significato delle informazioni, i nel web potrebbero essere totalmente da software autonomi (agenti semantici), implementati con le tecniche di intelligenza artificiale. Per esempio i motori di ricerca potrebbero essere in grado di effettuare analisi molto più evolute di quelle attuali. web semantico dati raccolti ed elaborati in modo automatico Nel web dei social (Web 2.0), che utilizziamo attualmente, i contenuti generati dalla comunità virtuale includono alcuni esempi che si avvicinano molto al concetto di agente semantico: per esempio i siti web che confrontano i prezzi, ma soprattutto i crawler che indicizzano i contenuti per i motori di ricerca. La prima generazione di siti web (Web 1.0), invece, è stata quella in cui le persone visualizzavano passivamente i contenuti. La nuova frontiera, favorita dal linguaggio HTML 5, apre scenari per un web interamente governato dalle intelligenze artificiali. >> pagina 353 Il linguaggio HTML5 Il , così come le versioni precedenti, delegando al CSS la gestione della loro visualizzazione. linguaggio HTML 5 descrive la struttura delle pagine web Per favorire lo e per assecondare le dei siti moderni, l’ alcune ulteriori innovazioni, fra cui: sviluppo del web semantico nuove esigenze HTML 5 ha introdotto : rispetto alle versioni precedenti, il linguaggio HTML 5 ha tra i punti di forza una notevole . codice ridotto semplificazione della sintassi Un esempio significativo è costituito dall’elemento che non è un vero e proprio tag, ma un’ doctype informazione che viene scritta subito prima del tag <html> per indicare al browser quale versione di HTML viene utilizzata nel documento. In HTML 5 la sintassi del doctype è: <!DOCTYPE html> notevolmente semplificata rispetto a quella utilizzata nelle versioni precedenti. Per esempio in HTML 4.01 la sintassi del doctype è: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Video – Il linguaggio HTML : l’HTML 5 ha promosso il miglioramento della struttura delle pagine web raggruppamento dei contenuti all’interno di opportuni elementi contenitore. Il contenitore per eccellenza è il <div>, un rettangolo che viene utilizzato per raggruppare gli elementi del documento HTML con lo scopo di organizzare meglio i contenuti all’interno della pagina web. Per esempio il seguente <div> racchiude un’intestazione e un paragrafo: <DIV> <h2>Questa è un’intestazione</h2> <p>Questo è un paragrafo</p> </DIV> : l’HTML 5 ha aggiunto nuovi che hanno un . Tra i tag semantici definiscono le diverse parti che compongono una pagina web. Fra questi citiamo: tag semantici tag per racchiudere i contenuti significato semantico : racchiude contenuti introduttivi (per esempio intestazioni e logo); <header> : racchiude i collegamenti principali, che potrebbero essere utili alla navigazione; <nav> : definisce una sezione, che di solito contiene un’intestazione e un paragrafo; <section> : racchiude un contenuto che “avrebbe senso” anche se tutto ciò che lo circonda venisse eliminato. Se la pagina web fosse la pagina di un quotidiano, <article> sarebbe l’articolo principale; <article> : racchiude un contenuto correlato solo indirettamente ai contenuti circostanti; <aside> : definisce un piè di pagina e può includere, per esempio, informazioni sul proprietario del sito e i suoi contatti; <footer> l’HTML 5 ha introdotto nuovi tag per supportare l’inserimento di elementi multimediali all’interno delle pagine web. Fra questi <video> e <audio> per incorporare file multimediali. tag per elementi multimediali : <header> <nav> <section> <aside> <article> <footer> Lo sapevi che Il termine div deriva dalla locuzione inglese content division che in italiano si traduce con “separazione del contenuto”.