Come creare un sito da zero e tutto da soli

Visita anche Risorse per i webmaster
archivio di risorse per la creazione di pagine web

La guida che vi aiuta a creare un sito web da zero e da soli, anche se non l'avete mai fatto prima.

Ingredienti necessari:

Un pò di intraprendenza
Un pò di entusiasmo
Un pò di puntiglio

Risultato:
Tanta soddisfazione e....(lo crederesti?)....ti potrai anche divertire..
Desideri un sito veramente tuo, senza dipendere da nessuno? Oppure, semplicemente, vuoi imparare le basi per costruire una pagina web?
Beh, allora sei nel posto giusto. Continua a leggere questa guida....

Probabilmente, qualunque principiante scarta, a priori, l'ipotesi di costruire un sito completamente da solo, considerando tale opera come feudo esclusivo di chi possiede grandi competenze. La mia convinzione è, invece, che tutto si possa imparare e che la cosa migliore sia imparare lavorando. Premessa: per lavorare su pagine html, la prima raccomandazione è quella di utilizzare un browser professionale che sia dotato di tutta la strumentazione necessaria e, soprattutto, che sia evoluto e aggiornato per tutti i tipi di programmazione. Firefox è il browser per eccellenza in questo campo.

https://www.mozilla.org/it/firefox/new/

Una volta preparato il sito su desktop, tutti i file dovranno essere trasferiti su uno spazio hosting via FTP (File Transfer Protocol).
Esistono dei programmi appositi per effettuare il trasferimento, come questi:
Filezilla
Cyberduck
Devo sottolineare, per la mia esperienza, che non tutti servizi di hosting forniscono un file manager con editor adeguato alla gestione di un sito senza CMS. Tra quelli idonei, posso consigliare "Ergonet", hosting italiano con un'ottima assistenza e prezzi convenienti.

Procediamo....

Sommario:

L'URL di un sito web

L' URL (Uniform Resource Locator), chiamato, normalmente, indirizzo web, è l'indirizzo di un sito, o di una pagina, o di un file specifico.
Solitamente, l'URL del nome a dominio corrisponde alla home page del sito.

L' URL del sito non è il nome a dominio, ma lo contiene.

Esempio:
https://www.lachiavenelpozzo.com
il nome a dominio è lachiavenelpozzo.com

L'URL di una pagina web (o di un file) contiene l'url del sito, seguito da uno slash e dal percorso.
Esempio:
https://www.lachiavenelpozzo.com/cartella/pagina
Leggi anche l'argomento "Il percorso dei file" nella pagina La struttura del sito

L'URL è introdotto dal protocollo https, Hypertext Transfer Protocol Secure (letteralmente: protocollo sicuro di trasferimento per ipertesti). Il protocollo fornisce la sicurezza per la comunicazione da browser a server e viceversa.

Come scrivere una pagina web

Per imparare a sviluppare un sito web, bisogna apprendere le basi che permettono di costruire in maniera corretta una pagina html e da qui inizieremo.

IMPORTANTE!! Per poter lavorare con i file è necessario che il vostro computer sia impostato per la visualizzaziome delle estensioni dei file. Un file txt, per esempio, dovrà avere il titolo seguito dalla sua estensione .txt
Per visualizzare le estensioni dei file su windows, andate in esplora risorse, o risorse del computer, poi in visualizza e mettete la spunta su "mostra le estensioni dei file".
Su Mac, dal Finder cliccate su impostazioni, poi avanzate e mettete la spunta su "Mostra tutte le estensioni dei nomi dei file".

Iniziamo aprendo sul deskto un semplice file di testo .txt.
Importante uscire dallo schema mentale della pagina web così come la si vede nell'anteprima del browser per capire che, in realtà, è costituita da un codice scritto e compilato in modo ben definito.
Rinominate il file.txt chiamandolo, per esempio, "ilmioprimosito.txt". Quando rinominate un file, è buona regola usare sempre lettere minuscole e non lasciare spazi tra le parole.
Aprite il file e incollateci questo codice:

<html>
<head>
<title>Il mio primo sito</title>
</head>
<body>
Questo è il contenuto del mio primo sito
</body>
</html>

Da notare che la e accentata viene inserita tramite il suo codice nominale. Gli accenti, come anche altri caratteri speciali, devono essere sempre inseriti tramite il loro codice nominale, o carattere unicode, per garantire la corretta visualizzazione con tutti i browser.
Vedi più per l'editor HTML consigliato.

Ora, modificate l'estensione del file da .txt a .html.

NOTA: non tutti gli editor di testo sono predisposti per l'interpretazione di un codice HTML. Alcuni editor, per esempio, non incolonnano il codice in modo corretto oppure causano errori inserendo spazi e modificando l'ortografia.
Vi indico alcuni editor conosciuti e affidabili, ma ce ne sono molti altri:

Brackets (anche italiano)
AGGIORNAMENTO: Dal 1 settembre 2021 Brackets non viene più supportato. Al suo posto viene raccomandato l'uso di "Visual Studio Code".
Possibile anche installare un'estensione per avere le stesse scorciatoie da tastiera di Brackets e altre funzioni.

NOTA: la scrittura in un file vuoto, con Visual Studio, può risultare bloccata. Per sbloccarla, bisogna andare nelle estensioni e disabilitate il plugin nominato "Vim".
Per la scelta della lingua: control/command + shift (maiuscole) + P -> Configure display language.

Visual Studio Code Lingua italiana per Visual Studio Code
Atom (in inglese)
Sublime Text (in inglese)

Per quanto riguarda la conversione del testo in linguaggio HTML, invece, ci sono degli editor studiati appositamente per gli sviluppatori.
Uno dei più utilizzati è Froala:
https://github.com/froala/wysiwyg-editor
NOTA: l'utilizzo di Froala su desktop è libero, solo chi vuole caricarlo su uno spazio hosting deve acquistare la licenza.
Dopo ave scaricato e scompattato il file zip contenente il programma, cercate la cartella "html" e al suo interno la cartella "br_modes" che contiene il file html da aprire nel browser per visualizzare le diverse tipologie dell'editor, quindi, aprite nel browser il file "enter_br.html.

Se volete, potete scaricare la mia versione per desktop semplificata e ottimizzata per l'uso.

Andiamo avanti.
Aprite, quindi, il file ilmioprimosito.html nel vostro browser, cliccando sul file con il tasto dx e scegliendo "visualizza con ....". Apparirà questa schermata:
(potete aprire un file html nel browser anche con i comandi da tastiera - Per Win: ctrl+o - Per Mac: command+o)

Questa è la vostra prima pagina web, essenziale, senza alcun layout. Come potete vedere in alto, nel browser appare il titolo che avete dato al sito e, sotto, il testo che avete inserito nel contenuto.

Parlando di contenuto, intendo sempre il contenuto visibile aprendo la pagina nel browser.

Analizzando il codice che avete scritto, vedete che ci sono dei tag, cioè dei marcatori, dei contenitori che devono sempre essere aperti e poi richiusi. I tag sono sempre racchiusi nei simboli <> e la barra / ne indica la chiusura. Vediamo i principali:

I tag principali e richiesti

Il tag <html> (HyperText Markup Language) indica il linguaggio di markup usato per la formattazione e impaginazione di pagine web e si trova all'inizio e alla fine della pagina con la sua chiusura (</html>), quindi sarà sempre il primo e l'ultimo.

Il tag <head> (testa), con la sua chiusura </head>, è il contenitore di tutte le informazioni relative alla pagina, come titolo, fogli di style, metatag ecc. Le informazioni all'interno del tag <head> non sono visibili nel contenuto.

Il tag <title> (titolo), con la sua chiusura </title>, si trova all'interno dei tag <head></head> e contiene il titolo della pagina, che non è il titolo che apparirà nel contenuto, bensì quello che il browser interpreta e fa apparire nei risultati di ricerca (vedi immagine sopra).

Il tag <body> (corpo), con la sua chiusura </body> si trova dopo il tag di chiusura </head> e racchiude il contenuto visibile della pagina (testo, immagini ecc.), ma può contenere anche script e regole di stile.

All'interno del tag <body> possono essere presenti altri tag importanti:

Il tag <nav> (navigazione), con la sua chiusura </nav>, che contiene, di solito, la barra di navigazione e viene spesso inserito all'interno dell'header.
Il tag <header> (intestazione), con la sua chiusura </header>, che contiene, solitamente, l'intestazione della pagina.
Il tag <footer> (piè di pagina), con la sua chiusura </footer>, che rappresenta la parte finale della pagina.
Il tag <aside> (di lato), con la sua chiusura </aside>, che racchiude, se presente, il contenuto della barra laterale.

Per approfondimento, leggi: La pagina perfetta

I tag semantici

I tag semantici (semantica= scienza dei significati) sono quelli che servono per definire meglio i contenuti per i motori di ricerca. Anche i tag utilizzati per indicare le sezioni principali dei contenuti di una pagina sono tag semantici (header, footer, aside).
I tag semantici, introdotti con HTML5, stanno acquistando importanza per favorire il posizionamento del sito. Eccone alcuni tra i principali:

header - definisce la zona dell'header (intestazione) e, solitamente, contiene anche il nav
nav - definisce la barra di navigazione. Nota: il nav non dovrebbe contenere tante voci, ma solo i collegamenti principali ed essenziali. In genere, non più di 5/6 voci
main - definisce il contenuto principale pulito, non deve contenere, quindi, altri tag semantici.
section - definisce una sezione e deve contenere una sua intestazione
article - definisce un articolo indipendente e autonomo e deve contenere una sua intestazione
details - definisce dei dettagli aggiunti
figure - definisce contenuti autonomi, come immagini, diagrammi, ecc
figcaption - definisce una didascalia su un'immagine
summary - definisce un sommario
mark - definisce un testo evidenziato
time - definisce una data e/o un orario
aside - definisce un contenuto separato dal contenuto centrale della pagina (es. la barra laterale)
footer - definisce la zona del footer

Per approfondimento:
HTML Semantic Elements

Qualche indicazione in più sui tag "section" e "article":

Il tag <section> è un contenitore generico per un tema definito (specifica W3C: "Una sezione è un raggruppamento tematico di contenuti"). Vale a dire che conterrà degli elementi che sono collegati tra di loro perchè figli di un argomento principale. Immaginiamo i capitoli di un libro, ognuno di essi ha un senso solo se esistono anche gli altri. Se cancellassimo tutti i capitoli e ne lasciassimo uno solo, esso non avrebbe alcun senso. Il tag section, quindi, può essere utilizzato per separare le sezioni di una pagina che tratta un determinato e specifico argomento, ma anche, per esempio, nella home page per elencare i contenuti del sito.

Il tag <article> è un contenitore autonomo e indipendente dagli altri elementi della pagina (specifica W3C: "componente di una pagina Web che delimita un contenuto indipendente (self-contained), riutilizzabile e distribuibile"). Qualcosa che potrebbe esistere e avere un significato indipendentemente dall'argomento trattato nella pagina stessa. Immaginiamo la testata di un giornale che contiene tanti articoli, ognuno dei quali è autonomo, cioè contiene un suo titolo, una sua descrizione, dei link ecc. Anche se fosse solo nella pagina, esso continuerebbe ad essere completo e a se stante. Il tag article può essere utilizzato, quindi, per contenere un post, un commento, o una serie di notizie non collegate tra di loro.

Il tag section può contenere il tag article e viceversa, sempre nella logica di quanto spiegato.

Perchè e quando utilizzare questi tag? Quando si desidera definire meglio i contenuti per i motori di ricerca e indicarne l'importanza.

Esempio semplice di implementazione del tag <article>:

<article>
<h1>Titolo</h1>
<p>Data di pubblicazione: <time pubdate="pubdate">11-08-2017</time></p>
<p>Cras vitae sodales tellus. Praesent leo nulla, gravida id felis eget, pharetra pellentesque massa. Sed congue ante eget dignissim ullamcorper. Ut sit amet lacinia lacus. Nunc molestie massa fringilla sodales ornare.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In maximus blandit est, eu auctor tellus rutrum ut. Cras laoreet cursus odio, maximus tempus mauris venenatis et. </p>
</article>

IMPORTANTE! Il tag section e il tag article devono contenere sempre un'intestazione (heading: h1, h2....ecc). Qualora mancasse, il validatore lo segnalerà come errore.
Nota: se i filtri di sicurezza del vostro server impediscono la scansione, potete provare con questa versione del validatore: https://validator.w3.org/nu/

Div, span e p

Sempre all'interno del <body> possono essere collocati i tag <div> (divide), cioè dei divisori per separare le diverse zone e racchiudere contenuti con determinate caratteristiche.
Immaginiamo, per esempio, un div principale "content" (contenuto) in cui vogliamo racchiudere il contenuto visibile, cioè testo, immagini ecc che compongono l'articolo.
<div class="content"></div>
I div sono dei contenitori e, come tali, devono sempre avere la chiusura </div>. Fate molta attenzione a questo, perchè un contenitore non correttamente chiuso può pregiudicare la correttezza dell'intero codice della pagina.
I div possono essere creati in un numero illimitato e nominati come credete.
Vengono identificati attraverso un ID (identificativo), o una classe.
Esempio:

<div id="pippo"></div>
<div class="pippo"></div>

Quale è la differenza? Che l'id è univoco, identifica un div specifico e solo quello, mentre la classe identifica una categoria di div con le medesime caratteristiche. Vedremo poi l'importanza di questo per impostare le regole nel foglio di stile.

Altri tipi di divisori/contenitori sono <span> e <p> (paragrafo). La prima differenza è che div e p sono elementi di blocco, mentre span è un elemento inline. Nello specifico: div causa solo il ritorno a capo, p causa il ritorno a capo ed un'interlinea vuota, span non causa alcun ritorno a capo. Inoltre, p e span sono dei tag specifici per il testo, mentre il div è un contenitore generico.
Anche per span e p valgono le regole di identificazione descritte per il div.

Ecco la rappresentazione grafica di base di una pagina web classica:

Proseguiamo con la nostra guida e facciamo un passetto in più. Aprite il vostro file .html con l'editor di testo. Al posto del codice usato prima, incollate quest'altro codice:

<!DOCTYPE html>
<html>
<head>
<title>Il mio primo sito</title>
</head>
<body>
<h1>Titolo pagina</h1>
<p>Questo è il contenuto del mio primo sito</p>
<p>State leggendo la prima pagina
<br><a href="https://www.lachiavenelpozzo.com">La chiave nel pozzo</a></p>
</body>
</html>

Aprite, come prima, il file e questa è l'immagine che vi restituirà il browser:

Facciamo ancora meglio posizionando i tag semantici di cui abbiamo già parlato:

<!DOCTYPE html>
<html>
<head>
<title>Il mio primo sito</title>
</head>
<body>
<header>
<nav></nav>
<h1>Titolo pagina</h1>
</header>
<main>
<h2>Sottotitolo</h2>
<p>Questo è il contenuto del mio primo sito</p>
<p>State leggendo la prima pagina
<br><a href="https://www.lachiavenelpozzo.com">La chiave nel pozzo</a>
</p>
</main>
<footer></footer>
</body>
</html>

Abbiamo aggiunto anche dei nuovi contenuti nella pagina, vediamo quali:

I link

Un link (collegamento) è costituito da un testo, o un'immagine cliccabile che consente l'apertura di una nuova pagina web.
Si scrive in questo modo:
<a href="URL pagina">Testo</a>
Oppure, per un'immagine:
<a href="URL pagina"><img src="URLimmagine"></a>

Le intestazioni

Il tag <h1> definisce l'intestazione primaria della pagina. Ci sono poi gli altri tag che definiscono intestazioni secondarie in gerarchia di rilevanza. I tag per le intestazioni sono utilizzati per il titolo principale della pagina e per i sottotitoli.
Sono questi: <h1> - <h2> - <h3> - <h4> - <h5> - <h6>.
I primi tre sono i tag più usati. Sopra e sotto un'intestazione, c'è sempre un margine preimpostato che può essere eliminato o modificato con regole di stile.
Se non differentemente impostato dalle regole di stile, il browser applica, a questi tag, anche la dimensione del font a scalare, in sequenza e il testo appare in grassetto.

Questa scrittura ..

<h1>Intestazione 1</h1>
<h2>Intestazione 2</h2>
<h3>Intestazione 3</h3>
<h4>Intestazione 4</h4>
<h5>Intestazione 5</h5>
<h6>Intestazione 6</h6>

.. produce questo risultato visibile:

Intestazione 1

Intestazione 2

Intestazione 3

Intestazione 4

Intestazione 5

Intestazione 6

La rilevanza dei tag di intestazione è superiore a quella di altri tag presenti nella pagina.
In una pagina web, ai fini SEO, non dovrebbe mai mancare l'intestazione in h1. Qualora al posto del titolo testuale si utilizzasse un'immagine, dovrebbe essere, anch'essa, racchiusa nel tag h1, con il suo tag alt di descrizione, al fine di definire che si tratta del titolo principale della pagina.

Es: <h1><a href=""><img src="" alt=""></a></h1>
La presenza del tag ALT, sempre importante, diventa, in questo caso, fondamentale.

Nota:La gerarchia di questi tag va rispettata, nel senso che in ogni pagina ci deve un solo titolo h1 seguito da uno o più titoli h2, seguiti a loro volta da titoli h3 e via di seguito. Non è necessario che siano presenti tutti i tag, ma non bisogna saltare, ad esempio, dal titolo h1 al titolo h3 senza che ci sia tra di loro un titolo h2.

Altri tag

<b></b> = grassetto
<br> = a capo (self closing tag)
<img> = immagine (self closing tag)
<ul></ul> = elenco puntato
<ol></ol> = elenco numerato
<li></li> = voci in elenco

I tag "self closing" (chiusura automatica) non necessitano del corrispondente tag di chiusura. Nel caso delle immagini, il percorso viene inserito nel tag stesso (es: <img src="url immagine">.
Potreste incontrarli correlati da uno slash (</br> invece di <br>; <img src="url immagine"/>), non è scorretto, tuttavia lo slash non è necessario in HTML5.
Per conoscere le stringhe e i tag più comuni e utili per scrivere in html, potete consultare la guida: Come scrivere in html.

Qui trovate, invece, l'elenco di tutti i tag https://www.w3schools.com/tags/

Regole di inserimento dei tag

<h1>...<h6> non possono essere contenuti all’interno di <p>
<br /> può essere inserito all’interno di un qualsiasi
<a> può essere inserito in titoli, testi o elenchi puntati
<ul> ed <ol> non possono essere annidati in <p>

La dichiarazione di apertura

<!DOCTYPE html>
La dichiarazione di apertura, obbligatoriamente presente all'inizio del codice di ogni pagina html, serve ad informare il browser su tipo e versione di linguaggio usato, affinchè sappia come decodificarlo. Con l'avvento di HTML5, questa dichiarazione è stata semplificata e basta aggiungere, appunto, la dichiarazione <!DOCTYPE html>.
Leggi anche La pagina perfetta

Gli attributi

I tag HTML possono avere degli attributi. Gli attributi servono per definire le caratteristiche di un elemento. Gli attributi sono composti dal nome seguito da un uguale e dal valore messo tra virgolette.
Come sempre, il W3C (World Wide Web Consortium) raccomanda di usare lettere minuscole sia per il nome, che per il valore.

Principali attributi

class : associa una classe di stile all'elemento. Es: <div class="pippo"></div>
id : identifica univocamente un elemento all' interno della pagina HTML. Es: <div id="pippo"></div>
title : serve a mostrare un suggerimento (tooltip) al passaggio del mouse sul testo, o su un'immagine. Es: <h3 title="pippo">Testo</h3>
style : contiene le regole CSS all'interno dell'elemento (inline). Es: <div style=" color:red"></div>
width : definisce la larghezza reale, in px, di un elemento. Es: <img src="img.jpg" width="400">
height : definisce l'altezza reale di un elemento. Es: <img src="img.jpg" height="400">
lang : Indica la lingua del contenuto. Es: <p lang="it">ciao</p>
dir : permette di indicare al browser la direzione del testo. Può assumere due valori: ltr (da sx a dx, default) o rtl (da dx a sx). Es: <html dir="rtl">
draggable : (true, o false) stabilisce se un elemento può essere trascinato con drag and drop. Es: <div draggable="true"></div>

Il layout

La pagina, così com'è, non è molto attraente. Per disegnarla dobbiamo definire la struttura e la grafica del layout. Cos'è il layout? Il termine, tradotto in italiano, significa "disposizione" e rappresenta il modo in cui gli elementi vengono disposti nella pagina. Potete crearlo voi da zero, oppure utilizzare layout di base già pronti per chi è alle prime armi, o ha poco tempo.
Potete scaricar subito questo essenziale "layout di base" per continuare a seguire la guida applicando ciò che state imparando.
In seguito, se lo desiderate, potrete registrarvi alla membership per scaricare quelli più avanzati proposti: Layout di base.

Importante conoscere la differenza tra layout fisso e layout responsive.

Il layout fisso è facile da realizzare, ma non permette l'ottimizzazione per i dispositivi mobili, ormai indispensabile.

Il layout responsive è quello di nuova generazione che si adatta a tutte le dimensioni dello schermo, permettendo l'ottimizzazione per i dispositivi mobili.

Se la guida ti piace, spendi un minuto per condividerla e sostenere il sito: Condividi su Facebook)

Come si scompatta un file zip

Puntualizzo questo particolare, anche se ad alcuni può sembrare superfluo, perchè è importante aprire correttamente il file zip contenente i file di un template, o di un sito web, al file di poter visualizzare, da desktop, l'anteprima delle pagine, o il codice.

Cliccate sul link per il download
Scegliete dove scaricare il file zip (desktop o cartella)
Scompattate il file zip con il programma idoneo che preferite
Aprite la cartella scompattata
Cliccate con il tasto destro sui file html e scegliete, dal menù contestuale, se aprirli con il browser per vedere l'anteprima, oppure con un editor per visualizzarne il codice
Cliccate con il tasto destro sui file css o js e scegliete, dal menù contestuale, di aprirli con un editor per visualizzarne il codice

Aprire il file zip direttamente dal browser serve solo ad esaminarne il contenuto, ma non permette di lavorare correttamente con i file.

Andiamo avanti....

Le regole di stile

Le regole di stile impostano le dimensioni, i colori e l'aspetto grafico in generale di una pagina web e degli elementi che la compongono. Le regole di stile possono essere poste sia nella zona head che nella zona body, ma, di norma, si mettono nella zona head del codice html, dato che servono al layout della pagina e devono, quindi, essere caricate subito. Devono essere racchiusa tra <style> e </style>.

In pratica, la pagina web prende questa struttura:

<html>
<head>
<style>
Qui incollate il codice CSS
</style>
</head>
<body>
Qui incollate il codice html del contenuto visibile
</body>
</html>

Può essere anche incluso tramite file esterno. Per approfondimento: CSS e JS

I commenti all'interno dei codici

Argomento non trascurabile. Per commenti si intendono le varie indicazioni contenute in un codice (html, css, js) che servono allo sviluppatore per facilitare il proprio lavoro e/o per dare chiarimenti a terzi.
È sempre utile e consigliato, ad esempio, separare e identificare le varie sezioni di un codice nominandole appropriatamente.

Nel codice HTML i commenti si scrivono tra i tag 
Nel codice CSS i commenti si scrivono tra i tag /*testo*/
Nel codice JS e PHP i commenti si scrivono tra i tag /*testo*/, oppure, per ogni singola riga, doppio slash iniziale //testo
Nel file htaccess le righe di commento si fanno precedere dal cancelletto #

I tag per i commenti si utilizzano anche per rendere inattive parti di codice che non si desiderano cancellare in maniera definitiva.

Bene, adesso sapete preparare la base di una pagina web. Un sito, però, è fatto di più pagine. Preparate, quindi, una cartella in cui contenere tutti i file che serviranno allo scopo e proseguite con la seconda parte di questa guida....

Continua con....La struttura del sito ->>

Elenco argomenti di questa sezione: