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> <body>
Pagina di prova </body> </html>
<head>
<title>Pagina di prova</title>
</head>
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 |
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.
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. 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.
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à. 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.virgilio.it.htm">Pagina di Virgilio</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="Roby"> e il link ipertestuale Roby nel documento Index.htm sarà <a href="index.htm#Roby">Link a Roby</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.
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.
Per creare invece elenchi in cui ogni elemento abbia una descrizione come nell'esempio sotto.
Si utilizza il seguente codice.
<dl> <dt>Modem<dd>Strumento che permette di collegarsi ad Internet. </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. 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.
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> 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> 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> Il campo File serve ad allegare files al trasferimento dei dati. <form method=post> 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> 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> 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> Il campo Hidden (nascosto) è invisibile, ma il suo contenuto (VALUE) viene spedito assieme agli altri dati. <form method=post> 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:email@geocities.com">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.
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 questo si inserisce l'attributo TYPE nel tag <ol>
<dt>Hard disk<dd>Disco rigido in cui è possibile memorizzare i dati.
In altoA metàAi piediTop Middle Bottom
<input type=text name="Nomecampo" value="ciao" size=30 maxlenght=50>
</form>
<input type=password name="Nomecampo" value="ciao">
</form>
<input type=file name="Nomecampo">
</form>
<input type=checkbox name="Nomecampo" value="opzione" checked>
</form>
<textarea name="commenti" rows=3 cols=30>Contenuto iniziale<textarea>
</form>
<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>
<input type=hidden name="Nomecampo" value="campo nascosto">
</form>
<input type=submit value="Invia">
<input type=reset value="Azzera">
<input type=image name="cerca" src="immagine.jpg">
</form>