HTML per realizzare il layout del tuo sito

Perché è fondamentale conoscere HTML?

La sigla HTML è ormai entrata a far parte del linguaggio comune, ma spesso resta una sigla criptica, quasi una formula magica, priva di senso compiuto. Eppure, come ogni formula magica, il linguaggio HTML apre le porte di un mondo parallelo, virtuale: qui codec e dati si mostrano all’utente come le pagine web che visitiamo ogni giorno.
Grazie ad esso è infatti possibile impostare l’impaginazione e la grafica attraverso il tag di formattazione. Ma procediamo con ordine.

Cos’è il linguaggio HTML?

L’HTML è un linguaggio di markup, ovvero di formattazione, il più utilizzato nel web design.  La sua funzione, dunque, è di aggiungere struttura e contesto e curare la grafica. Nello specifico, esso organizza i contenuti come testi, immagini, suoni e video e fa in modo che il browser li disponga nel modo desiderato.

programmare html

L’apprendimento del linguaggio HTML è il primo passo da compiere per chi vuole affacciarsi al mondo della programmazione, ma presuppone una buona conoscenza dell’inglese. I comandi di base sono molto semplici, chiunque riuscirebbe ad approcciarsi senza troppa fatica. Tuttavia, se si vuole realizzare una struttura più articolata, è necessaria una conoscenza più approfondita. Inoltre saper utilizzare l’HTML renderà più semplice l’apprendimento degli altri linguaggi, come C++ o Python.

Ad oggi è in uso la versione HTML 5, le cui innovazioni hanno di gran lunga semplificato il lavoro del programmatore. Come? Vediamolo insieme.

Le novità più importanti dell’ HTML 5

Il Canvas

L’introduzione di nuovi elementi ha lo scopo di ridurre il ricorso a plugin esterni, sviluppati cioè da terze parti. Primo tra tutti questi elementi è il canvas, ovvero una “tela trasparente” all’interno della quale disegnare forme, linee, creare effetti sfumati e applicare le trasformazioni grazie alle specifiche API. Di fatto si tratta di un riquadro in cui ogni pixel è modificabile secondo le caratteristiche RGBA e la trasparenza.

Oltre agli attributi universali, i due specifici per il canvas sono “width” e “height”, grazie a cui è possibile modificarne le dimensioni.  

I tag <audio> e <video>

I tag <audio> e <video> costituiscono una nuova metodologia che, già in fase di progettazione, si prospettava come una rivoluzione destinata a lasciare il segno.
Infatti per richiamare un file multimediale basta utilizzare il tag appropriato e indicare l’estensione del file. I formati supportati per il video sono WebM, Ogg e MPEG4.

tag audio video html

Analogamente, nel caso della tag <audio>, HTML5 supporta tre formati: Ogg Vorbis, MP3 e WAV. Come nel caso dei contenuti video, è possibile eventualmente specificare più file codificati utilizzando codec differenti: sarà il browser a riprodurre quello supportato.

Applicazioni web operative in modalità “offline”

Le novità introdotte da HTML 5 hanno reso più facile lo sviluppo di applicazioni che per la visualizzazione di pagine offline. Cosa significa? Che il browser preleva tutti i file del sito e li “memorizza”. Ciò rende possibile l’utilizzo di una applicazione anche se si è disconnessi. Nel momento in cui si accederà di nuovo alla rete, l’applicazione aggiornerà in automatico i dati. Sembra un dettaglio di poco conto, ma in realtà è stata una grande conquista e soprattutto un vantaggio per chi si trova spesso in viaggio.

Geolocalizzazione

Altro importante elemento introdotto da HTML 5 è la geolocalizzazione, ovvero la possibilità di indicare ed eventualmente condividere la propria posizione.
Ci sono molteplici strumenti che lo rendono possibile: alcuni meccanismi sono molto approssimativi, altri estremamente precisi. Citiamo, ad esempio, l’indirizzo IP di volta in volta assegnato dal provider Internet, l’hot spot Wi-Fi utilizzato per la connessione, l’antenna alla quale è connesso lo smartphone, un dispositivo dotato anche di funzionalità GPS.

Realizzare una pagina HTML con Notepad

Adesso che abbiamo scoperto quali sono le nozioni basilari del linguaggio HTML possiamo lanciarci nella creazione di una pagina web. Se un professionista utilizza software più o meno complessi come Dreamweaver o Atom, chiunque può scrivere una pagina in HTML semplicemente con Notepad.
Basta aprire il programma e scrivere i seguenti codici:

codice html 5

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> ***       </TITLE>
<META name=”description” content=”***”>
</HEAD>
<BODY>

<p>Ciao Mondo</p>
***contenuto vero e proprio da visualizzare***
</BODY>
</HTML> 
          

Copiando questo schema basilare e sostituendo gli asterischi rispettivamente con titolo, descrizione della pagina e parole chiave si realizzerà la propria pagina web. Basta poi, nel momento in cui si procede con l’operazione di salvataggio, indicare l’estensione .html nel menù a tendina in corrispondenza della voce “salva come”. Se non dovesse comparire questa voce, selezionare “tutti i file” e indicare manualmente l’estensione nel nome del file. La pagina è ormai pronta: se si decide di aprirlo in formato blocco note, è possibile inserire o modificare contenuti; se si apre in HTML in automatico si vedrà la pagina sul browser.

Dentro il TAG BODY dovremmo inserire tutto il contenuto che vogliamo rispettando il codice di formattazione HTML che possiamo approfondire nel sito https://www.w3schools.com/html/default.asp

Per concludere

Abbiamo  visto insieme che con poche nozioni e qualche riga di codice, chiunque può in autonomia realizzare una struttura in HTML per le proprie pagine web. Certo, abbiamo esaminato insieme le funzioni principali perché sarebbe impossibile in questa sede indicare tutti i codec necessari per creare una pagina completa e funzionale. Ci sono differenti corsi per apprendere il linguaggio HTML: alcuni durano settimane, altri sono veri e propri corsi di laurea e durano anni. E inoltre, non dimentichiamo che pur conoscendo tutti i segreti del linguaggio HTML, non sempre è facile riuscire ad impostare in maniera funzionale il layout di un sito. A fare la differenza, anche in questo caso, è l’esperienza nel settore.

Pertanto, è sempre bene rivolgersi ad esperti. Creazionesitiwebcatania.it fa al caso vostro.

di Sara Privitera

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

whatsapp 2
messenger
telephone