Příklady

Společně s knihou budeme vytvářet webovou stránku o Nanonautech. Pokaždé, když kód stránky upravíme, se budete moci ve svých prohlížečích podívat, jak vypadá, postačí k tomu jen kliknout na níže uvedené odkazy. Jen najděte správné číslo stránky.

Ze stránek můžete kód také kopírovat, abyste si ušetřili práci s přepisováním. Tady je jeden způsob, jak to můžete udělat s pomocí Google Chrome (odkaz na něj je na stránce Ke stažení).

  • Otevřete stránku
  • Klikněte pravým tlačítkem kdekoliv na stránce a vyberte Inspect
  • Objeví se rozdělená obrazovka, kdy nalevo je webová stránka a napravo sada různých informací o jejím kódu

  • V nabídce na pravé straně vyberte Sources.
  • Objeví se okno Sources

  • Ke zkopírování HTML je nutné v okně Sources kliknout na soubor, který má příponu .htm nebo .html. Úplně napravo se objeví okno s kódem.
  • Ke zkopírování CSS klikněte na šipku vedle složky v okně Sources nazvaný css a pak klikněte na soubor .css, který obsahuje.
  • Inspect okně dokonce můžete HTML nebo CSS upravit a některé části stylů vypnout nebo nahradit. Trochu si s ním pohrajte a zjistěte, co to udělá!

 

Číslo příkladu Číslo strany Zdroj HTML a ukázka CSS zdroj
1 8 Začínáme  
2 10 Přidávání stylu css2
3 13 Přidávání obrázků css3
4 16 Vytváříme seznamy css4
5 18 Vytvoření domovské stránky css5
6 20 Vytvoření textové stránky css6
7 22 Formátování textové stránky css7
8 26 Změna fontu css8
9 27 Základní styly css9
10 28 Tvorba pozadí css10
11 34 Tvorba menu css11
12 35 Stylování menu css12
13 43 Stylování bloku textu css13
14 46 Vložení videa css14
15 48 Vložení mapy css15
16 52 Vložení tabulky css16
17 53 Stylování tabulky css17
18 56 Hover a active efekt menu css18
19 62 Javascript css19
20 69 Použití strukturálních elementů css20
21 75 Responzivnost css21
22 77 Responzivnost - zarovnání na střed css22
23 78 Responzivnost - obsah css23
24 78b Responzivnost - obtékání css24
25 79 Responzivnost - odsazení css25
26 80 Responzivnost - odsazení css26
27 81a Responzivnost - úprava hlavičky css27
28 81b Responzivnost - obsazení a zarovnání css28
29 82 Dvousloupcový design css29
30 84 Finalizace css30