Costruire sito web fai da te con HTML e CSS

Costruire sito web fai da te: nozioni base di HTML e CSS

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.

 

Vai alla barra degli strumenti