Costruire un Sito Web 2a Lezione: Martedì 6 Febbraio – HTML Comandi base HTML e NotePad Iniziamo la costruzione del sito cercando di acquisire le conoscenze base dell’HTML Una pagina web può essere facilmente costruita utilizzando il Blocco Note o NotePad di Windows NotePad genera automaticamente un nuovo documento di testo ogni volta che lo si avvia; Nel nostro esempio creiamo la cartella mioSito, nella quale verrà contenuto l’intero sito, e salviamo il documento corrente con il nome default.htm HTML e NotePad - continua Nel nostro esempio creiamo la cartella mioSito, nella quale verrà contenuto l’intero sito, e salviamo il documento corrente con il nome default.htm HTML e NotePad - continua HTML e NotePad - continua HTML e NotePad - continua Nella finestra di dialogo Salva con nome possiamo creare la cartella mioSito premendo sull’apposito pulsante HTML e NotePad - continua HTML e NotePad - continua Occorre inserire il nome della cartella Nominiamo la nuova cartella mioSito HTML e NotePad - continua HTML e NotePad - continua L’estensione standard di NotePad è .txt Possiamo tuttavia utilizzare una qualsiasi altra estensione Nel nostro caso dobbiamo creare un documento che, oltre ai testi contiene anche i tag HTML HTML e NotePad - continua HTML e NotePad - continua HTML e NotePad - continua Una pagina web deve avere l’estensione htm o html Non ci resta che dare un nome alla nostra pagina: il nome sarà default.htm HTML e NotePad - continua I tags A cosa servono i tags?In pratica è come se i tags dicessero al browser cosa deve fare o, meglio, gli danno alcune informazioni ed istruzioni I tags vengono inseriti all’interno di una coppia di parentesi acute <TAG> Ci sono tags di apertura e tags di chiusura La regola è che per chiudere un tag è sufficiente ripetere il tag con uno slash tra le parentesi Per esempio il tag <title> rappresenta il titolo del documento e viene chiuso da </title> Come vedremo, molti tags, ma non tutti, devono avere un tag di chiusura I tags essenziali I tags essenziali per costruire una pagina web sono: <html> <head> <title> <body> I tags sono case-insensitive (non fa alcuna differenza se li scrivete in maiuscolo, in minuscolo o un po’ in minuscolo e un po’ in maiuscolo; Es. <HTML> = <html> = <HTml> Il tag <HTML> Il tag <HTML> semplicemente comunica al browser che la pagina è in formato HTML Il tag viene aperto all’inizio del documento e chiuso alla fine Con questa coppia di tags notiamo un’altra caratteristica dell’HTML: tra due tags è possibile inserire altri tags Il tag <HEAD> e <TITLE> Il secondo tag che troviamo nella pagina è <HEAD> che contiene le informazioni di intestazione della pagina Tra la coppia di tags <HEAD> troviamo il tag <TITLE> che indica il titolo della pagina E’ bene non inserire altri tags all’interno della coppia di tags <HEAD> perchè non tutti i browser li visualizzeranno nella pagina finale Il tag <BODY> Il tag <BODY> contiene il corpo (=contenuto) della pagina I tags essenziali I tags finora analizzati hanno un ruolo identificativo delle parti del documento Quindi il documento qui sotto non visualizza nulla in un browser Formattare il testo Nonostante l’importanza della grafica e di altri oggetti, il testo rimane l’elemento principale di una pagina web Vediamo quindi come e dove è possibile inserire e formattare il testo Iniziamo inserendo il titolo della pagina…. Titolo della pagina Attenzione a non confondere il nome della pagina con il titolo della pagina! Per esempio la nostra pagina si chiama default.htm, mentre il titolo è Benvenuti nel Mio Sito Il titolo è racchiuso tra i tags <title> Vediamo il nostro lavoro Fare doppio clic nel punto indicato Per avviare il browser basta fare doppio clic su un file con estensione htm (o html) Vediamo il nostro lavoro continua Nella barra del titolo del browser (in questo caso Mozilla) vediamo il nostro titolo, mentre la pagina rimane vuota Inserire del testo nella pagina Abbiamo detto che gli elementi da visualizzare vanno racchiusi all’interno del tag <body> Proviamo ad inserire il testo “Entra nel sito” tra la coppia di tags <body> Cosa succede? Ora salviamo la nostra modifica e poi vediamo il risultato nel browser La scritta appare all’interno della pagina Il testo tutto sulla stessa riga! Se non lo specifichiamo, l’HTML ha il brutto vizio di considerare il testo tutto su una stessa linea Qui vediamo come, nonostante nella pagina il testo sia su due righe, il browser lo mostri su una sola Il tag <br> Volendo aggiungere una linea di testo a quella già inserita, possiamo utilizzare il tag <br>, che manda il testo a capo Il tag <br> non richiede un corrispondente tag di chiusura (il tag </br> NON ESISTE!) Il tag <font> Il tag <font> con i suoi attributi Ci consente di formattare il testo Color, Face e Size sono opzionali, se non indichiamo un valore, il browser utilizza quello di default I valori di default sono rispettivamente: Color Face Size Size = 3 (N.B. la scala va da 1 a 7, dove 1=piccolissimo e 7 =gigante!) Color = Black (N.B. tutti i colori si specificano in inglese!) Size = Times (N.B. la lista dei font installata sul nostro computer si può vedere grazie a Word!) Il tag <font> richiede un tag di chiusura </font> per indicare dove finisce il suo effetto Esempio di tag <font> Cosa succede se non indichiamo </font>? E’ grave dimenticare un tag di chiusura? Potenzialmente NO, perché i browser moderni (Internet Explorer 6 e successivi, Mozilla 1.5 e successivi) INTERPRETANO le nostre intenzioni senza causare errori Ma interpretare può essere pericoloso, perché è soggettivo (anche se molte volte i browser moderni ci prendono!), mentre noi vorremmo che chi visita il nostro sito possa vedere esattamente ciò che noi avevamo in testa Inoltre i browser più vecchi possono rifiutarsi di interpretare e creare molti pasticci ERGO: quanto un tag richiede il corrispondente tag di chiusura non dimentichiamocelo!!! E’ utile, quando si scrive codice HTML, inserire la coppia tag apertura/tag chiusura insieme, nello stesso istante, così non rischiamo di dimenticarcene! Es. scrivo subito <font></font> e solo successivamente mi concentro su cosa scrivere all’interno dei due tags! L’opzione face L’opzione face del tag <font> specifica il font da utilizzare E’ possibile indicare un elenco di font da usare in mancanza di quello indicato Esempio completo <font> Esercizio n. 1 Verdana, 1 Comic Sans MS, 7 Times, 3 Soluzione Esercizio 1 Titolo, sottotitolo e paragrafo Per ordinare i testi più complessi in titolo, sottotitolo e paragrafo si utilizzano i tag: <h1> <h2> <p> Questi tag hanno bisogno del tag di chiusura! Esempio Titolo, Sottotitolo e paragrafo Grassetto, corsivo e sottolineato Per utilizzare Grassetto, corsivo e sottolineato i relativi tag sono: Grassetto: <b> Corsivo: <i> Sottolineato: <u> Anche questi tag richiedono il relativo tag di chiusura Esempio di grassetto, corsivo e sottolineato I links: tag <a> Per trasformare un normale testo in un ipertesto occorre applicare il tag <a> In questo modo creiamo un collegamento (link) I links sono testi speciali che, se cliccati, ci collegano ad un altro indirizzo, visualizzando il documento desiderato Esistono links interni al documento o collegati a un documento esterno I collegamenti interni I collegamenti interni ad una stessa pagina, devono utilizzare un punto di ancoraggio, ad esempio in prossimità del titolo, e quindi contenere il collegamento vero e proprio I collegamenti interni continua Il punto di ancoraggio si definisce con il tag <a> seguito dall’attributo name, ove inseriamo il nome, ad esempio sopra Esempio punto di ancoraggio: <a name = “sopra”> Il collegamento, invece, utilizza lo stesso tag <a>, ma deve contenere l’attributo href con il nome del punto di ancoraggio preceduto dal simbolo cancelletto (#) Quindi applichiamo il tag <a href=“#sopra”> all’ultimo testo presente nella pagina I collegamenti interni continua Fare clic qui Scorrendo verso il basso la pagina, vediamo che il testo a cui è stato applicato il collegamento, ha cambiato aspetto: è sottolineato e di colore blu Cliccando sul collegamento il browser ci porterà in corrispondenza del tag di ancoraggio, cioè Titolo 1 Cosa succede? Nello stesso modo possiamo creare links ad altre pagine del sito, oppure ad altri siti, sia sulla nostra macchina che situate su server distanti da noi occorre solo specificare esattamente il percorso Link esterni Abbiamo inserito un link ad una pagina, proviamolo Prima però ricordiamoci che dobbiamo creare un’altra pagina e chiamarla con il nome indicato nel tag di collegamento Esercizio 2 Creare la seguente pagina HTML e salvarla con il nome pagina.htm nella stessa cartella di default.htm Arial, 2 Soluzione Esercizio 2 Link di altre risorse E’ possibile linkare alla pagina web file di ogni tipo L’importante è specificare l’estensione corretta ricordando che solo alcuni tipi di files possono essere visualizzati direttamente dal browser In caso contrario viene avviato il programma predefinito per gestire tali files Link di altre risorse Ad esempio in questa pagina è stato inserito il collegamento ad un’immagine che si chiama foto.gif Perché il collegamento funzioni, l’immagine foto.gif deve essere memorizzata nella stessa cartella della di default.htm Esempio di collegamento ad un’immagine Collegamento ad altre pagine sul web Come eseguire collegamenti a pagine o siti che si trovano in rete? Il prefisso da utilizzare è http:// Questo prefisso deve essere inserito all’interno dell’attributo href del tag <a> e indica che il file che stiamo cercando si trova all’indirizzo che segue, su un server diverso dal nostro Esempio: <a href = http://www.libanore.it>Visitate il mio sito</a>