FANDOM


Witam Was serdecznie w czwartym numerze gazetki! Jako że troszeczkę nie wiem, o czym pisać, to bardzo mile są widziane komentarze z propozycjami, a tymczasem uraczę Was garścią wskazówek o tym, jak robić ładne nagłówki.

Uwaga: Do nagłówków nie wykorzystujemy arkuszy CSS, tylko umieszczamy podawane przeze mnie kody bezpośrednio na stronie, na której chcemy to mieć.

Najbardziej podstawowy nagłówek ze wszystkichEdytuj

Czyli typowy nagłówek sekcji. Można go bardzo łatwo osiągnąć za pomocą wikitekstu. Wystarczy w kodzie źródłowym przed i po treści nagłówka wpisać odpowiednią ilość znaków równości. W kodzie wygląda to tak:

=Pierwszy stopień=
==Drugi stopień==
===Trzeci stopień===
====Czwarty stopień====
=====Piąty stopień=====
======Szósty stopień======

A efekt jest następujący:

Pierwszy stopieńEdytuj

Drugi stopieńEdytuj

Trzeci stopieńEdytuj

Czwarty stopieńEdytuj

Piąty stopieńEdytuj
Szósty stopieńEdytuj

Na tej wiki nagłówek pierwszego stopnia jest domyślnie objęty kodem, który automatycznie sprawia, że nagłówki mają czcionkę Lobster. Nagłówki powyżej są jedynymi, które zapewniają powstanie spisu treści, dlatego jeśli zależy Wam na tym, by nagłówki go utworzyły, to przy późniejszych krokach przed i po prezentowanych kodach powinniście umieścić odpowiednią ilość znaków równości, jak w przykładzie wyżej.

Kolor nagłówkaEdytuj

Rzeczą, która marzy się większości osób robiących nagłówki, jest zmiana ich koloru. Można to osiągnąć w bardzo prosty i przyjemny sposób. Podstawowy kod na to: <span style="color:nazwa koloru">Nagłówek</span>. O kolorach rozpisywałam się już wcześniej podczas opowiadania o tle.

PrzykładyEdytuj

  • <span style="color:blue">Nagłówek</span>Nagłówek
  • <span style="color:#ff8c00">Nagłówek</span>Nagłówek
  • <span style="color:rgba(255,0,255,.7)">Nagłówek</span>Nagłówek

Rozmiar nagłówkaEdytuj

Drugą z najważniejszych rzeczy w tworzeniu nagłówka jest nadanie mu odpowiedniego rozmiaru, żeby się wyróżniał na tle reszty tekstu. Kod ogólny: <span style="font-size:rozmiar">Nagłówek</span>.

PrzykładyEdytuj

Wartości absolutneEdytuj

  • <span style="font-size:xx-small">Nagłówek</span>Nagłówek
  • <span style="font-size:x-small">Nagłówek</span>Nagłówek
  • <span style="font-size:small">Nagłówek</span>Nagłówek
  • <span style="font-size:medium">Nagłówek</span>Nagłówek
  • <span style="font-size:large">Nagłówek</span>Nagłówek
  • <span style="font-size:x-large">Nagłówek</span>Nagłówek
  • <span style="font-size:xx-large">Nagłówek</span>Nagłówek

Z tych wartości subiektywnie uważam, że do nagłówka jest najlepsze xx-large...

Zapis za pomocą pikseli i innych takichEdytuj

  • <span style="font-size:20px">Nagłówek</span>Nagłówek
  • <span style="font-size:1cm">Nagłówek</span>Nagłówek
  • <span style="font-size:25pt">Nagłówek</span>Nagłówek

Posługuję się praktycznie tylko pikselami, zaskoczyło mnie, że czcionka 1cm jest taka duża...

Czcionka nagłówkaEdytuj

Kolejna rzecz pomagająca wyróżnić nasz nagłówek. Kod ogólny: <span style="font-family:czcionka">Nagłówek</span>. Istnieje pięć ogólnych rodzajów czcionki, zaraz je pokażę na przykładach. Na samej górze będzie przykład ogólny, niżej będę zamieszczać czcionki należące do danego rodzaju. Uwaga: Niektóre czcionki mogą nie działać na wszystkich komputerach.

serifEdytuj

Serif to czcionka szeryfowa, najczęściej spotykana w książkach i innych wydaniach papierowych. Czcionek szeryfowych na ogół nie polecam do pisania rzeczy w Internecie, bo są trudniej czytelne.

  • <span style="font-family:serif">Nagłówek</span>Nagłówek
  • <span style="font-family:'Times New Roman'">Nagłówek</span>Nagłówek
  • <span style="font-family:Georgia">Nagłówek</span>Nagłówek

sans-serifEdytuj

Sans-serif to przeciwieństwo Serif, czyli czcionka bezszeryfowa. Najczęściej spotykana w Internecie, także większość tekstu na wiki jest nią pisana.

  • <span style="font-family:sans-serif">Nagłówek</span>Nagłówek
  • <span style="font-family:Arial">Nagłówek</span>Nagłówek
  • <span style="font-family:Verdana">Nagłówek</span>Nagłówek
  • <span style="font-family:Helvetica">Nagłówek</span>Nagłówek
  • <span style="font-family:Tahoma">Nagłówek</span>Nagłówek

monospaceEdytuj

Czyli czcionka spotykana w programowaniu, tak zwana o stałej szerokości znaków. Możecie ją też zauważyć w miejscach na szarym tle, gdzie pokazuję Wam kody.

  • <span style="font-family:monospace">Nagłówek</span>Nagłówek
  • <span style="font-family:Courier">Nagłówek</span>Nagłówek
  • <span style="font-family:'Courier New'">Nagłówek</span>Nagłówek

cursiveEdytuj

To ta czcionka, do której należy uwielbiany przez wszystkich Comic Sans :D

  • <span style="font-family:cursive">Nagłówek</span>Nagłówek
  • <span style="font-family:'Comic Sans MS'">Nagłówek</span>Nagłówek

fantasyEdytuj

Czyli czcionka, której w ogóle nie używam. Ale jak patrzę, to wychodzi na to, że dobrze nadaje się na nagłówek. I choć u mnie Cottonwood wygląda jak serif, to może u kogoś wyświetla się inaczej.

  • <span style="font-family:fantasy">Nagłówek</span>Nagłówek
  • <span style="font-family:Cottonwood">Nagłówek</span>Nagłówek

Inne czcionkiEdytuj

Bo to nie tak, że dostępne czcionki kończą się na tych wyżej. Parę czcionek, które sobie cenię i są dostępne na tej wiki, to:

  • <span style="font-family:'Segoe Print'">Nagłówek</span>Nagłówek
  • <span style="font-family:'Segoe Script'">Nagłówek</span>Nagłówek
  • <span style="font-family:Lobster">Nagłówek</span>Nagłówek
  • <span style="font-family:'Indie Flower'">Nagłówek</span>Nagłówek
  • <span style="font-family:Zeyada">Nagłówek</span>Nagłówek
  • <span style="font-family:Cookie">Nagłówek</span>Nagłówek

Problem jest taki, że parę z nich nie toleruje polskich znaków.


PodsumowanieEdytuj

Wyszło tego sporo, więc żeby Was nie zanudzić, resztę umieszczę w kolejnej części. Tymczasem pokażę Wam, co jesteście w stanie osiągnąć z wiedzą, którą już posiadacie. Poniższy przykład ilustruje, jak można połączyć wiedzę z wyżej.

<span style="color:#f05; font-family:lobster; font-size:30px">Nagłówek</span>

Nagłówek

Z takim nagłówkiem już da się coś zrobić :D I jak widzicie na przykładzie wyżej, nie musicie dodawać nowego elementu span, żeby dodać nową cechę. Wystarczy, że będziecie wymieniać wszystkie cechy po średniku.

<span style="cecha1; cecha2; cecha3">Nagłówek</span>

Należy tylko pamiętać o cudzysłowach obejmujących wszystkie cechy, jakie nadajemy tekstowi. No, ja już kończę. Do zobaczenia w następnym numerze!