BF - Easter Office week
Tento týden až 80% sleva na e-learning MS Office!
80 % bodů zdarma díky naší Velikonoční akci!

Webové stránky krok za krokem

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.
Napsal David Čápka
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
Řešené úlohy k 1.-3. lekci HTML a CSS

Cvičení

Řešené úlohy 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í.
Napsal Daniel Vítek
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
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í.
Napsal David Čápka
Zdarma Zobrazit popis
Řešené úlohy k 4.-5. lekci HTML a CSS

Cvičení

Řešené úlohy 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í.
Napsal Daniel Vítek
Premium Zobrazit popis
Ú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.
Napsal David Čápka
Zdarma Zobrazit popis
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).
Napsal David Čápka
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
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í.
Napsal David Čápka
Zdarma Zobrazit popis
Řešené úlohy k 6.-9. lekci HTML a CSS

Cvičení

Řešené úlohy 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í.
Napsal Daniel Vítek
Premium Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
Řešené úlohy k 10.-11. lekci HTML a CSS

Cvičení

Řešené úlohy 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í.
Napsal Daniel Vítek
Premium Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
Řešené úlohy k 12.-13. lekci HTML a CSS

Cvičení

Řešené úlohy 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í.
Napsal Daniel Vítek
Premium Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
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ář.
Napsal David Čápka
Zdarma Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
Řešené úlohy k 14.-16. lekci HTML a CSS

Cvičení

Řešené úlohy 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í.
Napsal Daniel Vítek
Premium Zobrazit popis
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.
Napsal David Čápka
Zdarma Zobrazit popis
Učební pomůcka na HTML - Tahák

Tahák

Učební pomůcka na HTML - Tahák

Vymazlený tahák na jednu oboustrannou A4. Zapamatujte si snadno nejdůležitější HTML 5 tagy a co dělají a také jak vypadá základní struktura HTML dokumentu.
Napsal David Čápka
Premium Zobrazit popis
Učební pomůcka na CSS - Tahák

Tahák

Učební pomůcka na CSS - Tahák

Vymazlený tahák na jednu oboustrannou A4. Zapamatujte si snadno nejdůležitější CSS 3 vlastnosti a co dělají a také jak fungují box model a flex box.
Napsal David Čápka
Premium Zobrazit popis
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.
Napsal Vladan Košut
Zdarma Zobrazit popis
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.
Napsal Vladan Košut
Zdarma Zobrazit popis


 

Aktivity (6)