Hai bisogno di un sito web per una piccola impresa O di creare un portfolio per mostrare il tuo lavoro? In questa guida ti spiegheremo come creare un sito web passo dopo passo. Iniziamo!
Un sito web statico è organizzato da una serie di file HTML, ognuno dei quali rappresenta una pagina fisica di un sito web; sui siti statici ogni pagina è un file HTML separato: ad esempio quando visiti la home page stai visualizzando solo il file della home page effettivo.
Al contrario di un'applicazione web, non prevede un'interazione con l’utente ed il suo contenuto, anziché essere generato dinamicamente da un server web o costruito dal linguaggio Javascript nel browser, rimane invariato, a meno che non venga modificato il codice sorgente.
Cosa significa?
È semplice: anche se due pagine contengono una porzione di contenuto identico, come un piè di pagina, ne esisteranno due versioni separate, quindi se vuoi aggiornare il piè di pagina, devi farlo in ogni pagina.
I siti web statici sono abbastanza semplici e tutti i siti web sono stati creati in questo modo durante i primi anni del world wide web.
Quali vantaggi possiedono?
Sono noti per essere velocissimi e funzionano particolarmente bene sia per i siti di base a una pagina (si pensi ai siti web di marketing aziendale) sia per i siti con molte pagine che hanno tutti la stessa struttura generale (si pensi ai blog o ai siti di notizie).
Come poter creare un sito web statico in HTML5?
Lo step più importante è quello di imparare le basi del linguaggio HTML e di comprendere la struttura di un documento web.
Prima di iniziare installate il vostro editor (vi consigliamo Visual Studio Code, Atom o Notepad++): questo è importante perché gli editor di testo ci facilitano la scrittura del codice e trovano istantaneamente gli errori.
Dunque, cosa aspetti? Apri il tuo editor, crea una cartella, dopodiché un file al suo interno e nominalo “index.html”! È importante che tutti i file, da questo momento in poi, abbiano questa dicitura. Inserisci poi il seguente blocco:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Il titolo del mio sito web!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>La mia prima pagina web.</p>
</body>
</html>
Ciò che è rappresentato dalle freccette “<>” è denominato tag html. Ogni qualvolta si apre un tag (es. <title>) è importante chiuderlo (es. </title>). I tag possono contenere al loro interno altri tag o del testo. Analizziamoli insieme:
• <!doctype html>: è la prima riga che bisogna inserire all’interno del documento e serve a dichiarare il tipo di documento, in questo caso in HTML;
• <html>: rappresenta la radice di un documento HTML. Il tag <html> è il contenitore di tutti gli altri elementi HTML (tranne il tag <!DOCTYPE>);
• <title>: il tag <title> definisce il titolo del documento. Il titolo deve essere di solo testo e viene mostrato nella barra del browser o nella scheda della pagina;
• <head>: contiene al suo interno metadati ed è posizionato tra il tag <html> e il tag <body>. I metadati sono dati sul documento HTML, non vengono visualizzati e in genere definiscono il titolo del documento, il set di caratteri, gli stili, gli script e altre metainformazioni;
• <body>: il tag <body> definisce il corpo del documento e contiene tutti i contenuti di un documento HTML, come titoli, paragrafi, immagini, collegamenti ipertestuali, tabelle, etc…
Salva, apri il tuo documento HTML sul browser e troverai un titolo in grassetto (“Hello, world!”) ed un paragrafo (“La mia prima pagina web”).
Bene, siamo riusciti a creare una piccola pagina web fondata su due righe, non male come inizio!
Nell’esempio corrente abbiamo inserito due tag: <h1> ( che rappresenta l’intestazione (vanno da <h1> a <h6>) e il tag <p> (paragrafo). Sulla nostra guida all’HTML è possibile trovare tutti i tag desiderati in base alle nostre esigenze; tuttavia, tra i più comunemente usati, ricordiamo:
• <a> per la creazione di un collegamento ipertestuale (spostarci tra una pagina web e un’altra);
• <br> per andare a capo;
• <div> un tag contenitore dove poter creare la struttura desiderata;
• <img> per inserire delle immagini;
• <ul>, <ol> rispettivamente una lista non ordinata e ordinata e che contiene i tag <li> in base al numero di elementi della lista;
• <span> per stilizzare parte del testo.
Sappiamo che il linguaggio HTML definisce lo scheletro di un sito web, ma quante volte ti sei ritrovato a chiederti “css cos'è?".
Ebbene, il linguaggio CSS (Cascading Style Sheets) si occupa dello stile dei tag (grandezza, colore, spaziatura, etc…), Aggiungendo infatti l’attributo “style” in un tag HTML sarà possibile fornire precise indicazioni sullo stile.
Torniamo all’esempio di prima:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Il titolo del mio sito web!</title>
</head>
<body>
<h1 style=”color:red;font-size:70px;background:yellow”>Hello, world!</h1>
<p style=”margin-top:10px”>La mia prima pagina web.</p>
</body>
</html>
Riapri il tuo file sul browser: cosa è cambiato? Il titolo è rosso, il carattere è più grande ed ha uno sfondo giallo. Il paragrafo, invece, è di 10 pixel più in basso rispetto a prima: questa è la potenza del linguaggio CSS.
Facciamo un altro passo in avanti. In realtà scrivere il CSS in questo modo non è vantaggioso per i motori di ricerca e questo scoraggia la loro posizione nel momento in cui gli utenti cercheranno il sito web.
La best practice ci informa di dover inserire il codice CSS all’interno dei fogli di stile. Cosa significa questo?
Sullo stesso livello crea un file e nominalo “style.css” e ritorniamo all'esempio:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Il titolo del mio sito web!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello, world!</h1>
<p>La mia prima pagina web.</p>
</body>
</html>
// All’interno del file style.css
h1{
color:red;
font-size:70px;
background:yellow;
}
p{
margin-top:10px;
}
Aggiorna la pagina web. Cosa è cambiato? Nulla, è tutto come prima. Ma cosa è successo realmente?
Con il tag <link> presente nell’<head> e con l’indicazione del file CSS (style.css) grazie l’attributo “href”, abbiamo creato un collegamento tra il documento HTML e il foglio di stile; successivamente abbiamo spostato le nostre regole .css all’interno del nuovo documento.
Come si scrive all’interno di un file .css?
Seguiamo queste piccole regole:
- Il selettore (es. h1) punta all'elemento HTML a cui si vuole applicare lo stile.
- Il blocco di dichiarazione (racchiusa tra le graffe) contiene una o più regole css separate da punto e virgola.
- Ogni regola include un nome di proprietà CSS e un valore, separati da due punti.
- Una regola CSS termina sempre con un punto e virgola e i blocchi di dichiarazione sono racchiusi tra parentesi graffe.
Nel nostro esempio corrente, attraverso la sintassi dichiarata nel file .css, abbiamo ridato le stesse regole di stile.
Tutto ciò che dovrete fare per creare un sito web da zero è capire cosa si vuole realizzare e cercare di “disegnare” tramite i tag ed il CSS. Quest’ultimo tema è molto importante per la costruzione di un layout e per rendere il vostro sito responsive sui vari dispositivi presenti in commercio.
Cosa aspetti? Vai a spulciare la nostra guida all’HTML e CSS!
