Internet: il linguaggio HTML (2)
Internet: il linguaggio HTML (2)
Collegamenti ipertestuali marcati
Esempio di collegamento ad una pagina della rete con l'inserimento dell'URL (indirizzo):
<a href="http://www.racine.ra.it/"> Per tornare a RACINE fa clik qui.</a>
Esempio di collegamento ad una casella di posta elettronica per la spedizione di eventuali messaggi:
<a href="mailto:ptaroni@racine.ra.it"> Spedite a ptaroni@racine.ra.it</a>
Elenchi puntati e numerati
| Elenco ordinato facendo precedere da un punto: | Elenco ordinato facendo precedere da un numero: |
| <ul> apre l'elenco; | <ol> apre l'elenco; |
| <li> 1 testo; | <li> 1 testo; |
| <li> 2 testo…; | <li> 2 testo…; |
| </ul> chiude l'elenco; | </ol> chiude l'elenco. |
Testo in evidenza
Simpatico, ma a volte, tedioso è la possibilità di evidenziare un testo.
<blink> per il browser Nescape ha la funzione di fare lampeggiare il testo;
<marquee> per il browser I.Explorer ha la funzione di permettere lo scorrimento da destra a sinistra di strisce di testo.
Peccato che i due comandi non sono compatibili su browser diverso.
Struttura e progettazione di una pagina
Riesce difficile distribuire testi e immagini per ...riempire il video che si ha disposizione (vedi WYSIWYG).
Per ...video che si ha disposizione... si intende la risoluzione supportata dalla qualità della scheda video e dalle dimensioni del monitor:
| Valutazione di qualità | Definizione in pixel | Numero dei colori supportati |
| minima o insufficiente | 640 x 480 | 256 colori (VGA standard) |
| minima o sufficiente | 640 x 480 | 65.000 colori |
| buona | 800 x 600 | 65.000 colori o 16,8 milioni (SuperVGA) |
| ottima | 1024 x 768 | 1 6,8 milioni di colori (con video da 17") |
| ottima | 1280 x 1024 | 16,8 milioni di colori |
| ottima | 1600 x 1280 | 16,8 milioni di colori. |
pixel = (picture element) insieme di tre punti dei colori primari (verde, rosso e blu); i pixel si combinano a formare l'immagine sullo schermo.
monocromatico 1 bit per pixel;
Es. di calcolo della dimensione di un file grafico rappresentata da una foto di dimensioni 10 x 15 cm catturata a una risoluzione di 400 punti per pollice (1" = 2,54 cm) con una profondità di colore a 24 bit (16,8 milioni di colore) = 10 Mb!!!
16 colori 4 bit per pixel;
256 colori 8 bit per pixel;
65.000 colori 24 bit per pixel;
16,8 milioni di colori 32 bit per pixel;
Esistono vari metodi per strutturare una pagina:
Struttura di una pagina semplice
Vedi Internet: il linguaggio HTML (1) e (2).
Struttura di una pagina con uso di tabelle
Rappresenta il metodo, in assoluto, più comodo e funzionale per la distribuzione di testo e immagini sul video. Risulta utile la creazione di una tabella che occupa lo spazio a disposizione sul monitor con all'interno altre tabelle a formare celle da riempire a piacimento con testi o/e immagini.
larghezza della tabella
<table width=700> la tabella risulta larga 700 pixel;
<table width=90%> la tabella occupa il 90 % dello spazio a disposizione;
altezza della tabella
<table height=50> la tabella risulta alta 50 pixel;
<table height=90%> la cella occupa il 90 % dello spazio a disposizione;
larghezza della cella
<td width=70> la cella risulta larga 70 pixel;
<td width=90%> la cella occupa il 90 % dello spazio a disposizione;
altezza della tabella
<td height=50> la cella risulta larga 50 pixel;
<td height=90%> la cella occupa il 90 % dello spazio a disposizione;
Il valore è valido per tutta la riga, se si immettono valori diversi il sistema adotta quello più elevato, se il valore immesso è troppo piccolo, esiste il rischio che le righe si sovrappongano, ma il sistema l'aumenta automaticamente;
<cellspacing=3> assegna uno spazio fisso in pixel fra le celle (se si omette il sistema imposta uno spazio di 2 pixel);
<cellpadding=2> assegna uno spazio fisso in pixel fra il contenuto della cella e il suo bordo (il parametro di default e 1 pixel);
<rowspan=3> crea tabelle in cui le singole celle si estendono su più righe;
<colspan=3> crea tabelle in cui le singole celle si estendono su più colonne;
Esempio di tabella in cui le singole celle si estendono su più righe: <table border=1> <tr> <td width=150 rowspan=2>testo1 <td width=100>testo2 <td width=200>testo3 <tr> <td width=100>testo4 <td width=200>testo5 </table>
Esempio di tabella in cui le singole celle si estendono su più righe e colonne: <table border=1> <tr> <td width=150 rowspan=2>testo1 <td width=100>testo2 <td width=200>testo3 <td width=100 rowspan=2>testo4 <tr> <td colspan=2>testo5 </table>
Il testo può essere allineato all'interno della cella:
allineamento orizzontale: align = left (sinistra); right (destra); center (centro);
allineamento verticale: valign = top (in alto); middle (al centro); bottom (in basso);
es. <td width=700 align=left valign=top>
La tabella può avere una propria colorazione di sfondo: <table bgcolor="#ffff00">
La cella può avere una propria colorazione di sfondo: <td bgcolor=#ff00ff">
<th> usato in sostituzione di <td> consente di creare una intestazione centrata e in grassetto;
Di seguito è riportato un esempio con inserimento di una tabella invisibile che occupa 700 pixel in larghezza con una spaziatura di 10 pixel dal bordo, all'interno è posto una tabella che occupa una colonna larga 320 pixel allineata in orizzontale al centro e in verticale in alto, di lato è posta l'inserimento di una immagine con uno spazio di rispetto superiore e inferiore di 5 pixel:
<table width="700" border=0 cellpadding=10>
<tr>
<td width=320 align=center valign=top>
<table width=100% border=3 bgcolor="#ff00ff" cellpadding=5>
<tr>.....
</tr>
</table><td width=320 align=left valign=top border=0>
<center><img src="pippo.gif" vspace=5></center></table>
Struttura di una pagina con uso di frame
Il frame è uno strumento operativo fondamentale nella progettazione e nella programmazione di un ipertesto e inoltre rappresenta un'elegante modalità d'impaginazione.
Il frame è una suddivisioni della finestra in aree diverse, indipendenti e interagenti, possono cioè apparire più pagine nel medesimo istante. Le pagine possono essere 2 (normale) fino anche a 6 (troppe…?) con disposizione verticale o orizzontale.
Una pagina, che rappresenta l'indice degli argomenti, può essere fissa oppure scorrere verticalmente e lateralmente, l'altra pagina che contiene gli argomenti, a sua volta, può scorrere oppure essere fissa.
Le due pagine visualizzate, sono controllate e comandate da un file di comando, di seguito è rappresentato lo script di un file principale che comanda 2 file disposti affiancati verticalmente:
<html> Apre il file principale
<frameset cols="20%,80%" border=0> Pagine in colonna con dimensioni
<frame scrolling=auto resize=yes src=indice.htm name="frame"> Pagina indice che scorre se necessario
<frame scrolling=auto resize=yes src=pippo.htm name="null"> Pagina degli argomenti
</frameset> Chiusura del frame
</html> Chiusura del file
Il comando <frameset cols> affianca le pagine in verticale, Il comando <frameset rows> affianca le pagine in orizzontale.
Struttura di una pagina con uso di immagini mappabili
Una immagine può essere collegata ad una pagina, oppure contenere più aree collegate a diverse pagine (vedi l'alveare dell'Home page della Scuola Media "G.Pascoli" Castel Bolognese http://www.racine.ra.it/pascoli/).
Non tutte l'immagini vanno bene per crearvi una mappa: conviene scegliere immagini che abbiano sezioni o etichette ben definite, inoltre occorre inserire dei suggerimenti nel testo per indicare all'utente che l'immagine contiene più elementi.
Occorre creare un file che contenga le coordinate delle diverse sezioni d'immagine. Se ad esempio l'area è rappresentata da un rettangolo, si devono definire i vertici in alto a sinistra e in basso a destra.
<img usemap="#pippo" src="/immagini/alveare.jpg" alt="immagine clickabile" height=240 width=240><map name="pippo">
<area shape=rect coords="95,16,157,61" href="testi/lezione.htm">
<area shape=rect coords="168,60,232,105" href="testi/citta.htm">
<area shape=rect coords="165,142,235,187" href="testi/classe2b.htm">
<area shape=rect coords="96,182,166,237" href="testi/basket.htm">
<area shape=rect coords="20,141,87,200" href="testi/gita.htm">
<area shape=rect coords="19,59,89,116" href="testi/giorn.htm">
<area shape=rect coords="95,100,164,156" href="testi/scuola1.htm"></map></td>
Bibliografia
© 1998 Autore: prof. P. Taroni
E-mail: ptaroni@racine.ra.it
Legalese :
