CONTATTACI

Blog

Come creare un sito web statico in HTML

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.