La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Costruire un Sito Web 2a Lezione: Martedì 6 Febbraio – HTML Comandi base."— Transcript della presentazione:

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

2 HTML e NotePad Iniziamo la costruzione del sito cercando di acquisire le conoscenze base dellHTML 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 lintero sito, e salviamo il documento corrente con il nome default.htm

3 HTML e NotePad - continua Nel nostro esempio creiamo la cartella mioSito, nella quale verrà contenuto lintero sito, e salviamo il documento corrente con il nome default.htm

4 HTML e NotePad - continua

5

6 Nella finestra di dialogo Salva con nome possiamo creare la cartella mioSito premendo sullapposito pulsante

7 HTML e NotePad - continua

8 Occorre inserire il nome della cartella Nominiamo la nuova cartella mioSito

9 HTML e NotePad - continua

10 Lestensione 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

11 HTML e NotePad - continua

12

13 Una pagina web deve avere lestensione htm o html Non ci resta che dare un nome alla nostra pagina: il nome sarà default.htm

14 HTML e NotePad - continua

15 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 allinterno di una coppia di parentesi acute 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 rappresenta il titolo del documento e viene chiuso da Come vedremo, molti tags, ma non tutti, devono avere un tag di chiusura

16 I tags essenziali I tags essenziali per costruire una pagina web sono: 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. = =

17 Il tag Il tag semplicemente comunica al browser che la pagina è in formato HTML Il tag viene aperto allinizio del documento e chiuso alla fine Con questa coppia di tags notiamo unaltra caratteristica dellHTML: tra due tags è possibile inserire altri tags

18 Il tag e Il secondo tag che troviamo nella pagina è che contiene le informazioni di intestazione della pagina Tra la coppia di tags troviamo il tag che indica il titolo della pagina E bene non inserire altri tags allinterno della coppia di tags perchè non tutti i browser li visualizzeranno nella pagina finale

19 Il tag Il tag contiene il corpo (=contenuto) della pagina

20 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

21 Formattare il testo Nonostante limportanza della grafica e di altri oggetti, il testo rimane lelemento principale di una pagina web Vediamo quindi come e dove è possibile inserire e formattare il testo Iniziamo inserendo il titolo della pagina….

22 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

23 Vediamo il nostro lavoro Per avviare il browser basta fare doppio clic su un file con estensione htm (o html) Fare doppio clic nel punto indicato

24 Vediamo il nostro lavoro - continua Nella barra del titolo del browser (in questo caso Mozilla) vediamo il nostro titolo, mentre la pagina rimane vuota

25 Inserire del testo nella pagina Abbiamo detto che gli elementi da visualizzare vanno racchiusi allinterno del tag Proviamo ad inserire il testo Entra nel sito tra la coppia di tags

26 Cosa succede? Ora salviamo la nostra modifica e poi vediamo il risultato nel browser La scritta appare allinterno della pagina

27 Il testo tutto sulla stessa riga! Se non lo specifichiamo, lHTML 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

28 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!)

29 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

30 Esempio di tag Cosa succede se non indichiamo ?

31 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 allinterno dei due tags!

32 Lopzione face Lopzione face del tag specifica il font da utilizzare E possibile indicare un elenco di font da usare in mancanza di quello indicato

33 Esempio completo

34 Esercizio n. 1 Comic Sans MS, 7 Verdana, 1 Times, 3

35 Soluzione Esercizio 1

36 Titolo, sottotitolo e paragrafo Per ordinare i testi più complessi in titolo, sottotitolo e paragrafo si utilizzano i tag: Questi tag hanno bisogno del tag di chiusura!

37 Esempio Titolo, Sottotitolo e paragrafo

38 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

39 Esempio di grassetto, corsivo e sottolineato

40 I links: tag Per trasformare un normale testo in un ipertesto occorre applicare il tag 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

41 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

42 I collegamenti interni - continua Il punto di ancoraggio si definisce con il tag seguito dallattributo name, ove inseriamo il nome, ad esempio sopra Esempio punto di ancoraggio: Il collegamento, invece, utilizza lo stesso tag, ma deve contenere lattributo href con il nome del punto di ancoraggio preceduto dal simbolo cancelletto (#) Quindi applichiamo il tag allultimo testo presente nella pagina

43 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

44 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

45 Link esterni Abbiamo inserito un link ad una pagina, proviamolo Prima però ricordiamoci che dobbiamo creare unaltra pagina e chiamarla con il nome indicato nel tag di collegamento

46 Esercizio 2 Creare la seguente pagina HTML e salvarla con il nome pagina.htm nella stessa cartella di default.htm Arial, 2

47 Soluzione Esercizio 2

48 Link di altre risorse E possibile linkare alla pagina web file di ogni tipo Limportante è specificare lestensione 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

49 Link di altre risorse Ad esempio in questa pagina è stato inserito il collegamento ad unimmagine che si chiama foto.gif Perché il collegamento funzioni, limmagine foto.gif deve essere memorizzata nella stessa cartella della di default.htm

50 Esempio di collegamento ad unimmagine

51 Collegamento ad altre pagine sul web Come eseguire collegamenti a pagine o siti che si trovano in rete? Il prefisso da utilizzare è Questo prefisso deve essere inserito allinterno dellattributo href del tag e indica che il file che stiamo cercando si trova allindirizzo che segue, su un server diverso dal nostro Esempio: Visitate il mio sito


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

Presentazioni simili


Annunci Google