AngelodiluceInternet

Corso HTML,avatar,gif,sfondi, ,icone, programmi free ,aforismi,poesie,Karaoke
 
IndiceCalendarioFAQCercaLista UtentiGruppiRegistratiAccedi
Cerca
 
 

Risultati secondo:
 
Rechercher Ricerca avanzata
Argomenti simili
calendario
Contavisite
Migliori postatori
Angelodiluce
 
Valentina
 
raffaeled3
 
Luca
 
Lady
 
Eleonora
 
Stella
 
leona
 
Lia
 
michela2
 
Chi è in linea
In totale ci sono 3 utenti in linea: 0 Registrati, 0 Nascosti e 3 Ospiti

Nessuno

Il numero massimo di utenti online contemporaneamente è stato 158 il Lun Dic 10, 2012 9:48 pm
Statistiche
Abbiamo 38 membri registrati
L'ultimo utente registrato è Cristiano71

I nostri membri hanno inviato un totale di 653 messaggi in 646 argomenti
traduttore
PAGERANK
Page Rank Checker Button
Partner



Condividere | 
 

 Elementi di formattazione testo

Vedere l'argomento precedente Vedere l'argomento seguente Andare in basso 
AutoreMessaggio
Angelodiluce
Admin
avatar

Messaggi : 925
Data d'iscrizione : 19.06.10

MessaggioTitolo: Elementi di formattazione testo   Sab Giu 19, 2010 7:38 am

Il Testo Cosa sarebbe una pagina web senza testo?
Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. Oltre al colore e al tipo di font (carattere) ci sono molti altri elementi che servono per formattarlo ed impaginarlo.

Codice:
<BASEFONT>

Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di
Codice:
<font size=.......>
Il valore di default è 3 e può essere compreso tra 1 e 7. Questo Tag è in via di estinzione visto che i nuovi browser ed i relativi fogli di style hanno fatto si che vi sia una tendenza a non adoperarlo più

Codice:
<basefont size="4"> 

Si possono inserire anche altri due attributi

face specifica il tipo di font

color specifica il colore che potrebbe essere espresso oltre che col nome in inglese anche con il codice numerico esadecimale.

Codice:
<basefont size="4" face="arial" color="green">


Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:

Codice:
body {
font-size: 14pt;
font-family: arial, verdana, sans-serif;
color: green;
}


Il mio consiglio è di non adoperarlo, guardate quello che è possibile fare con i CSS fogli di style e capirete il perchè.




--------------------------------------------------------------------------------




L'elemento
Codice:
 <br>
specifica che una nuova riga deve iniziare in un determinato punto, un ritorno a capo forzato, più
Codice:
<br>
consecutivi equivalgono a più righe saltate.

Codice:
<br> 

Con l'aggiunta di immagini flottanti, allineate a destra o sinistra con il testo che le contorna, è possibile aggiungere l'attributo CLEAR con i seguenti risultati:

clear="left": spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine sinistro libero.

clear="right": stessa cosa ma con margine libero destro.

clear="all": Si sposta verso il basso fino a quando entrambi i margini non siano liberi da immagini.

Codice:
<br clear="all">



--------------------------------------------------------------------------------

Codice:
<CENTER>...</CENTER>

Tutto ciò che si trova fra gli elementi center e /center sarà centrato rispetto ai margini destro e sinistro della finestra del browser. Questo Tag è in disuso da quando elementi quali
offrono maggiore flessibilità, si ottengono analoghi risultati anche assegnando l'attributo align="center" ai vari tags di formattazione.

Codice:
<center>

Questo testo è centrato sulla finestra di visualizzazione
</center> 



Questo testo è centrato sulla finestra di visualizzazione



Deprecato, meglio usare un contenitore come
Codice:
<div>
al quale assegnare un attributo di allineamento centrato:

Codice:
<div align="center">...</div>





--------------------------------------------------------------------------------

Codice:
<!--    -->

Consente di lasciare un testo di commento all'interno del listato html senza che questo possa influire o essere visualizzato dal browser.



Codice:
<!--
Questo testo non serve a niente per il buon funzionamento della pagina web, è semplicemente un commento, un qualcosa da ricordare dovendo visionare e modificare il listato.
Codice:
--> 

I simboli di commento sono molto utili anche per gli script ed i fogli di style e servono a nascondere il listato a quei browser che non supportano ne script ne fogli di style, anche se mi chiedo quanti e quali saranno i browser ancora in funzione che non supportano queste due cose divenute ormai parte integrante del web.




--------------------------------------------------------------------------------

Codice:
<DIV>...</DIV>

L'elemento
Codice:
<DIV>
non ha una sua vera e propria caratteristica, serve infatti da supporto, da scatola contenitore ed è molto usato anche con l'associazione dei fogli di style. Tutti gli attributi e le associazioni applicate al tag DIV saranno estese a tutto il blocco di codice in esso contenuto.

Codice:
<div align="center">


Questa riga di testo ed anche eventuali altri elementi,
se presenti,
subiranno l'allineamento centrato.

</div> 




Questa riga di testo ed anche eventuali altri elementi,
se presenti,
subiranno l'allineamento centrato.



L'uso del contenitore div provoca un ritorno a capo con la sua chiusura /div




--------------------------------------------------------------------------------

Codice:
<SPAN>...</SPAN>

L'elemento
Codice:
<span>
non ha alcuna caratteristica se non quella di fare da supporto per gli stili, come DIV si presta bene come contenitore per l'associazione di tutto quello che serve ad Html.

Codice:
<span style="color: red">
Questa riga di testo è colorata di rosso, anzi di red. :-)
</span> 



Questa riga di testo è colorata di rosso, anzi di red. :-)



L'uso del contenitore SPAN non provoca alcun ritorno a capo con la sua chiusura /SPAN, a differenza di /DIV ed è quindi indicato per assegnare attributi con i CSS a parti di un testo senza scombinarne l'impaginazione.




--------------------------------------------------------------------------------

Codice:
<FONT>...</FONT>

L'elemento
Codice:
<FONT>
definisce le dimensioni, il colore ed il tipo di carattere adoperato per la scrittura del testo. Questo Tag viene adoperato sempre meno dal momento che i fogli di style riescono a gestire il tutto in modo più semplice e versatile. Il Tag
Codice:
<font>
ha dimensione di base (default) del carattere uguale a 3, si veda a questo proposito anche
Codice:
<basefont>.
Font da solo non ha ragione di esistere, al suo interno si deve sempre inserire almeno un attributo.

Codice:
<font attributo="specifica">
Testo che avrà tutti gli attributi specificati nel tag font
</font> 

E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre fosse presente il browser adopererà quello di default. Evitate dunque fonts particolari e poco comuni o quasi sicuramente nessuno riuscirà poi a vedere il testo allo stesso modo di come avreste voluto voi.


face="nome" [,nome] [,nome] L'attributo face imposta il carattere utilizzato e questo deve trovarsi già installato nel computer dell'utente, le alternative sono separate da uno spazio e da una virgola.

Codice:
<font face="Comic Sans MS">Testo con font Comic Sans MS</font> 

Testo con font Comic Sans MS

color="#rrggbb" oppure COLOR="nome" in inglese del colore. A questo proposito su questa pagina è possibile vedere 140 colori di base.

Codice:
<font color="red">Testo con font di colore rosso</font>


Testo con font di colore rosso

SIZE="n" oppure SIZE="+n" o anche SIZE="-n" dove n è un numero compreso fra 1 e 7, mentre i vari + o - si riferiscono al numero che per default è 3, salvo variazioni specificate con basefont

Codice:
<font size="-1">Testo con font di dimensione -1 rispetto a quella di default. </font> 
Testo con font di dimensione -1 rispetto a quella di default.
Tutti gli attributi di font possono essere adoperati anche contemporaneamente

Codice:
<font face="Comic Sans MS" color="red" size="-1">
Testo con font Comic di colore rosso ed una dimensione -1
</font> 


Testo con font Comic di colore rosso ed una dimensione -1



Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:

Codice:
body {
font-size: 14pt;
font-family: "Comic Sans MS", arial, sans-serif;
color: red;
}




--------------------------------------------------------------------------------

Codice:
<HR>

L'elemento
Codice:
 <HR>
Horizontal Rules, altro non è che una linea orizzontale divisoria, come quella che potete vedere in questa pagina a divisione dei vari elementi (tags), per default questa linea è ombreggiata e in rilievo. Si possono modificare i vari attributi.

Codice:
 <hr> questo sotto il risultato </hr>


questo sotto il risultato
--------------------------------------------------------------------------------

attributi di formattazione quali: align
noshade
size
width
color



evidenziati in giallo gli attributi proprietari di singoli browser dei quali si sconsiglia l'utilizzo.


Codice:
<hr align=left | right | center>Dove left right center sono allineamento a sinistra, a destra o centrato

Adopero una linea ridotta del 50% per meglio rendere l'idea </hr>


Dove left right center sono allineamento a sinistra, a destra o centrato

Adopero una linea ridotta del 50% per meglio rendere l'idea

Codice:
<hr align="left">dove vuoi</hr>


dove vuoi
--------------------------------------------------------------------------------


Codice:
<hr align="right">destra</hr>



destra

--------------------------------------------------------------------------------


Codice:
<hr align="center">centro</hr>



centro
--------------------------------------------------------------------------------




Codice:
<hr color=nome | #rrggbb>Dove nome è il nome in inglese di uno dei colori possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto. L'attributo color è supportato dai soli browser IE.</hr>


Dove nome è il nome in inglese di uno dei colori possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto. L'attributo color è supportato dai soli browser IE.


colora di rosso
--------------------------------------------------------------------------------



color attributo proprietario di singoli browser, se ne sconsiglia l'utilizzo.


Codice:
<hr noshade>
Nessuna ombreggiatura, praticamente una barra solida.

Codice:
<hr noshade>
--------------------------------------------------------------------------------


Codice:
<HR SIZE=numero>
Dove numero è espresso in pixel e si riferisce allo spessore della barra.

una riga di spessore 5 pixel
Codice:
<hr size="50">


--------------------------------------------------------------------------------


Codice:
<HR WIDTH=numero | percentuale>
Senza alcuna specifica la linea orizzontale occupa tutta la largezza della pagina. Con questo attributo si possono specificare con esattezza la sua ampiezza, dove numero sono i pixel. percentuale invece è relativa alla percentuale della finestra del browser

una riga di lunhezza 150 pixel
Codice:
<hr width="150">
--------------------------------------------------------------------------------


Si possono anche combinare i vari attributi, quello sotto è un esempio per ottenere una riga che sia di colore blu, spessore 3 pixel, che occupi il 70% della finestra alla quale è destinata e che non sia ombreggiata (la percentuale di ampiezza è relativa alla cornice che la ospita):

Codice:
<hr width="70%" size="3" noshade>
--------------------------------------------------------------------------------



Consiglio, meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag hr:

Codice:
hr {
height: 3px;
width: 70%;
}




--------------------------------------------------------------------------------

Codice:
<Hx>...<Hx>

Titoli - è possibile avere sei livelli di titolo che dimensionano i caratteri. Il più alto livello è
Codice:
<H1>
scalano a salire tutti gli altri:


--------------------------------------------------------------------------------

Codice:
<H1>...</H1>
Grassetto, carattere molto grande e centrato, una o due righe vuote sopra e sotto.

--------------------------------------------------------------------------------

Codice:
<H2>...</H2>
Grassetto, carattere grande a sinistra, una o due righe vuote sopra e sotto.

--------------------------------------------------------------------------------

Codice:
<H3>...</H3>
Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto.

--------------------------------------------------------------------------------

Codice:
<H4>...</H4>
Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto.

--------------------------------------------------------------------------------

Codice:
<H5>...</H5>
Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra.

--------------------------------------------------------------------------------

Codice:
<H6>...</H6>
Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra.


Consiglio, è possibile ridefinire in un foglio di stile CSS i vari tags

,

,

,

,

,
inserendo tutte le personalizzazioni che si desiderano, basterà poi richiamarlo alla solita maniera per avere un risultato decisamente diverso che definirei molto più versatile e comodo.

Codice:
h1{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16pt;
color: #006400;
font-style: italic;
text-indent: 12pt;
}




--------------------------------------------------------------------------------

Codice:
<P>...</P>

L'elemento

specifica un paragrafo di testo, ha come attributo ALIGN che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra e giustificato. Viene adoperato prevalentemente con l'attributo CLASS che richiama una classe di style in modo da avere paragrafi con font, colori e formattazioni personalizzate. Si veda a questo proposito le spiegazioni relative ai fogli di stile.

Codice:
<p align="left">Questo paragrafo è allineato a sinistra.</p>

Questo paragrafo è allineato a sinistra.



Questo paragrafo è allineato a sinistra.



Codice:
<p align="right">Questo paragrafo invece è allineato a destra.</p>

Questo paragrafo invece è allineato a destra.



Questo paragrafo invece è allineato a destra.



Codice:
<p align="center">Questo paragrafo è allineato al centro.</p>

Questo paragrafo è allineato al centro.



Questo paragrafo è allineato al centro.



Codice:
<p align="justify">Questo paragrafo è allineato al centro con giustificazione.</p>

Questo paragrafo è allineato al centro con giustificazione.



Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ? Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi fra le parole.



Consiglio, è possibile ridefinire il tag

all'interno di un foglio di stile (CSS) o creare una apposita classe ed inserire tutte le varie personalizzazioni, basterà poi richiamare questa classe per avere un risultato uguale su tutti i paragrafi della pagina web.

Codice:
p{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16pt;
color: #006400;
text-indent: 12pt;
}





--------------------------------------------------------------------------------

Codice:
<B>...</B>

L'elemento specifica un blocco di testo da mostrare in grassetto (bold). Risultato simile si ottiene anche con
Codice:
<STRONG>...</STRONG>

Questa guida è offerta da yuo tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.


Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.






--------------------------------------------------------------------------------

Codice:
<U>...</U>

L'elemento
Codice:
<U>
specifica un blocco di testo da mostrare sottolineato (underline).

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.


Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.






--------------------------------------------------------------------------------

Codice:
<I>...</I>

L'elemento
Codice:
<I>
specifica un blocco di testo da mostrare in corsivo (italic). Risultato simile si ottiene anche con
Codice:
<EM>...</EM>

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.




Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio posso scrivere weblink in modo marcato, inclinato e sottolineato:

Questa guida è offerta da
Codice:
<U><I><B> Web-Link </B></I></U>
tutto per la tua pagina web.


Questa guida è offerta da Web-Link tutto per la tua pagina web.


Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.
I: Riproduce come stile corsivo del testo.
B: Riproduce come stile grassetto del testo.
BIG: Riproduce il testo con un carattere "grande".
SMALL: Riproduce il testo con un carattere "piccolo".
STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
U:Disapprovato. Riproduce del testo sottolineato.






--------------------------------------------------------------------------------

Codice:
<PRE>...</PRE>

L'elemento
Codice:
<PRE>
specifica un blocco di testo preformattato, cioè a larghezza e spaziatura fissa. Attenzione: talmente fissa che non torna neppure a capo se non con il comando
Codice:
<br>.

Codice:
<pre> Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente <br> dai vari parametri di pagina </pre>


 Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente 
dai vari parametri di pagina


Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://angelodiluceinternet.forum-ativo.com
 
Elementi di formattazione testo
Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto 
Pagina 1 di 1
 Argomenti simili
-
» Quale testo unico sotto l'albero di Natale?
» cerco libro per le vacanze con testo in stampato maiuscolo, classe prima primaria
» TARI: il testo approvato
» Cerco Prove MT, Comprensione del testo, classe IV
» LIBRI DI TESTO E INSEGNANTI DI SOSTEGNO

Permessi di questa sezione del forum:Non puoi rispondere agli argomenti in questo forum
AngelodiluceInternet :: Lezioni di HTML-
Andare verso: