Seleziona una pagina

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:

esempio pagina web html

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.

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: 

esempio sito web html-1

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:

esempio sito web html-2

Avrete un risultato tipo questo dove noterete come i colori ora definiscono la semantica del codice per una più immediata comprensione:

esempio sito web html-3

Ora salvate assicurandovi di aggiungere la corretta estensione alla fine del nome del file, ovvero “.html”:

esempio sito web html-4

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:

esempio sito web-html-5

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”.

esempio sito web-html-6

Salviamo di nuovo, aggiorniamo la pagina del browser ed ecco che ora comparirà sotto all’ultimo paragrafo questa immagine:

esempio sito web-html-7

Completato questo esempio ecco che potrete dire di aver costruito la vostra prima pagina html!

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.

Sito web HTML o CMS

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.

 

 

CONTATTACI!

[wprs-box]

Valutazione Digital Coach su Google
[index]
[index]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[index]
[index]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[index]
[index]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[i]
[i]
[i]
[i]
[13]
[13]
[13]
[13]
[12]
[12]
[12]
[12]
[10]
[10]
[10]
[10]
[11]
[11]
[11]
[11]
[14]
[14]
[14]
[14]
[15]
[15]
[15]
[15]
[16]
[16]
[16]
[16]
[17]
[17]
[17]
[17]
[18]
[18]
[18]
[18]
[19]
[19]
[19]
[19]
[13]
[13]
[13]
[13]
[12]
[12]
[12]
[12]
[10]
[10]
[10]
[10]
[11]
[11]
[11]
[11]
[14]
[14]
[14]
[14]
[15]
[15]
[15]
[15]
[16]
[16]
[16]
[16]
[17]
[17]
[17]
[17]
[18]
[18]
[18]
[18]
[19]
[19]
[19]
[19]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[i]
[index]
[index]
[i]
[i]
[index]
[index]