Il materiale presente in questa guida è stato, in parte, prelevato dalle guide presenti nel forum di supporto forumfree/forumcommunity http://supporto.forumfree.net/
e dalle guide presenti nello skinlab forumfree/forumcommunity
tutto il resto è stato tratto da guide reperibili sul web grazie all'uso dei motori di ricerca, le fonti sono troppe per elencarle tutte, però a tutte va il nostro ringraziamento. Questa guida non pretende di insegnare l'HTML e il suo uso, è principalmente una raccolta di alcuni tag utili ed utilizzabili nei vostri forum
per chi desidera approfondire l'argomento HTML aggiungo alcuni link a siti che trattano l'argomento HTML in modo più completo.
Per inserire un'immagine a sinistra o a destra di un testo occorre aggiungere l'attributo align al codice per l'inserimento delle immagini, dandogli il valore align="left" se si desidera che l'immagine stia a sinistra del testo, align="right" se la si vuole a destra
HTML
<p> <img src="link_immagine" align="left" alt="descrizione_immagine" width="largezza_immagine_in_pixel" height="altezza_immagine_in_pixel">Questo è un paragrafo di testo con un'immagine a lato, il testo avrà un'immagine a sinistra, perchè l'attibuto align dell'immagine ha il valore left </p>
HTML
<p> <img src="link_immagine" align="right" alt="descrizione_immagine" width="largezza_immagine_in_pixel" height="altezza_immagine_in_pixel">Questo è un paragrafo di testo con un'immagine a lato, il testo avrà un'immagine a destra, perchè l'attibuto align dell'immagine ha il valore right </p>
Se si inserisce un'immagine all'interno di una riga di testo la riga sarà allineata al fondo dell'immagine, si ottiene lo stesso risultato aggiungendo al codice per l'inserimento dell'immagine l'attributo align dandogli il valore align="bottom" , per avere la riga allineata al centro dovremo invece dargli il valore align="middle" , per avere la riga allineata alla sommità dell'immagine invece dovrà essere align="top"
HTML
<p> Questo è un paragrafo di testo con un'immagine inserita all'interno<img src="link_immagine" alt="descrizione_immagine" width="largezza_immagine_in_pixel" height="altezza_immagine_in_pixel"> la riga di testo è allineata al fondo dell'immagine perchè l'immagine non ha un attributo align </p>
HTML
<p> Questo è un paragrafo di testo con un'immagine inserita all'interno<img src="link_immagine" alt="descrizione_immagine" align="bottom" width="largezza_immagine_in_pixel" height="altezza_immagine_in_pixel"> la riga di testo è allineata al fondo dell'immagine perchè l'immagine ha l'attributo align="bottom" </p>
HTML
<p> Questo è un paragrafo di testo con un'immagine inserita all'interno<img src="link_immagine" alt="descrizione_immagine" align="middle" width="largezza_immagine_in_pixel" height="altezza_immagine_in_pixel"> la riga di testo è allineata al centro dell'immagine perchè l'immagine ha l'attributo align="middle" </p>
HTML
<p> Questo è un paragrafo di testo con un'immagine inserita all'interno<img src="link_immagine" alt="descrizione_immagine" align="top" width="largezza_immagine_in_pixel" height="altezza_immagine_in_pixel"> la riga di testo è allineata alla sommità dell'immagine perchè l'immagine ha l'attributo align="top" </p>
Va utilizzato il tag heading(h), a cui si deve attribuire un valore di dimensioni, si va da 1, il valore massimo a 6, il valore minimo
HTML
<h1>Titolo a grandezza 1</h1> <h2>Titolo a grandezza 2</h2> <h3>Titolo a grandezza 3</h3> <h4>Titolo a grandezza 4</h4> <h5>Titolo a grandezza 5</h5> <h6>Titolo a grandezza 6</h6>
Titolo a grandezza 1
Titolo a grandezza 2
Titolo a grandezza 3
Titolo a grandezza 4
Titolo a grandezza 5
Titolo a grandezza 6
Utilizzando il tag heading il testo contenuto viene reso in grassetto, inoltre il tag di intestazione forza il testo ad andare a capo, lasciando anche una riga vuota prima e dopo l'intestazione
Cambiare red nel colore desiderato; cambiare 10 nelle dimensioni desiderate (maggiore sarà il numero, maggiore sarà la dimensione); cambiare verdana nel nome del font desiderato, è anche possibile specificare più font, separando i nomi con virgole (font-family: verdana, arial, sans-serif), in questo caso il browser visualizzerà il testo col primo font specificato, se installato nel sistema operativo, in caso contrario il testo verrà visualizzato col secondo font, se nemmeno quello fosse installato passerà al terzo (è consigliato, come terzo font, specificare il nome di una famiglia generica, nell'esempio è stata utilizzata quella sans-serif).
<a href="link_del_sito" style="color: red; font-size: 10pt; font-family: Comic Sans MS">testo</a>
Cambiare red nel colore desiderato; cambiare 10 nelle dimensioni desiderate (maggiore sarà il numero, maggiore sarà la dimensione); cambiare Comic Sans MS nel nome del font desiderato.
Sistema utile per scrivere, ad esempio, formule chimiche o esponenti di potenze, per scrivere sotto la riga si usa il tag sub (subscript), per scrivere sopra il tag sup (superscript)
HTML
Una parte di questo testo <sub>è scritta sotto la riga</sub>
HTML
Una parte di questo testo <sup>è scritta sopra la riga</sup>
Per realizzare un link ad un punto preciso di una pagina web ( ai titoli dei paragrafi di un testo molto lungo, ad esempio ) occorre inserire un segnalibro, nel punto di arrivo, in questo modo:
HTML
<a name="nome _segnalibro">parola a cui effettuare il link</a>
il link inserito nella pagina di partenza dovrà essere così
HTML
<a href="link_alla_pagina_di_arrivo#nome_segnalibro">testo del link</a>
nel caso il link di partenza sia nella stessa pagina web del punto di arrivo ( e quindi abbia lo stesso indirizzo internet ) basterà inserire questo link
il testo scorrerà da destra verso sinistra, è anche possibile inserire immagini ( con gli appositi codici ) al posto del testo, per modificare la direzione di scorrimento occorre aggiungere l'attributo direction e specificare la direzione voluta
HTML
<marquee direction="left">Testo</marquee>
così per far scorrere il testo da destra verso sinistra ( come nell'impostazione base ) sostituire left con right per lo scorrimento da sinistra verso destra, sostituire con up per avere lo scorrimento dal basso verso l'alto e con down per averlo dall'alto verso il basso.
per modificare la velocità occorre invece aggiungere l'attributo scrollAmount
HTML
<marquee scrollAmount="1">Testo</marquee>
il valore di 1 equivale alla velocità più bassa, aumentando il valore di scrollAmount aumenterete la velocità di scorrimento
per dare un'altezza al campo di scorrimento ( utile soprattutto se lo scorrimento è in verticale ) si usa l'attributo height
HTML
<marquee height="50">Testo</marquee>
potete esprimere l'altezza in pixel ( come nell'esempio sopra ) oppure come una percentuale dell'altezza della pagina web (sconsigliato nei forum, le tabelle solitamente non hanno un valore di altezza predefinito, usate l'altezza in pixel)
per dare una larghezza al campo di scorrimento si usa l'attributo width
HTML
<marquee width="500">Testo</marquee>
potete esprimere la larghezza in pixel ( come nell'esempio sopra ) oppure, più comodamente, come una percentuale della larghezza della pagina ( oppure della colonna, se state usando la scritta scorrevole all'interno di una tabella )
(ATTENZIONE: è VIETATO inserire file coperti da copyright, come la maggior parte degli mp3 e dei wav)
Per file audio/video utilizzare il seguente codice:
HTML
<embed src="indirizzo internet del file" autostart="True" controls="True" loop="1"></embed>
L'attributo autostart="True" consente l'attivazione automatica dell'evento all'apertura della pagina, se si desidera che l'esecuzione del file parta a richiesta ( cliccando sull'apposito comando ) inserire invece l'attibuto autostart="False"
<embed src="indirizzo del file flash" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" width="larghezza in pixel" height="altezza in pixel" type="application/x-shockwave-flash"></embed> >
Per inserire un elenco all'interno di un altro elenco si deve inserire il codice dell'elenco secondario (o degli elenchi secondari) all'interno di un tag li
HTML
<li>elenco secondario</li>
dell'elenco principale, quì di seguito trovate alcuni esempi
Notate che, se l'attibuto type non è specificato, l'elenco principale è puntinato, quello secondario (o quelli secondari) è a cerchi e quello (o quelli) terziari è a quadrati ( anche gli elenchi successivi al terzo livello, se il type non è specificato, sono a quadrati )
Per inserire un elenco all'interno di un altro elenco si deve inserire il codice dell'elenco secondario (o degli elenchi secondari) all'interno di un tag li
notate come, se il tipo di elenco non è specificato, sia l'elenco primario che quelli inseriti siano sempre numerici, per i tipi possibili di elenco ordinato leggete questo paragrafo
Con un elenco di definizioni può essere realizzata una lista di termini a cui associare una frase che spiega il significato del termine stesso per realizzarlo occorre utilizzare il tag dl, e in un elenco del genere, al contrario degli altri tipi di elenchi, le voci sono costituite da due parti: : il termine da definire (definition term dt) e una frase che spiega il significato del termine stesso (definition description dd), questo è un esempio
HTML
<dl> <dt>Caffè</dt> <dd>Bevanda calda e nera</dd> <dt>Latte</dt> <dd>Bevanda fredda e bianca</dd> </dl>
ATTENZIONE: in questa sezione sono descritti gli elementi base delle tabelle HTML generiche, ciò che troverete quì si applica solo in parte alle tabelle con grafica uguale a quella del forum realizzate tramite il generatore
Una tabella HTML si può considerare come una griglia rigida di righe e colonne che vanno a formare delle celle dati in cui potete inserire il materiale che volete organizzare tramite la tabella, all'interno delle celle dati potete inserire testo, immagini, links, elenchi, altre tabelle eccetra, per prima cosa andiamo a considerare i tag base che formano una tabella, per prima cosa occorre definire la tabella tramite il tag table
HTML
<table> </table>
divideremo poi la nostra tabella in righe utilizzando il tag tr (table row)
HTML
<table> <tr> </tr> <tr> </tr> </table>
e divideremo ogni riga in celle dati usando il tag td (table data) all'interno di ogni tag td possiamo inserire il materiale che vogliamo organizzare tramite la tabella
notare che se, come in questo caso, non specifichiamo un attributo border della tabella sarà visualizzato solo il contenuto e non la struttura
riga1 cella1
riga1 cella2
riga2 cella1
riga2 cella2
cosa che può servire in alcuni utilizzi, se invece vogliamo che il bordo sia visualizzato aggiungiamo l'attributo border al tag table specificandone lo spessore in pixel, esempio:
Per aggiungere un'intestazione o titolo con commento esplicativo sopra la tabella si inserisce il tag caption fra il tag table di apertura e la prima riga della tabella, esempio:
si possono aggiungere titoli o intestazioni all'interno di una tabella utilizzando, al posto del tag td il tag th (table header), questo tipo di intestazioni può essere orrizzontale o verticale ( utilizzando il tag th il contenuto della cella di intestazione è automaticamente formattato in grassetto e centrato).
Se, in una tabella, lasciamo una cella dati vuota, senza inserirvi nulla, i bordi della cella saranno visualizzati correttamente solo da alcuni browsers mentre altri esempio potrebbero non visualizzare i bordi attorno alla cella vuota, per evitare questo problema si deve inserire all'interno della cella dati un non-breaking space
anche se le tabelle sono immaginabili come griglie rigide di righe e colonne è possibile fare in modo che una singola cella dati si estenda su più righe o più colonne, per far sì che si estenda su più righe di deve aggiungere l'attributo rowspan al tag td, dandogli come valore il numero di celle che devono essere occupate, vedete quì un esempio
per estendere invece una cella su più colonne si deve aggiungere al tag td l'attributo colspan, dandogli come valore il numero di celle che devono essere occupate, vedete quì un esempio
Le tabelle furono ideate come metodo per organizzare il contenuto di una pagina web, è quindi possibile inserire al loro interno quasiasi altro tag HTML (comprese altre tabelle) quello che vedete quì è solo un piccolo esempio
HTML
<table border="1"> <tr> <td> <p align="center">questo è un paragrafo di testo<br>allineato centralmente</p> </td> <td>in questa cella è contenuta<br>un'altra tabella: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>questa cella contiene<br>un elenco ordinato <ol type="I"> <li>numero 1</li> <li>numero 2</li> <li>numero 3</li> </ol> </td> <td> <marquee direction="up">questa cella contiene un testo<br> che scorre verso l'alto</marquee> </td> </tr> </table>
questo è un paragrafo di testo allineato centralmente
qundo si inserisce un contenuto quasiasi nelle celle di una tabella esso si visualizzerà a ridosso dei bordi, se invece vogliamo che rimanga dello spazio fra i bordi delle celle di una tabella e ciò che contengono dovremo utilizzare l'attibuto cellpadding attribuendogli un valore in pixel, questo è l'esempio di come si utilizza:
Per specificare la distanza che vogliamo mettere fra i bordi delle celle o fra le celle e il bordo esterno si utilizza l'attributo cellspacing dandogli un valore in pixel, se questo attributo non è specificato lo spazio fra le celle e fra le celle e il bordo sarà di un pixel ( quindi se non si desidera che questo spazio appaia dovremo specificare cellspacing="0" ). esempi:
tabella di default (senza un attributo cellpadding specificato)
Per aggiungere un colore di sfondo ad una tabella si usa l'attibuto bgcolor potete trovare i valori da attribuire (nomi di colore o codici colore) a questo attributo nella Guida ai colori nell'HTML , per gli esempi useremo il rosso
Per aggiungere un colore di sfondo ad una cella si usa l'attibuto bgcolor potete trovare i valori da attribuire (nomi di colore o codici colore) a questo attributo nella Guida ai colori nell'HTML , per gli esempi useremo il rosso, per inserirvi invece un'immagine di sfondo si usa l'attributo background (e il link dell'immagine), esempio:
Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width (Larghezza) e height (Altezza) che possono essere riferiti a tutti e tre i tag (table, tr, td). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo %): in questo caso la tabella si adatta secondo lo spazio a disposizione. Di solito la larghezza e l’altezza globali della tabella sono espresse nel tag table, mentre la larghezza delle varie celle viene espressa nei td della prima riga, l’eventuale larghezza specificata nelle celle della prima riga avrà effetto anche sulle celle delle righe sottostanti. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser. Esempio:
Per allineare orrizontalmente il contenuto di una cella è necessario aggiungere al tag td l'attibuto align, i valori che si possono dare ad align sono left (a sinistra, è l'allineamento che il contenuto delle celle ha di default, nel caso che align non sia specificato), center (al centro) right (a destra), esempio:
Per allineare verticalmente il contenuto di una cella è necessario aggiungere al tag td l'attibuto valign, i valori che si possono dare a valign sono top (alto), middle (in mezzo, è l'allineamento che il contenuto delle celle ha di default, nel caso che align non sia specificato), bottom (in basso), baseline (alla linea di base) esempio:
Per allineare una tabella all'interno di una pagina è necessario aggiungere al tag table l'attibuto align, i valori che si possono dare ad align sono left (sinistra, è l'allineamento che le tabelle hanno di default, nel caso che align non sia specificato), center (al centro), right (a destra), esempio:
<div style="width:100%; filter:glow(color=FF0000)">testo con l'alone</div>
Dovete sostituire ai numeri presenti in filter: glow(color=000000) il colore di cui volete che sia l'alone. Trovate le tabelle da dove potete ricavare i codici dei colori nella Guida ai colori nell'HTML
<div style="width:100%; filter:shadow(color=FF0000)">testo con ombra</div>
Modificate sempre il codice del colore, trovate le tabelle da dove potete ricavare i codici dei colori nella Guida ai colori nell'HTML. State attenti, l'ombra va un po' sotto il testo scritto.
<div style="width:100%; filter:dropshadow(color=FF0000)">testo con ombra</div>
Modificate sempre il codice del colore, trovate le tabelle da dove potete ricavare i codici dei colori nella Guida ai colori nell'HTML. State attenti, l'ombra delle lettere va sotto il testo che avete scritto.
I frames (chiamati anche cornici o riquadri) sono tag HTML che danno la possibilità di dividere la finestra del browser in vari riquadri indipendenti, ognuno contenente una diversa pagina web, molto utilizzati (sopratutto in passato, quando le connessioni disponibili erano più lente di quelle attuali e i monitor dei computer erano di minori dimensioni e avevano una definizione relativamente bassa) per la realizzazione di siti web, ideati in origine dalla netscape diventarono rapidamente parte degli standard dell'HTML, fino a diventarne una branca a se stante (l' HTML 4.01 Frameset), questi tag non sono, in realtà, utilizzabili sui forum di Forumfree / Forumcommunity, con l'esclusione di un tipo particolare di frame, l' Iframe o frame in linea (inline frame)
Gli iframe ci permettono di inserire, all'interno di una nostra pagina web (nel nostro caso, utilizzandolo in gestione codice html, all'interno del nostro forum, il tag non è utilizzabile, nei forum di Forumfree / Forumcommunity, nei messaggi o nelle firme) una vera e propria finestra in cui visualizzare un'altra pagina web (in caso di siti può essere anche un'altra pagina dello stesso sito, nel vostro forum non è possibile inserire iframe interni) il tag base è questo
HTML
<iframe></iframe>
il tag possiede diversi attributi, elencheremo di seguito i principali, quello fondamentale è src (source, sorgente) a cui va dato, come valore, l'indirizzo (link) della pagina web che vogliamo sia inserita nell'iframe
HTML
<iframe src="link_pagina"></iframe>
se all'inframe non vengono aggiunti altri attributi il risultato sarà una finestra di dimensioni standard (non molto grande) a cui verranno aggiunte, automaticamente, due scrollbar (verticale e orizzontale) nel caso la pagina da visualizzare sia di dimensioni superiori a quella della finestra creata dall'iframe, è però possibile specificare, per questa finestra, le dimensioni da noi volute, utilizzando gli attributi width (larghezza) e height (altezza), con valori che possono espressi con un valore numerico (che sarà in pixel, dando quindi una dimensione fissa alla finestra dell'iframe) sia con una percentuale (in questo caso le dimensioni dell'iframe varieranno a seconda delle dimensioni della pagina in cui è inserito), è anche possibile esprimere una delle dimensioni con un valore in pixel e l'altra con una percentuale, postiamo qui alcuni esempi
l'iframe occuperà il 40% dell'altezza e il 60% della larghezza della pagina (se inseriamo l'iframe all'interno di un altro tag html, ad esempio la cella dati di una tabella, occuperà una percentuale della larghezza e dell'altezza della cella dati e non dell'intera pagina) esprimendo invece le dimensioni in questo modo
la finestra dell'iframe risulterà alta 300 pixel e occuperà, in larghezza, l'80% dello spazio disponibile
l'attributo successivo che andremo ad esaminare è scrolling (scorrimento), questo attibuto ci permette di inserire, alla finestra dell'iframe, delle barre di scorrimento, verticali e orizzontali, in caso il contenuto dell'iframe abbia dimensioni superiori a quelle della finestra, può assumere tre valori, yes, no, oppure auto con scrolling="yes" l'iframe avrà le barre di scorrimento, con scrolling="no" non avrà le barre di scorrimento (e, nel caso il contenuto dell'iframe abbia dimensioni superiori a quelle dell'iframe stesso, nella finestra ne sarà visibile solo una parte), invece con scrolling="auto" le barre verranno visualizzate soltanto se il contenuto dell'iframe le rende necessarie (se l'attributo scrolling non viene specificato verrà considerato, di default, come se fosse auto)
utilizzando l'attributo frameborder possiamo scegliere se rendere visibile o meno il bordo dell'iframe, questo attributo può avere due valori numerici, 0 (bordo non visibile) oppure 1 (bordo visibile), se l'attributo frameborder non viene specificato verrà considerato, di default, come se fosse frameborder="1" (bordo visibile)
con gli attributi marginwidth (margine in larghezza) e marginheight (margine in altezza) si può prestabilire la distanza fra il bordo del frame e il suo contenuto (forzandone il rientro), con marginwidth si stabilirà lo spazio sui lati destro e sinistro, con marginheight in alto e in basso, entrambi gli attributi devono avere un valore numerico (che sarà lo spazio di margine, espresso in pixel), in questo codice di esempio
il margine sui lati destro e sinistro è stato impostato a 75 pixel, quello in alto e in basso a 100 pixel
utilizzando l'attributo align (allineamento) ci sarà possibile allineare la finestra dell'iframe rispetto agli altri elementi (testo o altro) della pagina web dove è inserita, l'attributo align può assumere questi valori: bottom (col bordo inferiore allineato alla riga di testo), left (a sinistra del testo), middle (allineato centralmente rispetto alla riga di testo), right (a destra del testo), top (col bordo superiore allineato alla riga di testo
l'ultimo attributo che descriveremo è il name (nome), il valore da dare a questo attributo è il nome che vogliamo assegnare all'iframe, name="nome_frame"serve ad attribuire all'iframe un nome specifico ed è necessario nel caso che si voglia far visualizzare, nello stesso iframe, diverse pagine web (saranno necessari i links a queste pagine, indirizzati all'iframe con l'attributo target="nome_frame")
<a href="link_pagina_1" target="nome_frame">Visualizza pagina 1</a>
<a href="link_pagina_2" target="nome_frame">Visualizza pagina 2</a>
<a href="link_pagina_3" target="nome_frame">Visualizza pagina 3</a>
di base, nella finestra dell'iframe, sarà visualizzata la pagina 1 (è quella inserita tramite l'attributo src), cliccando sul link della seconda pagina sarà quella ad essere visualizzata nella finestra, cliccando su quello della terza verrà visualizzata la terza pagina, per tornare alla prima basterà cliccare sul link corrispondente.
____________________
Terminato di descrivere gli attributi base di un iframe passeremo ad esaminare, per fare maggior chiarezza, alcuni iframe di comune utilizzo su Forumfree / Forumcommunity, iniziando da quello utilizzato per inserire, nei forum, il lettore di feed RSS provenienti da siti esterni (si esaminerà esclusivamente l'iframe, per quanto riguarda l'installazione, l'utilizzo e le possibili regolazioni del lettore siete invitati a consultare la guida ufficiale Lettore RSS ), come potete vedere esaminando il codice presente nella guida
il lettore ci viene fornito già inserito in una tabella con grafica uguale a quella del forum (ovviamente può essere adattato ad una tabella già esistente) ma ora passiamo alla parte che ci interessa, l'iframe
come potete vedere, sono presenti alcuni degli attributi già precedentemente descritti in questa guida, scrolling="auto", barre di scorrimento visualizzate soltanto se necessario, frameborder="0", finestra del frame senza bordo visibile, style="width:100%;height:120px", larghezza e altezza del frame, notate come questi due attributi siano stati inseriti come elementi di stile, usando uno stile in linea (il tag style), si otterrebbe l'identico (e da un certo punto di vista, più corretto, anche se di meno immediato utilizzo) risultato sostituendo lo stile in linea con un id (o una classe) da assegnare all'iframe (esempio class="lettorerss") e aggiungendo, in modifica colori e stili, l'apposito selettore con gli stessi attributi (esempio .lettorerss {width:100%;height:120px}), con questi valori assegnati ai due attributi (width:100%, larghezza:100%, height:120px, altezza:120px), la finestra dell'iframe occuperà, in larghezza, tutto lo spazio disponibile (100%) e sarà alta 120 pixel (120px, essendo l'altezza espressa come elemento di stile occorre specificare anche l'unità di misura, in questo caso i pixel, px), allowtransparency="true", questo attributo serve a rendere trasparente la finestra dell'iframe, in modo da rendere visibile, attraverso l'iframe, lo sfondo della pagina (in questo caso, della tabella) in cui è inserito (questo attributo, anche se supportato dai browsers più utilizzati, non fa parte degli standard dell'HTML), il secondo iframe che esamineremo serve anch'esso ad inserire un lettore di feed RSS, in questo caso si tratterà dei feed del nostro forum, da inserire in una pagina web esterna (un nostro sito) come potete vedere, il codice, dovendo esser inserito in una pagina web (nulla ci vieta di inserirlo anche nel forum, in homepage, per esempio, se vogliamo che i visitatori abbiano subito in evidenza le ultime discussioni attive), consiste unicamente nell'iframe (per quanto riguarda l'installazione, l'utilizzo e le possibili regolazioni del lettore siete invitati a consultare, anche in questo caso, la guida ufficiale Ultime discussioni sul proprio sito )
l'iframe è praticamente identico al precedente, l'unica differenza è nello stile in linea che ne stabilisce le dimensioni, la larghezza, invece di essere espressa come percentuale (width:100%) ci viene data con una misura fissa, espressa in pixel (width:400px), ovviamente, dato che inseriremo questo iframe in una nostra pagina web, possiamo modificare queste dimensioni in modo da adattarle alle nostre esigenze (possiamo anche eliminare lo stile in linea sostituendolo con un selettore di id o di classe e stabilire le dimensioni dell'iframe tramite il foglio di stile del nostro sito), il terzo esempio che andiamo ad esaminare è quello dell'iframe utilizzato per inserire, nei forum, la Gabbly Chat, per quanto riguarda l'installazione e il funzionamento della Gabbly Chat trovate qui la guida apposita Gabbly Chat , l'iframe che troviamo nella guida, già pronto per essere inserito nei nostri forum, in gestione codice html, è questo
presenti in fondo hanno la funzione (come nelle tabelle con grafica uguale a quella del forum) di distanziare la finestra della Gabbly Chat da ciò che vi si trova sotto (sia che si tratti di tabelle inserite nello stesso box di gestione codice html, delle sezioni del forum, se la chat è inserita in homepage, o dello spazio per l'inserimento delle discussioni, se la chat è inserita sopra una sezione), esaminandolo possiamo notare immediatamente due differenze, rispetto ai codici precedenti, l'attributo scrolling a cui è stato assegnato il valore no (la finestra dell'iframe non avrà mai le barre di scorrimento), e il fatto che, con lo stile in linea, si è determinata solo l'altezza della finestra (style="height:300px" ), la larghezza viene stabilita da un selettore di classe (class="skin_tbl") del foglio di stile della skin del forum, in questo modo la finestra della Gabbly Chat avrà la stessa larghezza delle tabelle con grafica uguale a quella del forum e delle sezioni del forum, e si adatterà automaticamente (senza modifiche al codice) ad eventuali cambi di skin
