Che cosa puoi fare con l'HTML

Note Della Pagina:

__sotto troverai una tabella che ti guiderà tra le varie sezioni di questa pagina e da questa potrai vedere anche le novità.


Altri collegamenti
Tags di HTML
Tags Dinamici
Apri l' Indice
Immagini
Base Target
Introduzione all'HTML
Tabelle
Frames

Usa il pulsante Indietro del tuo browser per tornare a questo punto da qualunduqe sezione.
_______

Immagini in pagine HTML:

Il tag che devi utilizzare è <IMG SRC=nomeimmagine>, dove il nomeimmagine è la posizione ed il nome con l'estensione dell'immagine che hai selezionato. Con questo tag puoi usare gli stessi tags che usi per formattare e posizionare il testo in una pagina (cioè ad esempio <center>). Ma c'è un problema quando vuoi mettere un'immagine nella parte destra della pagina, per far questo puoi mettere l'immagine in una tabella (vedi sezione sotto). Usando una tabella per dare una posizione fissa alla tua immagine, io penso tu faccia la cosa migliore, infatti una tabella ti permette di mantenere l'immagine nella posizione originale, e ti permette di porla dappertutto, senza preoccuparti del formato della finestra (ogni ridimensionamento della finestra che imporrai non interesserà la posizione della tua immagine, lo farà quasi di sicuro se non userai una tabella).
Un'alternativa ad una tabella è il tag <P ALIGN=RIGHT>, per cui il browser inizia da destra a mostrare le cose che metti nel paragrafo, anziché cominciare dalla parte sinistra come di default; il problema è che il testo sarà allineato a destra come nella colonna di destra dell'indice di questo sito (in questo caso è voluto e realizzato diversamente). Questo problema non c'è usando una tabella.
Un tag da usare all'interno di IMG SRC è ALT="testo da mostrare"; devi metterlo nel tag di IMG SRC e puoi specificare il testo che apparirà quando il puntatore del mouse passerà sull' immagine, scrivi questo testo fra "... " dopo la stringa ALT =.
Ecco un esempio:

<center><IMG SRC=test.gif ALT="questa è test.gif"></center>

questa riga ti fa vedere test.gif e se il tuo mose passa su test.gif comparirà il testo "questa è test.gif".

questa è test.gif

Vi parlerò appena possibile del ridimensionamento delle immagini tramite tags HTML.
È possibile mettere un bordo nero piano intorno alla vostra immagine introducendo l'istruzione BORDER=? nel tag IMG SRC:

<IMG SRC=test.gif border=2>
se mettessi 0 al posto di ? non avresti alcun bordo, se metti un numero differente 0 otterrai un bordo in vario formato, questo può essere utile da per eliminare il bordo di un link (vedi il link alla mia E-mail nell'indice, esso non ha alcun bordo).
Un tag come quello qui sopra mostrerà test.gif attorniata da un bordo nero di dimensione 2.

Per quanto riguarda le immagini di piccola dimensione il tipo che devi utilizzare ritengo sia il *.JPG, infatti è l'unico che ti permette di modificare e scegliere direttamente la qualità dell'immagine, che è poi il fatore che influisce più degli altri sulla dimensione (intendo con dimensione lo spazio fisico occupato dall'immagine, non la sua altezza e larghezza che rientrano nella risoluzione). Si potrebbe dire che anche il tipo *.GIF è un formato compresso, ma in realtà a parità di risoluzione il GIF ha solo 16 - 256 colori, mentre il *.JPG arriva anche a 24 - 32bit/pixel, ottimo per immagini raster come quelle che hai visto nella sezione Immagini di questo sito. Inoltre a prità di risoluzione, per immagini medio-larghe il *.GIF occupa più spazio del *.JPG.
Vediamo alcuni dati in proposito:


Tipo


JPG Max
JPG -11.8%
JPG -15.7%

GIF

Risoluzione


640x480
640x480
640x480

640x480

Dimensione (Kb)


184
50.9
42.9

134

Bene, esaminiamo il contenuto della tabella; riporta i risultati di un test eseguito con tre tipi di JPG contro il corrisponedente GIF a 256 colori. L'immagine utilizzata è raster ed in particolare è la goccia della terza galleria, purtroppo non posso introdurre tutte le immagini utilizzate per esiguità di spazio web... comunque vi descriverò i fatti salienti.
Dei tre tipi di JPG, il primo (Max) è quello ad alta risoluzione (100% di qualità), il secondo (-11.8%) è un'immagine la cui qualità è stata ridotta dell'11.8% (qualità = 88.2%), il terzo ha una riduzione del 15.7% (qualità = 84.3%); sottolineo che tutte le tre immagini descritte hanno una risoluzione di 640x480 a 24bit/pixel. Segue il GIF corrispondente a JPG Max (pensate che i GIF corrispondenti alle JPG ridotte avevano una taglia più grande di questo), non solo è più del doppio delle due JPG ridotte, ma ha solo 256 colori!
Come sono le JPG ridotte??? Beh, tutte le immagini nelle mie gallerie sono ridotte dell'11.8%, vanno bene no?! La riduzione del 15.7%, comunque, riduce di poco più la definizione dell'immagine.
L'unica applicazione in cui è effettivamente utile il GIF è nel caso di immagini vettoriali con 16 o 256 colori al massimo, allora in effetti il GIF risulta più piccolo in dimensione del corrispondente JPG che applica sempre il 24bit/pixel, per altro sprecato in questi casi.
Questo in breve quello che dovete fare per ottenere immagini adeguate sia in dimensione, sia in caratteristiche, da mettere in un vostro sito.

_______

Tabelle in HTML:

Una tabella ti permette di dare una formattazione sicura al tuo testo, con questo ti voglio dire che se metti il tuo testo in una tabella non sarà influenzato dal ridimensionamento della finestra né da alcun genere di vista. Infatti è possibile che una dimensione particolare della finestra del browser alteri la posizione del testo e quindi che tu perda l'effetto che hai imposto. Le Tabelle sono utili anche per dividere la finestra in parti differenti, cioè con differenti colori o immagini di sfondo diverse, o diverso colore del testo e così via.
Diamo uno sguardo ai tags necessari per sviluppare una tabella Web:

<TABLE BGCOLOR=?????? BORDER=n ALIGN=? VALIGN =? WIDTH=?% HEIGHT=?%>
___< TD BGCOLOR=?????? WIDTH=x% HEIGHT=y% ALIGN=? VALIGN =?>

Questi sono i tags di base per sviluppare una tabella in una pagina Web. Ora brevemente spiegherò cosa sono e come si usano, provandoli farai la cosa migliore per imparare ad usarli.

Il resto di questa sezione è nel mio Corso...

_______

Base Target:

Come hai visto nell'Indice, ogni link della prima colonna si apre in un'altra finestra, questo è dovuto al tag <BASE TARGET= ...>. Con questo tag puoi scegliere una nuova finestra in cui aprire la nuova pagina, dando un nome alla nuova finestra. È chiaro che questo tag è utile quando il sito deve essere velocemente leggibile, in questo modo puoi tenere in background il tuo indice, e rendere la navigazione più veloce e confortevole (c'è almeno un altro modo per ottenere una cosa molto simile, ma per ora impara questo).
Diamo un'occhiata alla sintassi (ti darò le regole di base, e poi otterrai i migliori risultati provando).
Devi scrivere:

<BASE TARGET="nometarget">

Queste sono le istruzioni più importanti per sviluppare un link dinamico; nometarget è il nome da assegnare alla nuova fiestra. Dopo questo tag metti la strina del link (<A HREF=...>), ed il link che hai scelto si aprirà nella finestra denominata nometarget.
Ricorda che il BASETARGET agisce dal punto della pagina in cui lo metti (anche tabelle e paragrafi) fino al punto in cui scrivi

<BASE TARGET="_self">

questo tag terminerà l'apertura dei links in altre finestre, e provocherà il ritorno all'apertura di default nella stessa pagina.

_______

I Frames:

Cos'è un frame? È la maniera per dividere una pagina web in due parti che mostrano pagine differenti nello stesso momento, infatti come puoi vedere dalla sintassi,

<FRAMESET ROWS/COLS="x%,z%" BORDER=0/>0>
___<FRAMESRC=page1.htm SCROLLING=auto NAME="?1">
___<FRAMESRC=page2.htm SCROLLING=auto NAME="?2">
</FRAMESET>

puoi mostrare due pagine differenti in una stessa pagina sviluppata con il tag FRAMESET.
Una pagina contenente il tag FRAMESET non deve avere tag come BODY, né TITLE, né HEAD, e così via, ci deve essere solo il tag FRAMESET, se vuoi, il tag <HTML> all'inizio della pagina, e </HTML> alla fine.
Le variabili sono:

ROWS/COLS usa ROWS se vuoi dividere la pagina in righe, e COLS se la vuoi dividere in colonne
x% per la larghezza della prima colonna, o l'altezza della prima riga
z% per la larghezza della seconda colonna, o l'altezza della seconda riga
BORDER=0/>0 con un valore 0 non otterrai alcun bordo attorno alle colonne/righe, con un valore >0 otterrai un bordo di varie dimensioni (maggiore è il numero e maggiore sarà la dimensione del bordo)
FRAMESRC cerca la page1.htm che è il contenuto della prima colonna/riga, e page2.htm come contenuto della seconda colonna/riga
SCROLLING=auto ti fa avere una barra di scorrimento in ogni riga/colonna se la loro dimensione eccede quella della finestra del browser
NAME="?1/?2" ti permette di dare un nome ad ogni riga/colonna da usare con BASETARGET (vedi la sezione).


Se sei approdato qui senza aprire la pagina di indice
Apri l' Indice
e troverai i nuovi argomenti sull'HTML, le nuove immagini 3D ed il resto del sito.

A.N. Design