Prima di parlare di come creare una pagina HTML attraverso questa guida introduttiva, facciamo un po’ di chiarezza sui vari linguaggi di programmazione web.

Disclaimer:

Attualmente sto imparando a convertire un file .psd in template WordPress, pertanto il mio livello di programmazione non è estremamente elevato. Tento a sottolineare questo fatto, poiché non ho la presunzione di definirmi un programmatore, ma piuttosto un designer della grafica e della user experience.

Un po’ di chiarezza sui linguaggi di programmazione

Prima di concentrarsi su come creare una pagina HTML, è bene capire che i linguaggi di programmazione per un sito web sono essenzialmente: HTML, CSS, JavaScript, SQL, PHP e Bootstrap.

Esistono molte varianti di ognuno di esso, ma le funzioni che ciascun linguaggio porta a termine, sono la quasi totalità.

Linguaggio HTML

Un codice HTML è un linguaggio di marcatura, che funziona per tag. Ogni tag rappresenta un contenuto diverso e all’interno ne viene rappresentata l’espressione.

In pratica si può dire che un codice HTML descrive in maniera grezza la disposizione dei contenuti e i contenuti stessi del sito che stiamo creando. Più avanti nella guida, potrai capire come creare una pagina HTML, utilizzando questo sistema di marcatura.

Linguaggio CSS

CSS è un linguaggio di stile che descrive i caratteri visuali di un sito web. Mostra quale sarà il font specifico per ogni tag, il colore dei caratteri, la grandezza dei contenuti e molte altre cose che hanno a che fare con la grafica. Il linguaggio CSS è essenziale per creare una pagina html ricca di stili visuali. 

HTML e CSS comunicano secondo il sistema sottostante.

– Lo stile può essere aggiunto all’HTML in tre modi:

• inline: un attributo style viene espresso all’interno del tag
• interno: attraverso un tag <style> viene richiamato un elemento del CSS
• esterno: utilizzando uno o più file esterni

Ricapitolando, quindi, un codice HTML è il linguaggio che descrive quali e come sono disposti i contenuti, mentre il CSS definisce lo stile degli stessi.

Si può creare una pagina HTML perfettamente funzionante con questi due linguaggi di programmazione. Tuttavia molto spesso si richiedono funzionalità più avanzate.

Linguaggio SQL

SQL, ad esempio, permette di creare, manipolare e gestire un database. Può creare query all’interno di un database, può recuperare dati, inserire record e collaborare con il database in moltissimi altri modi.

Linguaggi PHP e JavaScript

Molto spesso non è sufficiente capire come creare una pagina HTML, per ottenere un sito web in grado di rispondere a molte necessità. Quindi bisogna ricorrere ad altri tipi di linguaggi.

Molto utili per la realizzazione di pagine web più evolute, sono i linguaggi PHP e JavaSript.

Il primo è uno strumento necessario per rendere le pagine web dinamiche e interattive. La differenza sostanziale tra JavaScript e PHP risiede nel tipo di utilizzo del linguaggio.

PHP viene utilizzato “lato server”. Ciò significa che quando un utente effettua una ricerca inserendo un indirizzo internet, se la pagina contiene PHP, il risultato sarà che il server eseguirà il codice e poi invierà il risultato sotto forma di HTML al browser.

PHP quindi, è un linguaggio eseguito lato server, che permette di modificare un HTML a seconda delle necessità. Ad esempio, invece di cambiare l’orario in una pagina manualmente ogni secondo, PHP è in grado di far scorrere il flusso in maniera automatica.

JavaScript, invece, lavora su “lato client”. Ciò è essenziale per preservare l’interattività dell’utente con la pagine. Ad esempio, questo linguaggio permette di modificare un immagine, al passaggio del cursore, oppure permette di correggere l’errato inserimento di un valore all’interno di un campo (come una mail, inserita senza chiocciola).

PHP, dunque, viene eseguito su lato server, e permette di restituire un HTML interattivo in base alle necessità. JavaScript viene eseguito lato client, e modifica la pagina in tempo reale con l’utente.

Introduzione al linguaggio HTML

Di seguito riporto il codice per un piccolo, ma completo documento HTML. In questo caso, il browser che stai utilizzando riesce a farti visualizzare il codice puro, poiché ho dato direttive precise di farlo. Altrimenti, questo codice sarebbe stato interpretato e il risultato grafico sarebbe stato quello sottostante. Copiando questo codice e incollandolo in un documento di testo, potrai già dire di care capito come creare una pagina HTML. Tuttavia, questa pagina da sola non ha alcun significato, e ci sarà ancora molta strada da fare prima di renderla un progetto interessante.

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Titolo del paragrafo

Contenuto del paragrafo

[/feature_box]

Questo breve codice è essenziale per comprendere in maniera introduttiva – ma completa – tutti i principi, per creare una pagina HTML.

• <html>, <head>, <h1>, <title>,<body>,<h1>,<p> sono i tag del documento
• Quando un tag è concluso, prende questa forma: </>
• Doctype definisce che si sta trattando di un documento HTML
• il testo compreso tra <html> e </html> descrive il documento HTML
• il testo compreso tra <head> e </head> fornisce informazioni sul documento HTML
• il testo compreso tra <title> e </title> fornisce un titolo per il documento
  
• il testo compreso tra <body> e </body> descrive il contenuto della pagina visibile
  
• il testo compreso tra <h1> e </h1> descrive un titolo presente all’interno della pagina
  
• il testo compreso tra <p> e </p> descrive il contenuto della pagina
  
• oltre a questi ci sono molti altri tag, che forniscono informazioni e generano risultati differenti, ma il principio chiave non cambia
• oltre ai tag ci sono gli attributi: essi definiscono ulteriori informazioni riguardo un documento.

[feature_box style=”28″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Il browser restituirà come risultato visuale, solo i contenuti compresi tra <body> e </body>.

[/feature_box]

Come modificare un documento HTML

Per modificare o creare una pagina HTML consiglio di utilizzare il software open source BlueGriffon. Grazie a questo programma è possibile modificare il documento e vedere il risultato visuale. Tuttavia, è possibile creare una pagina HTML anche semplicemente con con un editor di testo come NotePad.

Il file dev’essere salvato come index.html

Ovviamente il documento HTML funziona richiamando gli allegati presenti all’interno del database.

Immagini: parte 1

Il database di un sito web, è un’insieme di cartelle in cui vengono conservati tutti i documenti e allegati essenziali al corretto funzionamento del sito web. Ogni immagine viene associata ad un particolare percorso, che nel caso di un sito web si traduce in URL.

All’interno del documento HTML, quindi, verranno indicati gli URL associati ad una particolare immagine, cosicché il browser, quando interpreterà il codice, andrà a pescare l’immagine all’intenro del database, restituendola come risultato visuale in una particolare posizione indicata nel codice HTML.

Headings

Gli headings sono i titoli di una pagina web. Si va per ordine di importanza. Il tag H1 è il più importante e di solito viene utilizzato come titolo dell’articolo o del post. Gli altri vengono utilizzati come sottotitoli, ecc.

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Titolo 1

Titolo 2

Titolo 3

Titolo 4

[/feature_box]

Paragraphs

I tags paragraphs definiscono il contenuto di ogni singolo paragrafo.

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Il contenuto del tuo paragrafo

[/feature_box]

Links

L’elemento più importante di una pagina web, dopo il testo, è sicuramente il link. Gran parte del web funziona tramite links, ognuno dei quali, permette di navigare all’interno delle varie pagine web dei siti e tra siti differenti.

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Visita il mio blog!

[/feature_box]

Immagini: parte 2

Come precedentemente descritto, le immagini vengono conservate all’interno di database. Ad ogni immagine è associato un percorso.

• l’alt delle immagini è il testo alternativo che viene associato ad ognuna di esse. Esso è di fondamentale valore per il lato SEO on page del testo. La parola chiave per la quale vogliamo posizionare il proprio contneuto dev’essere inserita nell’alt di ogni immagine, avendo l’accortezza di non creare query identiche.
• width e height sono rispettivamente larghezza e altezza dell’immagine in pixel.
  

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Attributi HTML

Di seguito alcuni dei principali attributi presenti in un codice HTML

[step_graphics style=”2″ color=””][step style=”2″ text=”1″ headline=”alt”]%3Cp%3EDefinisce%20il%20testo%20alternativo%20di%20un’immagine%3C%2Fp%3E%0A[/step][/step_graphics]
[step_graphics style=”2″ color=””][step style=”2″ text=”2″ headline=”href”]%3Cp%3ESpecifica%20l’URL%20di%20un%20link%3C%2Fp%3E%0A[/step][/step_graphics]
[step_graphics style=”2″ color=””][step style=”2″ text=”3″ headline=”src”]%3Cp%3ESpecifica%20l’URL%20in%20cui%20viene%20conservata%20un’immagine%3C%2Fp%3E%0A[/step][/step_graphics]
[step_graphics style=”2″ color=””][step style=”2″ text=”4″ headline=”style”]%3Cp%3ESpecifica%20lo%20sitile%20CSS%20di%20un%20elemento%3C%2Fp%3E%0A[/step][/step_graphics]
[step_graphics style=”2″ color=””][step style=”2″ text=”5″ headline=”title”]%3Cp%3EDefinisce%20ulteriori%20informazioni%20riguardo%20a%20un%20elemento%3C%2Fp%3E%0A[/step][/step_graphics]
[step_graphics style=”2″ color=””][step style=”2″ text=”6″ headline=”value”]%3Cp%3ESpecifica%20il%20valore%20di%20un%20elmento%3C%2Fp%3E%0A[/step][/step_graphics]

Come creare una linea orizzontale con HTML

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Linea orizzontale

Linea orizzontale

Fine

[/feature_box]

Formattazione del testo

Come sottolineare in neretto con HTML

Come scrivere in corsivo con HTML

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

<p><i>Testo in corsivo</i>.</p>

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Testo in corsivo

[/feature_box]

Come scrivere una parte di testo più piccola con HTML

Utilizzando il tag <small> all’interno di un titolo, si può ridurre le dimensioni di una parte del testo.

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

<h2>HTML <small>piccola</small> formattazione</h2>

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

HTML piccola formattazione

[/feature_box]

Come evidenziare in giallo con HTML

Per evidenziare in giallo una parte del testo, basta utilizzare il tag <mark>

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

<p>Il testo <mark>sottolineato in giallo</mark> </p>

[/feature_box]

Risultato ↓

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Il testo sottolineato in giallo

[/feature_box]

Come cancellare con una riga con HTML

Eliminare una parte di testo scritta precedentemente, sostituendola con una nuova

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

<p>Questo post è <del> fantastico </del> fa pena

[/feature_box]

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Questo post è fantastico fa pena

[/feature_box]

Come sottolineare con HTML

Per sottolineare è sufficiente il tag <ins>

Definire lo stile CSS di un documento HTML

Inserendo il tag <style> all’interno del <head> è possibile definire uno stile CSS per l’intero documento. In alternativa è possibile inserire un tag <style> in ogni elemento, oppure creare un documento CSS esterno al documento.

Vediamo il primo caso

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

This is a heading

This is a paragraph.

[/feature_box]

Vediamo il secondo caso

[feature_box style=”1″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

[/feature_box]

Risultato

[feature_box style=”3″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Questo è un titolo blu

[/feature_box]

Infine vediamo come definire uno stile speciale ad un singolo elemento. Questo sarà la composizione dell’HTML

[feature_box style=”undefined” alignment=”center”]

<!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>

<p>Testo normale.</p>
<p>Testo normale</p>
<p>Testo normale</p>
<p id=”p01″>Testo speciale</p>

</body>
</html>

[/feature_box]

Nota bene: “id” serve per un singolo elmento, mentre “class” per gruppi di elementi

Info utili riguardo a CSS

• style serve per definire lo stile di un elmento con il metodo inline
• <style> definisce l’internal CSS
• <link> serve per riferire uno stile CSS esterno al documento
• color serve per definire il colore di un testo
• font-family definisce il font
• font-size definisce la dimensione del font

Tutto quello che è stato descritto in questa pagina, non è sufficiente per creare una pagina HTML e CSS. Il massimo che si può fare con queste informazioni è creare una pagina bianca, con un po’ di testo, qualche immagine e alcuni link.

Tuttavia per competere con la concorrenza, è necessario creare progetti grafici di alto valore. Per ovviare a questo problema, ho ideato una guida completa alla realizzazione di sito web.

Come creare una pagina HTML, senza mettere mano al codice

Creare una pagina HTML partendo da una documento bianco, non è certo un compito semplice, soprattutto se la propria intenzione è quella di creare un contenuto grafico di alto valore.

Per fortuna esistono CMS open source come WordPress che permettono di creare un sito web senza bisogno di mettere mano al codice.

Di seguito una guida completa per creare un sito web o un blog con WordPress.

Vol.0 Marketing di nicchia: la scelta di un settore redditizio

Vol.1 Come scegliere il nome dominio

Vol.2 Hosting: significato e scelta

Vol.3 Come creare un sito con WordPress

Vol.4 Come indicizzare il proprio sito

Vol.5 Aumentare il traffico: SEO onpage

Vol.6 Aumentare il traffico sul sito: ottenere backlinks

Vol.7 Come creare una landing page

Risorse utili per imparare a creare una pagina HTML

W3School

Quando, molti anni fa decisi di imparare a creare una pagina HTML, iniziai da qui.

Mozilla Developer’s Section

Adatto a principianti fino a sviluppatori esperti.

Web Design Tuts

Tutorial gratuiti e a pagamento, a seconda delle necessità.

W3

Tutto su HTML5 e sui suoi ultimi sviluppi

[feature_box style=”28″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

Grazie per aver seguito questa guida fino alla fine. Il massimo che potresti fare, adesso, è condividere questo contenuto sui social. Mi regaleresti un sorriso!

[/feature_box]