7.1 Primo documento html
Creiamo il nostro primo documento html (file html). Di solito, il file html principale di un progetto web si chiama index.html: consiglio di non allontanarsi da questa bella tradizione. Per farlo, clicca col tasto destro del mouse sulla cartella web-storm-10:
E inserisci il nome del file:
WebStorm creerà il file per te e lo aprirà immediatamente:
In realtà, è un documento html vuoto. Tutto ciò che vedi qui è informazione di servizio.
Tutti i dati reali saranno posizionati all'interno dei tag <body> e
</body>. Imparerai di più sui tag nella lezione successiva.
Scriviamo un messaggio interessante e pomposo all'interno di questi tag. Per esempio:
Il viaggio di 10 mila miglia inizia con un solo passo!
Puoi semplicemente copiarlo e incollarlo alla riga 8 (all'interno dei tag <body>).
Abituati a copiare i testi — così ci sono meno errori e refusi. Ecco come appare il mio documento:
Se la mia versione del testo non è abbastanza cupa e pomposa per te, scegli la tua — è comunque il tuo primo progetto Web. Ti propongo altre 3 opzioni tra cui scegliere:
- "Il Lato Oscuro mi offre ciò che il Lato Chiaro non può: vera libertà."
- "Il Lato Oscuro è la via per un potere senza limiti."
- "Scelgo il mio destino, ed è nell'oscurità."
7.2 Avvio del primo progetto
Ora lanciamo il nostro progetto e vediamo come il browser visualizza il nostro file html.
Per avviare il progetto, bisogna cliccare sul triangolo verde nel menu in alto. Alla sua sinistra è scritto il nome del file che verrà eseguito:
Puoi anche eseguire il tuo file premendo Shift+F10.
Facciamolo, e vedrai come il browser visualizza il tuo primo file html. Ecco cosa ha mostrato il mio:
In arancione è scritto l'host nell'url — il web server del nostro progetto, avviato da WebStorm.
In verde è scritto il percorso nell'url — il percorso verso index.html dalla radice del nostro progetto.
In blu — informazioni di servizio per WebStorm.
In rosso è evidenziato il testo che il browser ha mostrato in base al nostro documento html.
7.3 Correzione degli errori
E cosa succede se facciamo un errore? Come reagirebbero il browser e WebStorm?
Cancelliamo il primo carattere della riga 9 e vediamo la reazione di WebStorm. Ecco cosa mi è risultato:
Cosa vediamo qui:
- La parola alla riga 9 ha smesso di essere un tag, quindi WebStorm ora la scrive in grigio anziché in giallo.
- Alla riga 10 hai il tag di chiusura
<html>, anche se il tag<body>dovrebbe apparire prima del tag di chiusura<html>. Perciò WebStorm vede qui un errore. - Il numero degli errori nel documento è mostrato in alto a destra – ne abbiamo uno.
- La posizione dell'errore è anche duplicata nella scrollbar — a destra in basso. Molto comodo per documenti lunghi.
Ora avviamo questo file e vediamo come il browser risponde all'errore:
Anche il browser pensa che il tag <body> incompleto sia semplicemente testo, quindi lo visualizza come testo normale.
L'assenza del tag di chiusura <body> non ha disturbato il browser: ci sono problemi peggiori con i tag. In generale, è venuto fuori abbastanza bene.
GO TO FULL VERSION