Novinky

Přístupnost a použitelnost
Přístupný a použitelný web je ukázka práce dobrého webdesignera. Naopak nepřístupný a málo použitelný web je ukázkou práce špatné a odfláknuté. Přístupnost a použitelnost spolu souvisejí a nejsou od sebe striktně odděleny. POUŽITELNOST Řekneme si několik vlastností použitelného webu: Pokud na web přijdu, vím, kde jsem, vím, o čem web je. Navigace na webu (menu) je zřetelná a je umístěna na lehce povšimnutelném místě. Rozhodně bych neměl na stránce rolovat, abych se k menu dostal (ani na menších monitorech). Písmo je dostatečně velké (číst blechy opravdu …

Validátor
Validátor je obecně nástroj ke kontrole platnosti (správnosti) něčeho. V této kapitole bude řeč o validátoru HTML kódu. Jedná se o on-line program (existují ale i validátory ke stažení a instalaci či jako doplňky pro webový prohlížeč Firefox), který prověří, zda náš zdrojový kód vyhovuje předepsaným pravidlům. Oficiální validátor od W3C W3C – World Wide Web Consorcium je sdružení, které vyvíjí standardy ohledně tvorby www. W3C také provozuje validátor, který umí zkontrolovat správnost zdrojového kódu našich stránek (vždy zkontroluje danou html stránku). Kód lze kontrolovat třemi …

Velikost písma
Písmo se dá na stránkách definovat různými způsoby. Nejprve si povíme trochu teorie a pak si ukážeme konkrétní způsob definice velikosti písma. Jednotky Velikost písma můžeme definovat: 1. absolutně (absolutními jednotkami): mm, cm, in (palec = 2,54 cm), pt (1/72 palce),pc (pica = 1/6 palce), xx-small, x-small, small, medium, large, x-large, xx-large2. relativně (relativními jednotkami): ex (výška malého písmene x), em (šířka velkého písmene M), %, smaller, larger, px (pixel) Pixely (malé čtverečky, ze kterých je složen obraz na monitorech) jsou jednotky relativní – na různých zobrazovacích …

Správná struktura kódu
HTML kód lze psát v podstatě dvojím způsobem. Buď hezky, nebo prasácky (přestože se toto slovo může někomu zdát trochu drsnější, označení „prasácký kód“ pro špatně sestavený HTML kód je poměrně zažité). Takový kód tvoří většinou WYSIWYG editory, a někteří „webdesigneři“. My si ukážeme, jak tvořit kód správný a hezký. Podstatou je zachování logické struktury. Ukázka prozradí víc. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="cs">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8">  <title></title>  <meta name="description" content="">  <meta name="robots" content="all,follow">  </head>  <body>  <h1>Nadpis (název) mého webu</h1>  <h2>Název kapitoly</h2>    <p>Obsah kapitoly…</p>    <p>Další odstavec obsahu…</p>  <h3>Podnadpis kapitoly</h3>  <ul>    <li></li>    <li></li>    <li></li>  </ul>  <hr>  <h2>Název další kapitoly na …

Jak nahrát stránky na Internet
K tomu, abychom mohli své stránky zobrazovat na Internetu, potřebujeme v podstatě 3 věci: 1. Doménu Jedná se v podstatě o název stránky, který ťukáme do adresního řádku v prohlížeči – www.seznam.cz, www.pestujemeweb.cz, www.google.com. Samotný název (seznam, pestujemeweb, google) se označuje jako doména druhého řádu. Koncovka (cz, com, …) pak označuje buď zemi, nebo zaměření dané stránky. Com (z anglického slova commercial) značí často zahraniční komerčně zaměřené weby a například koncovka name se pak hodí třeba k prezentaci osoby. Koncovka je pak označována jako doména 1. řádu (TLD – Top Level Domain). A kde doménu získáme? Název si …

Doctype
Pokud chceme tvořit kvalitní HTML kód, a tím i kvalitní www stránky, neměli bychom na Doctype zapomínat. V předchozích kapitolách je v ukázkách kódu Doctype uváděn. Nyní si k němu řekneme trochu víc. Značka !DOCTYPE určuje, jak má být (podle jaké definice) náš HTML dokument zpracováván.Celý zápis si nyní rozebereme. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">!DOCTYPEPočáteční značka; určuje, podle které definice se má dokument zpracovávat.HTMLŘíká, že se jedná o HTML dokument.PUBLICDefinice dokumentu je veřejně dostupná.−Zda organizace (viz dále) má ISO; mínus znamená, že ne. (Tak nějak …

HTML a odkazy
Odkazům jsem věnoval samostatnou kapitolu, jelikož se jedná o důležité prvky stránek, bez kterých se většina webů neobejde. Odkazy jsou pak ty části webu, na které lze kliknout. TagVýznam taguaOdkaz; to, co je uzavřeno v tomto tagu, je odkaz (tag je párový). Příklad:<a>Já jsem odkaz</a> Zobrazme si tento příklad v prohlížeči a najeďme na něj myší. Tak co, kliká? Nekliká. Aby šlo na odkaz kliknout, musíme k tagu a přidat důležitý atribut href. Ten určuje, co se po kliknutí stane – kam se dostaneme. AtributVýznam atributuhrefUdává adresu místa, na které se po kliknutí na odkaz …

Meta tagy
Jedná se o informace, které se zapisují do hlavičky. Kódování <meta http-equiv="content-type" content="text/html; charset=utf-8"> Tomuto metatagu jsme se věnovali již na stránce Co je HTML, takže sem pouze okopíruji, co jsem napsal tam. Tento meta tag bychom měli psát vždy před tag title. V některých případech by se pak stránka nemusela v Internet Exploreru zobrazit (ale nevím, pro jaké verze IE to platí). Konkrétně pak kódování utf-8 (doporučuji ho používat) dovoluje psát jakékoli znaky, klidně i čínské.Pokud se chcete o kódování dozvědět více informací, mrkněte na Čeština na webu v HTML. Krom kódování nese ještě jednu informaci, která …

Obrázky
Abychom mohli své stránky zkrášlit (nebo zkazit), povíme si, jak do stránek napasovat obrázky. Obrázky se do HTML dávají pomocí následujícícho nepárového tagu. TagVýznam taguimgVložení obrázku do stránky Podobně jako u tagu pro odkaz, i pro tag img máme důležitý atribut, který udává cestu k obrázku, jenž se má na našich stránkách objevit. AtributVýznam atributusrcCesta k obrázku; pozor na častý překlep scr, obrázek by se nezobrazil. Celý zápis vypadá takto:<img src=""> Mezi uvozovky pak napíšeme cestu k obrázku, stejně jako u odkazů. Tento zápis na zobrazení obrázku stačí, ale chybí mu další důležité atributy: AtributVýznam atributualtAlternativní text; …

Co je HTML
HTML – HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu stránky význam a také dokument částečně formátují. Tagy máme párové a nepárové. Pokud se nám nechce stále přepínat mezi českou a anglickou klávesnicí (Alt + Shift), abychom mohli psát < a > potřebné pro zápis tagů, můžeme tyto znaky psát na české klávesnici pomocí pravého Alt a ? či . Případně v PSPadu zkuste Ctrl + ?. Jak zapisujeme tagy 1. Párový tag – má začátek a konec:<p>Já jsem krátký odstavec.</p> <p> — začátek – …

Tabulky
Tabulky bývaly ve světě webdesignu mocným hráčem. V dobách, kdy podpora CSS v prohlížečích byla mrzká, se pomocí tabulek řešilo rozmístěná jednotlivých prvků na stránce – tzv. tabulkový layout, který však měl své nevýhody (například delší načítání takto utvořené stránky). I když se dnes se stránkami tvořenými pomocí tabulek můžeme setkat, k rozvržení prvků na stránkách bychom měli využívat CSS. Avšak i dnes mají tabulky své nezastupitelné místo. Využíváme je pro tabulková data; prostě pro obsah, který chceme mít v tabulce (a který se samozřejmě do tabulky hodí). Pro tvorbu tabulek využíváme následujících tagů. TagVýznam …

Přehled tagů
Tagů je spoustu. Pokud bych teď měl zpaměti všechny napsat, do kupy bych to nedal.V následujícícm přehledu jsou uvedeny nejčastěji používané tagy, se kterými si často vystačíme. Pokud Vám však následující přehled bude málo, můžete se podívat na mnohem rozsáhlejší přehled tagů i s jejich popisem, nebo se podívat na abecední seznam všech tagů. Párové tagy Například tag li není v HTML povinně párový (nemusí mít ukončovací značku). V XHTML (rozšířené verzi HTML) však je povinně párový. Ideální tedy bude, pokud ho budem psát vždy jako párový, pak si nemusíme lámat hlavu, zda …