Suggerimenti per la composizione

Elementi HTML permessi: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <th> <td> <del>

Questo sito consente l'uso di contenuto HTML. Se imparare tutto l'HTML può spaventare, imparare a usare un piccolo numero di elementi HTML di base è molto semplice. Questa tabella fornisce un esempio per ogni elemento attivo su questo sito.

Per maggiori informazioni, vedi le Specifiche HTML del W3C o utilizza il tuo motore di ricerca preferito per trovare un altro sito che spieghi l'HTML.

Descrizione elemento Cosa scrivi Cosa vedi

Le ancore servono a creare collegamenti ad altre pagine. <a href="https://www.csshl.net">CSSHL</a> CSSHL

Enfatizzato <em>Enfatizzato</em> Enfatizzato

Evidenziato <strong>Evidenziato</strong> Evidenziato

Citazione <cite>Citazione</cite> Citazione

Testo codice utilizzato per mostrare il codice sorgente dei programmi <code>Codice</code> Codice

Elenco non ordinato - utilizza <li> all'inizio di ogni voce dell'elenco

<ul> <li>Prima voce</li> <li>Seconda voce</li> </ul>

Prima voce
Seconda voce

Elenco ordinato - utilizza <li> all'inizio di ogni voce dell'elenco

<ol> <li>Prima voce</li> <li>Seconda voce</li> </ol>

Prima voce
Seconda voce

Gli elenchi definizione sono simili agli altri elenchi HTML. <dl> inizia l'elenco definizione, <dt> inizia il termine da definire e <dd> inizia la descrizione della definizione.

<dl> <dt>Primo termine</dt> <dd>Prima definizione</dd> <dt>Secondo termine</dt> <dd>Seconda definizione</dd> </dl>

Primo termine: Prima definizione
Secondo termine: Seconda definizione

Tabella

<table> <tr><th>Intestazione tabella</th></tr> <tr><td>Cella tabella</td></tr> </table>

Intestazione tabella
Cella tabella

Cancellato <del>Cancellato</del> ~~Cancellato~~

La maggior parte dei caratteri inusuali può essere inserita direttamente senza problemi.

Se incontri problemi, prova a utilizzare le entità carattere HTML. Un esempio comune può essere & per il carattere e commerciale &. Per un elenco completo delle entità vedi la pagina entità dell'HTML. I caratteri disponibili includono:

Descrizione carattere	Cosa scrivi	Cosa vedi
E commerciale	`&`	&
Maggiore di	`>`	>
Minore di	`<`	<
Virgolette	`"`	"

BBCode Guide

BBCode allows you to specify formatting rules for your text, even if you are not allowed to use HTML in your posts. BBCode originated from the forum software named PHPBB, and this site has a special implementation of it.

In BBCode terms, you use "tags" to add formatting to your text. Every tag is enclosed in [ and ] brackets. If you want to mark some region in your text, you need to use an opening tag and a closing tag. Closing tags start with [/, as you will see in the examples below. If you mistype a tag or forget to close it, you will not get the desired formatting.

Simple text formatting

BBCode allows you to make some parts of your texts stand out from the context by adding [b]old, [i]talic, [u]nderlined and [s]trikeout formatting to them. The [color], [size] and [font] tags allow you to change the color, size and font of portions of the text you enclose with these tags. Both require a parameter (which colour, how big, what font) that is suffixed to the name of the tag by an equals sign (example below). You should not repeat the parameter in the closing tag!

You can specify any recognized color name (red, blue, green, white, etc.) or a hexadecimal color value (#CDCDCD, #FFFFFF, etc.) as the parameter of a [color] tag. The [size] tag allows you to set the font size between 6 and 48, 6 being the smallest size. Note that using very large text is considered by many to be annoying, and it is seldom a good idea to try to attract more attention to your post in this way. The [font] tag can be set to any valid font face, such as Arial, Arial Black, Courier, Courier New, Helvetica, Impact, Times New Roman, Verdana, etc.

usage	display
I [b]need to do[/b] this by the weekend	I need to do this by the weekend
John said that [i]we should[/i] ask her	John said that we should ask her
I [u]would not like to[/u] offend you	I would not like to offend you
Let's correct this [s]mispelled[/s] misspelled word	Let's correct this ~~mispelled~~ misspelled word
Jane was at [color=blue]the coast[/color]	Jane was at the coast
Joe was in [color=#FF0000]the forest[/color]	Joe was in the forest
You said: [size=30]HEY![/size]	You said: HEY!
She said: [font=Courier]What?[/font]	She said: What?

Creating links

You have multiple options to specify links to other destinations in your posts.

URLs (Uniform Resource Locators) starting with "www" or "ftp" (eg. www.example.com) are automatically recognized and replaced with links. You can also use the [url] tag with a parameter to specify a link with meaningful text to click on. If you use the url tag without the parameter, the enclosed text is assumed to be a URL, and a link is created to that destination.

Email addresses in posts are also automatically converted to email links. For compatibility with common BBCode implementations, an [email] tag is provided.

usage	display
For more examples, visit www.example.com	For more examples, visit www.example.com
For more examples, visit http://example.com	For more examples, visit http://example.com
If you have questions ask me at joe@example.com	If you have questions ask me at joe@example.com
If you have questions ask me at [email]joe@example.com[/email]	If you have questions ask me at joe@example.com
We use [url=http://example.com/]the example site[/url] in these examples	We use the example site in these examples
We use [url]http://example.com/[/url] in these examples	We use http://example.com/ in these examples

Displaying images

The [img] tag allows you to display an image in your post. You need to specify a URL to the image, so it needs to be accessible somewhere on the internet. Beware of adding very large images to your text, or the page will load very slowly!

If you enclose a URL in an [img] tag, then it will be replaced with code to display the image. For example A good screenshot: [img]http://example.com/screenshot.png[/img] will show you the screenshot (if it exists).

You can also specify the desired display dimensions of the image by adding a dimension parameter to the [img] tag. A good screenshot: [img=640x480]http://example.com/screenshot.png[/img] will display the image in 640x480 (though the full image will be downloaded). Do not use this to show a thumbnail of an image!

You are free to link an image to an external destination by enclosing the [img] tag with a [url] tag: See [url=http://example.com][img]http://example.com/screenshot.png[/img][/url].

Ordered and unordered lists

The simplest list type is the unordered list, which means that there is no numbering applied to the elements. You can make such a list by enclosing the list elements in [list] opening and closing tags. Specify the start of one element with the [*] list element marker, which has no closing tag pair.

To create an ordered list, you should add a parameter to the [list] list tag specifying what type of ordered list you would like to see. The possible parameters are "i", "I", "1", "a", "A", "c", "d" and "s" which all correspond to the display of the first list element.

usage	display
I love [list] []Oranges []Apples [*]Bananas [/list]	I love Oranges Apples Bananas
I love [list=I] []Oranges []Apples [*]Bananas [/list]	I love Oranges Apples Bananas
I love [list=1] []Oranges []Apples [*]Bananas [/list]	I love Oranges Apples Bananas

Fixed-width text and block formatting

You can use the [code] tag to add an inline fixed-width formatted part or to add a block of (usually program) code. If there is any newline present between the opening and closing tags, then a block will be displayed.

Similarly, the [php] tag can be used to post PHP code. PHP code will automatically be syntax highlighted for easier readability.

usage	display
Edit your [code]robots.txt[/code] file	Edit your `robots.txt` file
An HTML title example: [code] <head> <title>Page Title</title> </head> [/code]	An HTML title example: `<head> <title>Page Title</title> </head>`
Some PHP code: [php] <?php function hello() { echo "Hello World!"; } ?> [/php]	Some PHP code: `<?php function hello() { echo "Hello World!"; } ?>`

Text and block alignment

You can also set the alignment of the text by using [left], [right] and [center] tags. The [float] tag can be used to place floating boxes in the text (especially handy for images). You can specify the direction of the floating with [float=left] and [float=right]. The [justify] tag can be used justify text on both sides of the page.

Other supported tags

It is possible to quote something that has already been posted, by just putting [quote][/quote] tags around it. To quote a specific person, use something like [quote=John]. Quote tags can be nested.

The [sub] and [sup] tags can be used to add subscript and superscript text. For example, H[sub]2[/sub]O gives H₂O, while X[sup]3[/sup] gives X³.

The [acronym] tag allow you to identify text as an acronym and provide a description when users move their mouse over the tag. For example, [acronym=Structured Query Language]SQL[/acronym] produces SQL.

The [abbr] tag allow you to identify text as an abbreviation and provide a description when users move their mouse over the tag. For example, [abbr=World Wide Web]WWW[/abbr] produces WWW.

The [notag] tags prevent text inside the tags from being parsed. This allows you to give examples of BBcode and not have it converted to HTML. For example: [notag]These [b]tags[/b] are not rendered[/notag] will produce "These [b]tags[/b] are not rendered".

The [hr] tag draws a horizontal line across the page. Handy for separating chunks of text.

Using multiple formatting tags

You can apply more than one formatting specification to a portion of some text. I was at [b][i]the coast[/i][/b] will be rendered as I was at the coast.

Make sure that you take care of the proper order of the opening and closing tags. You should close the tags in the opposite order in which you opened them. Otherwise you might get very strange rendering results. Also check your post with the preview function before submitting it, in case there are formatting errors due to improper BBCode usage.

If you include a textual smiley in your post (see chart below), it will be replaced by a graphical smiley.

Smileys

Smiley	Acronyms
	:) :-) :smile:
	:D :-D :lol:
	:bigsmile:
	;) ;-) :wink:
	:p :-p :tongue:
	:O :-O :shock:
	:\| :-\| :stare:
	:( :-( :sad:
	:~ :-~ :puzzled:
	:(( :-(( :cry:
	8) 8-) :cool:
	:steve:
	J) J-) :crazy:
	:glasses:
	:party:
	:love:
	:X :-X :oups:
	:8) :8-) :shy:
	0:) 0) 0:-) :innocent:
	:* :-* :sexy:
	\|( \( :angry:
	:Sp :-S) :sick:
	:tired:
	:santa:
	:mail:
	:sushi:
	:hat:
	H) H:) H:-) :grade:
	:ghost:
	$) $-) :cash:
	:crown:
	:davie:
	S) S) :drunk:
	>) >-) :evil:
	:beer:
	:star:
	:arrow:
	:quest:
	:exmark:

To add pop-up tool tips to your content's text, enable Tool Tips in the Input Filter configure section of your default filter. To use add [tip:Text to highlight=The tooltip's content] to your node body as many times as you like!
You may surround a section of text with "[collapse]" and "[/collapse]" to it into a collapsible section.
You may use "[collapse]" tags within other "[collapse]" tags for nested collapsing sections.
If you start with "[collapsed]" or "[collapse collapsed]", the section will default to a collapsed state.
You may specify a title for the section in two ways. You may add a "title=" parameter to the opening tag, such as "[collapse title=<your title here>]". In this case, you should surround the title with double-quotes. If you need to include double-quotes in the title, use the html entity """. For example: '[collapse title=""Once upon a time""]'. If a title is not specified in the "[collapse]" tag, the title will be taken from the first heading found inside the section. A heading is specified using the "<hX>" html tag, where X is a number from 1-6. The heading will be removed from the section in order to prevent duplication. If a title is not found using these two methods, a default title will be supplied.
For advanced uses, you may also add a "class=" option to specify CSS classes to be added to the section. The CSS classes should be surrounded by double-quotes, and separated by spaces; e.g. '[collapse class="class1 class2"]'.
You may combine these options in (almost) any order. The "collapsed" option should always come first; things will break if it comes after "title=" or "class=". If you need to have it come after the other options, you must specify it as 'collapsed="collapsed"'; e.g. '[collapse title="foo" collapsed="collapsed"]'.
If you wish to put the string "[collapse" into the document, you will need to prefix it with a backslash ("\"). The first backslash before any instance of "[collapse" or "[/collapse" will be removed, all others will remain. Thus, if you want to display "[collapse stuff here", you should enter "\[collapse stuff here". If you wish to display "\[collapse other stuff", you will need to put in "\\[collapse other stuff". If you prefix three backslashes, two will be displayed, etc.
If you prefer, you can use angle brackets ("<>") instead of straight brackets ("[]"). This module will find any instance of "<collapse" and change it to "[collapse" (also fixing the end of the tags and the closing tags).
You may override the settings of the filter on an individual basis using a "[collapse options ...]" tag. The possible options now are 'form="form"' or 'form="noform"', and 'default_title="..."'. For example, '[collapse options form="noform" default_title="Click me!"]'. Only the first options tag will be looked at, and the settings apply for the entire text area, not just the "[collapse]" tags following the options tag. Note that surrounding <p> and <br> tags will be removed.
This module supports some historical variants of the tag as well. The following are not recommended for any new text, but are left in place so that old uses still work. The "class=" option used to called "style=", and "style=" will be changed into "class=". If you don't put a double-quote immediately after "class=", everything up to the end of the tag or the string "title=" will be interpreted as the class string. Similarly, if you don't have a double-quote immediately following "title=", everything up to the end of the tag will be used as the title. Note that in this format, "style=" must precede "title=".
Le linee e i paragrafi vengono riconosciuti automaticamente. Gli elementi <br /> a capo, <p> paragrafo e </p> chiuso paragrafo vengono inseriti automaticamente. Se i paragrafi non vengono riconosciuti è sufficiente aggiungere un paio di linee vuote.
The Glossary module will automatically mark terms that have been defined in the glossary vocabulary with links to their descriptions. These marks depend on the settings and may be a superscript character or an icon, or the term may be turned into an acronym, cite, or abbreviation. If there are certain phrases or sections of text that should be excluded from glossary marking and linking, use the special markup, [no-glossary] ... [/no-glossary]. Additionally, these HTML elements will not be scanned: a, abbr, acronym.
You may quickly link to image nodes using a special syntax. Each image code will be replaced by thumbnail linked to full size image node. Syntax:

[image:node_id align=alignment hspace=n vspace=n border=n size=label width=n height=n nolink=(0|1) class=name style=style-data node=id]

Every parameter except node_id is optional.

Typically, you will specify one of size, width, or height, or none of them. If you use size=label, where label is one of the image size labels specified on the image settings page, the size associated with that label will be used. The sizes "thumbnail", "preview", and "original" are always available. If you use width=n or height=n, the image will be scaled to fit the specified width or height. If you use none of them, the thumbnail image size will be used.

If you specify nolink=1, no link will be created to the image node. The default is to create a link to the image.

Alternatively, if you specify node=id, a link will be created to the node with the given id.

The align, hspace, vspace, border, class, and style parameters set the corresponding attributes in the generated img tag.
To add a lightbox to your images, add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="image-1.jpg" rel="lightbox">image #1</a>
<a href="image-1.jpg" rel="lightbox[][my caption]">image #1</a>
To show a caption either use the title attribute or put in the second set of square brackets of the rel attribute.
If you have a set of related images that you would like to group, then you will need to include a group name between square brackets in the rel attribute. For example:
<a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a> <a href="image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>
There are no limits to the number of image sets per page or how many images are allowed in each set.
If you wish to turn the caption into a link, format your caption in the following way:
<a href="image-1.jpg" rel='lightbox[][<a href="http://www.yourlink.com">View Image Details</a>]' >image #1</a>