Vuoi imparare a realizzare pagine e siti con il linguaggio HTML, con immagini, link, tabelle, form di inserimento dati per gli utenti? Sei nel posto giusto.

HTML è il principale linguaggio di pubblicazione di pagine Web, oltre che uno strumento sempre più utilizzato per la realizzazione di contenuti e applicazioni mobile. È spesso usato in combinazione con i CSS (Cascading Style Sheets) per creare layout come quelli visti sui siti di notizie o sui blog; serve anche come base su cui molti siti web sono costruiti dai programmatori di applicazioni che usano framework JavaScript come AngularJS o React JS.

Cosa ti servirà per usare il linguaggio HTML?

1. Un editor di testo, ad esempio Blocco note (Windows) o TextEdit (Mac)
2. Un browser, ne abbiamo almeno uno già installato nel PC o nei device che utilizziamo.
3. Foglio di carta o un blocco per scrivere (opzionale)
4. Un editor HTML avanzato come ad esempio Notepad++ (Windows) o TextWrangler (Mac) (opzionale)

Un’introduzione: i tags

Non è un linguaggio di programmazione: si tratta invece di un linguaggio di markup (di ‘contrassegno’ o ‘di marcatura’), che permette di indicare come disporre gli elementi all’interno di una pagina.

Queste indicazioni vengono date attraverso degli appositi marcatori, detti tag (‘etichette’), che hanno la caratteristica di essere inclusi tra parentesi angolari.
Un esempio di tag è <img>, riferito alle immagini.

Con HTML quindi indichiamo, attraverso i tag, quali elementi dovranno apparire su uno schermo e come essi debbano essere disposti. Tutte queste indicazioni sono contenute in un documento HTML, spesso detto “Pagina HTML“. Una pagina HTML è rappresentata da un file di testo, ovvero un file che possiamo modificare con programmi come notepad e in genere hanno un nome che finisce con l’estensione .html.

I tag html non vengono visualizzati nelle pagine web come semplice testo. Vengono utilizzati dal browser per capire come visualizzare il contenuto della pagina web. Il tag di “apertura” contiene tutte le istruzioni. Ad esempio per comunicare al browser di visualizzare il testo in grassetto.

Hai la necessità di utilizzare anche un tag di “chiusura” per permettere al browser di capire a quale elemento vadano applicate le istruzioni contenute nel tag di apertura.

In questo esempio tutto il testo compreso nel tag di apertura e chiusura verrà visualizzato in grassetto. I tag di chiusura sono racchiusi fra parentesi angolari come i tag di apertura, ma con l’aggiunta del simbolo / dopo la prima parentesi angolare.

1. Scrivi i tag di apertura racchiusi da parentesi angolari:<I tag di apertura vanno scritti qui>.
2. Scrivi i tag di chiusura racchiusi da parentesi angolari, inserendo però il simbolo / dopo la prima parentesi angolare:</I tag di chiusura vanno scritti qui>)
3. Prosegui nella lettura per imparare a utilizzare i tag più importanti. Per questo passaggio tutto quello che devi ricordare è la sintassi da utilizzare per scrivere i tag di apertura e chiusura: < > e </ >.
4. Se stai utilizzando o consultando altri tutorial sul linguaggio HTML, potrai osservare che si riferiscono ai tag chiamandoli “elementi” e che il testo contenuto fra i tag di apertura e chiusura viene chiamato “contenuto dell’elemento”.

Come creare la tua prima pagina con linguaggio HTML

1. Lancia un editor di testi, ad esempio il classico blocco note di Windows e scrivi un semplice testo
2. Salva il file con estensione .html ad esempio “hello.html“; se non viene salvato correttamente, abilita le estensioni grazie alle opzioni di visualizzazione delle cartelle
3. Clicca sul file e si aprirà automaticamente il browser predefinito di sistema e mostrerà una schermata dove troverai il tuo testo

Fatto questo, puoi iniziare a sperimentare!
Per iniziare, scrivi (<h1>) all’inizio e </h1> alla fine del titolo.
Per il resto del testo, ovvero i paragrafi, scrivi (<p>) all’inizio e </p> alla fine.
Dopo di ché, prova ad aggiornare la pagina (in genere basta digitare F5) il testo viene modificato.

Ti potrebbe interessare anche: Come funziona WordPress? E’ il miglior CMS? La guida completa