-
.
Come creare un container utilizzando i diversi stili HTML!
Bene, ragazzuoli carissimi. Eccoci arrivati ad un nuovo tutorial a cura della giovinetta Rory, Grafico di famiglia!
Avvertenze: questo tutorial sarà piuttosto lungo, poiché spiego diversi tipi di codici tra CSS e HTML. Perché anche CSS? Perché sono codici spesso utilizzati per abbellire le skin (certo, perché per costruirle ci vuole ben altro ^^").
In questo tutorial impareremo come creare un container. Ma prima di partire c'è da chiedersi: "Che cos'è un container?" Semplice! È questo:SPOILER (clicca per visualizzare)Ora questa Matita la faccio sparire.
Sì, i colori e la grafica non sono delle migliori ma era per dare un'idea, per di più semplice.
Per "imparare" a lavorarci dobbiamo capire da dove iniziare, e come utilizzare i vari codici per creare quello che più ci pare e piace. Ovviamente non ci baseremo su questo proposto, siccome penso sia ancora presto e potrei confondervi le idee. Perciò, concentriamoci su ciò che è necessario ^^
Per aprire il container c'è bisogno di questo codice:CODICE<div align="center"></div>
Per far sì che il codice funzioni (come in ogni qualsiasi tipo di codice) è indispensabile soprattutto il:poiché è il codice che chiude tutto e bisogna inserirne quante volte abbiamo aperto ilCODICE</div>CODICE<div align="center"> e/o <div style="">
Detto ciò, passiamo al Background. Lo dirò per i meno svegli (anche se non penso proprio che ci sia il bisogno di farlo, ma va beh) il background è lo sfondo. Dobbiamo scegliere che colore farlo e possiamo farlo in tre modi: o in RGB (Red, Green, Blue), o utilizzando il nome del colore oppure il codice HTML. Per quanto riguarda l'RGB (che è quello che uso maggiormente poiché mi consente di creare colori all'istante senza che li vada a cercare) dovete sapere che più i numeri saranno grandi più i colori saranno chiari, e partono da 0 fino ad arrivare a 255.
Background: rgb(255,255,255);
Background: white;
Background: #fff;
Per far sì che il nostro container prenda forma, il che è indispensabile, dobbiamo utilizzare: il width (la larghezza) e l'height (l'altezza), il tutto si misura in px.
Quindi, ritornando a prima, noi apriremo il container con questi codici:
Questo è l'insieme dei codici usati:CODICE<div align="center"><div style="Background: rgb(255,255,255); width: 300px; height: 40px"></div></div>
Per adesso il nostro container è abbastanza semplice ^^. Impariamo come aggiungere un testo, all'interno di questo.
Il testo s'introduce aggiungendo il "text-align", in tre direzioni diverse: right, center, left.
Scegliamo "Left".SPOILER (clicca per visualizzare)Non può piovere per sempre.CODICE<div align="center"><div style="Background: rgb(255,255,255); width: 300px; height: 40px; text-align: left">Non può piovere per sempre.</div></div>
Il colore del testo varierà a seconda del codice usato da skin a skin, a meno che non si aggiunge "Color: (colore espresso in rgb/nome colore/codice)". Usiamo un bel nero ^^SPOILER (clicca per visualizzare)Non può piovere per sempre.CODICE<div align="center"><div style="Background: rgb(255,255,255); width: 300px; height: 40px; text-align: left; color: black">Non può piovere per sempre.</div></div>
Il testo può essere modificato a seconda se renderlo in grassetto, in corsivo o sottolineato obarratoo apice o in pedice.
In questo caso i risultati potranno essere:SPOILER (clicca per visualizzare)Non può piovere per sempre. Non può piovere per sempre. Non può piovere per sempre.Non può piovere per sempre.Non può piovere per sempre. Non può piovere per sempre.CODICE<div align="center"><div style="Background: rgb(255,255,255); width: 350px; height: 60px; text-align: left; color: black"><b>Non può piovere per sempre.</b> <i>Non può piovere per sempre.</i> <u>Non può piovere per sempre.</u> <strike>Non può piovere per sempre.</strike> <sup>Non può piovere per sempre.</sup> <sub>Non può piovere per sempre.</sub></div></div>
Adesso il testo appare confuso agli occhi, e, come spero ci abbiate fatto caso, ho aumentato il Width e l'Height. Quando il testo è lungo, solitamente per non creare confusione si aggiunge, aprendo nuovamente il container con "div style=", l'Overflow: auto, dopodiché possiamo ancora sceglierne le grandezze sopracitate ancora una volta. Per saperne di più, andate Qui ^^SPOILER (clicca per visualizzare)Non può piovere per sempre. Non può piovere per sempre. Non può piovere per sempre.Non può piovere per sempre.Non può piovere per sempre. Non può piovere per sempre.CODICE<div align="center"><div style="Background: rgb(255,255,255); width: 370px; height: 60px; text-align: left; color: black"><div style="overflow: auto; width: 340px; height: 40px; background: rgb(80,80,80)"><b>Non può piovere per sempre.</b> <i>Non può piovere per sempre.</i> <u>Non può piovere per sempre.</u> <strike>Non può piovere per sempre.</strike> <sup>Non può piovere per sempre.</sup> <sub>Non può piovere per sempre.</sub></div></div></div>
Ragazzi, per adesso la concludo qui! Fatemi sapere se questo tutorial vi è gradito e scrivetemi se avete bisogno di qualche delucidazione ^^"
A presto con il prossimo Tutorial!Rory
.
