Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si avvicinano alla programmazione informatica per la prima volta, grazie alla sua diffusione e alla sua semplicità. Fa anche parte delle conoscenze di base fondamentali per tutti uno sviluppatore front end, insieme al linguaggio CSS e al linguaggio Javascript. Scopriamo, allora, più di preciso che cos’è il linguaggio HTML e qual è il modo migliore per impararlo partendo da zero. Partiamo dalle basi!
Cosa vuol dire html?
HTML è in realtà un acronimo. L’acronimo html sta per “HyperText Markup Language” vale a dire il linguaggio di marcatura utilizzato per creare pagine web. Si tratta di un linguaggio fondamentale per la strutturazione e la presentazione dei contenuti sul Web. Non ti è chiaro? Non preoccuparti, chairito il significato della sigla HTML, esploriamo nel dettaglio di cosa si tratta, a cosa serve e come funziona. Cominciamo!
HTML: a cosa serve e come funziona
HTML è un linguaggio di markup: ciò significa che non contiene logica di programmazione e non può eseguire compiti, come ad esempio calcoli o modifica di dati. La sua funzione è invece quella di dare struttura alla pagina, formattare gli elementi e organizzare le informazioni. Costituisce, in altre parole, lo scheletro di una pagina web.
Tra le sue caratteristiche principali troviamo i tag che si usano per indicare i diversi elementi, ad esempio titoli, paragrafi, immagini o link. Nella maggior parte dei casi, avremo un tag di apertura <> e un tag di chiusura </>. Esistono però alcune eccezioni, ad esempio il tag <img> che indica un’immagine e non richiede tag di chiusura. Il contenuto è di solito inserito tra i due tag di apertura e di chiusura, a volte si trova invece all’interno del tag di apertura stesso.
È possibile utilizzare soltanto HTML per realizzare una pagina web davvero rudimentale, ma nella maggior parte dei casi lo si abbina a CSS, che serve a definire lo stile dei diversi elementi. È quindi una buona idea imparare HTML e CSS di pari passo per abituarsi fin da subito a utilizzarli in combinazione.
Perché imparare HTML?
Come accennato, HTML è onnipresente sul web, e permette di creare con semplicità contenuti efficaci e dall’aspetto piacevole. Proprio perché è così semplice da imparare e utilizzare, per molti è un punto di partenza per avvicinarsi alla programmazione, o ad altre professioni nel settore digitale. Costituisce inoltre una buona aggiunta al proprio curriculum per chiunque sia interessato a mansioni amministrative: conoscere basi di HTML è utile anche per gestire di tanto in tanto social media o siti aziendali.
In alcuni casi, poi, imparare HTML è d’obbligo, ad esempio per:
- Futuri programmatori frontend: HTML è la base del lavoro di frontend development, e chiunque aspiri a questo ruolo deve conoscere questo linguaggio a menadito;
- Chi lavora in marketing e gestione dei contenuti: per creare post e articoli online è bene conoscere almeno le fondamenta di HTML, per formattare correttamente i contenuti e modificarne lo stile;
- Blogger e proprietari di siti web: conoscere un po’ di HTML permette di mettere mano alla grafica del proprio sito e personalizzarne l’aspetto senza ricorrere all’aiuto di un web designer.
Come imparare il linguaggio HTML?
Ci sono diverse opzioni per imparare il linguaggio HTML, ma le migliori hanno tutte un elemento in comune: la possibilità di apprendere attraverso la pratica. Quando si è alle prese con un linguaggio, infatti, trascorrere ore sulla teoria senza scrivere una linea di codice non è l’ideale. Meglio invece imparare concetti uno a uno, e testare immediatamente ciò che si è appreso. Vedere gli elementi di una pagina web prendere vita sullo schermo è anche un modo efficace per restare motivati. Come accennato in precedenza, tante risorse affiancano HTML e CSS dando la possibilità di imparare entrambi, per esempio creando da zero una semplice pagina web.
Ci si può orientare inizialmente verso corsi interattivi gratuiti, che partendo dalle basi aggiungono un mattoncino di conoscenza dopo l’altro. Dopo il primo momento di entusiasmo è possibile incappare in problemi o errori, oppure concetti più difficili da assimilare. In questo caso si possono approfondire temi specifici attraverso video su YouTube o articoli in blog di settore. Numerosi forum offrono poi la possibilità di fare domande a web developer più esperti per risolvere i propri dubbi. Non sai da dove partire? Ti consigliamo di leggere la nostra guida HTML per scoprire come programmare in HTML e come padroneggiare il linguaggio css per creare un sito web.
Imparare HTML con risorse gratuite o a pagamento?
Abbiamo visto che la più importante caratteristica di un buon corso per imparare HTML è la possibilità di fare pratica. Risorse gratuite o a pagamento che rispettino questo requisito possono essere una valida opzione, in base alla propria situazione.
Imparare HTML con risorse gratuite è ideale per chi desideri un primo assaggio per farsi un’idea di come funzioni il linguaggio, senza il bisogno di fare progressi in fretta. I corsi gratis sono adatti anche a chi abbia un blog o un sito e voglia imparare le basi per avere maggiore libertà nella gestione della propria pagina personale.
Usare risorse a pagamento per studiare HTML è invece consigliato se si pensi seriamente a una carriera nel campo del web development o del web design. Questa opzione permette di imparare velocemente e con il supporto costante di esperti, ottenendo consigli più specifici sulle migliori pratiche attuali. Un corso come Hackademy è indicato per chi voglia diventare un programmatore professionista, studiando quindi non solo HTML e CSS, ma anche altri indispensabili linguaggi e strumenti del mestiere.
In generale, HTML è un linguaggio accessibile che permette di migliorare le proprie competenze informatiche senza impiegare tantissimo tempo nello studio. Può essere il primo passo verso una futura carriera nella programmazione, oppure un modo per arricchire il proprio curriculum. Considerata la sua diffusione, rimarrà certamente rilevante ancora a lungo ed è quindi un ottimo momento per imparare HTML. La soddisfazione di creare dal nulla la propria prima pagina web sarà indimenticabile.
Come creare un template HTML
È arrivato il momento di creare in autonomia il tuo primo template HTML. Come prima cosa crea sul tuo desktop un file esempio.html e copia al suo interno con un editor di testo (puoi utilizzare il notepad o un editor professionale come sublime text).
Poi incolla nell file questo contenuto:
<!doctype html>
<html lang="it">
<head>
<title>Esempio di HTML5</title>
<meta name="description" content="Un semplice esempio di una pagina HTML5">
<style type="text/css">
body { color: blue; }
</style>
</head>
<body>
<div>
<h1>Esempio di una pagina HTML5</h1>
<p>Questa è una pagina HTML molto semplice.</p>
<p>
Se vuoi imparare di più, iscriviti alla nostra
<a href="https://aulab.it/">Hackademy</a>
</p>
</div>
</body>
</html>Ora salva il file e chiudilo. Fai doppio click sul file nel tuo desktop e si aprirà all’interno del browser il tuo primo template HTML! Adesso ti spieghiamo punto per punto il significato di ogni tag.
Cos’è il Doctype
Il tuo modello HTML5 deve iniziare con una dichiarazione del tipo di documento o doctype. Un doctype è semplicemente un modo per dire al browser che tipo di documento sta guardando. Il doctype dovrebbe essere sempre il primo elemento in cima a qualsiasi file HTML, quindi nel caso di un documento HTML ti basta scrivere <!doctype html>.
Cos’è l’elemento <html>
Subito dopo il doctype in qualsiasi documento HTML c’è l’elemento <html>: <html lang=”it”>.
Nello snippet di codice sopra, abbiamo incluso l’attributo lang con un valore di it, che specifica che il documento è in italiano.
L’elemento <html> è diviso in due parti, le sezioni <head> e <body>.
Gli elementi della sezione <head>
La sezione <head> contiene informazioni importanti sul documento che non vengono visualizzate dall’utente finale, come la codifica dei caratteri e i collegamenti ai file CSS ed eventualmente del codice JavaScript.
Il <title> e la meta-description
Il <title> è ciò che viene visualizzato nella barra del titolo del browser (ad esempio quando si passa con il mouse su una scheda del browser). Questo elemento è l’unico elemento obbligatorio all’interno di <head>.
L’altro elemento evidenziato è un tag <meta>, in particolare quello relativo alla description che è un tag facoltativo e definisce una descrizione della pagina (.
Includere il CSS in una pagina web
I CSS (Cascading Style Sheets) ovvero i Fogli di Stile servono a migliorare l’aspetto estetico delle pagine dando colore ed animazione alla pagina.
Innanzitutto devono essere racchiusi nel Tag <style> </style> dal quale il Browser interpreta che si tratta di Fogli di Stile. Esaminando il codice sopra, notiamo che abbiamo applicato il colore blue al body (e a tutti i contenuti che a cascata lo erediterannoo). Con il tag <style> dichiariamo che si tratta di un foglio di stile, e l’attributo type=”text/css” informa il browser che il formato è css.
Cos’è il <body> e quali sono i tag consentiti
Il tag <body> definisce il corpo del documento. L’elemento <body> contiene tutti i contenuti di un documento HTML, come intestazioni, paragrafi, immagini, collegamenti ipertestuali, tabelle, elenchi, ecc.
Nota: può esserci solo un elemento <body> in un documento HTML.
I tag <div>
Il tag <div> definisce una porzione di html, che ha senso (graficamente o per semantica) di essere racchiusa in un unica sezione. Il tag <div> non ha uno stile particolare, a meno che non vengano applicate regole css specifiche all’interno div.
Gli heading
Esistono sei livelli di titoli (heading) che vanno dall’<h1> all'<h6>. I numeri dei titoli indicano la loro importanza a livello semantico, pertanto devono essere utilizzati in ordine crescente. Il tag <h1> viene utilizzato per indicare l’argomento principale della pagina e deve essere il primo titolo ad essere utilizzato.
I paragragrafi
Il tag <p> (paragraph) serve ad organizzare il testo della pagina in paragrafi.
Ti abbiamo incuriosito e vuoi approdondire e imparare il linguaggio html? Consulta la nostra guida html e css in italiano!
