Guida Html

NON SAI CHIUDERE UNA FINESTRA WINDOWS A TUTTO SCHERMO ?
Basta pigiare contemporaneamente i tasti: CTRL W (KEY for CLOSE A WINDOW)

VUOI PROTEGGERTI DAGLI HACKER E/O PSEUDO-HACKER ?
INSTALLA IL ZONE-ALARM FIREWALL (FREE)

SCARICA LA RADIOLINA (Shoutcast) X WINAMP con istruzioni complete!

!! ALL HTML CODES !! (English Version)

SCARICA IL + BEL CARATTERE MICKEY FONT (38 Kbytes) or in ZIPPED DOWNLOAD THE BEST FONT
X INSTALLARLO: Pannello di controllo - Tipi di caratteri - File/installa nuovo tipo di caratteri

SCARICA IL MIO WINAMP - SKIN con cursori animati

Sito web x principianti

Un caro e semplice comando "DOS" e' il TRACERT (x risolvere l'IP di un indirizzo)
Nonchè il PING e il NETSTAT (CTRL+C x chiudere l'esecuzione dos)

Guida al linguaggio HTML 3.2
Per principianti e avanzati
Proposto da SIRIO e concesso da Veronica

2. La prima pagina

3. Formattazione

4. Sfondo, colori e font

5. Collegamenti ipertestuali

7. Elementi grafici

Per una perfetta visualizzazione si consiglia Netscape 4.0

1. Primi passi

Il World Wide Web è un'enorme raccolta di informazioni sparpagliate in centinaia di migliaia di computer in tutto il mondo. I computer possono essere client o server. Le informazioni sono memorizzate sui server e richieste dai client (il vostro è un client). Il WWW è una rete distribuita; questo significa che non esiste un computer centrale, ma che ogni client può accedere a qualsiasi server, indipendetemente dagli altri. Ogni elemento d'informazione (documenti Html, immagini, suoni, video, ecc.) ha un proprio indirizzo unico al mondo, detto URL, come questo:

http://www.aspide.it/freeweb/guidahtml/index.htm

In cui la prima parte (http://) indica il protocollo, ossia la modalità di trasferimento dei dati (per i documenti html, l'ideale è l'http). La seconda (www.yahoo.com) indica il dominio, ossia il server specifico in cui sono memorizzati i dati. Le successive (freeweb, guidahtml) le cartelle o directory in cui sono contenuti i files e l'ultima (index.htm) è il file vero e proprio.

Realizzare una pagina web è semplicissimo e tutto quello che occorre è un comunissimo editor di testo (ad es. Blocco Note di Windows, Wordpad, Word, ecc.). I file Html sono costituiti da testo normale più dei tag, ossia dei codici speciali che consentono di cambiare i colori delle scritte, inserire immagini, collegamenti, ecc.. Questi tag sono riconosciuti dal browser (come Netscape o Explorer) che visualizza la pagina web. Esistono degli editor Html visuali completamente automatici e gratuiti, come Composer o FrontPad, dove non occorre conoscere nemmeno un tag, ma non supportano alcune funzioni. Io personalmente ho sempre usato editor testuali, senza dubbio la qualità delle pagine è più alta se si interviene a mano sul codice Html. Siete pronti ? Cominciamo.

2. La prima pagina

I tag, ossia i codici vanno scritti sempre tra il segno di minore < e di maggiore >, ad es. <html>. Scriverli in minuscolo o maiuscolo non ha importanza. Provare con il seguente esempio:

<html>
<head>
<title>Pagina di prova</title>
</head>

<body>

Pagina di prova

</body>

</html>

I tag <html>, <head>, <title>, </title>, </head>, <body>, </body> e </html> sono obbligatori e devono essere sempre inseriti in quest'ordine. In particolare <html> e </html> racchiudono tutto il documento; <head>, <title>, </title> e </head> racchiudono il titolo del documento e infine <body> e </body> il contenuto di esso. A questo punto si può salvare il file (ad es. pagina.html) e visualizzarlo col browser scrivendo il percorso nella barra degli indirizzi (ad es. c:\pagina.html), oppure se si usa un vecchio browser: file://c:\pagina.html.

Esistono dei tag per cambiare la grandezza e lo stile dei caratteri; racchiudendo ad es. una frase tra i tag <b> e </b> sarà scritta in grassetto. Di seguito sono riportati degli esempi.

Tag	Esempio	Tag	Esempio
<b></b>	Grassetto	<h2></h2>	Heading 2
<i></i>	Corsivo	<h3></h3>	Heading 3
<u></u>	Sottolineato	<h4></h4>	Heading 4
<tt></tt>	`Monospaziato`	<h5></h5>	Heading 5
<h1></h1>	Heading 1	<h6></h6>	Heading 6

Come primo esercizio creare una pagina, inserendo i tag fondamentali e i tag di stile e grandezza.

3. Formattazione

Qualsiasi interruzione di riga o ritorno a capo inserita nell'editor (Blocco note, Word, ecc.) è irrilevante per il browser. Per inserire un ritorno a capo ci si serve del tag <br>. Il tag <p>, invece, serve per segnare l'inizio di un paragrafo. Per allineare a centro una frase, un paragrafo o un oggetto li si racchiude tra i tag <center> e </center>. Per allinearli a destra o a sinistra si inserisce nel tag <p> l'attributo ALIGN e si inserisce RIGHT o LEFT per allineare il testo a destra o a sinistra. Per incolonnarlo perfettamente su tutto lo schermo, invece, si usa JUSTIFY (solo sull'ultima generazione di browsers).

<p align=justify>

Per disattivare la funzione di ritorno a capo automatico alla fine della riga si usa l'attributo NOWRAP all'interno del tag <p>. Ad es. <p nowrap>. In questo modo è possibile inserire le interruzioni di riga specificatamente usando il tag <br>.

Per visualizzare del testo preformattato con caratteri monospaziati si usano i tag <pre> e </pre>. Il testo preformattato verrà visualizzato esattamente come lo si è scritto sull'editor, con spazi e ritorni a capo. Ad es.

Primavera

Stanotte s'è messa in cammino
la Primavera nell'aria.
D'intorno, sul capo, le svaria
un velo di stelle turchino.

Il suo profumo è un sospiro
diffuso sui freschi giardini.
La terra non ha più confini,
il mare non ha più respiro.

Normalmente il testo scorre attorno agli oggetti. Per far in modo che un paragrafo inizi al di sotto di un oggetto, cioè dove i margini sono liberi, si può usare l'attributo CLEAR=ALL nel tag <p>. Per far iniziare il paragrafo dove il margine di sinistra diventa libero si scrive CLEAR=LEFT, per farlo iniziare dove il margine di destra è libero CLEAR=RIGHT.

Per inserire una linea orizzontale si usa il tag <hr>. Si possono variare le sue dimensioni tramite gli attributi WIDTH (larghezza), SIZE (spessore), l'allineamento mediante ALIGN (con i soliti comandi LEFT, RIGHT e CENTER) e disattivare l'effetto 3D, mediante l'attributo NOSHADE. Inoltre anch'esso, come il paragrafo supporta l'attributo CLEAR. Sotto un esempio di linea lunga 1/3 dello schermo e centrata.

<hr width=33% align=center>

Per far rientrare una parte del testo a destra e a sinistra lo si può racchiudere all'interno dei tag <blockquote> e </blockquote>.

Esercitarsi sulle varie formattazioni possibili, prima di passare alla lezione successiva.

4. Sfondo, colori e font

Nel tag <body> è possibile inserire alcuni attributi per controllare i colori dello sfondo e del testo. Gli attributi sono BGCOLOR e TEXT. Scrivendo ad es. <body bgcolor=white text=black> si avranno caratteri neri (black) su schermo bianco (white). Per inserire colori particolari si fa uso di un codice (RGB) che ha questa forma #rrvvbb dove rr è l'intensità della componente rossa del colore, vv di quella verde e bb di quella blu. Ogni valore va da 00 (zero) a ff (255) in numerazione esadecimale (per convertire i numeri è sufficiente la calcolatrice scientifica di Windows 95). Per cui se si vuole un viola (rosso + blu) si dovrà mettere BGCOLOR=#ff00ff, in modo da avere una forte intensità nelle componenti rossa e blu e un'intensità nulla nel verde (00). Nella tabella seguente alcuni esempi.

Codice colore	Esempio	Codice colore	Esempio
#000000	Nero	#800000	Rosso cupo
#ff0000	Rosso	#008000	Verde scuro
#00ff00	Verde	#000080	Blu scuro
#0000ff	Blu	#800080	Indaco
#00ffff	Azzurro	#ff8000	Arancione
#ff00ff	Violetto	#8000ff	Viola

Per far visualizzare un determinato tipo di font (che deve, però, essere istallato sulla macchina client) si usa il tag <font> con i seguenti attributi: FACE per scegliere il tipo di font (ad es. Times New Roman), COLOR per attribuire il colore, con il codice precedente, SIZE per fissare la grandezza dei caratteri (da 1 a 7). Occorre il tag di chiusura </font>.

<font face="Times New Roman" size=5 color=#8000ff>Viva l'Italia</font>

Fare parecchie prove e assicurarsi che il contrasto tra caratteri e sfondo sia netto, in modo da non affaticare la vista e consentire una buona visibilità.

5. Collegamenti ipertestuali

Per poter navigare da un documento all'altro della rete (o all'interno dello stesso documento) si possono inserire dei collegamenti ipertestuali o links.

<a href="http://www.aspide.it/freeweb/guidahtml/misteri.htm">Pagina dei Misteri</a>

Dove Pagina dei Misteri è la scritta sottolineata dove si deve cliccare. Questo è un link assoluto, poichè contiene l'intero percorso per andare al file misteri.htm, ma se il file di destinazione si trova nella stessa cartella allora basterebbe scrivere un link relativo:

<a href="misteri.htm">Pagina dei Misteri</a>

Per andare a visualizzare un file che si trova nella cartella superiore, nell'albero delle directory, a quella in cui ci si trova (in questo caso freeweb) si può scrivere:

<a href="../main.htm">Pagina Principale</a>

Per navigare all'interno dello stesso documento si deve usare l'attributo NAME nel tag <a>. Nel punto dove si vuole portare l'utente si scriverà

<a name="guidahtml">

e il link ipertestuale guidahtml nel documento Index.htm sarà

<a href="index.htm#guidahtml">Link a guidahtml</a>

Il colore dei link visitati, attivi e non ancora visitati può essere specificato nel tag <body> con gli attributi LINK (link non ancora visitati), VLINK (link già visitati), ALINK (link attivo, cioè nel momento in cui si clicca) e il codice dei colori visto in precedenza. Ad esempio

<body link=#0000ff vlink=#0000a0 alink=#ff0000>

Consiglierei di esercitarsi parecchio con i links, prima di passare alla lezione successiva

Vi sono 3 tipi di elenchi in html: gli elenchi semplici (cioè non ordinati), ordinati e con definizioni. Ecco subito un esempio del primo.

Lista della spesa

Per questo semplice elenco è sufficiente scrivere

<ul><lh>Lista della spesa</lh>

<li>Latte<li>Uova<li>Zucchero<li>Patate<li>Salame

</ul>

Al posto del pallino all'inizio di ogni elemento è possibile mettere quadretti o cerchietti con l'attributo TYPE all'interno del tag <ul> e specificare DISC, SQUARE o CIRCLE. Se invece si vuole un elenco ordinato si deve usare il tag <ol> al posto di <ul>. Questa è l'unica differenza. Ecco un esempio.

Cose che si possono fare

E' possibile numerare l'elenco con numeri

Ma è possibile anche mettere lettere al posto dei numeri

Per far questo si inserisce l'attributo TYPE nel tag <ol>

Si scrive TYPE=A per lettere maiuscole A, B, C...

Si scrive TYPE=a per lettere minuscole a, b, c...

Si scrive TYPE=I per la numerazione romana I, II, III, IV...

E TYPE=i per quella minuscola i, ii, iii, iv...

Inoltre si possono inserire elenchi all'interno di altri come sopra

Si può digitare direttamente il numero, per mezzo dell'attributo VALUE in ogni riga ad es. <li value=20>

Oppure ancora <li value=25>

Per creare invece elenchi in cui ogni elemento abbia una descrizione come nell'esempio sotto.

Modem: Strumento che permette di collegarsi ad Internet.
Hard disk: Disco rigido in cui è possibile memorizzare i dati.

Si utilizza il seguente codice.

<dl>

<dt>Modem<dd>Strumento che permette di collegarsi ad Internet.
<dt>Hard disk<dd>Disco rigido in cui è possibile memorizzare i dati.

</dl>

In cui <dl> e </dl> sono i tag di apertura e chiusura dell'elenco e <dt> e <dd> rispettivamente del termine e della definizione.

7. Elementi grafici

I formati grafici più diffusi nel WWW sono GIF e JPEG. Il GIF può essere visualizzato su qualunque computer e ha 3 funzioni importanti: la trasparenza, l'animazione e l'interlacciamento, ma supporta al massimo 256 colori e non è molto compresso, per cui è l'ideale per un logo o un'icona. Il JPEG, invece, gestisce 16,7 milioni di colori ed è molto più compresso, per cui è adatto alle fotografie. Per aggiungere un'immagine in una pagina web si utilizza il seguente codice.

<img src="logo.gif" alt="Questo è un logo" align=center height=150 width=100>

L'attributo ALT serve a dare un'alternativa di testo agli utenti che non visualizzano le immagini. ALIGN serve per allineare l'immagine rispetto al testo che la circonda, i valori possibili sono LEFT (a sinistra), RIGHT (a destra), CENTER (al centro), TOP, MIDDLE e BOTTOM. L'allineamento di default è BOTTOM. Qui alcuni esempi chiariranno ogni cosa.

In alto	A metà	Ai piedi
Top	Middle	Bottom

Gli attributi HEIGHT e WIDTH indicano rispettivamente altezza e larghezza dell'immagine in pixel. Tutti gli attributi tranne SRC sono facoltativi.

Un file GIF interlacciato consente al browser di accrescere i dettagli dell'immagine man mano che la carica, col vantaggio di poter osservare una bozza da subito, invece di farla apparire a fine caricamento. Per far questo occorre salvarla in formato Gif - 89a Interlaced.

Un file GIF trasparente ha uno dei suoi colori trasparente allo sfondo. Per salvare un'immagine in formato GIF trasparente, occorre un programma di fotoritocco (ad es. Paint Shop Pro), colorare lo sfondo con un determinato colore e nelle opzioni di salvataggio GIF, specificare qual è il colore trasparente. Tutti i pixel colorati con quel colore saranno invisibili.

Mediante il tag BODY è possibile utilizzare un'immagine come sfondo.

<body background="back.gif">

E' fortemente consigliabile specificare il colore di sfondo (bgcolor) molto simile alla texture, in modo che il testo sia chiaramente leggibile anche prima che sia caricata la texture di sfondo.

Un form è uno strumento che consente di raccogliere informazioni da parte dell'utente e inviarle ad un server remoto. Il codice attraverso cui sono scambiate queste informazioni si chiama CGI (Common Gateway Interface). Ecco un esempio.

Digitare il seguente esempio

<form method=post>

<p>Età <input type=text name="eta" size=20>

<p><input type=submit value="Invia l'età">

</form>

I tag di apertura e chiusura di un form sono (ovviamente) <form> e </form>. L'attributo METHOD può avere due valori POST e GET. Il metodo POST elabora le informazioni riga per riga, ed è l'ideale per iscrizioni, registrazioni, e-mail; il metodo GET invece elabora tutti i dati in un'unica riga ed è usato dai motori di ricerca o simili. I campi entro cui vengono immessi i dati si specificano mediante il tag <input>. Ogni campo deve avere l'attributo NAME, in cui viene specificato il nome del campo e dev'essere diverso dagli altri, non deve contenere spazi, nè caratteri speciali. L'attributo TYPE specifica il tipo di campo. Sotto i vari casi possibili e il relativo codice.

<form method=post>
<input type=text name="Nomecampo" value="ciao" size=30 maxlenght=50>
</form>

Gli attributi opzionali del campo Text sono VALUE che specifica il valore iniziale del campo, SIZE la lunghezza visibile in caratteri, MAXLENGHT la lunghezza massima.

<form method=post>
<input type=password name="Nomecampo" value="ciao">
</form>

Il campo Password è simile a quello Text. L'unica differenza è che i caratteri non vengono visualizzati a video, ma sostituiti da asterischi, per ragioni di sicurezza.

<form method=post>
<input type=file name="Nomecampo">
</form>

Il campo File serve ad allegare files al trasferimento dei dati.

<form method=post>
<input type=checkbox name="Nomecampo" value="opzione" checked>
</form>

Il campo Checkbox è come un interruttore, può essere selezionato o no. L'attributo CHECKED specifica lo stato iniziale del campo (contrassegnato), in mancanza invece è non contrassegnato.

Textarea

<form method=post>
<textarea name="commenti" rows=3 cols=30>Contenuto iniziale<textarea>
</form>

Invece di usare il tag <input> si possono usare i tag <textarea> e </textarea> per inserire un testo di più righe. Le righe sono specificate dall'attributo ROWS, le colonne da COLS.

<form method=post>
<select name="colore">
<option>Rosso di sera bel tempo si spera !
<option>Il Verde è il colore della speranza...
<option>Il Blu invece è il colore del mare.
</select>
</form>

Il campo Select permette di creare un menu a tendina con opzioni selezionabili. L'attributo MULTIPLE nel tag <select> consente si selezionare più oggetti contemporaneamente, mediante il tasto Ctrl.

<form method=post>
<input type=hidden name="Nomecampo" value="campo nascosto">
</form>

Il campo Hidden (nascosto) è invisibile, ma il suo contenuto (VALUE) viene spedito assieme agli altri dati.

<form method=post>
<input type=submit value="Invia">
<input type=reset value="Azzera">
<input type=image name="cerca" src="immagine.jpg">
</form>

Il pulsante Invia (submit) è necessario, senza di esso il form non può essere spedito. Il pulsante Azzera (reset) è facoltativo, ma consente di azzerare tutti i valori del form, per una reimmissione dei dati. Un'immagine può sostituire il pulsante Invia.

L'attributo ACTION, necessario, nel tag <form> permette di indirizzare i dati a un server remoto. Per cui in esso va inserito l'URL di destinazione, oppure se si vuole inviare i dati via e-mail, si scrive mailto: seguito dall'indirizzo. In questo modo.

<form method=post action="mailto:...@...">

La novità più interessante di HTML 3.0 è il supporto delle tabelle; esse permettono un controllo più accurato sul layout della pagina e sono adatte per gestire qualsiasi tipo di elemento (numeri, parole, immagini, campi, ecc.). L'aspetto fondamentale delle tabelle è che sono organizzate in righe che vanno da sinistra a destra. Cominciamo.

<table>
<caption>Titolo della tabella</caption>

<tr> <th>Cognome</th> <th>Nome</th> <th>Nazione</th> </tr>

<tr> <td>Schiffer</td> <td>Claudia</td> <td>Germania</td> </tr>

</table>

Titolo della tabella
Cognome	Nome	Nazione
Schiffer	Claudia	Germania

I tag <table> e </table> servono ad aprire e chiudere la tabella. <caption> e </caption> racchiudono il titolo di essa. Mentre la coppia <tr> e </tr> gestisce ogni riga della tabella. La coppia <th> e </th>, invece, crea le intestazioni di ogni singola colonna (in neretto e centrate), mentre i tag che gestiscono i dati nelle colonne sono <td> e </td>.

Esistono parecchi attributi opzionali che permettono un controllo molto accurato dell'aspetto della tabella. All'interno del tag <table>, WIDTH=n specifica la larghezza della tebella in pixel o in percentuale (n%), BORDER=n specifica il bordo della tabella, CELLSPACING=n modifica i bordi interni tra le celle, CELLPADDING=n aggiunge spazi su tutti i lati delle celle; dove n è il numero di pixel.

All'interno di ogni singola cella o per un'intera riga è possibile specificare tag di stile come <b>, <i>, <u> oppure attributi di formattazione ALIGN (allineamento orizzontale) e VALIGN (verticale) con i comandi standard LEFT, CENTER, RIGHT. All'interno del tag <tr> per controllare l'intera riga o all'interno di <td> per controllare la singola cella.

Si possono espandere singole celle su più righe o colonne per mezzo degli attributi ROWSPAN e COLSPAN all'interno di <td>. Ad es. per fare in modo che la cella si espanda su 3 colonne digitare COLSPAN=3. Sotto un esempio di alcuni attributi.

border=5 e cellpadding=3 !!!
In questa colonna gli allineamenti left, right e center	La seconda riga è in corsivo per mezzo di <i>	La seconda riga è allineata a sinistra <tr align=left>	La quarta riga è centrata mediante <tr align=center>
Claudia	Schiffer	Germania	Tel. 0338-7845951
Naomi	Riga espansa a 3 colonne per mezzo di colspan=3
Eva	Herzigova	Russia	Tel. 0336-5264519

Il colore di sfondo dell'intera tabella o di una riga o di ogni singola cella può essere modificato mediante BGCOLOR all'interno dei tag <table>, <tr>, <th> o <td> a seconda dei casi. Per variare colore del bordo e creare un'effetto 3D vi sono gli attributi BORDERCOLOR, BORDERCOLORLIGHT e BORDERCOLORDARK che cambiano i colori del intero bordo, dei bordi superiore e sinistro e dei bordi inferiore e destro, rispettivamente. Il codice dei colori è al solito quello RGB esadecimale. E' possibile, infine, controllare le dimensioni delle celle per mezzo dell'attributo WIDTH all'interno di <td>. Se si usano valori percentuali, essi sono relativi alla tabella e non allo schermo.

I frame consentono di dividere lo schermo in più aree. Questo permette di inserire menu, come quello che vedete a destra e barre come quella in alto. Per disporre le pagine Html in frame occorre un documento Html a parte che crea il set di frame. Provare il seguente esempio.

<html><head><title>Gestore di frame</title></head>

<frameset rows="33%,*">

<frame name="frame1" src="pagina1.html">
<frame name="frame2" src="pagina2.html">

</frameset>
</html>

Il tag <frameset> serve a creare il set di frame. L'attributo ROWS, nell'esempio, crea due aree orizzontali di cui la prima è pari ad 1/3 dello schermo e la seconda (*) la parte restante, ossia i 2/3. Il tag <frame> si occupa di dare un nome (NAME) alle aree così formate e di riempirle con le relative pagine (SRC). Per dividere lo schermo in aree verticali si usa l'attributo COLS al posto di ROWS. In essi è possibile inserire dimensioni assolute (in pixel) o relative (in percentuale di schermo). Ad esempio:

<frameset cols="20%,300,*">

Questa impostazione dividerà lo schermo in 3 aree verticali di cui la prima larga il 20% di esso, la seconda pari a 300 pixel e la terza, la parte che rimane (*).

L'attributo NORESIZE nel tag <frame> disattiva la possibilità di ridimensionare il frame da parte dell'utente. L'attributo SCROLLING="NO" elimina la barra di scorrimento a lato del frame. Gli attributi (opzionali) MARGINHEIGHT e MARGINWIDTH, in ciasun tag <frame> indicano, in pixel, i margini superiore e laterale, rispettivamente, di ciascun frame.

E' possibile, inoltre, annidare i frame suddividendo ciascuno di essi in altri frame. Ecco un esempio.

<html><head><title>Frame annidati</title></head>

<frameset rows="33%,*">

<frame name="frame1" src="pagina1.html">
<frameset cols="*,*,*">
<frame name="frame2A" src="pagina2A.html">
<frame name="frame2B" src="pagina2B.html">
<frame name="frame2C" src="pagina2C.html">
</frameset>

</frameset>
</html>

Queste impostazioni dividono lo schermo in un'area orizzontale superiore di 1/3 di dimensioni relative e un'area orizzontale inferiore di 2/3. Inoltre suddividono l'area inferiore in 3 colonne di uguale grandezza (*,*,*).

Per specificare in quale frame visualizzare una data pagina, si fa uso dell'attributo TARGET all'interno dei link, specificando il nome del frame, come nell'esempio sottostante.

<a href="guidahtml" target="frame1">guidahtml Home Page</a>

FINE GUIDA

Cerca...	...Con

Tua Username	Tua Password	E-MAIL




		LIBERO INWIND

INVIA MESSAGGINI AI CELLULARI (SMS)

OPPURE PROVA
FREESMS
or
SMS

OPPURE PROVA
FREESMSBOX
or
PUBLIWEB

ULTIME ANSA

| Home | Summary | Writes | HELP | MyCountry | News |

| MUSIC CENTER |
| MP3 Archive | Mp3 Search | Skin | MIDS | Country Mids | Karaoke Mids | MODS | MDZ plugin | Music Links |

| MediaFLASH | Animated GIFS | Graphic FIF | JavaLakes | JavaGames | Java IRC & CHAT | WOMEN | LINKS |

© 2000 Sirio

guidahtml.document.write("");