Znaki specjalne HTML – tabela

Znaki specjalne HTML (ang. Specjal Characters HTML) są zestawem znaków, które mają specjalne przeznaczenie w języku znaczników HTML i trzeba je zakodować, żeby mogły się prawidłowo wyświetlić w przeglądarce internetowej. Użyte w kodzie, są interpretowane przez przeglądarki jako jego część, a nie sama treść. Aby uch użyć, należy zastosować tzw. encje, które odpowiadają konkretnym znakom specjalnym.

Ma to taką postać:

& (ampersand) – kodowany jako &
© (symbol copyright) – kodowany jako ©
® (symbol zarejestrowanego znaku towarowego) – kodowany jako ®
€ (euro) – kodowany jako €
£ (funt) – kodowany jako £

I tak, na przykład znaki <, > czy & są elementami języka HTML, a konkretniej większości tagów typu <p> czy <div>. Jeśli wpiszesz taki tag, przeglądarka zinterpretuje go jako element HTMLa. Natomiast jeśli chciałbyś, żeby wyświetliło się to dokładnie tak jak wygląda, np. aby to był listing kodu widoczny dla wszystkich, należy właśnie użyć encji takich znaków.

Poniżej tabela z pełną listą znaków specjalnych w HTML:



Znak w UnicodeEncja (HTML) Opis znakuWynik w przeglądarce
&#160; &nbsp; twarda spacja  
&#169; &copy; znak praw autorskich – Copyright ©
&#174; &reg; zastrzeżony znak towarowy ®
  &trade; znak handlowy ™
&#34; &quot; cudzysłów "
&#38; &amp; znak and &
&#60; &lt; znak mniejszości <
&#62; &gt; znak większości >
&#8804; &le; mniejsze lub równe ≤
&#8805; &ge; większe lub równe ≥
&#8801; &equiv; identyczne ≡
&#8800; &ne; różne ≠
&#8743; &and; operator logiczny i ∧
&#8744; &or; operator logiczny lub ∨
&#8745; &cap; część wspólna iloczyn ∩
&#8746; &cup; połączenie suma ∪
&#8834; &sub; jest podzbiorem ⊂
&#8835; &sup; jest zbiorem nadrzędnym dla ⊃
&#8836; &nsub; nie jest podzbiorem ⊄
&#8838; &sube; jest podzbiorem lub równy ⊆
&#8839; &supe; jest zbiorem nadrzędnym lub równy ⊇
&#8756; &there4; z tego wynika ∴
&#8773; &cong; w przybliżeniu równe ≅
&#8776; &asymp; prawie równe ≈
&#8853; &oplus; bezpośrednia suma ⊕
&#8855; &otimes; iloczyn wektorowy ⊗
&#8869; &perp; jest prostopadły do ⊥
&#167; &sect; paragraf §
&#8764; &sim; tylda ∼
&#215; &times; znak iloczynu ×
&#247; &divide; znak ilorazu ÷
&#710; &circ; akcent cyrkumfleksowy – daszek ˆ
&#732; &tilde; tylda ˜
&#8211; &ndash; półpauza –
&#8212; &mdash; pauza – myślnik —
&#8216; &lsquo; lewy apostrof drukarski ‘
&#8217; &rsquo; prawy apostrof drukarski ’
&#8218; &sbquo; przecinek ‚
&#8222; &bdquo; lewy cudzysłów apostrofowy (polski) „
&#8221; &rdquo; prawy cudzysłów apostrofowy (polski) ”
&#8220; &ldquo; prawy cudzysłów apostrofowy (niemiecki) “
&#8224; &dagger; znak krzyżyka †
&#8225; &Dagger; znak podwójnego krzyżyka ‡
&#8240; &permil; promil ‰
&#8734; &infin; nieskończoność ∞
&#8730; &radic; pierwiastek kwadratowy √
&#8230; &hellip; wielokropek …
&#8747; &int; całka ∫
&#8364; &euro; znak Euro €
&#916; &Delta; delta Δ
&#945; &alpha; alpha α
&#946; &beta; mała litera beta β
&#960; &pi; litera pi π
&#937; &Omega; wielka litera omega Ω
&#176; &deg; znak stopnia °
&#185; &sup1; 1 w indeksie górnym ¹
&#178; &sup2; 2 w indeksie górnym ²
&#179; &sup3; 3 w indeksie górnym ³
&#161; &iexcl; odwrócony wykrzyknik ¡
&#162; &cent; cent ¢
&#163; &pound; funt szterling £
&#164; &curren; ogólny symbol waluty ¤
&#165; &yen; jen ¥
&#166; &brvbar; przerwana linia pionowa ¦
&#168; &uml; umlaut lub diaereza ¨
&#170; &ordf; liczebnik porządkowy żeński ª
&#171; &laquo; lewy cudzysłów ostrokątny «
&#187; &raquo; prawy cudzysłów ostrokątny »
&#172; &not; znak negacji ¬
&#175; &macr; kreska górna ¯
&#177; &plusmn; plus-minus ±
&#180; &acute; akcent silny ´
&#181; &micro; grecka litera mi µ
&#182; &para; znak akapitu
&#183; &middot; punkt Środkowy ·
&#184; &cedil; cedilla ¸
&#8592; &larr; strzałka w lewo ←
&#8593; &uarr; strzałka w górę ↑
&#8594; &rarr; strzałka w prawo →
&#8595; &darr; strzałka w dół ↓
&#8596; &harr; strzałka lewo prawo ↔
&#8629; &crarr; strzałka enter ↵
&#8656; &lArr; podwójna strzałka w lewo ⇐
&#8657; &uArr; podwójna strzałka w górę ⇑
&#8658; &rArr; podwójna strzałka w prawo ⇒
&#8659; &dArr; podwójna strzałka w dół ⇓
&#8660; &hArr; podwójna strzałka lewo prawo ⇔
&#9674; &loz; romb ◊
&#9824; &spades; pik ♠
&#9827; &clubs; trefl ♣
&#9829; &hearts; kier ♥
&#9830; &diams; karo ♦
&#188; &frac14; ułamek jedna czwarta ¼
&#189; &frac12; ułamek jedna druga ½
&#190; &frac34; ułamek trzy czwarte ¾
&#191; &iquest; odwrócony znak zapytania ¿
&#192; &Agrave; duże A z akcentem słabym À
&#193; &Aacute; duże A z akcentem silnym Á
&#194; &Acirc; duże A z daszkiem Â
&#195; &Atilde; duże A z tyldą Ã
&#196; &Auml; duże A z dierezą Ä
&#197; &Aring; duże A z kółkiem Å
&#198; &AElig; ligatura AE &AElig
&#199; &Ccedil; duże C cedilla Ç
&#200; &Egrave; duże E z akcentem słabym È
&#201; &Eacute; duże E z akcentem mocnym É
&#202; &Ecirc; duże E z daszkiem Ê
&#203; &Euml; duże E z umlautem Ë
&#204; &Igrave; duże I z akcentem słabym Ì
&#205; &Iacute; duże I z akcentem mocnym Í
&#206; &Icirc; duże I z daszkiem Î
&#207; &Iuml; duże I z umlautem Ï
&#208; &ETH; duże islandzkie eth Ð
&#209; &Ntilde; duże N z tyldą Ñ
&#210; &Ograve; duże O z akcentem słabym Ò
&#211; &Oacute duże O z akcentem mocnym Ó
&#212; &Ocirc; duże O z daszkiem Ô
&#213; &Otilde; duże O z tyldą Õ
&#214; &Ouml; duże O z umlautem Ö
&#216; &Oslash; duże O z przekreśleniem Ø
&#217; &Ugrave duże U z akcentem słabym Ù
&#218; &Uacute; duże U z akcentem mocnym Ú
&#219; &Ucirc; duże U z daszkiem Û
&#220; &Uuml; duże U z umlautem Ü
&#221; &Yacute; duże Y z akcentem mocnym Ý
&#222; &THORN; duże islandzkie thorn Þ
&#223; &szlig; niemiecka ligatura sharfess ß
&#224; &agrave; małe a z akcentem słabym à
&#225; &aacute; małe a z akcentem mocnym á
&#226; &acirc; małe a z daszkiem â
&#227; &atilde; małe a z tyldą ã
&#228; &auml małe a z umlautem ä
&#229; &aring; małe a z kółkiem å
&#230; &aelig; mała ligatura ae &aelig
&#231; &ccedil; małe c z cedillą ç
&#232; &egrave; małe e z akcentem słabym è
&#233; &eacute; małe e z akcentem mocnym é
&#234; &ecirc; małe e z daszkiem ê
&#235; &euml; małe e z umlautem ë
&#236; &igrave; małe i z akcentem słabym ì
&#237; &iacute; małe i z akcentem mocnym í
&#238; &icirc; małe i z daszkiem î
&#239; &iuml; małe i z umlautem ï
&#240; &eth; małe islandzkie eth ð
&#241; &ntilde; małe n z tyldą ñ
&#242; &ograve; małe o z akcentem słabym ò
&#243; &oacute; małe o z akcentem mocnym ó
&#244; &ocirc; małe o z daszkiem ô
&#245; &otilde; małe o z tyldą õ
&#246; &ouml; małe o z umlautem ö
&#248; &oslash; małe o z przekreśleniem ø
&#249; &ugrave; małe u z akcentem słabym ù
&#250; &uacute; małe u z akcentem mocnym ú
&#251; &ucirc; małe u z daszkiem û
&#252; &uuml; małe u z umlautem ü
&#253; &yacute; małe y z akcentem słabym ý
&#254; &thorn; małe islandzkie thorn þ
&#255; &yuml; małe y z umlautem ÿ
&#338; &OElig; duża łacińska ligatura OE Œ
&#339; &oelig; mała łacińska ligatura oe œ
&#376; &Yuml; duże Y z umlautem Ÿ

W tabeli (pierwsza kolumna) umieściłem również kod każdego znaku w Unicode. Jest to standard umożliwiający reprezentowanie tekstu we wszystkich systemach komputerowych, niezależnie od alfabetu czy języka. Każdy znak ma przypisany unikalny kod numeryczny.


Paleta kolorów HTML

W tym artykule umieszczam ciekawą ściągawkę, która przypadnie do gustu każdemu twórcy stron internetowych. A mianowicie paletę kolorów z kodami do użycia w HTMLu lub CSS. Jak wiadomo kolory są nieodzownym elementem stron www i definiuje się je wszędzie, od czcionek po tło witryny. Kolory te, można dobierać na różne sposoby. Jeśli chodzi o podstawowe kolory można skorzystać z predefinowanych nazw – np. red|blue|green... Natomiast jeśli potrzebujesz używać innych barw, najwygodniej będzie skorzystać z gotowej ściągawki. Poniżej udostępniam wzornik tych najbardziej popularnych barw. Wśród nich poza odcieniami podstawowych kolorów, znajduje się również wiele wariacji kolorów m.in szeroka gama odcieni szarości.

Poza wyglądem koloru, obok z prawej strony znajduje się zapis szesnastkowy (HEX) poprzedzony znakiem # (hash), oraz dla ułatwienia dalej podany jest również zapis w formacie RGB (Red-Green-Blue czerwony-zielony-niebieski). Który rodzaj zapisu użyjesz w swoim projekcie, zależy tylko od ciebie. W HTML czy CSS dozwolone jest definiowanie kolorów (czcionek, tła czy innych elementów), zarówno w zapisie HEX jak i RGB. Oczywiście są to dwa podstawowe sposoby używane przez webmasterów, bo innych systemów jest jeszcze więcej.

Na przykład jeśli chcesz, aby czcionka tekstu na stronie miała kolor czerwony możesz użyć takiego zapisu:

<font color="red">tekst</font>
<font color="#FF0000">tekst</font>
<font color="rgb(128, 128, 0)">tekst</font>

Każdy z trzech zapisów da ten sam efekt, zmieni napis „tekst” na kolor czerwony.

Paleta kolorów:

  #660033 | rgb(102, 0, 51)
  #990033 | rgb(153, 0, 51)
  #ff3366 | rgb(255, 51, 102)
  #cc0033 | rgb(204, 0, 51)
  #ff0033 | rgb(255, 0, 51)
  #ff9999 | rgb(255, 153, 153)
  #cc3366 | rgb(204, 51, 102)
  #ffccff | rgb(255, 204, 255)
  #cc3399 | rgb(204, 51, 153)
  #993366 | rgb(153, 51, 102)
  #cc3399 | rgb(204, 51, 153)
  #ff99cc | rgb(255, 153, 204)
  #ff66cc | rgb(255, 102, 204)
  #ff99ff | rgb(255, 153, 255)
  #ff6699 | rgb(255, 102, 153)
  #cc0066 | rgb(204, 0, 102)
  #ff0066 | rgb(255, 0, 102)
  #ff3399 | rgb(255, 51, 153)
  #ff0099 | rgb(255, 0, 153)
  #ff33cc | rgb(255, 51, 204)
  #ff00cc | rgb(255, 0, 204)
  #ff66ff | rgb(255, 102, 255)
  #ff33ff | rgb(255, 51, 255)
  #ff00ff | rgb(255, 0, 255)
  #cc0099 | rgb(204, 0, 153)
  #990066 | rgb(153, 0, 102)
  #cc66cc | rgb(204, 102, 204)
  #cc33cc | rgb(204, 51, 204)
  #cc99ff | rgb(204, 153, 255)
  #cc66ff | rgb(204, 102, 255)
  #cc33ff | rgb(204, 51, 255)
  #993399 | rgb(153, 51, 153)
  #cc00cc | rgb(204, 0, 204)
  #cc00ff | rgb(204, 0, 255)
  #9900cc | rgb(153, 0, 204)
  #990099 | rgb(153, 0, 153)
  #cc99cc | rgb(204, 153, 204)
  #996699 | rgb(153, 102, 153)
  #663366 | rgb(102, 51, 102)
  #660099 | rgb(102, 0, 153)
  #9933cc | rgb(153, 51, 204)
  #660066 | rgb(102, 0, 102)
  #9900ff | rgb(153, 0, 255)
  #9966cc | rgb(153, 102, 204)
  #330033 | rgb(51, 0, 51)
  #663399 | rgb(102, 51, 153)
  #6633cc | rgb(102, 51, 204)
  #6600cc | rgb(102, 0, 204)
  #9966ff | rgb(153, 102, 255)
  #330066 | rgb(51, 0, 102)
  #6600ff | rgb(102, 0, 255)
  #6633ff | rgb(102, 51, 255)
  #ccccff | rgb(204, 204, 255)
  #9999ff | rgb(153, 153, 255)
  #9999cc | rgb(153, 153, 204)
  #6666cc | rgb(102, 102, 204)
  #6666ff | rgb(102, 102, 255)
  #666699 | rgb(102, 102, 153)
  #333366 | rgb(51, 51, 102)
  #333399 | rgb(51, 51, 153)
  #330099 | rgb(51, 0, 153)
  #3300cc | rgb(51, 0, 204)
  #3300ff | rgb(51, 0, 255)
  #3333ff | rgb(51, 51, 255)
  #3333cc | rgb(51, 51, 204)
  #0066ff | rgb(0, 102, 255)
  #0033ff | rgb(0, 51, 255)
  #3366ff | rgb(51, 102, 255)
  #3366cc | rgb(51, 102, 204)
  #000066 | rgb(0, 0, 102)
  #000033 | rgb(0, 0, 51)
  #0000ff | rgb(0, 0, 255)
  #000099 | rgb(0, 0, 153)
  #0033cc | rgb(0, 51, 204)
  #0000cc | rgb(0, 0, 204)
  #336699 | rgb(51, 102, 153)
  #0066cc | rgb(0, 102, 204)
  #99ccff | rgb(153, 204, 255)
  #6699ff | rgb(102, 153, 255)
  #003366 | rgb(0, 51, 102)
  #6699cc | rgb(102, 153, 204)
  #006699 | rgb(0, 102, 153)
  #3399cc | rgb(51, 153, 204)
  #0099cc | rgb(0, 153, 204)
  #83b4d8 | rgb(131, 180, 216)
  #66ccff | rgb(102, 204, 255)
  #3399ff | rgb(51, 153, 255)
  #003399 | rgb(0, 51, 153)
  #0099ff | rgb(0, 153, 255)
  #33ccff | rgb(51, 204, 255)
  #00ccff | rgb(0, 204, 255)
  #e5f3ff | rgb(229, 243, 255)
  #99ffff | rgb(153, 255, 255)
  #66ffff | rgb(102, 255, 255)
  #33ffff | rgb(51, 255, 255)
  #00ffff | rgb(0, 255, 255)
  #00cccc | rgb(0, 204, 204)
  #009999 | rgb(0, 153, 153)
  #669999 | rgb(102, 153, 153)
  #99cccc | rgb(153, 204, 204)
  #ccffff | rgb(204, 255, 255)
  #33cccc | rgb(51, 204, 204)
  #66cccc | rgb(102, 204, 204)
  #339999 | rgb(51, 153, 153)
  #336666 | rgb(51, 102, 102)
  #006666 | rgb(0, 102, 102)
  #003333 | rgb(0, 51, 51)
  #00ffcc | rgb(0, 255, 204)
  #33ffcc | rgb(51, 255, 204)
  #33cc99 | rgb(51, 204, 153)
  #00cc99 | rgb(0, 204, 153)
  #66ffcc | rgb(102, 255, 204)
  #99ffcc | rgb(153, 255, 204)
  #00ff99 | rgb(0, 255, 153)
  #339966 | rgb(51, 153, 102)
  #006633 | rgb(0, 102, 51)
  #336633 | rgb(51, 102, 51)
  #669966 | rgb(102, 153, 102)
  #66cc66 | rgb(102, 204, 102)
  #99ff99 | rgb(153, 255, 153)
  #66ff66 | rgb(102, 255, 102)
  #339933 | rgb(51, 153, 51)
  #99cc99 | rgb(153, 204, 153)
  #66ff99 | rgb(102, 255, 153)
  #33ff99 | rgb(51, 255, 153)
  #33cc66 | rgb(51, 204, 102)
  #00cc66 | rgb(0, 204, 102)
  #66cc99 | rgb(102, 204, 153)
  #009966 | rgb(0, 153, 102)
  #009933 | rgb(0, 153, 51)
  #33ff66 | rgb(51, 255, 102)
  #00ff66 | rgb(0, 255, 102)
  #ccffcc | rgb(204, 255, 204)
  #ccff99 | rgb(204, 255, 153)
  #99ff66 | rgb(153, 255, 102)
  #00ff33 | rgb(0, 255, 51)
  #33ff33 | rgb(51, 255, 51)
  #00cc33 | rgb(0, 204, 51)
  #33cc33 | rgb(51, 204, 51)
  #66ff33 | rgb(102, 255, 51)
  #00ff00 | rgb(0, 255, 0)
  #66cc33 | rgb(102, 204, 51)
  #006600 | rgb(0, 102, 0)
  #003300 | rgb(0, 51, 0)
  #009900 | rgb(0, 153, 0)
  #33ff00 | rgb(51, 255, 0)
  #66ff00 | rgb(102, 255, 0)
  #99ff00 | rgb(153, 255, 0)
  #66cc00 | rgb(102, 204, 0)
  #00cc00 | rgb(0, 204, 0)
  #33cc00 | rgb(51, 204, 0)
  #339900 | rgb(51, 153, 0)
  #99cc66 | rgb(153, 204, 102)
  #669933 | rgb(102, 153, 51)
  #99cc33 | rgb(153, 204, 51)
  #336600 | rgb(51, 102, 0)
  #669900 | rgb(102, 153, 0)
  #99cc00 | rgb(153, 204, 0)
  #ccff66 | rgb(204, 255, 102)
  #ccff33 | rgb(204, 255, 51)
  #ccff00 | rgb(204, 255, 0)
  #999900 | rgb(153, 153, 0)
  #cccc00 | rgb(204, 204, 0)
  #cccc33 | rgb(204, 204, 51)
  #333300 | rgb(51, 51, 0)
  #666600 | rgb(102, 102, 0)
  #999933 | rgb(153, 153, 51)
  #cccc66 | rgb(204, 204, 102)
  #666633 | rgb(102, 102, 51)
  #999966 | rgb(153, 153, 102)
  #cccc99 | rgb(204, 204, 153)
  #ffffcc | rgb(255, 255, 204)
  #ffff99 | rgb(255, 255, 153)
  #ffff33 | rgb(255, 255, 51)
  #ffff00 | rgb(255, 255, 0)
  #ffcc00 | rgb(255, 204, 0)
  #ffcc66 | rgb(255, 204, 102)
  #ffcc33 | rgb(255, 204, 51)
  #cc9933 | rgb(204, 153, 51)
  #996600 | rgb(153, 102, 0)
  #cc9900 | rgb(204, 153, 0)
  #ff9900 | rgb(255, 153, 0)
  #cc6600 | rgb(204, 102, 0)
  #993300 | rgb(153, 51, 0)
  #cc6633 | rgb(204, 102, 51)
  #663300 | rgb(102, 51, 0)
  #ff9966 | rgb(255, 153, 102)
  #ff6633 | rgb(255, 102, 51)
  #ff9933 | rgb(255, 153, 51)
  #ff6600 | rgb(255, 102, 0)
  #cc3300 | rgb(204, 51, 0)
  #996633 | rgb(153, 102, 51)
  #330000 | rgb(51, 0, 0)
  #663333 | rgb(102, 51, 51)
  #996666 | rgb(153, 102, 102)
  #cc9999 | rgb(204, 153, 153)
  #993333 | rgb(153, 51, 51)
  #cc6666 | rgb(204, 102, 102)
  #ffcccc | rgb(255, 204, 204)
  #ff3333 | rgb(255, 51, 51)
  #cc3333 | rgb(204, 51, 51)
  #ff6666 | rgb(255, 102, 102)
  #660000 | rgb(102, 0, 0)
  #990000 | rgb(153, 0, 0)
  #cc0000 | rgb(204, 0, 0)
  #ff0000 | rgb(255, 0, 0)
  #ff3300 | rgb(255, 51, 0)
  #cc9966 | rgb(204, 153, 102)
  #ffcc99 | rgb(255, 204, 153)
  #ff0000 | rgb(255, 0, 0)
  #00ff00 | rgb(0, 255, 0)
  #0000ff | rgb(0, 0, 255)
  #ff00ff | rgb(255, 0, 255)
  #00ffff | rgb(0, 255, 255)
  #70db93 | rgb(112, 219, 147)
  #5c3317 | rgb(92, 51, 23)
  #9f5f9f | rgb(159, 95, 159)
  #b5a642 | rgb(181, 166, 66)
  #d9d919 | rgb(217, 217, 25)
  #a62a2a | rgb(166, 42, 42)
  #8c7853 | rgb(140, 120, 83)
  #a67d3d | rgb(166, 125, 61)
  #5f9f9f | rgb(95, 159, 159)
  #5c4033 | rgb(92, 64, 51)
  #2f4f2f | rgb(47, 79, 47)
  #4A766E | rgb(74, 118, 110)
  #4F4F2f | rgb(79, 79, 47)
  #9932CD | rgb(153, 50, 205)
  #871F78 | rgb(135, 31, 120)
  #6b238E | rgb(107, 35, 142)
  #2F4F4F | rgb(47, 79, 79)
  #97694F | rgb(151, 105, 79)
  #7093DB | rgb(112, 147, 219)
  #855E42 | rgb(133, 94, 66)
  #545454 | rgb(84, 84, 84)
  #856363 | rgb(133, 99, 99)
  #D19275 | rgb(209, 146, 117)
  #8E2323 | rgb(142, 35, 35)
  #F5CCB0 | rgb(245, 204, 176)
  #238E23 | rgb(35, 142, 35)
  #CD7F32 | rgb(205, 127, 50)
  #DBDB70 | rgb(219, 219, 112)
  #C0C0C0 | rgb(192, 192, 192)
  #527F76 | rgb(82, 127, 118)
  #93DB70 | rgb(147, 219, 112)
  #215E21 | rgb(33, 94, 33)
  #4E2F2F | rgb(78, 47, 47)
  #9F9F5F | rgb(78, 47, 47)
  #C0D9D9 | rgb(192, 217, 217)
  #A8A8A8 | rgb(168, 168, 168)
  #8F8FBD | rgb(143, 143, 189)
  #E9C2A6 | rgb(233, 194, 166)
  #32CD32 | rgb(50, 205, 50)
  #E47833 | rgb(228, 120, 51)
  #8E236B | rgb(142, 35, 107)
  #32CD99 | rgb(50, 205, 153)
  #3232CD | rgb(50, 50, 205)
  #6B8E23 | rgb(107, 142, 35)
  #EAEAAE | rgb(234, 234, 174)
  #9370DB | rgb(147, 112, 219)
  #DB7093 | rgb(219, 112, 147)
  #A68064 | rgb(166, 128, 100)
  #2F2F4F | rgb(47, 47, 79)
  #23238E | rgb(35, 35, 142)
  #4D4DFF | rgb(77, 77, 255)
  #FF6EC7 | rgb(255, 110, 199)
  #00009C | rgb(0, 0, 156)
  #EBC79E | rgb(235, 199, 158)
  #CFB53B | rgb(207, 181, 59)
  #FF7F00 | rgb(255, 127, 0)
  #FF2400 | rgb(255, 36, 0)
  #DB70DB | rgb(219, 112, 219)
  #8FBC8F | rgb(143, 188, 143)
  #BC8F8F | rgb(188, 143, 143)
  #EAADEA | rgb(234, 173, 234)
  #D9D9F3 | rgb(217, 217, 243)
  #5959AB | rgb(89, 89, 171)
  #4F2F4F | rgb(79, 47, 79)
  #6F4242 | rgb(111, 66, 66)
  #8C1717 | rgb(140, 23, 23)
  #6B4226 | rgb(107, 66, 38)
  #8E6B23 | rgb(142, 107, 35)
  #E6E8FA | rgb(230, 232, 250)
  #3299CC | rgb(50, 153, 204)
  #007FFF | rgb(0, 127, 255)
  #FF1CAE | rgb(255, 28, 174)
  #00FF7F | rgb(0, 255, 127)
  #236B8E | rgb(35, 107, 142)
  #38B0DE | rgb(56, 176, 222)
  #DB9370 | rgb(219, 147, 112)
  #D8BFD8 | rgb(216, 191, 216)
  #ADEAEA | rgb(173, 234, 234)
  #fbfbfb | rgb(251, 251, 251)
  #f9f9f9 | rgb(249, 249, 249)
  #f6f6f6 | rgb(246, 246, 246)
  #f3f3f3 | rgb(243, 243, 243)
  #f1f1f1 | rgb(241, 241, 241)
  #efefef | rgb(239, 239, 239
  #ececec | rgb(236, 236, 236)
  #e9e9e9 | rgb(233, 233, 233)
  #e6e6e6 | rgb(230, 230, 230)
  #e3e3e3 | rgb(227, 227, 227)
  #e0e0e0 | rgb(224, 224, 224)
  #dedede | rgb(222, 222, 222)
  #dcdcdc | rgb(220, 220, 220)
  #dadada | rgb(218, 218, 218)
  #d7d7d7 | rgb(215, 215, 215)
  #d5d5d5 | rgb(213, 213, 213)
  #d2d2d2 | rgb(210, 210, 210)
  #cfcfcf | rgb(207, 207, 207)
  #cdcdcd | rgb(205, 205, 205)
  #cbcbcb | rgb(203, 203, 203)
  #c7c7c7 | rgb(199, 199, 199)
  #c4c4c4 | rgb(196, 196, 196)
  #c2c2c2 | rgb(194, 194, 194)
  #c0c0c0 | rgb(192, 192, 192)
  #bdbdbd | rgb(189, 189, 189)
  #bbbbbb | rgb(187, 187, 187)
  #b8b8b8 | rgb(184, 184, 184)
  #b5b5b5 | rgb(181, 181, 181)
  #b2b2b2 | rgb(178, 178, 178)
  #afafaf | rgb(175, 175, 175)
  #adadad | rgb(173, 173, 173)
  #aaaaaa | rgb(170, 170, 170)
  #a7a7a7 | rgb(167, 167, 167)
  #a4a4a4 | rgb(164, 164, 164)
  #a1a1a1 | rgb(161, 161, 161)
  #9e9e9e | rgb(158, 158, 158)
  #9c9c9c | rgb(156, 156, 156)
  #999999 | rgb(153, 153, 153)
  #969696 | rgb(150, 150, 150)
  #939393 | rgb(147, 147, 147)
  #909090 | rgb(144, 144, 144)
  #8d8d8d | rgb(141, 141, 141)
  #8a8a8a | rgb(138, 138, 138)
  #878787 | rgb(135, 135, 135)
  #848484 | rgb(132, 132, 132)
  #818181 | rgb(129, 129, 129)
  #7e7e7e | rgb(126, 126, 126)
  #7c7c7c | rgb(124, 124, 124)
  #797979 | rgb(121, 121, 121)
  #757575 | rgb(117, 117, 117)
  #717171 | rgb(113, 113, 113)
  #6d6d6d | rgb(109, 109, 109)
  #696969 | rgb(105, 105, 105)
  #666666 | rgb(102, 102, 102)
  #626262 | rgb(98, 98, 98)
  #5f5f5f | rgb(95, 95, 95)
  #5a5a5a | rgb(90, 90, 90)
  #565656 | rgb(86, 86, 86)
  #535353 | rgb(83, 83, 83)
  #4f4f4f | rgb(79, 79, 79)
  #4c4c4c | rgb(76, 76, 76)
  #494949 | rgb(73, 73, 73)
  #464646 | rgb(70, 70, 70)
  #434343 | rgb(67, 67, 67)
  #414141 | rgb(65, 65, 65)
  #3f3f3f | rgb(63, 63, 63)
  #3d3d3d | rgb(61, 61, 61)
  #3a3a3a | rgb(58, 58, 58)
  #363636 | rgb(54, 54, 54)
  #323232 | rgb(50, 50, 50)
  #2e2e2e | rgb(46, 46, 46)
  #2a2a2a | rgb(42, 42, 42)
  #262626 | rgb(38, 38, 38)
  #1f1f1f | rgb(31, 31, 31)
  #191919 | rgb(25, 25, 25)
  #0e0e0e | rgb(14, 14, 14)
  #000000 | rgb(0, 0, 0)

Ilość kolorów w powyższej palecie – 369


Własny skrypt do skracania linków na przykładzie YOURLS

Większość z nas zna i pewnie nawet korzystało z serwisów, które skracają adresy URL linków. Najbardziej znane skracacze linków to tiny.pl czy bit.ly. Zasada działania tego typu serwisów, polega na utworzeniu specjalnego linku w krótkiej domenie z krótkim adresem, z innego nawet bardzo długiego linku strony lub podstrony dowolnego serwisu internetowego.

Przykład. Link do tego artykułu jest dość długi:

https://rankhost.pl/wlasny-skrypt-do-skracania-linkow-na-przykladzie-yourls/

Natomiast po skróceniu, będzie miał taką postać:

https://tiny.pl/d98vn

Gołym okiem widać, że ten drugi adres jest dużo krótszy i ładniej wygląda dla oka. No i składa się w mniejszej ilości znaków, co jest przydatne w publikowaniu linków w serwisach społecznościowych typu X.com (dawniej Twitter), gdzie ilość znaków w postach jest limitowana.

Oczywiście tego typu gotowe rozwiązania, mają wiele wad. Główną jest to, że nie masz pełnej kontroli nad tymi skróconymi linkami. Zewnętrzny serwis może je kiedyś skasować lub po prostu zwinąć interes. Dlatego najlepszym rozwiązaniem jest stworzenie własnego serwisu, który będzie pełnił tę funkcję. Poza pełną kontrolną nad linkami ważne jest to, że możesz go utworzyć we własnej nazwie, czyli domenie internetowej. Może to być bardzo przydatne narzędzie dla osób zajmujących się afiliacją, gdyż linki partnerskie można umieszczać pod własnymi unikalnymi adresami.

Do stworzenia tego typu witryny, jako przykład posłuży nam skrypt do skracania linków o nazwie YOURLS. Skrypt jest udostępniony na licencji open source, więc jest zupełnie darmowy. Niestety hosting i domena internetowa, które są potrzebne do jego wykonania są już płatne, ale to też nie jest aż tak dużo. Koszt ok. 100-150 zł na rok za własny serwis do skracania adresów, to nie jest wygórowana cena. W artykule przedstawię dwie ścieżki do samodzielnego stworzenia tego typu serwisu.

Metoda prostsza – dla osób mniej technicznych

Jeśli nie czujesz się na siłach lub nie masz czasu na ręczną instalację skryptu, to najprościej jest znaleźć hosting, który oferuje gotowy autoinstalator z tym systemem. Oczywiście takich hostingów jest dużo, my np. polecamy Seohost.pl, który ma dogodne ceny serwerów jak i domen internetowych. Jak założyć tam konto, wykupić hosting i domenę internetową, następnie podpiąć ją do serwera i ustawić sobie SSL, opisałem tutaj krok po kroku.

Gdy już masz to wszystko, logujesz się na swój serwer hostingowy. Klikasz z lewego menu Polecane aplikacje -> WordPress w otwartej stronie klikasz w Katalog Aplikacji i na samym dole w kategorii Różne, znajduje się instalator skryptu YOURLS. Po jego kliknięciu dajesz + instaluj tę aplikację i otworzy się okienko instalacyjne skryptu, w którym należy wybrać na jakiej domenie ma być on zainstalowany oraz login i hasło administratora.

autoinstalator yoursl - wybór domeny

Ważne żebyś wybrał przedrostek https://, dzięki czemu serwis będzie działał z szyfrowaniem SSL (standard w tych czasach). Jeśli chodzi o ścieżkę, można zostawić jak jest lub wpisać dowolne, pamiętając żeby nie używać polskich znaków.

autoinstalator yourls - dane administratora

Login i hasło będą potrzebne do zarządzania i konfiguracją skryptu. Jak już masz wszystko wypełnione, na dole klikasz + Zainstaluj. Instalacja potrwa kilka sekund.

Metoda trudniejsza – dla osób technicznych

To jest po prostu metoda ręcznej instalacji skryptu, gdy Twój hosting nie posiada autoinstalatora tego systemu. Będzie ona trochę dłuższa czasowo, ale efekt końcowy będzie taki sam.

Na początek musisz ściągnąć najnowszą wersję skryptu ze strony twórców (na GitHubie) – https://github.com/YOURLS/YOURLS/releases

Po rozpakowaniu paczki instalacyjnej, wszystkie pliki należy wgrać przez FTP do katalogu public_html lub www na serwerze. Choć wcześniej należy pamiętać o utworzeniu bazy danych MySQL na hostingu, i wpisaniu danych dostępowych (nazwa bazy, użytkownik, hasło i host) w pliku:

user/config.php

Domyślnie w katalogu user znajduje się plik config-sample.php. Ale wystarczy go skopiować i usunąć z jego nazwy -sample. Poza danymi dostępowymi do MySQL, warto pamiętać, aby zdefiniować swoją domenę oraz dane logowania admina w linijkach:

define( 'YOURLS_SITE', 'https://twojadomena.pl' );

$yourls_user_passwords = [
'username' => 'password',

Gdy już wszystko zostało prawidłowo wykonane, uruchamiasz plik instalacyjny wpisując taką ścieżkę:

https://twojadomena.pl/admin/

Wyświetli się strona instalacyjna skryptu, na której klikasz Install YOURLS. Jeśli wszystko przebiegnie prawidłowo, wyświetli się taki komunikat:

prawidłowa instalacja skryptu yourls

Doinstalowanie polskiej wersji językowej

Niestety domyślnie skrypt jest w wersji angielskiej, ale zawsze można doinstalować polską wersję językową, która dostępna jest tutaj. Wystarczy ściągnąć paczkę językową, wypakować, a pliki pl_PL.mo i pl_PL.po skopiować na serwer do folderu user/languages. Następnie w pliku config.php (który już wcześniej edytowałeś) w poniżej linijce dodajesz pl_PL, tak aby system wiedział że domyślnie ma obsługiwać polską wersję językową:

define( 'YOURLS_LANG', 'pl_PL' );

Niestety nie wszystko może być przetłumaczone, gdyż tłumaczenie było robione do wersji 1.6, a teraz na chwilę pisania artykułu najnowsza wersja to 1.9.2. Aczkolwiek będzie ona działać, tylko może być niekompletna. Z czego zauważyłem panel admina jest praktycznie w całości po polsku, jedynie strona główna jest po angielsku. Nie będzie to problemem, bo linki wygodniej tworzyć w panelu.

Tak wygląda panel do skracania linków:

panel administracyjny yourls

Można tutaj stworzyć skrócony adres URL, nawet z własną zdefiniowaną nazwą w skrócie (po ukośniku /). Dostępne są tu również wszystkie wygenerowane linki, którymi można dowolnie zarządzać – edytować, udostępniać, sprawdzać statystyki kliknięć lub je usunąć. Ciekawą pozycją jest sprawdzanie statystyk każdego linka:

statystyki skróconego linka

Sprawdzisz tutaj statystyki ruchu z czytelnym wykresem, lokalizację ruchu (według kraju) oraz możliwość sprawdzenia jego źródła.

Koniec pracy. Gratulacje, masz swój własny prywatny serwis, do skracania linków dla swoich stron internetowych.