HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup...
Transcript of HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup...
![Page 1: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/1.jpg)
HyperText Markup Language
2016-2017 Informatica applicata alla
comunicazione multimediale Cristina Bosco
![Page 2: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/2.jpg)
1. Che cosa e’ HTML
• un linguaggio di codifica testuale • un linguaggio di marcatura • un linguaggio per visualizzare contenuti
ipertestuali
![Page 3: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/3.jpg)
Codifica testuale
lo scopo della codifica testuale (es. ASCII o UNICODE)
e’ rendere un testo leggibile dal calcolatore,
cioe’ trasformarlo in un formato elettronico
![Page 4: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/4.jpg)
Codifica testuale
un testo in formato ASCII NON rappresenta PERO’ tutte le
informazioni
in particolare non sono rappresentati gli aspetti strutturali e semantici del testo
![Page 5: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/5.jpg)
1. Che cosa e’ HTML
• un linguaggio di codifica testuale • un linguaggio di marcatura • un linguaggio per visualizzare contenuti
ipertestuali
![Page 6: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/6.jpg)
Linguaggi di marcatura
lo scopo di un linguaggio di marcatura e’
rappresentare le informazioni logico-strutturali inerenti al testo, in un formato elettronico
![Page 7: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/7.jpg)
Linguaggi di marcatura
lo scopo di un linguaggio di marcatura e’
di specificare NON le esatte impostazioni di visualizzazione grafica, MA i contenuti
e l’organizzazione del testo in modo FORMALE
![Page 8: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/8.jpg)
Linguaggi di marcatura
ogni particolare linguaggio di marcatura e’
costruito per rappresentare determinate informazioni
logico-strutturali inerenti al testo
![Page 9: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/9.jpg)
1. Che cosa e’ HTML
• un linguaggio di codifica testuale • un linguaggio di marcatura • un linguaggio per visualizzare contenuti
ipertestuali
![Page 10: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/10.jpg)
Linguaggi per ipertesti
un linguaggio per la scrittura di ipertesti e’
un linguaggio di marcatura in cui tra le informazioni marcate esistono quelle che consentono la visualizzazione di
contenuti ipertestuali e la navigazione in essi
![Page 11: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/11.jpg)
HTML • HyperText Markup Language (HTML)
(traduzione letterale: linguaggio a marcatori per ipertesti) è usato per la scrittura di documenti ipetestuali nel Web
![Page 12: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/12.jpg)
Documenti e marcatura Nei documenti marcati un tratto di testo
può essere contrassegnato inserendo dei marcatori o etichette, detti tag, che ne possono descrivere tra le altre cose la funzione, il colore, le dimensioni, il link o altre caratteristiche.
![Page 13: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/13.jpg)
Documenti e link
Nei documenti ipertestuali un tratto di testo può essere marcato come link che porta ad un altro documento HTML.
Tutto cio’ richiede le funzionalita’ di un programma detto browser che scarica da uno o più web server i file, interpretando il codice, al fine di generare la visualizzazione della pagina desiderata sullo schermo.
![Page 14: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/14.jpg)
HTML e programmi HTML non è un linguaggio di
programmazione (in quanto non prevede definizione di variabili, strutture dati e funzioni).
Ma HTML supporta l'inserimento di script e oggetti esterni.
![Page 15: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/15.jpg)
Formato HTML Il formato di un file viene riconosciuto da
un computer grazie all’estensione del file stesso.
Il formato HTML e’ caratterizzato dall’estensione .html oppure .htm
![Page 16: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/16.jpg)
HTML, un po’ di storia HTML è un linguaggio di pubblico dominio
(non occorre una licenza per utilizzarlo!). La sintassi di HTML è stabilita da un
apposito consorzio, il World Wide Web Consortium (W3C), basandosi su un altro linguaggio di marcatura generico, l’SGML.
![Page 17: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/17.jpg)
HTML, un po’ di storia HTML e’ stato sviluppato verso la fine
degli 80 da Tim Berners-Lee presso il CERN di Ginevra insieme ad un protocollo che supporta il trasferimento di documenti in formato HTML (detto HTTP). Si e’ diffuso a partire dai primi anni 90.
![Page 18: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/18.jpg)
HTML, un po’ di storia HTML ha subito molte revisioni,
ampliamenti e miglioramenti, indicati secondo la numerazione delle release.
La versione attuale è la 5.0, rilasciata ufficialmente da ottobre 2014.
![Page 19: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/19.jpg)
Aspetto di un documento HTML HTML è concepito per definire il
contenuto logico e non l'aspetto del documento. I sistemi operativi e i browser che possono accedere ad un documento HTML sono molteplici e con capacità grafiche diverse, quindi lo stesso documento puo’ assumere aspetti diversi.
![Page 20: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/20.jpg)
Aspetto di un documento HTML
Non esiste alcuna garanzia che uno stesso documento venga visualizzato in egual modo su due dispositivi.
Questo ha imposto soprattutto in passato dei forti limiti agli sviluppatori di pagine Web, ma ha garantito la massima diffusione di Internet, facendone oggi uno dei principali strumenti di comunicazione di massa.
![Page 21: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/21.jpg)
HTML e editor Un file HTML e’ un semplice file di testo e
come tal puo’ essere prodotto da qualunque editor di testo (che non attacchi, all’insaputa dell’utente delle marcature di qualche tipo).
![Page 22: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/22.jpg)
HTML e editor Esistono anche applicazioni specifiche,
detti editor WYSIWYG (what you see is what you get) che introducono la marcatura in modo automatico. Ma per avere il controllo sul risultato finale e sulla pulizia del codice scritto conviene scrivere (e saper leggere) la marcatura.
![Page 23: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/23.jpg)
Un esempio
ecco un testo scritto con Word, aperto con un editor di testo semplice
![Page 24: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/24.jpg)
2. Come e’ fatto un documento HTML
• basi sintattiche del linguaggio HTML • macrostruttura del documento HTML • struttura e contenuto del documento
HTML
![Page 25: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/25.jpg)
Basi sintattiche
il documento HTML comprende testo e marcatori:
* Non in HTML5
testo marcatori case-sensistive case-unsensitive*
libero tra parentesi uncinate
liberamente a capo a capo in base a marcatura
![Page 26: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/26.jpg)
Basi sintattiche Es. porzione di codice HTML che comprende testo
e marcatori detti TAG:
<B>questa parte di testo e’ in grassetto</B>, mentre questa parte
non lo e’
che il BROWSER interpreta come:
questa parte di testo e’ in grasse0o, mentre questa parte non lo e’
![Page 27: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/27.jpg)
Basi sintattiche
Un marcatore M puo’ essere
• pieno: esiste un comando di apertura ed un comando di chiusura di M tra i quali e’ racchiusa la porzione di testo a cui il marcatore si applica (in rari casi il comando di chiusura e’ opzionale)
• vuoto: M consiste di un solo un comando
![Page 28: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/28.jpg)
Basi sintattiche Es. porzione di codice HTML che comprende testo
e marcatori pieni e vuoti:
<B>testo in grassetto</B> poi vado a capo proprio qui<BR/> e inizio una linea nuova
che il BROWSER interpreta come:
testo in grassetto poi vado a capo proprio qui e inizio una linea nuova
![Page 29: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/29.jpg)
Basi sintattiche Un marcatore pieno ha:
• un tag di apertura • un tag di chiusura (uguale al tag di apertura ma
preceduto da slash) • una porzione di testo racchiusa tra il tag di
apertura e il tag di chiusura
![Page 30: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/30.jpg)
Basi sintattiche Un marcatore vuoto ha:
• un tag preceduto da slash
![Page 31: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/31.jpg)
Basi sintattiche
un marcatore M puo’ essere dotato di
• attributi: all’interno delle parentesi uncinate del comando di apertura di M si possono specificare delle caratteristiche di M
• se ci sono piu’ attributi per un solo tag, li si deve separare con uno spazio vuoto
![Page 32: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/32.jpg)
Basi sintattiche Es. porzione di codice HTML che comprende testo
e un marcatore con attributi valorizzati:
Testo NORMALE seguito da <FONT SIZE=“+1” color=“red”>testo rosso piu’ grande</FONT> seguito da altro normale
che il BROWSER interpreta come:
Testo NORMALE seguito da testo piu’ grande seguito da altro normale
![Page 33: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/33.jpg)
Basi sintattiche
• i marcatori possono essere annidati (facendo attenzione agli annidamenti)
• quindi piu’ comandi possono avere effetto sulla stessa porzione di testo
![Page 34: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/34.jpg)
Basi sintattiche Es. porzione di codice HTML che comprende testo
e marcatori annidati
<I><B>testo in corsivo e grassetto</B>, poi solo in corsivo</I> e poi ne’ uno ne’ l’altro
che il BROWSER interpreta come:
testo in corsivo e grassetto, poi solo corsivo e poi ne’ l’uno ne’ l’altro
![Page 35: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/35.jpg)
Basi sintattiche Es. porzione di codice HTML che comprende testo e
marcatori annidati in modo corretto
<I><B>testo in corsivo e grassetto</B>, poi solo in corsivo</I> e poi ne’ uno ne’ l’altro
ed in modo non corretto (che il BROWSER “potrebbe” interpretare male)
<B><I>testo in corsivo e grassetto</B>, poi solo in corsivo</I> e poi ne’ uno ne’ l’altro
![Page 36: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/36.jpg)
2. Come e’ fatto un documento HTML
• basi sintattiche del linguaggio HTML • macrostruttura del documento HTML • struttura e contenuto del documento
HTML
![Page 37: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/37.jpg)
Macrostruttura del documento HTML
• il documento e’ tutto compreso nel marcatore pieno HTML
• include una intestazione, introdotta dal tag HEAD (informazioni non visualizzate nella pagina web, ma metadati visualizzati in altre parti del browser)
• include un corpo, introdotto dal tag BODY (il contenuto del testo con qualunque tag tranne quelli tipici dell’intestazione)
![Page 38: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/38.jpg)
![Page 39: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/39.jpg)
Macrostruttura del documento HTML
Es. di macrostruttura (minima) di documento HTML:
<html> <head> <title>la mia prima pagina</title> </head> <body> Testo della mia prima pagina </body>
</html>
![Page 40: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/40.jpg)
Macrostruttura del documento HTML
![Page 41: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/41.jpg)
Macrostruttura del documento HTML
All’inizio del documento HTML e’ opportuno inserire anche:
• <!DOCTYPE HTML>, prima del tag <HTML>
• <meta http-equivalent=“Content-type” content=“text/html;charset=UTF-8”>,
subito dopo il tag <head> per specificare la codifica utilizzata per i caratteri
![Page 42: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/42.jpg)
Macrostruttura del documento HTML
La definizione del colore o dell’immagine di sfondo e’ attributo del tag BODY:
<BODY BGCOLOR=“red” BACKGROUND=“lineadiciottoli.gif”>
<BODY BGCOLOR=“red”>
<BODY BACKGROUND=“lineadiciottoli.gif”>
![Page 43: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/43.jpg)
Macrostruttura del documento HTML
![Page 44: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/44.jpg)
Macrostruttura del documento HTML
![Page 45: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/45.jpg)
Macrostruttura del documento HTML
![Page 46: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/46.jpg)
Macrostruttura del documento HTML
linee guida per la creazione del documento: • scrivere i tag con lettere minuscole (HTML5) • scrivere i tag su righe separate • indentare i tag soprattutto in caso di
annidamenti • applicare sempre gli attributi nello stesso
ordine • non lasciare spazi vuoti laddove non sono
necessari
![Page 47: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/47.jpg)
Macrostruttura del documento HTML
<html> <head> <title>La mia prima pagina web</title> </head> <body> In questa pagina metteremo delle informazioni importanti. </body>
</html>
![Page 48: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/48.jpg)
Macrostruttura del documento HTML
… la stessa pagina in forma illeggibile (per noi, non per il browser!!!):
<html> <head> <title>La mia prima pagina web</title> </head> <body>In questa pagina metteremo delle informazioni importanti.</body> </html>
![Page 49: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/49.jpg)
Commenti nel documento HTML
Nel testo HTML è possibile introdurre anche dei commenti, cioè delle parti di testo che il browser non mostrerà, ma che ci saranno molto utili quando riapriremo il documento per modificarlo, magari a distanza di tempo.
I commenti vanno inseriti tra il tag <!– e il tag -‐-‐>
![Page 50: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/50.jpg)
2. Come e’ fatto un documento HTML
• basi sintattiche del linguaggio HTML • macrostruttura del documento HTML • struttura e contenuto del documento
![Page 51: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/51.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento • strutturazione fisica del documento • inserimento di immagini • inserimento di collegamenti ipertestuali
![Page 52: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/52.jpg)
Strutturazione logica del documento HTML
• titoli • paragrafi • separatori • sezioni • citazioni
![Page 53: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/53.jpg)
Strutturazione logica del documento HTML
titoli: • tag pieno <hn> … </hn> (con n = 1|2|
3|4|5|6|7|8) • 8 livelli di titoli in dimensione
decrescente • introduce a capo rispetto al testo
che precede e a quello che segue
![Page 54: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/54.jpg)
Strutturazione logica del documento HTML
Es: titoli
<h1>I linguaggi di marcatura</h1> <h2>Il linguaggio HTML</h2> <h3>Capitolo 1: i titoli</h3> <h4>Paragrafo 1: inserire titoli nel document</h4> <h5>Sottoparagrafo 1.1: dimensione di titoli </h5> <h6>Sottosottoparagrafo 1.1.1: dimensione 1</h6>
![Page 55: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/55.jpg)
Es: titoli
![Page 56: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/56.jpg)
Strutturazione logica del documento HTML
paragrafi:
• tag pieno <p> …. </p> • divide il documento in capoversi che ne
aumentano la leggibilita’ • introduce spazio e a capo rispetto al
testo precedente e seguente
![Page 57: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/57.jpg)
Strutturazione logica del documento HTML
Es. paragrafi: Testo della mia prima pagina <br> <p align=“center”>Questa parte del testo deve
essere separata da quella che segue da alcune righe vuote
</p> <p>Dopo le righe ecco un nuovo testo su un altro argomento </p>
![Page 58: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/58.jpg)
Es. paragrafi:
![Page 59: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/59.jpg)
Strutturazione logica del documento HTML
separatori: • interruzione di riga: <br/> tag vuoto che introduce un a capo
• linea orizzontale: <hr> tag vuoto con attributi ALIGN, SIZE
(spessore), WIDTH (larghezza), COLOR
![Page 60: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/60.jpg)
Strutturazione logica del documento HTML
Es. separatori: Testo della mia prima pagina<br/> Dopo
questa frase voglio andare a capo<br/> e poi introdurre una separazione netta mettendo una linea orizzontale come questa
<hr align=“center” size=“5” width=“50%” color=“red”>
che sta al centro, rossa, spessa e larga quanto basta per separare
![Page 61: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/61.jpg)
separatori:
![Page 62: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/62.jpg)
Strutturazione logica del documento HTML
citazioni:
• tag pieno <blockquote>…. </blockquote> • provoca rientro e a capo della porzione di
testo relativa alla citazione rispetto al testo che segue e precede
![Page 63: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/63.jpg)
Strutturazione logica del documento HTML
citazioni: L'autore definisce la sua opera con le seguenti
parole: <blockquote>
"Un testo fondamentale per la letteratura di ogni tempo, in cui sono trattati i temi relativi a molti argomenti." </blockquote> parole che a me paiono come minimo eccessive.
![Page 64: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/64.jpg)
citazioni:
![Page 65: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/65.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento • strutturazione fisica del documento • inserimento di immagini • inserimento di collegamenti ipertestuali
![Page 66: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/66.jpg)
Strutturazione fisica del documento HTML
• grassetto, corsivo, sottolineato, enfatizzato
• rimpicciolito, ingrandito • in apice e pedice • font (tipo e dimensione) • elenchi (puntati e numerati) • tabelle
![Page 67: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/67.jpg)
Strutturazione fisica del documento HTML
grassetto:
• tag pieno <b> … </b> (bold) • contiene tutto il testo che deve
comparire in grassetto
![Page 68: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/68.jpg)
Strutturazione fisica del documento HTML
corsivo:
• tag pieno <i> … </i> (italic) • contiene tutto il testo che deve
comparire in corsivo
![Page 69: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/69.jpg)
Strutturazione fisica del documento HTML
sottolineato:
• tag pieno <u> … </u> (underline) • contiene tutto il testo che deve
comparire sottolineato
![Page 70: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/70.jpg)
Strutturazione fisica del documento HTML
enfatizzato:
• tag pieno <em> … </em> (emphasis) • contiene tutto il testo che deve
comparire enfatizzato
![Page 71: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/71.jpg)
Strutturazione fisica del documento HTML
rimpicciolito e ingrandito: • tag pieni <small> … </small> e <strong> … </
strong> • contiene tutto il testo che deve
comparire rimpicciolito / ingrandito
![Page 72: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/72.jpg)
Strutturazione fisica del documento HTML
in apice e in pedice:
• tag pieni <sup> … </sup> e <sub> … </sub> • contiene tutto il testo che deve
comparire in apice / in pedice
![Page 73: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/73.jpg)
Strutturazione fisica del documento HTML
font:
• tag pieno <font> … </font> • attributi: SIZE (dimensione), FACE
(tipo), COLOR
![Page 74: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/74.jpg)
Strutturazione fisica del documento HTML
font SIZE:
• valori da 1 a 7 (3 default) • valori relativi (piu’ grande o piccolo del
font attuale) espressi con + | - ed un numero
![Page 75: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/75.jpg)
Strutturazione fisica del documento HTML
font FACE:
• valori Times (default), Arial, Verdana, Courier, Helvetica, …
![Page 76: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/76.jpg)
Strutturazione fisica del documento HTML
font COLOR:
• il colore in HTML puo’ essere espresso tramite la codifica RGB
• oppure tramite nomi di colori riconosciuti dal browser
![Page 77: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/77.jpg)
Strutturazione fisica del documento HTML
Colore con codifica RGB (Red Green Blue):
• esadecimale con i simboli 0|1|2|3|4|5|6|7|8|9|a|b|c|d|e|f
• terna di coppie di valori: la prima coppia esprime la percentuale di rosso, la seconda la percentuale di verde e la terza quella di blu
• Es.: ff0000, 00ff00, 0000ff
![Page 78: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/78.jpg)
Strutturazione fisica del documento HTML
Colore con i colori riconosciuti in HTML:
• 16 colori principali • black, silver, white, gray, red, fuchsia,
maroon, purple, blue, navy, aqua, teal, lime, green, yellow, olive
![Page 79: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/79.jpg)
Strutturazione fisica del documento HTML
elenchi: • elenchi puntati: tag pieno <ul> … </ul>
(unordered list che include tutto l’elenco) + tag pieni <li> … </li> (list item uno per ogni punto dell’elenco)
• elenchi numerati: tag pieno <ol> … </ol> (ordered list che include tutto l’elenco) + tag pieni <li> … </li> (list item uno per ogni punto dell’elenco)
![Page 80: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/80.jpg)
Strutturazione fisica del documento HTML
elenchi: Animali <ul> <li>cane</li> <li>gatto</li> <li>pesce</li>
</u>l
![Page 81: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/81.jpg)
elenchi:
![Page 82: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/82.jpg)
Strutturazione fisica del documento HTML
tabelle: • tag pieno <table> … </table> • tag pieno <tr> … </tr> (table row), uno per
ogni riga della tabella • tag pieno <td> … </td> (table data), uno
per ogni cella di ogni riga della tabella
![Page 83: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/83.jpg)
Strutturazione fisica del documento HTML
tabelle: <table border=2> <tr> <td> cella 1.1</td> <td> cella 2.1</td> <td> cella 3.1</td> </tr> <tr> <td> cella 1.2</td> <td> cella 2.2</td>
<td> cella 3.2</td> </tr> </table>
![Page 84: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/84.jpg)
tabelle:
TR
TR
/TR
/TR
TD TD TD
TD TD TD
/TD /TD /TD
/TD /TD /TD
TABLE
/TABLE
![Page 85: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/85.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento • strutturazione fisica del documento • inserimento di immagini • inserimento di collegamenti ipertestuali
![Page 86: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/86.jpg)
Inserimento di immagini
Immagine:
Tag vuoto IMG con attributo obbligatorio SRC
<img src=“nomefile”> dove nomefile deve essere sostituito dal
nome del file che contiene l’immagine (compresa l’estensione)
![Page 87: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/87.jpg)
Inserimento di immagini
Immagine altri attributi consigliati:
• width: specifica in pixel la larghezza • height: specifica in pixel l’altezza • alt: specifica con un breve testo il
contenuto dell’immagine (rendendone chiaro il contenuto anche quando l’immagine non si carica)
![Page 88: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/88.jpg)
Inserimento di immagini
Immagine e posizione nella pagina:
• HTML tratta l’immagine come un carattere di testo e quindi la inserisce nel punto del documento in cui la trova eventualmente aumentando la spaziatura tra le righe
![Page 89: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/89.jpg)
Inserimento di immagini
Immagine e posizione nella pagina:
• per inserire immagini col testo che scorre attorno si usa l’attributo STYLE con valore FLOAT:LEFT o FLOAT:RIGHT
• Per inserire immagini isolate dal testo si usa il tag P con attributo STYLE, es. <p style=“text-align:center”> immagine </p>
![Page 90: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/90.jpg)
Inserimento di immagini
Immagine e formato:
• esistono moltissimi formati immagine, ma, per motivi di memoria e di compatibilità, quelli consigliati sono JPG, GIF e PNG (che è una evoluzione di GIF)
• non conviene mai mettere nelle pagine web immagini troppo “pesanti” che rallentano il caricamento della pagina
![Page 91: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/91.jpg)
Struttura e contenuto del documento HTML
• strutturazione logica del documento • strutturazione fisica del documento • inserimento di immagini • inserimento di collegamenti ipertestuali
![Page 92: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/92.jpg)
Inserimento di collegamenti ipertestuali
• collegamento ipertestuale: Tag pieno A con attributo obbligatorio
HREF <a href=“link”>parolacalda</a> dove link deve essere sostituito da un
indirizzo di una pagina web e parolacalda da un testo cliccando sul quale si attiva il collegamento ipertestuale (visualizzato in modo apposito dal browser)
![Page 93: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/93.jpg)
Inserimento di collegamenti ipertestuali
• collegamento ipertestuale ad una parte di una pagina web:
<a href=“link#xxx”>parolacalda</a> dove xxx deve essere il nome di una parte
di una pagina NB: per poter usare il nome xxx, occorre
che xxx sia stato attribuito come nome a una parte della pagina indicata da link
![Page 94: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/94.jpg)
Inserimento di collegamenti ipertestuali
• attribuzione di nome ad una parte di una pagina web:
Tag pieno A con attributo obbligatorio NAME
<a name=“xxx”>testo</a> dove testo deve essere una parte di una
pagina
![Page 95: HyperText Markup Language - DiUniTobosco/lingue2017/html-intro17.pdfHTML • HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è usato](https://reader036.fdocument.pub/reader036/viewer/2022081504/5ee0293aad6a402d666b661d/html5/thumbnails/95.jpg)
Usare HTML
Ora proveremo a utilizzare HTML in due modi diversi:
- dal sito di W3C, che mette a disposizione strumenti e tutorial (http://www.w3schools.com/html/default.asp)
- direttamente scrivendo del codice con il Notepad e visualizzandolo con il browser