Pagina aggiornata... Venerdì, 12 gennaio 2024 * Tempo di caricamento 0.19 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 2992 utenti


 H: 
Buon Autunno !





Segui il telaio su Facebook

* 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...

Natale menu
..Natale menu..

ೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio

Sito o forum
Blogger-Blogspot

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...

ೡPenelope ♥
04/12/2025 02:20:20
Cara filod'arianna sistemato il link un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 11:57:26
Ti devo chiedere una gentilezza Penelope ^_^ ho modificato il dominio, potresti correggere il link del mio banner da librandosi.forumfree.it - a librandositralepagine.forumfree.it ? 🙏
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 10:40:55
Ciao carissima , ho preso un decoro per l'home natalizia ♥
ೡ Scritto in... Decori pagine Natale
 
ೡPenelope ♥
29/11/2025 18:34:13
Grazie a te carissima Marilinc
ೡ Scritto in... Settimanelli natalizi
 
ೡPenelope ♥
29/11/2025 18:30:37
Merci beaucoup chère Maleah, vous trouverez ici des modèles prêts à l'emploi pour Blogspot [Link] e ne peux pas réaliser de travaux sur commande, désolé
ೡ Scritto in... html e script Tutorial...
 
MARILINC
29/11/2025 08:59:51
Grazie infinite meravigliosi c'è solo l'imbarazzo della scelta!
ೡ Scritto in... Settimanelli natalizi
 
Maleah
26/11/2025 13:58:21
Bonjour de France,Je viens de découvrir ton superbe blog et suis très admirative pour l'excellent travail que tu fais.Je ne sais pas si tu acceptes de modifier des blogspots et tente ma demande d'aide :Je suis une créatrice depuis des années déjà mais j'avoue je suis NULLE quant à la mise en place " design" de mon blog.Accepterais-tu de me réaliser un design pour Noël ?Cela me comblerait de joie, mais si tu ne peux pas je comprendrais parfaitement ta décision.Merci de ta réponse & encore UN IMMENSE BRAVO pour tes diverses créations.Amitié virtuelle.Maleah-Sunsunmaleah@gmail.com
ೡ Scritto in... html e script Tutorial...
 
ೡPenelope ♥
13/11/2025 20:28:01
Grazie infinite cara Dany
ೡ Scritto in... Romantici vintage
 
DanyGraphic
12/11/2025 22:56:52
Ciao Penelope i template sono carinissimi come tutti i tuoi lavori d'altra parte. Ti faccio tanti complimenti. Un abbraccio grande, dolce ♥♥
ೡ Scritto in... Romantici vintage
 
ೡPenelope ♥
12/11/2025 22:27:17
Ciao Elżbieta ti ringrazio per il complimento, per la traduzione puoi usare Google Un abbraccio
ೡ Scritto in... Home