Sistema descrittore delle pagine web, sul linguaggio HTML si sviluppa buona parte dell’Internet moderno. Il linguaggio HTML (HyperText Markup Language, linguaggio a marcatore per ipertesti) è un linguaggio di markup descrittivo.
Con questo termine si va ad identificare un sistema che contiene un insieme di regole in cui è il software che va a rappresentare il testo tramite criteri di sua scelta .
Cos’è il linguaggio html?
Il linguaggio HTML è l’architrave del web. Linguaggio di pubblico dominio, le cui regole sono stabilite dal World Wide Web Consortium (W3C), tramite il linguaggio HTML i programmatori ottengono una linea guida con indicazioni in merito a metodo di scrittura, formattazione e visualizzazione della pagina creata.
Con questi parametri si va quindi a creare una pagina testuale, che diventerà una guida e traccia che verrà seguita ed interpretata dai browser il cui scopo è la visualizzazione delle pagine web.
La pagina in html diventa quindi il “canovaccio” per mezzo del quale le informazioni in esso riportate diventano visibili sul web.
Pubblicato per la prima volta nel 1991 da Tim Berners Lee, considerato il padre dell’Internet moderno, il linguaggio HTML è ora arrivato alla versione 5, una versione ulteriormente rifinita dell’HTML, dotata di un sistema di markup più efficace ed arricchita da nuovi tools.
In HTML5 troviamo, infatti, una serie di API (Application Programming Interface) che permettono di gestire i dispositivi ed i loro servizi, in particolare relativamente alla parte hardware ed alla relativa gestione della stessa.
HTML5 ha aperto le porte anche alla creazione di app per dispositivi mobili, distribuibili sui marketplace dei device tecnologici più comuni come Android e Google Play.
Programmare in HTML è semplice anche dal punto di vista dei tools necessari. Un valido editor HTML, magari dotato della funzione di colorazione ed evidenziazioni dei tag html, sarà sufficiente per creare il nostro codice, che andremo poi a testare e validare tramite i browser più comuni ed eventualmente un programma di convalida del codice.
Linguaggio HTML : il codice già pronto
La semplicità del linguaggio HTML rende l’approccio alla costruzione delle pagine possibile tramite molti approcci.
Così come in ambito ludico per i Lego si può decidere di partire a costruire mattoncino dopo mattoncino o partendo da blocchi già pronti, anche per quanto riguarda il codice possiamo partire da 0 o da porzioni di codice html già pronto da usare quando serve.
Questi “semi assemblati” sono conosciuti in gergo come “snippet“.
Il codice html già pronto che troverai qui di seguito ti aiuterà nella costruzione del tuo foglio html e presenta tutti i tag fondamentali, ed in ordine, che devono essere presenti in un sito web.
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.Tag-Analytics.com"></script>
<script>
// script fornito da Google Analytics
</script>
<!-- Fine Tag Google Analytics -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<meta name="description" content="Inserire la meta description qui">
<meta property="og:title" content="Titolo"/>
<meta property="og:description" content="Descrizione"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.miosito.com"/>
<meta property="og:image" content="https://www.miosito.com/img/og-image.jpg" />
<meta name="keywords" content="Parole Chiave">
<meta name="author" content="Autore">
<meta name="copyright" content="Autore Anno">
<link rel="canonical" href=“https://miosito.com/>
<link rel="icon" href="img/icons/favicon.png" type="image/png">
<link rel="stylesheet" href="inserire percorso foglio di stile">
<script src="inserire percorso script"></script>
</head>
<body>
</body>
</html>Vediamo ora nel dettaglio i tag fondamentali del linguaggio HTML.
I tag fondamentali del linguaggio html
Nel tempo sono state create decine di tag per il linguaggio html.
Queste “etichette” vanno a descrivere ed a raggruppare in un unico termine una funzione specifica e necessaria per il codice HTML. Molte di queste sono specifiche e vengono utilizzate solo in determinate occasioni. Altre sono invece standard e fanno parte ormai dell’alfabeto dell’HTML.
Vediamo insieme quali sono i tag essenziali e che non possono mancare nel linguaggio HTML.
L’head tag
Il tag Head è il tag che contiene tutte le informazioni e gli strumenti essenziali di una pagina web ed è utilizzabile una sola volta per pagina.
Questo tag si apre proprio all’inizio del documento, subito dopo il tag html, e si chiude prima dell’apertura del corpo “body” del documento.
Vediamo insieme quali sono i tag e gli strumenti che vengono inseriti nel tag head:
– Codice di tracciamento per Google Analytics
Qualsiasi pagina al fine di essere ottimizzata e migliorata, ha bisogno di uno strumento di analisi per capire da dove arriva il visitatore, come ha fatto a trovare la pagina, qual è il suo comportamento sul sito, come sta navigando sulla pagina e molto altro.
Essere in possesso di queste informazioni ed analizzarle è fondamentale se vogliamo migliorare l’esperienza utente, il numero di visitatori ed il tempo di permanenza sul sito.
Esistono molti strumenti che ci possono fornire queste informazioni, ma uno dei più completi è sicuramente Google Analytics.
Google Analytics è uno strumento di analisi che può tracciare tutte le informazioni che ci servono. Funziona con un codice di monitoraggio personalizzato che dovrà essere installato nell’ Head tag (come indicato nel codice già pronto).
Il processo di creazione ed implementazione è molto semplice:
- Creare un account Google Analytics partendo dall’account Google
- Inserire il dominio del sito web
- Incollare il codice fornito da Google Analytics all’interno del tag Head
In questo modo accedendo all’account Google Analytics avremo un monitoraggio completo del comportamento dei visitatori sulla nostra pagina e ci sarà più semplice capire quali pagine possono essere migliorate.
– I tag title e Meta Description
Il tag <Title> ed il tag <Meta Description> sono essenziali per l’ottimizzazione di ogni pagina web e sono le porzioni di testo che appaiono quando avviamo una ricerca, nonché quelli che indicano ai motori di ricerca di che cosa tratta la pagina in questione.
Studiare l’uso di questi tag è fondamentale per l’ottimizzazione SEO di un sito web e per essere trovati più facilmente nel web.
– Metadati
Altre informazioni fondamentali che non possono mancare nel tag Head sono i metadati, indicati con il tag <meta … =””>.
Con questo termine si va ad indicare l’insieme ed il tipo di informazioni utilizzate dai motori di ricerca per “capire” di cosa tratta la pagina ed aiutarli ad interpretarle nella maniera corretta.
– Open Graph
Da alcuni anni il web ha perso la sua iniziale connotazione di singole pagine web collegate tra loro. Con l’avvento dei social network le pagine web si “estendono” al di fuori del sito web stesso per andare a sfruttare i vantaggi dati dalle condivisioni social.
Open Graph, conosciuto anche come OG o OG tag è un sistema di implementazione di una piccola parte di Facebook all’interno del tuo sito. Parte del concetto più ampio di Social Graph, Open Graph è una soluzione che porta, insieme ai pulsanti di condivisione social sulla tua pagina, il tuo sito “dentro” a Facebook.
Come per lo script di Google Analytics, anche in questo caso, l’implementazione avviene tramite delle semplici righe di codice che vengono scritte nel tag Head.
<meta property="og:url" content="https://www.lamiapagina.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Titolo" />
<meta property="og:description" content="Descrizione" />
<meta property="og:image" content="https:/percorsoimmagine.jpg" />Inserendo i dati e le immagini che vogliamo appaiano quando incolliamo un link sul nostro profilo, ottimizzeremo la visualizzazione del nostro sito web in Social Network come Facebook e LinkedIn.
Esistono degli strumenti come il Debugger Open Graph per testare il funzionamento dell’ OG tag. Questa soluzione è stata predisposta da Facebook/Meta per il debugging di condivisione delle pagine web.
– Script
Non solo tag di terze parti, ma anche funzioni aggiuntive, come Script e funzione addizionali di tipo client scritte in Javascript. Funzioni aggiuntive che, una volta caricate nella sezione Head possono venire richiamate dal documento HTML durante le fasi di visualizzazione o utilizzo dello stesso.
– Fogli di stile
Altra sezione che fa parte di Head è quella relativa ai fogli di stile.
Come intuibile dal nome, nei fogli di stile troviamo tutte le informazioni relative allo stile grafico dei contenuti. Dal font alle dimensioni dei caratteri, dal colore del testo fino alle informazioni di formattazione più dettagliate.
Questa parte è solitamente scritta in un apposito linguaggio, denominato CSS (Cascading Style Sheets, fogli di stile a cascata).
Imparare l’html
Linguaggio base dell’internet moderno e di moltissime applicazioni software, imparare il linguaggio html è un investimento sicuro. Padroneggiare questo codice permette, infatti, di aggiungere alla soddisfazione personale del conoscere “il dietro alle quinte” di un sito web, quella professionale di imparare un linguaggio per cui c’è sempre molta richiesta.
Html è un linguaggio semplice da imparare ma, come per tutte le specializzazioni e competenze, seguire un corso o un percorso formativo si rivela solitamente il sistema più rapido e completo per apprendere con un metodo efficace.
Nonostante il web sia pieno di contenuti gratuiti, tutorial Youtube e video, seguire un vero e proprio percorso fatto da informazioni sequenziali e ben organizzate è fondamentale per ricordare le informazioni nel lungo periodo ed fissarle in maniera logica nella memoria.
Per questo motivo noi di Digital Dojo abbiamo creato un corso professionale per apprendere le basi del linguaggio HTML ed utilizzarle in combinazione con il foglio di stile CSS per veder apparire le prime porzioni di codice del tuo sito web.
Imparare il linguaggio HTML non è mai stato così semplice!
Risposte