Blog

Tečka, čárka, mezera

Za tečkou (vykřičníkem, otazníkem) na konci věty a čárkou ve větě se píše mezera. Před tečkou a čárkou se mezera nepíše. Pokud si toto pravidlo budeme pamatovat, bude náš písemný projev zase o kousek inteligentnější. Mezera za čárkou se píše i ve výčtech, které nejsou přímo součástí věty. Např.: melouny, hrušky, jahody, jablka. Mezeru za čárkou pak nepíšeme u desetinných čísel. …

Lorem Ipsum

Možná jste už párkrát narazili na stránky, jejichž text se tvářil jako latina a často začínal slovy Lorem ipsum. Co to tedy bylo za text? Lorem ipsum je pseudolatinský text (tváří se jako latina, i když některá slova význam mají), který se používá jako výplňový text grafických návrhů (nejen) webových stránek. Máme tak možnost stránku vidět v podobě, ve které bude vypadat, až se naplní vlastním obsahem. Návrh stránky s tímto textem vypadá mnohem přirozeněji, než kdybychom psali například Bla bla bla. Tento text si pak můžete nechat vygenerovat …

Co na žádný web nepatří

Hrající hudba — Není nic horšího, než když sedíte, v klidu prohlížíte www stránky a najednou na Vás začne řvát nějaká odporná hudba. Takové stránky já (a nejen já) bleskurychle opouštím. Neděláme přeci stránky, aby nám z nich lidé utíkali. Pokud však mermomocí chcete mít na svém webu hrající hudbu, měla by být standardně vypnutá a uživatel by si ji mohl zapnout pouze, pokud by měl zájem; a taky by měla zase jít rychle vypnout. Různé animované obrázky. Dále například jezdící text za …

Po čem všichni touží

I ti největší realisté mají své ideály. Ani vrozený skepticismus, ani zkušenostmi potvrzená pravda o tom, jak to v životě chodí, nezabrání, aby se občas nezasnili. Všichni totiž máme nějakou představu, jak by to ideálně mělo v životě vypadat - ať už se týká partnerského soužití, budování kariéry nebo třeba našeho vzhledu. Že to ve skutečnosti dopadá trochu jinak, není jenom naše vina nebo nedostatek vytrvalosti a snahy. Klacky pod nohy nám hází genetika, okolí (např. na vztah musí být …

Co je CSS

Obecně řečeno, CSS je nějaký zápis, který určuje vzhled (barvy, dekorační obrázky, rozmístění prvků) HTML dokumentu. CSS je zkratka slov Cascading Style Sheets. Do češtiny bychom to přeložili jako Tabulky kaskádových stylů. V praxi se pak častěji používají tyto názvy: Kaskádové styly, styly, CSS soubor(y). Soubor s kaskádovými styly má příponu css. Sám o sobě je k ničemu. Jeho funkčnost se projeví až po propojení s HTML souborem. A proč vlastně kaskádové? Protože při psaní CSS souboru se využívá tzv. kaskády. Co je tím myšleno si povíme dále. HTML dokumentu můžeme různými CSS soubory zajistit různé …

Připojení CSS k HTML

Způsoby připojení CSS k HTML 1. Přímé připojení stylu k prvku HTML Dělá se tak pomocí atributu style. Ukážeme si na příkladu:Nejprve zapíšeme zápis pro neostylovaný nadpis druhé úrovně. To je pro nás už hračka. <h2>Nadpis druhé úrovně</h2> Nyní si ho ostylujeme pomocí atributu style, určité vlastnosti a její hodnoty. <h2 style="color: green;">Nadpis druhé úrovně</h2> Pozn.: U noční verze webu má nadpis přidáno světlé pozadí, kvůli lepší čitelnosti. Na konci zápisu není nutné středník psát. Pokud ale chceme nějakou vlastnost přidat, středník je důležitý k jejímu oddělení. Je tedy lepší psát středník i …

Div a span

Div a span jsou neutrální tagy – nedávají obsahu v HTML dokumentu význam a sami o sobě nijak HTML dokument neformátují. Jedná se o párové tagy. Napíšeme-li do HTML dokumentu například <div>Div je neutrální tag.</div> a dokument poté zobrazíme v prohlížeči, uvidíme, že tag div se nijak zvlášť neprojevil. Obrovského využití však neutrální tagy naleznou ve spojení s CSS. Pomocí CSS vlastností se tyto tagy dají všemožně formátovat (můžeme jim přidělovat rozměry, umísťovat je na stránce, kam se nám zlíbí – pozicovat je, barvit je atd.). Především pomocí divů se pak tvoří layouty stránek …

Zápis CSS

Začneme hned příkladem. Chceme mít třeba odstavce modrou barvou s prostrkanými písmeny ve slovech (mezery určité velikosti mezi písmeny). p {  color: blue;  letter-spacing: 2px;  } Pozn.: U noční verze webu má odstavec přidáno světlé pozadí, kvůli lepší čitelnosti. Obecný zápis vypadá následovně: selektor {  css-vlastnost1: hodnota-css-vlastnosti1;  css-vlastnost2: hodnota-css-vlastnosti2;  } Vlastnosti mohou být zapsány v libovolné pořadí. Selektorem může být tag, třída, identifikátor nebo * (viz další kapitolu). Přehled CSS vlastností a jejich hodnot je v samostatné kapitole. Za hodnotou vlastnosti se pak píše středník sloužící k oddělění jednotlivých vlastností. Na konci tedy být nemusí, ale jak již jsem zmiňoval, …

Třídy a identifikátory

Třídy Mějme 3 odstavce z nichž jeden chceme mít červený: CSS .vyrazny {color: red;} Třída začíná tečkou a poté následuje název třídy (mezi tečkou a názvem není mezera!).Název píšeme bez diakritiky a mezer. Název může být libovolný, avšak neměl by obsahovat znaky jako otazník, vykřičník, … a neměl by začínat číslicí, nebo nám to nepojede. Možná teď někoho napadne, proč jsem zvolil slovo vyrazny a ne třeba cerveny. S barvami to je totiž trochu ošidnější. Co když se mi červený odstavec přestane líbit a předělám ho třeba na oranžový …

Spodní lišta jako na Facebooku

Tato kapitola ukazuje možné řešení lišty naspodu okna prohlížeče, která neroluje spolu s obsahem. Její šřka je 90 % šířky okna prohlížeče – je tedy natahovací. Řešení je funkční i v IE 6 s téměř nepostřehnutelným nedostatkem (viz dále). Nevím, jak to mají uděláno na Facebooku, ale tam se lišta chová perfetně i v IE 6. CSS * {margin: 0; padding: 0;}html {height: 100%; font-size: 62.5%;}body {   height: 100%;   background-color: #FFFFFF;   color: #101010;   text-align: center;   font: 1.6em Verdana, Arial, Helvetica, sans-serif;   }#wrapper {height: 100%; margin: 0 auto;}#page {width: 86%; margin: 0 auto; text-align: left;}p {margin: 0 …

Změna obrázku při najetí kursoru

Často na Internetu narážím na dotaz, jak udělat, aby se obrázek, na který najedu kursorem myši změni, změnil na jiný. Nejčastější odpovědí bývá, že to lze řešit pomocí JavaScriptu. JavaScript však někdo má v prohlížeči vypnutý. I když se jedná o malou část uživatelů/uživatelek, proč to neudělat tak, aby to fungovalo i jim. Navíc, kvalitní JS řešení je krapánek složitější. Řešit se to dá pomocí CSS. Ano, ano, i styly mohou mít někteří vypnuty, ale to už je pouze minimum případů. Následující …

Analysér kontrastu barev

Jedná se o užitečný nástroj, který nám poví, zda máme na stránkách dostatečně kontrastní text. Trocha teorie Analysér kontrastu barev počítá vzájemný kontrast dvou barev. Můžeme tak zjistit kontrast textu vůči jeho pozadí. Nejvyššího kontrastu pak dosáhneme, pokud porovnáme černou a bílou „barvu“. Kontrast je počítán pomocí algoritmu založeného na světelnosti. Starší verze analyséru využívala jiného algoritmu – rozdíl jasu/rozdíl barvy. Na který si můžeme v novější verzi přepnout. Kolik je dostatečný kontrast Pokud chceme na svých stránkách mít dostatečně kontrastní písmo, měli bychom …