HTML a CSS pro začátečníky

Kdo chce vytvářet webové stránky, dříve nebo později se setká s HTML. Proto se v nadcházejících videích společně seznámíme s krásným světem HTML. Budete krok za krokem vidět, co tato jazyk obnáší a jak lze s ním v kombinaci se styly vytvářet webové stránky. Nicméně na začátku stojí otázka: Co to vlastně je HTML a styly? Na konci tohoto videa se dozvíte, jaký software potřebujete k vytváření a testování webových stránek.

Na rozdíl od programovacích jazyků jako například Java můžete v HTML bez většího seznámení velmi rychle dosáhnout prvních výsledků. Vše, co budete na začátek potřebovat, je editor a prohlížeč. V tomto video tréninku vytvoříte svůj první HTML dokument a okamžitě získáte výstup v prohlížeči. A mimochodem se také dozvíte, jak jsou HTML dokumenty, tedy webové stránky, strukturovány a jaké základní struktury následují.

Souvislost mezi pojmy prvek, značka a atribut již znáte z první části této série. Nyní jde o to, jak je možné tyto věci prakticky využít v HTML dokumentech. Na závěr tohoto video-tréninku se dozvíte, jak můžete zkontrolovat svůj HTML kód na sytaktickou správnost.

Vaše webové stránky budou jistě složeny nejen z obrázků, ale také z textů. A texty by měly být rozumně strukturovány, zejména pro dobré čitelnosti. HTML nabízí řadu prvků pro tento účel. V tomto video tréninku budou představeny nejdůležitější strukturální prvky pro texty. Kromě toho se dozvíte, jak lze maskovat vlastní znaky HTML a jak lze vytvořit seznamy programů.

Pro dobré čitelnosti textů je potřebné rozumné formátování. A to přesahuje pouhé strukturální prvky, jako jsou nadpisy a odstavce. Například v HTML můžete označit citace a zvýraznit jednotlivé části tučně nebo kurzívou. Potřebné vybavení k tomu poskytuje toto videoškolení.

Prvky, se kterými se v HTML budete opakovaně setkávat, jsou seznamy. Toto platí nejen pro seznamy úkolů, kontaktní údaje, ale také pro definici nabídek. Seznamy tedy hrají v HTML velmi důležitou roli. Důvodem k tomu je pečlivě se na ně podívat. V tomto videu se naučíte všechny typy seznamů, které HTML nabízí. Jsou to seznamy s odrážkami, číslované seznamy, definované seznamy a nabídkové seznamy. Kromě toho získáte tipy, jak vizuálně upravit seznamy podle potřeby.

Tabulky na webových stránkách stále hrají důležitou roli. To však platí pouze co se týče prezentace dat. Když ještě neexistovalo CSS nebo ho prohlížeče ještě skutečně nepodporovaly, sloužily tabulky k úplně jinému účelu: Dříve se prostřednictvím tabulek vytvářela struktura. V tabulkových buňkách se umisťovaly jednotlivé prvky stránky. Tvorba takových tabulkových monstřů patří díky CSS šťastně minulosti. Dnes jsou tabulky v webdesignu používány výhradně k tomu, ke čemu byly původně určeny: k přehlednému zobrazení dat.

Nádhermé tabulky nemusí nutně být složeny z identického počtu buněk v jednom řádku. Toto videoškolení ukazuje, jak můžete propojit buňky tabulky. Ve druhé části se dozvíte něco o popisech tabulek. Tento aspekt je důležitý, protože tak můžete návštěvníkům okamžitě ukázat, o jaká data vlastně jde. Videoškolení uzavírá podrobný pohled na design tabulek v HTML. V tomto sektoru došlo ve srovnání s předchozími verzemi HTML k mnoha změnám.

Téměř žádné webové stránky neobejdou bez grafiky. Není tedy divu, že téma grafiky má v této sérii také důležitou pozici. V tomto a následujících video-trénincích bude ukázáno, jak můžete integrovat grafiku do svých webových stránek. Na začátku však stojí jiný aspekt v popředí: Které obrazové formáty jsou vůbec vhodné pro online použití? Ve druhé části pak jde o to, jak lze odkazovat na cesty obrázků.

Jak se obrazovky obecně odkazují, bylo ukázáno v předchozí části. Nicméně konec obrázků v téhle oblasti zdaleka dosažen není. Ve skutečnosti lze obrázky blíže popsat pomocí příslušných atributů. O tom je řeč na začátku tohoto videa. Ve druhé části je popsáno, jak lze titulky obrázků realizovat pomocí syntaxe HTML5.

Sůlí v polévce internetu je možnost propojení obsahu pomocí hypertextových odkazů. Kdyby neexistovaly tyto hypertextové odkazy, bylo by internet v jeho dnešní podobě nepředstavitelné. Jaké varianty nám nabízí HTML ohledně definice hypertextových odkazů, se dozvíte v tomto a v dalším videu o výcviku.

HTML nabízí ohledně hypertextových odkazů mnohem více možností než to, co bylo ukázáno v předchozím videu. Například můžete definovat odkazy na e-maily a nabídnout stahování souborů. Tyto a další varianty hypertextových odkazů se dozvíte v tomto videu.

Na samém začátku: Právě v HTML5 udělaly formuláře velký krok vpřed. Díky mnoha novým typům polí je možné vytvářet velmi zajímavé formuláře. Tyto nové možnosti se samozřejmě ještě naučíte. Ale v tomto videotréninku začínáme s nezbytným náčiním, které potřebujete k definování formulářů. Na začátku jde o vytváření jednořádkových polí pro zadávání. Uvidíte, jak se dají tyto definovat, jak je možné je předem vyplnit hodnotami a nastavit je jako needitovatelná. Stejně tak se dozvíte, jak definovat pole pro zadání hesla. To je koneckonců typ pole, který se čas od času vždy hodí.

V tomto videu se dozvíte o dalších typech polí, které můžete použít ve svých formulářích. Konkrétně se jedná o pole výběru, radio tlačítka a zaškrtávací políčka. Všechny tyto prvky jsou důležité, které budete opakovaně potřebovat ve formulářích. Důvodem tedy je zaměřit se na tyto a další prvky blíže.

S HTML5 došlo zejména v oblasti formulářů ke značnému pokroku. Důvodem k tomu je detailní prozkoumání mnoha nových funkcí formuláře, které je nyní možné používat. Skončilo se totiž se stávajícími polemi pro zadávání. Konečně je možné definovat posuvníky, pole datumů atd. - a to zcela bez použití JavaScriptu.

Začátek do světa formulářů HTML5 umožnil předchozí video cvičení. Nicméně konec tyčky tím zdaleka nebyl dosažen. Skutečně má HTML5 na tomto poli mnohem více co nabídnout.

V HTML5 existuje kromě představených typů polí také řada dalších zajímavých aspektů. Například nyní můžete s velmi malým úsilím implementovat funkci automatického doplňování polí formuláře podobně jako Google. Tyto a další věci jsou ukázány v tomto video tréninku.

Kdo se zabývá HTML5, nemůže se vyhnout tématu sémantiky. Budete se v tomto a následujícím videu školení seznámit s nejdůležitějšími prvky, které HTML5 přináší, s nimiž můžete řádně strukturovat dokumenty. Tato logická struktura je vlastně nezbytná, pokud chcete své webové stránky udělat budoucností odolnými.

HTML5 přináší mnoho nových strukturálních prvků. Které to jsou základně, bylo již ukázáno v předchozím videu. Nyní jde o to tyto prvky prakticky využít. Jelikož tyto prvky zajistí pro dokumenty sémantickou strukturu. V tomto videu se především naučíte dva prvky article a section. Tyto prvky zajišťují základní strukturu HTML dokumentů. Na konci tohoto videa se také podíváme na rozdíly mezi div, article a section.

V HTML5 mohou být dokumenty rozděleny nejen na články a sekce. Ve skutečnosti existuje mnoho dalších prvků pro semantickou strukturu, jako jsou hlavička, zápatí atd. Tyto prvky rozhodně stojí za to, abychom si je ještě jednou podrobněji prohlédli.

V tomto posledním videotréninku série prvků sémantiky se dozvíte více strukturujících prvků. Skutečně nabízí HTML5 prvky pro navigační oblasti, okraje a pro shrnutí.

Ve starších verzích HTML bylo vkládání multimediálního obsahu noční můrou. Snažilo se to udělat pomocí kombinace prvků object a embed, aby se video a zvuk dostaly na webovou stránku. Bylo nejisté, zda se vložené video skutečně přehraje. I v této oblasti se v HTML5 udělalo hodně.

Jak můžete vidět, jak vložit videa. Ale videa samozřejmě nejsou vše, co můžete svým návštěvníkům na webu představit. V tomto video-tréninku je popsáno, jaké možnosti vám HTML5 poskytuje pro vložení zvukových souborů a flashových filmů. Protože také tyto věci je občas nutné zobrazit na svých stránkách.

V HTML5 již nejsou rámce. Jejich nástupce, iFramy, se však také dostaly do nové éry HTML a jsou součástí HTML5. Zatímco klasické rámce rozdělují stránku na samostatné části, lze prostřednictvím iFramů vložit do webových stránek libovolné zdroje.

HTML slouží k strukturování obsahu. Jakmile jde o designování stránky, CSS (kaskádové styly) přicházejí do hry. Protože právě kombinace CSS a HTML umožňuje vytvářet atraktivní webové stránky ze strohé HTML struktury. Důvodem tedy je, podívat se podrobněji na CSS.

Pojetím, se kterým se vám vždycky budete setkávat v souvislosti s CSS, jsou "selektory". Pomocí těchto selektorů se nakonec určují prvky, které mají být formátovány pomocí CSS. V tomto videovýcviku se seznámíte s prvními selektory. Zde vám budou představeny selektory pro prvky, ID a univerzální. S těmito selektory se budete setkávat den co den, když budete navrhovat své webové stránky pomocí CSS.

Některé selektory byly představeny v předchozím videu. Samozřejmě CSS nabízí mnoho dalších selektorů.

V tomto posledním tréninkovém videu o selektorech vám představím velmi speciální formu selektorů. Jedná se o tzv. pseudotřídy a pseudoelementy. Jedná se o takové selektory, které se nevztahují k určitým HTML elementům, ale jsou generovány výstupním zařízením.

V tomto a příštích video-trénincích vám představím nejdůležitější vlastnosti CSS. Mimochodem, zde nejde o to, abych vám představil referenci CSS. Místo toho byste měli získat představu o tom, co je s CSS všechno možné. Začínáme s úpravou písma. V tomto video-tréninku budou představeny všechny věci, které souvisejí přímo s tzv. písmy. Mějte na paměti, že ve vztahu k úpravě písma existují další vlastnosti, které budou představeny v příštím video-tréninku.

Na vlastnostech CSS, které jsou představeny v tomto video tréninku, je možné opticky upravovat texty a znaky. Například lze změnit mezery mezi jednotlivými písmeny a zarovnat text. Tyto vlastnosti vám také pomohou prezentovat texty atraktivně.

Samozřejmě nemohou chybět definice barev a grafické pozadí u CSS. Odpovídající vlastnosti jsou představeny v tomto video tréninku. CSS má skutečně na tomto poli mnoho možností k nabídnutí. Takže není možné jen jednoduše definovat barvy a obrázky. Jsou také možné opakující se pozadí.

Právě když jde o tvorbu webových stránek, budete se setkávat s definicí vnějších okrajů a mezer. V posledních videích této série bude mimochodem realizován komplexní ukázkový projekt, ve kterém bude prakticky demonstrováno použití těchto a dalších vlastností CSS.

CSS nabízí pro odstavce a bloky textu několik zajímavých vlastností, které bych vám chtěl představit. Například můžete zarovnat textové odstavce doleva a doprava.

Když se hovoří o rámečcích, většina lidí nejspíš nejprve pomyslí na tabulky. A skutečně hrají rámečky ve spojení s tabulkami důležitou roli. Nicméně pomocí CSS lze vyzdobit rámečky také na jiných prvcích. A jak tyto rámečky nakonec vypadají, lze také explicitně určit pomocí definic v CSS.

Jak se definují seznamy, už asi víte dlouho. Nakonec bylo celé toto téma podrobně ukázáno v rámci této série. Chic seznamy však nejsou samozřejmě hned z domu. Aby vypadaly také vizuálně přitažlivě, existují příslušné CSS vlastnosti. Které to jsou a jak se používají, se dozvíte v tomto videotréninku. Ve druhé části pak půjde o tzv. počítadla, s nimiž lze také realizovat složitější číslování.

Při tvorbě webových stránek bude tzv. boxový model vaším neustálým průvodcem. Protože tím se nakonec stanovuje, jak a kde budou prvky umístěny.

Abyste mohli umístit prvky na webu na požadovaná místa, musíte využít určité vlastnosti CSS.

V předchozím video tréninku byla krátce zmíněna tzv. floatingová koncepce. Téma je však tak složité, že zde ještě jednou podrobně prozkoumáváme float. Skutečně se jedná o důležitý koncept v CSS. Jelikož pouze pokud tento koncept chápeme, můžeme skutečně vytvářet webové stránky.

V dosavadních videích byly položeny základy práce s HTML a CSS. Teď je samozřejmě také čas sklízet první plody. V dalších videích bude postupně vytvářena ukázková webová stránka. V tomto videu se však nejprve seznámíte s různými variantami rozložení. Vždy by mělo být výběr správného typu rozložení na začátku vašich úvah o designu webové stránky.

Při našem projektu se budu řídit typickým sloupcovým rozvržením. Předtím než vám tento projekt však předvedu naživo a barevně, chci vám konkrétně ukázat, jak můžete sami implementovat sloupcová rozvržení. Zaměříme se zde na rozvržení se dvěma a třemi sloupci, protože tyto stále představují základ pro většinu webových stránek.

V následujících video trénincích vám ukážu, jak krok za krokem vytvořit webový design. Existuje mnoho různých přístupů. Často jsou designy vytvářeny v programu Photoshop. Jednotlivé prvky stránky jsou poté vyříznuty a opětovně spojeny jako webová stránka pomocí CSS a HTML. Stejným způsobem je toto postupováno i zde. Místo Photoshopu však používám dostupné zdarma GIMP. Popsané kroky lze však také provést v programu Photoshop.

První kroky směrem k vlastnímu rozložení byly provedeny v předchozím video tréninku. Samozřejmě tu chybí ještě mnoho prvků. Ty budou přidány v tomto video tréninku. Jakmile je rozložení hotové, pokračuje se s vystřihováním, tzv. slicením. To je konečný pracovní krok, skrze který je možné vytvořený design prakticky realizovat pomocí HTML a CSS.

Vytvořili jste design. Teď přichází na řadu jeho praktické provedení. V tomto video tréninku společně vytvoříme základní strukturu webu v HTML.

Základní struktura stránky je hotová, nicméně vypadá zatím poměrně stísněně. Tento videokurz bude rozvíjet obsah stránky. Prvním zaměřením bude menu, které se nachází v horní části stránky. Navazující je pravé a dolní menu.

Jedním z rozhodujících aspektů pro vizuálně atraktivní webové stránky je samozřejmě jejich typografie. Během této řady jste již poznali možnosti, které vám HTML a CSS nabízejí pro úpravu písma. V tomto video tréninku budou tyto možnosti využity k oživení stránky. Při tom se mimochodem nebudeme věnovat pouze klasickým variantám. Kouzelné slovo pro použití "exotických" písem je @font-face.

Obvykle by měli návštěvníkům poskytnout možnost kontaktovat se. V nejjednodušším případě stačí uvést telefonní číslo a / nebo e-mailovou adresu. Toto je možné provést, ale pro návštěvníky to není zvláště pohodlné. Proto v tomto video tréninku vytvoříme formulář, přes který se návštěvníci mohou jednoduše s námi spojit. A samozřejmě budou využity možnosti, které nám nabízí HTML5 a CSS3.

Základní struktura a základní design formuláře jsou definovány a dokončeny. A ve skutečnosti formulář již nyní vypadá poměrně přitažlivě. Díky CSS3 je však ještě mnohem více možností, pokud jde o optické vylepšení formuláře. V tomto video tréninku bude formulář ještě trochu upraven.

Už v tuto chvíli jste jistě věnovali hodně času a práce vývoji vašich webových stránek. Od konceptu, přes design layoutu až po jeho realizaci v HTML a CSS. Dostatečný důvod tedy představit své webové stránky světu konečně. Právě o tomto bude toto video školení. Ukážu vám, jak můžete zveřejnit webové stránky online. Nejprve se dozvíte, jak získat správného poskytovatele a vhodný balíček pro webové stránky. Poté budou data nahrána na server s pomocí oblíbeného FileZilly. A pak, no, pak jsou stránky skutečně online.

V tomto videu vám chci dát malý náhled do správné vývojového prostředí pro tvorbu webových stránek. Ti, kteří již napsali kompletní webové stránky nebo menší jednotlivé stránky, obvykle už mají tyto editory a mohou toto video přeskočit.

Ukázáno bude:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerplate je mocná šablona pro webové stránky HTML5 a CSS3; dělá HTML5 co nejvíce CrossBrowser-kompatibilní a obsahuje několik skvělých kódových šablon v oblasti JavaScriptu, CSS3 a samozřejmě také HTML.

V tomto videu vám chci představit tyto funkce. Pro začátek v oblasti HTML5 a CSS3 aktuálně neexistuje lepší šablona.

V tomto video tréninku vám chci představit některé velmi užitečné nástroje, které lze použít k vývoji HTML5 a CSS3.

K nim patří:
html5css3box.com
kuler.adobe.com (nyní https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com