Lezioni di html/css #02: Font parte seconda!

Abbiamo imparato a creare un minimo di titolo, adesso passiamo alla formattazione del resto del testo!
Per prima cosa cambiamo il tipo di font in questo modo:
<font face="Georgia">Questo è un testo di prova.</font>
Risultato: Questo è un testo di prova.

Adesso invece vogliamo renderlo giustificato e per fare ciò ricorriamo alla nostra vecchia conoscenza: il tag div. Quindi scriveremo:
<div align="center"><font face="Georgia">Questo è un testo di prova.</font></div>

Come facciamo ora a provarlo per vedere se funziona? Utilizziamo un testo più corto ed un'area più piccola specificando al div la larghezza in pixel che deve assumere, in questo modo:
<div align="justify" style="width: 150px"><font face="Georgia">Questo è un testo di prova per vedere se il codice scritto fino ad ora funziona correttamente.</font></div>
Risultato:

Questo è un testo di prova per vedere se il codice scritto fino ad ora funziona correttamente.

Funziona! Adesso il tocco finale, stabiliamo un colore di sfondo per la nostra area: un grigio chiaro:
<div align="justify" style="width: 150px; background-color: #eeeeee"><font face="Georgia">Questo è un testo di prova per vedere se il codice scritto fino ad ora funziona correttamente.</font></div>

Questo è un testo di prova per vedere se il codice scritto fino ad ora funziona correttamente.

E anche per oggi la lezione è terminata! Alla prossima!

Form per forum #02: Red Cage

• Prima voce:	Prima risposta
• Seconda voce:	Seconda risposta
• Terza voce:	Terza risposta
copyright | schala

Codice:

<table align="center" style="background-color: #efefef; color: #2f2f2f; font-family: georgia; font-size: 10pt; border-bottom-style: dashed; border-color: #b62e4b; border-left-style: solid; border-right-style: solid; border-top-style: dashed; border-width: 0.1em 0.5em 0.1em 0.5em; padding: 4px;">
<tbody>
<tr>
<td>• <b>P</b><i>rima voce:</i></td>
<td>Prima risposta</td>
</tr>
<tr>
<td>• <b>S</b><i>econda voce:</i></td>
<td>Seconda risposta</td>
</tr>
<tr>
<td>• <b>T</b><i>erza voce:</i></td>
<td>Terza risposta</td>
</tr>
<tr>
<td colspan="2" style="font-size: 8pt; text-align: center;">copyright | <a href="http://schala-codes.blogspot.com/">schala</a></td>
</tr>
</tbody></table>

Lezioni di html/css #01: Font

Iniziamo con qualche lezioncina di html! Il primo argomento trattato sono i font, cioè i testi, perché spesso le pagine web vengono create come presentazioni (al posto magari di un file power point) e per questo motivo è importante saper formattare il nostro testo!

Partiamo dal titolo: "Questo è un titolo". Non abbiamo applicato nulla, così com'è è identico al testo normale e perciò non sembra nemmeno un titolo. Non va bene!

Per prima cosa iniziamo a racchiuderlo tra i due tag font in questo modo: <font>Questo è un titolo</font>

Ancora non è cambiato niente, ma ora la vostra pagina html, sà che tutto il testo racchiuso tra i due tag subirà delle possibili trasformazioni.

Adesso rendiamolo grassetto! Es: Questo è un titolo
html: <font><b>Questo è un titolo</b></font>
Il tag b serve proprio ad indicare il grassetto e può essere racchiudere un testo, senza bisogno di specificare il tag font (che però noi useremo quindi abbiamo già inserito.

Ora vogliamo renderlo più grande! Deve distinguersi di più dal resto del testo perciò vogliamo qualcosa del tipo: Questo è un titolo.
Come fare? Semplice html: <font size="12pt"><b>Questo è un titolo</b></font>
L'attributo size, indica la dimensione del nostro font espressa in pt (point).

Ma questo non ci basta! Vogliamo renderlo centrato. Ok niente di più semplice:

Questo è un titolo

html: <div align="center"><font size="12pt"><b>Questo è un titolo</b></font></div>

Ok, abbiamo aggiunto un altro tag, un "div". Che cos'è? Diciamo che esprime un'area (infatti possiamo, volendo specificarne le dimensioni). L'attributo align indica l'allineamento e lo abbiamo messo su centrato.

Ultimo step: cambiamo il colore, ci piace un bel rosso.

Questo è un titolo

html: <div align="center"><font color="red" size="12pt"><b>Questo è un titolo</b></font></div>

Form per forum #01: Grayscale

→ Prima voce:	Prima risposta
→ Seconda voce:	Seconda risposta
→ Terza voce:	Terza risposta
copyright | schala

Codice:

<table align="center" style="background-color: #efefef; border-bottom-style: solid; border-top-style: solid; color: #2f2f2f; font-family: Georgia; font-size: 10pt;">
<tbody>
<tr>
<td><b>→ <u>Prima voce:</u></b></td>
<td>Prima risposta</td>
</tr>
<tr>
<td><b>→ <u>Seconda voce:</u></b></td>
<td>Seconda risposta</td>
</tr>
<tr>
<td><b>→ <u>Terza voce:</u></b></td>
<td>Terza risposta</td>
</tr>
<tr>
<td colspan="2" style="font-size: 8pt; text-align: center;">copyright | <a href="http://schala-codes.blogspot.com/">schala</a></td>
</tr>
</tbody></table>

Code Role #06: Mistress of puppets

{Nome Piggi, Razza, link scheda}

testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

copyright | code by schala

Codice:

<fieldset style="background-color: #c4a0af; border-bottom-style: dashed; border-color: #b62e4b; border-left-style: solid; border-right-style: solid; border-top-style: dashed; border-width: 0.1em 0.5em 0.1em 0.5em; padding: 4px; width: 450px;">
<legend><div style="color: #f22a42; font-family: georgia; font-size: 15pt;">
{<b>N</b><i>ome</i> <b>P</b><i>iggi</i>, <i>Razza, link scheda</i>}</div></legend>
<div style="float: left; padding: 2px;"><img src="http://i.imgur.com/ay1Bv.png"></div><div style="font-family: georgia; font-size: 10pt; line-height: 9pt; color: #674e58;">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo 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>
<div align="center" style="color: #674e58;">copyright | code by <a href="http://schala-codes.blogspot.com/">schala</a></div></fieldset>

Code Role #05: Gran gala

Nome Cognome, link scheda

link vestito; riferito a: tutti/nome

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che la diretta via era smarrita.
Ahi quanto a dir qual'era è cosa ardua e dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!
Tant’è amara che poco è più morte ma per trattar del ben ch’i’ vi trovai dirò de l’altre cose ch’i’ v’ ho scorte.
Io non so ben ridir com’i’ v’intrai tant’era pien di sonno a quel punto che la verace via abbandonai.

copyright | code by schala

Codice:

<div style="border-width: 4; border-top-style:solid; border-bottom-style:solid; border-color: #a00057; background-color: #313131; color:#e5e5e5; font-size:9pt; line-height:10pt; font-family: tahoma"><div style="float: left"><img src="http://imgur.com/Vduah.jpg"></div><div style="background-color: black; line-height: 12pt; font-size: 15pt; font-family:georgia; color: white">Nome Cognome, link scheda</div><div style=" line-height: 12pt; font-size:12pt; font-family:georgia; color: #eeeeee; border-width: 1; border-bottom-style:dashed;">link vestito; riferito a: tutti/nome</div>Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che la diretta via era smarrita.
Ahi quanto a dir qual'era è cosa ardua e dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!
Tant’è amara che poco è più morte ma per trattar del ben ch’i’ vi trovai dirò de l’altre cose ch’i’ v’ ho scorte.
Io non so ben ridir com’i’ v’intrai tant’era pien di sonno a quel punto che la verace via abbandonai.
<p align="center" style="font-size: 8pt;line-height: 12pt; margin-bottom: 1px; margin-top: 5px">copyright | code by <a href="http://schala-codes.blogspot.com/">schala</a></p></div>

Code Role #04: Newspaper kind

Nome Cognome; Razza; link scheda

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum


copyright | code by schala

Codice:

<div align="center">
<div style="width: 500px;">
<img src="http://i.imgur.com/lFFMN.png" />
<div align="center" style="background-color: #f9d9c2;">
<span align="center" style="color: #1b1b1b; font-family: Georgia; font-size: large; line-height: 1;">Nome Cognome; Razza; <a href="http://www.blogger.com/post-create.g?blogID=2878346644169686475#">link scheda</a></span></div>
<div align="justify" style="background-color: #f6e0d0; padding: 3;">
<span align="justify" style="color: #1b1b1b; font-family: georgia; font-size: x-small; line-height: 1;">Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum</span>

<center>copyright | code by <a href="http://schala-codes.blogspot.com/">schala</a></center></div>
</div>
</div>