WEBVTT

00:00:00.279 --> 00:00:04.335
Vytvořila jsem webovou stránku
o domácích mazlíčcích se seznamem jejich jmen.

00:00:04.335 --> 00:00:06.747
Co vás napadne,
když se na to podíváte?

00:00:06.747 --> 00:00:11.113
Měla jsem mazlíčky se jmény
Black & White, Deamon a Angel.

00:00:11.113 --> 00:00:12.964
Co to bylo za mazlíčky?

00:00:12.964 --> 00:00:14.553
Jakou měli barvu?

00:00:14.553 --> 00:00:16.124
Jak staří byli?

00:00:16.124 --> 00:00:19.233
Měla bych vám o nich
poskytnout více informací

00:00:19.233 --> 00:00:21.047
abych ukojila vaši zvědavost.

00:00:21.047 --> 00:00:23.457
Mohla bych to udělat
pomocí vnořeného seznamu

00:00:23.457 --> 00:00:26.816
nebo dát informaci do kulatých závorek.

00:00:26.816 --> 00:00:30.332
Black & White byl králík,

00:00:30.332 --> 00:00:32.213
Daemon je kočka,

00:00:32.213 --> 00:00:34.204
a Angel taky.

00:00:34.384 --> 00:00:37.375
Ale tohle se mi nelíbí,
protože to není organizované

00:00:37.375 --> 00:00:40.906
a na první pohled nevidím všechny druhy zvířat

00:00:40.906 --> 00:00:42.786
v jednom hezky zarovnaném seznamu.

00:00:42.786 --> 00:00:46.706
Tohle je perfektní příležitost
pro použití tabulky,

00:00:46.706 --> 00:00:49.140
ve které bude řádek pro každého mazlíčka

00:00:49.140 --> 00:00:51.858
a sloupec pro jejich jednotlivé vlastnosti,

00:00:51.858 --> 00:00:54.084
které vám chci ukázat.

00:00:54.084 --> 00:00:58.378
Pro vytvoření tabulky v HTML,
budeme potřebovat hodně tagů.

00:00:58.378 --> 00:00:59.958
Tak se připravte.

00:00:59.958 --> 00:01:02.771
A nelámejte si hlavu,
když si je nebudete všechny pamatovat.

00:01:02.771 --> 00:01:04.434
Vždycky si je potom můžete najít.

00:01:04.434 --> 00:01:08.460
Mně to třeba trvalo 10 let,
než jsem si je všechny zapamatovala.

00:01:08.460 --> 00:01:10.436
Tak se dáme do toho.

00:01:10.436 --> 00:01:15.084
První tag je ,

00:01:15.084 --> 00:01:17.560
Dále potřebujeme hlavičku tabulky,

00:01:17.560 --> 00:01:20.023
která bude obsahovat popisek
pro každý sloupec.

00:01:20.023 --> 00:01:23.043
Takže napíšeme .

00:01:23.043 --> 00:01:27.858
Dovnitř obvykle chceme jen jeden řádek.

00:01:27.858 --> 00:01:32.002
Pro každý řádek v tabulce
použijeme tag .

00:01:32.002 --> 00:01:35.286
Do tohoto řádku chceme
buňky hlavičky.

00:01:35.286 --> 00:01:41.677
Pro každou buňku hlavičky
napíšeme tag .

00:01:41.677 --> 00:01:44.879
Jaký bude popisek prvního sloupce?

00:01:44.879 --> 00:01:49.092
Budou to jména mazlíčků,
protože to je nejdůležitější údaj v řádku.

00:01:49.092 --> 00:01:51.306
a zároveň je to jedinečný identifikátor.

00:01:51.306 --> 00:01:54.699
Přidáme další sloupec pro druh zvířete.

00:01:54.699 --> 00:01:58.602
A nakonec přidáme sloupec pro barvu.

00:01:58.602 --> 00:02:01.532
Myslím, že to prozatím stačí.

00:02:01.532 --> 00:02:03.915
Teď přidáme nějaká data.

00:02:03.915 --> 00:02:05.951
Pro začátek vyplníme řádky daty

00:02:05.951 --> 00:02:09.473
pomocí tagu  pod 

00:02:09.473 --> 00:02:11.847
a pak budeme znovu
potřebovat vytvořit řádek,

00:02:11.847 --> 00:02:14.282
takže použijeme tag .

00:02:14.282 --> 00:02:16.717
Ale uvnitř místo tagu ,

00:02:16.717 --> 00:02:20.005
použijeme ,
protože jsme uvnitř těla tabulky.

00:02:20.005 --> 00:02:23.136
'td' je zkratka pro 'Table Data',

00:02:23.136 --> 00:02:27.871
Jaká je hodnota v první buňce
prvního řádku?

00:02:28.056 --> 00:02:30.311
No, podívám se do mého seznamu,

00:02:30.311 --> 00:02:33.801
a vidím, že první věc na něm
byla Black & white,

00:02:33.801 --> 00:02:36.019
což je její jméno,

00:02:36.019 --> 00:02:40.258
takže jenom napíšu "Black & white".

00:02:40.258 --> 00:02:42.496
Teď druhý tag .

00:02:42.496 --> 00:02:46.726
Druhý tag  je pro druh zvířat.

00:02:46.726 --> 00:02:49.724
a Black & white je králík,

00:02:49.724 --> 00:02:52.497
takže napíšeme "králík".

00:02:52.497 --> 00:02:55.159
A nakonec, třetí .

00:02:55.159 --> 00:02:59.049
Koukneme nahoru,
třetí  je pro barvy.

00:02:59.049 --> 00:03:04.430
No, jako malá jsem nebyla moc kreativní,
když jsem pojmenovávala svého králíka,

00:03:04.430 --> 00:03:08.215
takže barvy můžete nejspíš uhádnout.

00:03:08.215 --> 00:03:10.767
Dobrá, pojďme na další řádek.

00:03:10.767 --> 00:03:13.067
Ukážu vám malou fintu,
která se mi líbí.

00:03:13.067 --> 00:03:15.544
Jakmile uděláme jeden řádek.

00:03:15.544 --> 00:03:17.126
označíme ho

00:03:17.126 --> 00:03:19.394
a zkopírujeme pomocí klávesové zkratky,

00:03:19.394 --> 00:03:22.588
což je obvykle Control + C,

00:03:22.588 --> 00:03:24.538
záleží na vašem operačním systému.

00:03:24.538 --> 00:03:28.637
A poté to vložíme,
rovněž pomocí klávesové zkratky,

00:03:28.637 --> 00:03:31.082
většinou control + V,

00:03:31.082 --> 00:03:33.035
opět podle operačního systému.

00:03:33.035 --> 00:03:36.870
A po vložení akorát změním hodnoty.

00:03:36.870 --> 00:03:41.779
Takže tahle bude Daemon, 
kočka a bude černá,

00:03:41.779 --> 00:03:44.397
a pak to uděláme ještě jednou,

00:03:44.397 --> 00:03:52.705
a tohle bude Angel,
kočka a bude oranžová.

00:03:52.705 --> 00:03:58.158
Když byste měli pořád psát  a ,
tak se unudíte k smrti.

00:03:58.158 --> 00:04:03.292
Tenhle můj kopírovací trik
vám to trochu ulehčí.

00:04:03.299 --> 00:04:05.853
A máme hotovou tabulku!

00:04:05.853 --> 00:04:08.041
Můžu snadno přidat další sloupce,

00:04:08.041 --> 00:04:10.548
pouze přidám další tag  v hlavičce,

00:04:10.548 --> 00:04:12.827
a pak  v každém řádku,

00:04:12.827 --> 00:04:16.142
pokud bych chtěla přidat
více detailů o mých mazlíčcích.

00:04:16.142 --> 00:04:19.661
Možná vás zajímá,
jak změnit vzhled tabulky,

00:04:19.661 --> 00:04:22.209
jako změnit okraje
nebo barvy nebo velikost mezer.

00:04:22.209 --> 00:04:24.673
Vše můžete dělat pomocí CSS vlastností,

00:04:24.673 --> 00:04:27.768
které jste se už možná naučili
nebo se naučíte.

00:04:27.768 --> 00:04:31.462
Vyzkoušejte si vytvořit vlastní webovou
stránku se seznamem vlastních mazlíčků,

00:04:31.462 --> 00:04:33.294
nebo mazlíčků, které byste chtěli.

00:04:33.294 --> 00:04:35.853
A uspořádejte data do tabulky.