HTML (parte I)
BAKUNIN
bakunin@meganmail.com
Ciao a tutti!
Eccoci pronti per un'ennesima guida. Questa volta tratterò un linguaggio particolarmente semplice, ma che, se volete farvi conoscere su internet, dovete sapere.
Questo è (come dice il titolo!) l'HTML. L'utilità di questo linguaggio è soltanto legata alla creazione di pagine WEB, quindi basta con le ciance e incominciamo subito con il lavoro!
INDICE
- Materiale occorrente
- Tags di apertura
- HEAD & C
- BODY
- Formattazione del testo
- FONT
- A capo e simili
- IMG
- LINK
- Ancora un po' di formattazione
- Commenti
- Frame
- Tabelle
- Form
1. 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.
2. 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.
3. 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:
<title> CIAO!! </title>e
<title> CIAO!! </title>Sono assolutamente uguali!
Esistono anche i comandi <META> ma ve li spiegherò più avanti perché c'è un discorsetto da fare in proposito un po' lunghetto...
4. 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!
5. 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!
6. 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...
<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!
Ma
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ì:
<BODY BGCOLOR="#FFFFFF">Ehi!<BR>
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:
<BODY BGCOLOR="#FFFFFF">Ehi!<P>
Ma<P>
che<P>
sta<P>
succedendo??
</BODY>ottengo:
Ma
che
sta
succedendo?EX cLARO?
7. A capo e simili
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!
8. IMG
Questo tags serve per inserire immagini all'interno della pagina!
Come si usa? Così:
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="immagine.gif">
</BODY>Se volessi restringerla o allargarla, si fa così:
<IMG SRC="imagine.gif" WIDTH=82 HEIGHT=68>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:
<IMG SRC="directory/immagine.gif">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
|
--- DSe 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:
<CENTER><IMG SRC="immagine.gif"></CENTER>RICORDA:
se metti immagini, di si impiega maggiormente ad aprire le pagine una volta che sono su internet perché occupano molto più spazio!!!
9. 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="TANK">http://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.
<A HREF="mailto:bakunin@meganmail.com">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="<IMG">http://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="http://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ì.
10. Ancora un po' di formattazione
<BLOCKQUOTE> è un comando che permette di fare un inciso.
Si usa così:
<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...
</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
- la pasta
- il sale
- un pacchetto di preservativi
- i biscotti
Poi c'è un altro tipo di lista che si definisce lista con descrizione.
<BODY BGCOLOR="#FFFFFF">
<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:
<HR WIDTH=50%>
<HR WIDTH=20>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 BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</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 BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>E si può anche togliere l'effetto 3d:
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</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.come 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.comCioè quello che mi interessava!
11. Commenti
Come ogni linguaggio che si rispetti, HTML ha dei commenti. Questi si fanno così:
<!--
Tutto questo è un commento!
-->
12. 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è http://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---------
<HTML><HEAD>
<TITLE>Pagina Principale</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="prima.html">
<FRAME SRC="seconda.html">
</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 COLS="20%,20%,20%,20%,20%">
<FRAME SRC="A.html">
<FRAME SRC="B.html">
<FRAME SRC="C.html">
<FRAME SRC="D.html">
<FRAME SRC="E.html">
</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 COLS="50,*,2*">
<FRAME SRC="prima.html">
<FRAME SRC="seconda.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="terza.html">
<FRAME SRC="quarta.html">
</FRAMESET>
</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 riempiono 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 COLS="50,*,2*">
<FRAMESET ROWS="50,*,*">
<FRAME SRC="prima.html">
<FRAME SRC="prima.html">
<FRAME SRC="prima.html">
</FRAMESET>
<FRAME SRC="seconda.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="terza.html">
<FRAME SRC="quarta.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>Qui metti il testo della pagina principale o, se vuoi semplicemente non metti nulla e indichi: tu non poi visualizzare correttamente 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 COLS="50%,50%">
<FRAME SRC="immagine.gif" WIDTH=146 HEIGHT=162>
<FRAME SRC="prima.html">
</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:
<FRAME SRC="immagine.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>Ovviamente stiamo collegamento 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 è:
<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="immagine.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="prima.html">
</FRAMESET>
<FRAME SRC="seconda.html">
</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:
<FRAMESET COLS="154,*" BORDER=20>o addirittura dargli un colore:
<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">e, ovviamente possiamo eliminarli:
<FRAMESET ROWS="170,*" FRAMEBORDER=NO >e complicando il tutto:
<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
<FRAMESET ROWS="170,*" FRAMEBORDER=NO >
<FRAME SRC="immagine.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="prima.html">
</FRAMESET>
<FRAME SRC="seconda.html">
</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 COLS="33%,67%">
<FRAME SRC="prima.html">
<FRAME SRC="seconda.html" NAME="menu">
</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
_backche 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
13. 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------------
<HTML><HEAD>
<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 preoccupare, è normale! Fra un po' farai delle cose allucinanti. Innanzi tutto attraverso un bordo:
<TABLE BORDER=1>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:
<TABLE BORDER=3 WIDTH=100%>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:
<TABLE BORDER=3 WIDTH=100 HEIGHT=75><TR>
<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:
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="immagine.gif" WIDTH=32 HEIGHT=32></TD>
</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:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR>
<TD>prima</TD>
<TD>seconda</TD>
</TR>
</TABLE>Ma dato che ve lo già detto, regolate sempre le dimensioni!
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Prima</TD>
<TD WIDTH=150>Seconda</TD>
</TR>
</TABLE>Complichiamo un attimo:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<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!
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<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?
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<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:
<TABLE BORDER=3 CELLPADDING=12>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 ovviamente 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 riga:<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 riga oltre alla sua posizione nel caso ci fosse un buco nelle sue vicinanze.
Prendiamo l'esempio di prima.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<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ì:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<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:
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="<B>Prima">http://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:
<TABLE BORDER=3>
<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:
<TABLE BORDER=3>
<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:
<TABLE BORDER=3>
<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:
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="immagine.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
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 ingredienti 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:
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>
<TABLE BORDER=3>
<TR>
<TD>PRIMA</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>E questo è più o meno tutto per le tabelle. Ora passiamo a FORM!
14. 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:
- Puoi mandare i dati ad uno script cgi per processarli
- 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 creare 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:
<INPUT TYPE=TEXT NAME="INDIRIZZO">Il risultato sarà un email con INDIRIZZO=...quello che uno mette...
Se metto questo
<INPUT TYPE=TEXT NAME="INDIRIZZO" VALUE="Via dell'anarchia 1, UTOPIA">Comparirà come già scritto, ma ovviamente uno può cancellare e mettere il suo!
Con SIZE regolo la dimensione del campo:
<INPUT TYPE=TEXT NAME="INDIRIZZO" VALUE="Via dell'anarchia 1, UTOPIA" SIZE=30>Come valore, se lo tolgo, c'è 20, ma se metto SIZE posso modificarlo a piacere.
Esiste poi un altro comando:
<INPUT TYPE=TEXT NAME="INDIRIZZO" SIZE=30 MAXLENGTH=10>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:
<INPUT TYPE=RADIO NAME="Si o no">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:
<INPUT TYPE=RADIO NAME="Amico"><BR>
<INPUT TYPE=RADIO NAME="Amico"><BR>
<INPUT TYPE=RADIO NAME="Amico"><BR>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ì:
<INPUT TYPE=CHECKBOX NAME="BAKUNIN">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=YESCioè ti mandano solo quella con Sì! Gli altri no.
Ora reggetevi forte!
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
<TD WIDTH=199>
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>
<TD WIDTH=200>
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>
<TD WIDTH=199>
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 dentro 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ì:
<SELECT NAME="Il più bello">
<OPTION>Bakunin
<OPTION>Screener_it
<OPTION>Morpheus
</SELECT>Ovviamente però bisogna inserire dei VALUE altrimenti ti arriva una schifezza:
<SELECT NAME="Il più bello">
<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:
<SELECT NAME="Il più bello" SIZE=4>
<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 compare 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 NAME="commento">
</TEXTAREA>Posso ovviamente regolare l'altezza e la larghezza facendo così:
<TEXTAREA NAME="Commento" ROWS=6 COLS=50>
</TEXTAREA>Posso addirittura inserire già qualcosa all'interno dei TEXTAREA in modo che compagna già una scritta. Così:
<TEXTAREA NAME="Commento" ROWS=6 COLS=50>
@//\\//\\//\\//\\//\\@
{| |}
--{ | -== 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
capoOFF il testo non va a capo e viene spedito così.
L'uso è per tutti e tre i casi uguale:
<TEXTAREA NAME="Commento" ROWS=3 COLS=30 WRAP=OFF>Poi ci sono i pulsanti che permettono di inviare dati:
<INPUT TYPE=SUBMIT>o di cancellare tutto quello scritto:
<INPUT TYPE=RESET>Posso ovviamente modificare le scritte:
<INPUT TYPE=SUBMIT VALUE="Hai tre secondi per spedire sto coso!"><BR>
<INPUT TYPE=RESET VALUE="Lo voglio come nuovo!"><P>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!)---------------------
Ciao a tutti e ricordate....
...per consigli e aiuti vari:
BAKUNIN
bakunin@meganmail.com
