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 |
Base Target |
Frames |
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).
<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".
Vi parlerò appena possibile del ridimensionamento delle immagini tramite tags HTML.
<IMG SRC=test.gif border=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.
GIF
640x480
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.
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.
<TABLE BGCOLOR=?????? BORDER=n ALIGN=? VALIGN =? WIDTH=?% HEIGHT=?%>
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). <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.
<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>
puoi mostrare due pagine differenti in una stessa pagina sviluppata con il tag FRAMESET. ROWS/COLS usa ROWS se vuoi dividere la pagina in righe, e COLS se la vuoi dividere in colonne
A.N. Design
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:
È possibile mettere un bordo nero piano intorno alla vostra immagine introducendo l'istruzione BORDER=? nel tag IMG SRC:
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.
Vediamo alcuni dati in proposito:
Tipo
JPG Max
JPG -11.8%
JPG -15.7%
Risoluzione
640x480
640x480
640x480
Dimensione (Kb)
184
50.9
42.9
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.
Diamo uno sguardo ai tags necessari per sviluppare una tabella Web:
___< TD BGCOLOR=?????? WIDTH=x% HEIGHT=y% ALIGN=? VALIGN =?>
Diamo un'occhiata alla sintassi (ti darò le regole di base, e poi otterrai i migliori risultati provando).
Devi scrivere:
Ricorda che il BASETARGET agisce dal punto della pagina in cui lo metti (anche tabelle e paragrafi) fino al punto in cui scrivi
___<FRAMESRC=page1.htm SCROLLING=auto NAME="?1">
___<FRAMESRC=page2.htm SCROLLING=auto NAME="?2">
</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:
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).
Apri l' Indice
e troverai i nuovi argomenti sull'HTML, le nuove immagini 3D ed il resto del sito.