|
Con l'HTML possiamo decidere in qualunque punto della nostra pagina di cambiare le proprietà del testo, e cioè il colore, il tipo di carattere, la dimensione e lo stile (grassetto, corsivo…). Tutte le operazioni di modifica delle proprietà del testo dovremo batterle dopo il tag <BODY> e prima del tag </BODY>. Prima di tutto battiamo il tag <FONT attributi> per modificare una o tutte le proprietà del testo, immettendo alcuni o tutti i seguenti attributi: - FACE=”TipoCarattere” : mettiamo tra le virgolette il nome di un carattere (Arial, per esempio).
- SIZE=numero : mettiamo dopo il segno = un numero, senza le virgolette, per specificare la dimensione del testo.
- COLOR=”colore” : tra le virgolette mettiamo il nome inglese di un colore o il suo codice corrispondente. Il codice è composto dal simbolo # e da tre coppie di numeri esadecimali: la prima coppia riguarda la quantità di rosso nel colore, la seconda riguarda la quantità di blu e la terza la quantità di giallo.
- ALIGN=”allineamento” : mettiamo tra le virgolette CENTER, LEFT o RIGHT. Se non mettiamo l’attributo “ALIGN” il testo verrà allineato automaticamente a destra.
Dopo aver battuto questo tag con relativi attributi, scriviamo il testo che vogliamo abbia le proprietà settate appunto con il tag <FONT>. Tutto il testo che sarà presente dopo aver digitato questo tag avrà le stesse proprietà. Per cambiarle basterà ripetere il tag con diversi attributi. Se però vogliamo, per esempio, inserire in una pagina una frase scritta di colore nero ma una sola parola la vogliamo fare rossa bisognerà fare in questo modo:
<FONT FACE=”Arial” SIZE=3 COLOR=”Black”>
Il mio cane <FONT COLOR=”Red”>abbaia </FONT>. Risultato: Il mio cane abbaia.
In questo modo avremo che tutte le parole saranno di dimensione 3 e di carattere Arial ma il colore sarà nero per tutte le parole tranne “Abbaia”, che sarà scritta in rosso. Infatti possiamo nidificare i tag <FONT> ricordandoci di battere </FONT> quando abbiamo finito di scrivere il nostro testo. La gestione dello stile in HTML, invece, è un po’ più semplice da capire. Possiamo nidificare (vale a dire inserire tag all'interno di un altro tag) tutti i tag di stile che vogliamo, facendo però attenzione ad una piccola regola: l’ultimo tag che abbiamo dichiarato deve essere il primo ad essere chiuso. I tag di stile sono i seguenti: - <B> frase </B> : indica che tutte le parole comprese tra i due tag saranno visualizzate in grassetto;
- <I> frase </I> : indica che tutte le parole comprese tra i due tag saranno visualizzate in corsivo;
- <STRONG> frase </STRONG> : è un altro modo per indicare che tutte le parole comprese tra i due tag saranno visualizzate in corsivo;
- <STRIKE> frase </STRIKE> : indica che tutte le parole comprese tra i due tag saranno visualizzate barrate;
- <U> frase </U> : indica che tutte le parole comprese tra i due tag saranno visualizzate sottolineate.
Nello scrivere un testo, questo verrà riportato automaticamente a capo alla fine dello schermo. Badate bene, però: se nel vostro editor di testo scrivete
Oggi
Ho
Sonno
il testo sarà ugualmente visualizzato così:
Oggi Ho Sonno
perché per andare a capo "prematuramente" dobbiamo battere il tag <BR>. Quindi nell'editor di testo dovrete scrivere
Oggi<BR>
Ho<BR>
Sonno
Per specificare, invece, di NON andare a capo, scrivete così:
Oggi <NOBR>
Ho <NOBR>
Sonno <NOBR>
e il risultato sarà:
Oggi Ho Sonno
Ora passiamo a trattare la gestione degli spazi in HTML. Se vogliamo che venga visualizzata la frase “Ciao Mamma” con degli spazi tra Ciao e Mamma dovremo scrivere:
Ciao&nbs-p;&nbs-p;&nbs-p;&nbs-p;Mamma
perché in HTML possiamo anche battere con la barra infiniti spazi tra due parole, ma alla fine ne sarà visualizzato soltanto uno! Il codice che dobbiamo inserire per visualizzare uno spazio è appunto &nbs-p; (N.B.= togliere il trattino - tra la s e la p, è stato inserito per evitare che la sintassi si trasformasse in uno spazio  ). E’ presente in HTML un tag che permette di visualizzare esattamente ciò che abbiamo scritto nel modo in cui l’abbiamo scritto. Il tag è <PRE>, terminato ovviamente con </PRE>. Ecco un esempio pratico per capire meglio: se scriviamo
<PRE>
Oggi
Ho
Sonno
</PRE>
il risultato a video sarà:
Oggi
Ho
Sonno
Esiste anche un tag che permette di inserire un rientro al testo che scriviamo. Questo tag è <BLOCKQUOTE> e si usa scrivendo
Stampante: <BR>
<BLOCKQUOTE>
periferica da collegare ad un computer che permette di ...
</BLOCKQUOTE>
il risultato sarà:
Stampante:
periferica da collegare ad un computer che permette di ...
Può essere utile se dobbiamo inserire delle definizioni nella nostra pagina Web.
Per creare un elenco puntato, invece, scriviamo i tag <UL> e <LI> in questo modo:
Lista della spesa
<UL>
<LI>la pasta
<LI>il sale
<LI>un pacchetto di preservativi
<LI>i biscotti
</UL>
</BODY>
Il risultato sarà:
Lista della spesa
- la pasta
- il sale
- un pacchetto di caramelle
- i biscotti
Nella nostra pagina possiamo immettere un questionario in HTML a cui l’utente può rispondere e possiamo fare in modo che le risposte che l’utente ha dato ci vengano inviate automaticamente tramite posta elettronica. Per fare ciò usiamo i check box, ovvero quelle famose caselline che, se clickate, fanno comparire una V. Ecco un esempio di questionario:
Chi ritieni più simpatico?
<INPUT TYPE=CHECKBOX NAME="Bello_Mario" VALUE="YES"> Mario <BR>
<INPUT TYPE=CHECKBOX NAME="Bello_Franco" VALUE="YES"> Franco <BR>
<INPUT TYPE=CHECKBOX NAME="Bello_Gianni" VALUE="YES"> Gianni <BR>
<FORM METHOD=POST ACTION= "mailto:
Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo.
?subject=Risposta">
<INPUT TYPE=SUBMIT VALUE="Cliccami!"><BR>
Ogni tag <INPUT> crea un check box, mentre <INPUT TYPE=SUBMIT VALUE= "Cliccami!"> crea un bottone che invia le risposte a
Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo.
, come specifica il tag <FORM METHOD=POST ACTION= "mailto:
Questo indirizzo e-mail è protetto dallo spam bot. Abilita Javascript per vederlo.
?subject=Risposta">. Bisogna fare attenzione ad inserire prima il tag <FORM METHOD...> e poi il tag <INPUT TYPE=SUBMIT...>, inoltre non bisogna dimenticarsi di inserire il tag <FORM METHOD=...> altrimenti il bottone non funziona.
|
