Pomoc:HTML

HTML (HyperText Markup Language) to język używany na stronach internetowych do formatowania układu i treści. Strony wiki na Fandomie korzystają głównie z wikitekstu zamiast HTML, dlatego w artykułach można używać jedynie ograniczonego zestawu znaczników HTML.

HTML (oraz wikitekst) można pisać i edytować podczas korzystania z edytora źródłowego

Znaczniki HTML w wikitekście

Wspierane znaczniki

Poniższe znaczniki HTML mogą być używane w artykułach:

  • <abbr>
  • <b>[1]
  • <bdi>
  • <bdo>
  • <blockquote>
  • <br />
  • <caption>
  • <cite>
  • <code>
  • <data>
  • <dd>[1]
  • <del>
  • <dfn>
  • <div>
  • <dl>[1]
  • <dt>[1]
  • <em>[1]
  • <h1>[1]
  • <h2>[1]
  • <h3>[1]
  • <h4>[1]
  • <h5>[1]
  • <h6>[1]
  • <hr>[1]
  • <i>[1]
  • <ins>
  • <kbd>
  • <li>[1]
  • <mark>
  • <ol>[1]
  • <p>[1]
  • <pre>[2]
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <table>[1]
  • <td>[1]
  • <th>[1]
  • <time>
  • <tr>[1]
  • <u>
  • <ul>[1]
  • <var>
  • <wbr />
  • <!-- -->
  1. ↑ 1,00 1,01 1,02 1,03 1,04 1,05 1,06 1,07 1,08 1,09 1,10 1,11 1,12 1,13 1,14 1,15 1,16 1,17 1,18 1,19 1,20 Znacznik może być zastąpiony wikitekście, który zwykle jest wygodniejszy. Zobacz #Uwagi dotyczące użycia.
  2. ↑ <pre> to tak naprawdę znacznik parsera. Dodaje efekt HTML, ale jednocześnie wyłącza interpretację wikitekstu w środku (poza encjami HTML), podobnie jak <nowiki>.

Przestarzałe znaczniki

Przestarzałe znaczniki wciąż działają, jednak w przyszłych wersjach przeglądarek lub oprogramowania mogą zostać usunięte.

Przestarzały znacznik Zalecana alternatywa Przykład Efekt
<big> <span style="font-size: larger;"> <span style="font-size: larger;">Duży tekst</span> Duży tekst
<center> <div style="text-align: center;"> <div style="text-align: center;">Tekst wyśrodkowany</div>
Tekst wyśrodkowany
<font color="x" size="y" face="z"> <span style="color: x; font-size: y; font-family: z;"> <span style="color: red;">Czerwony alarm!</span> Czerwony alarm!
<span style="font-family: Times New Roman;">To jest Times New Roman</span> To jest Times New Roman
<strike> del (do oznaczania zmian) <del>Tak</del> Nie Tak Nie
<s> (do przekreślonych treści w innych kontekstach) Miecz dwuręczny <s>$44.99</s> '''Promocja! $24.99!''' Miecz dwuręczny $44.99 Promocja! $24.99!
<tt> <code> (zalecane dla kodu źródłowego) użyj <code>&nbsp;</code> dla twardej spacji użyj &nbsp; dla twardej spacji
<kbd> (zalecane dla wpisywanych danych) <kbd>mypasswd</kbd> mypasswd
<var> (zalecane dla zmiennych) <var>wiek</var>=65 wiek=65
<samp> (zalecane dla komunikatów systemowych) <samp>Niepoprawne hasło. Spróbuj ponownie.</samp> Niepoprawne hasło. Spróbuj ponownie.
Wygląd zbliżony, bez specjalnego znaczenia <span style="font-family: monospace;">Tekst o stałej szerokości</span> Tekst o stałej szerokości
Poziome wyrównanie w komórkach tabel: align=X
gdzie X to "left", "center" lub "right" 		style="text-align: X;" style="text-align: right;" | tekst wyrównany do prawej tekst wyrównany do prawej
Pionowe wyrównanie w komórkach tabel: valign=X
gdzie X to "top", "middle" lub "bottom" 		style="vertical-align: X;" style="vertical-align: top;" | tekst wyrównany do góry tekst wyrównany do góry
Kolor tła komórki tabeli: bgcolor=X style="background-color: X;" style="background-color: pink" | różowe tło różowe tło

Wstawianie symboli

Znaki specjalne i symbole, których nie masz na klawiaturze, można wstawić za pomocą specjalnych sekwencji znaków – tzw. encji HTML. Przykład: wpisanie &rarr; wyświetli symbol strzałki w prawo →, a sekwencja &mdash; wyświetli tzw. pauzę — czyli em dash —.

Najedź kursorem na dowolny symbol w tabeli, aby zobaczyć jego nazwę (czyli kod encji HTML). Niektóre znaki mogą być niewidoczne, jeśli czcionka ich nie obsługuje.

Encje symboli HTML
Á á Â â ´ Æ æ À à ℵ Α α & ∧ ∠ Å å ≈ Ã ã Ä ä „ Β β ¦ • ∩ Ç ç ¸ ¢
Χ χ ˆ ♣ ≅ © ↵ ∪ ¤ † ‡ ↓ ⇓ ° Δ δ ♦ ÷ É é Ê ê È è ∅     Ε ε ≡ Η η
Ð ð Ë ë € ∃ ƒ ∀ ½ ¼ ¾ ⁄ Γ γ ≥ > ↔ ⇔ ♥ … Í í Î î ¡ Ì ì ℑ ∞ ∫ Ι ι
¿ ∈ Ï ï Κ κ Λ λ ⟨ « ← ⇐ ⌈ “ ≤ ⌊ ∗ ◊ ‎ ‹ ‘ < ¯ — µ · − Μ μ ∇   –
≠ ∋ ¬ ∉ ⊄ Ñ ñ Ν ν Ó ó Ô ô Œ œ Ò ò ‾ Ω ω Ο ο ⊕ ∨ ª º Ø ø Õ õ ⊗ Ö
ö ∂ ‰ ⊥ Φ φ Π π ϖ ± £ ′ ″ ∏ ∝ Ψ ψ " √ ⟩ » → ⇒ ⌉ ” ℜ ® ⌋ Ρ ρ ‏
› ’ ‚ Š š ⋅ § ­ Σ σ ς ∼ ♠ ⊂ ⊆ ∑ ⊃ ¹ ² ³ ⊇ ß Τ τ ∴ Θ θ ϑ   Þ þ ˜
× ™ Ú ú ↑ ⇑ Û û Ù ù ¨ ϒ Υ υ Ü ü ℘ Ξ ξ Ý ý ¥ ÿ Ÿ Ζ ζ ‍ ‌
Opis Fraza Wynik
Symbol praw autorskich &copy; ©
Grecka litera delta &delta; δ
Symbol waluty euro &euro; €

Pełną listę encji HTML znajdziesz na Wikipedii: Lista encji HTML.

MediaWiki obsługuje również dwie dodatkowe formy: &רלמ; i &رلم; – obie działają tak samo jak &rlm;, czyli wstawiają znacznik tekst od prawej do lewej.

Wyświetlanie tagów i encji jako tekst

Aby wyświetlić sam kod HTML, możesz to zrobić na dwa sposoby:

  • zastępując wybrane znaki (&, <, etc.) encjami HTML:
    • &amp;euro;  → &euro;
    • <span style="color: red; text-decoration: line-through;"> Błąd do poprawy</span>  → Błąd do poprawy
    • &lt;span style="color: red; text-decoration: line-through;">Błąd do poprawy</span>  → <span style="color: red; text-decoration: line-through;">Błąd do poprawy</span>
  • używając znacznika <nowiki />:
    • <<nowiki />pre>  → <pre>

Użycie znacznika <nowiki /> w przypadku encji HTML nie przyniesie oczekiwanego efektu. Aby wyświetlić encję jako tekst, zastąp znak & za pomocą &amp;.

  • &<nowiki />amp;  → &
  • &amp;nbsp;  → &nbsp;

Aby wyświetlić encję jako tekst, zastąp znak & jego zapisem &amp;. Przykład: wpisanie &amp;nbsp; da w efekcie &nbsp;.

Uwagi dotyczące użycia

Używaj HTML z rozwagą
W miarę możliwości zalecamy korzystanie z wikitekstu, ponieważ HTML może utrudniać czytanie kodu w edytorze, zwłaszcza początkującym. Bardziej skomplikowane fragmenty HTML i CSS lepiej umieszczać w szablonach.
Łącz HTML z CSS
Style można umieszczać w stronach CSS wiki (np. używając class="nazwa-klasy"). HTML obsługuje zarówno klasy CSS, jak i stylowanie inline (np. style="color: pink;"). Stylowanie działa także z wieloma elementami wikitekstu, szczególnie z tabelami, wierszami i komórkami.
Należy jednak pamiętać, że nadmierne używanie stylów inline nie jest zalecane, ponieważ może pogarszać wygląd strony na urządzeniach mobilnych.

Zobacz też

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.