Homepage > Ottima guida all'Html

Ottima guida all'Html

12.09.2012 19:06

INDICE: |

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

| 1) Materiale occorrente |

| 2) Tags di apertura |

| 3) HEAD & C |

| 4) BODY |

| 5) Formattazione del testo |

| 6) FONT |

| 7) A capo e simili |

| 8) IMG |

| 9) LINK |

| 10) Ancora un po' di formattazione |

| 11) Commenti |

| 12) Frame |

| 13) Tabelle |

| 14) Form |

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

Materiale occorrente.

Per creare una pagina WEB basta un qualsiasi editor di testo. L'importante è salvare

il file da voi creato con l'estensione .HTML o .HTM . Non servono compilatori o cose

strane, servono soltanto un po' di buona volontà.

Necessario però è un visualizzatore! Cosa sono? Sono quei programmi tipo: Netscape,

Explorer, Mozilla, Apache... Sono quei programmi che permettono di navigare su

internet. Questi servono per visualizzare poi il risultato effettivo della vostra

pagina.

Tags di apertura

La pagina HTML deve sempre finire e chiudere con:

<HTML>

</HTML>

Questi sono i tags necessari per il riconoscimento della pagina!

In mezzo fra essi verranno messi tutti i vari tags (comandi) che studieremo da qui

in avanti.

HEAD & C

Guardate:

<HEAD>

</HEAD>

Sono altri due tags necessari. Questi contengono le impostazioni della pagina che

saranno: il titolo, l'autore, ecc..

Per impostare il titolo bisogna usare il comando <TITLE></TITLE>

Quindi ora rincominciamo da capo:

-----INIZIO---------

<HTML>

<HEAD>

<TITLE>Pagina di prova</TITLE>

</HEAD>

</HTML>

--------FINE-------

Cosa possiamo capire da questo? Che ogni comando va aperto <comando> e chiuso

</comando>. Non importa le maiuscole e le minuscole e ne a capo e non.

RICORDATE: 2 spazi o più vengono letti come uno solo. Quindi:

Sono assolutamente uguali!

Esistono anche i comandi <META> ma ve li spiegerò più avanti perchè c'è un

discorsetto da fare in proposito un po' lunghetto...

BODY

è quel comando che regola il modo di visualizzare i comandi successivi.

Ve lo spiegherò accuratamente dopo l'esempio:

-----INIZIO---------

<HTML>

<HEAD>

<TITLE>Pagina di prova</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

--------FINE-------

Salvate questa pagina (esempio: file.htm) e visualizzatela!

Vedrete soltanto il titolo!

Molto bene! Ora parliamo di BODY!

Scrivete fra <BODY> e </BODY> una frase e visualizzatela.

TOH! E' comparsa la nostra frase!

Questo è uno delle funzioni di BODY le altre sono:

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

| BGCOLOR | ES: <BODY BGCOLOR="#FFFFFF"></BODY> | Cambia il colore |

| | | di sfondo |

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

| BACKGROUND | ES: <BODY BACKGROUND="ciao.jpg"> | Mette un'immagine |

| | </BODY> | di sfondo |

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

| TEXT | ES: <BODY TEXT="#FFFF00"> | Imposta il colore del |

| | </BODY> | testo |

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

| LINK | ES: <BODY LINK="#FF0000"> | Imposta il colore dei |

| | </BODY> | link |

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

| ALINK | ES: <BODY LINK="#080000"> | Imposta il colore dei |

| | </BODY> | link attivi |

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

| VLINK | ES: <BODY VLINK="#800000"> | Imposta il colore dei |

| | </BODY> | link già visti |

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

Per sapere quali sono i colori, io da bravo da ragazzo (mah...) vi ho allegato un

file chiamato colori.jpg ove ci sono tutti i tipi di colori accettati.

Questo modo di colorare a livello numerico non è altro che la trascrizione dei

colori in modo esadecimale. Forse un giorno vi spieghero come...

Per capire meglio il concetto dei colori dei link fate esempi!

Formattazione del testo

Tabellina!

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

| <B></B> | Grassetto |

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

| <I></I> | Corsivo |

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

| <U></U> | Sottolineato |

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

| <TT></TT> | Spaziatura |

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

Con questo c'è poco da aggiungere.

L'unica regola è questa:

<B><I>CIAO MAMMA!</I></B> Giusto!

<B><I>CIAO MAMMA!</B></I> Sbagliato!

Perchè la seconda è sbagliata? Perchè non si possono mescolare le cose. Si apre uno,

si apre un altro. Prima si chiude il secondo e poi il primo.

Il comando <TT> è utile perche permette la spaziatura fissa, cioè fa valere un

carattere come un'altro e non uno più piccolo e l'altro più grande!

FONT

Con FONT si possono regolare: la grandezza del carattere, il tipo di carattere,

ecc..

Quindi.. TABELLINA!

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

| SIZE | grandezza carattere | <FONT SIZE=3>ciao!</FONT> |

| FACE | tipo di carattere | <FONT FACE="arial">ciao!</FONT> |

| COLOR | colore del carattere | <FONT COLOR="#ff0011">ciao!</FONT> |

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

SIZE va da 1 a 7 ove 1 è piccolissimo e 7 è grandissimo!

FACE vai a vedere nella directory face nel file index.htm per capire meglio i vari

stili!

COLOR i colori sono gli stessi di body quindi vai a vedere nel colori.jpg

Ovviamente io posso fare così:

<FONT SIZE=4 COLOR="#000000" FACE="COMIC SANS MS">CIAO MAMMA!!</FONT>

Provate un po' ad indovinare cosa fa questo codice...

m<FONT SIZE=4>o</FONT><FONT SIZE=4>n</FONT><FONT SIZE=5>t</FONT><FONT

SIZE=6>a</FONT><FONT SIZE=7>g</FONT><FONT SIZE=7>n</FONT><FONT SIZE=6>e </FONT><FONT

SIZE=5>r</FONT><FONT SIZE=4>u</FONT><FONT SIZE=3>s</FONT><FONT SIZE=2>s</FONT><FONT

SIZE=1>e!</FONT>

A capo e simili

Se voi scrivete:

<BODY BGCOLOR="#FFFFFF">Ehi!

che

sta

succedendo??

</BODY>

L'esecuzione sarà:

Ma che sta succedendo??

Perchè i browser non riconoscono la formattazione di "a capo". Per fare questo

bisogna fare così:

Ma<BR>

che<BR>

sta<BR>

succedendo??

</BODY>

il comando <BR> manda a capo e non bisogna chiuderlo!

E' sbagliato fare: <BR></BR>!!!

Il <P> aggiunge anche una riga vuota dopo e quindi con:

Ma<P>

che<P>

sta<P>

succedendo??

</BODY>

ottengo:

che

sta

succedendo?

EX cLARO?

Abbiamo già detto che gli spazi vengono considerati come uno solo! Ma come fare a

visualizzarne di più? Attraverso questo codice: 

Quindi se io scrivo:

CIAO!      MONDO!!

Vedro:

CIAO! MONDO!!

Vuoi sapere quali sono gli altri codici? Vai a vedere il file codici.htm!

Poi c'è un carattere veramente speciale! Utilissimo e sempre usato:

<CENTER>CIAO MAMMA!</CENTER>

Ovviamente mette in centro pagina quello contenuto all'interno!

IMG

Questo tags serve per inserire immagini all'interno della pagina!

Come si usa? Così:

</BODY>

Se volessi restringerla o allargarla, si fa così:

Ove WIDTH=numero regola la larghezza e HEIGHT=numero regola l'altezza!

Con i comando SRC io specifico l'immagine e la sua posizione. Come si usa?

Se l'immagine è nella stessa directory della pagina: <IMG SRC="immagine.gif">

Se l'immagine è in una directory contenuta in quella che contiene la pagina:

Se la pagina si trova in una directory che è contenuta in una che contiene

l'immagine: <IMG SRC="../immagine.gif">

E così di conseguenza:

Directory A

--- B

--- C

--- D

Se la pagina si trova in A e l'immagine in D: <IMG SRC="/C/D/immagine.gif">

Se la pagina è in A e l'immagine in B <IMG SRC="B/immagine.gif">

Se la pagina si trova in B e l'immagine in A: <IMG SRC="../immagine.gif">

Se la pagina si trova in B e l'immagine in D: <IMG SRC="../C/D/immagine.gif">

E così di conseguenza!

Ovviamente per mettere in centro l'immagine basterà fare:

RICORDA: se metti immagini, di si impiega maggiormente ad aprire le pagine una volta

che sono su internet perchè occupano molto più spazio!!!

LINK

I link sono i collegamenti. Questi si fanno attraverso il comando <A>

USO:

<A>Qui in mezzo posso mettere un'immagine o una parola o entrambe.</A>

Come collegare?

<BODY BGCOLOR="#FFFFFF">Vai a: <A HREF="https://go.to/tankcommandos">TANK

COMMANDOS</A></BODY>

Semplice no?

Con il tags HREF indico la pagina in questione.

Ma può anche non essere una pagina. Può essere anche un'email.

Ho detto che può essere anche un'immagine! Sì è vero ma a questa comparirà il bordo

a meno che tu non faccia:

<BODY BGCOLOR="#FFFFFF">Vai a: <A HREF="https://go.to/tankcommandos"><IMG

SRC="immagine.gif" WIDTH=82 HEIGHT=68 BORDER=0></A> </BODY

cioè mettendo BORDER=0 cioè elimino il bordo!

Spesso sono usati per regolare le immagini, le icone. Bisogna usare programmi che

riducano la grandezza di immagini e il numero di colori, quindi anche le loro

dimensioni di spazio.

Ora un trasporto ad un punto preciso della pagina.

Bisogna prima regolare un punto:

<A NAME="ciao">testo</A>

Poi al fondo della pagina si regola il punto che ci interessa regolare:

<A HREF="ciao">testo</A>

Oppure un punto preciso in una pagina:

<A HREF="https://nome.pagina.it#ciao>testo</A>

Cosa vuol dire tutto ciò? Vuol dire che io voglio un collegamento non all'inizio

preciso della pagina ma ad esempio a meta. QUindi a meta inserisco <A

name="nome_etichetta"> e poi faccio nel punto che io voglio un link che mi porta lì.

Ancora un po' di formattazione

<BLOCKQUOTE> è un comando che permette di fare un inciso.

Si usa così:

Quand'ero piccolo tutti mi scherzavano per le dimensioni del mio pene, ed io non

stavo bene: soffrivo le pene per colpa del pene...

</BLOCKQUOTE>

Come sarà l'esecuzione?

testo della pagina...

tante belle cose e poi qui incomincia il blockquote

Quand'ero piccolo tutti mi scherzavano per le dimensioni del mio pene, ed

io non stavo bene: soffrivo le pene per colpa del pene...

e poi rincomincia il testo normale

Come vedete fa una specie di rientro!

LIST seve per creare menu e liste:

Le liste possono essere ordinate o no.

Quelle non ordinate si fanno con il comando <UL> e <LI> per ogni punto. QUindi con

un .html così:

<BODY BGCOLOR="#FFFFFF"> 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 preservativi

* i biscotti

Ovviamente il * sarà sostituito da un punto ben fatto!

Se voglio una lista ordinata, invece mi basta usare al posto del comando <UL> il

comando <OL> che ovviamente si chiude con </OL>.

Se quindi scrivo:

<BODY BGCOLOR="#FFFFFF"> Lista della spesa

<OL>

<LI>la pasta

<LI>il sale

<LI>un pacchetto di preservativi

<LI>i biscotti

</OL>

</BODY>

Il risultato sarà:

Lista della spesa

1. la pasta

2. il sale

3. un pacchetto di preservativi

4. i biscotti

Poi c'è un altro tipo di lista che si definisce lista con descrizione.

<DL>

<DT>escatologico

<DD>discegnare la realtà al pieno del suo sviluppo. Termine filosofico usato da

tante persone...

</DL>

</BODY>

Risultato:

escatologico

disegnare la realtà al pieno del suo sviluppo. Termine

filosofico usato da tante persone....

Cioè?

Cioè col <DL> incomincio la lista. <DT> serve per ogni punto mentre la descrizione è

regolata con <DD>

Un altro comando utile è <HR> questo serve per fare le linee

L'uso può essere semplice:

<HR> e quindi comparirà una linea lunga quanto è possibile visualizzarla, oppure di

una determinata lunghezza da me decisa attraverso il comando:

Questi sono 2 diversi per il semplice fatto che il primo dice: il 50% della

lunghezza massima possibile, il secondo indica che deve essere fatta di 20 pixel.

Con questo esempio:

</BODY>

vi dimostro che si possono anche definire le collocazioni delle varie linee cioè:

a sinistra, a destra o in centro. Questo si fa con il comando ALIGN.

Si può ovviamente anche regolare lo spessore:

</BODY>

E si può anche togliere l'effetto 3d:

</BODY>

Ovviamente tutto ciò può essere usato assieme!

Supponiamo ora di visualizzare il titolo di questa guida!

Sappiamo già che non posso fare:

<HTML>

<BODY>

@//\\//\\//\\//\\//\\@

{| |}

--{ | -== HTML ==- | }--

{| (parte I) |}

@//\\//\\//\\//\\//\\@

BAKÜNIN

bakunin@meganmail.com

</BODY>

</HTML>

Perchè il risultato sarebbe:

@//\\//\\//\\//\\//\\@ {| |} --{ | -== HTML ==- | }--{|(parte I) |}@//\\//\\//\\//

\\//\\@ BAKÜNIN bakunin@meganmail.com

e il che non mi sembra molto bello!

Per ovviare a ciò esiste un comando che mi visualizza esattamente come io ho

scritto. Questo è il <PRE>

Se io quindi facessi:

<HTML>

<BODY>

<PRE>

@//\\//\\//\\//\\//\\@

{| |}

--{ | -== HTML ==- | }--

{| (parte I) |}

@//\\//\\//\\//\\//\\@

BAKÜNIN

bakunin@meganmail.com

</PRE>

</BODY>

</HTML>

Otterrei esattamente:

@//\\//\\//\\//\\//\\@

{| |}

--{ | -== HTML ==- | }--

{| (parte I) |}

@//\\//\\//\\//\\//\\@

BAKÜNIN

bakunin@meganmail.com

Cioè quello che mi interessava!

Commenti

Come ogni linguaggio che si rispetti, HTML ha dei commenti. Questi si fanno così:

<!--

Tutto questo è un commento!

-->

FRAME

Cosa sono i frame? Sono quelle pagine divise in più parti in modo separato ed

autonomo. Un esempio è il sito che ove mi hai scaricato (probabilmente!) cioè

https://go.to/tankcommands . Come puoi vedere in questo sito c'è una pagina di menu,

una di titolo e una di documento vero e proprio.

Creare queste pagine è molto semplice. Bisogna prima creare 2 pagine html nel modo

seguente:

PRIMA PAGINA (prima.html):

------INIZIO-----------

<HTML>

<HEAD>

<TITLE>Prima Pagina</TITLE>

</HEAD>

<BODY>

Prima pagina

</BODY>

</HTML>

-------FINE------------

e una SECONDA PAGINA (seconda.html):

------INIZIO-----------

<HTML>

<HEAD>

<TITLE>Seconda Pagina</TITLE>

</HEAD>

<BODY>

Seconda pagina

</BODY>

</HTML>

-------FINE------------

Dopo di che si crea quella principale che le contiene:

--------INIZIO---------

<TITLE>Pagina Principale</TITLE>

</HEAD>

</FRAMESET>

</HTML>

-------FINE------------

Spiegazione: Con il comando FRAMESET si divide la pagina. Nelle due divisioni,

attraverso il comando FRAME metto la pagina che mi interessa.

Il modo di divisione è regolato nel nostro caso da COLS che intende dire colonne.

Quindi io ho diviso la pagina in 2 di 50% ciascuna.

Ovviamente potevo fare anche così:

</FRAMESET>

L'importante è riempire ogni divisione con una pagina. Ovviamente le divisioni

possono essere anche diverse: <FRAMESET COLS="10%,20%,30%,15%,25%"> e possono anche

essere in righe: <FRAMESET ROWS="10%,20%,30%,15%,25%">

Quindi ricapitolando:

COLS divide in colonne e ROWS in righe!

In più non bisogna necessariamente dare una percentuale, si possono infatti usare

anche i PIXEL: <FRAMESET COLS="50,*"> e gli Asterischi.

Nel nostro caso appena citato ho fatto una divisione di 50 pixel e poi l'altra di

quanto spazio rimaneva libero e disponibile.

NOTA TECNICA: Come voi dovreste sapere esistono vari tipi di risoluzioni grafiche:

800x600, 640x480, ecc.

Bisogna quindi stare attenti e rendere flessibile (quindi frame con *) almeno uno in

modo da regolare la risoluzione. Conviene rendere quello che si vedrebbe peggio

fisso e l'altro mobile!

Bisogna stare attenti sopratutto alle percentuali! Poichè potrebbero visualizzarsi

male con una risoluzione diversa dalla tua!

Addirittura potrei fare: <FRAMESET COLS="50,*,2*"> Che vuol dire fare un frame da 50

pixel e altri due uno il doppio dell'altro!

E se vi dicessi:

</FRAMESET>

Cosa vuol dire? Vuol dire che ho diviso la pagina in 3 ove le prime due sono

occupate rispettivamente dalle pagine prima.html e seconda.html, e la terza parte

dello schermo si divide in due righe che si riempono rispettivamente con le pagine

terza.html e quarta.html.

C'è gente però che, per l'uso di programmi obsoleti continua a navigare per internet

e a non visualizzare i FRAME.

Il modo per rendere visibile qualcosa anche a loro è il seguente:

</FRAMESET>

</FRAMESET>

<BODY>

Qui metti il testo della pagina principale o, se vuoi semplicemente non metti nulla

e indichi: tu non poi visualizzare correttamete questa pagina! EVOLVITI!

</BODY>

</NOFRAMES>

Ho usato il comando NOFRAMES che vi sembra abbastanza chiaro. Nella prima parte c'è

una complicazione del modello solito, ma non credo che ti crei difficoltà.

Nei FRAME possiamo inserire immagini:

</FRAMESET>

Conviene però usare un valore fisso per l'immagine altrimenti potrebbe provocare

errori di visualizzazione. E quindi consigliabile fare così:<FRAMESET COLS="146,*">

Tra i tanti comandi c'è anche questo:

Ovviamente stiamo colleganto qui un immagine ma è uguale con la pagina. La novità è

ovviamente il comando SCROLLING che indica la visualizzazione o no della sbarra di

posizione cioè quella barra che mi permette di visualizzare la pagina fin in fondo

se questa esce. Le opzioni possono essere:

- AUTO Se serve le mette se no, no

- NO non le mette neanche se servono

- SI le mette anche se inutili

Altro comando è:

<FRAME SRC="immagine.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO

MARGINWIDTH=1 MARGINHEIGHT=1>

</FRAMESET>

</FRAMESET>

Questi due nuovi regolano i margini. Il primo MARGINWIDTH con le pagine affianco,

mentre il secondo MARGINHEIGHT con sopra e sotto. Lascia uno spazio bianco. 1 è il

valore minimo.

Si possono anche regolare i bordi tra un frame e l'altro:

o addirittura dargli un colore:

e, ovviamente possiamo eliminarli:

e complicando il tutto:

<FRAME SRC="immagine.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO

MARGINWIDTH=1 MARGINHEIGHT=1>

</FRAMESET>

</FRAMESET>

Collegamenti vari tra FRAME:

---------INIZIO--------

<HTML>

<HEAD>

<TITLE>Prima Pagina</TITLE>

</HEAD>

<BODY>

Prima Pagina<P>

Vai alla <A HREF="seconda.html">Seconda Pagina</A>

</BODY>

</HTML>

--------FINE-----------

Se trasformo così la pagina prima (prima.html) vedrete che il collegamento fatto

farà in modo che la pagina venga sostituita a prima.html .

Per fare in modo che cliccando su una mi si apre la pagina all'interno di un altro

frame devo dare un nome a questi.

CIOE': se ho due frame A e B e voglio mettere un collegamento dalla pagina A che mi

apra nel frame B un'altra pagina, devo fare così:

Questa è la pagina principale:

</FRAMESET>

Ovviamente menu puo essere sostituito dalla parola che tu vuoi!

---------INIZIO--------

<HTML>

<HEAD>

<TITLE>Prima Pagina</TITLE>

</HEAD>

<BODY>

Prima Pagina<P>

Vai alla <A HREF="seconda.html" TARGET="menu">Seconda Pagina</A>

</BODY>

</HTML>

--------FINE---------

Se ora io salvo così prima.html avrò l'effetto desiderato.

Il principio è semplice: metto il nome ad un frame e poi lo richiamo con target.

REGOLA FONDAMENTALE! Non dare mai nomi ai frame incomincianti col segno "_"

Esempio:_menu

Questo è un errore e verrà quindi ignorato!

Questo è così perchè ci sono dei nomi magici che sono:

_top

_self

_parent

_back

che servono più o meno alla stessa cosa, e che permettono all'apertura di un link

in un'altra finestra.

Se quindi faccio:

Ora vai a <A HREF="prima.html" TARGET="_top"> Pagina prima</A>

Mi si aprirà una nuova finestra contenente prima.html

TABELLE

Le tabelle sembrano delle cose che si può anche non imparare, poichè non in tutti i

siti sono necessari metterle, ma LO SAPETE CHE IL SITO DEGLI SPIPPOLATORI

www.spippolatori.com E' UNA GIGANTESCA TABELLA? Tenete conto, perchè spesso sono una

buona alternativa a dei frame.

Costruire tabelle è un gioco da ragazzi, basta giocare con 3 comandi:

<TABLE>, <TR> e <TD>, i quali vogliono dire: TABELLA, RIGA DI TABELLA E COLONNA DI

TABELLA.

Salva questo come tabella.html:

--------INIZIO------------

<TITLE>La tua prima tabella</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD>hai fatto una riga!</TD>

</TR>

</TABLE>

</BODY>

</HTML>

-----------FINE--------------

Quando la visualizzerai vedrai all'incirca questo:

hai fatto una riga!

Non ti preocupare, è normale! Fra un po' farai delle cose alluncinanti. Innanzi

tutto attraverso un bordo:

Il bordo può essere 0 (nullo) o immenso 25. Scegli quello che ti piace di più.

Per impostare la larghezze della tabella si usa questo comando:

e qui comparirà una tabella a tutta pagina. Ovviamente può essere sostituito da un

numero a PIXEL o una percentuale.

Si può modificare anche l'altezza della colonna:

TABLE BORDER=3 WIDTH=34 HEIGHT=75>

Col solito comando ALIGN si può gestire la posizione della scritta:

<TD ALIGN=CENTER>Scritta</TD>

</TR>

</TABLE>

Come ho già detto ALIGN può reggere le opzioni CENTER, RIGHT e LEFT.

Per quanto riguarda la tabella si possono regolare la posizione della scritta anche

in verticale. Questo si fa con il comando VALIGN e i comandi correlati:

- TOP sopra

- BOTTOM sotto

- MIDDLE in mezzo

Ovviamente si possono inserire immagini:

<TR>

</TR>

</TABLE>

Ma mi sembra abbastanza ovvio.

RICORDATE: Mettete sempre l'altezza la larghezza alle immagini, come alle tabelle e

ai frame. Questo perchè se sul vostro computer funziona bene la pagina, potrebbe non

funzionare sul mio.

Ed ora 2 colonne:

<TD>prima</TD>

<TD>seconda</TD>

</TR>

</TABLE>

Ma dato che ve lo già detto, regolate sempre le dimensioni!

<TR>

<TD WIDTH=150>Prima</TD>

<TD WIDTH=150>Seconda</TD>

</TR>

</TABLE>

Complichiamo un attimo:

<TR>

<TD WIDTH=60%>Prima</TD>

<TD WIDTH=20%>Seconda</TD>

<TD WIDTH=20%>Terza</TD>

</TR>

</TABLE>

Ex claro?

Se sì, aggiungo una riga!

<TR>

<TD WIDTH=60%>Prima</TD>

<TD WIDTH=20%>Seconda</TD>

<TD WIDTH=20%>Terza</TD>

</TR>

<TR>

<TD>PRima bis</TD>

<TD>Seconda bis</TD>

<TD>Terza bis</TD>

</TR>

</TABLE>

E se tolgo l'ultimo valore?

<TR>

<TD WIDTH=60%>Prima</TD>

<TD WIDTH=20%>Seconda</TD>

<TD WIDTH=20%>Terza</TD>

</TR>

<TR>

<TD>Prima bis</TD>

<TD>Seconda bis</TD>

</TR>

</TABLE>

Come potete vedere qui manca la terza bis. Non è un problema, viene totalmente

cancellata! Compare uno spazio vuoto!

C'è un altro comando interessante:

CELLPADDING regola lo spazio che c'è fra il testo di una cella della tabella e il

bordo. Il valore va da 0 a infinito, ma ovviamnte non si mette 0 altrimenti il bordo

verrebbe sopra al testo venendo fuori una schifezza.

Esiste un comando molto simile che è CELLSPACING=12. Questo si usa come l'altro e

regola lo spazio fra l'inizio del bordo e il testo. Sembra uguale all'altro ma,

provate per vedere. Il primo lascia uno spazio bianco attorno al testo, l'altro fa

un bordo enorme.

Ovviamente si possono usare tutte e due assieme!

Esiste il modo di colorare: <TABLE BORDER=3 BGCOLOR="#FFCC66"> o tutta la tabella, o

solo una righa:<TR BGCOLOR="#FFCCFF"> o solo una colonna:<TD BGCOLOR="#FF0000">.

I colori sono contenuti tutti nel file colori.jpg . LEGGETEVELI!

C'è un altro bel comando che è: COLSPAN. Serve per far espandere una righa oltre

alla sua posizione nel caso ci fosse un buco nelle sue vicinanze. Prendiamo

l'esempio di prima.

<TR>

<TD WIDTH=60%>Prima</TD>

<TD WIDTH=20%>Seconda</TD>

<TD WIDTH=20%>Terza</TD>

</TR>

<TR>

<TD>Prima bis</TD>

<TD>Seconda bis</TD>

</TR>

</TABLE>

Qui abbiamo già detto che manca la terza bis. Ma possiamo espandere la Seconda bin

in modo da fargli occupare anche il buco che manca. Basta sostituire alla riga che

fa riferimento a Seconda bis questo codice: <TD COLSPAN=2>Seconda bis</TD>. Provate

e vedrete il risultato.

State attenti: Se io avessi lasciato la terza bis, sarebbe comparsa una colonna in

più rovinando l'aspetto da me voluto.

COLSPAN può essere aumentato o diminuito di valore in base al numero di colonne che

la nostra riga deve inglobare. Nel nostro caso abbiamo messo 2 perchè 2 sono le

colonne: Seconda bis e la terza bis. Ma se volessimo potrei fare così:

<TR>

<TD WIDTH=60%>Prima</TD>

<TD WIDTH=20%>Seconda</TD>

<TD WIDTH=20%>Terza</TD>

</TR>

<TR>

<TD COLSPAN=3>Prima bis</TD>

</TR>

</TABLE>

Quindi, eliminando la SECONDA BIS faccio espandere la PRIMA BIS di 3 colonne.

Possiamo anche usare la formattazione di testo e i collegamenti. Ma lo ritengo

abbastanza ovvio:

<A HREF="https://go.to/tankcommandos"><B>Prima bis</B></A></TD>

Un funzionamento uguale a COLSPAN lo ha ROWSPAN che permette l'espansione a livello

di righe. Quindi guardatevi l'esempio e cercate di capire:

<TR>

<TD ROWSPAN=2>Prima</TD>

<TD>Seconda</TD>

<TD>Terza</TD>

</TR>

<TR>

<TD>Seconda bis</TD>

<TD>Terza bis</TD>

</TR>

</TABLE>

Vedete che è scomparsa la prima bis per comparire un prima di 2 righe.

Vi credo abbastanza intelligente da poter capire questo esempio senza spiegazione:

<TR>

<TD ROWSPAN=2>Prima</TD>

<TD COLSPAN=2>Seconda</TD>

</TR>

<TR>

<TD>Seconda bis</TD>

<TD>Terza bis</TD>

</TR>

</TABLE>

Si possono quindi usare abbinati.

Indici all'interno di una tabella? Certo:

<TR>

<TD>

Ingredienti per la torta di mele

<UL>

<LI>Mele

<LI>Farina

<LI>Zucchero

<LI>Cannella

</UL>

</TD>

</TR>

</TABLE>

E complicando ma non poco:

<TR>

Ingredienti per la torta di mele

<UL>

<LI>Mele

<LI>Farina

<LI>Zucchero

<LI>Cannella

</UL>

</TD>

</TR>

</TABLE>

Vedrete un'immagine affiancata ad una lista degli ingradienti per la torta di mele.

Mica male! Ed è stato semplice. Ho tolto il bordo. Ho fatto 2 colonne su un'unica

colonna e poi ho scritto a sinistra e ho inserito un'immagine tutto a destra.

E addirittura si possono mettere tabelle all'interno di tabelle:

<TR>

<TD>

<TR>

<TD>PRIMA</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

E questo è più o meno tutto per le tabelle. Ora passiamo a FORM!

FORM

I form sono quelle cose che mi permettono di compilare moduli o simili su internet.

Per crearli bisogna studiare bene quello che ora vi dico. Salvate questo come

form.html:

<HTML>

<HEAD>

<TITLE>Il mio primo FORM</TITLE>

</HEAD>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

Fermiamoci un'attimo. Bisogna fare delle considerazioni e non da poco. Per quanto

riguarda i FORM cioè il compilare moduli, bisogna scegliere il mezzo con cui ciò si

fa:

1.Puoi mandare i dati ad uno script cgi per processarli.

2.Puoi far si che i dati ti vengano inviati come E-mail

Se vuoi selezionare la prima opzione, studiati lo JAVA e poi mi dici. E' un po'

complicatuccio. Un giorno forse vi spiegherò come fare.

Per ora io mi occupo solo della spiegazione del primo caso.

Mettiamo al posto dei semplici <FORM></FORM> questi due:

<FORM METHOD=POST ACTION="mailto:bakunin@meganmail.com"

ENCTYPE="application/x-www-form-urlencoded"> </FORM>

Cosa sono? Questi indicano il metodo di spedizione (POST) l'indirizzo: in questo

caso il mio e un comando che si scrive sempre così.

Supponiamo che abbiamo già creato un form con i fiocchi, che qualcuno lo abbia

compilato e che questo ci sia arrivato. La EMAIL potrebbe essere formattata male

perchè il modo di trasmissione è per il computer e non umano.

RICORDATE basta sostituire gli & con "a capo" e + con spazi.

Forse però il tuo riesce a decodificarlo. Dipende da che programma hai. Ma non è un

dramma. Appena qualcuno ti risponde saprai. Oppure per provare da casa fuori da

INTERNET sostituisci a ENCTYPE="application/x-www-form-urlencoded" questo:

ENCTYPE="text/plain" e vedrai subito.

Ora parlerò di cosa sta in mezzo fra i due FORM.

Il primo comando è: <INPUT TYPE=TEXT>

Questo serve per crare un finestrella ove io posso scrivere del testo. Ma per

correttezza bisogna dargli un'etichetta altrimenti che E-MAIL ti arriva?!?

Questo si fa mettendo al posto di quello prima, questo:

Il risultato sarà un email con INDIRIZZO=...quello che uno mette...

Se metto questo

Comparirà come già scritto, ma ovviamente uno può cancellare e mettere il suo!

Con SIZE regolo la dimensione del campo:

Come valore, se lo tolgo, c'è 20, ma se metto SIZE posso modificarlo a piacere.

Esiste poi un altro comando:

che mi permette di non inserire più di 10 caratteri (Nel nostro caso, poi posso

mettere il valore numerico che voglio!).

Quando voglio che al posto del testo vengano visualizzati asterischi (vedi le

password), ecco il modo:

<INPUT TYPE=PASSWORD> Ho sostituito alla parola TEXT, PASSWORD. Ovviamente valgono

le regole di prima! <INPUT TYPE=PASSWORD NAME="USER PASSWORD">

Ora vi insegno i pulsantini vero o falso:

Se visualizzate compare un tondino che cliccandoci sopra si colorerà o no!

Si fa col comando TYPE=RADIO

RIcordate che si possono usare i comandi soliti per la formattazione del testo:

Così compariranno dei pulsanti uno sotto l'altro e non di fianco.

Ma così, ci sono 3 pulsanti che significano la stessa cosa! Sì è vero. Ma se io

faccio così:

<br>Chi è più simpatico, bravo e intelligente:<br>

<INPUT TYPE=RADIO NAME="Amico" VALUE="Bakunin" CHECKED> Bakunin<BR>

<INPUT TYPE=RADIO NAME="Amico" VALUE="Screener_it"> Screener_it<BR>

<INPUT TYPE=RADIO NAME="Amico" VALUE="Morpheus"> Morpheus<P>

Mi arriverà un E-Mail con scritto chi ritenete migliore!

Con il comando VALUE io indico il nome che mi deve arrivare via E-Mail, con CHECKED

indico quello già selezionato.

Per creare delle caselle di scelta (che sono la stessa cosa solo che quadrate e con

una X dentro!) si fa così:

E se complico un po'!

<INPUT TYPE=CHECKBOX NAME="Bakunin" VALUE="YES" CHECKED>Bakunin<BR>

<INPUT TYPE=CHECKBOX NAME="Screener_it" VALUE="YES">Screener_it<BR>

<INPUT TYPE=CHECKBOX NAME="Morpheus" VALUE="YES">Morpheus<BR>

Ecco come prima, solo che con CHECKBOX e non con i RADIO.

La risposta sarà ed ESEMPIO:

Bakunin=YES

Cioè ti mandano solo quella con Sì! Gli altri no.

Ora reggetevi forte!

Chi ritieni più bello:

<INPUT TYPE=CHECKBOX NAME="Bello_Bakunin" VALUE="YES"> Bakunin<BR>

<INPUT TYPE=CHECKBOX NAME="Bello_Screener_it" VALUE="YES"> Screen_it<BR>

<INPUT TYPE=CHECKBOX NAME="Bello_Morpheus" VALUE="YES"> Morpheus<BR>

</TD>

Chi ritieni più ricco:<BR>

<INPUT TYPE=CHECKBOX NAME="Ricco_Bakunin" VALUE="YES"> Bakunin<BR>

<INPUT TYPE=CHECKBOX NAME="Ricco_Screener_it" VALUE="YES"> Screener_it<BR>

<INPUT TYPE=CHECKBOX NAME="Ricco_Morpheus" VALUE="YES"> Morpheus<BR>

</TD>

Chi ritieni più alto:<BR>

<INPUT TYPE=CHECKBOX NAME="Alto_bakunin" VALUE="YES"> Bakunin<BR>

<INPUT TYPE=CHECKBOX NAME="Alto_Screener_it" VALUE="YES"> Screener_it<BR>

<INPUT TYPE=CHECKBOX NAME="Alto_morpheus" VALUE="YES"> Morpheus<BR>

</TD>

</TR></TABLE>

</CENTER>

Prego non fate scene di isteria! Ho solo fatto una tabella e ho messo detro dei

CHECKBOX, il tutto in un form.

Chiaro?

Si possono ovviamente inserire anche immagini. Basta ricordare: NON MESCOLARE

APERTURA DI CODICI e NO.

<TABLE><FORM></TABLE></FORM> Tags sovrapposti ...no buono!

<TABLE><FORM></FORM></TABLE> Tags incasellati ...buono!

Ora le liste di scorrimento. Cioè quelle finestrelle che permettono di scegliere fra

varie possibilità.

Questo si fa così:

<OPTION>Bakunin

<OPTION>Screener_it

<OPTION>Morpheus

</SELECT>

Ovviamente però bisogna inserire dei VALUE altrimenti ti arriva una schifezza:

<OPTION VALUE="Bakunin" SELECTED>Bakunin

<OPTION VALUE="Screener_it">Screener_it

<OPTION VALUE="Morpheus">Morpheus

</SELECT>

Con il comando VALUE mi arriva un Email con una scritta del più bello e con SELECTED

mi si visualizza il nome già inserito fra quelle possibilità. Mediamente compare

sempre il primo fra le scelte possibili, ma non sempre quindi così io mi risolvo il

problema!

Per fare al posto che una semplice finestra una finestrella un po' più grande con

una barra di scorrimento, il principio è uguale, basta inserire il comando SIZE:

<OPTION VALUE="Bakunin" SELECTED>Bakunin

<OPTION VALUE="Screener_it">Screener_it

<OPTION VALUE="Morpheus">Morpheus

<OPTION VALUE="Bakunin" SELECTED>Bakunin

<OPTION VALUE="Screener_it">Screener_it

<OPTION VALUE="Morpheus">Morpheus

</SELECT>

Ho dovuto inserire più valori altrimenti non funzionava a dovere. Con l'opzione SIZE

mi comapare una finestrella che visualizza 4 valori e poi io scelgo fra quei 4.

Si possono creare anche finestrone di solo e semplice testo. Questo si fa così:

</TEXTAREA>

Posso ovviamente regolare l'altezza e la larghezza facendo così:

</TEXTAREA>

Posso addirittura inserire già qualcosa all'interno dei TEXTAREA in modo che

compagna già una scritta. Così:

@//\\//\\//\\//\\//\\@

{| |}

--{ | -== HTML ==- | }--

{| (parte I) |}

@//\\//\\//\\//\\//\\@

</TEXTAREA>

Per il TEXTAREA esiste anche un'altro comando che è WRAP questo può essere seguito

da:

VIRTUAL il testo va a capo ma viene spedito su una sola linea

PHYSICAL il testo viene spedito come è scritto. Se va a capo anche quello andrà a

capo

OFF il testo non va a capo e viene spedito così.

L'uso è per tutti e tre i casi uguale:

Poi ci sono i pulsanti che permettono di inviare dati:

o di cancellare tutto quello scritto:

Posso ovviamente modificare le scritte:

Per quanto riguarda poi il ricevere le e-mail, si può modificare il titolo della

e-mail a proprio piacimento:

<FORM METHOD=POST ACTION="mailto:bakunin@meganmail?subject=Risposta del

questionario" ENCTYPE="application/x-www-form-urlencoded">

Ecco tutto!

------------------FINE PRIMA PARTE (ma penso anche ultima!)---------------------

@//\\//\\//\\//\\//\\@

{| |}

--{ | -== HTML ==- | }--

{| (parte II) |}

@//\\//\\//\\//\\//\\@

BAKÜNIN

bakunin@meganmail.com

Questa guida serve agli esperti di HTML. Vi insegnerò a fare ciocchi col testo

che voi manco vi immaginate di fare. Sfondi, testi colorati. DI TUTTO E DI PIU'.

Quindi tagliamo corto e incominciamo!

Io vi insegno ora a creare e a gestire i "FOGLI DI STILE" che sono quei file (o

comandi interni!) che permettono di giocare con le scritte.

Il principio base è il modificare comandi esistenti nell'HTML.

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

| INDICE: |

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

| Differenze |

| Interni |

| Esterni |

| Comandi |

| Box e margini |

| Sfondi & C. |

| Raggruppare |

| Classi |

| Posizionamento |

| Mouse |

| Immagini |

| Carattere e posizione |

| Mouse e link |

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

Le differenze nette con l'HTML standard sono 4:

- Tutti i comandi non sono circondato da <>, ma da { }.

- Il segno = è sostituito da :

ESEMPIO HTML: <FONT size=5>

- Non esiste più la , ma i ;

- I nomi o i comandi che hanno - (tipo ciao-mario) diventano: (ciaoMario). QUindi

lettera maiuscola e via il trattino

INTERNI

Esistono 2 tipi di fogli di stili: INTERNI o ESTERNI.

Non c'è nessuna differenza tranne che quelli interni sono contenuti nei

file HTML, mentre gli altri no!

Facciamo subito un'esempio di interno:

--------INZIO-----------------

<HTML>

<HEAD>

H1 { font-size:17px; font-family:verdana; color:green }

H2 { font-size:18px; font-family:arial; color:red }

</style>

</HEAD>

<BODY>

<H1>Questo testo e' di colore verde, impostato su verdana di 17 pixel</H1>

<H2>Questo testo e' di colore rosso, impostato su arial di 18 pixel</H2>

</BODY>

</HTML>

-------------------FINE------------------

Vediamo subito qualche cosuccia!

IL comando STYLE apre una sezione (type="text/css") CSS (che sta appunto per i

fogli!)

Creo 2 comandi H1 e H2 caratterizzati:

H1 { font-size:17px; font-family:verdana; color:green }

H2 { font-size:18px; font-family:arial; color:red }

che vuol dire:

font-size:17px GRANDEZZA 17

font-family:verdana CARATTERE

color:green COLORE

Questi comandi poi sono stati messi all'interno del corpo (BODY) come tags

normali (quindi con <H1></H1> e <H2></H2>)

Bisogna dire che il blocco STYLE va messo tra i 2 HEAD. Aggiungo anche che il

"TYPE=..." può essere anche cambiato per altri linguaggi. Se io volessi creare un

comando in JAVA dovrei fare "text/jass"

Se io volessi, potrei anche non metterlo STYLE poichè mediamente vengono

impostati da soli da browser, ma meglio non rischiare (qualcuno potrebbe non

visualizzarli se ha un browser vecchio!).

Sappiate che mediamente si usano quelli esterni poichè con quelli interni bisogna

sempre aggiungere per ogni pagina HTML questi comandi. Negli altri no!

ESTERNI

Gli esterni sono "ermeglio!" perchè sono file separati che vengono richiamati con

1 riga tranquillamente dalla pagina interessata.

Esempio pratico:

Salva queste due righe nel file style.css:

H1 { font-size:17px; font-family:verdana; color:green }

H2 { font-size:18px; font-family:arial; color:red }

Questo file (style.css) conterrà i comandi che ci interessano.

Ora apriamo una pagina HTML e aggiungiamo, al posto di tutta la papardella di

prima, questa riga:

Questa riga unisce automaticamente alla pagina un foglio di stile

(rel=stylesheet).

Ora se usiamo i comandi:

<H1>CIAO MAMMA!</H1>

<H2>Qui dove il mare luccica e tira forte il vento!</H2>

Compariranno le scritte che abbiamo voluto noi nel file style.css

Addirittura basta aggiungere questa riga nella prima pagina e tutte le altre

colelgate saranno a posto (credo!)!

MICA MALE!

COMANDI

Incominciamo con font-family:

BODY { font-family:arial }

Questo regola il tipo di carattere.

Ah! Uso BODY come comando, ma potete cambiarlo a vostro piacimento. Ho usato

questo comando perchè imposta queste caratteristiche a tutto il documento, ma se

volete potete usare un'altro comando!

Se io creo una pagina:

<HTML>

<BODY>

Mi elimino un comando da aggiungere, e con un comando solo (appunto BODY), mi

sono fatto, sia il comando HTML, e sia il comando CSS! Capito?

</BODY>

</HTML>

Esiste poi questa opzione:

BODY { font-family:arial, "courier new", impact }

Faccio scegliere al browser che carattere vuole mettere. Il che vuol dire che se

non possiede il primo, usa il secondo, e così via!

Esistono poi famiglie di carattere ove il browser può scegliere:

Times new roman o garamond: BODY { font-family:serif }

Arial o helvetica: BODY { font-family:"sans serif" }

Cursive Font corsivi: BODY { font-family:cursive }

Comic sans e simili: BODY { font-family:fanct }

Monospace e simili: BODY { font-family:monospace }

font-size:

Indica la grandezza del carattere. Non ha limitazioni (al contrario dell'HTML!)

Bisogna dare un'unità di misura:

Punti: sigla pt. Classica grandezza!

BODY { font-size:12pt }

Pixel: Sigla px. La grandezza sullo schermo in base ai pixer

BODY font-size:12px }

Pollici: Sigla in.

BODY { font-size:1in }

Centimetri: Sigla cm.

BODY { font-size:3cm }

Percentuale: Sigla %. Dipende dalla grandezza dei caratteri del Browser.

Ingrandisce o no in base ai caratteri standard

BODY { font-size:200% }

Esistono poi anche:

BODY { font-size:smaller }

BODY { font-size:larger }

che ovviamente ingrandiscono o rimpiccioliscono.

font-style:

Indica lo stile grafico (normale, italic o oblique):

BODY { font-style:normal }

Questo è lo standard!

Poi esistono:

BODY { font-style:italic }

Capite se lo vedete!

BODY { font-size:oblique }

Come l'italic ma un po' più corsivo!

font-variant

Può essere normal o small-caps (il classico maiuscoletto!)

BODY { font-variant: small-caps }

Attributo font-weight

Regola la grandezza della scrittura nel grassetto. Può essere di 7 tipi:

BODY { font-weight: extra-light }

BODY { font-weight: demi-light }

BODY { font-weight: light }

BODY { font-weight: medium }

BODY { font-weight: extra-bold }

BODY { font-weight: demi-bold }

BODY { font-weight: bold }

Ci sono quindi 7 tipi di grassetto!

text-decoration

Sottolineature & C. Può essere:

BODY { text-decoration: none }

BODY { text-decoration: underline }

BODY { text-decoration: italic }

BODY { text-decoration: line-height }

Può essere utile per eliminare sottolineature di link:

A { text-decoration: none }

Che si può utilizzare anche così nella pagina HTML

<A HREF="https://go.to/tankcommandos" STYLE="text-decoration: none">TANK

COMMANDOS</A>

o così:

A:link, A:visited { text-decoration: none }

A:hover { text-decoration: underline }

BOX E MARGINI

Questi sono una delle cose più interessanti!

E' possibile creare margini attorno ad un testo e poi modificarli. Oppure creare

box e metterci dentro quello che vogliamo senza dover perfornza fare una tabella.

Tutto questo si farà in pollici (in), centimetri (cm), pixel (px), punti (pt) e

unita' (em). Poichè bisogna fare e brigrare con dati.

Margini:

Possono essere 4: margin-left, margin-right, margin-top, margin-bottom

BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }

o uno solo:

BODY { margin: 10px 10px 10px 10px }

Questi comandi regolano i margini e poi ci mettono il testo dentro. Esistono

altri che intorno al testo fanno i margini:

padding-top, padding-bottom, padding-right, padding-left

BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 10px;

padding-left: 10px }

oppure con un solo comando:

BODY { padding: 10pt 10px 10px 10px }

I colori nei BOX:

border-top, border-bottom, border-right, border-left

che possono essere: none, dotted, dashed, solid, double, groove, ridge, inset e

i vari colori.

BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue;

border-bottom: groove yellow }

Stili nei bordi: border-style

Può essere: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

BODY { border-style: groove }

width regola la grandezza del BOX

BODY { width: 300px }

float: regola il testo a sinistra, a destra niente: left, right e none

BODY { float: right }

SFONDI & C.

Sapete che in HTML si fa così:

color regola il colore del testo.

ESEMPIO:

La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi

anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!

</DIV>

I colori possono essere messi a nomi:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive,

yellow, navy, blue, teal e aqua

o a numeri (vedi la guida HTML-I).

background-color regola il colore dello sfondo:

La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi

anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!

</DIV>

background-image mette un'immagine come sfondo:

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-image:

url(sfondo.jpg)">

La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi

anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!

</DIV>

E' indifferente se jpg o gif.

background-repeat se abbinato al comando di prima regola la ripetizione

dell'imamgine. Può essere:

repeat ripetuta ovunque

repeat-x ripetuta sono in orizzontale

repeat-y solo in verticale

<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px;

background-image: url(sfondo.jpg); background-repeat: repeat-y">

La zona di programmazione nel sito TANK COMMANDOS è fatta da BAKUNIN. Quindi

anche questa guida, credo! Se no, visitate il sito go.to/tankcommandos!

</DIV>

RAGGRUPPARE:

Fondamentale è raggruppare comandi con caratteristiche simili. Si fa così:

H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }

Lo stesso con i font vari:

BODY { font: bold normal 15px verdana red}

CLASSI

Semplicemente servono per creare di un comando più:

H1.CIAO {...}

H1.COME {...}

Ora ho 2 comandi H1.

Per richiamarli basta fare:

<H1 class=ciao>Quello che vuoi!</H1>

POSIZIONAMENTO

Voi dovreste sapere che quando create una pagina con l'HTML è poi il borwser a

gestire come vuole lui la grafica e mettendo il titolo il quel punto al posto che

in un altro. Questo tipo di posizionamento si chiama STATICO.

Con i Fogli di Stile, e quindi con la programmazione CSS, si può mettere gli

oggetti (titoli, scritte e immagini) in modo ASSOLUTO.

Esiste poi un terzo e ultimo tipo che è detto RELATIVO che dipende dagli altri

oggetti, ma lo vedremo dopo.

Incominciamo con quello ASSOLUTO:

</DIV>

Spiegazione: "position:absolute" imposto la posizione assoluta

Top:100px e left... imposto le posizioni in Pixel (Ma possono essere anche

tutte le altre che abbiamo visto)

Si può fare anche coi i testi:

La TC diventa <DIV STYLE="position:relative; top:10px; left:10px"><DIV

TTYLE="position:relative; top:10px; left:10px"><B>capo del mondo</B></DIV>. La

notiza sconvolge il mondo!

Oppure si può usare un altro metodo:

La TC diventa <SPAN STYLE="position:relative; top:10px; left:10px"><SPAN

TTYLE="position:relative; top:10px; left:10px"><B>capo del mondo</B></SPAN>.

La notizia sconvolge il mondo!

Per i testi però (per evitare la bruttura di prima!) è meglio racchiudere tutto

in caselle di testo:

<DIV STYLE="position:absolute; top:100px; left:100px; width:150px;

height:150px"><DIV TTYLE="position:absolute; top:100px; left:100px; width:150px;

height:150px"> Spesso mi dimentico della potenza divina che ho nelle mie

mani! Sarà vero? Forse sì, forse che no! Spesso è meglio non parlarne.</DIV>

Per le immagini si può fare così:

</DIV>

</DIV>

Ecco qui! Vi ho spaventato? Spero di no!

MOUSE

Poco da dirvi (funziona solo con Explorer e windoz):

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

| Auto | Automatico |

| Crosshair | Mirino |

| Default | Freccia standard |

| Hand | Mano |

| Move | Trascina oggetti |

| e-resize | Ridimensionamento oggetti |

| ne-resize | Freccia |

| nw-resize | Altra freccia |

| n-resize | Ennesima reccia |

| se-resize | Freccia in basso e a destra |

| sw-resize | Freccia basso e sinistra |

| s-resize | Freccia verso il basso |

| w-resize | Freccia a sinista |

| text | Come sui testi |

| wait | Clessidra |

| help | Punto interrogativo |

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

Si utilizza così:

CIAO MAMMA!

</DIV>

IMMAGINI

Ecco a voi un po' di ciocchi con le immagini:

Trasparency Immagine trasparente finchè non ci si passa il mouse sopra

Blur Sfuocato a sinistra

Light Ombreggiato

Wave Ondulatorio

Flip horizontal Invertita

Flip vertical Capovolta

Sono tutti quanti script JAVA quindi ve li do così:

------------INIZIO-------------

<HTML>

<HEAD>

function alphaon(x)

{document[x].filters.alpha.opacity +=50;}

function alphaoff(x){

test=x

provatimer=setInterval("prova(test)", 100)}

function prova(x){

if(document[x].filters.alpha.opacity>50){

document[x].filters.alpha.opacity -= 10

}

else{clearInterval(provatimer)}

}

</script>

</HEAD>

<BODY>

</BODY></HTML>

----------------FINE---------------

Poi:

-------------INIZIO---------------

<HTML>

<HEAD>

function bluron(x)

{document[x].filters.blur.enabled=1;}

function bluroff(x)

{document[x].filters.blur.enabled=0;}

</script>

</BODY>

</HTML>

--------------FINE----------------

Poi:

-------------INIZIO-------------

<HTML>

<HEAD>

function lighton(x)

{document[x].filters.light.enabled=1;

document[x].filters.light.addpoint(50,50,40,255,255,255,100);}

function lightoff(x)

{document[x].filters.light.enabled=0;}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

-----------FINE---------------

Poi:

-------------INIZIO-------------

<HTML>

<HEAD>

function waveon(x)

{document[x].filters.wave.enabled=1;}

function waveoff(x)

{document[x].filters.wave.enabled=0;}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

-----------FINE---------------

Poi:

------------INIZIO-----------

<HTML>

<HEAD>

function fliphon(x)

{document[x].filters.fliph.enabled=1;}

function fliphoff(x)

{document[x].filters.fliph.enabled=0;}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

--------------FINE------------

e l'ultimo:

------------INZIO-------------

<HTML>

<HEAD>

function flipvon(x)

{document[x].filters.flipv.enabled=1;}

function flipvoff(x)

{document[x].filters.flipv.enabled=0;}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

------------FINE--------------

FINE DEI COMANDI PER IMMAGINI! Il principio è copiate ciò che vi serve! Oppure

imparate lo JAVA!

CARATTERE E POSIZIONE

letter-spacing

Indica lo spazio tra una lettera e l'altra:

Bakunin e la TC conquistano il mondo!

</DIV>

text-transform

Maiuscole e minuscole per tutta la frase:

uppercase Maiuscole

capitalize La prima lettera di ogni parola

uppercase Minuscole

ESEMPIO:

<DIV STYLE="font-family:arial; text-transform:uppercase"><DIV

TTYLE="font-family:arial; text-transform:uppercase"> Bakunin conquista il MONDO!!

</DIV>

Bakunin conquista il MONDO!!

</DIV>

Bakunin conquista il MONDO!!

</DIV>

text-align

L'orientamento del testo può essere:

left

center

right

justify