Skip to Content

(X)HTML a CSS

Flexbox

Tento modul je speciálně určený pro rozvržení layoutu na webové stránce. V dnešní pokročilé době internetu je občas obtížné zpracovat složité layouty, které už neobsahují jen pár řádků textu a obrázky, ale skládají se z řady různých modulů poházených po stránce. Další potíže vznikají s nutností přizpůsobit jejich rozložení na obrazovkách rozličných zařízení. Responzivní design už je v této době na obsáhlých webech skoro nevyhnutelný.

Responzivní design – dotazy na médium

Existují dva způsoby, jak vytvářet webové prezentace pro rozličná zařízení. Musíme počítat nejen s odlišnou velikostí obrazovky, ale také třeba s úpravou kontextu.

První způsob spočívá ve vytvoření tzv. flexibilní mřížky – to znamená zadávat rozměry v relativních jednotkách např. procentech. (width, margin, padding). Taková webová stránka se může přizpůsobovat různým velikostem zařízení.

HTML 5 - data na straně klienta

Novým mechanismem k ukládání dat na klientské straně (webovém prohlížeči), je technologie lokálních úložišť Web Storage.

Skrytí textu za obrázkem (za pozadím)

Stalo se vám někdy, že jste potřebovali do stránky místo obyčejného textu vložit nějaký estetičtější objekt? Taková situace nastává poměrně často, ale přesto by se skrytí nějakého textu mělo používat co nejméně a co nejopatrněji. Měli bychom se tohoto vyvarovat zvláště v případě skrytých účelových textů např. pro zvýšení návštěvnosti a pozici ve vyhledávačích. Proto pro optimalizaci nepoužívejte např. žádných skrytých odkazů, neboť při jejich zjištění dochází k penalizaci ze strany internetových vyhledávačů.

!important a použití hacků v IE

Klauzule !important zvyšuje prioritu nějakého pravidla uvnitř kaskády ve stylech. Kaskáda funguje tak, že každému pravidlu přiděluje různou míru důležitosti. Je tomu tak například u více různých hodnot jedné vlastnosti přidělené nějakému prvku. Slovo important svým překladem vystihuje svoji úlohu - určuje nejvyšší prioritu ve stylech.

Bublinová nápověda pomocí CSS

Hledáte způsob, jak si ve svém stylu zobrazit doplňkové informace při najetí na odkaz např. v navigaci? Bublinová nápověda se většinou zobrazuje pod elementem s nastaveným atributem t i t l e, na který najedeme myší . Např.:

<a href="http://www.webtvorba.com/" title="vše o tvorbě internetových stránek">Webtvorba.com</a>

Vodorovná navigační lišta

Vytvoření vodorovné navigační lišty s vlastním pozadím a grafickými oddělovači může být často velkým oříškem. V tomto příkladě využijeme seznamy, které jsou součástí např. vertikálních navigačních lišt. Tyto seznamy budou obsahovat odkazy na různé jiné webové stránky (značka a). Využijeme celou oblast tlačítek jako aktivní, plus efekt rolloveru při najetí na text, zajišťován změnou barvy textu.

Obrazové mapy pomocí CSS

Obrazové mapy umožňují specifikovat oblasti obrázku, které pak fungují jako oblasti reagující na kliknutí. Je mnoho možností jak dosáhnout efektu klikací mapy, například pomocí elementu map, který se v dokumentu nijak nezobrazuje, jen popisuje pomocí tagu area oblast na kterou se dá kliknout jako na odkaz. Dále k tomuto efektu můžeme využít technologii Flash a nebo právě kaskádové styly, jehož postup je zde popsán.

Tvorba tabulek - 2.část

Tuto část začneme poněkud složitějším grafickým prvkem a tím je rámeček tabulky. Aby se rámeček vykreslil je třeba nadefinovat různé hodnoty. Tagu můžeme přiřadit např. velikost, styl a barvu rámečku.
table
{ border : 2px dashed red }
Hodnotu šíře rámečku vyjadřujeme buď slovy (thin, medium, thick), anebo jednotkami (1px, 2px..).

Tvorba tabulek - 1.část

Tabulky by se měli používat na zobrazování dat, která jsou k tomu logicky určená, nikoliv k formátování celého obsahu webových stránek. Za prvé zanášíme dokument zbytečnými formátovacími tagy - takové stránky jsou velmi rozsáhlé v kódu, což jistě není pro nás ani pro čtenáře přínosem. Co je ale ještě důležitější je správně strukturovaný obsah, který dosáhneme jedině pomocí CSS. Orientace v tabulkovém layoutu je značně problematická jak pro například nevizuální prohlížeče, tak i pro vyhledávače.

Syndikovat obsah