Pomoc:Formatowanie: Różnice pomiędzy wersjami

Z Nonsensopedii, polskiej encyklopedii humoru
(więcej rzeczy z N:R)
(→‎Kody HTML i CSS: -zbędne, krócej)
Linia 464: Linia 464:


== Kody HTML i CSS ==
== Kody HTML i CSS ==
MediaWiki zostało tak pomyślane, aby tworzenie hasła było jak najmniej kłopotliwe, a użytkownik w jak najmniejszej mierze zaprzątał sobie głowę sprawami technicznymi. Zwarty, stosunkowo niewielki zestaw poleceń z powodzeniem wystarcza do sprostania potrzebom ogromnej większości użytkowników – przecież w hasłach stosujemy zazwyczaj wyróżnianie tekstu, odsyłacze, niekiedy śródtytuły i grafikę.
MediaWiki zostało tak pomyślane, aby tworzenie hasła było jak najmniej kłopotliwe, a użytkownik w jak najmniejszej mierze zaprzątał sobie głowę sprawami technicznymi. Do zdecydowanej większości zastosowań wystarczą funkcje wbudowane w wikitekst.


Możliwe jest jednak stosowanie także poleceń języka HTML, jeśli tylko je znamy. Wprawdzie twórcy Nonsensopedii nie zalecają używania tagów HTML, do których są odpowiednie znaczniki MediaWiki (na przykład <nowiki><b> oraz <i></nowiki>). Używane są natomiast bardziej zaawansowane tagi, najczęściej używane z CSS-em.
Możliwe jest jednak stosowanie także tagów języka HTML, jeśli tylko je znamy. Nie zalecamy używania tagów HTML, do których są odpowiednie znaczniki MediaWiki (na przykład <nowiki><b> oraz <i></nowiki>). Używane są natomiast tagi <source lang="html" inline><div></source> oraz <source lang="html" inline><span></source>, najczęściej z CSS-em.

Wymieńmy kilka poleceń, które w pewnych sytuacjach są użyteczne.

{| class="wikitable" style="width: 100%;"
! Tag !! Informacje !! Użycie !! Wynik
|-
| id="Tag_br" |'''<nowiki><br /></nowiki>'''
|Łamie wiersz. Nie nadużywaj tego tagu, zamiast tego użyj <nowiki><poem></nowiki>.
|<nowiki>To jest pierwszy wiersz<br />To jest drugi wiersz</nowiki>
|To jest pierwszy wiersz<br />To jest drugi wiersz
|-
| id="Czcionka_o_stałej_szerokości Tag_code Tag_samp Tag_kbd" |'''<nowiki><code>, <samp>, <kbd> i font-family: monotype (CSS)</nowiki>'''
|Wstawia kod, wynik programu, tekst z klawiatury lub jakikolwiek tekst z krojem o stałej szerokości.
|<poem><nowiki><code>fragment kodu</code>
<samp>przykładowy kod lub wynik programu</samp>
<kbd>tekst z klawiatury</kbd>
<span style="font-family: monospace;">Jakikolwiek inny tekst z czcionką o stałej szerokości</span>
</nowiki></poem>
|<poem><code>fragment kodu</code>
<samp>przykładowy kod lub wynik programu</samp>
<kbd>tekst z klawiatury</kbd>
<span style="font-family: monospace;">Jakikolwiek inny tekst z czcionką o stałej szerokości</span>
</poem>
|-
| id="Centrowanie Klasa_center" |'''<nowiki><div class="center"> i text-align: center (CSS)</nowiki>'''
|Umożliwia ustawienie fragmentu hasła na środku wiersza.
|<nowiki><div class="center">Tekst na środku</div></nowiki>
|<div class="center">Tekst na środku</div>
|-
| id="Rozmiar_czcionki CSS_font-size" |'''<nowiki>font-size (CSS)</nowiki>'''
|Ustala wielkość czcionki. Przy powiększeniu należy również użyć ''line-height''.
|<nowiki><span style="font-size: 9px;">Mały</span> i <span style="font-size: 18px; line-height: 100%;">powiększony tekst</span></nowiki>
|<span style="font-size: 9px;">Mały</span> i <span style="font-size: 18px; line-height: 100%;">powiększony tekst</span>
|-
|}

Istnieje też możliwość stosowania np. znaków specjalnych, jak ©, ™, € i inne.


== Zobacz też ==
== Zobacz też ==

Wersja z 12:42, 25 wrz 2019

Pomoc / Dla edytorów / Formatowanie

Na tej stronie Pomocy znajdziesz informacje o tym, jak formatować tekst na Nonsensopedii. Jeśli szukasz stron opisujących inne elementy wikitekstu (grafiki, tabele, filmy, linki), zajrzyj do sekcji Zobacz też.

Akapity

Przykłady akapitów i nowych linii
Wpisujesz Otrzymujesz

Słowo pierwsze
Słowo drugie
Słowo trzecie

Słowo pierwsze Słowo drugie Słowo trzecie

Wiersz pierwszy <br />
Wiersz drugi <br />
Wiersz trzeci <br />
Wiersz czwarty <br />

Wiersz pierwszy
Wiersz drugi
Wiersz trzeci
Wiersz czwarty

<poem>
Wiersz pierwszy
Wiersz drugi
Wiersz trzeci
Wiersz czwarty
</poem>

Akapit pierwszy

Akapit drugi

Akapit trzeci

Akapit czwarty

Akapit pierwszy

Akapit drugi

Akapit trzeci

Akapit czwarty

Znaki nowej linii (entery) w źródle strony nie pokrywają się z kolejnymi liniami w tekście.

  • Pojedynczy enter w źródle jest traktowany jako jedna spacja (odstęp) w artykule.
  • Podwójny enter w źródle oznacza akapit – służący do rozdzielania dwóch myśli (wątków) w tekście jednej sekcji.
  • Jeżeli chcesz wymusić rozpoczęcie nowej linii, możesz zrobić to na dwa sposoby:
    • Wstawiając znacznik <br /> w miejscu, gdzie ma się rozpocząć kolejny wiersz.
    • W przypadku konieczności wymuszenia wielu nowych linii pod rząd tekst można wsadzić między znaczniki <poem> i </poem> – każdy enter wewnątrz tych znaczników będzie odpowiadał kolejnemu wierszowi w tekście.


Śródtytuły (nagłówki)

W hasłach możemy stosować cztery poziomy śródtytułów, sygnalizowane odpowiednią liczbą znaków równości.

  • Aby utworzyć sekcję, należy umieścić na jej początku jej nagłówek. Robimy to, umieszczając tytuł sekcji pomiędzy dwiema parami znaków równości: == Tytuł sekcji ==. Należy pamiętać, że w tej samej linii nie może się znajdować nic innego.
  • W podobny sposób wstawiamy nagłówki podsekcji, jednak dla każdego kolejnego stopnia zagnieżdżenia dokładamy po jednym znaku równości w obu parach: === Tytuł podsekcji ===. Podsekcja musi znajdować się wewnątrz sekcji, więc nagłówka podsekcji nie można umiejscowić przed pierwszym nagłówkiem sekcji.
  • Spis treści (Table of Contents) domyślnie pojawia się pod pierwszym nagłówkiem sekcji w artykule, o ile ów się pojawia, spisy treści nie są wyłączone w preferencjach użytkownika, nie został wyłączony w artykule przez użycie przełącznika __NOTOC__ lub przemieszczony przy użyciu __TOC__.
  • Jeżeli nagłówek sekcji ma być elementem szablonu, na przykład dyskusji użytkownika, wtedy zamiast znaków równości używamy znaczników HTML: <h2>Tytuł sekcji</h2>, <h3>Tytuł podsekcji</h3> i tak dalej, za każdym razem zwiększając cyfrę w znaczniku o jeden. Usunie to przycisk „edytuj” z nagłówka sekcji, którego kliknięcie otworzyłoby okno edycji nie sekcji dyskusji, lecz samego szablonu. Te znaczniki nie muszą mieć osobnej linii.
Przykłady sekcji
Wpisujesz Otrzymujesz
== Tytuł sekcji ==

Tytuł sekcji

=== Tytuł podsekcji ===

Tytuł podsekcji

==== Tytuł podsekcji drugiego stopnia ====

Tytuł podsekcji drugiego stopnia

===== Tytuł podsekcji trzeciego stopnia =====
Tytuł podsekcji trzeciego stopnia
<h2>Tytuł sekcji nieedytowalnej</h2>

Tytuł sekcji nieedytowalnej

<h3>Tytuł podsekcji nieedytowalnej</h3>

Tytuł podsekcji nieedytowalnej

<h4>Tytuł podsekcji nieedytowalnej drugiego stopnia</h4>

Tytuł podsekcji nieedytowalnej drugiego stopnia

<h5>Tytuł podsekcji nieedytowalnej trzeciego stopnia</h5>
Tytuł podsekcji nieedytowalnej trzeciego stopnia

Wyróżnianie pisma

Fragmenty tekstu znajdujące się w artykule mogą być wyróżniane na wiele sposobów – poprzez zmianę wyglądu liter go tworzących.

Kursywa

Kursywa (tekst pochylony) jest tworzona przez wkładanie tekstu pomiędzy dwie pary apostrof: ''.

  • Jeżeli chcemy by tekst pisany kursywą miał długość kilku linii, to wewnątrz apostrof tekst dodatkowo otaczamy parą znaczników HTML-owych: <poem> oraz </poem>.
Przykłady kursywy
Wpisujesz Otrzymujesz
''Ten tekst jest kursywą'' Ten tekst jest kursywą

''<poem>
Ten tekst także jest kursywą
A nawet ma kilka linii!
O, tutaj kolejna
Jeszcze jedną, jeszcze musisz!
</poem>''

Ten tekst także jest kursywą
A nawet ma kilka linii!
O, tutaj kolejna
Jeszcze jedną, jeszcze musisz!

Pogrubienie

Podstawowym sposobem wyróżniania tekstu jest jego pogrubienie.

  • Tworzone poprzez wkładanie tekstu pomiędzy parę potrójnych apostrof: '''.
  • Tak jak w przypadku kursywy, jeśli chcemy by nasz pogrubiony tekst rozciągał się na kilka wierszy, to wewnątrz apostrof otaczamy tekst parą znaczników <poem> oraz </poem>.
Przykłady pogrubienia
Wpisujesz Otrzymujesz
'''Ten tekst jest pogrubiony''' Ten tekst jest pogrubiony

'''<poem>
Życie nie trwa wiecznie
Ale miłość tak
Nie zostawaj w tyle
Czytaj Fakt!
</poem>'''

Życie nie trwa wiecznie
Ale miłość tak
Nie zostawaj w tyle
Czytaj Fakt!

Podkreślenie

Kolejnym sposobem wyróżniania tekstu jest jego podkreślenie. Tworzymy je poprzez włożenie tekstu pomiędzy <u> oraz </u>.

Przykład podkreślenia
Wpisujesz Otrzymujesz
<u>Ten tekst jest podkreślony</u> Ten tekst jest podkreślony

Kod

Cytowanie kodu.

  • Jest tworzone poprzez włożenie tekstu pomiędzy <code> oraz </code>.
  • Jeżeli chcemy rozciągnąć to na kilka wierszy, to tak jak w poprzednich przypadkach – opatrzamy wewnątrz (po <code>) tekst znacznikami <poem>.
  • Jednakże zamiast tego warto również rozważyć użycie <source> lub <pre>, opisanych niżej.
  • Służy do ogólnego cytowania kodu źródłowego, czasami jest stosowane jako zwykłe wyróżnienie tekstu.
  • Jest pisane czcionką o stałej szerokości – przez co niektóre znaki mogą w nim wyglądać tak samo (z reguły dywizy i półpauzy).
Przykłady kodu
Wpisujesz Otrzymujesz
<code>Ten tekst jest kodem</code> Ten tekst jest kodem

<poem><code>
user@host$ cd katalog
user@host$ ls
plik
user@host$ rm plik
</code></poem>

user@host$ cd katalog
user@host$ ls
plik
user@host$ rm plik

Kod podświetlany

Cytowanie kodu z podświetlaniem składni.

  • Aby utworzyć, należy włożyć tekst pomiędzy <source lang="nazwa"> oraz </source>, gdzie w miejscu nazwa należy wpisać odpowiednią nazwę języka, którego składnia ma być podświetlana w tekście.
  • Jest podobne do <code>, ale pozwala podświetlać składnię języka, w jakim jest kod pisany – jednakże uniemożliwia inną stylizację.
    • Tak jak <code> może zawierać wiele linii.
  • Lista języków i ich nazw znajduje się tutaj.
Przykład kodu podświetlanego
Wpisujesz Otrzymujesz

<source lang="lua">
local sum = 0
for i = 1, #arg do
  if tonumber(i) then
    sum = sum + i
  end
end
print(sum)
</source>

local sum = 0
for i = 1, #arg do
  if tonumber(i) then
    sum = sum + i
  end
end
print(sum)

Preformatowanie

Cytowanie kodu „na twardo”.

  • Aby uzyskać, należy rozpocząć linię od spacji, lub wsadzić tekst w parę znaczników <pre> oraz </pre>, jeżeli tekst rozciąga się na kilka wierszy.
  • Służy do cytowania dłuższych fragmentów kodu, bez podświetlania składni lub jakiejkolwiek stylizacji.
Przykłady preformatowania
Wpisujesz Otrzymujesz
 Ta linia zaczyna się od spacji
Ta linia zaczyna się od spacji

<pre>
Róże są czerwone
Fiołki są niebieskie
Cukier jest słodki
A alkohol niezdrowy
</pre>

Róże są czerwone
Fiołki są niebieskie
Cukier jest słodki
A alkohol niezdrowy

Wykazy (listy)

Wykazy nienumerowane

Najprostszym sposobem utworzenia nieuporządkowanego czyli nienumerowanego wykazu (listy) jakichś pojęć czy zagadnień jest podanie ich w kolejnych wierszach i poprzedzenie gwiazdkami, np.

* Warszawa
* Kraków
* Wrocław

Efekt będzie następujący:

  • Warszawa
  • Kraków
  • Wrocław

Stosując większą liczbę gwiazdek, np. dwie na drugim poziomie zagnieżdżenia i trzy na trzecim poziomie, można tworzyć drzewo, z wcięciami zależnymi od poziomu:

* Polska
** Ludność
*** Miasta
*** Wieś

Da to w efekcie:

  • Polska
    • Ludność
      • Miasta
      • Wieś
    • Powierzchnia
  • Czechy
    • Ludność
      • Miasta
      • Wieś
    • Powierzchnia
  • Słowacja
    • Ludność
      • Miasta
      • Wieś
    • Powierzchnia

Wykazy numerowane

Innym sposobem jest użycie znaku #, który pozwala utworzyć wykaz uporządkowany lub numerowany.

# Warszawa
# Kraków
# Wrocław

I efekt:

  1. Warszawa
  2. Kraków
  3. Wrocław

Można też zastosować hierarchię, stosując dwa lub trzy kolejne znaki # przed wierszami:

  1. Polska
    1. Ludność
      1. Miasta
      2. Wieś
    2. Powierzchnia
  2. Czechy
    1. Ludność
      1. Miasta
      2. Wieś
    2. Powierzchnia
  3. Słowacja
    1. Ludność
      1. Miasta
      2. Wieś
    2. Powierzchnia

Wykazy mieszane

Można też mieszać definicje:

  • Polska
  1. Ludność
  2. Powierzchnia
  • Czechy
  1. Ludność
  2. Powierzchnia
  • Słowacja
  1. Ludność
  2. Powierzchnia

Wcięcia

Możesz wreszcie stosować wyróżniające wcięcia, używając znaków dwukropka.

To jest tekst bez wcięcia.
:To jest wcięty akapit.
::Jeszcze bardziej wcięty akapit.
:To jest kolejny wcięty akapit.
I znowu akapit bez wcięcia.

Da to w rezultacie:

To jest tekst bez wcięcia.

To jest wcięty akapit.
Jeszcze bardziej wcięty akapit.
To jest kolejny wcięty akapit.

I znowu akapit bez wcięcia.

Definicje

Specyficznym rodzajem list są definicje, w których nazwę definicji poprzedza się znakiem średnika, zaś wyjaśnienie definicji znakiem dwukropka.

; Warszawa : stolica Polski
; Praga : stolica Czech
; Berlin : stolica Niemiec

Warszawa
stolica Polski
Praga
stolica Czech
Berlin
stolica Niemiec

Kolory

Czasem zdarza się, że chcemy ożywić kolorami nasz artykuł. Jest to całkiem proste, o ile znamy komendy odpowiedzialne za to.

Tekst

Na początek zmiana koloru tekstu. Aby to zrobić, należy wpisać <span style="color:###">. W miejsce trzech kratek wpisujemy nazwę koloru, którego chcemy użyć. Uwaga! Jego nazwa musi być napisana po angielsku! Na przykład: green, red, white…

Gdy wpiszemy tę komendę, każdy tekst napisany po niej będzie w takim kolorze, jaki jest w komendzie. Poniżej przykład koloru red.
Ten tekst jest czerwony.
Ale ten tekst także jest czerwony! Co w takim razie zrobić? Jeśli chcemy zmienić kolor na ten poprzedni, nie musimy wpisywać <span style="color: black">. Wystarczy </span>.

Jak widać, ten tekst jest już normalny. Oprócz kolorów typu red, orange czy blue, można skorzystać z innych, niestandardowych. Muszą być one wpisywane w systemie szesnastkowym, czyli hex. Wpisujemy je następująco: <span color="#/przykładowe sześć cyfr lub liter/">. Na przykład, chcąc użyć koloru oliwkowego, użyjemy #808000. Kody kolorów możesz otrzymać na wiele sposobów (np. z Gimpa lub innego edytora grafiki). Na tej stronie znajdziesz proste narzędzie do wybierania kolorów, a jeśli chcesz zbudować od razu całą ładnie komponującą się paletę, to możesz skorzystać z tego narzędzia.

Innym sposobem na kontrolę koloru tekstu może być użycie szablonu {{c}}, którego użycie wyjaśnione jest w dołączonej do niego treści.

Tło strony

Bywa, że możemy chcieć zmienić kolor całej strony. Do tego potrzebna jest zupełnie inna, dłuższa komenda. Brzmi ona:
<div style="text-align: justify; background: /KOD W HEX/; margin: 1em 0px; padding: 16px; border: /KOD W HEX/; 4px solid;">
Pierwszy /KOD W HEX/ odpowiada za kolor tła strony, a drugi /KOD W HEX/ za kolor ramki tła.

Kategorie

Należy pamiętać o nadaniu hasłu kategorii – bardzo pomaga to zarówno osobom, które przeglądają hasła z danej dziedziny, jak i nonsensopedystom, którzy utrzymują tę dziedzinę w porządku. Jeśli opracowujesz np. hasło o znanym polityku Janie Kowalskim, włącz go do kategorii Polscy politycy. Składnia jest następująca:

[[Kategoria:Polscy politycy]]

Jednak aby sortowanie było poprawne, można zastosować jeszcze dodatkowy kod:

[[Kategoria:Polscy politycy|Kowalski, Jan]],

lepszą metodą natomiast jest użycie magicznego słowa {{DEFAULTSORT:Kowalski, Jan}}, które powoduje, że sposób sortowania obowiązuje dla wszystkich wymienionych kategorii bez potrzeby każdorazowego jego przytaczania.

Podanie po kresce ciągu Kowalski, Jan spowoduje, że w kategorii Polscy politycy nazwisko zostanie umieszczone pod właściwą literą.

Aby wybrać odpowiednią kategorię, najlepiej znaleźć hasło pokrewne i podpatrzeć, gdzie jest przyporządkowane, lub przejść do ogólnej kategorii (w tym przypadku Biografie) i odnaleźć odpowiednią kategorię pochodną. Ewentualnie, kompletną listę kategorii znajdziesz pod adresem Specjalna:Kategorie.

Zauważ na przykład, że niniejszy poradnik jest umieszczony w kategorii Pomoc, co widać na samym dole, pod artykułem.

Przekierowania

Niekiedy hasło może być poszukiwane pod kilkoma nazwami np. Niemiecka Republika Demokratyczna i NRD. Aby nie tworzyć dwóch takich samych artykułów, możemy jedną z tych nazw przekierować na drugą. W tym celu należy w jednym z artykułów umieścić w pierwszej linii frazę #patrz, a następnie link do strony, na której znajduje się artykuł właściwy.

Całość wygląda tak: #PATRZ [[Nowa nazwa]]

Przekierowanie może też być stosowane, jeśli uznasz, że hasło powinno mieć inną nazwę niż pierwotna, co może być wynikiem popełnionego błędu, choćby i literowego. Możesz skorzystać z zakładki Przenieś nad polem edycyjnym.

Po kliknięciu tej zakładki MediaWiki wyświetli pole Nowy tytuł, w którym wpisz po prostu nowy tytuł hasła. Od tej chwili nosi ono nową nazwę, zaś w haśle o starej nazwie pojawi się kod:

#PATRZ [[Nowa nazwa]]

Zakładka przenieś ma przy tym dużo poważniejsze działanie, bo oprócz wstawienia przekierowania przenosi pod nową nazwę także historię strony i dyskusję.

Niestety (a może na szczęście), tylko administratorzy i moderatorzy treści mają prawo usuwać hasła z Nonsensopedii, więc funkcja przenoszenia może być niekiedy przydatna.

Możesz także sprawdzić, które hasła w Nonsensopedii odwołują się do naszego hasła – lista jest wyświetlana po kliknięciu odsyłacza Linkujące z lewej strony ekranu. Jeśli haseł takich jest niewiele, można się pokusić o zmianę odsyłacza w tych hasłach. Jeśli zbyt dużo, trzeba jednak już zawierzyć funkcji przekierowania, która będzie przenosić czytelnika we właściwe miejsce.

Poziome linie

Pozioma linia jest wstawiana za pomocą czterech kresek (znaków minus):

----

Efekt jest następujący:


Nie nadużywaj poziomych linii; staraj się je stosować oszczędnie i w wyjątkowych wypadkach.

Kody HTML i CSS

MediaWiki zostało tak pomyślane, aby tworzenie hasła było jak najmniej kłopotliwe, a użytkownik w jak najmniejszej mierze zaprzątał sobie głowę sprawami technicznymi. Do zdecydowanej większości zastosowań wystarczą funkcje wbudowane w wikitekst.

Możliwe jest jednak stosowanie także tagów języka HTML, jeśli tylko je znamy. Nie zalecamy używania tagów HTML, do których są odpowiednie znaczniki MediaWiki (na przykład <b> oraz <i>). Używane są natomiast tagi <div> oraz <span>, najczęściej z CSS-em.

Zobacz też