Guida HTML

Benvenuto nel primo capitolo del WebMaster Tutorial, il corso online completo e gratuito per imparare a realizzare e gestire i siti web da zero.

Tutti i siti che esistono, da Amazon alla paginetta personale di tuo cugino, hanno in comune almeno una cosa: l'HTML.
Ma cos'è l'HTML? Devi sapere che tutte le pagine Web sono basate su questo linguaggio. Per questo motivo cominceremo l'avventura proprio da qui, da una guida completa sull'HTML, contenuta nei primi capitoli di questo Tutorial, che ti insegnerà tutte le basi di questo linguaggio informatico. Il modo migliore per imparare l'HTML è metterlo in pratica da subito creando una semplice pagina web, la più semplice che si possa immaginare, così che tu possa toccare con mano quanto sia facile.

Nei capitoli-tutorial che seguono tratteremo tutte le caratteristiche fondamentali di questo potentissimo linguaggio attraverso esercizi e progetti sempre più avanzati, sino a realizzare un tuo sito web di presentazione personale. Il mio consiglio è quello di cogliere l'occasione per realizzare un tuo curriculum vitae che ti presenti professionalmente come quello che sarà portato a esempio:

Ovviamente, con le competenze che andrai ad acquisire, potrai realizzare e mettere online tutti i contenuti che vorrai. Attento però, come diceva il saggio nonno di Spiderman, da grandi poteri derivano grandi responsabilità. Pronto per l'avventura? Si parte!

L'ambiente di lavoro e la tua prima pagina HTML, online

Per mostrarti quanto sia semplice e divertente creare pagine in HTML, utilizzando strumenti moderni e professionali, cominciamo con una rapida dimostrazione: entro la fine di questi primi capitoli avrai scritto la tua prima pagina in HTML e l’avrai anche resa disponibile al Mondo, mettendola online.

 

Il Browser e l'editor di testo

Per scrivere pagine in codice HTML serve un semplice editor di testo, mentre per leggerle basta utilizzare un Browser.

Il Browser è il programma che permette di navigare in internet e visualizzare le pagine web, come quello che stai utilizzando in questo momento per visualizzare questa pagina. Esempi di Browser sono Google Chrome, Mozilla Firefox, Safari e Internet Explorer. Il mio suggerimento, per questa prima parte del Tutorial, è di utilizzare Google Chrome, puoi scaricarlo e installarlo cliccando sul link, è gratuito.

Gli editor di testo convenzionali ("Word", "Blocco note", "Notepad", "TextEdit" etc.) non sono l’ideale per scrivere in HTML o in altri linguaggi diversi da quello naturale; inoltre, non sapendo quale tu stia utilizzando, non potrei darti indicazioni precise.

Per questo motivo utilizzeremo un editor disponibile gratuitamente sia per Windows che per Mac, ossia "Atom".

L'editor Atom: come scaricarlo gratuitamente

Atom Editor è un programma semplice e gratuito che gli sviluppatori utilizzano per creare software e pagine web sul proprio computer. Il vantaggio sta nel fatto che, oltre ad essere gratuito e costantemente aggiornato, è disponibile sia per Linux, sia per Mac che per Windows.

Se possiedi già un editor di testo adatto a scrivere HTML col quale ti trovi a tuo agio ovviamente puoi utilizzarlo. In ogni caso, se scegli di non usare Atom, devi però possedere già una buona dimestichezza con l'uso del computer perché non potrò guidarti in modo altrettanto preciso.

L’unica difficoltà, per alcuni, è costituita dal fatto che l’interfaccia è interamente in inglese. In ogni caso, non preoccuparti: i comandi da imparare sono pochi e abbastanza intuitivi, inoltre sarai guidato passo-passo. Per le traduzioni puoi sempre utilizzare lo strumento di traduzioni di Google E se avrai comunque delle domande o dei dubbi, non devi fare altro che scrivere nei commenti. Non sarai abbandonato a te stesso. :)

Pronto? Cominciamo! Per prima cosa, accedi al sito di Atom all'indirizzo: https://atom.io

Senza lasciarti fuorviare dal fatto che la pagina che vedrai potrebbe non essere identica a quella rappresentata, clicca su "DOWNLOAD FOR..." e salva il file .zip dove preferisci. Il browser dovrebbe riconoscere automaticamente il sistema operativo che stai utilizzando e farti scaricare la versione adatta a te.

Installare Atom

Una volta scaricato il file, estrai il file facendo doppio clic.

Per installarlo non devi fare altro che selezionare il file Atom.app appena estratto e spostarlo nella tua cartella “Applicazioni” (in questo caso siamo su Mac, su Windows segui semplicemente le istruzioni d’installazione che ti guidano.

Il tuo ambiente di lavoro

Una volta installato, apri il programma. Dovresti visualizzare una finestra di benvenuto come questa:

L’interfaccia di default è scura, scelta popolare fra gli sviluppatori professionisti per affaticare la vista il meno possibile. Tuttavia  dal menù a destra alla voce “Choose a Theme” puoi selezionare il tema che più ti piace.

Ai fini del nostro tutorial non approfondiamo nel dettaglio tutte le funzioni dell’editor, ma ci limitiamo a vedere le cose base.

Per cominciare dobbiamo creare una cartella in una posizione a scelta nel nostro computer, che diventerà in pratica il nostro spazio di lavoro (o anche root locale) da associare ad Atom. Noi la chiameremo “nemboweb-webmaster-tutorial”, ma puoi scegliere un nome a piacere.

Ora torna su Atom e clicca su “Open a Project” e seleziona la cartella che hai appena creato per effettuare l’associazione.

In alto a sinistra vedrai comparire il tuo nuovo spazio di lavoro.

Prendiamo dimestichezza col tuo workspace nuovo fiammante

Adesso che hai davanti il tuo ambiente di lavoro o workspace, puoi osservare com’’è fatto:

  1. Il menu in alto dove ci sono le varie voci: File, Edit, View, Selection…

  2. Il pannello di esplorazione dei file a sinistra, il quale funziona come “esplora risorse” di windows o “finder” di Mac;

  3. L’area di lavoro principale, in cui compaiono i file aperti.


Non temere di aprire e chiudere i pannelli, perché potrai sempre ripristinare la tua area di lavoro dalla barra del menu in alto, accedendo a Help  > Welcome Guide.

La gestione dei file e delle cartelle

Ora puoi creare la tua prima cartella cliccando col tasto destro sulla cartella principale del tuo workspace e poi su "New Folder"; chiamala “HTML.

All’interno di questa cartella appena creata, crea un'altra cartella chiamata "lezione-0", infine, all'interno di questa crea un nuovo file e chiamalo “ciao-mondo.html”.

E’ importante che il nome del file non contenga spazi (puoi sostituirli con dei trattini) e che termini con l’estensione “.html” che serve, per l’appunto, a qualificarlo come file di tipo HTML.

Per maggior chiarezza, ecco la sequenza dei comandi da seguire:

1. Click col tasto destro sulla cartella principale, seleziona "New Folder" (nuova cartella)

2. Nomina la cartella appena creata "HTML" (essa conterrà tutti gli esempi e gli esercizi relativi all'HTML), quindi premi il tasto invio:

3. Click col tasto destro sulla cartella "HTML" appena creata e seleziona nuovamente "New Folder" per creare una sottocartella.

4. Nomina la sottocartella appena creata "lezione-0", quindi premi il tasto invio:

5. Clicca col tasto destro sulla sottocartella "lezione-0" e questa volta seleziona "New File" (nuovo file):

6. Nomina il file appena creato "ciao-mondo.html", quindi assicurati di aver ottenuto questa struttura di file e cartelle:

Nota bene: quando clicchi col tasto destro su una cartella o un file appaiono anche le opzioni per rinominarlo "Rename" e per cancellarlo "Delete", potrebbero tornarti utili in seguito. Fai doppio click sul file appena creato, ciao-mondo.html, ed ecco che si apre l’editor nell’area di lavoro.

Ora puoi iniziare a scrivere il tuo primo file HTML.

 

HTML, cos'è?

All'inizio del capitolo ci siamo chiesti cosa sia l'HTML, è finalmente arrivato il momento di svelare il significato che si cela dietro il nome di questo linguaggio:

HTML significa "HyperText Markup Language".

L'Hypertext (o Ipertesto) è un "testo che contiene dei link (o collegamenti) ad altri testi". Ogni volta che fai click su una parola che ti porta in un'altra pagina, ti trovi di fronte a un ipertesto. Il Web non è altro che un gigantesco iperteso!

Markup significa “marcatura” o “etichettatura”. Di conseguenza, "HyperText Markup Language" può essere tradotto in “linguaggio di marcatura dell’ipertesto”.

Infatti l’HTML si basa su dei tag (o etichette) che permettono di definire i contenuti della pagina inserendo: titoli, paragrafi, link, tabelle, immagini, liste puntate e molto altro.

La tua prima pagina HTML

La prima cosa da fare quando si crea una nuova pagina HTML consiste sempre nel dfinire lo "scheletro" o "struttura" della pagina, come segue:

  1. La prima riga di ogni file HTML deve essere occupata da un particolare tag che prende il nome di “doctype”, esso serve a dichiarare che tipo di file HTML stai per scrivere. Basta scrivere: <!DOCTYPE html>. Tutti i tuoi file HTML dovranno cominciare così.

  2. Sulla riga successiva occorre inserire il tag <html> per indicare (o marcare) l’inizio del documento HTML.

  3. L’ultima riga deve contenere il tag </html> che indica la fine del documento HTML.


Il risultato che devi ottenere è il seguente:

Nota Bene: L’editor di testo che stai utilizzando è specifico per la scrittura di codice HTML, di conseguenza cercherà di aiutarti in diversi modi. In particolare:

  1. Colorando i tag in modo diverso dal resto del testo, questa funzione prende il nome di “syntax highlight” (evidenziamento della sintassi).

  2. Andando a capo in modo indentato (vedremo in seguito cosa sia l’indentazione)

  3. Suggerendoti cosa scrivere con degli “snippet” (porzioni) di codice.

Per esempio, se provi a scrivere semplicemente “html” compare un suggerimento che puoi accettare premendo il pulsante “Invio”. Il programma scrive automaticamente il codice base di un documento html. Comodo, vero?

Alle volte compaiono invece dei suggerimenti non voluti, per esempio scrivendo “html.”, per non accettarli occorre premere la barra spaziatrice. Nel caso succeda qualcosa di inaspettato, puoi sempre annullare l’ultima modifica premendo Ctrl+Z o Cmd+Z.

Se stai trovando interessante questo tutorial,  ti sarei davvero molto grato se mi regalassi un +1 o un tweet:

Grazie mille!

Ciao Mondo, il tuo primo file HTML!

  1. Se non l'hai già fatto, crea il file ciao-mondo.html seguendo le istruzioni della precedente sezione.
  2. Tra i tag <html> e </html> inserisci qualisasi file di tuo gradimento ma, per il momento, non usare le lettere accentate (vedrrremo in seguito perchè).

Esempio:

Ora devi salvare, puoi farlo dal menu File > Save oppure premento Ctrl+S su Windows o Cmd+S su Mac.

Tempo vedere in anteprima il tuo primo file!

Per visualizzare in anteprima il nostro primo file HTML, ti basta selezionare il file e andare sul menu in alto al percorso:

Packages > Markdown Preview > Toogle Preview

Vedrai comparire una finestra come questa:

La cosa bella è che vedrai in tempo reale tutte le modifiche nella sezione di anteprima.

Nonostante i nostri file al momento siano offline, apriamo una piccola parentesi sulle URL, ci sarà utile per il futuro in ogni caso.

Prendiamo ad esempio l’URL di questo tutorial: “http://nemboweb.com/corsi/webmaster-tutorial/

L’URL o Uniform Resource Locator è l’indirizzo univoco di una risorsa che si trova su internet o, in altre parole, online. In questo caso la risorsa in questione è la pagina del nostro tutorial. Ogni URL valido è formato da tre elementi:

http:// o https://nemboweb.com/corsi/webmaster-tutorial/
Protocollo internetDominio internetPercorso della risorsa

 

Il significato degli elementi che compongono l’URL (protocollo, dominio e percorso) lo approfondiremo in seguito, per ora ti basti sapere che l’URL che hai appena visto è l’indirizzo internet della pagina web del Webmaster Tutorial.

Tornando all’anteprima, forse hai notato che nonostante il testo originale sia scritto così:

Ciao Mondo!


Ecco il mio primo file html!

Il risultato visualizzato nel browser appare in un’unica riga di testo senza andare a capo.

Bene, ottimo spirito d’osservazione! Nel corso della prossima lezione capirai perché.

Se hai ceduto alla tentazione di utilizzare lettere accentate noterai che essere vengono visualizzate in modo erroneo, come già ho già detto, anche questo problema sarà risolto a breve.

Per adesso limitiamoci a qualche esperimento coi tag html per capire come funzionano.

I tag HTML

Prendiamo a esempio il tag "<b>".

Ipotizziamo di voler evidenziare una parte del testo in grassetto. Per questo esiste il tag "b" (“bold” in inglese vuol dire “grassetto”). Prova a racchiudere una parte del tuo testo fra il tag di apertura e il tag di chiusura , come nell’esempio seguente:

Quindi salva il file come hai fatto prima (ti consiglio di utilizzare la scorciatoia da tastiera Ctrl+S o Cmd+S) e guardalo in anteprima a lato. Otterrai il seguente risultato:

Capito come funzionano i tag HTML?

Basta inserire il testo fra un tag di apertura e uno di chiusura per far sì che a quella porzione di testo sia assegnata la caratteristica definita da quel particolare tag!

Il tag <i>

Proviamo ancora con un altro tag: il tag "i" che sta per “italic” e serve a rendere il testo, per l’appunto, nel formato italico o "corsivo".

Ecco un esempio:

Se osservi la sezione di anteprima, il risultato per l’esempio qui sopra è il seguente:

Complimenti: hai scritto la tua prima pagina HTML!

Prima di uscire da Atom, basta salvare i file e quando riaprirai potrai tranquillamente riprendere il lavoro da dove lo avevi lasciato.

Concetti fondamentali

L’HTML è un linguaggio informatico basato sui tag. I tag servono a indicare l’inizio e la fine di un certo tipo di contenuto. Per esempio i tag <html> e </html> indicano rispettivamente l’inizio e la fine del contenuto HTML, mentre i tag <b> e </b> indicano l’inizio e la fine di un contenuto in grassetto e così via. 
Come vedremo in seguito tramite i tag HTML è possibile creare o, più propriamente definire, tutta una serie di contenuti, fra cui: titoli, paragrafi, link, tabelle, immagini, liste puntate e molto altro.

Ma com’è possible rendere belle le pagine web con stili, colori, font e tutto il resto? Per questo esiste il linguaggio “CSS” (Cascading Style Sheets), che vedremo più avanti. 

Prima di addentrarci in altri argomenti è meglio approfondire le conoscenze di HTML!

Vorrai mica perderti altri articoli come questo?
Iscriviti per riceverne altri!

Scritto da

Duccio

Duccio Armenise

Corsidia Founder

Aiuto solo i migliori Maestri a trovare i loro prossimi Studenti. Come? Così! :)

Bio - uCV

Per

Corsidia logo

I tuoi prossimi Studenti ti stanno già cercando, tu ci sei?

Materie

Trova un altro corso