YouTube

Got a YouTube account?

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

Czech subtitles

← HTML Basics (Video Version)

Get Embed Code
11 Languages

Showing Revision 8 created 10/07/2018 by Marek Lisý.

  1. Vítejte na mé webové stránce.

  2. Vím, není zatím příliš zajímavá.
  3. Je úplně prázdná, ale takhle
    začíná každá webová stránka,
  4. a já vám ukážu, jak takovou
    stránku vytvořit rychle.
  5. Nejprve mi dejte chvilku,
  6. abych vám představila základní
    strukturu prázdné stránky.
  7. Každá webová stránka začíná s
  8. touto srandovní věcí
    zvanou DOCTYPE na začátku.
  9. Tou jen říkáme prohlížeči,
  10. že tato webová stránka je
    psaná v moderním HTML,
  11. a ne v té staré a podivné verzi HTML.
  12. Následuje první tag naší stránky.
  13. HTML je značkovací jazyk,
    takže se všechno týká tagů.
  14. Tag je jedna z věcí,
  15. které začínají se špičatou závorkou,
  16. a končí s jinou špičatou závorkou.
  17. V matematice je možná znáte
  18. jako symboly méně než
    nebo více než.
  19. První tag každé stránky je vždycky
  20. tento tag HTML přímo pod DOCTYPE.
  21. Tomuhle říkáme začínající tag HTML,
  22. a pak úplně na konci je
    uzavírací tag HTML,
  23. který vypadá uplně stejně
    kromě tohoto lomítka,
  24. které je velmi důležité.
  25. Dovnitř HTML musíme
    dávat všechny ostatní tagy,
  26. které chceme na stránce mít.
  27. Proto je uzavírací tag HTML
    až úplně na konci.
  28. Velká část HTML tagů
    je takto "párová",
  29. ale ne všechny.
  30. Pod HTML je vždy
    tag head,
  31. který obsahuje tagy pomáhající
    prohlížeči zobrazit stránku,
  32. ale zároveň neobsahuje nic,
    co může uživatel vidět.
  33. Tento meta tag dává prohlížeči
  34. více informací o zobrazení stránky.
  35. Například, pokud používáte
    běžné znaky,
  36. například písmena abecedy,
  37. a ne žádné těžší znaky,
  38. které jsou v arabském jazyce,
  39. pak byste měli použít znakovou sadu utf-8.
  40. Dál tady máme tag title.
  41. který prohlížeč používá
    k určení názvu stránky.

  42. Název se ukazuje na kartě
    nahoře v prohlížeči,
  43. a taky v záložkách nebo ve výsledcích vyhledávání.
  44. Tady na Khan Academy se titulek
    ukazuje nad naší webovou stránkou.
  45. Zkusíme ho změnit.
  46. Celá stránka bude o králících.
  47. Takže název bude "Vše o králících"
  48. a můžete vidět, jak se název nahoře mění.
  49. Super, tyhle detaily bychom měli.
  50. Takže ukončíme tag head
    a přesuneme se k tagu,
  51. který je centrem dění,
    k tagu body.
  52. Momentálně je pěkně nudný,
    jenom začíná a končí.
  53. Co bych tam měla přidat?
  54. Protože dělám webovou stránku o králících,
  55. měla bych to asi uvést
  56. ve velkém nadpisu na začátku.
  57. K přidání nadpisu používáme tag H1.
  58. Všechno o králících, super.
  59. Pro nadpisy existuje šest tagů:
  60. H1, H2, H3, H4, H5 a H6.
  61. H1 tag je pro ty nejdůležitější
    nadpisy na stránce.
  62. a H6 je nejméně důležitý.
  63. Teď přidám více nadpisů pro každou sekci.
  64. Použiji H2, protože jsou pro trošku
  65. méně důležité sekce.
  66. Ještě písničky, super.
  67. Teď pojďme přidat opravdový obsah.
  68. Moje cílová skupina pro tuto stránku
  69. jsou mimozemšťani, kteří nikdy neviděli
    králíky.
  70. Takže jim musíme dát
    hodně dobrý popis králíků.
  71. Myslím, že bychom jim mělli
    napsat celý odstavec plný informací.
  72. Jak můžeme vytvořit odstavec v HTML?
  73. Samozřejmě s tagem P.
  74. Přidáme tag P, a potom do něj
  75. vložím nějaké informace,
  76. ať mě nemusíte sledovat,
    jak to celé píšu.
  77. Krása.
  78. Teď mimozemšťani potřebují píseň,
    kterou budou králíky zdravit,
  79. takže jim dám můj
    nejoblíbenější text.
  80. Znovu, použiji pro to tento tag P,
    a vložím dovnitř text písně
  81. "Malý králíček Foofoo",
    taková skvělá písnička.
  82. Ale jejej, vše se ukazuje v jednom řádku.
  83. Jak budou mimozemšťani
    vědět, kdy přestat?
  84. Proč prohlížeč nezobrazil
  85. zalomení v řádcích,
    které jsem sem vložila?
  86. No, popravdě, prohlížeč
    většinou ignoruje zalomení
  87. a mezery ve vašem HTML.
  88. Pokud chcete, aby se text
    zobrazil na nový řádek,
  89. musíme to důrazně říct,
    vložením jiného tagu,
  90. tagu BR, který znamená nový řádek.
  91. Musíme to projít a
    přidat BR na konci každého řádku.
  92. Teď to vypadá jako text písničky.
  93. Všimli jste si něčeho zábavného na BR?
  94. Není zde uzavírací tag.
  95. Když se nad tím zamyslíme,
  96. nový řádek nemá žádný obsah,
  97. takže pak není co ukončovat.
  98. Proto potřebujeme jen začínající tag.
  99. Tady je.
  100. Mimozemšťani se budou učit
    základy o králících,
  101. a vy jste se naučili základy o HTML.
  102. Jakmile domluvím,
  103. můžete si s tímto hrát a různě to měnit.
  104. A až budete připraveni, pokračujte
    na vaši první HTML výzvu.