HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto

Transcript

1 HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La modalità di creare pagine web è cambiata e si è evoluta negli ultimi 20 anni, per avere un web 'migliore' sono stati introdotti nuovi elementi e attributi e ne sono stati vietati degli altri che restano validi solo per consentire la visualizzazione di vecchie pagine web, ma sono espressamente vietati nella creazione di nuovi documenti. Ad esempio sono vietati: basefont, big, center, font, s, strike, tt, u, align e valign, background, bgcolor, cellpadding, border, cellspacing e molti altri. Vietati anche i tag per i frame, ritenuti dannosi per usabilità e accessibilità: frame, frameset e noframes. Per avere gli effetti di presentazione che prima di HTML5 venivano ottenuti con i tag ora vietati o per suddividere la pagina senza usare i frame è ora necessario usare i fogli di stile CSS(Cascading Style Sheet). Per maggiori informazioni visita: e INTRODUZIONE HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto Si usa per costruire pagine web definendo Contenuto Layout (aspetto grafico) di ogni pagina e memorizzandolo in un file di testo con estensione htm o html. Un file HTML contiene il testo della pagina e i tag (etichetta). I tag non fanno parte del testo e non sono visibili all utente che consulta le pagine web I tag sono racchiusi tra parentesi angolari: < >. 1

2 I tag definiscono la struttura della pagina sintassi generale : <tag> testo od oggetto da visualizzare </tag> Per ogni tag aperto deve esserci un tag chiuso ad eccezione di alcuni che prendono il nome di tag secchi la cui sintassi e': <tag /> I tag devono essere annidati, come le parentesi in una espressione matematica <html>... </html> contengono tutta la pagina. Struttura della pagina HTML Il documento HTML si suddivide in due parti: intestazione e corpo L intestazione è contenuta tra i tag <head> e </head> Contiene il titolo della pagina (<title>...</title>), l indicazione dell autore e altre informazioni. Il titolo e' quello che compare in piccolo nella barra superiore del browser Il corpo è racchiuso dai tag <body> e </body> contiene tutto il testo da visualizzare, i link ad altre pagine, a file, a immagini, etc. In una pagina html i tag <body> e </body> devono comparire una sola volta <!DOCTYPE html> <html> <head> <title>titolo </title>... </head> <body> Contenuto del corpo </body> </html> 2

3 Il tag <p> (paragraph paragrafo) In un documento html il testo è separato in paragrafi. Ogni paragrafo è contenuto all'interno del tag <p>, esempio <body> </body> <p> testo del primo paragrafo</p> <p> testo del secondo paragrafo</p> Il tag <br /> br sta per break (interruzione forzata di riga) Si tratta del comando vai a capo che permette di interrompere una riga e riprendere il testo nella riga successiva all'interno dello stesso paragrafo (questo tag è necessario poiché i browser non riconoscono il carattere di andata a capo). È un tag 'secco' apre e chiude Esempio: Creare una pagina con la prima terzina della Divina Commedia. <!DOCTYPE html> <html> <head> <title> Esempio </title> </head> <body> <p> Nel mezzo del cammin di nostra vita<br/> mi ritrovai per una Selva oscura <br/> che la diritta via era smarrita<br/> </p> </body> </html> 3

4 Esercizi Crea il file esempio.html con un editor di testo. Aggiungi le seguenti terzine e salva il file con il nome divina.html Ah quanto a dir qual è cosa dura esta selva selvaggia ed aspra e forte che nel pensier rinnova la paura! Tant'è amara che poco è più morte; ma per trattar del ben ch'i vi trovai, dirò de l'altre cose ch'i v'ho scorte Caratteri speciali Per la visualizzazione di alcuni caratteri speciali occorre utilizzare i seguenti codici (Entità di carattere speciali), altrimenti il browser potrebbe non essere in grado di interpretarli : Simbolo Codice < < > > spazio é é è è " " & & TM bisogna ricordarsi che tutte I codici iniziano con & e finiscono con ; inoltre i codici delle altre vocali si ottengono con la stessa regola mostrata sopra per la e 4

5 Titoli dei paragrafi Un titolo è l elemento di un paragrafo che deve distinguersi dal testo normale e deve risultare più evidente al lettore. Il titolo più importante che comprende tutto il testo viene individuato dal tag <h1>; seguono, in ordine di importanza e di evidenza, i sottotitoli <h2>, <h3>, <h4>, <h5>, <h6>. I titoli e sottotitoli sono raggrupati nel tag hgroup. Esempio: <!DOCTYPE html> <html> <body> <hgroup> <h1> titolo più importante </h1> <h2> sottotitolo più importante </h2> </hgroup> <p> testo del paragrafo </p> </body> </html> Esercizio Inserire nella pagina divina.html i titoli: DIVINA COMMEDIA INFERNO PRIMO CANTO 5

6 CSS Iniziamo ora a vedere come modificare lo stile dei paragrafi attraverso il CSS Per prima cosa bisogna sapere che esistono diversi modi per formattare gli elementi html con il CSS CSS inline Consiste nell'utilizzo dell'attributo globale style, chiamato globale perche' e' applicabile a tutti gli elementi html (body, p, h, etc) e non perche' modifica lo stile di tutti i tag di un certo tipo. Quindi notiamo bene che si tratta di un attributo dei tag e non di un tag. Per modificare il colore del testo di un paragrafo dovremmo procedere nel seguente modo: <p style= color:red; > testo paragrafo </p> Per modificare colore e sfondo del testo: <p style= color:red; background:yellow; > testo paragrafo</p> Per modificare il font di un paragrafo <p style= font-family:verdana > testo paragrafo</p> Modificare font e dimensione: <p style= font-family:verdana; font-size:10px> testo paragrafo</p> Gli elementi che appaiono fra gli apici dopo l'attributo style, prendono il nome di regole di stile, se dobbiamo definire più di una regola per un elemento html queste devono essere separate tra loro dal ; 6

7 Riepiloghiamo le regole viste finora e introduciamone delle nuove: color:valore background:valore font-family:valore font-size:valore text-align:valore text-decoration:valore definisce il colore del testo definisce lo sfondo definisce il font definisce la dimensione del carattere definisce l'allineamento (left, right, center, justify) definisce elementi decorativi per il testo (underline, line-throught, blink, overline) Esercizio Prova ora ad utilizzare le regole CSS appena viste riprendendo l'esercizio precedente e visualizzando ogni terzina con uno stile differente 7

8 Internal CSS (Fogli di stile Interni) Come abbiamo detto in precedenza, esistono altri modi per definire lo stile della pagina web. Un altro modo prende il nome di internal CSS, e consiste nel definire le regole di stile tramite il tag <style> all'interno della sezione <head>. Le regole definite attraverso questo tag modificano lo stile di tutti i tag di un certo tipo all'interno della pagina. A differenza del CSS inline di cui abbiamo parlato prima, in questo caso style e' un tag a se stante e non l'attributo di un altro tag. Attenzione deve esistere una sola sezione <style>...</style> in tutta la pagina Le regole di stile in questo caso vengono definite nel seguente modo: <!DOCTYPE html> <html> </html> <head> </head> <body> </body> <style type=valore> </style>... nome_elemento_html{ regole_stile;} nel nostro caso al posto di valore scriveremo sempre text/css nel seguente modo: <style type= text/css > Vediamo come definire lo sfondo di una pagina con i fogli di stile interni <style type= text/css > body { background-color: white; background-image: url(back_400.gif); background-repeat: repeat-x; background-attachment: fixed; } </style> 8

9 Riepiloghiamo i nuovi elementi di stile: background-color:valore background-image:url(path) background-repeat:valore background-attachment:valore background-position:valore definisce un colore di sfondo (termine inglese che definisce il colore: red, white, ecc) definisce un'immagine come sfondo stabilisce come si deve ripetere l'immagine di sfondo (repeat-x, repeat-y, repeat, no-repeat) stabilisce come deve scorrere l'immagine di sfondo (scroll, fixed) definisce la posizione dello sfondo (left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x % y%, xpos ypos) Esercizio Prova anche questi elementi aggiungendo uno sfondo alla pagina dell'esercizio precedente 9

10 Per evidenziare il testo In modo che il testo appaia enfatizzato (corsivo) si usa il tag <em> - emphasis: enfasi <em> testo che deve comparire enfatizzato </em> In modo che il testo appaia in grassetto si usa il tag <strong> (forte): <strong> testo che deve comparire in grassetto </strong> Esercizio modifica la pagina divina.html in modo che una terzina appaia enfatizzata Liste Si usano per dare risalto a elenchi e liste, segnandone o numerandone le voci. Sono previste tre modalità diverse di creazione di elenchi: La lista disordinata che consiste in un elenco di elementi, ciascuno preceduto da un carattere speciale (es. un pallino nero); La lista ordinata dove ogni elemento è preceduto da un numero o da una lettera che indica la posizione dell'elemento all interno della lista; La lista di definizioni in cui ogni elemento è composto da due parti: una che indica il termine da definire e una che indica il testo della definizione. Per i primi due tipi di elenchi, si utilizzano due tag che segnalano l inizio dell elenco, rispettivamente <ul> (unordered list lista casuale) e <ol> (ordered list lista ordinata), e ogni elemento della lista è racchiusa tra i tag <li> e </li> (list item elemento della lista). 10

11 Esempio <!DOCTYPE html> <html> <body> <p>in base alle loro proprietà i quadrilateri possono essere:</p> <ol > <li> trapezi </li> <li> parallelogrammi </li> <li> rettangoli </li> <li> rombi </li> <li> quadrati </li> </ol > </body> </html> Esercizio Crea il file opere.html contenente il seguente elenco puntato: OPERE DI DANTE Vita Nuova Convivio De vulgari Eloquentia Commedia (Divina Commedia) Monarchia Epistole Egloghe Questio de aqua et terra Fiore Detto d'amore 11

12 Stile delle liste Attraverso il CSS possiamo definire in vari modi lo stile delle liste html. Le proprietà dedicate alla formattazione delle liste sono essenzialmente tre: list-style-type, list-style-position, list-style-image. Analizziamo meglio la sintassi e alcuni esempi list-style-type sintassi: Selettore {list-style-type:valore;} Si applica agli elementi <ol><ul><li> e al posto di valore possiamo inserire una delle seguenti scelte: per le liste non ordinate disc, circle, square per le liste ordinate decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha Esempio <!DOCTYPE html> <html> <body> <head> </head> <style> </style> ul {list-style-type:square;} ol {list-style-type:lower-roman;} <p>in base alle loro proprietà i quadrilateri possono essere:</p> <ul > </ul> <li> trapezi </li> <li> parallelogrammi </li> <li> rettangoli </li> <li> rombi </li> <li> quadrati </li> <p> i triangoli possono essere:</p> 12

13 <ol> </ol> </body> </html> <li> isosceli</li> <li> scaleni </li> <li> equilateri </li> Tabelle Per disporre delle informazioni in una tabella si usa il tag <table> con il relativo tag di chiusura </table> All interno della coppia <table> </table> vanno definite: 1. le righe che compongono la tabella con i tag <tr>... </tr> (table row riga di tabella) 2. in ogni riga si definiscono le celle di dati con i tag <td>... </td> (table data dati contenuti in una cella di una tabella) Intestazione della tabella E possibile definire una riga iniziale che contenga il nome di ogni colonna, le celle della riga di intestazione si distinguono dalle altre perché sono definite dai tag: <th> </th> (table header intestazione di tabella) in luogo di <td>... </td>. Il suo contenuto viene presentato in grassetto in modo automatico. 13

14 Esempio Realizzare in una pagina HTML la seguente tabella che riporta i cognomi e i ruoli dei dipendenti di una società. Rossi Bianchi Direttore Impiegato... <table> <tr> <th>cognome</th> <th>ruolo</th> </tr> <tr> <td>rossi</td> <td>direttore</td> </tr> <tr> <td> Bianchi </td> <td>impiegato</td> </tr> </table>... 14

15 Bordi delle tabelle Quando andiamo a visualizzare la nostra tabella attraverso il browser ci accorgeremo che appare senza alcun bordo che identifichi le varie celle della tabella, per ovviare a questo problema dobbiamo utilizzare anche in questo caso delle regole di stile che agiscono sui vari elementi della tabella Per specificare il bordo bisogna utilizzare le proprietà border-width, border-style, border-color proprietà applicabili ai tag <table>, <th>, <td>, <p>, etc. Noi in questo caso lo applicheremo ai tag <th> e <td> Esempio <!DOCTYPE html> <html> <head> <style> td, th{ border-width:1px; border-style:solid; border-color:black; } </style> </head> <body> <table> <tr> <th>cognome</th> <th>ruolo</th> </tr> <tr> <td>rossi </td> <td>direttore</td> </tr> <tr> <td>bianchi </td> <td>impiegato</td> </tr> </table> </body> </html> 15

16 Quando rivisualizziamo la tabella le celle appariranno separate fra loro per ovviare a questo problema dobbiamo impostare altre regole per unire fra loro i bordi delle varie celle: border-collapse, illustrato di seguito. Vediamo alcune altre proprietà applicabili alle tabelle border-collapse:valore border-spacing:valore padding:valore Definisce se I bordi dei vari elementi della tabella devono essere separati fra loro o sovrapporsi (separated, collapse) Definisce la distanza del bordo (della tabella o del paragrafo, etc) dai margini della pagina. Il valore deve essere espresso come coppia di valori in cui il primo rappresenta la distanza dal margine sinistro e la seconda dal margine superiore, per esempio: border-spacing: 10px 20px; per le tabelle funziona solo se uso la modalità separated Definisce la distanza del contenuto della cella dal suo bordo Il valore deve essere espresso come sequenza di quattro valori, alto destra basso sinistra, per esempio: border-padding: 10px 20px 15px 20px; 16

17 LINK I collegamenti ipertestuali o link, (più precisamente hyperlink), sono elementi attivi del documento HTML, per esempio un testo o un immagine, che indirizzano il browser ad un'altra pagina o al contenuto di un file. Il testo o l'immagine che si vuole usare come collegamento dovrà essere posto all'interno dei tag <a>...</a> occorre specificare la destinazione attraverso l'attributo href con la seguente sintassi: <a href= destinazione > testo da visualizzare </a> la destinazione puo' essere l'indirizzo (url) di un sito oppure il percorso di un file. In quest'ultimo caso il percorso deve essere relativo alla cartella in cui si trova la pagina che stiamo visitando. Quando costruiamo un sito con diverse pagine tutte le pagine secondarie devono contenere un link che riporti alla pagina principale Esempio <a href= > tiscali </a> Apre la pagina di tiscali. Se la destinazione del link è una pagina interna allo stesso sito <a href= percorso_relativo_pagina > testo da visualizzare </a> Esempio <a href= opere.html > opere </a> Apre la pagina 'opere' il cui file è contenuto nella stessa directory. Esercizio Nel file divina.html crea un link al file opere.html Nel file opere.html crea un link al file divina.html 17

18 IMMAGINI Per l inserimento di un immagine si usa il tag <img> (image immagine) é sempre necessario usare gli attributi: src che serve per specificare la posizione del file che contiene l immagine. alt in modo che in alternativa alla figura compaia una breve descrizione che ne spieghi il contenuto se il browser non consente la visualizzazione dell immagine. Come <br /> anche <img> e' un tag secco. Scrivendo: <img src= cane.gif alt= Disegno di un cane /> src specifica che il file cane.gif che contiene l'immagine è nella stessa directory del file html alt specifica che, in alternativa alla figura, se il browser non consente la visualizzazione, compaia la descrizione: 'Disegno di un cane' Se tutte le immagini del sito sono contenute nella directory 'immagini' si dovrà scrivere: <img src= immagini/cane.gif alt= Disegno di un cane /> Esercizio aggiungi l'immagine di Dante alla pagina divina.html Dimensione delle immagini Per definire la dimensione dell'immagine si usano le regole di stile: width specifica il valore in pixel della larghezza dell'immagine height specifica il valore in pixel della altezza dell'immagine 18

19 Specificando uno solo dei due valori l'altro verrà impostato automaticamente dal browser, esempio: <img src= cane.gif alt= Disegno cane style= width:200px; /> Quando si inserisce un immagine in una pagina web si dovrebbero utilizzare i formati GIF JPG PNG Le immagini devono essere di dimensioni contenute, max 100 kbyte, per le più grandi. 19