Kodowanie RH wiki

Z Wiki_RH
Skocz do: nawigacja, szukaj

Witam, na tej karcie zostanie utworzony poradnik przedstawiający kilka możliwych modernizacji których nie ma w buttonach nad tekstem, a są stosowane i można wprowadzić do swojej karty.
Jest to poradnik który szybko umożliwi każdemu niezależnie od znajomości języka HTML rozbudować swoje karty postaci i inne strony w obrębie wiki z takim kodowaniem.
Jeśli będzie w tej karcie coś skrajnie niejasnego można śmiało kontaktować się ze Swainem na irc, oczywiście pod tym samym nickiem.


Najprostsze triki

Najprostsze jest oczywiście wykorzystywanie buttonów które mamy umieszczone zaraz nad polem tekstowym, jednak...
Nieraz przez kod i podobieństwa do języka HTML nie można napisać niektórych względnie prostych rzeczy, które nie każdy zna mimo swej popularności dlatego zostaną opisane w tym wątku a ci bardziej zaznajomieni z tymi najpopularniejszymi kodami mogą przewinąć te część.

Łamanie tekstu

Najpewniej niejednego irytuje fakt dużej interlini (odstępu między wierszami) gdy ktoś chce najnormalniej w świecie zacząć tekst od nowej linii bez kosmicznego odstępu jaki występuje w przykładzie pierwszym między drugim a trzecim zdaniem. Chcąc uniknąć tego większego odstępu ciągłego tekstu wystarczy wstawić prosty ciąg 4 znaków, by tekst wyglądał na ciągły, tak jak ten który właśnie czytasz, mieści się w kliku liniach. W poniższych przykładach ujrzysz różnicę pomiędzy podwójnym użyciem klawisza enter a zastosowaniem <br>.

Przykład pierwszy

Pierwsze zdanie.<br>
Drugie zdanie. [Tutaj podwójny enter.]

Trzecie zdanie.

Wygląda to tak

Pierwsze zdanie.
Drugie zdanie.

Trzecie zdanie.

(Jak tutaj widać, odstęp pomiędzy drugim zdaniem a trzecim jest większy, użyto tam dwukrotnie enter. Zaś Pierwsze zdanie zostało oddzielone za pomocą kodu <br>.)
Przykład drugi

Pierwsze zdanie.<br>
Drugie zdanie.<br>
Trzecie zdanie.

Wygląda to tak

Pierwsze zdanie.
Drugie zdanie.
Trzecie zdanie.

Proste i wygodne umieszczenie cytatów

Jeśli chcemy wkleić tekst w którym znajduje się wiele spacji, wrzucić go w strefę gdzie kodowanie jest wyłączone, nadać większe odstępy w tekście wystarczy zastosować prosty kod ,,<pre>'' przed rozpoczęciem cytatu oraz ,,</pre>'' po zakończeniu go. Należy pamiętać że tekst tu wprowadzony jest wyjątkowo mały oraz posiada najprostszą czcionkę co można zmienić czytając tematy bardziej złożonych oznaczeń.

Przykład jak to wpisać:
<font size="2"><pre>Tu jest jakiś cytat. A w nowy wiersz bez znaku <br> oddzielam enterem oraz mam dużą ilość spacji i nie zbija wszystkiego do jednej jak w normalnym kodowaniu.</pre></font> Jak to wygląda w praktyce:

Tu jest jakiś cytat.
A w nowy          wiersz bez znaku <br> oddzielam enterem oraz mam dużą         ilość spacji i nie zbija wszystkiego do jednej jak w           normalnym kodowaniu.


UWAGA: Tekst cytowany w ten sposób zawsze jest dość mały przez co zalecam stosowanie kodu połączonego z powiększoną czcionką o której w dalszej części artykułu. Najprościej polecam korzystać z tych oto znaczników specjalnie tu wypisanych: <font size="2"><pre> Twój tekst/cytat </pre></font>

Wstawianie obrazków z ramką i podpisem

Najpewniej wie o tym wielu lecz nie każdy musi to potrafić z tych którzy są początkujący na forum dlatego też zamieszczam te informację tutaj.

Wpadający w furię Bak'hazzen nakrywając się ognistym płaszczem ki.

By przesłać obrazek na wiki należy najpierw go mieć na dysku a następnie odnaleźć na tej oto stronie (Klik) poprzez kliknięcie ,,Wybierz plik''. Jeśli nie będzie chciał się on wgrać znaczy że ma nieprawidłowy format, wtedy najlepiej się skontaktować z kimś bardziej obeznanym kto pomoże krok po kroku zmienić format pliku na taki który przyjmie nasza wiki. Również odnośnie tego jak napisałem we wstępie możecie męczyć mnie (Swain).

Gdy już mamy Plik z grafiką na portalu wiki teraz czas dodać go na naszej stronie, zaczynamy od podwójnego prostokątnego nawiasu ,,[['' następnie wpisujemy bez spacji nazwę naszego podesłanego pliku przykładowo [[Plik:Swain.jpg gdy zamkniemy już mamy wstawiony obrazek, lecz będzie on bez żadnej ramki, tekstu, wyrównania do którejś strony naszej karty oraz możliwości regulacji rozmiaru które mam zamiar również tu opisać.

Przykład
[[Plik:Bakhazzen1.jpg|300px|thumb|right|Wpadający w furię Bak'hazzen nakrywając się ognistym płaszczem ki.]]

Jest to przykład obrazka który posiada wszystkie wymienione wyżej możliwości.

  • ,,300px'' odpowiada za regulacje szerokości naszego obrazka, przy tym wysokość będzie się skalować przez co obraz nam się nie zdeformuje, można dowolnie operować tutaj liczbami które są podane w pixelach.

[Ciekawostka: każda "kropeczka" na naszym monitorze to jeden pixel, zwykle ich jest ponad 800 tysięcy na monitorze nawet przy rozdzielczości 1024x840 px]

  • ,,thumb'' tworzy ramkę dookoła obrazka w której jest możliwość spisania tekstu na samym końcu.
  • ,,right'' jest to sekcja odpowiedzialna za wyrównanie, to odnosi się do wyrównania na prawy margines. Oczywiście "left" wyrówna do lewego a "center" wyśrodkuje go.
  • Ostatnia sekcja odpowiada za opis obrazka który możemy dodać, albo zostawić samą ramkę bez żadnego tekstu.

Efekt widoczny jest po prawej stronie

Linki zewnętrzne z opisem

Jest to wyjątkowo prosta operacja którą nie każdy wie jak wykonać, polega to jedynie na pojedyńczych kwadratowych nawiasach na otwarcie i zamknięcie odnośnika, linku - przykładowo z youtube zaczynającego się od http:// oraz po spacji napisanie własnego opisu.

Przykład
[http://www.youtube.com/ To jest link do youtube]

To jest link do youtube

Bardziej wymagające triki

Powiększenie tekstu

To jest dość prosta sztuczka która polega jedynie na dodaniu jednego kodu na początku powiększanego tekstu oraz go zakończenie gdy nie jest już potrzebny oraz określenia wielkości czcionki.
[Ciekawostka: Tekst standardowo na RH wiki ma rozmiar "2" więc wpisując jedynkę dostaniemy również mniejszy od niego rozmiar. Dodatkowo używając komendy <big>tekst</big> zwiększymy czcionkę jedynie o połowę jeśli chcemy uzyskać rozmiar pomiędzy 2 a 3.]

Przykład

<font size="5">Twój tekst</font>
Twój tekst

Wygląda to tak


Twój tekst
Twój tekst


UWAGA: Nie należy sugerować się pixelami jak w przypadku worda etc. oraz nadawać rozmiaru czcionki większej niż 7 gdyż wiki wariuje przy większych rozmiarach tekstu.

Zmiana koloru tekstu

To już nieco bardziej skomplikowany jest wybór kodu jeśli chcemy uzyskać odpowiedni kolor, składa się on z 6 znaków z systemu szesnastkowego poprzedzonych znakiem ,,#''.
[Dla bardziej ogarniętych, jest to kod szesnastkowy zawierający znaki z zakresu: 0,1,2 ... 7,8,9,A,B,C,D,E,F można się bawić dowolnie by znaleźć szukany kolor bądź należy się posłużyć paletą kolorów co według mnie jest rozsądniejsze]


Przykład

<font color="#e36f3e">Tekst pokolorowany</font>

Wygląda to tak

Tekst pokolorowany


Dość ciekawa lista przykładowych barw, należy pamiętać o wpisywaniu zawsze kodu szesnastkowego !

Zwijanie tekstu

Przydaje się przy dłuższych fragmentach tekstu, historiach itp które nie są aż tak istotne lub mogą zawierać spojlery, których niektórzy mogą nie chcieć czytać.

Przykład

<div class="mw-collapsible"> Ten tekst jest zwijany. </div>

Wygląda to tak

Ten tekst jest zwijany.

Poprzez dodanie mw-collapsed możemy ustawić tekst domyślnie zwinięty.

Przykład

<div class="mw-collapsible mw-collapsed"> Ten tekst jest zwijany i domyślnie zwinięty. </div>

Wygląda to tak

Ten tekst jest zwijany i domyślnie zwinięty.