Come creare un sito da zero tutto da soli

La guida passo a passo
La guida con la quale chiunque puo` 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

Gli altri browser sono adatti solo per il comune utilizzo.
Procediamo....

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.

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 appare all'interno della pagina, come quello che leggete, ora, in questa stessa pagina che scrivo.

Analizziamo bene come è composto il codice che abbiamo scritto; ci sono dei tag che si aprono e si chiudono e sono <html></html> - <head></head> - <title></title> - <body></body>. I tag sono sempre racchiusi nei simboli <> e la barra /, messa prima di un tag, ne indica la chiusura.

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 collocati dei <div> (divisori) per separare le diverse zone:
  • Il div "header"  (intestazione) che contiene, appunto, l'intestazione del sito. Puo` essere il nome testuale, oppure il logo.
  • Il div "nav" (navigazione) che contiene la barra di navigazione
  • Il div "content" (contenuto) che, lo dice la parola, racchiude il contenuto vero e proprio, cioe` testo, immagini ecc
  • Il div "sidebar" (barra laterale) che racchiude la parte di contenuto della barra laterale
Il tag <footer> (pie` di pagina) costituisce la parte piu` bassa del sito

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

Questa e` 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.  

Proseguiamo e facciamo un passetto in più. Aprite il vostro file .html, cliccandoci sopra con il tasto destro e scegliendo apri con->blocco note. 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 usate, normalmente, sono le prime tre, perchè le altre si confondono con il testo normale. 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 questa breve guida: Come scrivere in html.

Consiglio riguardo ai fonts:

Dato che la lettura, o meno, del tipo di carattere usato e` determinata dalla presenza, o meno, di quel font nel sistema operativo di ogni utente, e` perfettamente inutile usare un tipo di font particolare e ricercato per scrivere il testo in un sito pubblico. Se il computer del visitatore, o il browser non riconoscono il font, esso verra` sostituito da quello di default.

Google ha pubblicato una lista dei font consigliati per i webdesigner. La trovate a questo indirizzo:

https://www.google.com/fonts/

Questi font dovrebbero essere riconosciuti da tutti i sistemi operativi e browser, anche sui dispositivi mobili di nuova generazione. Dico dovrebbero, perche` non posso testare di persona e mi affido alle indicazioni degli esperti in materia.

Detto questo, passiamo a....

Il layout:

La pagina, così com'è, non è molto attraente. Per disegnarla dobbiamo definirne il layout . Cos'è il layout? Il nome, 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 ha dimensioni impostate fisse. E' il più facile da realizzare, ma non permette l'ottimizzazione per i dispositivi mobili, ormai indispensabile.

Il layout responsive ha dimensioni impostate in percentuale. E` 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.

Se, poi, non volete perdere tempo e avete voglia di cominciare subito, andando sul sicuro, potete acquistare, con poca spesa, il sito pronto che io ho preparato per voi. Un sito responsive, "super-accessoriato" per garantire le migliori funzionalita` e corredato da una guida dettagliata con la descrizione di tutte le sezioni del codice e le indicazioni per la personalizzazione.
Andate a vederlo.... Un sito gia` pronto per te .... ne sono parecchio orgogliosa.. :-))

Andiamo avanti....

Il foglio di stile:


Il foglio di stile (CSS = Cascading Style Sheets) è quello che determina i colori, i font e le dimensioni 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 ha questa struttura:

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

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:
E molto altro ancora se leggi:
Tutti gli argomenti