ABC del HTML♥ {secondo -spiki}

« Older Newer »

-spiker

Posted on 15/11/2011, 14:43 by: -spiker

EVS

Group: Capa Suprema ♥

Posts: 32,168

Fama: +2

Status: Anonymous

Passo 6: Facciamo il Punto della Situazione~

Tutte le proprietà che vi ho elencato agiscono con lo style e servono per personalizzare il nostro schema.

Adesso che abbiamo tutto il necessario possiamo metterci all' opera =D

Dunque, cercheremo di realizzare uno schema così:

« citazione citazione citazione citazione citazione »

testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.

Qualcosa o quello che vuoi~

Prima di tutto dobbiamo capire da dove iniziare. Per comodità, io parto sempre dal bordo fino all'interno.

Passo 1: Bordo, Allinemento e Sfondo.
Dunque, prima scriviamo il div align. Dopo iniziamo con lo style, e quindi i 3 parametri: width, border e background.

SPOILER (clicca per visualizzare)

CODICE

Passo 2: La citazione.
Per la citazione dobbiamo creare un div style a parte. Nel nostro caso è questo:

CODICE

<div style="text-align: center; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div>

Ho impostato il testo allineato al centro, il colore, e il suo margine dal bordo.

« citazione citazione citazione citazione citazione »

SPOILER (clicca per visualizzare)

CODICE

Passo 3: Immagine e Testo.
L'immagine è forse la parte più facile. Forumfree mette a disposizione il bottoncino 2jtiy

che serve al nosto scopo.
Se ci clicchiamo possiamo analizzare il codice:

HTML

<div style="float: left; margin-right: 10px">Testo/Immy che vuoi di lato al testo</div>

Float: inidica l'allineamento. Se cambiate left a right la immy si sposterà a destra.
Margin-right: indica il margine destro, ovvero la distanza dall' immy al testo. Potete cambiarlo o aggiungerci altri margini.

Posizioniamo il codice accanto al primo testo, e dato che io sono pignola ho impostato anche il margine da sinistra (margin-left).

Per il testo abbiamo 2 scelte.
1. Creare un nuovo div style (come per citazione);
2. Aggiungere proprietà al primo div style.

Per comodità io ho aggiunto le proprietà al primo parametro:

HTML

font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left

Ma potete fare anche così:

CODICE

<div style="font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left">testo testo</div>

« citazione citazione citazione citazione citazione »

SPOILER (clicca per visualizzare)

CODICE

<div align="center"><div style="width: 302px; background: #fff; border: 2px solid #18b1c3; font-family: georgia; font-size: 12px; color: #808080; padding: 2px; text-align: left"><div style="text-align: center; color: #fa812a; padding: 2px">« citazione citazione citazione citazione citazione »</div><div style="float: left; margin-right: 10px; margin-left: 10px">[IMG]http://www.hosting.universalsite.org/images1/sfondo-232480166.png[/IMG]</div> testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.
<div style="letter-spacing: 2px; background: #fa812a; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div></div></div></div>

Passo 4: L'ultimo Box.
Per l'ultimo riquadro bisogna creare un nuovo div style. Nel nostro caso è questo:

CODICE

<div style="letter-spacing: 2px; background: #fa812a; color: #fff; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic">Qualcosa o quello che vuoi~</div>

Come notate ho aggiunto un letter-spacing, un margin e un font-style.

Adesso mettete il codice nella parte finale e otterrete il vostro schema =)

« citazione citazione citazione citazione citazione »

Qualcosa o quello che vuoi~

SPOILER (clicca per visualizzare)

CODICE

Più di così non so come spiegarmi. Dovete prenderci la mano e usare le proprietà con diligenza. All fine credetemi, è tutta una questione di pratica.

Per iniziare potete usare i codici che ho postato di volta in volta e aggiungerci proprietà che volete.

Edited by -spiker - 15/11/2011, 19:22

Web

10 replies since 15/11/2011, 14:34 7917 views

ABC del HTML♥ {secondo -spiki}

per realizzare codici, firme e molto altro.