Formatowanie tekstu[]
Pogrubienie i kursywa[]
Na wiki masz dwie opcje jeżeli chodzi o tryb źródłowy:
- Wikiowy kod
Na wiki do pochylenia i pogrubienia tekstu używa się apostrofów ' - obowiązuje tylko na wiki.
Tryb źródłowy | Tryb wizualny |
---|---|
''Kursywa'' | Kursywa |
'''Pogrubienie''' | Pogrubienie |
'''''Kursywa i pogrubiona''''' | Kursywa i pogrubiona |
- HTML
Inną opcją jest powszechnie znany kod HTML, który wikia również obsługuje.
Poza użyciem tagów zamiast apostrofów ta opcja niczym się nie różni od wikiowej.
Tryb źródłowy | Tryb wizualny |
---|---|
<i>Kursywa</i> | Kursywa |
<b>Pogrubienie</b> | Pogrubienie |
<b><i>Kursywa i pogrubienie</i></b> | Kursywa i pogrubiona |
Kreślenie... (Linie)[]
Do tych czynności możemy użyć tagów "<u>", "<strike>" oraz "<span style="text-decoration:WYBRANA_OPCJA;">"
Tryb źródłowy | Tryb wizualny |
---|---|
<u>Podkreślenie</u> | Podkreślenie |
<span style="text-decoration:underline">Podkreślenie</span> | Podkreślenie |
<strike>Przekreślenie</strike> | |
<s>Przekreślenie</s> | |
<span style="text-decoration:through;">Przekreślenie</span> | Przekreślenie |
<span style="text-decoration:overline">NAD</span> | NAD TEKSTEM |
<span style="text-decoration:underline overline line-through;">Kombinacja</span> | Kombinacja |
KOLORY[]
Kody kolorów możesz wyszukać na google(np. http://windows.home.pl/kolory.htm, http://paletakolorów.get3.eu/), możesz też wziąć je stąd: Pomoc:Kolory
Kolor czcionki (color)[]
<span style="color: KOLOR"> - dzięki temu dodanemu przed tekstem zakończonym tagiem </span> możesz zmienić kolor czcionki.
W miejscu KOLOR wklejasz kod lub nazwę koloru.
Wyróżniamy trzy typy uzyskania koloru:
- poprzez wpisanie angielskiej nazwy np.lime
- poprzez wklejenie szesnastkowego kodu RGB(Hex) np.#00FF00
- poprzez wklejenie dziesiętnego kodu RGB np.0, 255, 0
Na przykładzie posłużymy się kolorem limonkowym.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="color: lime">Angielska nazwa</span> | Angielska nazwa |
<span style="color: #00FF00">Hex</span> | Hex |
<span style="color: rgb(0, 255, 0)">RGB</span> | RGB |
W drugim przypadku ważne żeby kod był bez spacji i na początku miał #(kiedy tak nie jest należy kod zredukować - usunąć spacje i dodać #)
W trzecim przypadku ważne jest w miejsce KOLOR wstawić rgb po czym w nawiasie wypisać po przecinku odpowiednie liczby.
Przykłady innych kolorów:
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="color: DarkCyan">Angielska nazwa</span> | Angielska nazwa |
<span style="color: #4B0082">Hex</span> | Hex |
<span style="color: rgb(241, 52, 103)">RGB</span> | RGB |
Podświetlenie (background-color)[]
<span style="background-color:KOLOR;"> - jedyne czym się różni ten kod to to, że przed "color" jest dodane background-.
Poza tym zmienianie koloru wygląda tu tak samo jak w przypadku kolorowania czcionki.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="background-color: DarkCyan">Angielska nazwa</span> | Angielska nazwa |
<span style="background-color: #4B0082">Hex</span> | Hex |
<span style="background-color: rgb(241, 52, 103)">RGB</span> | RGB |
Kolor tekstu i tła[]
Można złączyć oba te kody dzięki czemu możemy ustalić kolor czcionki i tła wokół niej:
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="background-color: DodgerBlue; color: #00008B">PRZYKŁAD 1</span> | PRZYKŁAD 1 |
<span style="background-color: black; color: rgb(241, 52, 103)">PRZYKŁAD 2</span> | PRZYKŁAD 2 |
Cień (text-shadow)[]
Cień tekstu... czy cień będzie pod czy za tekstem, to już zależy od ciebie.
Tag na cień tekstu wygląda mniej więcej tak: <span style="text-shadow:KOLOR 0 0 LICZBApx;">
- W miejscu KOLOR ma być nazwa/kod wybranego koloru, wstawiony tam kolor będzie kolorem cienia.
- W miejscu LICZBA musi być wartość wyrażona w pikselach. Liczba ta ma wpływ na rozmazanie cienia.
- W tagu znalazły się dwa zera. Pozostawienie ich w takiej formie da nam efekt świecącego tekstu.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="text-shadow:Yellow 0 0 5px;">PRZYKŁAD 1</span> | PRZYKŁAD 1 |
<span style="text-shadow:Yellow 0 0 15px;">PRZYKŁAD 1</span> | PRZYKŁAD 1 |
Zwiększenie wartości jednego z nich ma wpływ na położenie cienia.
<span style="text-shadow:KOLOR LICZBApx 0 0;">
- Jeżeli zwiększymy wartość pierwszego zera objawi nam się cień-kopia tekstu po prawej, dalsze zwiększanie wartości w pikselach oddala cień od tekstu.
- Jeżeli tę samą wartość wpiszemy na minusie, cień przesunie się w lewo.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="text-shadow:DeepPink 2px 0 0;">PRZYKŁAD 2</span> | PRZYKŁAD 2 |
<span style="text-shadow:DeepPink -2px 0 0;">PRZYKŁAD 3</span> | PRZYKŁAD 3 |
<span style="text-shadow:KOLOR 0 LICZBApx 0;">
- Zwiększenie wartosci drugiego zera ma niemalże identyczny efekt jak z było to z pierwszym. Jedyną różnicą jest to, że tekst przesuwa się w dół lub w górę(kiedy wpiszesz minusową wartość).
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="text-shadow:DeepPink 0 3px 0;">PRZYKŁAD 4</span> | PRZYKŁAD 4 |
<span style="text-shadow:DeepPink 0 -3px 0;">PRZYKŁAD 5</span> | PRZYKŁAD 5 |
<span style="text-shadow:KOLOR LICZBApx LICZBApx 0;">
- Kombinowanie z pierwszą i drugą wartością spowoduje przesuwanie się cienia na skos.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="text-shadow:DeepPink 2px 2px 0;">PRZYKŁAD 6</span> | PRZYKŁAD 6 |
<span style="text-shadow:DeepPink -3px -3px 0;">PRZYKŁAD 7</span> | PRZYKŁAD 7 |
Kombinacja - najczęściej używana wersja cienia(text-shadow)[]
Najczęściej kiedy tworzysz cień tekstu wykorzystujesz do tego przynajmniej jedno z pierwszych dwóch zer i trzecie.
Nie daje nam to efektu święcącego tekstu jak w pierwszym przykładzie. Tutaj podświetlony zostaje cień-kopia tekstu.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="text-shadow:Aqua 0 3px 5px;">PRZYKŁAD 1</span> | PRZYKŁAD 1 |
<span style="text-shadow:Aqua 3px 0 5px;">PRZYKŁAD 2</span> | PRZYKŁAD 2 |
<span style="text-shadow:Aqua 6px -7px 10px;">PRZYKŁAD 3</span> | PRZYKŁAD 3 |
<span style="text-shadow:Aqua -4px 5px 10px;">PRZYKŁAD 4</span> | PRZYKŁAD 4 |
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="color:Black; font-weight:Bold; text-shadow:Aqua 0 0 9px;">PRZYKŁAD #5</span> | PRZYKŁAD #5 |
<span style="color:Yellow; text-shadow:LawnGreen 0 0 9px;">PRZYKŁAD #6</span> | PRZYKŁAD #6 |
Zmiana czcionki[]
<span style="font-family:CZCIONKA"> - tak wygląda kod, który należy wpisać przed wyrazem, w tym przypadku wyraz należy zakończyć tagiem </span>
W miejsce CZCIONKA wpisujesz nazwę interesującej ciebie czcionki.
Rodzaje czcionek którymi dysponujesz na kompie możesz znaleźć m.in. w WordPadzie ;)
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="font-family:Georgia">PRZYKŁAD 1</span> | PRZYKŁAD 1 |
<span style="font-family:comic sans ms">PRZYKŁAD 2</span> | PRZYKlAD 2 |
<span style="font-family:Arial Black">PRZYKŁAD 3</span> | PRZYKlAD 3 |
Rozmiar czcionki[]
Jak w większości przypadków użyjemy tutaj tagu <span style="">.
W cydzysłów tym razem wpiszemy font-size:ROZMIAR - gdzie zamiast słowa ROZMIAR jest wartość liczbowa wyrażona w punktach(pt) lub procentach(%)
1pt=10%
1%=0.1pt
10pt=100% - oryginalny rozmiar, niższe wartości zmniejszają czcionkę, wyższe - zwiększają.
Należy również pamiętać, że wielkość czcionki zależy również od jej rodzaju.
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="font-size:15pt">15 - powiększony w pt</span> | 15 - powiększony w pt |
<span style="font-size:150%">150 - powiększony w %</span> | 150 - powiększony w % |
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="font-size:100%">Oryginalny rozmiar</span> | Oryginalny rozmiar |
<span style="font-size:12pt">Powiększony</span> | Powiększony |
<span style="font-size:160%">Powiększony</span> | Powiększony |
<span style="font-size:8.5pt">Pomniejszony</span> | Pomniejszony |
<span style="font-size:68%">Pomniejszony</span> | Pomniejszony |
Kombinacje[]
Co zrobić kiedy potrzebujemy zmienionej czcionki, rozmiaru i koloru?
Wklejanie każdego kodu zajmuje dużo miejsca, do tego można się trochę pogubić kiedy trzeba wpisać odpowiednią ilość tagów końcowych...
Wszystko jest o wiele prostsze kiedy jest jeden tag początkowy i jeden tag końcowy, czyli niby jedna formułka... Nieprawda! Za pomocą jednego tagu można użyć wielu formułek.
Jedyne co muszą mieć wspólne wszystkie kody to tag, w tym przypadku <span style="">.
Da się zauważyć, że w każdej podanej formułce w tym artykule jest wykorzystany ten tag, każdy różni się tylko zawartością cudzysłowu.
To właśnie tam wpisujesz wszystko to co ci potrzeba.
JAK TO DZIAŁA?[]
Wybierasz zawartość cudzysłowu w danych formułkach i wklejasz je po kolei przedzielając nie przecinkiem, a średnikiem ;
Np. by zmienić czcionkę, jej wielkość i kolor w cudzysłów tagu "<span style="">" wklejasz(oddzielając średnikami) font-size:; font-family:; color:
Co pojawi się po dwukropku zależy od ciebie(zgodnie z objaśnieniami wyżej w artykule)
Wygląda to tak:
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="font-size:120%; font-family:Georgia; color:DeepPink">PRZYKŁAD</span> | PRZYKŁAD |
Jakich formułek użyjesz zależy od tego jakiego efektu potrzebujesz.
Inne przykłady możliwych kombinacji:
Tryb źródłowy | Tryb wizualny |
---|---|
<span style="font-family:Roman; font-size:14pt">PRZYKLAD 2</span> | PRZYKLAD 2 |
<span style="background-color: #990099; color: Lime">'''PRZYKLAD 3'''</span> | PRZYKLAD 3 |
<span style="background-color: Indigo; font-size:82%">''PRZYKLAD 4''</span> | PRZYKLAD 4 |
<span style="color: FireBrick; font-size:220%; font-family:Impact"><u>PRZYKLAD 5</u></span> | PRZYKLAD 5 |
<span style="font-size:19pt; font-family:Serif; color: Silver"><strike>'''PRZYKLAD 6'''</strike></span> |