HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Montaggio
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cucina
    • Salute e Benessere
    • Istruzione
    Tutto in Educazione >
  • Videogame
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Videogame >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Ritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
GuideHTMLJavaLinguaggio CPythonJavaScriptPHPC++CSSAndroidApprofondimenti
INDICE DELLA GUIDA
Primi passi
  1. 1 Introduzione all'HTML

  2. 2 Hello HTML! Creare la prima pagina

Strumenti
  1. 3 Strumenti di sviluppo, l'editor

  2. 4 Il Browser, che cos'è, come e perché tenerne conto

  3. 5 Software per immagini nelle pagine HTML

Elementi per il testo in HTML
  1. 6 Elementi e tag in HTML

  2. 7 Gli attributi

  3. 8 Titoli, paragrafi e testi

  4. 9 Grassetti e corsivi

  5. 10 Citazioni, acronimi, codice e altri elementi per il testo

  6. 11 Commenti in HTML

  7. 12 Elenchi puntati e numerati

  8. 13 Tabella: struttura di base

  9. 14 Raggruppare celle con rowspan e colspan

Ipertesti ed elementi multimediali
  1. 15 I link in HTML, l'ipertesto

  2. 16 I percorsi assoluti e relativi

  3. 17 I link interni o ancore

  4. 18 Gli attributi dei link

  5. 19 Inserire le immagini

  6. 20 Img src, inserire le immagini nel markup (base64, SVG)

  7. 21 Includere un file Audio

  8. 22 Includere un file Video

L’HTML e i fogli di stile (CSS)
  1. 23 Separare il layout dal contenuto

Lo sfondo di un documento HTML – edizione precedente
  1. 24 Impostare il colore di sfondo

  2. 25 Inserire un'immagine di sfondo

  3. 26 Eliminare i margini delle pagine

  4. 27 Approfondimenti: lo sfondo con i CSS

Il testo di un documento HTML – edizione precedente
  1. 28 Impostare il colore del testo e dei link per tutta la pagina

  2. 29 Scegliere il font del testo

  3. lezione
    30 di 58

    Scegliere il colore del testo

Le immagini e le mappe di immagine – edizione precedente
  1. 31 Disporre le immagini in un contesto

  2. 32 Le mappe di immagine

  3. 33 Le mappe di immagine lato server

Le tabelle – edizione precedente
  1. 34 Attributi del tag table

  2. 35 Attributi di <table>, <tr>, <td>

  3. 36 Impaginare un layout con le tabelle

I Frame – edizione precedente
  1. 37 Comporre una pagina in frame

  2. 38 Attributi dei frames per la visualizzazione

  3. 39 I link in un frameset e il tag noframes

  4. 40 L'iframe

  5. 41 Vantaggi e svantaggi dei frames

  6. 42 Impaginare a livelli con i CSS

I Moduli (forms) – edizione precedente
  1. 43 Struttura del tag <form>

  2. 44 Un po' d'ordine: raggruppare i moduli

  3. 45 Il tag Input

  4. 46 I bottoni (sumbit, reset, button, image)

  5. 47 Inserire testo (campo testo, textarea, password)

  6. 48 Consentire delle scelte (checkbox, radio, select)

  7. 49 Altri campi (file e hidden)

  8. 50 Approfondimenti sui form

Includere elementi multimediali e script – edizione precedente
  1. 51 Premessa: il tag object

  2. 52 Includere un file Flash

  3. 53 Includere un file Java

  4. 54 Includere script JavaScript o CSS esterni

Linguaggi e strumenti – edizione precedente
  1. 55 I meta tag

  2. 56 Il DOCTYPE (DTD)

  3. 57 Configurare un programma FTP

  4. 58 Conclusioni

  • Learn
  • Guida HTML
  • Scegliere il colore del testo
lezione
30 di 58

Scegliere il colore del testo

  • di Wolfgang Cecchin
  • 17 Marzo 2006

Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice:


<font color="blue">testo blu</font>
<br/>
ovvero:
<br/>
<font color="#0000FF">testo blu</font>

La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che “face” e “color” sono entrambi attributi del tag <font>):


<font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> 
testo blu in Verdana 
</font>

Una volta scelto il colore possiamo sempre decidere di cambiarlo:


<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana</font><br />
<font face="Verdana, Arial, Helvetica, sans-serif" color="red">testo rosso</font><br />
o meglio ancora:<br />
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">testo blu in Verdana<br />
	<font color="red">testo rosso</font><br />
</font>

La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l’uno dentro l’altro.

Le dimensioni del testo

Le dimensioni del testo si attribuisco mediante l’attributo ‘size’ del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>:

  • valori interi da 1 a 7
  • valori relativi alla dimensione di base del tag font (di default “3”)

Nel caso dei valori interi, ecco la scala di grandezza:


<font size="1">testo di grandezza 1</font><br />
<font size="2">testo di grandezza 2</font><br />
<font size="3">testo di grandezza 3</font><br />
<font size="4">testo di grandezza 4</font><br />
<font size="5">testo di grandezza 5</font><br />
<font size="6">testo di grandezza 6</font><br />
<font size="7">testo di grandezza 7</font>

Nel caso dei valori relativi alla dimensione di base è possibile “spostarsi” nella scala di grandezza del &;lt;font&;gt; utilizzando i segni “+” e “-“.

Abbiamo detto che la grandezza del font di base di default nel browser è 3.

Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l’esempio:


<font size="+2">
Testo di grandezza +2 rispetto al font di base (3).<br />
Cioè font di grandezza 5.
</font>
<br /><br />
<font size="5">
Testo di grandezza 5.
</font>

Come si può vedere le due sintassi sono equivalenti.

La grandezza del font di base può anche essere cambiata:


<basefont size="1" />
<font size="+2">
  Testo di 2 grandezze superiore al font di base, sopra definito.
</font>
<br />
<font size="3">
  Testo di grandezza 3.
</font>
<br /><br />
<basefont size="2" />
<font size="+2">
  Testo di 2 grandezze superiore al font di base, sopra ridefinito.
</font>
<br />
<font size="3">
  Testo di grandezza 3.
</font>

Come si può vedere nella pagina esemplificativa.

È importante evitare di cadere nell’errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base:


<font size="7">
Testo di grandezza 7
	<font size="-1">testo di grandezza inferiore di 1 al font di base (che di default è 3), NON al tag precedente</font>
</font>

In questo caso, ad esempio, sarebbe sbagliato aspettarsi una dimensione 6 dalla seconda istanza di <font>, perché la dimensione relativa fa sempre riferimento al <basefont>:

Anche se non è corretto farlo, Internet Explorer consente di utilizzare il tag <basefont> per impostare in una sola volta il tipo di carattere del testo e il suo colore, come si può vedere nell’esempio.

Tuttavia questo tipo di trucco non funziona correttamente né con Mozilla (e quindi neanche con Netscape 6 o superiore, dal momento che eredita il motore di rendering di Mozilla), né con Opera.

NOTA BENE

Quando state utilizzando il tag <font> – sia che utilizziate il size i valori interi, sia che utilizziate le i valori relativi al tag di base -, in realtà la grandezza del carattere dipende dalle impostazioni del browser dell’utente (come già abbiamo visto per i tag “heading”).

Con Internet Explorer ad esempio andando in: Visualizza > Carattere.

Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font.

Questo appunto per le grandezze da 1 a 7 sono grandezze anch’esse relative.

Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall’altra può risultare molto fastidiosa per il webmaster.

L’unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel.

Se vuoi aggiornamenti su Scegliere il colore del testo inserisci la tua e-mail nel box qui sotto:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

31 / 58

Disporre le immagini in un contesto

Ultime notizie

Google Cloud Services Platform in beta

Cybersecurity: nelle aziende manca una cultura della sicurezza

Marzipan: App universali per iOS e MacOS?

Pagina 404: l’importanza del design

(In)sicurezza dei Password manager

I Video di HTML.it

AMZ Team e il progetto Medical-box

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Raspberry Pi: guida all’uso

  • 19 Lezioni
  • Facile

Raspberry Pi è un single-board computer, molto utilizzato dai Maker nell’ambito del DIY. In questa guida vedremo come configurarlo ed utilizzarlo per creare applicazioni di vario tipo. Partendo dallo studio della scheda, procederemo con la configurazione e l’installazione del sistema di base, fino ad scoprire le potenzialità offerte da Raspberry Pi dal punto di vista dei Maker.

  • Domotica per Makers
  • Raspberry Foundation lancia Compute Module 3+

Java: Local-Variable Type Inference

Analizziamo la Local-Variable Type Inference (inferenza automatica del tipo) di Java, una caratteristica che non attiene direttamente il linguaggio ma la fase di compilazione del codice.

  • Java 8 è arrivato al termine del suo ciclo di vita
  • Amazon Corretto, nuova distribuzione di OpenJDK con supporto LTS

Google Cloud Services Platform in beta

Cybersecurity: nelle aziende manca una cultura della sicurezza

Marzipan: App universali per iOS e MacOS?

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.10.3