1. Cominciamo
Per creare una pagina HTML bisogna innanzi tutto aprire un foglio di lavoro. Aprite quindi Notepad / Blocco Note e vi trovate davanti un foglio Senza nome; perfetto, ora andate alla barra degli strumenti: File > Salva con nome... > Salva come: tutti file e Nome file: esempio.htm (l'estensione .htm, oppure .html, è propria delle pagine web) > Salva.
2. Creiamo la pagina HTML
Non fatevi spaventare dal foglio vuoto, bensì scrivete:
3. L'HEAD
Ora, siccome questa guida serve per realizzare pagine web per web log (blog), bisogna impostare: un titolo, il body e le classi di stile tra i tag:
4. Il titolo
Quindi scriviamo per il titolo (che verrà impostato su in alto, accanto a - Microsoft Internet Explorer / - Mozilla / ecc):
Il tag <$BlogTitle$> è proprio di Splinder.com, e serve ad impostare il titolo che vi siete scelti per il blog automaticamente.
5. Lo STYLE
Prima di impostare gli stili, dobbiamo aprire lo spazio per questi stili:
Dove type="text/css" definisce in che modo è scritto lo STYLE della pagina web.
6. Impostare il BODY
Il body imposta le caratteristiche della pagina: lo sfondo, la barra di scorrimento e il font-family:
Ora spieghiamo:
1. Il background-color è il colore dello sfondo. Il #ffffff è il codice del colore bianco (questo colore può essere cambiato benissimo, eh^^, serve solo a fare un esempio). Per aver un'idea dei codici di ogni colore, andate qui.
2. Il background-image è l'immagine che si vuole vedere uasta come sfondo. Siccome l'immagine deve assolutamente stare su un dominio nel web, l' URL('http://indirizzoimmagine.com') serve a trovare l'immagine. Al posto di http://indirizzoimmagine.com/ va sostituito con l'URL (Uniform Resource Locator), che è l'indirizzo web.
3. Il background-repeat è come volete che la vostra immagine venga ripetuta: orizzontalmente, verticalmente, oppure non volete che si ripeta. Quindi, se volete che si ripeta orizzontalmente, scrivete background-repeat: repeat-x;, se volete che si ripeti verticalmente, scrivete background-repeat: repeat-y;, se volete che non si ripeti, scrivete background-repeat: no-repeat;.
4. Nel caso abbiate scelto background-repeat: no-repeat; è possibile che vogliate l'immagine bloccata anche se si scorre la barra di scorrimento. Quindi, scrivendo background-attachment: fixed; voi bloccate la vostra immagine.
5. Gli scrollbar impostano i colori della barra di scorrimento. Curano ogni singolo particolare (io stessa non conosco la funzione di ogni colore:P), vi dico dico solo che scrollbar-face-color: #ffffff; è il colore della barra, scrollbar-arrow-color: #000000; è il colore della freccia e che scrollbar-track-color: #ffffff; è il colore della traccia dove passa la barra. Gli altri si occupano delle ombre. Anche qui, #ffffff e #000000 sono due colori: il primo bianco, il secondo nero. E sono sempre usati come esempio:P.
6. Il font-family è una lista di caratteri che il vostro browser (Mozilla, Firefox, Internet Explorer) utilizzerà qualora il carattere impostato e scelto da voi non dovesse essere disponibile al momento della lettura della pagina. Mettete pure tutti quei caratteri, più sono meglio è XD.
7. Le classi di stile
Le classi di stile sono molto comode rispetto all'impostare ogni volta il font nel BODY. Quindi, solitamente, per un blog servono: una classe di stile per i titoletti, una classe di stile per i contenuti, e tre per i link. Mettiamo che vogliamo impostare un titoletto, un contenuto e dei link uguali a quelli che sta usando adesso questa pagina. Quindi scriviamo:
Partiamo col descrivere la classe .titoletti:
1. Il punto (.) prima del nome della classe serve a dire che quella è una classe.
2. La width è un indice trascurabile: mantenetelo sempre tale, a 100%.
3. Il font serve a stabilire: le caratteristiche, la misura e il carattere di ciò che scrivete. Ad esempio, al posto di bold (se volete il grassetto) potete mettere italic (se volete il corsivo) oppure none (se non volete nulla). Inoltre, dovete dire quale carattere volete: Tahoma / Time New Romans / via discorrendo... e dovete impostare la misura del carattere. Quest'ultima può essere stabilita in due modi: con x-x-small / x-small / small / medium / large / ecc, oppure con un numero seguito da px: 8px / 9px / ecc... sbizzarritevi XP.
4. text-align è l'allineamento del testo. Può esserci, al posto di right (destra), left (sinistra) / center (centra) / justify (giustifica).
5. In questo caso, abbiamo voluto aggiungere un ornamento: un quadrino che circonderà il titoletto. border-style: solid; stabilisce che il contorno deve essere unito. border-width: 0px;, border-top-width: 0px; e border-top-width: 0px; vi aiutano a stabilire la misura dei contorni del titoletto; vanno messe delle misure a numero seguite da px: 0px / 1px / ecc. border-color: #000000; stabilisce il colore del bordo; #000000 è il colore nero.
6. background-color: #ffffff; stabilisce il colore di sfondo al titoletto. #ffffff è il bianco. Ma al posto di un colore possiamo voler mette un'immagine, allora scriviamo background-image: URL('http://indirizzoimmagine.com'); dopo background-color: #ffffff;.
7. Per i contenuti valo la stessa spiegazione che per i titoletti.
8. A:link imposta le caratteristiche del collegamento web quando non è mai stato visitato. A:visited imposta le caratteristiche del collegamento web quando è stato visitato. A:hover imposta le caratteristiche del collegamento web quando il mouse (la freccia) vi passa sopra.
color: #ffffff; è il colore del carattere. filter: shadow(color=#000000, strength=3); height: 1; è l'effetto ombra che gli si può far avere (nota: il filter è puramente ornamentale ^^). I vari filter, oltre a shadow, sono: glow e dropshadow. (color=#000000, strength=3) impostano il colore (color) e la misura (strength) dell'effetto (filter). text-decoration: line-through; stabilisce la decorazione del testo; oltre a line-through (barrato), può essere: underline (sottolineato), overline (sopralineato), ecc (possono anche essere combinati. es:
text-decoration: underline overline;. font-weight: bold; si occupa della caratteristica della scrittura; oltre a bold (grassetto), può essere italic (corsivo) / ecc.
8. Fine STYLE
Bene, ora avete impostato ogni cosa nello stile e potete andare a modificare la vostra pagina! ^_^
9. Inizio BODY
Ora che tutto è impostato, riempiamo la pagina!
Siccome questo è un tutorial per le pagine di web log (di blog, insomma:P), ci servono le famose colonne. Quindi, dopo il tag di chiusura dell'HEAD, apriamo quello del BODY:
10. Impostiamo i DIV
Adesso che abbiamo aperto e chiuso (quindi definito) l'area dove operare, creiamo le colonne. Esse, in gergo tecnico (e per influenza inglese) si chiamano div. Quindi:
Premetto che io trovo scomodi gli z-index (che stabiliscono le priorietà delle colonne, quindi l'ordine) e che quindi non li ho inseriti, indi spiego:
1. position: absolute; è la posizione della colonna. Lasciate sempre absolute ^^.
2. width:320px; serve a stabilire la larghezza della colonna: un numero a caso seguito da px (es: 320px).
3. left:22px; stabilisce la distanza dell'inizio tra l'inizio della colonna e il limitare a sinistra della finestra: un numero a caso seguito da px (es: 22px).
4. top:50px; stabilisce la distanza dell'inizio tra l'inizio della colonna e il limitare in alto della finestra: un numero a caso seguito da px (es: 50px).
5. Ho tolto la tag che identifica la lunghezza della colonna, perchè non influisce affatto: lo trovo superfluo, perciò XD.
11. I paragrafi
Per creare i paragrafi (ovvero, i famosi Amo / Odio / ecc) dovete scrivere delle cose tra i tag div e /div. (per comodità, qui di seguito è mostrata solo UNA PARTE del codice):
Spieghiamo:
1. p class="titoletti" e p class="contenuti" stabiliscono quale classe di stile si vuole prendere in considerazione per quel testo compreso tra p e /p. Infatti, tra " e " è incluso il nome della classe di stile precedentemente creata (punto 7.).
12. Font
Può capitare che le classi di stile siano scomode a volte (quando, ad esempio, vogliamo che un tale effetto sia applicato ad una sola parola o frase). Ecco quindi delle piccole cose:
1. Per far si che una parola sia in corsivo:
2. Se vogliamo che sia in grassetto:
3. Se vogliamo che sia sottolineata:
4. Se vogliamo che il testo vada allineato a sinistra:
5. Se vogliamo che il testo vada allineato a destra:
6. Se vogliamo che il testo vada allineato al centro:
7. Se vogliamo che il testo vada giustificato:
8. Se vogliamo proprio impostare tutto il font (non solo una caratteristica di esso), un esempio è:
Dove face stabilisce il carattere, size la misura (per questa usate solo il numero segutio da px), color il colore del testo e align l'allineamento. Ecco il risultato del codice nel box: Frase
13. Andiamo a capo
1. Se volete solo andare a capo, quindi scrivere alla riga successiva, scrivete a fine frase:
Il tag br sta per break.
2. Se volete andare due volte a capo e quindi lasciare una riga intera tra una frase e l'altra, scrivete:
14. I table
Se volete che una tabella circondi il vostro testo, scrivete così:
Dove:
1. border è lo spessore del bordo espresso in pixel (px).
2. solid è la qualità del bordo: continuo.
3. #000000 è il colore del bordo.
4. cellpadding... °_° non lo so XD.
5. width è l'ampiezza della table.
6. bgcolor è il colore che avrà lo sfondo (difatti di seguito c'è un colore).
Questo è il risultato:
Anche qui: spaziate con la mente, ma evitate di cecarvi gli occhi con gli accostamentiXD.
15. I link
Volete inserire un link? Ecco il codice:
Dove:
1. href indica lo spazio dove inserire l'URL.
2. target="_blank" indica che la pagina va aperta in una nuova finestra (indi può esser omesso).
3. alt indica la scritta che compare quando il mouse passa sopra il link (indi può esser omesso).
Il risultato è questo: link .
16. Come inserire una immagine
Questo è il tag che dovete scrivere per inserire un'immagine:
Dove:
1. "width: 121px; height: 35px" definiscono le dimensione (in px) che vuoi che abbia l'immagine. (prima la larghezza, width, e l'altezza, height)
2. height="35" width="121" sono le dimensioni effettive dell'immagine (leggermente superflueXD).
3. alt indica il testo che compare andando col mouse sull'immagine. (il testo va messo tra " e ")
4. src="http://i13.photobucket.com/albums/a251/
Lored4na/ban-keira.jpg" è dove va messo l'indirizzo dell'immagine.
5. L'assai importante u.u border="0", che serve ad evitare un fastidioso bordo, se impostato a 0px.
Il risultato:
17. I tag di Splinder.com
I tag di Splinder.com sono:
1. <$BlogTitle$>, il titolo del blog.
2. <$BlogItemTitle$>, il titolo della pagina di diario.
3. <$BlogItemBody$>, il contenuto della pagina di diario.
4. <$BlogDescription$>, descrizione del blog.
5. <$BlogCounter$>, il contatore delle visite.
6. <$BlogRecentComments$>, i recenti commenti.
7. <$BlogItemComments$>, i commenti relativi ad una data pagina di diario.
8. <$BlogPager$>, permette di scorre le pagine sul blog.
9. <$BlogItemCategories$>, la categoria di una pagina di diario.
10. <$BlogItemDateTime$>, l'ora di quando hai pubblicato la pagina di diario.
11. <$BlogDateHeaderDate$>, il giorno in cui hai pubblicato la pagina di diario.
12. <$BlogItemAuthorNickname$>, il nickname di chi ha pubblicato la pagina di diario.
13. <$BlogCategories$>, le categorie del blog.
14. <$BlogArchive$>, l'archivio temporale del blog.
15. <$BlogLinkOut$>, i link del vostro blog.
NOTA: bisogna sempre inserire le pagine di diario tra i tag:
... altrimenti non ve li pubblica!:P
17. Effetti ombra
Prima abbiamo visto i filtri (filter) che creano un'ombra. Il filter va impostato nelle classi di stile di una determinata classe (es: .titoli). Ora mettiamo che vogliamo un testo con un effetto ombra (sono tre gli effetti ombra).
1. Per ottenere questo:
SHADOW
Dove:
1. shadow è il nome dell'effetto.
2. color è dove va inserito il colore sell'effetto.
3. strenght è lo spessore dell'effetto (un numero).
4. height serve a far vedere l'effetto (un numero da 1 in poi).
Inseriamo l'effetto in una classe di stile:
2. Per ottenere questo:
GLOW
Dove:
1. glow è il nome dell'effetto.
2. color è dove va inserito il colore dell'effetto.
3. strenght è lo spessore dell'effetto (un numero).
4. height serve a far vedere l'effetto (un numero da 1 in poi).
Inseriamo l'effetto in una classe di stile:
3. Per ottenere questo:
DROPSHADOW
Dove:
1. dropshadow è il nome dell'effetto.
2. color è dove va inserito il colore dell'effetto.
3. strenght è lo spessore dell'effetto (un numero).
4. height serve a far vedere l'effetto (un numero da 1 in poi).
Inseriamo l'effetto in una classe di stile:
NOTA: il codice di questi effetti non funziona quando alla classe di stile è impostato un background-color o una background-image, e tanto meno sono visibili col Browser Mozilla.
18. Effetto sfumato
L'effetto mostrato qui di seguito va impostato nelle classi di stile.
Ecco il codice per le sfumature, come, ad esempio, questa:
SFUMATURA
Il codice di base:
Dove:
1. alpha è il nome dell'effetto.
2. opacity e finishopacity sono due soglie (del tipo che se una è 100 e l'altra è 0, l'effetto va da colore pieno e trasparente). Sono gli estremi delle sfumature.
3. style è il tipo di sfumatura. Arriva sicuamente fino a 3... voi provate anche 4, 5... XD.
Il codice inserito in una classe di stile qualunque: