SITO WEB HTML
Cos’è HTML
HTML è l’acronimo del termine Hyper Text Markup Language che in italiano significa letteralmente linguaggio di marcatura ipertestuale. L’html non è a tutti gli effetti un codice di programmazione, bensì un linguaggio dichiarativo per marcare gli ipertesti che consente d’indicare come disporre il contenuto degli elementi all’interno di una pagina web.
Queste indicazioni vengono date attraverso degli appositi marcatori detti tag per dare una struttura agli ipertesti. L’idea consiste nel definire linguaggi basati su marcatori testuali, ovvero i tag, che permettono di descrivere le caratteristiche strutturali dei documenti. Ciascun tag contiene un’informazione di tipo strutturale con un significato semantico particolare che denota in qualche modo il testo a esso collegato.
Html non differenzia i caratteri maiuscolo e minuscolo, si definisce cioè un linguaggio “case insensitive”.
Esempio pagina sito web HTML completa
Ora vediamo un esempio di come è strutturata una pagina HTML che possa essere definita completa per costruire il nostro sito web html.
Come in ogni pagina di giornale, anche nelle pagine HTML viene usata una struttura che aiuta il lettore a comprendere ciò che vede. Ovvero ci sarà un titolo, del testo e delle immagini. Se l’articolo è piuttosto voluminoso potremo trovare dei sottotitoli che distinguono ogni argomento trattato, dunque troveremo sempre una gerarchia che ci aiuta ad acquisire il senso di quello che ci viene mostrato all’interno del nostro sito web html.
In una pagina HTML dovremo solo aggiungere dei cosiddetti tag, che serviranno al browser per interpretare il contenuto che dovranno far visualizzare. Ogni elemento avrà dunque un tag di apertura e un tag di chiusura (che si differenzia con il carattere “/“) e avrà questo aspetto: <tag>contenuto del tag</tag>.
Possiamo dire che i tag si comportano come dei contenitori e dovremo inizialmente imparare a riconoscerli per poter realizzare la nostra prima pagina web html. Per cominciare a comprenderli eccone un semplice esempio:
Tutte la pagine HTML presentano all’inizio il tag <html> che comunica al browser che tutto quello che c’è dopo può essere interpretato col linguaggio HTML (attualmente siamo allo standard HTML5).
All’interno del tag <html>, appena sotto troviamo i tag <head> e <body>.
Il marcatore <head> contiene tutti quei dati che danno informazioni al browser ma che non vengono mostrati a schermo. Qui sopra abbiamo inserito ad esempio il tag <meta>, dove indichiamo all’interprete html che in questa pagina usiamo una codifica dei caratteri standard UTF-8. In questo tag troviamo una struttura diversa rispetto agli altri, difatti qui vediamo come ad un marcatore possiamo associare delle informazioni aggiuntive, questo grazie alla coppia nome (charset) e valore (utf-8). Di seguito c’è <title> che assegna il titolo alla finestra del browser che visualizziamo e che, oltre ad aggiungere significato all’intera pagina del nostro sito web html.
Più in basso troviamo <body>, all’interno del quale andremo a inserire tutto quel contenuto che vogliamo rendere visibile nella finestra del browser.
I tag <h1> e <h2> rappresentano i titoli di primo e secondo livello, possiamo scendere fino a <h6>.
Il titolo di primo livello <h1> potrà essere utilizzato una sola volta all’interno della pagina web del nostro sito html, in quanto esso comunica al browser il titolo di tutto il contenuto della pagina e creerebbe dei conflitti anche a livello d’indicizzazione. Gli altri possono invece essere usati a piacimento.
Infine il marcatore <p> sta per paragrafo e contiene tutto il testo che da sostanza al discorso di un articolo.
L’esperto in grado di capire e usare il codice HTML di un sito è il SEO Specialist.
Scopri con un test se questa professione è in linea con le tue attitudini
Come creare una pagina web HTML
Per creare la vostra prima pagina web HTML del vostro sito basterà aprire semplicemente Blocco note (per gli utenti Windows, oppure TextEdit (per chi ha MacOS), scrivere all’interno del documento tutti i tag e salvare il file con estensione “.html”, in alternativa potete utilizzare l’editor di testo Notepad++ per Windows o Brackets per MacOs, entrambi open source, scaricabili gratuitamente, nonché pienamente personalizzabili.
Gli strumenti necessari
Dopo aver scaricato il vostro editor preferito, potete procedere aprendolo e creando il primo file del vostro sito web html:
Una volta creato il file copiate il codice dell’esempio precedente sulla vostra pagina html, vi dovrà comparire una schermata tipo questa in basso. Su Brackets per visualizzare correttamente e subito il linguaggio andate a selezionarlo nella barra in fondo a destra:
Avrete un risultato tipo questo dove noterete come i colori ora definiscono la semantica del codice per una più immediata comprensione:
Ora salvate assicurandovi di aggiungere la corretta estensione alla fine del nome del file, ovvero “.html”:
Il file ora sarà già pronto e compatibile per il vostro browser. Raggiungete la cartella dove l’avete salvato e fate doppio click, comparirà una schermata del genere:
A questo punto introduciamo un’immagine con il tag <img>. Questo marcatore, non ha bisogno del tag di chiusura, basterà indicare al suo interno il percorso dove far recuperare l’immagine utilizzando l’attributo “src”.
Salviamo di nuovo, aggiorniamo la pagina del browser ed ecco che ora comparirà sotto all’ultimo paragrafo questa immagine:
Completato questo esempio ecco che potrete dire di aver costruito la vostra prima pagina html!
La realizzazione di siti in HTML non è l’unica competenza del SEO Specialist.
Scoprile tutte scaricando la guida
Perché HTML
Html nasce dalla necessità di disporre un sistema intuitivo per la gestione d’informazioni connesse tra loro, che potesse essere impiegato da una vasta gamma di computer. La prima versione di html fu resa pubblica ufficialmente nel giugno del 1993 dal lavoro di Tim Berners-Lee oggi dirigente del World Wide Web Consortium e Robert Caillau co-inventori del linguaggio html.
Sviluppo e obiettivi
Ciò che ha smosso nel 2006 il World Wide Web Consortium W3C (organizzazione internazionale nata nel 1994 che sovraintende alla definizione delle specifiche dei protocolli e delle linee guida che riguardano il word wide web) a prendere parte allo sviluppo di HTML5 è stata la necessità di fornire quelle funzionalità che erano ottenibili attraverso l’impiego di estensioni proprietarie all’interno del browser come Adobe flash. Un secondo obiettivo era di garantire una maggiore compatibilità tra i diversi browser, indipendentemente dalla piattaforma software utilizzata e dalle differenti tipologie di dispositivi presenti sul mercato in particolar modo quello mobile. Dunque, html5 è supportato da tutti i sistemi operativi, browser e dispositivi mobili, raggiungendo l’obiettivo di creare un linguaggio che consentisse l’interscambio di documenti ipertestuali in maniera indipendente dalle piattaforme.
Attualmente è arrivato alla versione cinque e rappresenta solo l’ultimo passo di un’evoluzione, conservando sempre la sua naturale semplicità d’utilizzo, adattandosi alle nuove esigenze di comunicazione e pubblicazione all’interno d’internet arrivando a includere specifiche non strettamente collegate al markup ma anche alla definizione degli stili (CSS), di linguaggi client side (ECMScript, Javascript) e protocolli.
Ti piacerebbe specializzarti nella SEO e avviare un tuo business da consulente?
Iscriviti al webinar e scopri da dove iniziare
Sito web HTML o CMS
Quando si deve realizzare il proprio sito web ci si trova davanti a un bivio: è meglio farlo in HTML o propendere per un CMS? Sia che si tratti di un sito web aziendale che di un blog personale entrambe le scelte hanno vantaggi e svantaggi. Vediamoli nel dettaglio.
Sito web html pro
È sicuramente la strada più difficile ma completa per realizzare un sito web, quella che alla fine darà più soddisfazione in quanto vi permetterà di creare siti molto complessi con un massimo livello di personalizzazione: dalla scelta del colore, le immagini e i contenuti. Tutto su misura. Realizzerete ciò che vorrete senza imporre limiti alla fantasia e dovervi adattare a strutture standard preconfezionate.
Per creare un sito in html basta utilizzare un semplice editor di testo ad esempio Blocco Note o Notepad++, in alternativa si possono usare software più professionali in modalità WYSIWYG.
Sito web HTML contro
Costruire un sito web in html richiede molto più tempo per la realizzazione, passione, costanza e una buona padronanza del codice html. Le future modifiche del sito necessiteranno di attenzione con dei costi di sviluppo maggiori per il cliente da parte dei programmatori.
Cms pro
Il CMS è un sito dinamico di gestione dei contenuti che non richiede alcuna conoscenza di html ma solo nozioni d’informatica di base e permette all’autore del sito o a chi lo gestisce/amministra di lavorare sulla creazione, modifica e rimozione dei contenuti senza intervenire direttamente sul codice. A una buona gestione del SEO ed è sicuramente la scelta più rapida e migliore per chi non ha dimestichezza con i linguaggi web. Tra i CMS più conosciuti citiamo: WordPress, Magento, Drupal, Prestashop e Joomla.
Cms contro
Nonostante le numerose opportunità di personalizzazione i CMS hanno purtroppo dei limiti di progettazione
I siti creati con un CMS necessitano di una maggiore memoria rispetto a quelli scritti in html, inoltre non sono adatti per creare siti web complessi o che richiedono particolari funzionalità in quanto obbliga/necessita di una scrittura di elementi grafici fissi e non modificabili che richiede di adattarsi a quello che viene messo a disposizione. Essendo un sistema open source se non si è attenti e non si aggiorna regolarmente il CMS si può essere a rischio di attacchi hacker sul proprio sito.
Per capirne di più su come creare un sito in HTML, contatta un esperto.
Ti guiderà nell’acquisizione delle competenze necessarie