Comments
Description
Transcript
HTML (pptx, it, 163 KB, 12/6/13)
COMUNICAZIONE ONLINE, RETI E VIRTUALITA’ MATTEO CRISTANI AGENDA IL W3C CONSORTIUM CHE COS’E’ XML BASI DEL LINGUAGGIO HTML INTRODUZIONE AD HTML5 IL W3C CONSORTIUM Nell'ottobre del 1994 Tim Berners Lee, padre del Web, fondò al MIT (Massachusetts Institute of Technology), in collaborazione con il CERN (il laboratorio dal quale proveniva), un'associazione di nome World Wide Web Consortium (abbreviato W3C), con lo scopo di migliorare gli esistenti protocolli e linguaggi per il World Wide Web e di aiutare il web a sviluppare tutte le sue potenzialità. Nell'aprile del 1995 l'INRIA (Istituto Nazionale di Ricerca Informatica ed Automatica francese) divenne il primo membro europeo dell'organizzazione. Nel 2003 l'ERCIM (Il Consorzio Europeo di Ricerca in Informatica e Matematica) prese il ruolo di host europeo del W3C dall'INRIA (che è l'istituzione francese dell'ERCIM). GLI STANDARD Gli standard definiti dal W3C HTTP (HyperText Transfer Protocol) URI URL (in collaborazione con IETF) HTML (HyperText Markup Language) XML e i linguaggi da questo derivati: EXI (Efficient XML Interchange) XProc (XML Pipeline Language) XPointer (XML Pointer) STANDARD XML Processing Model XML Schema XML Signature XHTML (eXtensible HyperText Markup Language) MathML (Mathematics Markup Language) SVG (Scalable Vector Graphics) XForms XPath XQuery STANDARD CSS (Fogli di stile a cascata) XSLT (Extensible Stylesheet Language Transformations) CGI (Common Gateway Interface) DOM (Document Object Model) GRDDL (Gleaning Resource Descriptions from Dialects of Languages) OWL (Controllo dei contenuti) RDF (Controllo dei contenuti) SMIL (Synchronized Multimedia Integration Language) SML (Service Modeling Language) STANDARD SOAP(Simple Object Access Protocol) PICS (Platform for Internet Content Selection) WAI (Linee guida per l'accessibilità) DOM (Linee guida per l'interfaccia) PICS (Linee guida per le piattaforme) POWDER (Protocol for Web Description Resources) PNG (formato grafico) InkML (formato per inchiostro digitale) XML XML (sigla di eXtensible Markup Language) è un metalinguaggio di markup, ovvero un linguaggio marcatore che definisce un meccanismo sintattico che consente di estendere o controllare il significato di altri linguaggi marcatori. Costituisce il tentativo di produrre una versione semplificata di SGML che consenta di definire in modo semplice nuovi linguaggi di markup da usare in ambito web. Il nome indica quindi che si tratta di un linguaggio marcatore (markup language) estensibile (eXtensible) in quanto permette di creare tag personalizzati. SPECIFICHE IN XML La specifica di un linguaggio in XML avviene attraverso due approcci Il DTD (Document Type Definition) dove si definiscono i tag in termini di riscrittura ed indicazioni operative ai browser compatibili, in genere identificando le funzioni mediante i fogli di stile Mediante un XML schema, che integra le operazioni di estensione dei tag con funzioni proprie del server, quindi facendo seguire al tagging azioni “libere” dal contesto della navigazione BASI DEL LINGUAGGIO HTML5 HTML è un linguaggio di descrizione di pagine Un documento HTML è un file di testo (file ASCII) contenente dei comandi per Formattazione Inserimento parti multimediali Link ipertestuali I file di testo hanno estensione .html o .htm E’ preferibile .html BASI DEL LINGUAGGIO HTML5 HTML è case insensitive: i tag possono essere scritti in maiuscolo e/o minuscolo E’ preferibile minuscolo HTML è non posizionale: è possibile, ma sconsigliato,scrivere tutto il codice di una pagina su di una sola linea; andare a capo nel file html non significa andare a capo nella pagina; non è possibile utilizzare il carattere spazio per allineare parti di testo Come qualificatori di testo è indifferente utilizzare le apici singole o doppie E’ preferibile usare le doppie apici TAG I comandi (marcatori, tag) hanno una forma sintattica particolare <tag>informazioni</tag> Le informazioni tra <tag> e </tag> devono essere trattate secondo quanto stabilito dal comando stesso I tag hanno nomi mnemonici Esistono degli editor che assistono nella creazione delle pagine I tag possono avere degli attributi <tag attr1=“valore1” attr2=“valore2” … >informazioni</tag> XHTML: tutti i tag hanno sempre una forma di apertura ed una di chiusura qualora un tag non ha forma di chiusura esso va scritto nella forma <tag attr1=“valore” … /> I valori degli attributi vanno scritti sempre fra doppie apici INTESTAZIONE Un documento HTML è costituito da due parti <html> <head> descrizione delle caratteristiche del documento </head> <body> </body> </html> documento vero e proprio head: la parte fondamentale è il titolo del documento che verrà visualizzato come titolo nella finestra del browser poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo. Esempio <head> <title>Corso di laurea in Lingue per la comunicazione commerciale</title> </head> CORPO DI HTML Corpo: contiene il documento (pagina) vero e proprio documento di testo Il testo può essere inserito liberamente nella parte body e verrà visualizzato secondo le direttive di formattazione. Intestazioni: permettono di indicare quali parti di testo vengono usate come titoli Esempio <h1> titolo1 </h1> ... <h6> titolo6 </h6> Nota: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli I tag h* hanno anche valore semantico per i motori di ricerca Andare a capo <br/> a capo <p>…</p> paragrafo ESEMPIO <html> <head> <title>Esempio01: Hello world!</title> </head> <body> Questa è la mia prima pagina web<br/> <p> Giuro solennemente di <b>non dire mai</b> nella mia vita che HTML è un linguaggio di programmazione.<br/> </p> </body> </html> INTRODUZIONE AD HTML5 Gli elementi di HTML5 si dividono in tre categorie Normali Vuoti Provenienti da altri namespaces ELEMENTI VUOTI 2. Elementi vuoti: gli elementi vuoti sono quelli che non possono avere alcun contenuto. Per questi elementi si utilizza un tag ‘vuoto’. Essi sono: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr. Per gli elementi vuoti, la chiusura del tag, obbligatoria in XHTML, è invece opzionale. Possiamo dunque definire un tag <img> secondo le regole XHTML: <img src="immagine.png" alt="testo" /> OPPURE <img src="immagine.png" alt="testo"> PROVENIENTI DA ALTRI NAMESPACES 3. Elementi provenienti da altri namespace: per questi elementi sono richiesti i tag ‘autochiudenti’. Si tratta degli elementi adottati da specifiche esterne, come SVG e MathML. ELEMENTI NORMALI 1. Elementi normali: sono quelli che possono racchiudere dei contenuti sotto forma di testo, commenti HTML, altri elementi HTML, etc. Sono elementi normali, dunque, i paragrafi (<p>), le liste (<ul>), i titoli (<h1>), etc. Salvo specifici casi, cui accenneremo nel seguito della lezione, gli elementi normali vengono definiti attraverso un tag di apertura (<p>) e un tag di chiusura (</p>). DOCTYPE Poiché, come visto, le attuali specifiche di HTML lo definiscono come estensione specifica di XML, occorre definire il tipo del documento Questa operazione si fa specificando un riferimento ad un DTD, ovvero un Document Type Definition Si tratta di un file che descrive la sintassi del linguaggio impiegato, ovvero di HTML DOCTYPE Non è di fatto sempre obbligatorio specificare il DocType di una pagina; la maggior parte dei browser la visualizzeranno correttamente anche senza specifica. Il DocType, nella sua forma più estesa, ha bisogno di diverse informazioni: una dichiarazione in cui si determina se il documento è di dominio pubblico o meno; una nota che veicoli a quali specifiche del W3C si sta facendo riferimento; la lingua del documento. SPECIFICHE CORRENTI La maggior parte delle pagine web, attualmente, utilizza questo DocType: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT" http://www.w3.org/TR/html4/loose.dtd> Il linguaggio usato all'interno della pagina è l'html, il documento è di dominio pubblico e rispetta le specifiche del W3C del tipo HTML Transitional definiti nel DTD (Document Type Definition) loose.dtd, la lingua impostata è l'italiano. SPECIFICHE TIPICHE Frameset: questa DTD è utilizzata dai siti che al loro interno contengono i frames. Strict: è una DTD che applica rigide regole ed applica quindi i nuovissimi standard del web. Ad esempio i tag deprecati non sono ammessi e gli elementi grafici di una pagina web devono essere definiti tramite i fogli di stile. Transitional: come è facilmente intuibile dal nome questo è documento che contiene delle specifiche di transizione da uno standard all'altro, è il tipo maggiormente utilizzato ora sul web. Il documento non applica rigide regole ed è quindi possibile utilizzare tag deprecati. ESEMPI DI SPECIFICHE Esempio di DocType per un sito con i frames: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd> Esempio di DocType per un sito che applica rigidamente le ultime direttive del W3C: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" http://www.w3.org/TR/html4/strict.dtd> INTESTAZIONE All’interno del tag <head> possono essere inseriti, oltre al titolo, altri tag: I meta tag generici I meta tag http-equiv META TAG GENERICI Nome DC.Title Valore Titolo del documento Funzione Serve a definire il titolo del documento description Descrizione del sito Serve per descrivere il contenuto del sito o della pagina creation_date Data Indica la data di creazione della pagina o quando essa verrà aggiornata keywords Ogni parola chiave separata da Serve a dichiarare le parole chiave del sito o della pagina robots PROSSIMO LUCIDO Serve a dare indicazione ai motori di ricerca per l'indicizzazione revisit-after n° di giorni seguito da days Serve a dire al motore di ricerca dopo quanti giorni dovrà rivisitare la pagina generator L'editor usato per scrivere il codice Indica il nome dell'editor che si è usato per scrivere il codice della pagina copyright Il proprietario del contenuto del sito Indica a chi spetta il copyright del contenuto del sito author L'autore della pagina Indica l'autore della pagina ed eventualmente il suo indirizzo e-mail owner language Proprietario del sito Una o più lingue Indica il proprietario del sito Indica la lingua o le lingue del sito DC.Language Una o più lingue Indica al motore di ricerca di indicizzare le pagine in base alla lingua IL META TAG ROBOTS Il meta tag robots serve a dare alcune indicazioni ai programmi dei motori di ricerca (i cosidetti spider); più nello specifico, serve a comunicare allo spider del motore di ricerca come si deve comportare I suoi possibili valori sono: none: non viene indicizzata la pagina e tutto ciò che è al suo interno index: indicizza solo la pagina che il motore di ricerca sta visitando noindex: non indicizza la pagina che il motore di ricerca sta visitando follow: non indicizza la pagina che sta visitando prosegue attraverso i link della pagina nofollow: indicizza la pagina che sta visitando ma salta i link della pagina all: è l'insieme tra follow e index, indicizza la pagina che sta visitando e prosegue attraverso i links. HTTP-EQUIV La loro sintassi, in linea generale, è la seguente: <meta http-equiv="nome_meta_tag" content="valore_del_meta_tag">. Nome Tag Valore Funzione expires Ora nel formato GMT Indica la data di scadenza della validità della pagina. reply-to Indirizzo mail Set-Cookie PROSSIMO LUCIDO refresh PROSSIMO LUCIDO content-Type PROSSIMO LUCIDO Pragma no-cache, costringe il browser a svuotare la cache e ricaricarla imagetoolbar yes abilita la visualizzazione della toolbar, Da IE 6.0 in su, abilita/disabilita la toolbar no la disabilita che appare sulle immagini. distribution global se è un contenuto di interesse generale, in caso contrario, usare local Definisce un indirizzo e-mail a cui gli utenti possono fare riferimento Salva un cookie sul computer del visitatore Serve per ricaricare la pagina dopo un determinato tempo Indica il set di caratteri in uso nella pagina Solo per NetScape. Forza il browser a non leggere il sito della cache Indica se il contenuto della pagina è di interesse generale o specifico I COOKIE Il meta tag Set-Cookie serve, come suggerisce il suo nome, a salvare un cookie sul computer di chi sta visitando la pagina. La sua sintassi è la seguente: <meta httpequiv="Set-Cookie" content="cookievalue=nome cookie; expires=data di scadenza; path=percorso nella cache"> cookievalue: attraverso questo parametro impostiamo il nome che prenderà il cookie sul computer dell'utente. expires: impostando una data in formato GMT si può determinare la data dopo la quale il cookie non avrà più effetto. path: dove verrà salvato all'interno della cache ESEMPIO DI SETTAGGIO DI UN COOKIE Esempio di settaggio di un cookie: <head> <meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Tuesday, 13-Jul-06 23:00:00 GMT; path=/"> </head> REFRESH Il meta tag refresh ricarica il contenuto della pagina dopo un determinato intervallo di tempo, si può aggiungere anche un parametro mediante il quale il ricaricamento porterà ad un'altra pagina (reindirizzamento). La sua sintassi è: <meta http-equiv="REFRESH" content="intervallo di tempo per ricaricare; url=pagina a cui porterà il ricaricamente, opzionale"> ESEMPIO Esempio di reindirizzamento: <meta http-equiv="refresh" content="4; url=http://it.wikibooks.org"> CONTENT-TYPE Il meta tag content-Type serve per dichiarare il set di caratteri usati all'interno della pagina. La sua sintassi è la seguente: <meta http-equiv="content-Type" content="tipo di documento; charset=set di caratteri">. Il tipo di documento nel nostro caso è text/html con l'avvento dell'xml potrebbe esserci qualche nuovo valore. ESEMPIO Esempio di come utilizzare il meta tag content-Type: <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"> RIFERIMENTI http://it.wikibooks.org/wiki/HTML