Webové stránky krok za krokem

HTML a CSS Statický web American English version English version

Online kurz tutoriálů vás provede tvorbou jednoduchého statického webu v HTML a CSS. Látka je vysvětlována od úplných začátků až po nahrání na internet. 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.

Ohlasy studentů

Lekce

Ú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.
ZdarmaNapsal 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.
ZdarmaNapsal 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.
ZdarmaNapsal 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í.
ZdarmaNapsal 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.
ZdarmaNapsal 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í.
ZdarmaNapsal 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í.
PremiumNapsal 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.
ZdarmaNapsal 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).
ZdarmaNapsal 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.
ZdarmaNapsal 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í.
ZdarmaNapsal 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í.
PremiumNapsal 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.
ZdarmaNapsal 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.
ZdarmaNapsal 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í.
PremiumNapsal 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.
ZdarmaNapsal 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.
ZdarmaNapsal 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í.
PremiumNapsal 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.
ZdarmaNapsal 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ář.
ZdarmaNapsal 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.
ZdarmaNapsal 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í.
PremiumNapsal 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.
ZdarmaNapsal David Čápka
10 rad, díky kterým neuděláte při výběru hostingu chybu I

10 rad, díky kterým neuděláte při výběru hostingu chybu I

Představuji vám první část článku zaměřeného na nejčastější chyby, kterých se dopouštíme při výběru poskytovatele webhostingových služeb.
ZdarmaNapsal Vladan Košut
10 rad, díky kterým neuděláte při výběru hostingu chybu II

10 rad, díky kterým neuděláte při výběru hostingu chybu II

Představuji vám druhou část článku zaměřeného na nejčastější chyby, kterých se dopouštíme při výběru poskytovatele webhostingových služeb.
ZdarmaNapsal Vladan Košut


 

Aktivity (2)