Drag

Chiama adesso!
800 93 1196

19 marzo 2020

Linguaggi di Markup : cosa sono e come funzionano

Desirée Pucci

Scritto daDesirée Pucci

Tempo stimato per la lettura6 minuti

Quello del web design è un mondo affascinante, dove creatività e competenza tecnica si incontrano.

Quando ci si approccia per la prima volta a questo tipo di attività, è inevitabile entrare in contatto con argomenti che, inizialmente, potranno sembrare anche molto complicati; tra questi, uno dei più ostici è senza dubbio quello relativo al linguaggio di markup.

I linguaggi di markup sono diversi dai linguaggi di programmazione, anche se molto spesso le due tipologie vengono confuse. DOWEB, agenzia seo, per posizionare al meglio i siti utilizza il markup in modo strategico effettuando test A/B in modo costante fino a trovare il rendimento migliore. Questo approccio è essenziale per ottimizzare il tasso di conversione di un sito ecommerce.

Cosa sono i linguaggi di markup?

Prima di tutto, è necessario fornire una spiegazione efficace alla definizione “linguaggio di markup”. Un linguaggio di markup è un linguaggio leggibile dall'uomo che viene utilizzato da un computer per “annotare” un documento elettronico in modo che il computer possa comprendere meglio lo stile e la struttura del documento.

Analizzando la parola "markup" si può dire che i linguaggi relativi vengono utilizzati per specificare bit di informazioni sul contenuto di un documento. Il termine veniva usato in passato in riferimento alla composizione tipografica, in cui le istruzioni venivano "contrassegnate" insieme al tipo.

Un altro campo in cui viene utilizzato il markup è la correzione di bozze, in cui le modifiche specifiche sono indicate con simboli di markup. Con il passare degli anni, il termine ha iniziato ad assumere un significato più ampio e talvolta viene utilizzato oggi con un significato completamente diverso. La maggior parte degli aspetti originari è comunque conservata.

In poche parole, un linguaggio di markup elettronico utilizza i tag per definire diversi elementi in un documento.

Vi siete mai chiesti cosa significa "ML" in "HTML"? Tale “sigla” sta ad indicare l’espressione “Markup Language” ed è inclusa nelle diciture di tutti i principali linguaggi di markup, come :
  • MathML - Mathematical Markup Language
  • SGML - Standard Generalized Markup Language
  • XHTML - eXtensible Hypertext Markup Language
  • XML - eXtensible Markup Language

Tutti i linguaggi di markup hanno una cosa in comune: usano i tag (cioè <>) per interconnettere il contenuto di un documento con le istruzioni di markup. Le parentesi angolari sono quelle che contrassegnano i tag e tutto ciò che viene trovato tra i tag è rappresentato dal contenuto formattato. Il markup può essere semantico o di presentazione, a seconda della sua posizione o utilizzo in un documento.


Quali sono i linguaggi di markup più utilizzati?

Come sanno bene coloro che si occupano di realizzazione siti web professionali, esistono una miriade di opzioni quando si tratta di linguaggi di markup e sarebbe impossibile descriverle tutte in un breve articolo. Nel web design e nello sviluppo, i tre linguaggi di markup più utilizzati sono HTML, XML e XHTML.

Gli sviluppatori Web si affidano principalmente a questi linguaggi di markup perché sono versatili e moderni, facili da imparare e compatibili con i requisiti tecnologici di oggi.


HTML : cos’è e come funziona questo linguaggio di markup

Dopo aver appreso cos'è un linguaggio di markup, sarà facile capire le caratteristiche di ciascun tipo. Il tipo più popolare di linguaggio di markup è il cosiddetto HTML, abbreviazione di Hypertext Markup Language. Tutti gli web designer e gli sviluppatori cominciano il loro percorso all’interno del mondo del web design imparando a conoscere questo linguaggio.

Questa lingua rappresenta la base del World Wide Web. L’HTML viene utilizzato per definire la struttura di un documento Web. Per fare ciò, il linguaggio HTML utilizza tag e attributi.

Normalmente, la struttura di un documento HTML inizia con il tag <html>. Quindi, continua con il tag <head> e poi con il tag <body>. I tag terminano quando viene aggiunto il simbolo /. Ad esempio, <body> termina quando viene inserito il tag </body>, mentre il documento si chiude con il tag</html>.

Indipendentemente dalla diffusione di nuovi linguaggi, l’HTML la fa ancora da padrone per quanto riguarda il markup. Questo linguaggio di markup determina l'aspetto del testo e degli elementi multimediali visualizzati su una pagina.

Tramite esso, è possibile connettere documenti utilizzando link ipertestuali e creare documenti interattivi sfruttando determinate funzioni rese disponibili dall’uso di tag HTML.

Ecco un breve esempio di come utilizzare questo linguaggio di markup per rendere il testo in grassetto:

Questo è un <b> esempio </b> di come usare <b> il grassetto </b> in HTML.

Ed ecco come appare: "questo è un esempio di come usare il grassetto in HTML".


XML : cos’è e come funziona questo linguaggio di markup

XML, abbreviazione di eXtensible Markup Language, è il secondo linguaggio di markup più popolare in circolazione. In effetti, l’XML funziona come un'estensione dell’HTML.

C'è una grande differenza tra XML e HTML, soprattutto per quanto riguarda gli elementi di base; invece di utilizzare i tag, come nel caso dell'HTML, l’XML utilizza i nodi. Questi nodi sono elementi di dati.

I nodi XML possono essere utilizzati per organizzare i dati. Ad esempio, se si possiede un sito Web per un ristorante, il menu può essere organizzato utilizzando i tag XML, mentre il loro aspetto può essere personalizzato tramite HTML. Come accennato in precedenza, i due linguaggi di markup si completano a vicenda per raggiungere obiettivi diversi.

L’XML è diventato ancora più popolare grazie ad AJAX, che significa JavaScript asincrono + XML. La combinazione dei due consente a siti Web e app popolari come Gmail di caricare elementi senza necessariamente aggiornare la pagina.

Ciò consente un'esperienza utente più fluida e meno inconvenienti. Senza nodi XML, ciò non sarebbe stato possibile. I dati XML possono essere considerati auto-definitivi perché la loro struttura è incorporata nei dati.

Ecco un esempio utile per far comprendere meglio il funzionamento di questo linguaggio di markup :

<? xml version = "1.0" standalone = "yes"?>

<Conversazione>

<greeting> Ciao, mondo! </greeting>

<response> Ferma il pianeta, voglio scendere! </response>

</ Conversazione>


XHTML : cos’è e come funziona questo linguaggio di markup

L’ultimo linguaggio di markup preso in considerazione, ovvero l’XHTML, o eXtensible Hypertext Markup Language, è una combinazione tra HTML e XML. Poiché la combinazione di XML e HTML era risultata fin da subito molto interessante, si è pensato bene di creare un ulteriore linguaggio che potesse fondere alla perfezioni i punti di forza di entrambi.

Inizialmente i linguaggio XHTML era stato progettato per i display dei dispositivi Net ed è stato lanciato prima dell'introduzione di HTML5. XHTML è in grado di creare un linguaggio di markup potente e autonomo.

XHTML è anche molto flessibile, poiché gli sviluppatori possono aggiungere i propri tag e utilizzarli per le pagine che creano. È comodo da usare e offre alle persone un maggiore controllo sul design, sia in termini di aspetto che di organizzazione.

Naturalmente, ci sono regole da rispettare per avere un'esperienza priva di errori, poiché l’XHTML è molto rigoroso in termini di sintassi. I tag e gli oggetti personalizzati devono essere definiti in DTD (Document Type Definition). L’XHTML ha una sintassi complessa rispetto al normale HTML o XML.


La differenza tra un linguaggio di markup e un linguaggio di programmazione

Se ancora non è chiaro, la differenza principale tra un linguaggio di markup e un linguaggio di programmazione è che il primo comprende semplicemente una serie di markup che vengono utilizzate insieme al testo normale per consentire a un computer di comprenderlo meglio.

Se questi “segni” vengono rimossi, il contenuto del documento verrà visualizzato come testo normale senza funzioni di formattazione o ipertesto disponibili. I linguaggi di markup sono spesso utilizzati in settori come la grafica vettoriale e la creazione di interfacce.


Che cos'è il CSS?

Partiamo dal significato del termine : CSS sta per Cascading Style Sheets.

Mentre l'HTML viene utilizzato per strutturare un documento Web (definendo cose come titoli e paragrafi e consentendo di incorporare immagini, video e altri media), i file CSS specificano lo stile di tale documento come, ad esempio, layout di pagina, colori e caratteri.

Per comprendere ancora meglio, è possibile pensare all'HTML come alle fondamenta di una casa e al CSS come all’insieme delle scelte di arredo.


Come funziona il linguaggio CSS?

Il linguaggio CSS si occupa sostanzialmente di stilizzare le pagine web interagendo con gli elementi in HTML. Gli elementi sono i singoli componenti HTML di una pagina Web, ad esempio un paragrafo, che in HTML appare così:

<p> Questo è un paragrafo. </p>

Se si vuole che questo paragrafo appaia rosso e in grassetto, è necessario utilizzare un codice CSS simile al seguente:

p {color: red; font-weight: bold; }

In questo caso, "p" (il paragrafo) è chiamato "selettore", ed è la parte del codice CSS che specifica a quale elemento HTML verrà applicato lo stile CSS.

Nel CSS, il selettore è posto alla sinistra della prima parentesi graffa. Le informazioni tra parentesi graffe sono chiamate dichiarazioni e contengono proprietà e valori che vengono applicate al selettore. Le proprietà sono elementi come dimensione del carattere, colore e margini, mentre i valori sono le impostazioni per tali proprietà. Nell'esempio sopra, "color" e "font-weight" sono entrambe proprietà, e "red" e "bold" sono valori.

Questi stessi principi di base possono essere applicati per modificare le dimensioni dei caratteri, i colori di sfondo, i rientri dei margini e altro, come nell’esempio body {background-color: blu; } (in questo caso, lo sfondo della pagina risulterebbe blu).


CSS : è meglio esterno, interno o incorporato?

A questo punto, è lecito chiedersi quali sia il modo migliore per incorporare il codice CSS al contenuto HTML di una pagina web.

Sostanzialmente, esistono tre modi per aggiungere un codice CSS alle pagine HTML. Il foglio di stile (o i fogli di stile), può essere :
  • esterno
  • interno
  • incorporato

I fogli di stile esterni vengono salvati come file .css e possono essere utilizzati per determinare l'aspetto di un intero sito web tramite un unico file. Per utilizzare un foglio di stile esterno, i file .html del sito devono includere una dichiarazione di collegamento al foglio di stile esterno che segue questo tipo di schema:

<head><link rel = "stylesheet" type = "text / css" href = stile.css "></ head>

Questa dichiarazione collegherà il file .html al foglio di stile esterno (in questo caso, stile.css) e tutte le istruzioni CSS in quel file verranno applicate alle pagine .html collegate.

I fogli di stile interni sono istruzioni CSS scritte direttamente nell'intestazione di una specifica pagina html. Un foglio di stile interno, a livello di codice, può essere inserito nel seguente modo :

<head>

<style>

body {background-color: black; }

p {font-size: 20px; color: white; }

</ style>

</ head>

In questo caso, stiamo comunicando la volontà di creare una pagina con sfondo nero e i cui paragrafi abbiano un carattere da 20px di color bianco.

Infine, i fogli di stile incorporati sono frammenti di CSS scritti direttamente nel codice HTML e applicabili solo a una singola istanza di codifica come, ad esempio,

<h1 style = "font-size: 40px; color: black;"> Questo è un titolo </h1>

In questo caso, avremmo un titolo H1 di color nero con un carattere da 40px.

In generale, i fogli di stile esterni sono il metodo più efficiente per l'implementazione di un codice CSS su un sito web, mentre i fogli di stile interni e quelli incorporati possono essere utilizzati quando è necessario apportare modifiche esclusivamente a pochi elementi.


JavaScript: cos’è e come funziona

JavaScript è un linguaggio di scripting utilizzato per creare e controllare contenuti dinamici dei siti web, ovvero, qualsiasi cosa che preveda un’animazione, un aggiornamento o un qualsiasi cambiamento che non renda necessario ricaricare manualmente a pagina. Si tratta sostanzialmente di caratteristiche quali:
  • grafica animata
  • presentazioni fotografiche
  • suggerimenti di testo con completamento automatico
  • moduli interattivi
Un modo ancora migliore per capire cosa fa il JavaScript è quello di pensare a determinate funzionalità web che vengono usate quotidianamente e che probabilmente si danno per scontate, come la cronologia di Facebook che si aggiorna automaticamente sullo schermo o come quando Google suggerisce termini di ricerca basati su alcune lettere digitate.


Automatizzare ed animare tramite Javascript

Come accennato in precedenza, il JavaScript è un "linguaggio di scripting". I linguaggi di scripting sono linguaggi di codifica utilizzati per automatizzare i processi che gli utenti dovrebbero altrimenti eseguire da soli. In assenza di questi script, qualsiasi modifica apportata alle pagine web richiederebbe il ricaricamento manuale della pagina o la navigazione in una serie di menu statici per accedere al contenuto desiderato.

Un linguaggio di scripting come il JavaScript svolge il suo lavoro comunicando ai siti web o applicazioni Web di compiere una determinata azione. Nel caso del JavaScript, ciò riguarda quelle funzionalità dinamiche descritte in precedenza. È lo "script" in JavaScript che fa accadere queste cose.

Poiché il JavaScript è parte integrante della funzionalità Web, tutti i principali browser sono dotati di motori integrati in grado di eseguire il rendering del JavaScript. Ciò significa che i comandi JS possono essere digitati direttamente in un documento HTML e i browser saranno in grado di capirli. In altre parole, l'utilizzo di JavaScript non richiede il download di programmi o compilatori aggiuntivi.


A cosa serve il JavaScript?

Ecco un breve elenco delle funzionalità per cui viene utilizzato il linguaggio JavaScript:
  • Aggiunta di interattività ai siti web: se si desidera che un sito sia più di una pagina di testo statica, è necessario eseguire alcuni JavaScript.
  • Sviluppo di applicazioni mobili: il JavaScript non è utilizzato solo nei siti web, ma viene impiegato anche per la creazione delle app per i dispositivi mobili.
  • Creazione di giochi basati su browser web
  • Sviluppo back-end: sebbene il JavaScript sia un linguaggio utilizzato principalmente per lo sviluppo del front end di un sito web, la sua flessibilità lo rende perfetto anche per progettare al meglio l'infrastruttura del back-end.

Come funziona il JavaScript?

Il JavaScript può essere incorporato direttamente in una pagina web oppure essere sfruttato in modalità file esterno con estensione .js.

L'aggiunta di codice JavaScript a una pagina web è un processo piuttosto semplice (e familiare se si ha dimestichezza con l’HTML e il CSS). Il codice JavaScript può essere aggiunto direttamente a quello della pagina utilizzando i tag <script></script> e assegnando loro l'attributo type text / javascript.

Come è facile intuire, a livello di inserimento del codice, il JavaScript e il CSS si somigliano molto, come è possibile constatare dal seguente esempio :

CSS:

<style>

{codice css}

</ style>


JavaScript:

<script type = "text / javascript">

(codice javascript)

</ script>


Il codice JavaScript può anche essere aggiunto a una pagina come file separato; lo script viene quindi scaricato ed elaborato nel browser di ogni utente, trasformandolo in oggetti dinamici visibili sullo schermo.
Cookie

Questo sito web utilizza cookie di terze parti

X
Questo sito utilizza cookie tecnici anonimi per garantire la navigazione e cookie di terze parti per monitorare il traffico e per offrire servizi aggiuntivi come ad esempio la visualizzazione di video o di sistemi di messaggistica. Senza i cookie di terze parti alcune pagine potrebbero non funzionare correttamente. I cookie di terze parti possono tracciare la tua attività e verranno installati solamente cliccando sul pulsante "Accetta tutti i cookie". Puoi cambiare idea in ogni momento cliccando sul link "Cookie" presente in ogni pagina in basso a sinistra. Cliccando su uno dei due pulsanti dichiari di aver preso visione dell'informativa sulla privacy e di accettarne le condizioni.
MAGGIORI INFORMAZIONI