Hypertext Markup Language INFO/CSE 100 Fluency in Information Technology Se avete cominciato l’esercizio 2, allora potreste già aver trovato qualche strumento per costruire pagine Web, che vi permette di inserire testo senza preoccuparvi della formattazione processor. Questo tipo di scrittura è chiamata wysiwyg – what you see is what you get. Ciò che vedi è quello che ottieni. Ma ci sono limiti a questo tipo di scrittura e molto presto li toccherete Oggi, vedremo cosa c’è nelle pagine Web http://www.cs.washington.edu/100 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington Letture e Riferimenti Letture Fluency with Information Technology Chapter 4, Marking up with HTML Riferimenti World Wide Web Consortium http://w3.org/ http://w3c.org/MarkUp/ http://w3c.org/MarkUp/#tutorials 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington Soria del WWW http://w3.org/2004/Talks/w3c10-HowItAllStarted/?n=2 Prima del Web…. ..nessun modo trasperente di connettere i docuymenti Riferimenti per citazioni o indirizzi ftp …nessun modo per consultare facilmente i documenti Il Download con ftp era difficile e lento ….nessun formato interscambiabile per scrivere documenti Ogni documento richiedeva una particolare applicazione I link c’erano ma bisognava impararli a memoria ..c’erano le riviste specializzate che bisognava comprare in edicola Quasi sin dall’inizio, Internet permise alle persone di rendere I file disponibili per il download. Questo accadeva grazie al protocollo ftp, the file transfer protocol, che voi avete già usato. Ftp fu sviluppato intorno agli anni 1971-1974. Ma non c’erano meccanismi per riferire documenti in altri documenti – una persona doveva mandare in esecuzione il programma per ftp, connetersi alla macchina remota, navigare nelle cartelle e richiedere I file. Oggi, solo agli amministratori dei siti Web si richiedono questi compiti A eccezione dei file di testo, ogni documento richiedeva una propria applicazione e ciascuna applicazione richiedeva un sistema operativo L’unico modo per reperire un documento era trovare un modo per sapere dove si trovava 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington History of the WWW Le origini 1989: Tim Berners-Lee URLs, http, first browser 1993: NCSA Mosaic …poi Netscape e poi Mozilla 1994: World Wide Web Consortium http://w3.org/ Un organizzazione che decide gli standard di rete 1994-5: Web crawlers e motori di ricerca WebCrawler, Lycos, AltaVista, Yahoo, Google…. Mentre lavorara come ingegnere dle software al CERN, il laboratorio europeo per la fisica delle alte energie, Tim Berners-Lee studiò il problema dei riferimenti tra documenti, e propose un modo per trattarli: lcollegamenti scritti nei documenti che specificavano la ubicazione di altri documenti, il loro caricamento automatico, la loro semplice formattazione testuale e la visualizzazione. Marc Andreessen e I suoi collaboratori scrissero Mosaic con foindi pubblici, poi se ne andarono a fondare Netscape, che scrisse un browser basato su Mosaic. Era una compagnia che apparentemente non aveva scopi di lucro, perchè il loro browser ara gratuito. Non avevano scelta, perchè il loro prototipo era stato finanziato con fondi pubblici. (…erano in Svizzera..) Il W3 Consortium è l’organizzazione semiufficiale che organizza gli standard per il Web.– semi-ufficiale vuol dire che non può imporre l’adozione degli standard. Alcune grandi compagnie tendono a ignorarli. WebCrawler viene ritenuto come il primo motore di ricerca. E’ stato sviluppato all’Università di Washington da uno studente di dottorato di nome Brian Pinkerton Lycos, come Netscape, servi’ come modello alle compagnie successive. Viene ricordata come la compagnia con il più breve tempo di Offerta Pubblica Iniziale nella storia delle azioni on-line NASDAQ. AltaVista fu per anni il motore di ricerca più usato. Non aveva gli strumenti di Google ma funzionava comunque 11/27/2018 fit100-05-html © 2004-2005 University of Washington

Le pagine web in HTML Le pagine web sono scritte in una forma speciale chiamata HTML – hypertext markup language. Il termine markup –etichetta o marcatore- deriva dalla videoscrittura – riferisce ai modi in cui sullo schermo si danno indicazioni per un documento: dove si interrompono I paragrafi, quale parte del testo deve andare in corsivo.., etc. Un linguaggio di marcatori è un insieme di etichette che indica la formattazione di un testo Prima di entrare nei dettagli, diamo lcune idee guida. Quando un browser Web legge una pagina HTML usa le etichette per indicare come visualizzare il testo sullo schermo. Il testo di sopra assume l’aspetto a testo. Ma non è l’unico modo in cui si può visualizzare. L’utente può fare in modo che il browser non visualizzi alcuna immagine. Può riconfigurare la finestra e cambiare la parte di testo visualizzata in ogni paragrafo. O può leggere la pagina su un cellulare o PDA. Il browser può abbreviare o leggere I paragrafi per link. Alcuni browser non mostrano la pagina visuale – La leggono ad alta voce. In questo caso le intestazioni e Ia fine dei paragrafi si trasformano in pause. Permettere all’utente e al browser di decidere I dettagli sulla pagina era l’intento del comitato W3. Cercare di forzare la formattazione è un modo per non raggiungere questo obiettivo.. La morale è che non conviene forzare. -- lasciate che sia l’utente a definire la visualizzazione.

fit100-05-html © 2004-2005 University of Washington HTML Structure Ogni file HTML ha la stessa struttura: Per svolgere la formattazione automatica, le etichette devono essere leggibili dal computer – si tratta di testo come il resto del documento. Ma allora bisogna distinguere le etichette dal resto del documento. HTML lo fa con le parentesi angolari. Alcune etichette fanno eseguire qualcosa nel posto in cui sono state collocate, come l’inizio di un nuovo paragrafo o il disegno di una linea. Altre etichette indicano di cominciare qualcosa che più tardi sarà terminata, per esempio etichette che specificano testo da scrivere in corsivo. Le etichette all’inizio hanno lo stesso nome delle etichette alla fine, ma le seconde hanno una slash /. Per esempio, questa è una etichetta <table> che inizia una tabella e questa </table> finisce la tabella.. Alcune etichette –per esempio I link- devono dire doive punta l’URL o una etichetta che che camnbia I caratteri deve specificare il nuovo tipo di o dire quale deve esserne la dimesnione. Per includere questa informazione, l’etichetta deve avere attributi. Per esempio questa etichetta <a> e questo attributo href specifica la pagina Web a cui riferire E adesso analizziamo il codice HTML Abbiamo biosogno di qualche informazione preliminare. Per primo, ci sono tag che specificano quale parte del testo deve prestare attenzione il browser. Questa parte comincia con l’etichetta <html> e finisce con </html>. Titolo e autore . Oppure si possono inserire le parole chiave per I motori di ricerca Il contenuto è la vera pagina Web. Adesso costruiamo una semplice pagina Web. <html> <head> <title>Il nome della pagina va qui </title> Qui va l’intestazione </head> <body> Qui vanno i contenuti </body> </html> 11/27/2018 fit100-05-html © 2004-2005 University of Washington

La prima pagina Web HTML Con questo codice HTML si hanno questi risultati Cominciamo. . Ecco a sinistra un editor di testi con il codice HTML e a destra il file testo visualizzato Ci sono l’intestazione e I contenuti. Inseriamo un paragrafo. 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington HTML è testo Gli elaboratori di testo (Word) inserisgono caratteri che infastidiscono il vostro browser Create il codice HTML con il vostro Blocco Note, etc. Salvate con l’estensione .html Evitate confusioni Noterete che non si usano programmi sofisticati per l’elaborazione del testo. Questi programmi hanno I loro sistemi per la formattazione, salvati nel file insieme ai contenuti. Il programma non vi mostra questi caratteri speciali, cosi’ come il browser non vi mostra le etichette HTML. Se cercate di aprire un file Word con un browser Web, non vi apprarirà nulla – Delle due luna. O si rifiuterà di visualizzarlo oppure farà partire Word.. In questo caso, stiamo salvando il file HTML come semplice testo. 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington Il codice sorgente Il codice HTML che produce una pagina si chiama codice sorgente è si può sempre vedere, sia con il browser che con un editor di testi Ora, il browser HTML ci mostra anche il codice HTML. Il codce per la pagina è chiamato sorgente o a volte codice sorgente. E’ un modo molto biono per esplorare l’HTML – se trovate una pagina che vi piace, guardate il sorgente. Anche se non riuscite a capire, prendete nota delle edichette che si usano e poi andate a studiarle. 11/27/2018 fit100-05-html © 2004-2005 University of Washington

Fin qui abbiamo visto pagine con solo testo

Aggiungere un’immagine Ci sono diversi modi di salvare un’immagine: GIF -- Graphics Interchange Format – va bene per I diagrammi i semplici disegni PNG -- Portable Network Graphics - GIF senza problemi di copyright JPEG -- Joint Photographic Experts Group – per foto artistiche e ad alta risoluzione Etichette per inserire un ‘immagine in HTML <img src="awa.png" alt="American Writers"> E adesso aggiungiamo una figura. I browser possono visualizzare un’immagine solo sde questa e salvata in maniera particolare.Se non volete correre rischi, affidatevi a uno di questi tre formati grafici. In questo modo tutti I browser Web saranno in grado di visualizzarle. . A volte un browser Web sarà in grado di far partire un applicazione specifica. GIF immagazina punti elementari disposti in una griglia. Poi comprime l’immagine in modo reversibile, senza perdere l’informazione originale. Sfortunamtamente, l’algoritmo per fare immagini GIF è protetto da un brevetto e cosi’ non tutti possono farle. Per evitare questo usiamo lo standard PNG, che è equivalente JPEG perde informazioni sui dettagli lineari. E allora è meglio usarlo per le foto. L’ìetichetta per includere un’immagine è img. Inserisce l’immagine uin un punto della pagine web, cosi’ va separato con una tag end. Ha un attributo, src, che è l’abbreviazione per source , che gli dice dove il browser può trovare la sorgente cioè il file grafico dell’immagine. In questo esempio la pagina Web e l’immagine sono nella stessa cartella e cosi’ì non dobbiamo includere altro che il nome L’attributo alt ci dice tells what to show if the browser can’t show the image. For instance, if the page is being read aloud by a screen reader, it would read the alt text instead. Here’s a png image. And here’s the same in jpeg format. You may be able to see that the jpeg is just a little fuzzier. tag attributo nome valore attributo 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington Locazioni dei file Il percorso deve specificare come raggiungere il file Quando il file è nella stessa cartella della pagina Web, aggiungete solo il suo nome, ski.jpg Se il file si trova in una sottocartella, ditegli come navigare per trovarlo, pix/ski.jpg Se il file è in una supercartella, andate verso l’alto con la notazione , ../ski.jpg Come abbiamo visto, è stato necessario includere la cartella del file immagine, perchè non era la stessa della pagina web. Il motivo più comune per cui un’immagine non è mostrata è che l’immagine è sbagliata … controllate! 11/27/2018 fit100-05-html © 2004-2005 University of Washington

Connessione ad altre pagine –Link- Il link inizia con l’etichetta … <a href=" ... "> Il valore dell’attributo href è un URL. <a href="http://www.cs.washington.edu"> Il link include un testo , e finisce con … </a> <a href=" ... ">CSE home page</a> Avete visto un etichetta di link che circonda il testo. Un’etichetta di link comicnia in un posto, e dopo un poco più a destra ha un etichetta di terminazione. Ha un attributo, href, che specifica il link – il documento che sta all’altra parte del link Il suo valore come URL, e deve essere incluso tra virgolette. Poi viene il testo che va cliccato per abndare al documento , e finalmente l’etichetta di terminazione. 11/27/2018 fit100-05-html © 2004-2005 University of Washington

Qui abbiamo testi, immagini e link.

fit100-05-html © 2004-2005 University of Washington Semplice HTML Quello che abbiamo visto è HTML molto semplice Il linguaggio HTML si è evoluto Ogni documento deve iniziare con “DOCTYPE” che dice quale versione di HTML si segue http://www.w3.org/QA/2002/04/valid-dtd-list.html Si può usare 4.01 Transitional C’è un servizio di validazione che vi corregge il codice http://validator.w3.org/ HTML non è statico – ogni tanto si aggiungono nuove etichette . Bisogna essere sicuri che il browser interpreta le pagine in maniera corretta.. Per farlo si include una dichiarazione di tipo all’inizio della pagina –DTD- o DOCTYPE Osserviamo una pagina che ha un etichetta DOCTYPE. L’etichetta che comnincia con un punto interrogativo è un commento – non è parte del codice di pagina. Ma possiamo dare comunque informazione supplementare al browser . 11/27/2018 fit100-05-html © 2004-2005 University of Washington

fit100-05-html © 2004-2005 University of Washington In sintesi Le pagine Web sono scritte in HTML Il file è testo L’estensione del file è .html (or .htm) Le etichette forniscono formattazione ed altro Alcune hanno attributi Tutte hanno bisogno di un etichetta finale Usate un processo interattivo Specificate un cammino locale per le immaggini del vostro sito Usate i link completi per le altre immagini 11/27/2018 fit100-05-html © 2004-2005 University of Washington