h1. Tutorial de Textile

h1.

== include(page="documentatie/sidebar")==
h2. Introducere
_Textile_ este un limbaj de markup ce va ajuta sa editati paginile web. Ce inseamna aceasta? In loc sa scrieti tag-urile specifice de html pentru a edita o astfel de pagina, _Textile_ va pune la dispozitie o serie de elemente de sintaxa prin care puteti edita mai simplu si mult mai rapid aceste pagini. In continuare sunt prezentate notiunile care trebuiesc cunoscute inainte de a incepe scrierea unei pagini html folosind _Textile_.

Un text este structurat pe mai multe paragrafe. Atunci când folositi Textile, paragrafele trebuie separate de o linie alba ( goală ).

h2. Paragrafe
Un text este structurat pe mai multe paragrafe. Atunci cand folositi Textile, paragrafele trebuiesc separate de o linie alba ( goala ).
 
table(example). |_. Cod _Textile_|_. Cod HTML asociat|
|Un paragraf      
   
Al doilea paragraf
|@<p>Un paragraf</p>@&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
@<p>Al doilea paragraf</p>@|
 
 
Un intreg paragraf se poate transforma cu usurinta intr-un header, folosind sintaxa {$hn$} la inceputul paragrafului, unde {$n$} este un numar de la $1$ la $6$. De exemplu, Textile va interpreta linia @h1. Primul header@ ca @<h1>Primul header</h1>@ si rezultatul va fi:

Un întreg paragraf se poate transforma cu usurinţă într-un header, folosind sintaxa {$hn$} la începutul paragrafului, unde {$n$} este un numar de la $1$ la $6$. De exemplu, _Textile_ va interpreta linia @h1. Primul header@ ca @<h1>Primul header</h1>@ şi rezultatul va fi:

h1. Primul header
h2. Modificatori

Pentru a scrie un text cu diferite efecte ( ingrosat, inclinat, subliniat, taiat ) sau in diferite pozitii ( puteri sau indici ) se scrie textul care se doreste a fi modificat intre modificatorii corespunzatori. In tabelul de mai jos este prezentat modul de folosire al acestora:

Pentru a scrie un text cu diferite efecte ( îngroşat, înclinat, subliniat, tăiat ) sau în diferite poziţii ( puteri sau indici ) se scrie textul care se doreşte a fi modificat între modificatorii corespunzători. În tabelul de mai jos este prezentat modul de folosire al acestora:
 
table(example). |_. Cod _Textile_|_. Cod HTML asociat|_. Rezultat |
|@**Un text îngroşat**@|@<b>Un text îngroşat</b>@|**Un text îngroşat**|
|@_Aici apare înclinat_@|@<i>Un text înclinat</i>@|_Aici apare înclinat_|
|@+Merge chiar şi subliniat+@|@<ins>Merge chiar şi subliniat</ins>@|+Merge chiar şi subliniat+|
|@-Text greşit-@|@<del>Text grşsit</del>@|-Text greşit-|
|@Pitagora: a^2^ + b^2^ = c^2^@|@Pitagora: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>@|a^2^ + b^2^ = c^2^|
|@Chiar şi logaritmi: log ~2~ N@|@Chiar şi logaritmi: log<sub>2</sub> N@|log ~2~ N|

table(example). |_. Cod _Textile_|_. Cod HTML asociat|
|@**Un text ingrosat**@|@<b>Un text ingrosat</b>@|
|@_Aici apare inclinat_@|@<i>Un text inclinat</i>@|
|@+Merge chiar si subliniat+@|@<ins>Merge chiar si subliniat</ins>@|
|@-Text gresit-@|@<del>Text gresit</del>@|
|@Pitagora: a ^2^ + b ^2^ = c ^2^@|@Pitagora: a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>@|
|@Chiar si logaritmi: log ~2~ N@|@Chiar si logaritmi: log <sub>2</sub> N@|
In cazul in care rezultatele produse de limbajul de markup nu sunt cele asteptate, se poate forta folosirea acestor modificatori prin caracterele { si } puse la inceputul si respectiv la sfarsitul secventei. De exemplu, @{**Text fortat**}@ are ca rezultat {**Text fortat**}.

În cazul in care rezultatele produse de limbajul de markup nu sunt cele aşteptate, se poate forţa folosirea acestor modificatori prin caracterele ${$ şi $}$ puse la începutul şi respectiv la sfârşitul secvenţei. De exemplu, @{**Text forţat**}@ are ca rezultat {**Text forţat**}.

Printre aceste caractere speciale exista si @; care opreste formatarile speciale intr-o secvente. Exemplu: @*capsuna*@ are ca rezultat *capsuna*. Daca asta nu functioneaza in pasajul tai poti sa folosesti direct 'entitati html':http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references. Poti sa scrii *elefanti* pentru a obtine *elefanti*

Printre aceste caractere speciale există şi @, care opreşte formatările speciale într-o secvenţă. Exemplu: @*capşună*@ are ca rezultat *capşună*. Daca asta nu funcţionează în pasajul tău poţi să foloseşti direct 'entităti HTML':http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references. Poţi să scrii *elefanţi* pentru a obtine *elefanţi*.

h2. Liste

h2. Liste

Pentru a crea o lista numerica cu Textile, este suficient sa inseram # inainte de fiecare paragraf:

Pentru a crea o lista numerică cu Textile, este suficient să inserăm $#$ înainte de fiecare paragraf:

@# Primul item@
@# Al doilea item@

@# Al treilea item@

@# Al treile item@

va genera:

# Al doilea item
# Al treilea item

De asemenea este posibil ca listele sa fie imbricate, incrementand numarul de caractere #. Listele vor avea o structura arborescenta:

De asemenea este posibil ca listele să fie îmbrăcate, incrementând numarul de caractere $#$. Listele vor avea o structura arborescentă:

@# Un item@
@## Alt item@

@### Alt item@

@# Al doilea item@

va avea ca rezultat:

va genera :

# Un item
## Alt item

### Alt item

# Al doilea item

Daca in locul listelor indexate numeric se doreste creerea listelor cu bulete ( _bulleted lists_ ), in loc de # se va folosi *. Regula pentru liste imbricate ramane valabila si aici:

Dacă în locul listelor indexate numeric se doreşte crearea listelor cu bulete ( _bulleted lists_ ), în loc de $#$ se va folosi $*$. Regula pentru liste îmbrăcate rămâne valabilă şi aici:

@* Capitolul 1@
@** Capitolul 1.1@

@*** Capitolul 1.1.1@

@* Capitolul 2@

produce urmatorul efect:

produce următorul efect :

* Capitolul 1
** Capitolul 1.1

*** Capitolul 1.1.1

* Capitolul 2

h2. Referinte externe

h2. Referinţe externe

Pentru a crea o referinta catre un alt site ( un _link_ ), textul descriptiv va fi plasat intre ghilimele duble ("), urmat imediat de caracterul : si de URLul dorit: @Link catre "infoarena":http://infoarena.ro@ va fi interpretat ca Link catre "infoarena":http://infoarena.ro. Daca un link este folosit de mai multe ori in acelasi document sau daca se doreste o mai buna organizare a textului, este posibil ca URLul sa fie specificat oriunde in document: intre paranteze patrate se va afla identificatorul unic asociat linkului, dupa care urmeaza adresa propriu-zisa. In momentul in care dorim sa inseram in document acel link este suficient in loc de adresa completa sa introducem doar identificatorul pe care l-am asociat adresei:

Pentru a crea o referinţă către un alt site ( un _link_ ), textul descriptiv va fi plasat între ghilimele duble ($"$), urmat imediat de caracterul $:$ si de URL-ul dorit: @Link către "infoarena":http://infoarena.ro@ va fi interpretat ca "Link către "infoarena":http://infoarena.ro". Dacă un link este folosit de mai multe ori în acelaşi document sau dacă se doreşte o mai bună organizare a textului, este posibil ca URL-ul să fie specificat oriunde în document: între paranteze pătrate se va afla identificatorul unic asociat linkului, dupa care urmează adresa propriu-zisă. În momentul în care dorim să inserăm în document acel link este suficient în loc de adresa completă să introducem doar identificatorul pe care l-am asociat adresei :

@Link catre "infoarena":arena@
@Al doilea link catre "infoarena":arena@

@Link către "infoarena":arena@
@Al doilea link către "infoarena":arena@

@[arena]http://infoarena.ro@
are rezultatul:

Link catre "infoarena":arena
Al doilea link catre "infoarena":arena

Link către "infoarena":arena
Al doilea link către "infoarena":arena

[arena]http://infoarena.ro

Pentru a posta o imagine pe site, este necesar in prealabil sa o salvati pe server. Pentru aceasta este suficient sa apasati butonul "Ataseaza" din coltul dreapta-sus al paginii pe care o editati si sa selectati imaginea pe care doriti sa o transferati pe server. Dupa aceea, pentru a introduce imaginea in pagina va trebui sa introduceti URLul ei intre semnul exclamarii (!).

Pentru a posta o imagine pe site, este necesar în prealabil să o salvaţi pe server. Pentru aceasta este suficient să apasaţi butonul $Ataşează$ din colţul dreapta-sus al paginii pe care o editaţi şi să selectati imaginea pe care doriţi să o transferaţi pe server. După aceea, pentru a introduce imaginea în pagină va trebui să introduceţi URL-ul ei între semnul exclamării ($!$).

Daca am incarcat deja imaginea logo.jpg in pagina curenta,
@!documentatie/textile?logo.jpg!@ va avea rezultatul:

Dacă am încărcat deja imaginea logo.jpg in pagină curentă,
@!documentatie/textile?logo.jpg!@ va avea rezultatul :

!documentatie/textile?logo.jpg!
h2. Tabele

Tabelele simple pot fi construite separand campurile lor prin caracterul |.

Tabelele simple pot fi construite separând câmpurile lor prin caracterul $|$.

@| nume | varsta | judet |@
@| Popescu | 24 | Bucuresti |@

@| nume | vârstă | judeţ |@
@| Popescu | 24 | Bucureşti |@

@| Ionescu | 12 | Constanta |@
va genera tabelul de mai jos:

| nume | varsta | judet |
| Popescu | 24 | Bucuresti |

| nume | vârstă | judeţ |
| Popescu | 24 | Bucureşti |

| Ionescu | 12 | Constanta |

Celulele care doresc sa fie facute cap de tabel vor fi marcate initial printr-un underscore, urmat imediat de un punct.

Celulele care doresc să fie făcute cap de tabel vor fi marcate iniţial printr-un _underscore_, urmat imediat de un punct.

@|_. nume |_. varsta |_. judet |@
@| Popescu | 24 | Bucuresti |@

@|_. nume |_. vârstă |_. judeţ |@
@| Popescu | 24 | Bucureşti |@

@| Ionescu | 12 | Constanta |@
va avea urmatorul rezultat:

|_. nume |_. varsta |_. judet |
| Popescu | 24 | Bucuresti |

|_. nume |_. vârstă |_. judeţ |
| Popescu | 24 | Bucureşti |

| Ionescu | 12 | Constanta |
h1. Cod <tex>\LaTeX</tex>

Atunci cand dorim sa introducem cod 'LaTeX':http://en.wikipedia.org/wiki/LaTeX putem folosi sintaxa:

Atunci când dorim să introducem cod 'LaTeX':http://en.wikipedia.org/wiki/LaTeX putem folosi sintaxa:

$&lt;tex> cod LaTeX </tex&gt;$
De exemplu pentru codul:

$&lt;tex> d = \sqrt{(c_{2}-c_{1})^{2} + 1 } </tex&gt;$

$&lt;tex>$ @d = \frac{m_0^3}{\sqrt{3-\frac{v^2}{c^2}}} + \sqrt[3]{a^2 + b^2} - \log_3 \cos \frac{\pi}{3}@ $</tex&gt;$

se obtine urmatoarea imagine:

se obţine următoarea imagine:

<tex> d = \sqrt{(c_{2}-c_{1})^{2} + 1 } </tex>

<tex> d = \frac{m_0^3}{\sqrt{3-\frac{v^2}{c^2}}} + \sqrt[3]{a^2 + b^2} - \log_3 \cos \frac{\pi}{3}</tex>

h2. Fragmente de cod

Atunci cand dorim sa inseram un fragment de cod in pagina curenta, putem sa folosim sintaxa:

Atunci când dorim să inserăm un fragment de cod în pagina curentă, putem să folosim sintaxa:

@== code(c) |@

@== code(limbaj) |@

@...fragment de cod...@
{@==@}

Urmatoarele limbaje sunt suportate:

Următoarele limbaje sunt suportate:

* $code{@(c)@}$ pentru C
* $code(cpp)$ pentru C++
* $code(pas)$ pentru Object Pascal
* $code(java)$ pentru Java

* $code({@c@})$ pentru $C$
* $code(cpp)$ pentru $C++$
* $code(pas)$ pentru $Free Pascal$
* $code(java)$ pentru $Java$

Iata un exemplu:

Iată un exemplu:

== code(c) |

# include <cstdio>

# include <stdio.h>
 
int a, b ;

int main ( void ) {

    int a, b;

    fscanf ( fopen ( "adunare.in", "r" ), "%d %d", &a, &b ) ;
    fprintf ( fopen ( "adunare.out", "w" ), "%d", a + b ) ;

    freopen ( "adunare.in", "r", stdin ) ;
    freopen ( "adunare.out", "w", stdout ) ;

    return 0 ;
}
==

    scanf ( "%d %d", &a, &b ) ;
    printf ( "%d\n", a + b ) ;

== code(cpp) |
# include <fstream>

    return 0 ;

int a, b ;
 
int main ( void ) {
    std :: ifstream f ( "adunare.in" ) ;
    std :: ofstream g ( "adunare.out" ) ;
 
    f >> a >> b ;
    g << a + b ;

}
==

h2. Aplicarea stilurilor CSS

== code(pas) |
program adunare ;
 
var a, b : longint ;
 
    begin
        freopen ( input, 'adunare.in' ) ; reset ( input ) ;
        freopen ( output, 'adunare.out' ) ; rewrite ( output ) ;
        readln ( a, b ) ;
        writeln ( a + b ) ;
        close ( input ) ; close ( output ) ;
    end.
==
 
h2. Aplicarea stilurilor $CSS$

Este posibil sa atasam cod CSS elementelor in felul urmator:

Este posibil să ataşăm cod $CSS$ elementelor in felul urmator:

table(example). |_. Cod _Textile_|_. Cod HTML asociat|_. Rezultat |
|@text %{color:red}bau!% text@|@text <span style="color:red">bau!</span> text@|text %{color:red;}bau!% text|

public

protected