Tweet
Corso siti web: 1° lezione
In questo corso vedremo come realizzare un sito web partendo dalle basi del linguaggio utilizzato per creare pagine web, il linguaggio HTML. Una volta che avremo chiari questi primi concetti vedremo anche come è possibile creare pagine web dinamiche attraverso linguaggi di scripting client-side (javascript) e server-side.
Non affronteremo la spiegazione riguardo l'utilizzo di software preconfezionati quali ad esempio Dreamweaver o Front-Page per la creazione di pagine web in quanto questi ultimi non sono indispensabili per arrivare a costruire un intero sito, bensì vengono utilizzati solamente per accellerare e semplificare le operazioni di creazione, ma in realtà sono delle interfaccie che generano in automatico il codice HTML.
Come prima lezione vedremo insieme il significato di linguaggio HTML e vedremo anche i primi comandi per poter iniziare a creare una semplice pagina web.
HTML è l'acronimo di Hyper Text Markup Language. Che cos'è un Ipertesto? Un sito web è un contenitore formato da una o più pagine collegate tra loro da link. Queste pagine vengono definite pagine contenenti "Ipertesti" in quanto, a differenza di quello che accade, ad esempio con un libro, il quale per essere capito va letto a partire dalla prima pagina, in sequenza fino all'ultima, un sito può essere consultato interamente passando da una pagina all'altra senza seguire una precisa sequenza. Ogni pagina è, infatti, collegata alle altre e l'utente che ne legge il contenuto può ad esempio saltare dalla pagina 1 alla pagina 3 senza passare per la pagina 2 e senza che il senso del sito venga stravolto.
Il linguaggio HTML si compone, come descritto dal suo acronimo, di parole riservate chiamate "marcatori". Un marcatore, in pratica, è una parola speciale del linguaggio che definisce come deve essere rappresentato il testo che la segue. O, per meglio dire, il testo racchiuso fra la coppia di marcatori stessi.Si, perchè anche se non è obbligatorio, quasi tutti i marcatori viaggiano in coppia, vale a dire che esiste un marcatore di apertura che definisce che da lì in poi il testo assumerà determinate proprietà, ed esiste un marcatore di chiusura che definisce che quella determinata proprietà introdotta con il marcatore, non deve essere più presa in considerazione.
Abbiamo parlato di marcatori, ma non abbiamo detto come essi sono fatti. Un marcatore HTML ha una forma sintattica di questo tipo:
<nome marcatore> e cioè: segno minore, nome del marcatore, segno maggiore
Questo è anche chiamato marcatore di apertura. I marcatori di chiusura sono definiti allo stesso modo con la differenza che presentano un carattere di backslash subito dopo il segno di minore:
</nome marcatore>
Un esempio di utilizzo dei marcatori è il seguente:
<b>Ciao</b> mondo!
Il marcatore "b" definisce che il testo che segue deve essere rappresentato in grassetto. In questo esempio l'intera frase "Ciao" verrà rappresentata in grassetto. Dopo aver inserito il marcatore di chiusura tutto il testo riprenderà ad essere visualizzato con le impostazioni di default. Quindi in questo esempio "mondo!" verà visualizzato in maniera normale.
Vediamo adesso la struttura di un file HTML:
<html>
<head>
..................
</head>
<body>
..................
</body>
</html>
Inanzitutto va osservato che i marcatori possono essere innestati uno dentro l'altro.
Con <html> definiamo l'inizio di un file html (le pagine web vengono chiamate appunto file html), dopodichè con il marcatore <head> definiamo una zona in cui andranno inserite una serie di informazioni che descrivono la pagina oppure il sito web di cui la pagina fa parte. Ad esempio in questa sezione vanno inserite le parole chiave utilizzate dai motori di ricerca per indicizzare il nostro sito. Oppure qui va inserito il titolo che deve apparire nella barra in alto del browser.Ad esempio se volessimo intitolare la nostra pagina "Regno delle Anime" dovremo inserire in questa sezione:
<title>Regno delle Anime</title>
Da notare che abbiamo specificato, sempre tramite marcatori, che il testo inserito deve essere il titolo da assegnare al browser.
Con il marcatore <body> definiamo la sezione fatta di testo ed immagini che compone la pagina che vogliamo creare. Tutti i testi, le immagini, le animazioni, etc... che vogliamo far visionare all'utente saranno inserite in questa pagina.
Realizziamo una prima pagina web che visioni la scritta "Ciao Mondo!". Per farlo ci basta aprire un semplice editor di testi (Notepad va benissimo) e scrivere il testo seguente:
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body>
Ciao mondo!
</body>
</html>
Adesso salviamo il file con estensione .htm oppure .html
Abbiamo creato la nostra prima pagina web. Se vogliamo far si che l'intera frase sia fatta tutta in grassetto aggiungiamo il marcatore <b> prima della frase e ricordiamoci di inserire anche il marcatore di chiusura.
Con questo è tutto. La prossima volta vedremo come sia possibile modificare il font, gestire i colori del testo e dello sfondo, ed altri marcatori indispensabili per la gestione della grafica
Non affronteremo la spiegazione riguardo l'utilizzo di software preconfezionati quali ad esempio Dreamweaver o Front-Page per la creazione di pagine web in quanto questi ultimi non sono indispensabili per arrivare a costruire un intero sito, bensì vengono utilizzati solamente per accellerare e semplificare le operazioni di creazione, ma in realtà sono delle interfaccie che generano in automatico il codice HTML.
Come prima lezione vedremo insieme il significato di linguaggio HTML e vedremo anche i primi comandi per poter iniziare a creare una semplice pagina web.
HTML è l'acronimo di Hyper Text Markup Language. Che cos'è un Ipertesto? Un sito web è un contenitore formato da una o più pagine collegate tra loro da link. Queste pagine vengono definite pagine contenenti "Ipertesti" in quanto, a differenza di quello che accade, ad esempio con un libro, il quale per essere capito va letto a partire dalla prima pagina, in sequenza fino all'ultima, un sito può essere consultato interamente passando da una pagina all'altra senza seguire una precisa sequenza. Ogni pagina è, infatti, collegata alle altre e l'utente che ne legge il contenuto può ad esempio saltare dalla pagina 1 alla pagina 3 senza passare per la pagina 2 e senza che il senso del sito venga stravolto.
Il linguaggio HTML si compone, come descritto dal suo acronimo, di parole riservate chiamate "marcatori". Un marcatore, in pratica, è una parola speciale del linguaggio che definisce come deve essere rappresentato il testo che la segue. O, per meglio dire, il testo racchiuso fra la coppia di marcatori stessi.Si, perchè anche se non è obbligatorio, quasi tutti i marcatori viaggiano in coppia, vale a dire che esiste un marcatore di apertura che definisce che da lì in poi il testo assumerà determinate proprietà, ed esiste un marcatore di chiusura che definisce che quella determinata proprietà introdotta con il marcatore, non deve essere più presa in considerazione.
Abbiamo parlato di marcatori, ma non abbiamo detto come essi sono fatti. Un marcatore HTML ha una forma sintattica di questo tipo:
<nome marcatore> e cioè: segno minore, nome del marcatore, segno maggiore
Questo è anche chiamato marcatore di apertura. I marcatori di chiusura sono definiti allo stesso modo con la differenza che presentano un carattere di backslash subito dopo il segno di minore:
</nome marcatore>
Un esempio di utilizzo dei marcatori è il seguente:
<b>Ciao</b> mondo!
Il marcatore "b" definisce che il testo che segue deve essere rappresentato in grassetto. In questo esempio l'intera frase "Ciao" verrà rappresentata in grassetto. Dopo aver inserito il marcatore di chiusura tutto il testo riprenderà ad essere visualizzato con le impostazioni di default. Quindi in questo esempio "mondo!" verà visualizzato in maniera normale.
Vediamo adesso la struttura di un file HTML:
<html>
<head>
..................
</head>
<body>
..................
</body>
</html>
Inanzitutto va osservato che i marcatori possono essere innestati uno dentro l'altro.
Con <html> definiamo l'inizio di un file html (le pagine web vengono chiamate appunto file html), dopodichè con il marcatore <head> definiamo una zona in cui andranno inserite una serie di informazioni che descrivono la pagina oppure il sito web di cui la pagina fa parte. Ad esempio in questa sezione vanno inserite le parole chiave utilizzate dai motori di ricerca per indicizzare il nostro sito. Oppure qui va inserito il titolo che deve apparire nella barra in alto del browser.Ad esempio se volessimo intitolare la nostra pagina "Regno delle Anime" dovremo inserire in questa sezione:
<title>Regno delle Anime</title>
Da notare che abbiamo specificato, sempre tramite marcatori, che il testo inserito deve essere il titolo da assegnare al browser.
Con il marcatore <body> definiamo la sezione fatta di testo ed immagini che compone la pagina che vogliamo creare. Tutti i testi, le immagini, le animazioni, etc... che vogliamo far visionare all'utente saranno inserite in questa pagina.
Realizziamo una prima pagina web che visioni la scritta "Ciao Mondo!". Per farlo ci basta aprire un semplice editor di testi (Notepad va benissimo) e scrivere il testo seguente:
<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body>
Ciao mondo!
</body>
</html>
Adesso salviamo il file con estensione .htm oppure .html
Abbiamo creato la nostra prima pagina web. Se vogliamo far si che l'intera frase sia fatta tutta in grassetto aggiungiamo il marcatore <b> prima della frase e ricordiamoci di inserire anche il marcatore di chiusura.
Con questo è tutto. La prossima volta vedremo come sia possibile modificare il font, gestire i colori del testo e dello sfondo, ed altri marcatori indispensabili per la gestione della grafica