Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

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

Lekce 1 - Ú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

Lekce 2 - 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

Lekce 3 - 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

Lekce 4 - 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

Lekce 5 - 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ů)

Lekce 6 - Ú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

Lekce 7 - 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

Lekce 8 - 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

Lekce 9 - 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

Lekce 10 - 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

Lekce 11 - 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

Lekce 12 - 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

Lekce 13 - 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

Lekce 14 - 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ář

Lekce 15 - 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

Lekce 16 - 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

Lekce 17 - 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 (3)