Webové stránky krok za krokem
HTML a CSS
Statický web
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ů
Ahoj
super a díky HTML už se nějakou kratší
dobu věnuji a vždy, když sem zkoušel co už umím tak sem to dělal vše jen
v HTML, ale díky tomuhle tutoriálu už sem pochytil tu strukturu CSS a jak
vůbec funguje Dřív sem se
ho dost bál, když sem zkoumal různý weby a projížděl sem CSS, tak tam
toho bylo mraky a vždy sem se toho bál Ale dnes vidím, že to je jednoduchý jako v HTML fakt díky moc kozzyCZech
Děkuju, skvělý tutoriály. Začínám s HTML, zkoušel jsem Codecademy, ale tohle je mnohem srozumitelnější
Aleš Moravec
Je to super, mnohem lepší účivo než ve škole
Majki Rak
Musím říct, že kam se hrabe způsob výuky ve škole, kde na to prostě není čas a jen to na člověka vychrlí. Děkuju
Vladimír Maliniak
Úžasný tutoriál, už jsem podle něj začal dělat svůj web.
big
Děkuji za úžasný seriál. HTML jsem sice uměl, ale starší verze a to z webu jakpsatweb.cz, který se tvému seriálu nemůže rovnat
.VFXMatous
Báječný kurz pro úplného začátečníka. Jednoduše vysvětleno, zatím vše chápu a všechny úkoly mi vyšly. Když se vloudila chybička, hned jsem ji našla. Díky! Pokračuji dál.
Kateřina
Úžasné tutoriály dělané přesně na mě. Web jsem se učil tvořit někdy před cca 5 lety a od té doby jsem to zapomněl, ale stále si pár věcí pamatuji. Tady se vždy dovím, jak to udělat a vzpomenu si na "starý způsob" a hned se mi vybaví proč je to tu jinak. Jenže o řádek níže je právě ten "starý způsob" hned zmíněný a je k němu i vysvětlení proč se to již tak nedělá. Vážně super a moc chválím. Díky
is3l0r
Tvé návody se mi líbí
Já většinou dával větší prioritu aplikačnímu programování, ale díky
tobě tímto snadno a velmi rychle postupuji vpřed. Jiří Šedý
Tato série článků mi opravdu hodně pomohla. Kvalitnější vysvětlení opravdu nikde na internetu nenajdu.
Zdeněk Zwesper
Super, moc díky za tutoriály
i já to chápu a to je co říct Tad.MJ12
Pěkný web. Už dřív jsem něco dělal podle jiné konkureční stránky, ale ta už je celkem zastaralá. Tahle je aktuální a pěkná. Díky
k.ats
Lekce
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.
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.
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.
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í.
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.
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í.
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í.
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.
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).
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.
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í.
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í.
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.
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.
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í.
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.
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.
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í.
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.
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ář.
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.
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í.
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.
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.
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.