YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Polish subtitles

← Podstawy HTML

Get Embed Code
11 Languages

Showing Revision 9 created 02/13/2015 by Lech Mankiewicz.

  1. Witam na swojej stronie.

  2. Wiem, jest nieciekawa.
  3. Pusta. Jak każda strona
    na początku.
  4. Niedługo pokażę wam,
    jak ją zapełnić.
  5. Zapoznajmy się
  6. z budową takiej pustej strony.
  7. Każda strona zaczyna się
  8. od deklaracji DOCTYPE.
  9. To znak dla przeglądarki,
  10. że stronę stworzono
    w nowej wersji HTML,
  11. a nie w jakiejś
    starej i dziwacznej.
  12. Przejdźmy do pierwszego
    znacznika na stronie.
  13. HTML to język znaczników.
  14. Znacznik zaczyna się
  15. od nawiasu trójkątnego
  16. i takim samym się kończy.
  17. Jeśli lubicie matematykę,
  18. nazywajcie je znakami
    większości i mniejszości.
  19. Pierwszym znacznikiem na stronie
  20. jest „html”,
    zawsze pod DOCTYPE.
  21. To znacznik początkowy,
  22. a u dołu jest znacznik końcowy,
  23. taki sam, tylko z ukośnikiem,
  24. który jest bardzo ważny.
  25. Między nimi mieszczą się
    wszystkie inne znaczniki
  26. tworzące tę stronę.
  27. Dlatego znacznik końcowy
    jest na samym dole.
  28. Wiele znaczników HTML
    to takie pary,
  29. ale nie wszystkie.
  30. Pod znacznikiem „html”
    zawsze jest znacznik „head”.
  31. Zawiera znaczniki pomagające
    przeglądarce
  32. odpowiednio wyświetlić stronę.
  33. Znacznik „meta”
    szczegółowo informuje
  34. przeglądarkę, jak to zrobić.
  35. Jeśli np. chcemy używać tylko
  36. alfabetu łacińskiego,
  37. a nie skomplikowanych
  38. liter arabskich,
  39. wpiszemy znacznik
    meta charset="utf-8".
  40. Znacznik „title”
  41. zawiera tytuł strony,
  42. który pojawi się w pasku na górze,
  43. w zakładkach
    i wynikach wyszukiwania.
  44. W Khan Academy tytuł
    widać nad naszą stroną.
  45. Zmienię tytuł.
  46. Zrobię stronę o królikach:
  47. „All About Rabbits”
    (Wszystko o królikach).
  48. Może już widzicie,
    że tytuł się zmienił.
  49. Super! Zrobiliśmy już wszystko,
  50. wstawmy znacznik „/head”
    i przejdźmy dalej do znacznika,
  51. w którym powstaje strona.
    To znacznik „body”.
  52. Na razie - nuda.
    Tylko początek i koniec.
  53. Co dodać?
  54. Skoro tworzę stronę o królikach,
  55. powinnam to napisać
  56. dużymi literami u góry.
  57. Nagłówek dodamy za pomocą
    znacznika „h1”.
  58. „Wszystko o królikach”, świetnie.
  59. Mamy do dyspozycji
  60. 6 znaczników do nagłówków:
    „h1”, „h2”, „h3”, „h4”, „h5”, „h6”;
  61. „h1” odnosi się
    do najważniejszego nagłówka,
  62. a „h6” do najmniej ważnego.
  63. Dodam tytuły sekcji.
  64. Skorzystam ze znacznika „h2”,
  65. bo te części są nieco mniej ważne.
  66. Jeszcze piosenki. Świetnie.
  67. Dodajmy trochę informacji.
  68. Tworzę tę stronę
  69. dla kosmitów,
    którzy nigdy nie widzieli królika.
  70. Przyda się porządny opis.
  71. Cały akapit z informacjami.
  72. Jak oznaczyć w HTML
    akapit (paragraf)?
  73. Oczywiście znacznikiem „p”.
  74. Stawiam znacznik „p”
    i już mogę
  75. wkleić informacje.
  76. Nie musicie patrzeć,
    jak wszystko wklepuję.
  77. Pięknie!
  78. Kosmici muszą znać piosenkę
    powitalną dla królików.
  79. Podam im tekst swojej ulubionej.
  80. Znów użyję znacznika „p”
    i wkleję słowa.
  81. „Króliczek Foo Foo”, ładna piosenka.
  82. Oj, wszystko wyświetla się
    w jednej linii!
  83. Skąd kosmici mają wiedzieć,
    gdzie są pauzy?
  84. Dlaczego przeglądarka
  85. nie pokazała podziałów wiersza?
  86. Na ogół przeglądarki
    ignorują te znaki
  87. oraz spacje w tekstach w HTML.
  88. Żeby przeglądarka podzieliła wiersz,
  89. musimy jej to nakazać,
    używając innego znacznika,
  90. „br” (z ang. break - podział).
  91. Dodamy więc „br”
    na końcu każdego wiersza.
  92. Teraz widać tekst piosenki!
  93. Zauważyliście coś
    w związku z „br”?
  94. Nie ma znacznika końcowego.
  95. Pomyślmy:
  96. podział wiersza nie ma treści,
  97. więc co tu kończyć?
  98. Wystarczy znacznik początkowy.
  99. Gotowe.
  100. Kosmici dowiedzą się o królikach,
  101. a wy poznaliście podstawy HTML.
  102. Kiedy skończę,
  103. pobawcie się,
    pozmieniajcie różne rzeczy.
  104. A gdy będziecie gotowi, przejdźcie
    do pierwszego zadania w HTML.