Pagina aggiornata... Venerdì, 12 gennaio 2024 * Tempo di caricamento 0.64 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Testo, font e personalizzazioni

..:: Testo, font e personalizzazioni ::..

Tra le prime cose da imparare quando si inizia a realizzare un sito o dei gadget web
è sicuramente, come impostare e personalizzare il font/carattere, per il testo dei contenuti,
ovviamente molto dipenderà dal tipo di sito o lavori che vogliamo realizzare

Benché ormai sia possibile "importare" qualsiasi tipo di font, leggete -> Font personalizzato nel sito
la scelta più semplice è utilizzare un font "standard" compatibile con i vari sistemi operativi
e/o browser, tipo Georgia, Palatino Linotype, Times New Roman, Arial, Trebuchet MS, Verdana,
Comic Sans MS, Courier New, comunque sceglierne uno che si legga bene, senza troppi fronzoli

Per chi è agli inizi è importante sapere che è possibile utilizzare tutti i font
che abbiamo sul nostro pc solo se si eseguono determinati passaggi, perché non è detto che
chi legge abbia gli stessi sul proprio, mi ripeto, leggete il tutorial linkato sopra

Iniziamo con i parametri base, il tipo di font/carattere, la misura ed il colore,
potremmo scrivere queste indicazioni nello style in linea, anche se sarà ovviamente più comodo
inserire questi ed altri parametri, per maggiori personalizzazioni, nei css/foglio di style

<font face="Arial" size="3" color="#a4584b">Testo</font>
Prova scrittura testo con style in linea

- Classe css per impostare lo style del font per il testo in tutta la pagina

<style type="text/css">
body {background-image: url('...'); o background-color: #xxxxxx;
text-align:center; o left o right;
font-family: "Georgia";
font-size : 14px;
color : #785c58
}
</style>

* Parametri base per inserire il font/carattere nei css/foglio di style

font-family:"Georgia"; : Nome del font/carattere

font-size: xxpx; o xxem 0 xx% : Misura del font/carattere, si può impostare in pixel,
in em* o in percentuale
*em è un'unità di misura utilizzata in tipografia, nel web 1 em equivale a 16 pixel,
io preferisco usare i pixel, più semplici da valutare - Guida dettagliata wikipedia-Em

color: #xxxxxx : Colore del font/carattere espresso con valore esadecimale,
6 elementi tra numeri e lettere, ad esempio per il colore nero sarà color: #000000
In questa pagina potrete vedere moltissimi colori con il proprio valore esadecimale
Colori esadecimali

Poche righe di codice per scrivere su qualunque punto della pagina ed il testo
si visualizzerà con le caratteristiche che abbiamo stabilito, potremmo però aver bisogno
di scrivere un titolo o un piccolo testo con delle caratteristiche differenti,
allora useremo il tag apposito per i paragrafi: <p>Testo</p>

- Paragrafo con personalizzazioni di style in linea

<p style="text-align: center; font-family:Courier New; font-size: 16px; color: #628182"> Testo</p>

Paragrafo con testo personalizzato

I paragrafi sono molto comodi nelle pagine web, "contenitori" versatili per scrivere
un testo con caratteristiche personalizzate anche differenti dal resto della pagina, è un blocco a se
per cui non si può affiancare a nulla, va a capo in automatico lasciando anche parecchio spazio
se non si stabilisce nello style che ovviamente è più comodo scrivere nei css/foglio di style
così da poter richiamare la classe ogni volta che occorre

Ecco un paio di esempi per le classi dei paragrafi, ai parametri base, font/carattere,
misura e colore ho aggiunto margin: 0px; per stabilire lo spazio con il contenuto della pagina.
In pratica di default, dopo la chiusa del paragrafo è come se ci fossero due a capo,
il parametro "margin: xpx;" ci permette di modificare questa caratteristica

<style type="text/css">
p.extra {
text-align:center;
font-family: "Georgia";
font-size: 14px;
color : #909753;
margin: 0px;
}
p.font_decor {
text-align:center;
font-family: "Cookie", cursive;
font-size: 26px;
color : #657785;
margin: 0px;
}
</style>

- Per richiamare le classi nel tag del paragrafo scriveremo:
<p class="extra">Testo</p> <p class="font_decor">Testo</p>

Testo scritto con la classe p.extra

Testo scritto con la classe p.font_decor


N.B.: Utilizzare un font/carattere personalizzato per scrivere i titoli nelle pagine può
penalizzare il sito in termini di indicizzazione, specifici tag html sono previsti per questa funzione
e hanno determinate regole, leggete la guida dettagliata qui -> w3schools tag titoli



Per modificare velocemente e in linea una parola o una piccola parte di testo
utilizziamo il tag <span style="...">Testo</span>

Nello style dell'esempio ho modificato solo il colore del testo ma ovviamente si può
aggiungere ogni parametro necessario <span style="color:#898f51">Testo</span>
Questo testo è una prova, questa parte è in verde e ora torna il marrone...

Anche per questo tag è possibile scrivere una o più classi dedicate nei css/foglio di style,
ecco un paio di esempi, con la prima classe il testo racchiuso nel tag sarà verde, in corsivo e
sottolineato, con la seconda invece, il testo sarà di colore azzurro e tutto maiuscolo

<style type="text/css">
span.decor {
color: #909753;
font-style: oblique;
text-decoration: underline
}
span.more {
color: #657785;
text-transform:uppercase
}
</style>

- Per richiamare le classi nel tag scriveremo:
<span class="decor">Testo</span> <span class="more">Testo</span>
* Testo di prova con la prima classe, ora sono nel tag span... e ora torno classico
* Testo di prova con la seconda classe, ora sono nel tag span... e ora torno classico

Ai parametri base per il testo, font, colore e misura, ne possiamo aggiungere
alcuni molto utili e altri decorativi, tutti i parametri si possono inserire in linea o nello style,
spesso sono scritti nello stesso modo ma in alcuni casi, in linea si usano solo brevi tag

text-align:center; o left o right; parametro necessario per la posizione del testo,
nella pagina o in un qualunque "contenitore" web

line-height: 1.5em; parametro per modificare lo spazio tra le righe del testo per ottenere
maggiore leggibilità, ovvero interlinea, il valore può essere espresso in pixel, em e percentuale

- Con alcuni font/caratteri diventa quasi indispensabile altrimenti il testo risulta troppo fitto

font-style: oblique; parametro per visualizzare il testo in corsivo
Per approfondire le proprietà del parametro font-style, leggete la guida qui -> css-tricks

Se occorre per evidenziare una parola o una frase, quindi in linea, si possono utilizzare i tag
<em>Testo</em> o <i>Testo</i>
In questo caso em non è il valore con cui esprimere una misura, sta per "emphasis"

font-weight:bold; parametro da inserire nello style per visualizzare il testo in grassetto,
direttamente nel testo si possono usare i tag <strong>Testo</strong> o <b>Testo</b>

text-decoration: underline; parametro da inserire nello style per visualizzare il testo sottolineato, direttamente nel testo si possono usare i tag <ins>Testo</ins> o <u>Testo</u>

text-decoration:line-through;parametro da inserire nello style per visualizzare il testo barrato, direttamente nel testo si può usare il tag <del>Testo</del>

- Questi tre parametri vanno inseriti nello style quindi se si vogliono utilizzare per una parola
o una frase si possono usare con il tag <span> o in un paragrafo <p>

text-transform:uppercase; le lettere saranno visibili tutte in maiuscolo
<span style="text-transform:uppercase;">testo visibile tutto in maiuscolo</span>
testo visibile tutto in maiuscolo

text-transform:lowercase; le lettere saranno visibili tutte in minuscolo
<span style="text-transform:lowercase;">TESTO VISIBILE TUTTO IN MINUSCOLO</span>
TESTO VISIBILE TUTTO IN MINUSCOLO

text-transform:capitalize; la prima lettera di ogni parola si visualizzerà in maiuscolo
<span style="text-transform:capitalize;">Testo....</span>
la prima lettera di ogni parola si visualizza in maiuscolo

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^
88%
Voti totali: 5
Rating... 5





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* ♥ Gif...

  


~ Pagina visitata da 2575 utenti


 H: 
Buona Primavera e ...buon weekend!





Segui il telaio su Facebook

Privacy Policy Cookie Policy

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..


Accessori e gadget del telaio...


Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Grazia
09/03/2025 18:13:32
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
 
ೡPenelope ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...