°o.°o. Secret Graphics .o°.o° -- Un mondo dedicato alla grafica web !!!

TUTORIAL HTML -- by Nightly

Per aiutare tutti quelli che si stanno affacciando da poco al mondo del web, e che vedono i codici HTML come dei mostri pronti a mangiarli, ho deciso di creare dei piccoli tutorial sull'HTML !!!
Ok ok, lo so !!! Basta fare ricerche con Google e in giro nel web si trovano centinaia, anzi, migliaia di tutorial, ma penso che uno in più non faccia male !!!

Anche per questi tutorial vale la stessa regola che vale per tutti gli altri lavori !!!
Li ho SCRITTI DI MIO PUGNO, perciò NON COPIATELI SPUDORATAMENTE per inserirli nei vostri blog e/o siti dicendo che li avete fatti voi !!!
La cosa non sarebbe affatto carina !!!
Abbiate rispetto per me e per il tempo che ho impiegato per crearli !!!

CODICI BASE

PREMESSA: Tutti i codici che vedete qui, devono essere inseriti dove volete appia il "risultato": mi raccomando di copiarli esattamente così come li ho scritti io !!! La mancanza di una virgola per voi può sembrare insignificante, ma per quanto riguarda il linguaggio HTML sta a significare che avrete lavorato invano vedendo che non apparirà nulla di ciò che voi avrete inserito !!! Perciò è meglio farsi furbi !!! Salvate prima di cominciare il vostro intero codice HTML originale in un file di testo e tenetevelo caro !!! Qualora combiniate un disastro, potrete sempre tornare indietro copiando e incollando nell'editor del template il codice originale che avevate precedentemente salvato !!!

FORMATTAZIONE DEL TESTO

Per quanto riguarda il testo, vi sono momenti in cui avete bisogno di "formattarlo", ovvero dargli quegli effetti grafici come la sottolineatura, cambiare font, cambiare colore, cambiare carattere, cambiare spessore, etc.
In HTML questo si realizza scrivendo il testo che volete formattare all'interno di determinati codici.

TESTO IN CORSIVO
scrivi qui ===>> scrivi qui

TESTO IN GRASSETTO
scrivi qui ===>> scrivi qui

TESTO SOTTOLINEATO
scrivi qui ===>> scrivi qui

TESTO BARRATO
<strike>scrivi qui</strike> ===>> ~~scrivi qui~~

TESTO CENTRATO
<center>scrivi qui</center> ===>>
...................................................................scrivi qui

TESTO A SINISTRA
Scrivi qui ===>>
...............................................................................................................................scrivi qui

TESTO A DESTRA
Scrivi qui ===>>
scrivi qui

TESTO IN APICE
Scrivi qui ===>> Scrivi ^qui

TESTO IN PEDICE
Scrivi qui ===>> Scrivi _qui

CAMBIARE FONT AL TESTO
qui il testo
ES.:Scrivi qui ===>> Scrivi qui
ES.:Scrivi qui ===>> Scrivi qui

CAMBIARE DIMENSIONE AL TESTO
qui il testo
ES.:Scrivi qui ===>> Scrivi qui
ES.:Scrivi qui ===>> Scrivi qui

CAMBIARE COLORE AL TESTO
qui il testo
qui il testo
ES.:Scrivi qui ===>> Scrivi qui
ES.:Scrivi qui ===>> Scrivi qui

FORMATTAZIONE DELLE IMMAGINI

Anche le immagini si possono formattare, andando ad agire sulle loro dimensioni e sulla presenza o meno di un bordo che le contorna.

Vi ricordo che ogni volta che inserite un'immagine, non potete mettere il percorso presente nel vostro pc, ovvero non potete inserire l'immagine scrivendo dove essa si trova (ES.: C:/Documents and Settings/user/Documenti/Immagini/Animali/cats.jpg),
in quanto voi la vedrete perchè, ovviamente, è salvata nel vostro pc, ma tutti gli altri vedranno la fastidiosissima cornice grigia con la crocetta rossa, in quanto la vostra immagine non è presente nel computer di tutti, e se anche lo fosse, non è detto che si trovi nella stessa cartella dove si trova nel vostro pc.
Per questo motivo è bene che tutte le immagini che volete postare siano precedentemente "caricate" nel web.
Esistono siti, quali

ImageShack e Photobucket

che vengono definiti "siti di image hosting": in poche parole questi siti salvano nel web le vostre immagini, dando loro un indirizzo URL al posto del percorso che hanno nel vostro pc.
Una volta avuto l'indirizzo URL della vostra immagine non ci saranno più problemi in quanto, essendo salvata nel web, tutti saranno in grado di vederla !!!

INSERIRE UN'IMMAGINE
<img src="URL dell'immagine">

IMPOSTARE LE DIMENSIONI DI UN'IMMAGINE
<img src="URL dell'immagine " width="valore" height="valore">
dove width sta ad indicare la larghezza ed height l'altezza. I valori sono numerici e hanno come unità di misura i pixel.

AGGIUNGERE UN BORDO ALL'IMMAGINE
<img src="URL dell'immagine " border="valore">
dove anche per il border il valore è di tipo numerico e ha come unità di misura il pixel.

NOTA BENE:
E' consigliabile quando si inserisce un'immagine indicare sempre le dimensioni e il bordo onde evitare problemi di caricamento !!! Se non volete nessun bordo basterà dare come valore 0. Perciò il codice intero per inserire un'immagine sarà:

<img src="URL dell'immagine" width="valore" height="valore" border="valore (o zero per nessun bordo)">

ESEMPIO:
Immagine originale:
<http://img476.imageshack.us/img476/2504/farfallonaye4.jpg" width="150" height="128" border="0">

Immagine modificata alla quale sono stati attribuiti i seguenti valori: width=100px; height=78px, border=4px:
<img src="http://img476.imageshack.us/img476/2504/farfallonaye4.jpg" width="100" height="78" border="4">

INSERIRE I LINKS

I links sono quei riferimenti cliccabili che rimandano ad altre pagine web.
Detta così suona un pò difficile, ma i link sono degli elementi essenziali, poichè senza di loro il web non esisterebbe !!!
Bene o male tutti conoscono come funziona un link: vedi una scritta (o immagine) cliccabile, ci clicchi su... et voilà !!! Compare una nuova pagina web !!!
Ma come funzionano in realtà ???
Anche per creare i links esistono dei codici in linguaggio HTML, che sono relativamente semplici...

INSERIRE UN LINK
<a href="URL del link">Titolo del link</a> ===>>Titolo del link

ESEMPIO:
<a href="http://nightly.altervista.org">°o.°o. Secret Graphics .o°.o°</a>

===>> °o.°o. Secret Graphics .o°.o°

APPLICARE UNA DESCRIZIONE A UN LINK
<a href="URL del link" title="descrizione del link">Titolo del link</a>

===>>Titolo del link

ESEMPIO:
<a href="http://nightly.altervista.org" title="Ideato e creato da Nightly">°o.°o. Secret Graphics .o°.o°</a>

===>> °o.°o. Secret Graphics .o°.o°

APPLICARE UN LINK AD UN'IMMAGINE
<a href="URL del link"><img src="URL dell'immagine" width="valore" height="valore" border="valore"</a>

ESEMPIO:
<a href="http://www.nightly.altervista.org"><img src="http://img441.imageshack.us/img441/6446/banner1secret3ml.gif" width="180" height="50" border="0" ></a>

===>>

APPLICARE UN LINK AD UN'IMMAGINE CON RELATIVA DESCRIZIONE
<a href="URL del link"><img src="URL dell'immagine" width="valore" height="valore" border="valore"< alt="Descrizione del link"/a>

ESEMPIO:
<a href="http://www.nightly.altervista.org"><img src="http://img441.imageshack.us/img441/6446/banner1secret3ml.gif" width="180" height="50" border="0" alt="°o.°o. Secret Graphics .o°.o" ></a>

===>>