HTML - Unibo
annuncio pubblicitario
Informatica HTML Francesco Tura [email protected] © F. Tura 1 HTML (Hyper Text Markup Language) Linguaggio utilizzato per creare pagine documenti ipertestuali da rendere disponibili su un web server IPERTESTO struttura informativa costituita di un insieme di pagine multimediali (testi+immagini+suoni) consultabili tramite un programma applicativo denominato browser in modo non solo sequenziale, ma anche con l’utilizzo di collegamenti ipertestuali (link) che rimandano ad altre pagine che possono essere memorizzate sia sullo stesso sia su altri web server collegati in rete Il sistema di ipertesti più conosciuto e diffuso è il World Wide Web (WWW) di Internet, che utilizza l’HTML © F. Tura 2 HTML (Hyper Text Markup Language) È stato sviluppato alla fine degli anni ‘80 dall’informatico inglese Tim Berners-Lee. Si è diffuso su larga scala alla metà degli anni ‘90. È basato su un altro linguaggio, detto SGML (Standard Generalised Markup Language), simile ma con scopi più generici È compatibile con qualsiasi sistema operativo La sintassi dell’HTML è stabilita internazionalmente dal World Wide Web Consortium (W3C) Sono state sviluppate alcune sue versioni più estese, come XHTML e XML, che presentano maggiori potenzialità di rappresentazione (web semantico) © F. Tura 3 CARATTERISTICHE FONDAMENTALI DEL LINGUAGGIO HTML Ogni documento ipertestuale scritto in HTML deve essere contenuto in un file la cui estensione deve essere .htm o .html Ogni documento ipertestuale scritto in HTML deve essere aperto – per la sua visualizzazione – tramite un programma browser (es. Internet Explorer, Mozilla Firefox, Netscape, ecc.) L’unità sintattica dell’HTML è l’elemento, il quale deve essere compreso tra due tag (uno di apertura e uno di chiusura) TAG identificatore [= stringa alfanumerica compresa tra i simboli < e >] che serve a spiegare al programma browser come dovrà essere impaginato il testo espresso in HTML © F. Tura 4 SINTASSI DELL’HTML TIPI DI TAG <stringa> tag di apertura </stringa> tag di chiusura I tag possono essere scritti indifferentemente in maiuscolo o minuscolo [ non sono case sensitive] © F. Tura 5 SINTASSI DELL’HTML TAG DI BASE <html>, </html> apertura e chiusura di un documento ipertestuale sono obbligatori <head>, </head> definiscono le impostazioni di intestazione (es. titolo, ecc.) del documento ipertestuale <title>, </title> definiscono il titolo che deve apparire in testa al documento ipertestuale <body>, </body> definiscono il corpo (parte principale) del documento ipertestuale © F. Tura 6 SINTASSI DELL’HTML PARAMETRI Alcuni tag possono contenere uno o più parametri (detti anche attributi), che servono a specificare meglio il significato del tag stesso parametro stringa alfanumerica contenuta all’interno del tag che contiene un valore preceduto dal segno = secondo la seguente sintassi: < nometag nomeparametro=valore nomeparametro=valore [...] > © F. Tura 7 SINTASSI DELL’HTML SEZIONE CORPO Qualsiasi testo che si desideri inserire all'interno della pagina va messo nella sezione corpo vero e proprio del codice, ovvero dopo <body> e prima di </body> Fa eccezione l’eventuale titolo della pagina, che va nella sezione intestazione © F. Tura 8 ESEMPI DI SINTASSI DELL’HTML (1) INTITOLARE UN DOCUMENTO Esempio: Creare una pagina vuota ma con in alto il seguente titolo: “SALVE, MONDO” <html> <head> <title> SALVE, MONDO </title> </head> </html> N.B. valido per questo e per tutti gli esempi seguenti: il testo ivi indicato in rosso va scritto in un file che va salvato con un nome ed una estensione .htm o html. Dopodiché va aperto con un programma browser per ottenere la visualizzazione della pagina così come impostata in HTML. © F. Tura 9 ESEMPI DI SINTASSI DELL’HTML INTITOLARE UN DOCUMENTO Il browser presenterà la pagina come segue: SALVE, MONDO © F. Tura 10 ESEMPI DI SINTASSI DELL’HTML (2) AGGIUNGERE CAPITOLI E PARAGRAFI I titoli dei capitoli e dei paragrafi vanno inseriti tra i tag <hn> e </hn>, ove n indica il livello gerarchico. Si possono usare fino a 6 livelli: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> © F. Tura 11 ESEMPI DI SINTASSI DELL’HTML --- AGGIUNGERE TITOLI E PARAGRAFI Esempio: Creare una pagina intitolata “METROPOLI EUROPEE”, ove le metropoli sono raggruppate per Regione di appartenenza, a loro volta raggruppate per Stato di appartenenza © F. Tura <html> <head> <title> METROPOLI EUROPEE </title> </head> <body> <h1> 1. Francia </h1> <h2> 1.1 Provenza-Alpi-Costa Azzurra </h2> <h3> 1.1.1. Marsiglia </h3> <h3> 1.1.2. Nizza </h3> <h2> 1.2. Normandia </h2> <h3> 1.2.1. Roen </h3> <h3> 1.2.2. Caen </h3> <h1> 2. Germania </h1> <h2> 2.1. Baviera </h2> <h3> 2.1.1. Monaco </h3> <h3> 2.1.2. Ratisbona </h3> <h2> 2.2. Baden-Württemberg <h2> <h3> 2.2.1. Stoccarda <h3> <h3> 2.2.2. Heidelberg <h3> </body> 12 </html> ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE TITOLI E PARAGRAFI Il browser presenterà la pagina come segue: METROPOLI EUROPEE 1. Francia 1.1. Provenza-Alpi-Costa Azzurra 1.1.1. Marsiglia 1.1.2. Nizza 1.2. Normandia 1.2.1. Rouen 1.2.2. Caen 2. Germania 2.1. Baviera 2.1.1. Monaco 2.1.2. Ratisbona 2.2. Baden-Württemberg 2.2.1. Stoccarda 2.2.2. Heidelberg © F. Tura 13 ESEMPI DI SINTASSI DELL’HTML (3) AGGIUNGERE TESTO NORMALE Ogni periodo (paragraph), ossia ogni porzione di testo compresa tra due punti e a capo, va inserita tra i tag <p> e </p> • Il tag di chiusura </p> è facoltativo © F. Tura 14 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE TESTO NORMALE Nell’esempio precedente, se riguardo alla città di Marsiglia vogliamo aggiungere del testo sottostante, il codice dovrà essere il seguente: <html> <head> <title> METROPOLI EUROPEE </title> </head> <body> <h1> 1. Francia </h1> <h2> 1.1 Provenza-Alpi-Costa Azzurra </h2> <h3> 1.1.1. Marsiglia </h3> <p> Marsiglia si trova nella Francia meridionale. </p> <p> Si tratta del principale porto della Francia. </p> <h3> 1.1.2. Nizza </h3 […] © F. Tura 15 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE TESTO NORMALE Il browser presenterà la pagina come segue: METROPOLI EUROPEE 1. Francia 1.1. Provenza 1.1.1. Marsiglia Marsiglia si trova nella Francia meridionale. Si tratta del principale porto della Francia. 1.1.2. Nizza […] © F. Tura 16 ESEMPI DI SINTASSI DELL’HTML (4) FORZARE L’ “ A CAPO” Nel caso in cui si desideri andare a capo senza terminare il periodo (paragraph), ciò può essere fatto inserendo il tag <br> © F. Tura 17 ESEMPI DI SINTASSI DELL’HTML FORZARE L’ “A CAPO” Supponiamo di volere mettere a capo una informazione per darle più risalto, per esempio la data dell’appello: <html> <head> <title> ATTENZIONE </title> </head> <body> <p> L’appello Informatica giuridica si terrà <br> GIOVEDI 5 GIUGNO ALLE 9.30 <br> nell’Aula Magna della Facoltà </p> </body> </html> © F. Tura 18 ESEMPI DI SINTASSI DELL’HTML FORZARE L’ “A CAPO” Il browser presenterà la pagina come segue: AVVISO L’appello di giugno di Informatica giuridica si terrà GIOVEDI 5 GIUGNO ALLE 9.30 nell’Aula Magna della Facoltà. © F. Tura 19 ESEMPI DI SINTASSI DELL’HTML (5) AGGIUNGERE ENFASI Per enfatizzare una porzione di testo, essa può essere racchiusa tra i tag <em> e </em> Il tipo di enfatizzazione non è predefinito dal programmatore HTML, bensì viene scelto dal browser che visualizzerà la pagina il browser utilizzato sarà libero di scegliere se enfatizzare il testo con il corsivo, con la sottolineatura, con il grassetto, ecc. © F. Tura 20 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE ENFASI Nell’esempio precedente, invece che scriverla in maiuscolo, potremmo dare enfasi alla data dell’appello nel modo seguente: <html> <head> <title> ATTENZIONE </title> </head> <body> <p> L’appello di giugno di Informatica giuridica si terrà <br> <em> giovedì 5 giugno alle 9.30 </em> <br> nell’Aula Magna della Facoltà </p> </body> </html> © F. Tura 21 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE ENFASI Il browser potrebbe presentare la pagina come segue: AVVISO L’appello di giugno di Informatica giuridica si terrà giovedì 5 giugno alle 9.30 nell’Aula Magna della Facoltà. ma anche come segue: AVVISO L’appello di giugno di Informatica giuridica si terrà giovedì 5 giugno alle 9.30 nell’Aula Magna della Facoltà. ecc. © F. Tura 22 ESEMPI DI SINTASSI DELL’HTML (6) AGGIUNGERE LISTE I tipi di lista che possono essere inseriti nel testo sono tre: A. LISTA NON ORDINATA B. LISTA ORDINATA C. LISTA DI DEFINIZIONI © F. Tura 23 ESEMPI DI SINTASSI DELL’HTML (6.A) AGGIUNGERE LISTE NON ORDINATE Una lista non ordinata è un elenco di elementi che si desidera sia visualizzata senza numerazione progressiva, ma solamente andando a capo con punti o altri simboli Per inserire una lista non ordinata si usano i tag <ul> e </ul> per indicare l’inizio e la fine della lista, mentre si usano i tag <li> e </li> per indicare ogni elemento della lista Il tag di chiusura </li> di ogni elemento è facoltativo mentre il tag di chiusura </ul> della lista è obbligatorio • © F. Tura 24 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE LISTE ORDINATE Esempio: aggiunta di lista non ordinata <html> <head> <title> TEORIA DEL COLORE </title> </head> <body> <p> I colori primari sono: <ul> <li> giallo </li> <li> rosso </li> <li> blu </li> </ul> cui si aggiungono il bianco e il nero </p> </body> </html> © F. Tura 25 ESEMPI DI SINTASSI DELL’HTML © F. Tura AGGIUNGERE LISTE NON ORDINATE Il browser potrebbe presentare la pagina come segue: TEORIA DEL COLORE I colori primari sono: • giallo • rosso • blu cui si aggiungono il bianco e il nero. oppure come segue: TEORIA DEL COLORE I colori primari sono: giallo rosso blu cui si aggiungono il bianco e il nero. ecc. 26 ESEMPI DI SINTASSI DELL’HTML (6.B) AGGIUNGERE LISTE ORDINATE Una lista ordinata è un elenco di elementi che si desidera sia visualizzata andando a capo con numerazione progressiva Per inserire una lista ordinata si usano i tag <ol> e </ol> per indicare l’inizio e la fine della lista, mentre si usano i tag <li> e </li> per indicare ogni elemento della lista Il tag di chiusura </li> di ogni elemento è facoltativo mentre il tag di chiusura </ol> della lista è obbligatorio • © F. Tura 27 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE LISTE ORDINATE Esempio: aggiunta di lista ordinata <html> <head> <title> FIUMI ITALIANI </title> </head> <body> <p> I principali fiumi italiani sono: <ol> <li> Po </li> <li> Adige </li> <li> Tevere </li> <li> Arno </li> </ol> nell’ordine sopra indicato. </p> </body> </html> © F. Tura 28 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE LISTE NON ORDINATE Il browser presenterà la pagina come segue: FIUMI ITALIANI I principali fiumi italiani sono: 1. Po 2. Adige 3. Tevere 4. Arno nell’ordine sopra indicato. 29 © F. Tura ESEMPI DI SINTASSI DELL’HTML (6.C) AGGIUNGERE LISTE DI DEFINIZIONI Una lista di definizioni è un elenco di termini di cui si riporta una definizione nella riga successiva, in posizione leggermente indentata rispetto al termine sovrastante Il termine da definire deve essere compreso tra i tag <dt> e </dt>, mentre la definizione deve seguire compresa tra i tag <dd> e </dd>. L’intera lista deve poi essere compresa tra i tag <dl> e </dl> I tag di chiusura </dt> e </dd> di termini e definizioni sono facoltativi mentre il tag di chiusura </dl> della lista è obbligatorio • © F. Tura 30 ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE LISTE DI DEFINIZIONI Esempio: aggiunta di lista di definizioni <html> <head> <title> MANUALE DI INFORMATICA </title> </head> <body> <dl> <dt> Informatica </dt> <dd> scienza della rappresentazione e della elaborazione della informazione </dd> <dt> Programma </dt> <dd> formulazione di un algoritmo in un linguaggio di programmazione </dd> <dt> Motore di ricerca </dt> <dd> programma per la ricerca della informazione sul world wide web </dd> </dl> </body> </html> 31 © F. Tura ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE LISTE DI DEFINIZIONI Il browser presenterà la pagina come segue: MANUALE DI INFORMATICA Informatica scienza della rappresentazione e della elaborazione della informazione Programma formulazione di un algoritmo in un linguaggio di programmazione Motore di ricerca programma per la ricerca della informazione sul world wide web 32 © F. Tura ESEMPI DI SINTASSI DELL’HTML (7) INSERIRE IMMAGINI © F. Tura Per inserire immagini (o filmati) nella pagina si utilizza il tag <img>. All’interno del tag va inserito il parametro src src indica il file in cui è contenuta l’immagine Il file contenente l’immagine può trovarsi anche in un’altra cartella o su un altro web server rispetto a quella ove è scritto il testo html: in tal caso occorre indicare rispettivamente il percorso o l’url della risorsa (ovvero dell’immagine da mostrare) Il tag img può contenere anche altri parametri, come per esempio: width indica la larghezza desiderata per l’immagine (in pixel) height indica l’altezza desiderata per l’immagine (in pixel) • Il tag <img> non prevede tag di chiusura 33 ESEMPI DI SINTASSI DELL’HTML INSERIRE IMMAGINI Esempio: inserimento di un’immagine memorizzata nel file c:\immagini\hardware\tastiera.jpg <html> <head> <title> IMMAGINI DI INFORMATICA </title> </head> <body> <p> Qui sotto viene raffigurato un pc. </p> <img src=c:\immagini\hardware\pc.jpg widht=90 height=100> </body> </html> 34 © F. Tura ESEMPI DI SINTASSI DELL’HTML INSERIRE IMMAGINI Il browser presenterà la pagina come segue: IMMAGINI DI INFORMATICA Qui sotto viene raffigurato un pc. 35 © F. Tura ESEMPI DI SINTASSI DELL’HTML (8) COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE Il collegamento ipertestuale (link) è un rimando ad altre pagine web, le quali possono essere memorizzate sia sullo stesso sia su altri web server collegati in Internet Viene creato utilizzando i tag <a> e </a>. Il tag di apertura <a> prevede un parametro obbligatorio href il quale indica l’URL della pagina web alla quale si vuole rimandare Tra il tag di apertura e il tag di chiusura occorre inserire del testo: tale testo sarà visualizzato dal browser in evidenza: facendo clic su di esso l’utente accederà direttamente alla pagina web indicata, se la pagina e l’eventuale collegamento Internet sono disponibili. © F. Tura 36 ESEMPI DI SINTASSI DELL’HTML COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE Esempio1: collegamento ipertestuale (link) ad una pagina web memorizzata nello stesso web server e nella stessa directory della pagina corrente <html> <head> <title> INFORMATICA </title> </head> <body> <p> Dicesi programma la formulazione di un <a href= linguaggi.html > algoritmo </a> in un linguaggio di programmazione. </p> </body> </html> 37 © F. Tura ESEMPI DI SINTASSI DELL’HTML COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE Esempio2: collegamento ipertestuale (link) ad una pagina web memorizzata in altro web server <html> <head> <title> FIUMI EUROPEI </title> </head> <body> <p> Il Danubio attraversa la <a href=www.atlante.it/baviera.html> Baviera </a> e il territorio austriaco. </p> </body> </html> 38 © F. Tura ESEMPI DI SINTASSI DELL’HTML COLLEGAMENTO IPERTESTUALE (LINK) AD ALTRE PAGINE es.1: il browser presenterà la pagina come segue: INFORMATICA Dicesi programma la formulazione di un algoritmo in un linguaggio di programmazione. es.2: il browser presenterà la pagina come segue: FIUMI EUROPEI Il Danubio attraversa la Baviera e il territorio austriaco. 39 © F. Tura ESEMPI DI SINTASSI DELL’HTML (9) CARATTERI SPECIALI Alcuni caratteri particolari (es. lettere accentate o con particolari caratteri aggiuntivi: è, é, å, ô, ü, ñ, ß, ç, ecc., altri simboli: €, &, ecc.) non fanno parte del set di caratteri universalmente riconosciuti da tutti i browser e quindi non possono essere introdotti così come sono Affinché siano universalmente riconosciuti da tutti i browser è necessario sostituirli con particolari comandi che iniziano con il carattere & seguito da una descrizione standardizzata del carattere da visualizzare © F. Tura 40 ESEMPI DI SINTASSI DELL’HTML CARATTERI SPECIALI è &egrave [È &Egrave] é &eacute. [È &Eacute] [similmente per le altre vocali] ñ &ntilde ü &uuml [similmente per le altre vocali] ô &ocirc [similmente per le altre vocali] ß &szlig ç &ccedil € &euro & &amp […] © F. Tura 41 ESEMPI DI SINTASSI DELL’HTML CARATTERI SPECIALI Esempio: inserimento di un testo contenente caratteri speciali <html> <head> <title> DIZIONARIO </title> </head> <body> <p> La traduzione italiana di Espa&ntildea &egrave Spagna. </p> </body> </html> 42 © F. Tura ESEMPI DI SINTASSI DELL’HTML AGGIUNGERE LISTE DI DEFINIZIONI Il browser presenterà la pagina come segue: DIZIONARIO La traduzione italiana di España è Spagna. 43 © F. Tura ESEMPI DI SINTASSI DELL’HTML (10) IMPEDIRE L’ “ A CAPO” A volte può essere opportuno impedire che nella visualizzazione di una determinata coppia di parole il browser vada a capo tra una parola e l’altra Tale divieto può essere imposto in HTML con il comando &nbsp; al posto dello spazio © F. Tura 44 ESEMPI DI SINTASSI DELL’HTML IMPEDIRE L’ “A CAPO” Esempio: inserimento di un testo in cui non sia possibile andare a capo tra le parole Coca e Cola <html> <head> <title> BIBITE ANALCOLICHE </title> </head> <body> <p> La bibita pi&ugrave diffusa &egrave la Coca&nbsp;Cola. </p> </body> </html> il browser, nel caso in cui la parola Coca si trovi a fine riga, manderà a capo l’intera locuzione Coca Cola 45 © F. Tura ESEMPI DI SINTASSI DELL’HTML (11) INSERIRE TESTO PREFORMATTATO Ogni browser ha una certa autonomia nel visualizzare il testo scritto in HTML l’autonomia riguarda, ad es. come andare a capo, quante righe da saltare, come separare le parole, come enfatizzare, ecc. Per impedire al browser di turno di utilizzare le sue convenzioni di formattazione è possibile forzare la rigida visualizzazione del testo a come inserito in HTML utilizzando i tag <pre> e </pre> Tutto il testo compreso tra i due tag suddetti viene copiato nel browser rispettando le occorrenze di spazi, tabulatori e linee vuote. © F. Tura 46 ESEMPI DI SINTASSI DELL’HTML INSERIRE TESTO PREFORMATTATO Esempio: <html> <body> <pre> <p> LETTERA A </pre> </body> </html> LETTERA B </p> il browser visualizzerà il testo con la stessa distanza tra le stringhe “LETTERA A” e “LETTERA B” che è stata prevista nel testo html 47 © F. Tura ESEMPI DI SINTASSI DELL’HTML (12) ALLINEARE TESTO E IMMAGINI Nel caso in cui si desideri inserire una immagine ed anche un testo che la descriva, è possibile indicare al browser dove tale testo deve essere visualizzato in relazione all’immagine A tal fine si utilizza il parametro align all’interno del tag <img> align=“left” e align=“right” servono per posizionare tutto il testo che segue nell’ambito del paragrafo corrente rispettivamente alla destra e alla sinistra dell’immagine. © F. Tura 48 ESEMPI DI SINTASSI DELL’HTML ALLINEARE TESTO E IMMAGINI Esempio: allineamento dell’immagine a sinistra e del relativo testo descrittivo a destra <html> <body> <p> <img src=c:\immagini\hardware\pc.jpg widht=90 height=100 align=“left”> Esempio di pc </p> </body> </html> 49 © F. Tura ESEMPI DI SINTASSI DELL’HTML ALLINEARE TESTO E IMMAGINI il browser visualizzerà la pagina come segue: Esempio di pc 50 © F. Tura
