La doppia personalità dell'HTML

Lo strano caso dell’editor HTML e del signor Browser.

Eccoci di nuovo insieme per creare, finalmente, la nostra prima pagina in HTML e prima di iniziare con il momento pratico, teniamo presente ancora tre regole importantissime:

1. Un sito è fatto di pagine HTML, immagini ed elementi multimediali. TUTTO il contenuto del sito va posto all’interno di una unica cartella (quando affronteremo il discorso della messa online capiremo meglio il perché).
2. Nell’assegnazione dei nomi ai veri file (pagine html, immagine ecc) è bene cercare di evitare di inserire degli spazi, piuttosto colmiamoli con il meno (chi-siamo.html) o con l’underscore (chi_siamo.html) o usiamo il metodo CamelCase (chiSiamo.html).
3. Nell’assegnazione dei nomi ai file evitiamo di inserire caratteri accentati o altri segni particolari. Se, per esempio, dovessi assegnare il nome alla pagina ATTIVITÀ, questa diventerà: attivita.html.

La nostra prima pagina in HTML!

Partiamo con la creazione di una cartella che chiameremo PrimaPaginaHtml. Apriamo un editor di testo (BloccoNote per chi usa Windows, TextEdit per chi usa Mac) e salviamolo nella cartella PrimaPaginaHtml assegnandogli questo nome: primaPagina.html (notare che abbiamo cambiato l’estensione del file!).
 
A questo punto avrò bisogno di aprire questa pagina in due modi:

• Il primo modo (modalità testuale che attiverò facendo clic con il tasto destro e forzando l’apertura -apri con-  con l’editor testuale) mi servirà per implementare il codice;
• Il secondo (modalità anteprima attivabile con doppio click) per visualizzare l’anteprima su browser; 

N.B.  la nostra pagina in html è un po’ come il dott. Jekyll: in sé nasconde una seconda personalità: Mr. Hyde! Cioè la primitiva parte testuale.

A questo punto andiamo a ordinare le due finestre: a sinistra appoggeremo la parte testuale e a destra l’anteprima:

Nel primo Articolo, abbiamo visto la costruzione base di una pagina Web, quindi andiamo a riproporre la stessa struttura qui, scrivendo il codice (ovviamente) nella parte testuale. Una volta completato la stesura del codice andremo a salvare i cambiamenti per poi cliccare sul tasto aggiorna  della parte di anteprima browser. Ecco il risultato:

Abbiamo dato alla luce la nostra prima pagina in HTML, non perderti il prossimo articolo, aggiungeremo contenuti preziosi per arricchire il nostro lavoro!

Nel frattempo non dimenticare di fare qualche esercizio!

Vuoi approfondire gli argomenti?
Scegli un corso SinerVis e formati con i professionisti del settore 👇