Torna al corso

Corso per creare siti web con HTML e CSS

Realizato da

Pubblicato il

html

css

corso

gratuito

italiano

web

developer


Ciao a tutti e benvenuti a questa parte del corso per il front end development con HTML e CSS. In questa parte del corso andiamo a vedere il processo per creare un sito con HTML e CSS. I passi che andremo ad analizzare sono:

  • creare la directory per il sito
  • creare il file HTML
  • Creare il file di stile CSS
  • Collegare il file HTML al file CSS
  • Creare la directory per il sito

    Come abbiamo detto nella prima parte di questo corso ogni sito è composto da varie pagine e documenti posizionati su un computer chiamato server. Per motivi di organizzazione i file per il sito saranno inseriti all’interno di una cartella.

    Se state lavorando sul vostro pc e avete accesso alla GUI potete creare la cartella manualmente come siete abituati a fare. Se invece state lavorando su un server remoto tramite un accesso SSH, potete creare la cartella con il comando:
    mkdir nomecartella

    Creare il file HTML

    Ora all’interno della cartella creata precedentemente creiamo il file HTML per la home page del nostro sito. Il file essendo un file HTML dovrà avere un'estensione .html

    Per creare un file con estensione .html possiamo creare un nuovo file da un text editor, e scegliere l’opzione salva con nome, dove andiamo ad inserire il nome index.html

    Il nome index.html è uno standard che va utilizzato per indicare quale pagina sia la home page del sito. Molti server infatti fanno una ricerca automatica per un file chiamato index.html e lo servono come home page.

    Per creare un file dal terminal di un server possiamo eseguire il comando:

    touch index.html


    possiamo copiare ed incollare il questo codice base per una pagina HTML5, per verificare il funzionamento del file

    <!DOCTYPE html>
    <html>
    <head>
        <title>Collegare CSS ad HTML</title>
    </head>
    <body>
        <h1>Ciao Devnews</h1>
    </body>
    </html>


    Una volta salvato questo codice all’interno del file index.html, possiamo aprire un browser qualsiasi e aprire il file index.html selezionando File > apri o con il comando Ctrl + o

    Se tutto è stato fatto in modo corretto dovreste vedere la scritta ciao devnews nel browser. 

    come collegare linkare file css a file html

    Creare il file di stile CSS

    Nello stesso modo e nella sessa directory, possiamo creare il file CSS con la differenza che l’estensione del file sarà  del tipo .css

    Salvare il file nella stessa cartella è importante per il passo successivo!


    Il nome del file può essere di qualsiasi tipo, a patto che sia seguito dal suffisso .css per esempio style.css
    Per verificare il funzionamento del codice CSS possiamo inserire all’interno del file del codice per cambiare colore alla scritta “ciao devnews”

    h1 {
        color: #2ecc71;
    }


    Se proviamo a fare il refresh della pagina index.html possiamo vedere che non è cambiato niente e la scritta è ancora nera. Questo è perché il browser non ha alcun modo per sapere che quel file style.css sia collegato al file index.html

    Come collegare il file CSS al file HTML

    Per indicare al browser che un determinato file HTML sia collegato ad un file CSS, abbiamo bisogno di inserire un tag particolare all’interno del <head> di index.html: Il tag <link>

    Il tag di link serve per collegare risorse esterne al file HTML. Nel caso di un collegamento ad un file CSS, questo tag ha una forma del tipo:

    <link rel="stylesheet" type="text/css" href="style.css">
    


    L’attributo più importante è href, che ci indica il percorso al file CSS in relazione al file html.

    Nel nostro caso il file HTML e CSS sono nella stessa directory quindi basta specificare il nome del file CSS all’interno dell’attributo href.

    Dopo aver inserito il tag di link nel head del file index.html avremo un codice del tipo:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Collegare CSS ad HTML</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Ciao Devnews</h1>
    </body>
    </html>


    Assicurandoci di aver salvato il file index.html e style.css, apriamo il browser e facciamo il refresh della pagina index.html

    Se tutti i passi sono stati eseguiti in modo corretto dovreste vedere la scritta hello devnews cambiare colore :)

    come collegare o linkare un file css ad un file html per dare stile


    Se non vedete la scritta cambiare colore potete indagare alcune cose:

    Avete scritto il nome del file CSS nell’attributo href in modo corretto?

    Avete usato il tag h1 nel file html ed il selettore h1 nel file css?

    Avete salvato il contenuto dei file?

    Siete sicuri che il file CSS sia nella stessa cartella del file HTML?

    Spero questa guida vi sia stata d’aiuto e che state cominciando ad avere un’idea di come funziona il mondo dello sviluppo web. Ci vediamo alla prossima parte della guida :)