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
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.
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.
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 :)
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?