Abbiamo visto nella lezione precedente, come creare la nostra prima pagina web usando una struttura base e mettendo al suo interno una qualunque scritta generica, allo stesso identico modo avremo potuto scrivere un intero libro se solo avessimo voluto farlo. Ma un testo ha bisogno di essere formattato per essere facilmente leggibile; ed è proprio di questo che ci occuperemo in questa lezione.
Apriamo il nostro editor qualunque esso sia, e richiamiamo la pagina che avevamo creato e salvato, quella della lezione precedente per intenderci. Posizioniamo il cursore nel punto immediatamente prima della chiusura dell'elemento (tag) </head> ed inseriamo il richiamo ad un foglio di style esterno che poi andremo a realizzare.
<link rel="stylesheet" type="text/css" href="nome_del_foglio_di_style.css">
Dove al posto di nome_del_foglio_di_style.css possiamo mettere il nome che preferiamo, io nel mio caso lo chiamerò foglio.css
adesso la struttura base sarà come questa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css">
</head>
<body>
Questa è la mia prima pagina web in xhtml
</body>
</html>
Creiamo ora questo foglio di stile e per farlo useremo lo stesso editor adoperato per creare la pagina web, questa volta però anzichè salvare in formato html salveremo in formato .css che indica al nostro sistema che si tratta di un documento CSS (cascading style sheet).
Vi ricordo che in questo corso i due codici: html e css saranno distinti fra loro da box con cornici colorate per essere più facilmente riconoscibili, verde per html e marrone per il foglio di stile, così facendo si dovrebbe evitare qualsiasi possibile confusione, vi ricordo anche che la Guida sui CSS spiega molto meglio e più dettagliatamente come funzionano i css (fogli di stile).
Apriamo l'editor ed inseriamo nel nuovo documento (vuoto) questo codice:
p { text-align: center; }
Le parentesi graffe si ottengono premendo i tasti AltGr + maiuscole + parentesi quadra [ o ] che generano { }
Salviamo questo documento col nome foglio.css e per fare questa operazione valgono le stesse regole spiegate nella lezione precedente, se tutto ha funzionato a dovere dovremo avere adesso nella stessa cartella due files: index.html e foglio.css mentre per il file .html si dovrebbe vedere associata l'icona grafica del browser, per l'icona del file .css è probabile che ci sia l'icona col bandierino di windows che indica file sconosciuto, è perfettamente normale perché nel PC non c'è alcun programma in grado di gestire fogli di stile (a meno che non se ne sia installato uno) ma tutto funzionerà perché entrambi i files saranno riconosciuti e gestiti dallo stesso browser.
Vediamo adesso il risultato di questo foglio css facendo doppio clik sul file index.html relativo alla nostra prima pagina web, la scritta non si trova più a sinistra perché nel foglio di style abbiamo definito che il tag
usato per scrivere il paragrafo ha il testo allineato al centro (text-align: center)
Testo allineato al centro (center)
I possibili attributi che possono essere assegnati a text-align sono: left (sinistra), right (destra), center (centrato) e justify (giustificato)
Questi i risultati che si ottengono:
Testo allineato a sinistra (left)
Testo allineato a destra (right)
Testo allineato al centro (center)
Testo allineato in modo giustificato (justify) per far vedere l'effetto su entrambi i margini destro e sinistro il testo deve essere di qualche riga per questo che sto scrivendo, per raggiungere una quantità di testo tale che permetta di vedere e capire questo tipo di allineamento.
Se avete capito il meccanismo è facilmente intuibile che in quel foglio di stile è possibile assegnare al tag <p> paragrafo usato nell'esempio non soltanto l'allineamento del testo ma molti altri parametri, tutti quelli che i css supportano e che potete vedere sulla pagina parametri della guida css.
Assegnamo una dimensione del font di 10 punti, scegliamo come font per il testo Arial e se questo non fosse disponibile nel PC di chi ci visita allora andrà bene Verdana e se anche questo non ci fosse si adopererà uno della famiglia serif, come colore il rosso. Queste le modifiche da apportare al foglio di style:
p { font-size: 10pt;
font-family: Arial, Verdana, sans-serif;
color: red;
text-align: center; }
questo il risultato:
Testo con font 10 punti di tipo Arial colore rosso allineamento centrale.
Abbiamo fatto la modifica soltanto nel foglio di style senza toccare la pagina web, nella pagina web c'è soltanto il testo ma il colore, le dimensioni, il font e l'allineamento si trovano nel foglio di stile, un foglio che sarà richiamato da tutte le pagine web e se decidessimo di cambiare il colore o il tipo di font a tutto il nostro sito non dovremo andare pagina per pagina, paragrafo per paragrafo ma fare una sola modifica al foglio di stile comune a tutte le pagine per vedere tutto il sito cambiare all'istante.
Usando i fogli di style si fa spesso uso di un elemento contenitore che si chiama <div> e che da solo non avrebbe ragione di esistere ma utilizzato con testi ed immagini è in grado di posizionare i vari elementi con precisione assoluta perché è possibile passargli le coordinate orizzontali e verticali dello schermo o lasciare che queste siano calcolate automaticamente dal browser, lo stesso risultato visto sopra lo si sarebbe potuto ottenere usando il solo div al posto di <p> con una sintassi leggermente diversa, è preferibile <p> (paragrafo) perché semanticamente più corretto nel rispetto di modularità xhtml.
Per lo stesso motivo di modularità html mette a disposizione tags per i titoli che vanno da <h1> a <h6> possono essere ridefiniti grazie ai fogli di stile.
Digitando del testo vi accorgerete presto che a differenza degli editor normali, ogni volta che volete tornare a capo non basta la semplice pressione del tasto invio. Nelle pagine web per tornare a capo si fa uso dell'elemento
oppure aprendo e chiudendo un nuovo paragrafo <p>
Vi accorgerete anche che inserendo più spazi fra una parola e l'altra questi non saranno visualizzati ma ignorati tutti quanti lasciandone uno solo.
Provate voi stessi per rendervene conto. Più avanti nella lezione dedicata alla cosmesi del testo vedremo anche altre cose che non è possibile fare in html o almeno non così come siamo abituati a fare con un normale editor di testi.
Bene con questa lezione avete imparato a creare una pagina web e ad introdurvi del testo, nella prossima lezione vedremo come gestire il testo organizzandolo in liste ordinate.
