Webové stránky krok za krokem

HTML a CSS Statický web American English version English version

Tento seriál tutoriálů vás provede tvorbou jednoduchého statického webu v HTML a CSS. Látka bude vysvětlována od úplných začátků až po nahrání na web. Nepotřebujete žádné znalosti kromě běžného ovládání počítače. Během několika lekcí budete schopni vytvářet vlastní internetové stránky.

Tutoriály

Úvod do HTML a váš první web

1. díl - Úvod do HTML a váš první web

Tutoriál vás uvede do jazyka HTML, vysvětlí jeho strukturu a tagy head, body, title a meta. Výsledkem je vaše první webová stránka s HTML5 hlavičkou.
Zdarma 55555 Napsal David Čápka
Základní HTML tagy

2. díl - Základní HTML tagy

Tutoriál vás naučí používat základní HTML tagy, kterými jsou odstavce p, zvýraznění textu strong a em a nadpisy h1-h6. Začneme tvořit první web.
Zdarma 55555 Napsal David Čápka
Obrázky a odkazy v HTML

3. díl - Obrázky a odkazy v HTML

Tutoriál vás naučí vkládat do svých webových stránek v HTML obrázky tagem img a odkazy tagem a. K našemu webu přidáme podstránku a stránky naodkazujeme.
Zdarma 55555 Napsal David Čápka
Cvičení k 1.-3. lekci HTML a CSS

Cvičení k 1.-3. lekci HTML a CSS

Řešené úlohy v HTML & CSS na téma zvýrazňování, obrázky a odkazy. Úlohy jsou řazené dle obtížnosti s řešením ke stažení.
Zdarma 55555 Napsal Daniel Vítek
Tabulky v HTML

4. díl - Tabulky v HTML

Tutoriál vysvětlující tabulky v HTML, vysvětluje tagy thead, tbody, th, tr, td. Nechybí slučování buněk ani tvorba hlavičky.
Zdarma 55555 Napsal David Čápka
Seznamy v HTML a zopakování tabulky

5. díl - Seznamy v HTML a zopakování tabulky

V HTML tutoriálu si zopakujeme použití tabulky (table) a uvedeme si různé seznamy (ul, ol a dl), jejich položky (li) a jejich názorné použití.
Zdarma 55555 Napsal David Čápka
Cvičení k 4.-5. lekci HTML a CSS

Cvičení k 4.-5. lekci HTML a CSS

Řešené úlohy v HTML a CSS na téma tabulky a seznamy. Úlohy jsou řazené dle obtížnosti s řešením ke stažení.
Premium 55555 Napsal Daniel Vítek
Úvod do CSS (kaskádových stylů)

6. díl - Úvod do CSS (kaskádových stylů)

Tutoriál uvede do CSS, vysvětlí, proč kaskádové styly vznikly a jaké důvovody k tomu v minulosti vedly. Porovná 2 totožné weby s CSS a bez CSS.
Zdarma 55555 Napsal David Čápka
Základní CSS selektory a vlastnosti

7. díl - Základní CSS selektory a vlastnosti

HTML tutoriál vysvětluje základní princip CSS selektorů a ukáže stylování zarovnání (text-align) a barvy textu (color).
Zdarma 55555 Napsal David Čápka
Třídní selektor a stylování textu v CSS

8. díl - Třídní selektor a stylování textu v CSS

V CSS tutoriálu se naučíme centrovat obrázky pomocí třídního selektoru, dále si uvedeme vlastnosti ke změně fontu a velikosti písma a na závěr také stín.
Zdarma 55555 Napsal David Čápka
Layout a pozadí v HTML

9. díl - Layout a pozadí v HTML

V tutoriálu začneme s tvorbou layoutu, tedy rozložení stránky na hlavičku, článek a patičku. Naučíme se HTML 5 tagy article, header, section a CSS pozadí.
Zdarma 55555 Napsal David Čápka
Cvičení k 6.-9. lekci HTML a CSS

Cvičení k 6.-9. lekci HTML a CSS

Řešené úlohy v HTML a CSS na téma základní CSS selektory a styly. Úlohy jsou řazené dle obtížnosti s řešením ke stažení.
Premium 55555 Napsal Daniel Vítek
Plovoucí obsah v HTML

10. díl - Plovoucí obsah v HTML

V tutoriálu si ukážeme, jak do HTML vložit plovoucí obsah pomoc CSS vlastnosti float:left, který se skládá vedle sebe a je ostatním obsahem obtékán.
Zdarma 55555 Napsal David Čápka
Rámeček, stín a boxmodel v CSS

11. díl - Rámeček, stín a boxmodel v CSS

V HTML tutoriálu si ukážeme, jak v CSS ostylovat rámeček elementu pomocí border a border-radius, stín pomocí box-shadow a odsazení pomocí padding a margin.
Zdarma 55555 Napsal David Čápka
Cvičení k 10.-11. lekci HTML a CSS

Cvičení k 10.-11. lekci HTML a CSS

Řešené úlohy v HTML a CSS na téma stylování a základní pozicování. Úlohy jsou řazené dle obtížnosti s řešením ke stažení.
Premium 55555 Napsal Daniel Vítek
Navigační menu, patička a HTML entity

12. díl - Navigační menu, patička a HTML entity

V tutoriálu budeme pokračovat ve tvorbě layoutu (rozvržení) webu, připravíme si hlavičku s navigačním menu a patičku. Naučíme se používat HTML entity.
Zdarma 55555 Napsal David Čápka
Stylování hlavičky HTML stránky

13. díl - Stylování hlavičky HTML stránky

V HTML tutoriálu budeme pokračovat ve tvorbě layoutu (rozvržení) webu, pomocí CSS 3 ostylujeme hlavičku s logem a navigačním menu.
Zdarma 55555 Napsal David Čápka
Cvičení k 12.-13. lekci HTML a CSS

Cvičení k 12.-13. lekci HTML a CSS

Řešené úlohy v HTML a CSS na téma entity a stylování seznamů. Úlohy jsou řazené dle obtížnosti s řešením ke stažení.
Premium 55555 Napsal Daniel Vítek
Fixní menu a pozicování v CSS

14. díl - Fixní menu a pozicování v CSS

V HTML tutoriálu dokončíme náš layout a naučíme se základy pozicování v CSS. Navigačnímu menu nastavíme fixní pozici, aby bylo stále navrchu.
Zdarma 55555 Napsal David Čápka
Tvorba podstránek a kontaktní formulář

15. díl - Tvorba podstránek a kontaktní formulář

V HTML tutoriálu si ukážeme, jak vytvořit podstránky s naším layoutem. Pochopíme, proč nepoužívat rámce a do kontaktní stránky vložíme emailový formulář.
Zdarma 55555 Napsal David Čápka
Stylování tabulek a galerie fotek v HTML a CSS

16. díl - Stylování tabulek a galerie fotek v HTML a CSS

V tutoriálu dokončíme náš web v HTML a CSS. Ukážeme si stylování tabulek a vytvoříme galerii fotografií s pomocí JavaScriptového Lightboxu.
Zdarma 55555 Napsal David Čápka
Cvičení k 14.-16. lekci HTML a CSS

Cvičení k 14.-16. lekci HTML a CSS

Řešené úlohy v HTML a CSS na téma pokročilé pozicování a stylování. Úlohy jsou řazené dle obtížnosti s řešením ke stažení.
Premium 55555 Napsal Daniel Vítek
Nahrání webu na internet

17. díl - Nahrání webu na internet

Ve finálním dílu tutoriálů pro tvorbu webů v HTML a CSS si vysvětlíme metadata description a keywords, ikonu a nahrajeme hotový web na webhosting.
Zdarma 55555 Napsal David Čápka