CREARE SITI WEB in HTML e CSS > La mia prima pagina web
Ora che hai "tra le mani" uno dei migliori strumenti per creare pagine web (Visual Studio Code) puoi iniziare a costruire la tua prima pagina web.
CREA UNA CARTELLA PER IL TUO SITO
Prima di tutto1 - crea una cartella nel desktop
o se preferisci nella cartella documenti.
2 - Nomina la cartella con un nome a piacere,
ad esempio SWN1 (che, se vogliamo, è l'acronimo di "Sito Web Numero 1").
CREA IL TUO PRIMO FILE HTML
Ora,1 - apri il programma "Visual Studio Code"
2 - dal menu "File" scegli la voce "Apri cartella"
Dalla finestra di dialogo apparsa,
3 - fai un clic sulla cartella appena creata
4 - clicca sul pulsante "Seleziona cartella".
Nella colonna sinistra apparirà il nome della cartella.
Ora,
- fai un clic sul pulsante "Nuovo file", posto a fianco del nome della cartella.
- e digita esattamente index.html, e premi Invio per confermare.
Bene, hai creato il tuo primo file html,
anche se per ora non è un granchè, visto che è vuoto!
Ma ti assicuro che ti rifarai!
Nota bene 1
Tieni presente che le cartelle le puoi nominare con nomi a piacere;ma la prima pagina devi rigorosamente nominarla index.html;
questo perché possa essere visualizzata per prima da chi si collegherà al tuo futuro sito web.
Nota bene 2
Altra operazione fondamentale è quella di riunire tutte le risorse (file, immagini, e altro) in un'unica cartella; in questo caso nella cartella "SWN1".È inoltre altamente raccomandabile nominare tutte le cartelle e i file del sito con titoli senza spazi vuoti e senza caratteri speciali quali slash (\), punto (.), due punti (:), punto e virgola (;), asterisco (*).
Anzi, è consigliabile usare solamente lettere minuscole, numeri, trattini (-) o underscore (_).
CREA LA TUA PRIMA PAGINA WEB HTML
Dopo aver creato il file index.htmlpuoi subito scrivere al suo interno,
ovvero,
sulla finestra che appare a destra dell'interfaccia di Visual Studio Code.
1 - Digita html
2 - e poi fai clic sulla voce "html:5"
Meglio iniziare subito con quest'ultima versione di html.
Apparirà del codice incomprensibile, ma non ti spaventare;
sarà più facile di quello che credi!
| codice HTML | risultato pagina web |
|
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> |
Ebbene, quelle scritte sono la base del documento web scritto in linguaggio HTML 5.
Se pubblichi tale documento così com'è, le persone non vedrebbero nulla, ovvero apparirebbe ai loro occhi una semplice pagina bianca.
Completa quindi il documento con del testo.
Tra i TAG (così vengono chiamati le parole in codice tra i segni di minore " <" e maggiore ">")
... dicevo, tra i TAG <body>
- digita Ciao mondo del web!.
| codice HTML | risultato pagina web |
|
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> Ciao mondo del web! </body> </html> |
Ciao mondo del web! |
VERIFICARE IL PROPRIO SITO DA LOCALE
Verificare il proprio sito da locale,significa navigare nel proprio computer,
in questo caso, sul sito web in questione.
Ecco come fare.
1 - Apri la cartella "SWN1", dal programma "Esplora file"
2 - fai doppio clic sull'unico file (appena creato) index.html
(o index se l'estensione dei file è nascosta dal sistema).
Verrà aperto il browser predefinito e con esso la pagina web che hai appena creato.
3 - Mantieni pure aperto il browser su questa pagina; sarà più comodo raggiungerlo con la prossima lezione.
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).