Post on 02-May-2015
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
Per avviare il browser basta fare doppio clic su un file con estensione htm (o html)
Fare doppio clicnel punto indicato
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
Color Face Size
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:
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
Comic Sans MS,7
Verdana,1
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
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
Fare clic qui
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>