LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...

Transcript

1 LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività...

2 FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag <h1>, <h2> <h3>,..., fino ad <h6> Che formattano il testo in titolo dalla dimensione maggiore <h1> fino alla dimensione più piccola <h6> <h1> sto scrivendo il titolo principale </h1> <h2> sto scrivendo il titolo principale </h2> <h3> sto scrivendo il titolo principale </h3> <h6> sto scrivendo il titolo principale </h6> sto scrivendo il titolo principale sto scrivendo il titolo principale sto scrivendo il titolo principale Sto scrivendo il titolo principale PROVATE PER CREDERE!!!

3 FORMATTARE IL CARATTERE Se vogliamo impostare un carattere diverso utilizziamo il tag <font> Ad es. <font face = arial size = 5 color = red >questo è un esempio di testo in arial rosso</font restituisce questo è un esempio di testo in arial rosso Per specificare il tipo di font Per specificare la grandezza del carattere. Il valore max è 7 Per specificare il colore del testo, si può usare anche il codice esadecimale PROVATE PER CREDERE!!!

4 Inserire un testo scorrevole Per inserire un testo scorrevole utilizzare il tag <marquee> testo scorrevole </marquee> E possibile formattare questo testo con i tag h e font PROVATE PER CREDERE!!!

5 Elenchi numerati e puntati Per inserire una lista di voci non numerate Per inserire una lista di voci numerate <ul type= circle > </ul> <li>italia</li> <li>spagna</li> <li>francia</li> <ol> <li>roma</li> <li>napoli</li> <li>milano</li> </ol> Eserc.: Provare ad effettuare una lista nidificata

6 Esercizio2: Creare una pagina Web con il titolo Il mio secondo esempio in html con Un testo scorrevole colorato Intestazione (titolo grande centrato) Mi presento: Dati anagrafici scritti con un font di dimensione 14 e colore rosso Data di nascita, indirizzo e città con un font di dimensione 11 e di colore azzurro Uno sfondo di colore chiaro Una scritta centrata: I miei Hobby Una lista di hobby (utilizza un elenco non ordinato e un elenco ordinato Salvare nella cartella MioSito come es2.html

7 Inserire un link Per includere un link nel documento utilizziamo il seguente tag html tag <a href= risorsa.estensione > testo </a> Ad es. <a href= paginarossa.html > vai alla pagina rossa </a> Oppure <a href= > collegamento a google </a> Pagina web che si vuole aprire. Testo o immagine che l utente clicca per arrivare alla pagina desiderata DEVE ESSERE indicato il percorso completo o il nome se si trova nella stessa cartella del file

8 Inserire un immagine Per includere un immagine nel documento utilizziamo il seguente tag html tag <img src= percorso immagine > Ad es. <img src= foto1.jpg > oppure <img src= immagini/foto1.jpg > Se la foto si trova nella stessa cartella della pagina. Nel nostro esempio nella cartella miosito Se la foto si trova in una sottocartella della cartella della pagina. Nel nostro esempio nella cartella immagini all interno della cartella miosito E importante indicare l estensione del file, cioè.jpg

9 Inserire un immagine Oltre all attributo src che definisce il nome dell immagine e la posizione nella quale si trova il file Alt per inserire un testo alternativo all immagine Width per definire la larghezza in pixel dell immagine Height per definire l altezza in pixel dell immagine Align per allineare l immagine ad un testo : midde, bottom, top Ad es. <img src= sole1.jpg width= 100 height= 100 align= middle > Indica una larghezza di 100 pixel Indica un altezza di 100 pixel Un allinamento al centro rispetto al testo

10 Inserire un immagine Provate ad inserire l attributo alt con la descrizione. Passando con il mouse sulla foto sarà visualizzata tale descrizione. Ad es. <img src= sole1.jpg width= 100 height= 100 align= middle alt= un sole che ride > Esempio di codice html

11 Esercizio3: Creare una pagina Web con il titolo I link Inserire un intestazione Esempi di collegamento centrato con un tag H Aggiungere un testo scorrevole Inserire la scritta benvenuti nella nostra classe con un font a piacere e colorando di rosso solo la parola classe Inserire un immagine centrata Inserire un link alla pagina rossa Inserire un link al sito di google Inserire un link con una immagine Sulla pagina rossa un elenco numerato dei docenti Sulla pagina rossa inserire un link per tornare indietro Salvare nella cartella MioSito come es3.html

12 Le tabelle Le tabelle permettono di inserire gli oggetti nella pagina in modo ordinato per ottenere un aspetto grafico efficace. La tabella può essere bordata, ma i bordi possono anche essere nascosti per lasciare visibili solo gli oggetti della pagina web. Il tag è <table>... </table> per inserire una nuova tabella <tr>... </tr> per inserire una riga nella tabella <td>... </td> permette di inserire le celle all interno di una riga <th>... </th> per le celle della riga d intestazione con i caratteri in grassetto

13 Le tabelle Le dimensioni della tabella si possono definire a priori con i seguenti attributi Width per definire la larghezza in pixel o in percentuale Height per definire l altezza in pixel o in percentuale Colspan per unire due o più colonne all interno di una riga Rowspan per unire due o più righe all interno di una colonna Per migliorare ulteriormente la grafica Align Cellspacing Cellpadding Per allineare gli oggetti Per lasciare spazio tra una cella e l altra Per lasciare spazio rispetto al margine della cella

14 Esempio con le tabelle Le celle di una tabella possono contenere anche immagini e collegamenti; presentiamo un esempio di tabella con un immagine e un link, e per valorizzare la grafica non sarà inserito il bordo alla tabella Prima tabella <table border=1> <tr> <td> prima colonna riga 1 </td> <td> seconda colonna riga 1 </td> </tr> <tr> <td> prima colonna riga 2 </td> <td> seconda colonna riga 2 </td> </tr> </table>

15 Esercizio con le tabelle Le celle di una tabella possono contenere anche immagini e collegamento; presentiamo un esempio di tabella con un immagine e un link, e per valorizzare la grafica non sarà inserito il bordo alla tabella Primo esempio con tabelle Secondo esempio con tabelle

16 Esercizio 4: Creare una home page relativa ad un offerta di un viaggio con un titolo ed una delle parole scritta in rosso, una foto ed una breve descrizione con un link ad una seconda pagina Creare una seconda pagina contenente tre foto con relative descrizioni inserite in una tabella senza bordo con una prima riga a celle unite per il titolo