Apprendere a scrivere un codice CSS (Cascading Style Sheets) è una lezione essenziale per chi vuole sviluppare un Sito Web.
Per chi è agli inizi ecco una guida per imparare le basi di una esecuzione corretta di CSS.
I CSS nello sviluppo di un Sito o Blog Web sono fondamentali e saperli leggere ed eventualmente creare o modificare ci saranno di aiuto nei nostri progetti futuri.
CSS è uno dei codici standard per la realizzazione di un Sito Web che consentono di controllare l'aspetto visivo delle pagine Web.
Se non hai un libro sui CSS o su HTML e vuoi avere ulteriori informazioni, visita il sito di Wikipedia e più precisamente clicca su CSS o HTML.
Prefazione
In questo Tutorial mostrerò come creare una pagina Web in HTML facendo uso dei codici TAG e DIV, definendoli successivamente in un foglio di stile esterno in CSS.
In questo Tutorial userò una spiegazione in un linguaggio molto semplice per permettere a tutti di comprendere l'argomento e svolgere l'esercizio senza problemi.
Questo Tutorial è solo un'introduzione su alcuni codici, comandi, regole e sintassi. Ho riportato e spiegato il sufficiente per capire questo esercizio, e che permetterà ugualmente di leggere ed eventualmente modificare fogli di stile in CSS. Ulteriori informazioni e spiegazioni le rimando ai prossimi articoli.
Questo Tutorial comporta la creazione di due files in formato testo. É quindi necessario disporre di un Editor di testo che permetta di salvare i file nei formati HTML e CSS. Scegliete quello che conoscete e vi si addice. Nei prossimi Tutorial useremo editor che vengono utilizzati per la creazione, modifica e test di codice per pagine Web.
STEP 1: Il Margine E L'Uso Dei TAGs
Il codice e l'uso dei TAG in HTML viene prima di tutto, e si deve sempre lasciare spazio per le pagine di stile in CSS fino a che è completamente finito.
HTML sta per HyperText Markup Language ed è il mezzo per descrivere la struttura del testo di informazioni su una pagina Web.
La pagina che stai attualmente vedendo, così come tutte le altre che vedi in altri siti Web, direi quasi tutte, utilizzano il codice HTML per la visualizzazione, anche se sono scritte originariamente in altri codici come PHP, ASP.NET, Flash o altro.
Prima di imparare come applicare gli stili di pagina con i CSS è necessario imparare come applicare gli elementi della struttura.
Il TAG così come molti altri codici in HTML è marcato dai caratteri (o simboli) minore ( < ) e maggiore ( > ).
Il TAG è usato per definire ciò che si vuole sulla pagina Web, diciamo che è il comando di esecuzione di visualizzazione del contenuto di una pagina Web.
Il CSS viene applicato per definire quando e come il contenuto di ogni TAG dovrebbe apparire nella pagina Web.
Di seguito TAGs in una pagina Web:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Il codice sopra riportato è composto da TAGs ed è già la struttura di base di una pagine Web in HTML.
Ogni pagina Web, quindi ogni codice scritto in HTML deve essere compreso tra le etichette <html> e </html>.
La barra laterale o slash ( / ) subito dopo il simbolo minore ( < ) indica la fine dell'etichetta. Indica che tra il primo TAG ( <html> ) e il secondo ( </html> ) verrano inseriti altre etichette e TAG che conterranno del codice per permettere le esecuzioni di quello che si vorrebbe visualizzare.
Tra l'etichetta <head> e </head> verranno inseriti altri TAG che forniranno spiegazioni, richiami a file esterni, ed altro, su quello che la pagina Web dovrebbe visualizzare.
In questo caso nell'etichetta <title> </title> si dovrebbe inserire il titolo della pagina Web. Si, è vero, al momento non è riportato nulla, questo perché stiamo creando la struttura della pagina Web che dovrà visualizzare un foglio di stile CSS.
All'interno dell'etichetta <body> </body> verranno inserite altre etichette che permetteranno di utilizzare i codici per visualizzare il contenuto della pagina Web.
In questo esempio si usa l'etichetta <div> </div> per permettere la definizione della struttura della pagina Web dividendola in più Box. In ogni Box si inserirà il contenuto che può essere un collegamento, un testo, un'immagine, e quant'altro ci passa per la testa. Tutto questo si definirà nel foglio di stile in CSS che si andrà a realizzare.
Di seguito l'immagine di quello che vorremmo realizzare con questo Tutorial:
Si nota che abbiamo suddiviso la pagina Web in tanti Box. Ogni Box ha un colore e una grandezza differente dagli altri. Per non incorrere in errore e per avere una identificazione univoca di ogni Box assegnano un nome identificativo ad ognuno di essi.
L'esempio nell'immagine che segue:
L'immagine riportata è in definitiva simile agli standard di pagine Web realizzate anche con i CMS come Joomla, Drupal, WordPress ed altri.
Ecco il codice HTML che si scriverà:
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Dal codice sopra riportato si nota che ad ogni TAG DIV (o etichetta DIV) abbiamo assegnato un ID che identifica univocamente il Box nella pagina Web. Quelli riportati sono gli stessi della seconda immagine. Questo ci permette di definire ogni singolo TAG durante la creazione del foglio di stile in CSS.
Leggendo il codice si nota che nella prima etichetta DIV è riportato l'identificativo wrapper, serve per identificare la struttura che contiene tutti i Box. Identificativo necessario perché in una pagina Web si possono avere più Box che al suo interno possono disporre di altri Box, quindi durante la realizzazione del foglio di stile in CSS si deve essere in grado di identificare ogni Box senza creare problemi agli altri. Si consiglia di non esagerare nella creazione dei Box.
STEP 2: Definizione Del Collegamento Al Foglio Di Stile in CSS
Come già accennato il foglio di stile CSS è dove si definiscono gli elementi del disegno per la pagine Web.
Un foglio di stile può essere interno o esterno al codice HTML. Un foglio di stile esterno viene richiamato tramite un TAG. In questo Tutorial si è scelto un foglio di stile esterno.
La scelta dell'esterno permette una migliore gestione: nel caso si dovessero creare più pagine Web utilizzando lo stesso foglio di stile, in caso di modifica verrebbe fatto una sola volta, altrimenti si dovrebbe modificare ogni pagina Web apportando le modifiche al foglio di stile presente in ognuna, pur esendo uguale.
Un foglio di stile esterno in CSS lo si richiama nel codice HTML con il seguente TAG:
<link rel="stylesheet" type="text/css" href="/style.css" />
che va inserito nell'etichetta con TAG HEAD:
Dal codice sopra riportato si nota che si richiama il file contenente il foglio di stile in CSS che ha il nome style.css con il TAG LINK.
<head><link rel="stylesheet" type="text/css" href="/style.css" /><title></title>
</head>
Prima di proseguire salviamo il contenuto del file con codice HTML assegnandogli il nome tutorialcss01.html.
STEP 3: Creazione Del CSS
La sintassi CSS è costituita dal Selettore, dalla Proprietà e dal Valore.
Il Selettore è il TAG che si desidera definire nella progettazione, la Proprietà è il tipo di attribuito che si desidera aggiungere, e il Valore viene assegnato alla proprietà. In un CSS possono esserci più Selettori, che a loro volta possono avere più Propietà, e ad ogni Propietà viene assegnato un Valore.
I Selettori da definire nel CSS sono:
- wrapper
- header
- navigation
- menu
- content
- footer.
Non si dimentiche la definizione del Selettore BODY: serve per definire lo stile della pagina Web che contiene i Box.
Ad eccezione del Selettore BODY tutti gli altri selettori devono essere preceduti nel nome identificativo dal carattere cancelletto ( # ) o punto ( . ).
Le proprietà di ogni Selettore devono essere racchiuse in un'uncia parensi graffa ( { } ) come nell'esempio che segue:
#selector {
property:value;
property:value;
property:value;
}
Le parentesi graffe si ottengono tenuto premuto il tasto CTRL seguito dal numero 123 per { oppure CTRL 125 per }.
Le Proprietà e i Valori possibili che si possono assegnare, in questo Tutorial, sono:
background : è il fondo che viene assegnato al Selettore e può essere un'immagine, un colore o entrambi.
Per includere un'immagine è necessario indicare il nome del file dell'immagine con la sua estensione.
Per visualizzare un colore, come in questo Tutorial, si usa un valore esadecimale.
Nel caso si debbano usare entrambi, il colore deve essere indicato prima dell'immagine.
Ad esempio: background: #FF0000; indica che si assegna il colore di fondo Rosso ( #FF0000 )
Per i colori con valore esadecimale leggi l'articolo relativo a 7 Tra I Migliori Tools Free Di Corrispondenza Colori Per Il Web Designers.
color : è il colore assegnato al testo. Anche qui il valore viene espresso in esadecimale.
Ad esempio: color: #FFFFFF; indica che si assegna il colore al testo Bianco ( #FFFFFF )
font-family : è il tipo di fonts che vengono assegnati alla pagina Web.
Si tratta di standard e deve includere almeno tre tipi di font-family, quindi se il Browser non supporta il primo, ha altri fonts da scegliere.
Ad esempio: font-family: Trebuchet MS, Arial, Times New Roman; indica che sono stati assegnati tre valori di fonts, il minimo standard, e se il primo Trebuchet MS non è supportato dal Browser automaticamente si passa al secondo che è Arial, e così via.
font-size : è il la dimensione del font e deve essere espressa in pixel.
Ad esempio: font-size: 12px; .
margin : è usata per definire la posizione del Selezionatore. I valori sono scritti per definire la distanza dei lati del Selezionatore dal telaio della finestra del Browser, come cima/alto, sinistro, inferiore, e destra. Se si vuole posizionare la pagina Web nel centro è necessario scrivere 0px auto 0px.
Ad esempio: margin: 60px; indica che la pagina Web inizia ad una distanza dal telaio del Browser di 60px.
width : definisce la larghezza in pixel che deve avere il Box.
height : definisce l'altezza in pixel che deve avere il Box.
float : definisce la direzione di un elemento e si possono assegnare uno dei seguenti valori Left, Right, Center.
Ad esempio: float: left; indica che qualsiasi contenuto nel Box (immagine o testo) parte da sinistra ( left ).
Si crea il file che conterrà il codice CSS che avrà il nome style.css (vedi lo Step 2).
Il codice che si inserirà nel file style.css e rispecchia la spiegazione precedente è:
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#wrapper {
background: #FFFFFF;
margin: 60px auto;
width: 900px;
height: 1024px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 624px;
}
#content {
background: #d2d0d2;
width: 900px;
height: 624px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Salva il file che contiene il codice di stile in CSS con nome style.css.
Concludendo
Se sono stati seguiti tutti gli Step come riportato in questo Tutorial si ha definito una pagina Web e il suo foglio di stile in CSS.
Per vedere il risultato del lavoro appena svolto, eseguire il codice HTML cliccando sul file tutorialcss01.html e nel Browser dovrebbe comparire quanto segue:
Per capire il meccanismo dei Box con i loro relativi attributi provate a cambiare i valori in esadecimale dei colori di ogni Box e la loro grandezza intervenendo sull'altezza e sulla larghezza.
Ad ogni modifica prima di eseguire il file HTML tutorialcss01.html salvare il file del foglio di stile in CSS style.css.
Mi auguro di essere stato sufficientemente chiaro. Se così non fosse lasciate un commento indicando cosa non si è compreso, risponderò con un'altro commento.
Circa L'Autore: Lorenzo Bergamini |
|
 |
Ciao, sono Lorenzo Bergamini e sono un Libero Professionista (freelance) in Italia, specializzato nel Project e Program Management (gestione progetti dal pc al mainframe e Convalida), nell'analisi e sviluppo di programmi (dal pc al mainframe) e nel design e graphics designer di Siti Web, ed altro ancora legato all'I.T. e alla gestione aziendale. Mi occupo anche di scrittura pubblicando racconti. Puoi seguirmi sul mio sito web Lorenzo Bergamini. |
 Introduzione Al PHP - Lezione 1 di 3
Il PHP è un linguaggio (o codice) di sviluppo che può essere utilizzato dai maggiori Sistemi Operativi (non solo PC, MAC o Linux, ma anche... Leggi tutto...  Ispirazione Settimana 0947: Classic American Pinups
Come Ispirazione della Settimana 0947 proponiamo un'interessante e singolare collezione di 106 Immagini Classic American Pinups, da cui prendere... Leggi tutto...  Ispirazione Settimana 0946: Layout Web Home Pages Argomenti Misti
Come Ispirazione della Settimana 0946 proponiamo un'interessante collezione di 87 Layout Web Home Pages con argomenti misti, da cui prendere... Leggi tutto...  Ispirazione Settimana 0945: Layout Web Home Pages Da DeviantArt
Come Ispirazione della Settimana 0945 proponiamo una splendida collezione di 76 Layout Web Home Pages a soggetto misto, realizzata da Artisti di... Leggi tutto... |
|
Per condividere questo articolo con i Bookmarks clicca su Share o Condividi
|
Per essere sempre aggiornato iscriviti alla BLI.IT RSS FEED |
Per inserire un link di questo articolo sul tuo blog o sito web clicca su Quote this article on your site e ottieni il codice.
|
Per ulteriori dettagli, richieste e consulenze contattaci utilizzando i moduli presenti in Richiesta Informazioni, telefona durante gli orari di ufficio con Skype o al numero +393889328157.
Condividi
Twitter
Myspace
Bookmarks.cc
Digg
Del.icio.us
Reddit
Slashdot
Netscape
Furl
Yahoo
Technorati
Newsvine
Blinkbits
Ma.Gnolia
Smarking
Googlize this
Blinklist
Facebook
Wikio
Diggita
Kipapa.cc
Notizieflash
OKnotizie
Segnalo
Ziczac
