Come creare un sito da zero tutto da soli

La guida passo a passo
La guida con la quale chiunque può creare un sito web da solo, anche chi non l'ha 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 a costruire un sito da zero, mattone su mattone?
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 in campo. Così ho deciso di avventurarmi in questa impresa e di trascrivere tutti i passi per permettere a chiunque di costruire e sviluppare un sito fai-da-te....e....credetemi.... non e` cosi` difficile come sembra.

Dopo aver imparato le basi, se vorrete, potrete risparmiare molto tempo e diventare veri webmaster acquistando il sito gia` pronto che ho preparato per voi. Si tratta di un sito "mobile friendly", in diversi modelli, corredato di tutte le funzionalita` necessarie (e anche qualcuna in piu`) per adattarsi, facilmente, alla visualizzazione sui dispositivi mobili. Lo trovate qui: Un sito gia` pronto per te.
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, soprattutto nella sua versione studiata apposta per gli sviluppatori del web.

Firefox developer edition

Una volta preparato il sito sul desktop, tutti i file dovranno essere trasferiti su uno spazio hosting via FTP (vedi: Come usare Filezilla).
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 indicare "Ergonet", hosting italiano con un'ottima assistenza e prezzi convenienti.

Procediamo....
Sommario:

Come creare una pagina web:

Per imparare a "scrivere" un sito web, bisogna apprendere le basi che permettono di strutturare, in maniera corretta, una pagina html. Iniziamo, quindi, a comprendere questo. Pronti....via!

Aprite un nuovo file di testo. Sì, un semplice file di testo .txt. Perchè lo aprite? Per capire che creare una pagina html, di base, è davvero una cosa molto semplice. Intanto, dovete uscire dallo schema mentale di una pagina web come la vedete, in anteprima, nel browser e capire che, in realtà, è costituita da un lungo codice scritto.

NOTA: non tutti gli editor di testo sono adatti per scrivere in html. Alcuni editor non incolonnano il codice in modo corretto oppure causano errori inserendo spazi e modificando l'ortografia. Il mio consiglio è di usare un editor come questi:

Notepad 
Sublime Text

Andiamo avanti. 
Rinominate il file .txt, chiamandolo, per esempio, "ilmioprimosito.txt". Nominando i file, è buona regola usare sempre lettere minuscole e non lasciare spazi tra le parole, questo vi preserverà da errori futuri.
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>

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

Se non lo avete ancora fatto, dovete impostare la visualizzazione delle estensioni dei file nel pc; leggete qui:

Per Windows: http://support.microsoft.com/kb/865219/it.

Per Mac: https://support.apple.com/kb/PH19072?locale=it_IT

Aprite, quindi, il file.html nel vostro browser e apparirà questa schermata:
(potete aprire un file html nel browser anche con i comandi da tastiera - Per Win: ctrl+o - Per Mac: command+o)
Come creare un sito da zero
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, da ora in poi, intenderò sempre e solo ciò che è visibile aprendo la pagina nel browser, come quello che leggete, ora, in questa stessa pagina che scrivo.

Analizzando il codice che avete scritto, vedete che ci sono dei tag, cioè dei marcatori, che si aprono e si chiudono come fossero delle scatole. I tag sono sempre racchiusi nei simboli <> e la barra /, messa prima di un tag, ne indica la chiusura. Vediamo i principali:


I tag principali:

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, quindi sarà sempre il primo e l'ultimo.

Il tag <head> (testa) è 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) 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) si trova dopo il tag  di chiusura </head> e racchiude il contenuto della pagina. Tutto quello che scriverete al suo interno apparirà come ciò che leggete e vedete, ora, in questa pagina.

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

  • Il tag <nav> (navigazione) che contiene la barra di navigazione e che può anche essere inserito all'interno dell'header qualora il layout lo richieda.
  • Il tag <header> (intestazione) che contiene, appunto, l'intestazione del sito. Può essere il nome testuale, oppure il logo.
  • Il tag <footer> (piè di pagina) costituisce la parte più bassa del sito.
  • Il tag <aside> (barra laterale) che racchiude la parte di contenuto della barra laterale, se questa dovesse essere presente.


Sempre all'interno del tag <body> possono essere collocati dei <div> (divisori) per separare le diverse zone,per esempio:
  • Il div "content" (contenuto) che, lo dice la parola, racchiude il contenuto vero e proprio, cioe` testo, immagini ecc che compongono l'articolo che state scrivendo.
I contenitori, div, possono essere creati in un numero illimitato e nominati come credete. Vengono identificati attraverso il loro ID (identificativo), o una classe.
Esempio:

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

Quale è la differenza? Che l'id 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.

La struttura di base di un sito è fissa e si ripete sempre in ogni pagina web.

Questa è la rappresentazione grafica di base di un sito:
Come creare un sito da zero
Piccola parentesi per quanto riguarda il logo. Potete crearlo da soli con un programma di grafica. In questo caso, e` molto utile, per lavorare meglio (soprattutto se avete un computer da tavolo), utilizzare una tavoletta grafica come questa: "Tavoletta grafica". Naturalmente, non la utilizzerete solo per la creazione del logo, ma per la realizzazione di qualunque parte grafica del vostro sito.  


I tag semantici:

Oltre a questi tag, ce ne sono altri che chiameremo "minori", perchè vengono utilizzati solo in casi particolari. Parliamo dei tag "semantici".

Si chiamano semantici, perchè hanno un significato particolare e il loro contenuto rispecchia questo significato (semantica= scienza dei significati).

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>



Proseguiamo 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:

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

Aprite, come prima, il file e questa è l'immagine che vi restituirà il browser:
Come creare un sito da zero
Come vedete, abbiamo aggiunto dei contenuti nel <body> e abbiamo usato nuovi tag, vediamo quali:

Il tag <h1> - serve a definire un'intestazione. I tag per le intestazioni sono questi: <h1> - <h2> - <h3> - <h4> - <h5> - <h6>. Il numero 1 definisce una intestazione primaria, con caratteri più grandi, gli altri numeri definiscono intestazioni secondarie, con caratteri sempre più piccoli. Quelle più usate sono le prime tre. Sopra e sotto un'intestazione, c'è sempre uno spazio prestabilito.

Il tag <p> - definisce un paragrafo e, anch'esso, inserisce uno spazio di distanza, sopra e sotto, dal resto del testo.

Il tag <br> - che non necessita di chiusura, serve ad andare a capo.

Infine, ho inserito anche un link di esempio con la sua stringa:
<a href="URL pagina">Testo</a>

Per conoscere le stringhe e i tag più comuni e utili per scrivere in html, potete consultare la guida: Come scrivere in html.


Il layout:

La pagina, così com'è, non è molto attraente. Per disegnarla dobbiamo definirne il layout . Cos'è il layout? Il termine, tradotto in italiano, significa "disposizione" e rappresenta il modo in cui gli elementi vengono disposti nella pagina. Per creare un layout ci vuole un po' di esperienza, ma, per fortuna, la rete ci mette a disposizione molti layout già pronti e utilizzabili gratuitamente.

Prima di procedere, però, bisogna capire alcune differenze, perchè il layout può essere fisso o 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

In rete, potete trovare molti layouts da scaricare gratis, piu` o meno completi, piu` o meno ben fatti, che potete utilizzare per il vostro sito.

Ve ne offro uno di base, molto semplice, per poter continuare a seguire questa guida e applicare ciò che state imparando. Potete scaricarlo da qui "layout di base"

(Non sei obbligato, ma se, gentilmente, ricambi la cortesia condividendo questa pagina, te ne sarò grata: Condividi su Facebook)

Se, invece, volete un layout più completo,, anzi, un vero e proprio sito già pronto con tanto di pagine, potete scaricare, con un piccolissimo contributo a sostegno del mio lavoro, i sei modelli di "sito pronto". Un sito responsive ricco di funzionalità e corredato da una guida dettagliata con la descrizione di tutte le sezioni del codice e le indicazioni per la personalizzazione.
Lo trovate qui:  Un sito gia` pronto per te

Andiamo avanti....

Il foglio di stile:

Il foglio di stile (CSS= Cascading Style Sheet, in italiano: foglio di stile a cascata) è quello che determina le dimensioni, i colori e l'aspetto in generale delle varie parti del layout.
Il codice CSS va messo tra i tag <head></head> e viene introdotto, sempre, da questa stringa: <style type="text/css"> che termina con il tag di chiusura </style>

In pratica, la pagina web prende questa struttura:

<html>
<head>
<style type="text/css">
Qui incollate il codice CSS
</style>
</head>
<body>
Qui incollate il codice dei contenuti
</body>
</html>

Per approfondimento: Il foglio di stile

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

Ti è stato utile questo argomento?
Si
No



Continua con....La struttura del sito ->>
Elenco argomenti di questa guida:


Articoli consigliati




E molto altro ancora se leggi:
Tutti gli argomenti