Costruire un Sito Web 2a Lezione: Martedì 6 Febbraio – HTML Comandi base.

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


Nella finestra di dialogo Salva con nome possiamo creare la cartella mioSito premendo sull’apposito pulsante


Occorre inserire il nome della cartella Nominiamo la nuova cartella mioSito


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


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

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 Volendo aggiungere una linea di testo a

quella già inserita, possiamo utilizzare il tag , che manda il testo a capo

Il tag non richiede un corrispondente tag di chiusura (il tag NON ESISTE!)

Il tag Il tag 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 richiede un tag di chiusura per indicare dove finisce il suo effetto

Esempio di tag 

Cosa succede se non indichiamo ?

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 e solo successivamente mi concentro su cosa scrivere all’interno dei due tags!

L’opzione face

L’opzione face del tag specifica il font da utilizzare

E’ possibile indicare un elenco di font da usare in mancanza di quello indicato

Esempio completo

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> 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: Corsivo: Sottolineato: 

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>

Costruire un Sito Web 2a Lezione: Martedì 6 Febbraio – HTML Comandi base.

Documents

Transcript of Costruire un Sito Web 2a Lezione: Martedì 6 Febbraio – HTML Comandi base.