Volete creare il sito web dei vostri sogni, ma senza che sembri fatto con uno stampino. Chiunque abbia esperienza di web design vi dirà che prima di tutto dovete conoscere l’HTML. Ma cos’è l’HTML e come si impara?
Volete che il sito web che gestite si distingua e sia originale. Volete elementi e design che nessun altro nel vostro settore utilizza. Dopo tutto, il vostro sito web è la prima impressione che molti potenziali clienti hanno della vostra attività.
Ma prima di poterlo fare, dovete imparare un linguaggio informatico chiamato HTML. In sostanza, è il linguaggio che stabilisce cosa un browser web deve mostrare a un visitatore quando arriva sul vostro sito.
In questo articolo vi spiegheremo cos’è l’HTML, come è nato, come si usa, come funziona e vi offriremo una formazione di base sull’HTML con consigli su come saperne di più.
Non vedete l’ora di imparare a programmare il vostro sito web senza incappare in pagine non funzionanti? Iniziamo subito.
Cos’È l’HTML?
HTML è l’acronimo di “hypertext markup language” ed è un linguaggio relativamente semplice utilizzato per creare pagine web. Poiché non ammette variabili o funzioni, non è considerato un “linguaggio di programmazione”, ma piuttosto un “linguaggio di markup”, un linguaggio che si serve dei tag per definire gli elementi di un documento.
Se chiedete a qualcuno nel mondo del web design che cos’è l’HTML, è probabile che riceverete una lunga spiegazione che vi farà girare la testa, soprattutto se, come la maggior parte del mondo, non avete la più pallida idea di come programmare e creare un sito web da zero.
Cosa significa l’acronimo che in italiano possiamo tradurre come “linguaggio di markup per ipertesti”? Vediamo di analizzarlo.
L’ipertesto è un testo ordinato che collega elementi correlati, di solito tramite link (chiamati anche collegamenti ipertestuali). Il linguaggio di markup descrive lo stile e la struttura di una pagina ai browser web.
Quindi l’HTML è ciò che assicura che il testo e le immagini vengano visualizzati al posto giusto e che gli utenti possano navigare nel vostro sito web senza problemi. I browser web caricano queste informazioni dal vostro server web per generare i siti web che vedete ogni giorno.
Se doveste osservare l’HTML nella sua forma grezza, vedreste molti simboli e parentesi che apparentemente non hanno senso. Tuttavia, tutto contribuisce al prodotto finale rivolto al cliente.
La struttura stessa dei siti web viene creata attraverso l’HTML. Questo linguaggio lavora insieme a CSS (Cascading Style Sheets) e JavaScript per creare siti web visivamente accattivanti e interattivi per gli utenti.
Il punto fondamentale è che l’HTML è la base di una buona pagina web. Senza di esso, non sareste in grado di condividere il testo con chi visita un sito web, tanto meno di aggiungere il vostro tocco personale al sito dei vostri sogni.
La Storia dell’HTML
Sir Tim Berners-Lee ha creato l’HTML alla fine del 1991, ma il linguaggio di programmazione è stato rilasciato alle masse solo nel 1993.
Fu allora che uscì l’HTML1. Fin dall’inizio è stato concepito come un mezzo per condividere i dati attraverso i browser web.
La crescita dell’HTML si arrestò poco dopo il suo rilascio perché all’epoca non erano molte le persone che sviluppavano siti web.
Nel 1995 fu rilasciato l’HTML2 con ulteriori caratteristiche, che lo resero il linguaggio di markup standard per il web design fino al 1997.
A quel punto Dave Raggett sviluppò l’HTML3. Offriva ai webmaster caratteristiche più potenti da usare nella progettazione delle pagine. Purtroppo era in anticipo sui tempi. Le caratteristiche dell’HTML3 rallentavano i browser, che non erano ancora in grado di applicarle.
L’HTML4.01 è stato sviluppato nel 1999 ed è stato dotato del supporto per le opzioni multimediali. Questo aggiornamento includeva anche fogli di stile, funzioni di stampa e linguaggi di scripting aggiuntivi.
Più di recente, l’HTML5 è stato rilasciato nel 2015. Il lancio di HTML5 ha aggiunto un maggiore supporto per l’archiviazione multimediale ed elementi di contenuto specifici. Anche il doctype inline, l’incorporamento di audio e video sono stati semplificati.
Nel 2022 il mondo lavorerà con HTML5.2, che migliora la politica di sicurezza dei contenuti proprio nel momento in cui ne abbiamo più bisogno.
Inoltre, si concentra sull’eCommerce, aggiungendo un’API per le richieste di pagamento. Questo aggiornamento ha anche aggiunto applicazioni internet accessibili e ricche di contenuti per le persone disabili.
A Cosa Serve l’HTML?
La risposta semplice a questa domanda è che l’HTML viene utilizzato per creare siti web per uso personale e aziendale in tutto il mondo.
La risposta vera e propria è molto più dettagliata.
L’HTML è stato il linguaggio predefinito utilizzato per i documenti e i siti web a partire dagli anni ’90. Funziona con i browser per aiutarli a comprendere la struttura di un sito web e lo stile a esso associato.
In sostanza, l’HTML è un progetto che indica al browser web come comporre il vostro sito per le persone che lo visitano. Quando un utente digita il vostro URL, il browser assembla la pagina sulla base dei blocchi stabiliti nel codice HTML.
Questo, a sua volta, aiuta la pagina ad avere l’aspetto desiderato quando viene visualizzata da un utente, se combinato con un foglio di stile CSS che stilizza gli elementi disposti nel documento HTML.
La versione attuale dell’HTML consente anche di eseguire video, audio, fogli di calcolo e altre applicazioni direttamente sui siti web. Se vi è capitato di ammirare questi elementi su un sito web, dovete ringraziare l’HTML5.
Questo linguaggio di markup garantisce anche una navigazione interna fluida di un sito web, grazie ai collegamenti ipertestuali.
I designer di siti web possono anche usare l’HTML per creare moduli di lead generation per raccogliere email e nomi (a patto che l’azione sia alimentata da un file codificato in un’altra lingua).
Se usate dei plugin esterni, potete usare l’HTML anche per creare sistemi di prenotazione o moduli di ricerca all’interno di un sito, per facilitare la prenotazione e la navigazione.
L’HTML è il modo in cui si inseriscono i contenuti non dinamici in un sito web: quelli che volete che ogni persona veda allo stesso modo. Se volete contenuti dinamici, dovete usare JavaScript, PHP o altri linguaggi di programmazione.
Come Funziona l’HTML?
A maggio 2022, esistono più di 3,56 miliardi di pagine web su Internet. Molte di queste pagine sono semplici file HTML. (Nota bene: non stiamo parlando di siti web, ma di pagine web)
Tradizionalmente, se il vostro sito era composto da 150 pagine, probabilmente avevate 150 file HTML separati. Ma oggi le cose sono cambiate. Se usate un sistema di gestione dei contenuti (CMS) (e la maggior parte delle persone lo fa), non avrete a che fare con file separati perché di solito il CMS genera dinamicamente le pagine in base ai dati memorizzati in un database.
Questi file sono chiamati anche documenti HTML e sono gli elementi costitutivi del vostro sito web. Ogni pagina ha diversi elementi on-page e off-page che trovano posto nei documenti HTML. Tra questi ci sono elementi di back-end come meta tag, tag title e alt tag, ma anche elementi fisici come video, immagini, blocchi di testo e altri elementi rivolti all’utente.
Quali Elementi Compongono un Documento HTML?
Tutti i documenti HTML terminano con l’estensione .html o .htm. Questi documenti contengono tutto il testo e i tag che forniscono informazioni statiche a un browser web.
Il documento HTML è il manuale di istruzioni usato dal browser web dell’utente per costruire il sito. Tutti i file a cui fa riferimento (fogli di stile CSS, file JavaScript che alimentano gli elementi dinamici, ecc.) vengono letti dal browser, che poi esegue il rendering della pagina di conseguenza, consentendo alle persone di vederla nel modo previsto. Il rendering è la costruzione vera e propria e avviene ogni volta che qualcuno naviga verso una pagina specifica del vostro sito.
Se ci sono problemi con il vostro documento HTML o con uno dei file che include, il sito non verrà renderizzato correttamente. Sarebbe come cercare di assemblare una scrivania IKEA senza un pezzo o uno strumento fondamentale.
I siti web moderni contengono diversi elementi HTML composti da tag e attributi. Questi elementi creano la struttura di una pagina. I tag associati a ciascun elemento indicano dove inizia e dove finisce. Senza un tag che chiude un elemento, il browser inserirà tutti i contenuti successivi all’interno di quella colonna o riga, anche se non è quello che intendevate.
Gli attributi associati a ciascun elemento di una pagina illustrano le varie caratteristiche che li compongono.
Tutti i documenti HTML iniziano con una dichiarazione <!DOCTYPE>. Questa definizione di tipo di documento, nota anche come DTD, determina la struttura e gli elementi di un documento XML.
Se in passato <div> era la scelta principale per creare blocchi di contenuto, in HTML5 esistono anche blocchi specifici come <main> che indicano ai crawler il tipo di contenuto che sarà presente in un blocco – in questo caso, il contenuto principale del blog/articolo.
Nozioni di Base di HTML
Se volete diventare web designer o almeno partecipare alla creazione del sito web della vostra azienda, dovete imparare l’HTML. Come per tutte le cose da imparare in questo mondo, dovete iniziare con le basi per avere una solida comprensione degli elementi più avanzati che verranno.
Naturalmente potete usare un editor HTML gratuito o Sublime Text, ma una conoscenza approfondita del funzionamento dell’HTML vi aiuterà a migliorare la personalizzazione dei siti web che realizzerete.
Nelle sezioni che seguono vi spiegheremo alcune nozioni di base dell’HTML per iniziare il vostro percorso di familiarizzazione con l’HTML.
Elementi dell’HTML
Tutti gli elementi HTML, a prescindere dalla loro creazione, hanno gli stessi tre componenti. Ci sono un tag di apertura, il contenuto stesso e un tag di chiusura.
Il tag di apertura mostra al browser web dove iniziano gli elementi della pagina. Per esempio, possono indicare dove inizia un lettore video o un paragrafo di testo nella pagina. Tutti i tag di apertura usano parentesi angolari di apertura e di chiusura per contrassegnarsi. Per esempio, il tag di apertura <em> dà enfasi al contenuto, come il corsivo. Dovreste posizionare questo tag prima del testo che volete enfatizzare.
Il contenuto vero e proprio è l’informazione che l’utente vede. Può essere un testo scritto, come un articolo di un blog. Può anche essere un’immagine o un codice embed di un video. Se posizionato dopo il tag di apertura, il contenuto inizierà nel punto indicato.
Il tag di chiusura è uguale al tag di apertura, ma aggiunge una barra in avanti prima del nome dell’elemento. Per tornare al nostro esempio di tag di enfasi di prima, dovreste posizionare il tag </em> alla fine del testo che state cercando di enfatizzare.
Quindi, per esempio, se volete mettere in corsivo la parola “esattamente”, dovete codificare in questo modo:
<em>esattamente.</em>
Nella pagina reale rivolta all’utente, il codice sarà così:
Esattamente.
Gli elementi HTML includono anche gli attributi, che contengono un nome e un valore. Il nome dell’attributo indica ciò che l’utente sta aggiungendo, mentre il valore fornisce informazioni aggiuntive.
Per quanto riguarda i tag immagine, dovete ovviamente specificare quale immagine volete mostrare, quindi il risultato è questo:
<img src=”img_girl.jpg”>
Se volete rendere rosso un paragrafo della vostra pagina usando il font Arial, potete usare l’attributo style:
<p style=”color:red;font-family:arial”>.
In questo esempio, stiamo usando il tag di apertura <p> per un nuovo paragrafo. Con questi attributi, tutto ciò che è contenuto nel paragrafo sarà rosso con il font Arial, fino al tag di chiusura </p>.
Tuttavia, nello sviluppo web moderno, è prassi comune non usare l’attributo di stile HTML per regolare il design dei singoli elementi, ma piuttosto stilizzare l’intera pagina con un foglio di stile CSS separato.
La classe HTML e l’ID sono due attributi di un elemento HTML che gli danno un “nome” e vi aiutano a indirizzare questi elementi con CSS o JavaScript in un secondo momento. Questo aiuta lo sviluppo e lo rende più efficace. Utilizzando l’ID o la classe di un elemento, potete inserire informazioni di stile in elementi come il colore di sfondo, i bordi, il colore dei caratteri e altro ancora.
Per esempio, invece di stilizzare il testo in rosso all’interno del documento HTML, potete fare così:
<p class=”redtext”>
And in the CSS stylesheet, target the class like this:
.redtext {
color:red;
font-family:arial;
}>/code>Tag ed Elementi HTML Più Usati
Esistono 142 diversi tag HTML che vi permettono di creare elementi. Questi sono composti da elementi a livello di blocco e in linea.
Gli elementi a livello di blocco coprono l’intera larghezza della pagina, iniziando una nuova riga all’interno del documento.
Ecco alcuni tag comuni a livello di blocco che potreste usare nel vostro sito web:
- <head> Questo tag serve per elencare le meta-informazioni, come il titolo della pagina.
- <html> Questo è un elemento radice. Appare all’inizio e definisce il documento HTML.
- <body> Il tag body identifica il contenuto della pagina.
- da <h1> a <h6> Questi sei diversi tag identificano le varie intestazioni che potete usare.
- <p> Questo è il tag paragrafo, che indica l’inizio di un nuovo paragrafo nel vostro contenuto.
- <ol> Questo tag crea un elenco ordinato.
- <ul> Il tag ul crea elenchi non ordinati.
- <li> Questo è il tag per gli elementi dell’elenco. È racchiuso all’interno di tag di elenco ordinato o non ordinato per ogni elemento dell’elenco.
- <div> Questo è un tag di blocco che crea una “sezione” che potete riempire di contenuti (e stilizzare in seguito con i CSS). La maggior parte dei siti e dei template si basa molto su questi elementi per strutturare i contenuti.
- <header> Questo è un tag di blocco specifico per il contenuto dell’intestazione.
- <main> Questo è un tag di blocco specifico per il contenuto principale del blog.
- <footer> Questo tag di blocco è per le informazioni nel footer, come il copyright, i link, ecc.
Gli elementi in linea sono quelli che formattano il contenuto all’interno degli elementi a livello di blocco. Possono includere testi enfatizzati, come i caratteri in grassetto e in corsivo. I contenuti in linea possono anche essere dei link, sia a contenuti interni che esterni.
I link in linea formattano il testo senza interrompere il flusso dei contenuti.
Esistono alcuni tag inline comuni che potreste usare nel vostro sito web. Eccone alcuni, in ordine sparso:
- <strong> Questo è il tag che si usa per creare il testo in grassetto.
- <em> Il tag em, che abbiamo usato in un esempio precedente, mostra il corsivo.
- <a> Questo è il tag di collegamento ipertestuale. Avrebbe bisogno di un attributo href per mostrare dove punta il link (proprio come i tag img hanno bisogno di un attributo src).
HTML, CSS e JavaScript
Abbiamo accennato brevemente a CSS e JavaScript all’inizio di questo articolo. Essi tendono ad andare di pari passo con l’HTML per creare siti web moderni e avanzati con un tocco personalizzato. Ma cosa sono i CSS e i JavaScript? E come si differenziano dall’HTML?
Come ormai sappiamo, l’HTML si usa per creare una struttura e aggiungere elementi alle vostre pagine. Ma, come saprete anche voi, non è tutto ciò che serve per progettare un sito web solido. È qui che entrano in gioco CSS e JavaScript.
CSS è l’acronimo di Cascading Style Sheets. È il linguaggio e i file che i moderni sviluppatori web usano per progettare gli sfondi, i colori, le spaziature, i layout e le animazioni di un sito web. In sostanza, i CSS descrivono la presentazione di un documento HTML, offrendo al web designer maggiore flessibilità e controllo.
Può anche aiutarvi ad applicare la stessa formattazione a più pagine web attraverso i file .css. Questi fogli di stile vi permettono di non dover rifare la formattazione per ogni pagina. Inoltre, il file .css può essere memorizzato nella cache, riducendo la velocità di caricamento tra le pagine che condividono lo stesso formato.
Poi c’è Javascript. Javascript crea funzioni dinamiche, come gallerie fotografiche, pop-up e cursori. È un linguaggio di programmazione molto diffuso e usato dal 97% dei siti web di tutto il mondo. I motori Javascript dedicati sono inclusi in tutti i principali browser web, rendendo l’implementazione di queste funzioni più semplice ed efficace.
Insieme, Javascript, CSS e HTML lavorano per creare ciò che vediamo ogni giorno come una pagina web completa, ben progettata e interattiva su piattaforme desktop e mobili.
Come Imparare l’HTML
Abbiamo spiegato cos’è l’HTML e alcune delle nozioni di base a esso associate. Ora è arrivato il momento di parlare del processo di apprendimento dell’HTML e di come questo possa aiutare il vostro futuro e le vostre aspirazioni di carriera.
L’HTML è molto più di un linguaggio di programmazione popolare. È il linguaggio di internet e questo non cambierà presto. Va a braccetto con servizi popolari come WordPress e potete usare l’HTML per modificare molti template di WordPress e trasformarli in qualcosa di unicamente vostro.
Quindi, iniziamo dal motivo per cui qualcuno dovrebbe imparare a conoscere WordPress.
Perché Imparare l’HTML?
Imparare l’HTML è importante per chiunque voglia intraprendere una carriera nello sviluppo web. Sviluppatrici e sviluppatori web di talento sono sempre molto richiesti, sia che lavorino per agenzie che in modo indipendente, e l’apprendimento dell’HTML è la base di queste competenze.
Non solo c’è molta richiesta per questa posizione, ma chi lavora nello sviluppo web può facilmente guadagnare stipendi a sei cifre. Lo stipendio medio degli sviluppatori web è di 98.565 dollari nel 2022.
Una solida conoscenza dell’HTML è una competenza essenziale che aziende e recruiter ricercano quando assumono sviluppatori web.
Se non siete sviluppatori web ma state cercando di assumerne una o uno, una conoscenza rudimentale di HTML, CSS e JS e della loro interazione vi sarà utile durante i colloqui con i candidati. Potrete sapere quali domande fare ed eliminare facilmente coloro che non sanno di cosa stanno parlando.
Risorse Didattiche
Sono disponibili diverse risorse di apprendimento gratuite per chi vuole approfondire la propria formazione sull’HTML. Vi illustriamo alcune delle migliori in questo momento.
Codecademy
Codecademy è un servizio che offre corsi di livello introduttivo a costo zero. Include tutorial interattivi e usa uno schermo diviso in due parti che mostra i risultati della codifica HTML man mano che si procede.
Potete accedere a contenuti esclusivi attraverso il programma per 19,99 dollari al mese.
Coursera
Coursera include diversi corsi che approfondiscono l’HTML fornendo esempi tratti dal mondo reale. Questo servizio ha un costo di 49 dollari al mese con una settimana di prova gratuita.
W3Schools
W3Schools è un altro servizio gratuito che insegna l’HTML di base. Per farlo si serve di esempi, esercizi e risorse varie.
Potete anche pagare 95 dollari per un corso ufficiale autogestito che include un certificato finale.
General Assembly Dash
General Assembly Dash è una risorsa educativa sull’HTML che fornisce progetti per principianti che desiderano immergersi nel mondo del web design. Questo programma si basa su un approccio basato sugli obiettivi e vi aiuta a comprendere le applicazioni reali di ciò che imparate. Potrete costruire un sito web invece di limitarvi a completare dei moduli.
Una volta terminati i progetti, potrete seguire un corso di mentorship online che vi permetterà di ottenere un certificato al termine del corso. La retta completa costa 3.950 dollari, ma sono previste opzioni di finanziamento flessibili e piani rateali.
Riepilogo
L’HTML continuerà a essere la spina dorsale del web design anche nel prossimo futuro. Una buona conoscenza di questi concetti può aiutarvi a creare il vostro sito web WordPress partendo dall’HTML.
Quando è il momento di creare un nuovo sito web, avrete bisogno di un hosting solido. Se state pensando di creare un sito WordPress, contattate Kinsta oggi stesso per programmare una demo e scoprire perché più di 24.000 aziende hanno affidato la loro presenza online al nostro servizio di hosting gestito di alta qualità.
