Iscriviti
Login 
Messaggi senza risposta Argomenti attivi

Cancella cookie

Tutti gli orari sono UTC + 1 ora [ ora legale ]


Home Page Home Page  [ 7 messaggi ] 

 [GUIDA] Guida all’utilizzo del BBcode

  Stampa pagina
Precedente | Successivo 
Autore Messaggio
Non connesso 
 Oggetto del messaggio: [GUIDA] Guida all’utilizzo del BBcode
MessaggioInviato: 27/06/2009, 14:34 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
Guida all’utilizzo del BBcode


BBCode è una abbreviazione di Bulletin Board Code (codice per bacheche elettroniche). Una volta veniva utilizzato nelle BBS (Bulletin Board System) per scambiarsi messaggi grazie alla maggior semplicità d'interpretare il codice per la visualizzazione; oggi questo tipo di linguaggio è usato per formattare i messaggi in molti forum (ed il nostro non fa eccezione). I comandi disponibili (i cosiddetti TAG) sono di solito indicati racchiudendo tra parentesi quadre le parole chiave e sono interpretati dal sistema prima di essere tradotti in un linguaggio di markup comprensibile per il browser web, di solito HTML o XHTML. Tramite questi potrete così aggiungere formattazioni ai vostri messaggi creando effetti particolari senza per questo rovinare il layout della pagina che si sta visualizzando.

I TAG disponibili sul web sono molti, ma solo una parte di essi è attiva su questa board; l’uso in generale del BBCode e la scelta dei comandi disponibili, sono determinati dall'amministratore del forum.

E’ tuttavia possibile disabilitare i vari codici in ogni messaggio barrando la casella che reca la scritta “disabilita BBcode” che si trova sopra i tasti di invio:



Di seguito si riporta una lista dei vari TAG consentiti da questo forum con un esempio di quelli che sono i loro effetti.


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
I seguenti 7 membri Shinra ringraziano Sephiroth84 per il suo post:
Bacca89, CidHighwind, Lulu, neverulisse, SinSimo92, Squall, Zanarkander
Non connesso 
 Oggetto del messaggio: [GUIDA] Guida all’utilizzo del BBcode (prima parte)
MessaggioInviato: 27/06/2009, 14:35 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
TESTO IN GRASSETTO
Codice:
[b]Testo di prova[/b]

Effetto:
Testo di prova

Note: Si utilizza per applicare il grassetto ad un testo o a parte di esso.



TESTO IN CORSIVO
Codice:
[i]Testo di prova[/i]

Effetto:
Testo di prova

Note: Si utilizza per applicare il corsivo ad un testo o a parte di esso.



TESTO SOTTOLINEATO
Codice:
[u]Testo di prova[/u]

Effetto:
Testo di prova

Note: Si utilizza per sottolineare un testo o parte di esso.



TESTO SBARRATO
Codice:
[s]Testo di prova[/s]

Effetto:
Testo di prova

Note: Si utilizza per sbarrare un testo o parte di esso.



CAMBIARE IL FONT DI UN TESTO
Codice:
[font=Bodoni MT Black]Prova Bodoni MT Black[/font]
[font=Algerian]Prova Algerian[/font]
[font=Brush Script MT]Prova Brush Script MT[/font]
[font=Mistral]Mistral[/font]

Effetto:
Prova Bodoni MT Black
Prova Algerian
Prova Brush Script MT
Mistral

Note: Si utilizza per cambiare il font ad un testo o a parte di esso; è tuttavia necessario che anche sul PC dell'utente che sta visualizzando il messaggio così modificato, sia installato il font scelto dall'autore del post (in caso contrario questi visualizzerà, come carattere, il "Times New Roman").



RIDIMENSIONARE IL TESTO
Codice:
[size=200]Testo di prova[/size]

Effetto:
Testo di prova

Note: Si utilizza per cambiare le dimensioni ad un testo o a parte di esso. Le dimensioni, che vanno inserite dopo il simbolo =, possono arrivare fino ad un massimo di 200. In alternativa, per rendere la cosa più semplice, potete evidenziare il testo su cui volete operare e selezionare una delle opzioni disponibili nel menù a tendina in alto a destra:





TESTO COLORATO
Codice:
[color=green]Testo di prova[/color]

Effetto:
Testo di prova

Note: Si utilizza per cambiare il colore ad un testo o a parte di esso; basta copiare quest’ultimo all’interno del codice tag inserendo il colore scelto in inglese dopo il simbolo =. Più semplicemente però, potete anche evidenziare il testo su cui volete operare e selezionare una delle tonalità disponibili nella tavolozza a destra del riquadro del messaggio:





TESTO A SFONDO COLORATO
Codice:
[background=green]Testo di prova[/background]

Effetto:
Testo di prova

Note: Si utilizza per cambiare il colore dello sfondo ad un testo o a parte di esso; basta copiare quest’ultimo all’interno del codice tag inserendo il colore scelto in inglese dopo il simbolo = (per conoscere anche i codici delle altre tonalità disponibili, vi basta scorrere il cursore sulla tavolozza a destra del riquadro del messaggio senza cliccarci su (se no attivate il tag [color])).



TESTO COLORATO LAMPEGGIANTE
Codice:
[blink]Testo di prova[/blink]

Effetto:
Testo di prova

Note: Si utilizza per dare al testo l’effetto “lampeggiante” per mezzo dell’alternanza continua di colori che questo assume.



CITARE UN MESSAGGIO
Codice:
[quote]Testo di prova[/quote]

Effetto:
Cita:
Testo di prova

Note: Si utilizza per citare, nel proprio messaggio, quello di un altro utente (o parte di esso); volendo è possibile riportare anche il nome dell’autore della citazione (in luogo della scritta in rosso “Cita”) sostituendo la seguente simbologia al posto della scritta "quote" del tag che precede il testo: [quote=”Autore della citazione”]. Se ne riporta un esempio:

Codice:
[quote="Rufus Shinra"]Testo di prova[/quote]

Effetto:
Rufus Shinra ha scritto:
Testo di prova

E’ possibile ottenere in modo diretto questo effetto anche cliccando direttamente sul tasto Immagine che si trova in basso a destra del post che si vuole citare.



INSERIRE UNA LEGENDA
Codice:
[legend=Prova Legenda]Testo di prova[/legend]

Effetto:
Prova LegendaTesto di prova


Note: Si utilizza per inserire un riquadro con delle note all’interno; quest’ultime vanno trascritte all’interno del tag, mentre il titolo che si vuole dare va inserito dopo il simbolo =.



CODICE DI UN MESSAGGIO
Codice:
[code]Testo di prova[/code]

Effetto:
Codice:
Testo di prova


Note: Si utilizza per disattivare la formattazione dovuta ai tag presente all’interno del testo; di quest’ultimi verrà infatti mostrato solo il loro “codice” e non l’”effetto” all’interno di un riquadro bianco.



LISTA ORDINATA
Codice:
[list]
[*]Primo rigo testo di prova
[*]Secondo rigo testo di prova
[*]Terzo rigo testo di prova
[/list]

Effetto:
  • Primo rigo testo di prova
  • Secondo rigo testo di prova
  • Terzo rigo testo di prova

Note: Si utilizza quando si vuole creare una lista ordinata di nomi (compresi nel tag in questione) facendo precedere ognuno di questi dalla scrittura [*]. E‘ possibile inoltre ricorrere ad un codice di elencazione alfanumerico (piuttosto che ai cerchi sopra mostrati) sostituendo le seguenti simbologie alla scritta "list" del tag che precede il testo:
Codice:
[list=1]
(nel caso di un elenco numerato). Esempio:

  1. Primo rigo testo di prova
  2. Secondo rigo testo di prova
  3. Terzo rigo testo di prova

Codice:
[list=a]
(nel caso di un elenco basato sulle lettere dell’alfabeto). Esempio:

  1. Primo rigo testo di prova
  2. Secondo rigo testo di prova
  3. Terzo rigo testo di prova



VISUALIZZARE UN IMMAGINE
Codice:
[img]http://www.shinra-turks.net/images/guide_help/BBcode/immaginediprova.jpg[/img]

Effetto:


Note: Per permettere agli utenti di visualizzare una data immagine, basta semplicemente inserire l’indirizzo URL della stessa all’interno del codice del tag.
Cogliamo l’occasione per ricordare che le immagini a cui si fa riferimento, vanno caricate solo su siti di free hosting (si rimanda alla relativa guida per informazioni aggiuntive).



INSERIRE UN INDIRIZZO URL CLICCABILE
Codice:
[url]http://www.shinra-turks.net/[/url]

Effetto:
http://www.shinra-turks.net/

Note: Per utilizzare questo comando (il cui scopo è quello di rendere un indirizzo web cliccabile) basta semplicemente inserire l’indirizzo URL del sito cui volete far riferimento all’interno del codice del tag; è tuttavia possibile operare anche diversamente per mezzo del seguente codice ottenendo un risultato migliore:
Codice:
[url=http://www.shinra-turks.net/]Forum dei Turks[/url]

Effetto:
Forum dei Turks



INSERIRE UN INDIRIZZO URL CLICCABILE DI UN TOPIC INTERNO AL FORUM
Codice:
[topic=100]Turks.org - La guida strategica ufficiale[/topic]

Effetto:
Turks.org - La guida strategica ufficiale

Note: Lo scopo di questo comando è molto simile a quello del tag URL… anzi, è una semplificazione di quest’ultimo. Tuttavia, a differenza del primo, può essere utilizzato solo per creare link cliccabili di topic interni al forum. Per utilizzare questo comando, basta semplicemente inserire il numero del thread cui volete far riferimento dopo il simbolo = nel tag iniziale; all’interno dei due tag va poi messo il nome del topic (nell’esempio sopra riportato è stato preso in considerazione il thread con le regole generali del forum).
Per poter conoscere il numero a cui un topic è associato, basta cliccare sullo stesso, e copiare dalla barra degli indirizzi del vostro browser, la cifra che segue la scritta t= come mostra la figura sottostante:





INSERIRE UN INDIRIZZO URL CLICCABILE DI UN POST INTERNO AL FORUM
Codice:
[post=326]Handgun dei Turks[/post]

Effetto:
Handgun dei Turks

Note: Lo scopo di questo comando è molto simile a quello del tag URL… anzi, è una semplificazione di quest’ultimo. Tuttavia, a differenza del primo, può essere utilizzato solo per creare link cliccabili a post specifici interni al forum. Per utilizzare questo comando, basta semplicemente inserire il numero del post cui volete far riferimento dopo il simbolo = nel tag iniziale; all’interno dei due tag va poi messo il nome del post (nell’esempio sopra riportato è stato preso in considerazione quello relativo ad Handgun nel topic “I Turks di Before Crisis”).
Per poter conoscere il numero a cui un post è associato, basta cliccare sullo stesso sul simbolo che si trova in alto a destra dello stesso, alla sinistra della scritta “Inviato” (evidenziato nella figura sottostante).



Fatto ciò, la barra degli indirizzi del vostro browser vi mostrerà una stringa di caratteri di questo tipo:


Ebbene, la cifra che segue la scritta p= e precede il simbolo #, è il numero che cerchiamo (evidenziato sopra in grigio).


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
Non connesso 
 Oggetto del messaggio: [GUIDA] Guida all’utilizzo del BBcode (seconda parte)
MessaggioInviato: 27/06/2009, 14:39 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
VISUALIZZARE UN VIDEO SU YOUTUBE SUL FORUM
Codice:
[youtube]oIaV9xetQwM[/youtube]

Effetto:


Note: Permette di visualizzare un video caricato su YouTube all’interno di un post del forum. Si utilizza inserendo il codice del filmato all’interno dei tag; questo può essere ottenuto copiando la stringa di caratteri che compare nella barra degli indirizzi del browser dopo la scritta v= (evidenziato in grigio nella figura sottostante).



Per ulteriori informazioni e maggiori dettagli su questo punto, si rimanda alla guida “Come postare un filmato sul forum”.



TESTO E/O IMMAGINE CENTRATA
Codice:
[center]Testo di prova[/center]

Effetto:
Testo di prova

Note: Si utilizza per centrare un testo e/o un’immagine.



TESTO E/O IMMAGINE A SINISTRA
Codice:
[left]Testo di prova[/left]

Effetto:
Testo di prova

Note: Si utilizza per spostare a sinistra un testo e/o un’immagine.



TESTO E/O IMMAGINE CON ALLINEAMENTO GIUSTIFICATO
Codice:
[jusify]Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova[/jusify]

Effetto:
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova

Note: Si utilizza per spostare a destra un testo e/o un’immagine.



TESTO E/O IMMAGINE A DESTRA
Codice:
[right]Testo di prova[/right]

Effetto:
Testo di prova

Note: Si utilizza per ottenere che testo e/o immagini risultino allineate orizzontalmente su tutte le righe.



TESTO E/O IMMAGINE SCORREVOLE VERSO SINISTRA
Codice:
[marquee_left]Testo di prova[/marquee_left]

Effetto:
Testo di prova

Note: Si utilizza per rendere un testo e/o un’immagine scorrevoli verso sinistra.



TESTO E/O IMMAGINE SCORREVOLE VERSO DESTRA
Codice:
[marquee_right]Testo di prova[/marquee_right]

Effetto:
Testo di prova

Note: Si utilizza per rendere un testo e/o un’immagine scorrevoli verso destra.



TESTO E/O IMMAGINI IN COLONNA
Codice:
[col]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1| Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2| Testo di prova 3 Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3| Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4  Testo di prova 4[/col]

Effetto:
Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4 Testo di prova 4


Note: Si utilizza per mettere in colonna un testo o parte di esso. In particolare è possibile creare fino ad un massimo di 4 colonne (ciascuna separata dal simbolo | all’interno del tag). Qualora si decidesse di usarne di meno, occorre lasciare vuoto lo spaio tra i separatori | . Esempio a due colonne:

Codice:
[col]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1| Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2  Testo di prova 2||[/col]

Effetto:
Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2


Oltre a al testo, è possibile disporre su più colonne anche solo immagini (utilizzando il tag IMG di cui sopra), oppure testo e immagini insieme come nell’esempio successivo:

Codice:
[col]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1| [img]http://www.shinra-turks.net/images/guide_help/BBcode/immaginediprova.jpg[/img]||[/col]

Effetto:
Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2




TESTO E/O IMMAGINI IN TABELLA
Codice:
[table border=3 color=#00FF00][tr][td colspan=2]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1[/td] [td style=width:200px;height:100px;vertical-align:bottom]Testo di prova 2[/td][td style=width:100px;vertical-align:top;background-color:#40FF00]Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3[/td][/tr]
[tr][td ]Testo di prova 5[/td] [td style=height:100px;vertical-align:top;background-color:#0000FF]Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6[/td] [td colspan=2 style=width:30px;height:50px;vertical-align:top]Testo di prova 7[/td][/tr][/table]

Effetto:

Testo di prova 1 Testo di prova 1 Testo di prova 1 Testo di prova 1
Testo di prova 2
Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3 Testo di prova 3
Testo di prova 5
Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6 Testo di prova 6
Testo di prova 7


Note: Si utilizza per mettere in tabella un testo o parte di esso senza avere limiti ne in termini di colonne, ne in termini di righe. Tuttavia l’utilizzo di questo tag potrebbe rivelarsi più complesso del previsto e pertanto vi invitiamo a seguire i seguenti passi per la costruzione di una tabella.

  1. Una volta deciso il numero di colonne della tabella, andiamo ad inserire il testo di ciascuna casella appartenente alla prima riga all’interno del tag [ td ](fate attenzione allo spazio riportato dopo td... senza di esso, il tag non funzionerà). Quest’ultimo, scritto come appena riportato, tenderà a sistemare il testo (o l'immagine) in ogni casella, semplicemente centrandola verticalmente.
    Tuttavia, al fine di sfruttare a pieno le potenzialità di questo tag, si consiglia di ricorrere ad una stringa di testo di questo tipo:

    Codice:
    td colspan=2 style=width:50px;height:300px;vertical-align:top;background-color:#0000FF

    Spieghiamo ora ad uno ad uno, ciascuno degli elementi che compare in questa stringa:

    • colspan (o rowspan): si utilizza quando vogliamo ridurre il numero di caselle di una riga (colonna) facendo sì che un unico riquadro occupi la larghezza di 2 o più caselle. Il valore da inserire dopo il simbolo = è appunto quello delle caselle che si vuole "unire". Funzionamento analogo è quello di rowspan che però, al contrario del precedente, unisce tra loro 2 o più caselle appartenenti ad una stessa colonna.

      I seguenti codici, invece, dovranno essere preceduti dalla scritta "style=" e intervallati dal simbolo ; . Ricordiamo inoltre che non dovranno figurare necessariamente tutti nel tag, ma solo quelli di interesse:
    • width: si utilizza per fissare il valore di larghezza di una casella espresso in termini di pixel (px). Qualora vi sia un'immagine all'interno della casella, la cui larghezza è superiore a quella del numero da noi fissato, quest'ultimo non verrà preso in considerazione.
    • height: si utilizza per fissare il valore dell'altezza di una casella espresso in termini di pixel (px). Qualora vi sia un'immagine all'interno della casella, la cui altezza risulti superiore a quella del numero da noi fissato, quest'ultimo non verrà preso in considerazione.
    • vertical-align: si ricorre a questo codice per assegnare un allineamento verticale al contenuto della casella che non sia centrato. Si utilizzano le scritte top e bottom dopo il simbolo : se si vuole rispettivamente il contenuto in alto o in basso.
      Ricordiamo invece che, per quanto riguarda l’allineamento orizzontale, basta invece ricorrere ai tag già visti in precedenza ([ left ], [ right ], [ center ] e [ justify ]) inseriti all’interno di [ td ]; in caso contrario verrà automaticamente usato l’allineamento a sinistra.
    • background-color: può essere utilizzato per cambiare il colore allo sfondo di una casella; basta scrivere dopo il simbolo : il colore scelto in inglese o in alternativa i codici delle altre tonalità (vi basta scorrere il cursore sulla tavolozza a destra del riquadro del messaggio senza cliccarci su (se no attivate il tag [color])).

      Esempio:
      Codice:
      [td colspan=2]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1[/td][td style=width:200px;height:100px;vertical-align:bottom]Testo di prova 2[/td][td style=width:100px;vertical-align:top;background-color:#40FF00]Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3[/td]

  2. Una volta terminata la scrittura di ciascuna casella della prima riga, si racchiude il tutto all’interno del tag [ tr ] che viene utilizzato appunto per raccogliere gli elementi in una riga:

    Esempio:
    Codice:
    [tr][td colspan=2]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1[/td][td style=width:200px;height:100px;vertical-align:bottom]Testo di prova 2[/td][td style=width:100px;vertical-align:top;background-color:#40FF00]Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3[/td][tr]

  3. Ora, se si vuole aggiungere una seconda riga, basta tornare al punto 1, inserire quindi il contenuto delle altre caselle della seconda riga tra i tag [ td ] e racchiudere quest’ultimo tra il tag [ tr ].

    Esempio (2 righe solo):
    Codice:
    [tr][td colspan=2]Testo di prova 1  Testo di prova 1  Testo di prova 1  Testo di prova 1[/td] [td style=width:200px;height:100px;vertical-align:bottom]Testo di prova 2[/td][td style=width:100px;vertical-align:top;background-color:#40FF00]Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3  Testo di prova 3[/td][/tr]
    [tr][td ]Testo di prova 5[/td] [td style=height:100px;vertical-align:top;background-color:#0000FF]Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6  Testo di prova 6[/td] [td colspan=2 style=width:30px;height:50px;vertical-align:top]Testo di prova 7[/td][/tr]

  4. A questo punto non rimane altro da fare che mettere tutto sotto il tag [ table ]; da solo questo tag non funziona e bisogna aggiungere dei codici manualmente:

    Codice:
    [table border=3 color=#00FF00 cellspacing=10px]

    Il numero che segue la scritta “border=” sta ad indicare lo spessore, in termini di pixel, della cornice della tabella; il codice invece dopo “color=” sta ad indicare il colore (in inglese) della stessa (per conoscere anche i codici delle altre tonalità disponibili, come sempre vi basterà scorrere il cursore sulla tavolozza a destra del riquadro del messaggio); “cellspacing=” indica invece la spaziatura tra una casella e l’altra in termini di pixel (quest’ultimo è un codice facoltativo che può anche essere omesso).

  5. Il risultato finale è quello esposto all’inizio della spiegazione di questo tag.


Come suggerito dal titolo, è chiaro che oltre a al testo, è possibile disporre in tabella anche solo immagini (utilizzando il tag [ img ] di cui sopra), oppure testo e immagini insieme come nell’esempio successivo.

Esempio:
Codice:
[table border=3 color=#00FF00][tr][td ][imgs]guide_help/BBcode/immaginediprova.jpg[/imgs][/td] [td style= vertical-align:top;background-color:red]Testo di prova 1[/td] [td colspan=2 style=vertical-align:bottom][center]Testo di prova 2[/center][/td][/tr]
[tr][td ]Testo di prova 3[/td] [td ][imgs]guide_help/BBcode/immaginediprova.jpg[/imgs][/td] [td ]Testo di prova 4[/td][td style=vertical-align:bottom]Testo di prova 5[/td][/tr][/table]

Effetto:

Testo di prova 1
Testo di prova 2
Testo di prova 3
Testo di prova 4
Testo di prova 5

Chiaramente le caselle di una riga in cui è presente un’immagine tenderanno ad avere l’altezza minima della stessa, così come le colonne avranno la larghezza minima dell’immagine se non si interviene tramite i codici width e height.
E' possibile anche sfruttare il sistema tabelle per organizzare informazioni (come testo e immagini affiancate, didascalie delle stesse, ecc). Nello specifico è consigliabile eliminare i bordi mettendo "0" come spessore degli stessi nel tag [ table ].

Esempio:
Codice:
[table border=0 color=#00FF00 cellspacing=10px][tr][td ][imgs]guide_help/BBcode/immaginediprova.jpg[/imgs][/td] [td style=vertical-align:top][justify]Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2[/justify][/td][/tr][/table]

Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2 Testo di prova 2

Ricordiamo ancora una volta che i tag [ table ], [ td ] e [ tr ], usati impropriamente, non daranno effetti (anzi, in alcuni casi tenderanno a deformare il layout della pagina che state visualizzando).




CELARE UN MESSAGGIO
Codice:
[spoiler]Testo di prova[/spoiler]

Effetto:
Spoiler:
Testo di prova


Note: Si utilizza per nascondere un testo e/o un’immagine qualora si decida di rivolgere il messaggio solo ad un certo gruppo di utenti al fine di non rivelare informazioni importanti anzitempo (come la trama o il finale di un’opera) a coloro che ne sono ancora all’oscuro. Per visualizzare il messaggio, basta cliccare sul tasto “Show” che si trova sulla parte superiore della casella dello spoiler.



IMMAGINE PER DOWNLOAD
Codice:
[downlink]http://www.shinra-turks.net/images/Guide%20area%20help/BBcode/Download%20di%20prova.rar[/downlink]

Effetto:
 Download Here...


Note: Si utilizza per rendere sostituire al semplice link URL di un download, l’immagine di un dischetto. Se all’interno del codice si inserisce un indirizzo URL invece di quello di un link, l’effetto è lo stesso dell’omonimo tag (ricordatevi di sostituire la scrittura %20 in luogo degli spazi separatori qualora ce ne sia bisogno).



INSERIRE UNA STRISCIA COLORATA
Codice:
[hrc=green]10[/hrc]

Effetto:



Note: Si utilizza per inserire una striscia colorata nel post. Il numero all’interno del tag rappresenta l’altezza in pixel della riga mentre dopo il segno = va messo il colore (in inglese) della stessa (per conoscere anche i codici delle altre tonalità disponibili, vi basta scorrere il cursore sulla tavolozza a destra del riquadro del messaggio senza cliccarci su (se no attivate il tag [color])).



BARRA DI PROGRESSO
Codice:
[prog]68[/prog]

Effetto:
68%


Note: Si utilizza per creare una barra di progresso la cui lunghezza è funzione del numero inserito all’interno del tag (che, volendo, può anche essere superiore a 100).



CREARE UNO SMILE PERSONALIZZATO
Codice:
[smile=4,1,000000,FF0000]Testo di prova[/smile]

Effetto:
Immagine

Note: Permette di creare uno smile personalizzato con un cartello sul quale è possibile scrivere un qualsiasi messaggio di testo; quest’ultimo andrà inserito all’interno dei due tag. Dopo il simbolo = nel tag iniziale, sono presenti 4 cifre separate da una virgole. Il loro significato è il seguente:
  • Prima cifra (numero intero variabile tra 1 e 30): indica il tipo di smile che regge il cartello;
  • Seconda cifra (0 o 1): indica la presenza (1 ) o meno (0) di un effetto sfumato sul cartello;
  • Terza cifra (colore in inglese o stringa alfanumerica che individua un colore): indica il colore del testo sul cartello;
  • Quarta cifra (colore in inglese o stringa alfanumerica che individua un colore): indica il colore dell’ombra del testo sul cartello.

Tutto questo procedimento può però essere semplificato notevolmente cliccando, invece che sul tasto SMILE, sulla scritta “Smilie Creator” che si trova sotto il pannello di scelta delle emoticon:



Così facendo, comparirà una nuova finestra:



Basta a questo punto riempire i campi vuoti e cliccare su “Create” per avere il codice dello smile personalizzato direttamente all’interno del messaggio. Ecco il significato delle varie diciture:

  • Sign text: va inserito il testo del messaggio che poi comparirà nel cartello.
  • Text colour: si sceglie, tramite il menù a tendina, il colore del testo.
  • Shadow colour: si sceglie, tramite il menù a tendina, il colore dell’ombra del testo
  • Sign shadow: con “enabled” si ottiene un effetto sfumato sul cartello; con “disabiled” questo viene rimosso.
  • Smilie selection: si sceglie direttamente l’aspetto dello smile visualizzato in seguito col cartello.


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
Non connesso 
 Oggetto del messaggio: Re: [GUIDA] Guida all’utilizzo del BBcode
MessaggioInviato: 27/06/2009, 14:46 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
TAG a solo appannaggio dello staff


INSERIRE UN INDIRIZZO URL CLICCABILE INTERNO AL FORUM
Codice:
[site=viewforum.php?f=90]Area Help[/site]

Effetto:
Area Help

Note: Questo tag è l'equivalente del code URL; l'unica differenza che passa tra i due è che, utilizzando SITE, può essere omessa la stringa di caratteri "http://www.shinra-turks.net/forum/" che precede qualsiasi indirizzo facente riferimento alle pagine della board (o, come accade più spesso, ai contenuti del server).
Pertanto scrivendo
Codice:
[URL=http://www.shinra-turks.net/forum/viewtopic.php?f=90&t=526]Guida all’utilizzo del BBcode[/url]

o
Codice:
[site=viewtopic.php?f=90&t=526]Guida all’utilizzo del BBcode[/site]

si ottiene lo stesso identico risultato: Guida all’utilizzo del BBcode

Potendo scegliere tra i due, si consiglia sempre di utilizzare questo tag poichè, qualora sorgessero problemi o altro e il sito si trovasse costretto cambiare dominio, i link rimarrebbero inalterati: più precisamente è auspicabile l'utilizzo dei tag TOPIC e POST visti in precedenza quando occorre far riferimento a thread o messaggi specifici (in modo da alleggerire anche la scrittura); SITE conviene utilizzarlo quando si fa riferimento ad un contenuto interno al forum (come avviene ad esempio per la sezione [site=viewforum.php?f=36]Wallpapers[/url])



POSTARE UN IMMAGINE INTERNA AL FORUM
Codice:
[imgs]guide_help/BBcode/immaginediprova.jpg[/imgs]

Effetto:


Note: Trattasi del duale del tag IMG; utilizzando IMGS è possibile richiamare (e quindi postare) un'immagine hostata sul server del forum evitando di scrivere la stringa di testo iniziale "http://www.shinra-turks.net/images/".
Pertanto scrivendo
Codice:
[img]http://www.shinra-turks.net/images/guide_help/BBcode/immaginediprova.jpg[/img]

o
Codice:
[imgs]guide_help/BBcode/immaginediprova.jpg[/imgs]

si ottiene lo stesso identico risultato:



Si consiglia l'utilizzo di questo tag per le stesse motivazioni riportate al paragrafo precedente; inoltre, caricando immagini sul server del sito, si ha la certezza che queste non vengano cancellate come accade spesso per quelle uppate sui siti di free-hosting. E' pertanto fortemente auspicabile che, per thread importanti che rimarranno nel tempo, caricare le immagini sul sito e ricorrere a IMGS.


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
Non connesso 
 Oggetto del messaggio: Re: [GUIDA] Guida all’utilizzo del BBcode
MessaggioInviato: 25/07/2009, 2:02 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
Si informa l'utenza che sono stati inseriti sulla board dei nuovi TAG:

- [font] per cambiare il carattere di un testo
- [justifiy] per avere l'allineamento giustificato
- [table] che ha sostituito il precedente tag [col] che a giorni verrà eliminato.

Per ulteriori chiarimenti sul loro utilizzo, vi invitiamo a consultare la guida soprastante.

PS - A giorni sarà aggiunta anche la guida ai tag ad uso esclusivo dei membri dello staff.

Grazie dell'attenzione e buon proseguimento.


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
Non connesso 
 Oggetto del messaggio: Re: [GUIDA] Guida all’utilizzo del BBcode
MessaggioInviato: 01/08/2009, 17:26 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
Aggiunte nuove funzioni al tag [table] che permetteranno un ulteriore personalizzazione delle tabelle ;)


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
Non connesso 
 Oggetto del messaggio: Re: [GUIDA] Guida all’utilizzo del BBcode
MessaggioInviato: 11/10/2009, 13:00 
Avatar utente
Turks

Rod


Iscritto il: 30/08/2008, 2:24
Messaggi: 2312
Titolo: Pantheon di Ambrosia
Aggiornata la guida principale con ulteriori dettagli e funzioni dei tag già presenti sulla board e aggiunti i tag utilizzabili ad appannaggio dello staff.

Buon proseguimento :ciao:


"I'm what's left... or, maybe, I'm all there ever was..."
Immagine


Back to Top
 Profilo  
 
Cerca per:
Visualizza ultimi messaggi:  Ordina per  
Home Page Home Page  [ 7 messaggi ] 

Tutti gli orari sono UTC + 1 ora [ ora legale ]


Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite


Non puoi aprire nuovi argomenti
Non puoi rispondere negli argomenti
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Vai a:  
cron


Final Fantasy ® e KINGDOM HEARTS ® sono marchi registrati Squaresoft e Square-Enix™