Per chi avesse saltato l'introduzione al corso, eravamo arrivati a creare una cartella "Corso_HTML_base" e un documento di testo "Prova_html.txt" all'interno di quest'ultima.
A questo punto apriamo il file con il blocco note o un altro qualsiasi editor di testo e inseriamo le seguenti linee di codice:
<html>
<head>
<title></title>
</head>
<body>
ciao mondo!
</body>
</html>
Quindi salviamo il file Prova_html.txt
Dopodichè lo rinominiamo in Prova_html.html, il sistema ci chiede se vogliamo modificare l'estensione e noi rispondiamo affermativamente.
A questo punto possiamo notare che l'icona del nostro file è cambiata. Infatti ora viene visualizzata l'icona del nostro browser predefinito, segno questo che il nostro file è riconosciuto come file html (infatti abbiamo cambiato l'estensione) e che è pronto per essere aperto dal nostro browser.
Cliccando perciò due volte sul nostro file si aprirà la finestra del browser:
Come si può notare nel nostro browser viene visualizzata una pagina bianca con la scritta "ciao mondo!". I più perspicaci ovviamente avranno già capito che di tutto quello che abbiamo scritto nel file, l'unica cosa che è stata visualizzata è proprio solo quella frase.
Questo perchè tutte quelle parole tra < e > sono caratteristiche dell'html e come tali vengono interpretate dal browser e quindi non visualizzate.
Queste parole sono chiamate TAG e nel file abbiamo messo quelli essenziali.
I tag senza il carattere "/" sono chiamati tag di apertura, mentre quelli con quel carattere sono i tag di chiusura.
Ad esempio <html> e </html> sono rispettivamente tag di apertura e di chiusura e grazie a questi si caratterizza un file html.
Tutto quello che fa parte di una pagina html deve essere scritto all'interno di questi due tag appena citati.
I tag <head> e </head> servono per creare l'intestazione della pagina.
I tag <title> e </title> servono per dare un titolo alla pagina e cioè che viene scritto all'interno viene mostrato sulla barra in alto del browser (per intenderci la barra dove c'è la X per chiudere la finestra e anche utilizzato per l'indicizzazione da parte dei motori di ricerca.
I tag <body> e </body> identificano il corpo della pagina html e tutto quello che verrà inserito all'interno di essi verrà poi visualizzato nel browser.
Un paio di cose importanti:
1. L'Html non è case sensitive, perciò potete scrivere i tag con lettere maiuscole e/o minuscole senza problemi.
2. I tag che abbiamo inserito nel file DEVONO essere esattamente nell'ordine riportato altrimenti il browser non riuscirà a decifrarli correttamente o comunque potreste incappare in risultati indesiderati.
Detto questo provate ad aggiungere delle frasi tra i tag <body> e </body> ed anche una frase tra i tag <title> e </title> nel nostro file Prova_html.html.
Attenzione che ora cliccando due volte sul file si aprirà sempre il browser, se volete modificarne il contenuto dovete selezionare il file, tasto destro del mouse, apri con e selezionare la voce relativa all'editor. Oppure
aprire il file direttamente dal vostro editor di testo.
Io ho aggiunto le righe "E' bello fare le pagine html" tra i tag body e "Corso_HTML_base" tra i tag title in questo modo:
<html>
<head>
<title>Corso_HTML_base</title>
</head>
<body>
ciao mondo! E' bello fare le pagine html
</body>
</html>
Il risultato cliccando due volte sul file è il seguente:
Come potete vedere la frase nella pagina bianca è cambiata e sopra sulla barra della finestra in grigio vi è la scritta "Corso_HTML_base" al posto del nome del file.
Questa lezione finisce qui.. spero mi seguirete anche nella prossima in cui inizieremo a vedere altri tag, concentrandoci per il momento su quelli che si possono usare tra i tag body. Ciao a tutti
Prossima lezione:I primi tag del body - Corso HTML di base
Nessun commento:
Posta un commento