Prima di iniziare a vedere praticamente come costruire un sito web fai da te, soffermiamoci sul ruolo importante dei due linguaggi principali che un webmaster deve necessariamente conoscere: stiamo parlando dell’ Html e dei Css.
Il primo è di norma utilizzato per creare la base strutturale di una pagina web. Attraverso questo linguaggio di formattazione dichiariamo le parti principali tra cui l’head (testa/testata) e il body (corpo pagina che contiene tutti gli elementi che noi vogliamo inserire).
Struttura base:
// inizio documento // inizio testata
// fine testata
//inizio corpo pagina
// fine corpo pagina
// fine documento
Il linguaggio CSS o meglio i fogli di stile, vengono utilizzati solo per impostare la parte meramente grafica del sito: dimensioni di tabelle, contenitori, caratteri, righe, colonne; i colori, l’opacità ecc.
Entrambi i linguaggi coesistono e si completano, ma secondo le buone norme del web devono essere creati 2 files separati, uno per la struttura (HTML) e uno per la grafica (CSS)
Esempio:
Vogliamo visualizzare la scritta “Hello World” con diverse grandezze e colori.
Pagina html
<html>
<head>
(come vediamo nell’head si inseriscono i link che rimandano ai file CSS)
<link rel=”stylesheet” href=”style.css”> // includo il file CSS e le sue regole
</head>
<body>
<h1>Hello World</h1>
<h2>Hello Word</h2>
</body>
</html>
Il file CSS
<style> //Apertura file CSS
(con questo comando racchiuso tra le parentesi graffe stabilisco là dove nel file HTML le frase è racchiusa tra <h1>…</h1> di visuliazzarla a una grandezza di 36 px e il colore nero.)
h1 {
font-size: 36px;
color:white;
}
//qui invece testo di colore rosso e grandezza di 16 px
h2 {
font-size: 16px;
color:red;
}
</style> // Chiusura file CSS
Questo meccanismo associa ad ogni elemento contenuto nella pagina HTML un proprio stile. L’associazione è molto semplice :
<h1></h1> —> h1 {…}
E’ possibile evitare di creare 2 files inserendo le “regole CSS” direttamente nel file html.
Ad esempio avremmo potuto ottenere lo stesso effetto in questo modo:
<html>
<head>
</head>
<body>
<h1 style=”font-size: 36px;color:white;”>Hello World</h1>
<h2 style=”font-size: 16px; color:red;”>Hello Word</h2>
</body>
</html>
abbiamo solo incluso style=”(regole)” nei punti desiderati.
Come già precisato all’inizio questa pratica è sconsigliata per questo continueremo i nostri tutorial con i 2 files separati.