Struktura dokumentu

Po rychlé zobrazení alespoň částečného obsahu stránky je vhodné dokument rozdělit minimálně na dva samostatné bloky.

Záhlaví stránky

• logo
• název stránky

Tělo stránky

• obsah (pokud možno před navigací)
• navigace
  • primární
  • sekundární
  • hlavní menu
• postranní sloupec
  • vyhledávání
  • změna jazyka
  • kategorie
  • oblíbený obsah
  • poslední komentáře
  • odkazy
  • reklama
• zápatí
  • copyright
  • kontaktní informace
  • mapa stránek
  • RSS kanály

Grafický návrh

Webový dokument má neurčité rozměry závislé na velikosti zobrazovacího zařízení (pokud je vůbec nějaké použito např. u zrakově postižených). Webový dokument je možné vnímat podobně jako pohled např. na toaletní papír (při větším dokumentu vidíte vždy pouze jeho část).

Posouvání obsahu (scrolling)

• horizontální – v našich podmínkách nevhodné
• vertikální

Šířka obsahu

Lidské oko dokáže najednou vnímat plochu přibližně o rozměrech 800x600 bodů.

• minimální šířka obsahu
  • pozor na dlouhá slova, vložené objekty, odkazy na soubory s dlouhými názvy atd. (zejména u vícesloupcového rozvržení)
• maximální šířka obsahu
  • ideální šířka textového bloku (sloupce) je přibližně 30-70 znaků na řádek

CSS vlastnosti

• overflow
• min-width, max-width
  • IE6- tyto CSS vlastnosti nezná, ale je možné jej to "naučit" pomocí vlastnosti width:expression...

Grafika

Pro práci s grafikou je vhodné mít:

• zkalibrovaný monitor, projektor, tiskárnu, skener, fotoaparát atd. (např. kalibrační sonda x-rite)
  • při předávání dokumentů předávat i barevný profil monitoru (ICC, ICM)
  • při úpravách fotografií používejte příslušný Minilab ICC (ICM) profil prostřednictvím kterého budete fotografie tisknout
• osvětlení 5200 K
• co možná největší zobrazovací plochu
• tablet (tablet notebook, tablet pc, apple tablet)

Pro média je vhodné na web umístit logo ve vektorové grafice společně s informacemi o barvách a písmu (např. Loga a grafický manuál | Česká pojišťovna)

Rastrová grafika

V rastrové (bitmapové) grafice je celý obrázek popsán pomocí jednotlivých barevných bodů (pixelů) uspořádaných do pravoúhlé mřížky. Každý bod má určen svou přesnou polohu a barvu. Kvalitu záznamu obrázku ovlivňuje především rozlišení (zobrazení 96 dpi, tisk 300 dpi) a barevná hloubka (počet barev).

Výhody:

• obrázek je možné vytvořit pomocí digitálního fotoaparátu nebo skeneru

Nevýhody:

• velké nároky na výkon počítače (plocha m² ≈ souboru o velikosti 1 GB)
• při změně velikosti dochází ke zhoršování kvality

Použití:

• úprava digitálních fotografií
• webová grafika
• vlastní grafická díla

Editory:

• Gimp (XCF)
• Adobe Photoshop (PSD)
• Corel PHOTO-PAINT (CPT)

Ukázka: Dove Evolution

Otázky

Jaký bude obrázek při změně rozlišení monitoru z 1024x768 px na 800x600 px?

1. menší
2. stejně velký
3. větší

Kolik pixelů má 12 Mpx foťák?

1. 120 milionů
2. 12 milionů
3. 12 tisíc

Vektorová grafika

Vektorový obrázek je složen ze základních geometrických útvarů jako jsou body, přímky, křivky a mnohoúhelníky.

Výhody:

• změna velikosti bez ztráty kvality
• obrázek je rozdělen na samostatné objeky, se kterými je možné pracovat odděleně
• mnohem nižší nároky na výkon počítače než u rastrové grafiky

Nevýhody:

• pracné vytvoření obrázku
• příliš složiné objekty zvyšují nároky na výkon počítače (nevhodné pro fotografie)

Použití:

• logo
• počítačová sazba
• diagramy
• animace
• vlastní grafická díla

Editory:

• Inkscape (SVG)
• Adobe Illustrator (AI)
• CorelDraw (CDR)

Bézierova křivka

Obrázek není složen z jednotlivých bodů, ale z křivek – vektorů.

Křivky spojují jednotlivé kotevní body a mohou mít definovanou výplň (barevná plocha nebo barevný přechod). Tyto čáry se nazývají Bézierovy křivky, které umožňují pomocí čtyř bodů popsat libovolný úsek křivky.

Křivka je popsána pomocí dvou krajních kotevních bodů a dvou editačních bodů, které určují tvar křivky. Spojnice mezi kotevním a editačním bodem se nazývá směrová úsečka a je tečnou k výsledné křivce.

Grafické formáty

Rastrové (bitmapové) formáty

Přehled základních rastrových formátů

Vlastnost	GIF	JPEG	PNG	TIFF
Model RGB	256 barev (8 bitů)	16 milionů (24 bitů)	16 milionů (24 bitů)	16 milionů (24 bitů)
Model CMYK		4 miliardy (32 bitů)		4 miliardy (32 bitů)
Gama korekce
Průhlednost	2 úrovně (1 bit)		256 úrovní (8 bitů)	256 úrovní (8 bitů)
Komprese	bezztrátová	ztrátová	bezztrátová	bezztrátová
Proklad
Animace
Vrstvy

GIF (Graphics Interchange Format)

• určení: archivace, webová grafika, nadpisy, plakáty, loga
• nevhodné pro: barevné fotografie

JPEG (Joint Photographic Experts Group)

• určení: fotografie, hladké přechody v tónu a barvě
• nevhodné pro: mnohonásobné zpracování a fotomontáže, perokresbu, text, ikonky (rušivé artefakty)

PNG (Portable Network Graphics)

• určení: archivace, text, čárová grafika, čisté barevné plochy a ostré rozhraní barev
• nevhodné pro: fotografie (5-10x větší soubor oproti JPEG)
• průhlednost PNG umí až IE7+
  • pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku

TIFF (Tag Image File Format)

• určení: tisk, archivace obrázků

ICO

Ikona favicon.ico (Favorite Icon) usnadňuje uživateli vizuální odlišení jednotlivých webů. Obsahuje několik vrstev stejného obrázku v různé kvalitě.

1. Vrstva (adresní řádek prohlížeče, minimalizované okno atd.):
   • velikost: 16x16 px
   • počet barev: 16 (4 bity)
2. Vrstva (hlavní panel systému atd.):
   • velikost: 32x32 px
   • počet barev: 256 (8 bitů)
3. vrstva (pracovní plocha atd.):
   • velikost: 48x48 px
   • maximální počet barev: 2³² (32 bitů)

Odkaz na ikonu umístěte do hlavičky (X)HTML dokumentu:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Nejlepším místem pro soubor favicon.ico je kořenový adresář (root) webu.

Tvorba a editace

Asi nejrychleji můžete vytvořit faviconu pomocí online aplikace Bradicon. Pro vytváření a editaci je možné použít např. aplikaci Gimp.

Poznámka:
V Internet Exploreru se ikona zobrazuje až po přidání webové stránky do oblíbených položek.

XCF

• nativní formát aplikace Gimp
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

PAT

• formát obrázků používaných nástrojem Plechovka a Razítko pro výplně vzorkem
• v aplikaci Gimp se ukládají do adresáře patterns

ABR

• formát pro stopy štětce

GBR

• formát pro stopy štětce
• mód:
  • RGB – otisk štětce je barevnou kopií stopy
  • odstíny šedi – pro otisk se použije aktuální barva popředí

GIH

• formát pro animované stopy štětce citlivé na směr pohybu štětce

PSD

• nativní formát aplikace Adobe Photoshop
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

CPT

• nativní formát aplikace Corel PHOTO-PAINT
• umožňuje ukládat společně rastrové i vektorové obrázky
• zachovává vrstvy, kanály a cesty

TGA

• textury 3D modelovacích programů

Vektorové formáty

SVG

• nativní formát aplikace Inkscape
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• založen na jazyce XML
• příklad využití SVG formátu na webu: Demonstration of the SVG Checkbox and Radio Button Object
• jednoduchý on-line SVG editor
• podpora v prohlížečích: IE9+ (IE6+ s Chrome Frame rozšířením), Firefox 1.5+, Opera 9.50+, Safari 4+, Chrome 1+

AI

• nativní formát aplikace Adobe Illustrator
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• lepší vektory než EPS

CDR

• nativní formát aplikace CorelDraw
• umožňuje ukládat společně rastrovou i vektorovou grafiku

PS (PostScript)

• nezávislý na zařízení, na kterém se má tisknout
• tisknutelná oblast je celý list papíru

EPS (Encapsulated PostScript)

• nezávislý na zařízení, na kterém se má tisknout
• tisknutelná oblast je pouze obrázek
• umožňuje ukládat společně rastrovou i vektorovou grafiku
• lepší barvy než AI

Digitální negativ

RAW [ro:] (surový, nezpracovaný)

• soubor RAW není jako obrázek přímo použitelný, ale obsahuje všechny potřebné informace k jeho vytvoření (obsahuje zpracovaná data ze snímače digitálního fotoaparátu)
• vlastnosti fotografie (např. vyvážení bílé) se dají upravit ještě stažením do počítače
• každý výrobce používá svoji vlastní příponu RAW soboru (RAW, NFG, DNG, CRW, CR2, NEF, ORF, MRW atd.)

 

Kontrola přístupnosti

World Wide Web Consortium

World Wide Web Consortium (W3C) je webová standardizační organizace, která se snaží o přístupnost webu z nejrůznějších zařízení (nejen z počítače):

• W3C Markup Validation Service
• W3C Link Checker
• W3C CSS Validation Service
• W3C Semantic Data Extractor
• W3C Feed Validation Servece
• W3C P3P Validator

Total Validator

Total Validator poskytuje souhrnnou kontrolu webové stránky:

• W3C Markup Validation Service nebo ISO/IEC definition
• přístupnost dle W3C WAI Accessibility Guidelines a US Section 508 Standard (Section 508, WCGA – Priority 1, 2, 3)
• kontrolu odkazů
• kontrolu pravopisu (English, French, Italian, Spanish, German)
• náhledy stránek v různých prohlížečích na různých platformách a v různých rozlišeních
• nástroje ke stažení umožňující kontrolu všech stránek webu před jejich publikováním
• rozšíření pro FireFox pro rychlou kontrolu jedním kliknutím

Xenu's Link Sleuth

Xenu's Link Sleuth umožňuje kontrolu odkazů stránky (i vnořených v CSS)

Cynthia Says

Cynthia Says umožňuje kontrolu stránky (Section 508, WCGA – Priority 1, 2, 3)

WAVE

Web Accessibility Evaluation Tool (WAVE) kontroluje dostupnost informací

Search Engine Optimization (SEO)

Optimalizace pro vyhledávače:

• vytváření a úprava webu takovým způsobem, aby forma a obsah webu byly vhodné pro automatické zpracování
• cílem je získat vyšší pozici ve výsledku hledání ve vyhledávačích
• lépe zpřístupňuje web nejen strojům ale i uživatelům

Kontrola:

• SEO servis
• SEO wamos
• (Google Webmasters)
• Alexa

 Barvy

• Check My Colours - kontrola barev s ohledem na minimální požadavky, které vyžadují metodiky WCAG 2.0 a 1.0 (v dnešní době je důležitá kontrola kontrastu, jas a rozdíl barev má již zastaralý algoritmus).

Požadavky uživatelů

Základní požadavky uživatelů na webové stránky:

1. Přístup k informacím i bez podpory stylů, skriptů, obrázků, appletů, flash animací atd. (případně zpřístupněte alternativní textovou verzi).
2. Rychlost načtní stránky – nízký objem dat (optimalizace).
3. Čitelnost (kontrast mezi popředím a pozadím stránky).
4. Odkazy jsou odlišeny od ostatního textu (nejlépe nejen barvou).
5. Možnost změny velikosti textu (±300%).
6. Nerozpadající se vzhled stránky při změně velikosti okna prohlížeče (zejména šířky) u vícesloupcovém zobrazení.
7. Tabulky obsahující záhlaví řádků, nebo sloupců.
8. Jedinečný grafický návrh.

Technické požadavky:

• vlastní doména druhého řádu
• zálohování
• ošetření chybové stránky 404
• robots.txt
• favicon.ico
• facebookové tlačítko "líbí se mi"

Aplikace

Kvalita webových stránek závisí na znalostech a časových možnostech tvůrce.

Serverové aplikace

Serverové aplikace pro tvorbu webových stránek umožňují snadno a rychle vytvářet jednoduché webové stránky pomocí průvodců a připravených šablon. Např.:

• webnode.cz – snadná tvorba www stránek zdarma (osobní, firemní, e-shop)
• blogger.com – vlastní blog snadno ve 3 krocích
• estranky.cz – snadná tvorba www stránek a fotogalerie
• home.spaces.live.com - blog, fotografie, videa, další moduly a miniaplikace (500 MB týdně, fotka max. 600 px)
• drupalgardens.com – snadná tvorba www stránek (CMS Drupal)
• wix.com – flash technologie
• webareal.cz – webo stránky nebo eshop snadno a rychle (placené)
• inpage.cz – webové stránky pro každého (placené)
• webové fotogalerie
  1. flickr.com – sdílení fotografií
     • 100 MB měsíčně
     • GNU/Linux, Mac, Windows
  2. picasa.google.com – sdílení fotografií
     • 1 GB
     • čeština
     • úprava fotek (ořez, jemná rotace, červené oči, kontrast, barva, jas, výplň, světla, stíny, teplota barev)
     • efekty, koláž
  3. rajce.idnes.cz – místo pro vaše fotografie
     • pouze JPG
     • fotka max. 700 px
  4. photoserver.eu – fotogalerie, fórum, hodnocení fotek
     • fotka max. 980 px a max. 200 kB
• miniaplikace (služby), které lze vložit do vlastního webu
  • BlueBoard.cz
  • VseVJednom.cz
  • WebLight.cz
  • Webber.cz

Lokální editory

Lokální (X)HTML editor je softwarová aplikace určená k vytváření webových stránek, která poskytuje řadu podpůrných nástrojů a funkcí pro usnadnění a zrychlení tvorby.

Přehled vybraných WYSIWYG editorů (WYSIWYG i textový režim)

Editor	Cena	Poznámky
Adobe Dreamweaver (GoLive)		usnadňuje psaní elementů a atributů
Quanta		usnadňuje psaní elementů a atributů WYSIWYG i textový režim současně
Microsoft FrontPage		usnadňuje psaní elementů a atributů pouze kódování win-1250
CKeditor		funkční v prohlížečích možnost integrace do webových stránek závisí na povoleném skriptování v prohlížeči validní víceúrovňové odrážky a číslování je možné zvolit prvky pro zvýraznění textu <strong>, <em>
Kompozer (NVU)		do seznamu stylů se automaticky načte externí styl připojený k dokumentu) nevalidní víceúrovňové odrážky a číslování místo zvýraznění <strong>, <em> a <u> zapisuje do zdroje dokumentu styl Nástroje -> Předvoly -> Nová stránka Jazyk: cs Znaková sada: UTF-8 Nástroje -> Předvolby -> Pokročilý zatrhněte volbu Chování návratové klávesy Speciální znak: Pouze & < > ' a nerozbitné prázdné místo Soubor -> Nový ze šablony tlačítko Nový obsahuje rozbalovací seznam vytvořit novou stránku / další volby / ze šablony
Writer/Web editor z OpenOffice		není možné zvolit typ dokumentu
Easy Editor
Mozilla Editor		je součástí prohlížeče Mozilla
Netscape Editor		je součástí prohlížeče Netscape
Amaya Editor		je součástí prohlížeče Amaya

Přehled vybraných textových (struktrálních) editorů

Editor	Cena	Poznámky
Eclipse		PHP Flex
NetBeans IDE Solaris		usnadňuje psaní elementů a atributů (Ctrl + mezera) tzv. IntelliSense doplňování rozepsaného textu (Tab) odstraňování chyb (pravý Alt + Enter) správa projektů podpora verzování pomocí SVN a CVS
PSPad		usnadňuje psaní elementů a atributů kontrola validity (správnosti) dokumentu integrovaný prohlížeč s možností volby rozlišení zobrazení český slovník kontroly pravopisu
Notepad++
Macromedia HomeSite		usnadňuje psaní elementů a atributů pouze kódování win-1250
AceHTML
EasyPad
Bluefish		obsahuje různé šablony

Některé aplikace umožňují uložit (exportovat) dokument jako webovou stránku:

• Microsoft Word, Excel, PowerPoint
  • funkčnost je "zaručena" pouze u Microsoft Internet Exploreru

Existuje také mnoho průvodců a podpůrných utilit na vytváření webových stránek či dotazníků:

• Website Mentor
• Ma Page Web
• Gecon
• SiteStyler
• a další

 PSPad

• umožňuje provádě úpravy přímo na FTP:
  • v nabídce Zobrazit, Nástrojový panel si zapněte boční panel s projekty
  • přejděte na záložku FTP a stiskněte tlačítko se symbolem síťového kabelu
  • v novém okně stisknete tlačítko Nové připojení, zadejte údaje o svém FTP a nastavení uložte
• ve stavovém řádku je možné klepnutím na slovo TEXT změnit režim zvýrazňování
  • výběr zvýrazňovače je možné upravit v Nastavení, Nastavení zvýrazňovačů
  • zvolte např. PHP, klepněte na záložku Upřesnění a do políčka Masky souborů doplňte příponu souboru např. *.module
• "čistič" TiDy zajistí, že v kódu nebudou chyby (např. neuzavřené elementy)
• PSPad umožňuje:
  • převést HTML značky na malá nebo velká písmena
  • získat textový obsah html souboru odstraněním tagů (HTML -> Konverze -> Odstanit tagy)
  • importovat text z RTF do HTML
  • snadné vkládání barev
  • obsahuje "kapátko"
  • kontrola pravopisu
  • zalomení řádků
  • nahrazování textu
  • zobrazit více oken (rozdělit plochu)
  • nobrazovat online nápovědu (nástroje)
  • podporuje klávesovou zkratku (Shift)+Tab
• obsahuje interní prohlížeč s možností nastavení např. rozlišení
• vytvoření (ne)číslovaného seznamu z x řádků textu:
  • označte si požadované řádky a zvolte Úpravy, Operace s řádky, Vložit text do řádku
  • v zobrazeném okně do políčka "na začátek" napište <li> a do políčka "na konec" napište </li>
  • volbu potvrďte
  • nyní stačí jen ručně doplnit před a za např. značky <ul> a </ul> pro nečíslovaný seznam
• funkce Porovnávání textu umožňuje porovnat dva textové soubory (v jednom panelu si otevřete starší soubor, v novém nejnovější soubor a okamžitě vidíte, kde jsou odlišnosti)
• v souborovém manžeru (např. Total Commanderu) je možné nastavit PSPad jako výchozí editor textových souborů
• k usnadění psaní elementů, atributů a stylů je možné používat klávesovou zkratku Ctrl+mezera
• pevnou mezeru   je možné vkládat klávesovou zkratkou Ctrl+Shift+mezera
• uzavírání elementu pomocí klávesové zkratky Ctrl+tečka
  • stáhněte si skript a rozbalte ho do adresáře CESTA-K-PSPAD\Script\JScript
  • nyní můžete používat klávesovou zkratku Ctrl+tečka na uzavírání (dokončování) libovolného elementu

Vývoj

Vývoj základního jazyka pro tvorbu webových stránek, který umožňuje publikovat dokumenty na Internetu.

HTML 2.0

• HyperText Markup Language – hypertextový značkovací jazyk
• Specifikaci vydala standardizační organizace v roce 1994

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2

• Začleněny prvky sloužící k definici vzhledu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.0

• Je možné oddělit vzhled dokumentu od jeho struktury (pomocí kaskádových stylů CSS)
• Specifikace je z důvodu přechodu výrobců prohlížečů a autorů stránek rozdělena na:
  • Strict – striktní
  • Transitional – přechodná specifikace, zachovává vzhledové atributy HTML 3.2
  • Frameset – přechodná specifikace rozšířena o definici rámů

HTML 4.01

• Opraveny některé chyby HTML 4.0
• Kompletní (uzavřený) popis jazyka (rok 1999)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

• EXtensible HyperText Markup Language – rozšiřitelný hypertextový značkovací jazyk
• Specifikace je stejná jako HTML 4.01, pouze jsou zde integrována pravidla XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

• Modulově založené XHTML (XHTML Modularization) – jednotlivé elementy jazyka jsou seskupeny do modulů odpovídajících jejich určení (funkci) společně s vlastnostmi, které se k nim mohou vztahovat
• Vynechává již prakticky všechny prezentační vlastnosti
• Název dokumentu musí mít příponu .xhtml nebo je nutné pomocí HTTP hlavičky odeslat požadovaný MIME typ application/xhtml+xml
• Pouze jediný typ dokumentu, který je definován pomocí modulů pro alternativní zařízení (mobilní telefony, PDA, hlasové čtečky, braillovský výstup atd.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 2.0

• Není zpětně kompatibilní se svými předchůdci
• Specifikace měla být budoucností webu, ovšem uživatelé webu a výrobci prohlížeču zřejmě o revoluční změny nestojí

HTML 5

• První pracovní návrh byl zveřejněn v roce 2008
  • je možné používat jak "volnější" HTML 5, tak i "přísnější" XHTML 5 syntaxi
• Výhody
  • nové elementy (např. header, footer, menu, section – určeno pro bloky, article – určeno pro nody (články), audio, video, canvas, ruby atd.)
  • nativní podpora funkcí, které bylo dříve možné používat pouze se zásuvnými moduly (geolokace, MathML, SVG, API WebSocket atd.)
  • možnost tvorby offline webových aplikací (data se ukládají lokálně a k synchronizaci dat může dojít v okamžiku připojení k Internetu)
  • jednodušší a bezpečnější komunikace (mezi různými doménami, záložkami prohlížeče atd.)
  • přístupnost dle standardů Web Accessibility Initiative (WAI) i Accessible Rich Internet Applications (ARIA)
  • podpora všech světových jazyků
  • zpětná kompatibilita s prohlížeči (neplatí u nových API rozhraní)
• Na vývoji HTML5 se podílí
  • Web Hypertext Application Technology Working Group (WHATWG)
  • WorldWide Web Consortium (W3C)
  • Internet Engineering Task Force (IETF)

XML

• EXtensible Markup Language – rozšiřitelný značkovací jazyk, který umožňuje snadné vytváření konkrétních značkovacích jazyků pro různé účely
• Jazyk je určen především pro výměnu dat mezi aplikacemi a pro publikování dokumentů
• Univerzální datový formát, ze kterého je možné pomocí transformací vytvořit různé výstupy (PDF, HTML, XHTML atd.)
• Specifikaci vydala standardizační organizace v roce 1998

Srovnání HTML, XHTML a XML

Stejná technologie

• elementy (prvky, značky)
  

  <h1>Nadpis první úrovně</h1>

  <p>Odstavec textu</p>

• atributy a jejich hodnoty
  

  <a href="http://www.google.com/">Google</a>

Různé použití

HTML

• daný počet prvků (elementů)
• nejednoznačná pravidla (některé elementy uzavírat musíte, některé nesmíte a některé můžete, ale nemusíte atd.)
• pouze formátovací jazyk (zobrazení dokumentu)
• pouze pro webové stránky

XHTML

• specifikace je stejná jako HTML, pouze jsou zde integrována jednoznačná pravidla XML

XML

• neomezený počet prvků (elementů)
• jednoznačná pravidla
• plnohodnotný jazyk
• použitelnost i mimo web – přenos dat mezi různými systémy a aplikacemi (databáze, vektorová grafika atd.)

Základní pojmy

Interpret (User Agent)

Zařízení, které interpretuje (zpřístupňuje, vyjadřuje) webovou stránku:

• prohlížeče
  • vizuální (počítač, PDA, telefony atd.)
  • nevizuální (zvukové, braillovský výstup atd.)
• tiskárny
• vyhledávací a analytické roboty

URI (Uniform Resource Identifier)

Jedinečná identifikace zdroje, obecně použitelná množina na všechny druhy adres.

URL (Uniform Resource Locator)

Jedinečná identifikace zdroje často používaných schémat, která jsou podmnožinou URI.

Definuje:

• Protokol (http, ftp, file, mailto atd.)
• Doména (cs.wikipedia.org)
• Port (80, 21 atd.)
• Název dokumentu včetně cesty (w/wiki.phtml)
• Parametry (název "title", hodnota "URL", název "action", hodnota "edit")

Příklad URL pro http protokol:

http://cs.wikipedia.org:80/w/wiki.phtml?title=URL&action=edit

Zavržený (Deprecated)

Zastaralý prvek, který byl nahrazen jiným, nebo bude ze specifikace vypuštěn.

Znakové sady

Znaková sada určuje uspořádanou množinu znaků.

128 znaků (2⁷)

Ve dvojkové soustavě je možné 128 znaků vyjádřit pomocí 7 bitů.

ASCII

• znaky anglické abecedy
• znaky používané v informatice
  

  Vybrané znaky ASCII tabulky

  Znak	Pořadové číslo
  "	34
  &	38
  '	39
  <	60
  >	62
  @	64
  \	92

256 znaků (2⁸)

Ve dvojkové soustavě je možné 256 znaků vyjádřit pomocí 8 bitů (bajt).

Prvních 128 znaků je shodných s ASCII.

ISO 8859-1

• Západoevropská znaková sada (ISO Latin 1)

ISO 8859-2

• Východoevropská (středoevropská) znaková sada (ISO Latin 2)
  • bosenština
  • chorvatština
  • čeština
  • maďarština
  • polština
  • rumunština
  • srbština (psaná v latinské transkripci)
  • srbochorvatština
  • slovenština
  • slovinština
  • hornolužičtina
  • dolnolužičtina
  • atd.

ISO 8859-...

• ISO 8859-3: Jihoevropská znaková sada (ISO Latin 3)
• ISO 8859-4: Baltská (ISO Latin 4)
• ISO 8859-5: Cyrilice (ruština/cyrilika/ukrajinština)
• ISO 8859-6: Arabská
• ISO 8859-7: Řecká
• ISO 8859-8: Hebrejská
• ISO 8859-9: Turecká (Latin-5)
• ISO 8859-10: Latin-6, Nordická
• ISO 8859-11: Thaiská
• ISO 8859-13 : Baltská (Latin-7)
• ISO 8859-14: Keltská (Latin-8)
• ISO 8859-15 : Západoevropská (Latin-9)
• ISO 8859-16 : Jihovýchodoevropská (Latin-10)

CP852

• středoevropské jazyky (PC Latin 2)
  • polština
  • rumunština
  • čeština
  • slovenština
  • atd.

Kód Kamenických

• upravená sada CP437, kde jsou znaky 128 až 171 nahrazeny znaky české a slovenské abecedy
  • čeština
  • slovenština

Windows 1250 (CP 1250)

• středoevropské jazyky (PC Latin 2)
  • bosenština
  • chorvatština
  • čeština
  • maďarština
  • polština
  • rumunština
  • srbština (psaná v latinské transkripci)
  • srbochorvatština
  • slovenština
  • slovinština
  • hornolužičtina
  • dolnolužičtina
  • atd.
• vlastní sada Microsoftu, která nedodržuje ISO standard (liší se zejména ve znacích š, Š, ž, Ž, ť, Ť a ľ)

Miliardy znaků

Unicode (ISO 10646)

Na rozdíl od osmibitových tabulek znaků jako je bratří Kamenických, Latin 2, Windows-1250 či ISO-8859-2 lze všechny znaky zobrazit současně bez použití znakových entit. Tj. v jednom textu lze tedy kombinovat např. češtinu, ruštinu a řečtinu.

• 2³¹ ~ 2 miliardy znaků
  • všechny známé znakové sady jazyků na Zemi, včetně japonského nebo čínského písma
  • fonetické abecedy (zápis výslovnosti)
  • speciální vědecké a matematické symboly
  • kombinované znaky
• 4 bajty, každý po 8 bitech (max. však 31 bitů)
  • může obsahovat nuly na začátku bajtů, což je nevýhodné např. při programování v jazyce "C" (kódování ISO 8859 nuly na začátku neobsahuje)
• výchozí znaková sada XML

UTF-8

• 8bitové slovo – 1 znak zabírá nejméně 8 bitů (1 bajt)
  

UTF-16

• 16bitové slovo – 1 znak zabírá nejméně 16 bitů (2 bajty)
  
• není kompatibilní s ASCII

UTF-32

• 32bitové slovo – každý znak zabírá 32 bitů (4 bajty)
  

Kódování znaků

Kódování znaků vyjadřuje binární podobu znaků znakové sady a je možné jej určit pomocí:

• HTTP hlavičky dokumentu
  

  <?php header("Content-Type: text/html; charset=utf-8"); ?>

• XML deklarace
  

  <?xml version="1.0" encoding="utf-8"?>

• meta XHTML elementu
  

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

• meta HTML5 elementu
  

  <meta charset="utf-8" />

Značkovací jazyk

(X)HTML je značkovací jazyk, který je tvořen pomocí elementů (prvků, značek).

Element (prvek, značka)

Element je tvořen sekvencí znaků obsahující:

• otevírací část (počáteční tag)
• obsah – žádný, text, nebo další prvky
• uzavírací část (koncový tag)

<h1>Nadpis první úrovně</h1>

Při vnořování se prvky nesmí křížit!

<h1><em></h1></em>
<h1><em></em></h1>

Element bez obsahu

Zápis elementu bez obsahu je možné zkrátit.

Např. zápis:

<hr></hr>

• je možné v XHTML zkrátit na:
  

  <hr />

• je možné v HTML zkrátit na:
  

  <hr>

Poznámka:
Elementy bez obsahu nemají v HTML uzavírací část!

Atributy (parametry, vlastnosti)

Slouží k upřesnění významu nebo k přiřazení vlastností prvku.

<h1 id="nadpis1">Nadpis první úrovně</h1>
<hr class="vytisknout" />
<img src="logo.jpg" alt='Popis “našeho” obrázku' />

• v XHTML se názvy a atributy elementů musí psát malými písmeny
• chcete-li u hodnoty atributu použít uvozovky, uzavřete jej do apostrofů a naopak

Poznámka:
U HTML nezáleží na velikosti písmen názvů a atributů elementů. Pokud je vlastnost atributu jednoslovná (neobsahuje mezeru), nemusí se u HTML uzavírat do uvozovek, nebo apostrofů.

Komentáře

Prohlížeče komentáře ignorují. Komentáře slouží pouze autorovi k zapsání poznámek např. k lepší orientaci v kódu. V obsahu komentáře není možné použít dvě pomlčky bezprostředně za sebou (tj. konec komentáře).

<!-- komentar -->

Poznámka:
Komentáře je vhodné psát bez diakritiky.

Podmíněné komentáře

Podmíněné komentáře (Conditional Comments (en)) umožňují vkládat bloky kódu přístupné pouze pro určitou verzi prohlížeče Internet Explorer. Ostatní prohlížeče podmíněné komentáře ignoruji.

Podmíněné komentáře je možné využít např. k opravě implementačních chyb prohlížeče Internet Explorer (IE).

Skrývající (downlevel-hidden) komentáře

Příklady:

<!--[if IE]>
  Používáte Internet Explorer.
<![endif]-->

<!--[if IE 6]>
  Používáte Internet Explorer verze 6.
<![endif]-->

<!--[if lte IE 6]>
  Používáte Internet Explorer verze 6 nebo nižší.
<![endif]-->

<!--[if (gte IE 5)&(lte IE 7)]>
  Tento text se zobrazí v IE od verze 5 až po verzi 7.
<![endif]-->

<!--[if (gte IE 5)&(lte IE 7)]>
  Tento text se zobrazí v IE od verze 5 až po verzi 7.
  <![if IE 6]>
    Tento text doplní výše uvedený text, ale pouze v IE 6
    (vnořená podmínka).
  <![endif]>
<![endif]-->

Odhalující (downlevel-revealed) komentáře

U odhalujících komentářů je nutné před zobrazovaným obsahem komentář ukončit a za zobrazovaným obsahem komentář opět začít.

Příklady:

<!--[if !IE]>
  Text, ktery se nezobrazi (obycejny komentar).
  -->
    Nepoužíváte Internet Explorer.
  <!--
  Text, ktery se nezobrazi (obycejny komentar).
<![endif]-->

<!--[if !IE]> -->
  Nepoužíváte Internet Explorer.
<!-- <![endif]-->

Znakové entity

Používají se pro vyjádření znaků nezávisle na znakové sadě dokumentu.

Speciální znakové entity

Mají v kódu dokumentu zvláštní význam a proto musí být v běžném textu nahrazovány entitami.

Převodníky znaků:

• Převodník Unicode
• UTF-8 na entity (alternativní zápis)

Dokument

(X)HTML dokument (zdrojový kód webové stránky) je základní textový soubor sloužící k ukládání dat.

Struktura HTML 4.01 dokumentu

<!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">
    <meta http-equiv="content-language" content="cs">
    <meta name="language" content="cs">
    <title>HTML dokument</title>
    <meta name="description" content="Základní šablona HTML dokumentu">
    <meta name="keywords" content="html,dokument,šablona">
  </head>
  <body>
    <h1>Můj první HTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

Struktura XHTML 1.0 dokumentu

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="cs" />
    <meta name="language" content="cs" />
    <title>XHTML dokument</title>
    <meta name="description" content="Základní šablona XHTML dokumentu" />
    <meta name="keywords" content="xhtml,dokument,šablona" />
  </head>
  <body>
    <h1>Můj první XHTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html> 

Struktura HTML 5 dokumentu (X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód)

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>HTML 5 dokument</title>
    <meta name="description" content="Základní šablona HTML 5 dokumentu">
    <meta name="keywords" content="html,dokument,šablona">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  </head>
  <body>
    <h1>Můj první HTML5 dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

Struktura XHTML 5 dokumentu

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>XHTML 5 dokument</title>
    <meta name="description" content="Základní šablona XHTML 5 dokumentu" />
    <meta name="keywords" content="html,dokument,šablona" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  </head>
  <body>
    <h1>Můj první XHTML5 dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

 XML deklarace

<?xml version="1.0" encoding="utf-8"?>

Uvádí, že se jedná o XML dokument (logicky tudíž není u HTML dokumentu) a obsahuje dva pseudo-atributy:

• version – verze XML dokumentu (u XML 1.0 i 1.1 vždy 1.0)
• enconding – použité kódování dokumentu

Celá XML deklarace je nepovinná, pro kódování UTF-8 nebo UTF-16.

IE6- a některé starší verze Mozilly a Opery XML deklaraci nerozumí a přepínají vykreslování do nestandardního (tzv. quirk) režimu. Z tohoto důvodu je vhodné psát dokument v kódování UTF-8 a neuvádět XML deklaraci.

Typ dokumentu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Syntaktická pravidla stanovující:

• které elementy je možné používat
• jaké atributy je možné používat u daných elementů
• jaký obsah může daný element obsahovat atd.

U HTML 4.01 a XHTML 1.0 je možné si zvolit jeden ze tří typů dokumentu:

• Strict – striktní
• Transitional – přechodný – povoleny zavržené (deprecated) prvky
• Frameset – přechodný režim rozšířený o specifikaci rámů

Typ dokumentu obsahuje:

• html – jméno kořenového elementu
• klíčové slovo PUBLIC – udává, že deklarace obsahuje veřejný identifikátor
• veřejný identifikátor – součást programu (prohlížeče) nebo systému, aby se pravidla nemusela stahovat z internetu
• systémový identifikátor – webová adresa souboru syntaktických pravidel

Element <html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

Kořenový element celého dokumentu do kterého se vkládá veškerý obsah obsahující atributy:

• xmlns – povinný atribut xhtml
• xml – kód jazyka dokumentu
• lang – kód jazyka dokumentu (zpětná kompatibilita s HTML prohlížeči)

Důvody uvádění kódu jazyka:

• zařazení vyhledávacími roboty do správné jazykové skupiny
• určení výslovnosti u hlasového výstupu
• dodržování typografických pravidel příslušející danému jazyku (např. uvozovky)
• automatická kontrola pravopisu

Hlavička dokumentu <head>

<head>

</head>

Tělo dokumentu <body>

<body>

</body>

Doporučení:

Stránku začněte tvořit ve striktním režimu. Pokud z nějakého důvodu potřebujete použít i zavržené elementy změňte typ dokumentu na přechodný (transitional). Typ dokumentu s rámy raději nepoužívejte.

Cvičení 1

Z přiložených dat vytvořte dle PDF vzoru:

1. Dokument v aplikaci MS Word, který vyexportujte do HTML formátu.
2. Prezentaci v aplikaci MS PowerPoint, kterou vyexportujte do HTML formátu.

Cvičení 2

Postupně, na základě získávaných znalostí vytvořte XHTML dokument s názvem index.html pomocí textového editoru PSPad obsahující data ze cvičení 1.

1. Využijte předpřipravenou XHTML šablonu.
2. Obrázky ukládejte do adresáře images/.

Základní blokové elementy

Blokové elementy při zobrazení začínají a končí novým řádkem.

Nadpisy <h1> až <h6>

<h1>Nadpis první úrovně</h1>

• stručně popisují část dokumentu, kterou předcházejí
• rozčleňují dokument na logické úseky (strukturální bloky)
• interpret XHTML je také může využít k vytvoření obsahu daného dokumentu
• úrovně nadpisů:
  • <h1> – nejvyšší důležitost (v dokumentu právě jednou)
  • <h2>, <h3>, <h4>, <h5>
  • <h6> – nejnižší důležitost

Nepřeskakujte úrovně (nepoužívejte např. <h4> bezprostředně po <h1>)!

Vizuální prohlížeče vykreslují nadpisy jako blokové elementy tučným zvětšeným písmem. Velikost logicky odpovídá důležitosti nadpisu, takže např. <h1> je největší. Toto zobrazení můžete změnit pomocí stylů.

Odstavec <p>

<p>Odstavec textu</p>

• ve vizuálních prohlížečích formátován jako samostatný blok s vertikálním odsazením zarovnaný vlevo
• může obsahovat
  • text
  • řádkové elementy
• nesmí obsahovat blokové elementy
  • element <div>
  • nadpisy <h1> až <h6>
  • další element <p>
  • tabulku
  • formulář atd.

Vodorovný oddělovač <hr />

<hr />

Kontaktní informace <address>

<address>Velitelství výcviku&nbsp;&ndash; Vojenská akademie
  (VeV-VA), 682&nbsp;01 Vyškov, Víta Nejedlého,
  Tel. +420 973&nbsp;451&nbsp;022</address>

• používá se k zobrazení kontaktních informací
• uvádí se na začátku, nebo konci dokumentu
• může obsahovat
  • text
  • řádkové elementy
  • element <br />

Konec řádku <br />

<address>
  Velitelství výcviku&nbsp;&ndash; Vojenská akademie (VeV-VA)<br />
  Víta Nejedlého<br />
  682&nbsp;01 Vyškov<br />
  Tel. +420 973&nbsp;451&nbsp;022
</address>

Přeformátovaný text <pre>

Viz Bílé znaky

Seznamy <ul>, <ol> a definice <dt>

Viz Seznamy a definice

Neformátovaný kontejner <div>

Viz Kontejnery

Citace <blockquote>

Může přímo obsahovat pouze blokové elementy, ne tedy hned text – ten musí být uzavřen v nějakém „kontejneru“, nejčastěji v odstavci.

<blockquote cite="http://cs.wikipedia.org/wiki/Jan_Werich">
  <p>Mějte dobrou náladu. Dobrá nálada vaše problémy sice nevyřeší, 
   ale naštve tolik lidí kolem, že stojí za to si ji užít.</p>
  <p>Kdo víno má a nepije, kdo hrozny má a nejí je,
   kdo ženu má a nelíbá, kdo zábavě se vyhýbá,
   na toho vemte bič a hůl, to není člověk, to je vůl.</p>
</blockquote>
<p>Autor: <cite>Jan Werich</cite></p>

Atribut cite uvádí citovaný zdroj, odkaz na další zdroje nebo citaci (jména osob, organizací apod.). Pro zobrazení zdroje použijte řádkový element cite. 

Základní řádkové elementy

Řádkové elementy:

• nevytváří souvislý útvar tj. nachází se v normálním textu
• obsahem řádkového elementu nesmí být blokový element

Odkazy <a>

<p>Vyhledávač <a href="http://www.google.com">Google</a></p> 

Odkaz (anchor, tedy kotva, nebo také hyperlink či zkráceně link) je místo v dokumentu, pomocí kterého může uživatel přejít na jiné místo, které se nachází buď v aktuálním dokumentu nebo kdekoli jinde na Internetu (může se jednat o jiný dokument, obrázek, zvuk, video atd).

K přemístění na nové místo dojde po aktivaci odkazu, například kliknutím myší, stiskem klávesy nebo hlasovým příkazem.

• vizuální prohlížeče zobrazují odkazy
  • podtržené
  • odlišnou barvou od textu
• vzhled je možné změnit pomocí stylů, ale rozhodně by i potom měly být odkazy dostatečně kontrastní vzhledem k normálnímu textu
• funkce odkazu
  • pohodlný pohyb po webu pro uživatele
  • obohacení stylu psaní na webu (odkaz vypadá tajemně, vybízí uživatele, aby se podíval, co se za daným odkazem skrývá)
  • pomocí odkazů se po webu pohybují roboti vyhledávačů
• může obsahovat
  • text
  • řádkové elementy
  • externí objekty (např. obrázek)
  • odkazy se do sebe nesmí vnořovat
• výskyt
  • pouze v těle dokumentu <body>, ale vždy uvnitř jiného elementu
• doporučení
  • odkaz musí být jasný i bez kontextu
    • vyhledávací roboti
    • hlasové prohlížeče čtou nejprve seznam odkazů a teprve potom obsah dokumentu (někteří uživatelé postupují obdobně)
  • k úplnému popisu používejte atribut title

Příklad odkazu s více atributy:

<p>Webová standardizační organizace <a href="http://www.w3.org"
 type="text/html" charset="utf-8" hreflang="en" xml:lang="en"
 lang="en" title="The World Wide Web Consortium">W3C</a></p>

Odkaz na pojmenované místo v dokumentu:

<p><a href="#odstavec1">První odstavec</a></p>

Pojmenované místo v dokumentu tzv. kotva:

<!-- kotva -->
<p><a id="odstavec1" name="odstavec1"></a></p>

Pokud si v dokumentu pojmenujete určité místo, můžete se na něj odkazovat tak, že v adrese za jménem dokumentu uvedeme znak # (zvaný též sharp, hash a pod.), následovaný jménem, které jsme místu přidělili.

V XHTML dokumentu je možné se odkazovat na libovolný element s id, ovšem starší prohlížeče podporují pouze element <a> s atributem name.

Atributy name a href můžete použít současně v jednom elementu <a>, což znamená, že jeden element <a> může být zároveň odkazem i cílem jiného odkazu. Pokud ale element <a> slouží pouze jako cíl jiného odkazu, potom byste zde neměli používat žádné z atributů pro bližší určení zdroje: charset, type, hreflang, rel a rev.

U odkazů využívejte textu s významem odkazu. Nepoužívejte nic neříkající odkazy.

Příklad:

• Špatně:
  • statistiku návštěvnosti si můžete zobrazit zde (nevhodné jak pro lidi, tak pro vyhledávače)
• Dobře:
  • statistika návštěvnosti

Důraznější zvýraznění <strong>

<p>Text psaný <strong>tučně</strong>.</p>

Poznámka:
Logicky formátovaný textový element <strong> je zhlediska přístupnosti webu vhodnější než fyzicky formátovaný prezentační element <b>.

Zvýraznění (emphasis) <em>

<p>Text psaný <em>kurzivou</em>.</p>

Poznámka:
Logicky formátovaný textový element <em> je zhlediska přístupnosti webu vhodnější než fyzicky formátovaný prezentační element <i>.

Horní index <sup>

Příklad 2³:

<p>2<sup>3</sup></p>

Dolní index <sub>

Příklad H₂O:

<p>H<sub>2</sub>0</p>

Citace (quote) <q>

Kratší citace uvnitř textu. Kolem textu by se ve vizuálním prohlížeči měly automaticky doplnit uvozovky podle jazyka, v kterém je dokument psán.

<p>Citace: <q>Armáda beranů, kterou vede lev, je silnější, 
 než armáda lvů, kterou vede beran</q>, řekl kdysi <cite>Napoleon
 Bonaparte</cite>.</p>

Citovaný zdroj <cite>

Tento element označuje citovaný zdroj, odkaz na další zdroje nebo citaci (jména osob, organizací apod.).

Zkratka (abbreviation) <abbr>

Označuje zkratku, jejíž plné znění by se alespoň při prvním výskytu v dokumentu mělo nacházet v jeho atributu title (XHTML, URI, ČR, ÚV KSČ apod.).

<p>Používáme rozšiřitelný hypertextový značkovací jazyk <abbr
 title="EXtensible HyperText Markup Language">XHTML</abbr>.</p>

Zkratkovité slovo <acronym>

Tento element se používá k uzavírání zkratkových slov. Ty se narozdíl od zkratek vyslovují většinou jako jedno slovo, ne po jednotlivých písmenech. Pravidla pro použití atributu title jsou zde stejná jako u elementu abbr (Čedok, NATO, NASA apod.).

<p>Zkratkovité slovo <acronym title="Československá dopravní
 kancelář">ČEDOK</acronym>.</p>

Definice (definition) <dfn>

Obsahem tohoto elementu je pojem nebo definice.

<p>Definice: <dfn>Lednička</dfn> se&nbsp;obvykle používá
 k&nbsp;chlazení potravin.</p>

Počítačový kód <code>

Používá se k označení počítačového nebo programového kódu.

<p>Odkaz se&nbsp;v&nbsp;(X)HTML vytváří pomocí elementu
 <code>a</code>.</p>

Výstup programů <samp>

Vyznačuje vzorový výstup programů, skriptů apod.

Proměnná <var>

Označuje proměnnou, její vzorovou hodnotu apod.

Text zadávaný uživatelem (keyboard) <kbd>

Indikuje text, který má být zadán uživatelem.

<p>Do následujícího pole vložte svůj <kbd>rok narození</kbd>.</p>

Zvětšené písmo <big>

Velikost textu bude o jednu úroveň větší než okolní text.

Zmenšené písmo <small>

Velikost textu bude o jednu úroveň menší než okolní text.

Neproporcionální písmo (teletype text) <tt>

Všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu).

Neformátovaný kontejner <span>

Viz Kontejnery

Změny obsahu

Elementy <del> a <ins> se používají v situacích, kdy je třeba návštěvníka informovat o změně obsahu dokumentu.

Oba elementy se mohou chovat jako blokové i řádkové, ale ne současně. Tzn. pokud vystupují jako řádkové (např. jsou obsaženy v elementu <p>), nemohou obsahovat blokové elementy, jako jsou odstavce nebo nadpisy.

<p>Kurz bude zahájen <del cite="duvod-zmeny.html" datetime="2010-04-17T01:09:03+1:00"> 19. 9. 2010</del><ins>20. 9. 2010</ins>.</p>

<del>
  <p>Kurz bude zahájen: 19. 9. 2010</p>
</del>
<ins>
  <p>Kurz bude zahájen: 20. 9. 2010</p>
</ins>

Oběma elementům je možné přiřadit atribut cite, který by měl obsahovat URL dokumentu, který vysvětluje důvod změny a atribut datetime obsahující specifikuje datum a čas změny (ISO formát). Důvod změny může být obsažen v atributu title.

Odstraněný obsah (delete) <del>

 Bývá zobrazen přeškrtnutý.

Nově vložený obsah (insert) <ins>

 Bývá zobrazen kurzivou.

Bílé znaky

Mezera, tabulátor a konec řádku

• Ze začátku a konce blokového prvku jsou bílá místa odstraněna.
  

  <p>     Mezery a→     →     tabulátory     </p>

• Více bílých znaků za sebou je nahrazeno jedinou mezerou.
  

  <p>Mezery     a→     →     tabulátory</p>
  

  <p>
    Mezery
        a
  →     →     tabulátory
  
  </p>

Toto chování umožňuje udržet „pořádek“ v kódu dokumentu.

Zobrazení bílých znaků

Předformátovaný text <pre>

• blokový element – při zozbrazení začíná a končí novým řádkem
• zobrazuje bílá místa přesně tak, jako v kódu dokumentu

<pre>

  Předformátovaný text         s mezerami
→     →     tabulátory

a s odřádkováním

</pre>

Pevná (nerozdělitelná) mezera &nbsp;

Prohlížeč (interpret) rozděluje dlouhé texty na řádky v místech, kde jsou mezery (dělení slov neumí).

<p>Jednoslabičné předložky a&nbsp;spojky na&nbsp;koncích rádků
  je vhodné spojovat s&nbsp;následujícím slovem.</p>

Konec řádku <br />

Příklad nového řádku v XHTML:

<address>
  Jméno a příjmení<br />
  Ulice<br />
  Město<br />
  PSČ
</address>

Přídlad nového řádku v HTML:

<address>
  Jméno a příjmení<br>
  Ulice<br>
  Město<br>
  PSČ
</address>

Poznámka:
U hodnot atributů nepoužívejte zlom (konec) řádků z důvodu různého chování prohlížečů.

Vícejazyčný obsah

Příklad použití jiného jazyka uvnitř HTML dokumentu

<p lang="en">English language</p> 

Příklad použití jiného jazyka uvnitř XHTML dokumentu

<p xml:lang="en" lang="en">English language</p>

Kontejnery

• nemění uzavřený obsah
• umožňují označit libovolný obsah (k identifikaci se využívají atributy id a class) a přiřadit mu určité vlastnosti:
  • CSS
  • skripty
  • odlišný jazyk

Neformátovaný blokový element <div>

• blokový element – při zozbrazení začíná a končí novým řádkem
• může obsahovat
  • text
  • blokové elementy
  • řádkové elementy

<div id="header">
  <h1>Nadpis první urovně</h1>
</div>

<div id="content">
  <p>První odstavec textu</p>
  <p>Druhý odstavec textu</p>
  <p>Třetí odstavec textu</p>
</div>

<div id="footer">
  <p>SkPoVzd/OIT VAV</p>
</div>

Neformátovaný řádkový element <span>

• řádkový element – nevytváří souvislý útvar (nachází se v normálním textu)
  • řádkový element nesmí obsahovat blokový element
• může obsahovat
  • text
  • řádkové elementy

Příklad použití jiného jazyka uvnitř HTML dokumentu:

<p><span lang="en">Copyright</span> SkPoVzd/OIT VAV</p>

Příklad použití jiného jazyka uvnitř XHTML dokumentu:

<p><span xml:lang="en" lang="en">Copyright</span> SkPoVzd/OIT VAV</p>

Seznamy a definice

Seznamy

Neuspořádaný seznam (odrážky) <ul>

Výčet zdůrazňuje rovnocennost položek.

Element <ul> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:

• text
• řádkové elementy
• blokové elementy

<ul>
  <li>jedna položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ul>

Uspořádaný seznam (číslování) <ol>

Výčet zdůrazňuje rovnocennost a pořadí položek.

Element <ol> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:

• text
• řádkové elementy
• blokové elementy

<ol>
  <li>první položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ol>

Definice

Definice je možné použít k vysvětlení pojmů, nebo několik podobných témat – definice (témata) umístěte do elementů <dt> a vysvětlení do elementů <dd>.

Seznam definic <dl>

Ohraničuje obsah seznamu.

Definice <dt>

Měla by být co možná nejkratší. Povolený obsah:

• text
• řádkové elementy

Popis <dd>

Povolený obsah:

• text
• řádkové elementy
• blokové elementy

<dl>
  <dt>první pojem</dt>
  <dd>vysvětlení prvního pojmu</dd>
  <dt>druhý pojem</dt>
  <dd>vysvětlení druhého pojmu</dd>
  <dd>jiné vysvětlení druhého pojmu</dd>
</dl>

Příklady

Kombinace seznamů:

<ul>
  <li>text ... 
    <ol>
      <li>text ... </li>
      <li>text ... </li>
    </ol>
  </li>
  <li>text ... </li>
</ul>

Kombinace definic a seznamů:

<dl>
  <dt>první pojem</dt>
    <dd>vysvětlení ... 
      <ul>
        <li>text ... </li>
        <li>text ... </li>
      </ul>
    </dd>
  <dt>druhý pojem</dt>
  <dd>vysvětlení ...</dd>
</dl>

 Výhody používání seznamů a definic

• Dokument je lépe strukturován
• Uživatel se na stránce lépe orientuje (dlouhé texty mohou čtenáře odradit)

Doporučení:
Delší texty rozdělujte na kratší úseky pomocí nadpisů (h1 až h6), seznamů (ul, ol) a definic (dt) apod.

Tabulka

Tabulka umožňuje prezentovat data „dvojrozměrně“ – uživatel může tato data vnímat jak v řádcích tak ve sloupcích. To je u mnoha typů dat vhodný a většinou nenahraditelný prostředek např. u programů, ceníků, srovnávání atd.

Z této „dvojrozměrnosti“ však vyplývají i nevýhody, tabulka musí být prezentována ve dvojrozměrném výstupu (obrazovce) a pokud možno celá najednou. Bohužel ne všechna zařízení pro práci s webem (např. čtečky obrazovky) mají tyto schopnosti. Proto je lepší použití tabulky nejprve zvážit, a pokud je data možné reprezentovat jinou formou (např. pomocí výčtu), použít tuto formu nebo ji alespoň nabídnout jako alternativu k tabulce.

Každá tabulka v (X)HTML je tvořena svým titulkem a samotnými daty. Ta se nacházejí v takzvaných buňkách. Každá buňka patří minimálně do jednoho řádku a jednoho sloupce. Řádky se mohou seskupovat do skupin řádků a sloupce do skupin sloupců.

Příklad jednoduché tabulky:

<table border="1" cellspacing="0" summary="Tabulka obsahuje
  3 sloupce a 1 řádek a ukazuje možnosti zobrazení tabulek
  u webových stránek.">
  <caption>Jednoduchá tabulka</caption>
  <tr>
    <th>Hlavičková buňka</th>
    <td>Datová buňka 1</td>
    <td>Datová buňka 2</td>
  </tr>
</table>

Tabulka <table>

Povolený obsah:

• titulek (nadpis) <caption>
  • nepovinný
  • pouze jeden
• definice skupiny sloupců <colgroup> a vlastností sloupců <col>
  • nepovinný
  • libovolné množství
• záhlaví <thead>
  • nepovinný
  • pouze jeden
• zápatí <tfoot>
  • nepovinný
  • pouze jeden
• tělo: <tbody> nebo řádek <tr>
  • povinný
  • jeden, nebo více (odlišná témata s jiným významem)

Pomocí atributu summary vždy uvádějte popis tabulky tj. souhrn účelu a struktury tabulky pro nevizuální interprety.

Řádky tabulky <tr>

Povolený obsah:

• hlavičková buňka <th>
• datová buňka <td>

Hlavičková <th> a datová <td> buňka tabulky

Povolený obsah:

• blokové elementy
• řádkové elementy
• text

Některé povolené atributy:

• rowspan – přes kolik řádků se daná buňka rozpíná
  • výchozí hodnotou je 1
  • hodnota 0 znamená, že buňka se rozpíná přes všechny řádky od toho, v kterém se nachází, až po konec skupiny řádků (thead, tbody a tfoot), v které se nachází
• colspan – přes kolik sloupců se daná buňka rozpíná
  • výchozí hodnotou je 1
  • hodnota 0 znamená, že buňka se rozpíná přes všechny sloupce od toho, v kterém se nachází, až po konec skupiny sloupců (colgroup), v které se nachází

Poznámka:

Do prázdných buněk je vhodné vložit znakovou entitu &nbsp; nebo mezeru z důvodu zpětné kompatibility prohlížečů.

Příklad složitější tabulky:

<table border="1" cellspacing="0" summary="Tabulka obsahuje
  6 sloupců a 10 řádků. V prvním řádku je uveden popis sloupců.
  1. soupec obsahuje den, 2. pořádanou akci, 3. čas,
  4. učastníky, 5. místo a 6. poznámky.">
  <caption>Program na&nbsp;víkend</caption>
  <colgroup class="den"><!-- nastaveni tridy pro prvni sloupec -->
    <col />
  </colgroup>
  <colgroup class="akce"><!-- nastaveni tridy pro druhy az treti
    sloupec -->
    <col span="2" /><!-- nastaveni atributu zahrnuje 2 sloupce -->
  </colgroup>
  <thead>
    <tr>
      <th>Den</th>
      <th>Akce</th>
      <th>Čas [h]</th>
      <th>Účast</th>
      <th>Místo</th>
      <th>Poznámky</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">Pátek</th>
      <td>Příjezd</td>
      <td>do 19.00</td>
      <td>Všichni</td>
      <td>Hlavní vchod</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Ubytování</td>
      <td>19.00–20.00</td>
      <td>Všichni</td>
      <td>Perníková chaloupka</td>
      <td>Přezůvky nutné</td>
    </tr>
    <tr>
      <th rowspan="4">Sobota</th>
      <td>Snídaně</td>
      <td>8.00–8.30</td>
      <td>Všichni</td>
      <td rowspan="2">Jídelna</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Oběd</td>
      <td>12.00–13.00</td>
      <td>Pouze zájemci</td>
      <td>Vlastní příbor</td>
    </tr>
    <tr>
      <td>Svačina</td>
      <td>15.00–15.30</td>
      <td>Muži</td>
      <td>Ovocný sad</td>
      <td>Vlastní žebřík</td>
    </tr>
    <tr>
      <td>Večeře</td>
      <td>18.00–19.00</td>
      <td>Do hmotnosti 80&nbsp;kg</td>
      <td>Palouček před jídelnou</td>
      <td>Vlastní deka nutná</td>
    </tr>
    <tr>
      <th rowspan="3">Neděle</th>
      <td>Snídaně</td>
      <td>8.00–8.30</td>
      <td>Všichni</td>
      <td rowspan="2">Jídelna</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Oběd</td>
      <td>12.00–13.00</td>
      <td>Pouze zájemci</td>
      <td>Vlastní příbor</td>
    </tr>
    <tr>
      <td>Odjezd</td>
      <td>13.00</td>
      <td>Všichni</td>
      <td>Hlavní parkoviště</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Alternativní způsob zobrazení složitější tabulky:

<h3>Program na&nbsp;víkend</h3>
<h4>Pátek</h4>
<ul>
  <li>Příjezd
    <ul>
      <li><strong>Čas:</strong> do 19.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Hlavní vchod</li>
    </ul>
  </li>
  <li>Ubytování
    <ul>
      <li><strong>Čas:</strong> 19.00–20.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Perníková chaloupka</li>
      <li><strong>Poznámka:</strong> Přezůvky nutné</li>
    </ul>
  </li>
</ul>
<h4>Sobota</h4>
<ul>
  <li>Snídaně
    <ul>
      <li><strong>Čas:</strong> 8.00–8.30&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Jídelna</li>
    </ul>
  </li>
  <li>Oběd
    <ul>
      <li><strong>Čas:</strong> 12.00–13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Pouze zájemci</li>
      <li><strong>Místo:</strong> Jídelna</li>
      <li><strong>Poznámka:</strong> Vlastní příbor</li>
    </ul>
  </li>
  <li>Svačina
    <ul>
      <li><strong>Čas:</strong> 15.00–15.30&nbsp;h</li>
      <li><strong>Účast:</strong> Muži</li>
      <li><strong>Místo:</strong> Ovocný sad</li>
      <li><strong>Poznámka:</strong> Vlastní žebřík</li>
    </ul>
  </li>
  <li>Večeře
    <ul>
      <li><strong>Čas:</strong> 18.00–19.00&nbsp;h</li>
      <li><strong>Účast:</strong> Do hmotnosti 80&nbsp;kg</li>
      <li><strong>Místo:</strong> Palouček před jídelnou</li>
      <li><strong>Poznámka:</strong> Vlastní deka nutná</li>
    </ul>
  </li>
</ul>
<h4>Neděle</h4>
<ul>
  <li>Snídaně
    <ul>
      <li><strong>Čas:</strong> 8.00–8.30&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Jídelna</li>
    </ul>
  </li>
  <li>Oběd
    <ul>
      <li><strong>Čas:</strong> 12.00–13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Pouze zájemci</li>
      <li><strong>Místo:</strong> Jídelna</li>
      <li><strong>Poznámka:</strong> Vlastní příbor</li>
    </ul>
  </li>
  <li>Odjezd
    <ul>
      <li><strong>Čas:</strong> 13.00&nbsp;h</li>
      <li><strong>Účast:</strong> Všichni</li>
      <li><strong>Místo:</strong> Hlavní parkoviště</li>
    </ul>
  </li>
</ul>

Obrázek

Element <img> slouží ke vkládání obrázků, které nesou v dokumentu nějakou informační hodnotu.

 Nepoužívejte tento element pro vkládání dekorativních obrázků (odrážky, oddělovací čáry, zakulacené rohy atd.) K těmto účelům slouží styly.

Poznámky:

• U vkládaných objektů (obrázků, animací, multimédií atd.) vždy definujte rozměry pomocí atributů nebo CSS. Zabráníte tak nepříjemnému posunování stránky při načítání obsahu.
• U jpg obrázků používejte kvalitu alespoň 85%.

Atribut src

Povinný atribut určující URI adresu obrázku (umístění a název).

Atribut alt

Atribut alt obsahuje alternativní textovou verzi (popis) obrázku.

Uživatel by měl mít přístup ke všem informacím (X)HTML dokumentu. Pokud interpret nemůže zpřístupnit objekt vložený do webové stránky, měl by uživateli nabídnout jeho alternativní textovou verzi.

Textový formát je přístupný všem zařízením (počítač, PDA, telefon, prohlížeč pro nevidomé atd.). Bez uvedení alternativní textové verze omezujete přístupnost svých dokumentů na úzkou skupinu zařízení, která umí zacházet s Vámi poskytovaným objektem.

V žádném případě nepoužívejte nicneříkající texty jako např. „obrázek“, „nic“, „Všimněte si krásných barev loga“ apod. (uvedené texty neinformují uživatele o obsahu obrázku).

<p>
  <img width="136" height="200" src="images/logo-vav.jpg"
    alt="Logo Velitelství výcviku&nbsp;&ndash; Vojenské akademie"
    title="Logo Velitelství výcviku&nbsp;&ndash; Vojenské akademie"
    longdesc="popis/vyznam-symbolu.html" />
  <a href="popis/vyznam-symbolu.html" title="Popis jednotlivých
    symbolů loga Logo Velitelství výcviku&nbsp;&ndash; Vojenské
    akademie">[popis]</a>
</p>

Atribut title

Vizuální prohlížeče zobrazí obsah tohoto atributu u kurzoru myši jako popisný text v okamžiku kdy uživatel přesune myš na daný element.

Použití:

• popis obrázku
• popis odkazu
• kontextová nápověda
• sdělení klávesové zkratky atd.

Atribut longdesc

Alternativní informace k obrázku, pokud nestačí atribut alt.

Obrázková mapa

Obrázkové mapy umožňují pomyslně rozdělit objekt (obrázek) na oblasti, kterým lze přiřadit nějakou akci, např. přechod na jinou stránku nebo spuštění skriptu.

"Klasická" obrázková mapa

<p>
  <img src="files/images/organizacni-diagram-oit.png" height="118"
    width="470" usemap="#map" alt="Organizační diagram OIT"
    title="Organizační diagram Odboru informačních technologií" />
  <map id="map" name="map">
    <area href="#OdDS" shape="rect" coords="5,82,78,115"
      title="Oddělení datových sítí" alt="OdDS" />
    <area href="#OdProIS" shape="rect" coords="82,82,155,114"
      title="Oddělení provozu informačních systémů" alt="OdProIS" />
    <area href="#OdUPod" shape="rect" coords="160,82,233,114"
      title="Oddělení uživatelské podpory" alt="OdUPod" />
    <area href="#OdKnSl" shape="rect" coords="237,82,311,114"
      title="Oddělení knihovnických služeb" alt="OdKnSl" />
    <area href="#OdMT" shape="rect" coords="314,82,387,113"
      title="Oddělení multimediální tvorby" alt="OdMT" />
    <area href="#VydOd" shape="rect" coords="392,82,465,114"
      title="Vydavatelské oddělení" alt="VydOd" />
  </map>
</p>

Bezbariérová obrázková mapa s přístupnou navigací

<object data="files/images/organizacni-diagram-oit.png" height="118"
  width="470" type="image/png" usemap="#map1"
  title="Organizační diagram Odboru informačních technologií" />
  <map id="map1" name="map1">
    <p>
      <a href="#OdDS" shape="rect" coords="5,82,78,115"
        title="Oddělení datových sítí">OdDS</a> |
      <a href="#OdProIS" shape="rect" coords="82,82,155,114"
        title="Oddělení provozu informačních systémů">OdProIS</a> |
      <a href="#OdUPod" shape="rect" coords="160,82,233,114"
        title="Oddělení uživatelské podpory">OdUPod</a> |
      <a href="#OdKnSl" shape="rect" coords="237,82,311,114"
        title="Oddělení knihovnických služeb">OdKnSl</a> |
      <a href="#OdMT" shape="rect" coords="314,82,387,113"
        title="Oddělení multimediální tvorby">OdMT</a> |
      <a href="#VydOd" shape="rect" coords="392,82,465,114"
        title="Vydavatelské oddělení">VydOd</a>
    </p>
  </map>
</object>

Vzhled v IE7- je možné upravit pomocí JavaScriptu.

Media Queries

Vlastosti CSS3 Media Queries:

• width – šířka cílové oblasti výstupního zobrazovacího zařízení (viewport) včetně případných posuvníků
  • obrazovka nebo projektor (u prohlížečů režim zobrazení Celá obrazovka) s výřezem o šířce minimálně 800px (grafický návrh by měl v tomto případě počítat s hodnotou 760px)

  • <link rel="stylesheet" media="screen and (min-width: 800px), projection and (min-width: 800px)" href="screen-800.css" />

    @media screen and (min-width: 800px),
    projection and (min-width: 800px) { … }

• height
• device-width – šířka výstupního zobrazovacího zařízení (bez ohledu na velikost okna)
• device-height
• orientation – na výšku, na šířku
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

Podpora: IE9+, Firefox 3.6+, Safari 4+, Chrome 11+, Opera 10.6+, iOS Safari 3.2+, Opera Mini 5+, Opera Mobile 10+, Android Browser 3+

Poznámky:

• otestovat, zda je nutné uvádět vlastnost projection

Deklarace

Jednoduchá

Jednoduchá deklarace přiřazuje vlastnosti jednomu selektoru.

h1 {
  color: blue;
}

Vícenásobná

Vícenásobná deklarace přiřazuje vlastnosti více selektorům odděleným čárkou.

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

Text a písmo

Sdružená definice písma – font

Umožňuje zkrácený zápis všech vlastností písma:

• font-size
• line-height
• font-variant
• font-weight
• font-style
• font-family

p {font: small-caps bold italic Arial 120%/1.5;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

p {font: 90% bold;}

Typ písma – font-family

• Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
  • Bezpatkové (rodina sans-serif)
  • Patkové (rodina serif)
  • Ozdobné písmo (rodina fantasy, cursive)
• Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)

body, table {
  font-family: 'Trebuchet MS', 'Verdana CE', 'Arial CE', 'Helvetica CE', Verdana, Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Times New Roman CE', 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;
}
pre, code {
  font-family: Profont, 'lucida console', 'Courier New CE',
   'Courier CE', 'Courier New', Courier, Monaco, monospace;
}

Velikost písma – font-size

h2 {font-size: 185%;}

Výška řádku – line-height

p {line-height: 1.5;}

Varianta písma – font-variant

abbr {font-variant: small-caps;}

Tučnost písma – font-weight

p {font-weight: normal;}
strong {font-weight: bold;}

Styl písma – font-style

em {font-style: italic;}

Barva textu – color

body, table {color: purple;}

Velikost mezer mezi slovy – word-spacing

h1 {word-spacing: 1em;}

Nepodporuje IE5.5

Velikost mezer mezi písmeny – letter-spacing

h1 {letter-spacing: .3em;}

Bílé znaky – white-space

Určuje způsob zacházení s mezerami, tabulátory a konci řádků.

• normal – výchozí hodnota
• nowrap – zakáže automatické zalamování řádků
• pre – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu
• pre-wrap – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu, ale je povoleno automatické zalamování řádků (nepodporuje IE7-, FireFox 2.0-, Opera 7.5- a Safari 2.0-)
• pre-line – zobrazuje zlomy řádků tak, jako v kódu dokumentu (nepodporuje IE7-, FireFox 3.0-, Opera 9.2- a Safari 2.0-)

th {white-space: nowrap;}

Horizontální zarovnání obsahu – text-align

h1 {text-align: center;} /* na stred */
p {text-align: justify;} /* do bloku */
cite {text-align: right;} /* vpravo */

Vertikální zarovnání – vertical-align

Používá se pro vertikální zarovnání např. malého obrázku na vyšším řádku nebo v tabulkách.

.horni-index {vertical-align: super;} /* v tabulce jako baseline */
.dolni-index {vertical-align: sub;} /* v tabulce jako baseline */
.co-nejvyse {vertical-align: top;}
.s-hornim-okrajem-textu {vertical-align: text-top;} /* v tabulce
 jako baseline */
.doprostred {vertical-align: middle;}
.s-dolnim-okrajem-textu {vertical-align: text-bottom;} /* v tabulce
 jako baseline */
.co-nejnize {vertical-align: bottom;}

IE5- podporuje pouze hodnoty baseline, sub a super.

Dekorace textu – text-decoration

a:hover {text-decoration: underline;} /* podtrzeno */
.ne {text-decoration: line-through;} /* preskrtnuto */
.reklama {text-decoration: blink;} /* blikajici */

IE7 nezná hodnotu blink.

Odsazení prvního řádku – text-indent

p {text-indent: 2em;}

Převod textu – text-transform

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.velka {text-transform: uppercase;}

Stín textu – text-shadow

.stin {text-shadow: 3px 3px 1px #999;}
.embossed {text-shadow: 0 -1px 1px rgba(0,0,0,0.5);}
h1 {
  color: #502a2d;
  letter-spacing: 0.75em;
  text-shadow:
    2px 2px 0 #bab0a6,
    2px -2px 0 #bab0a6,
    -2px 2px 0 #bab0a6,
    -2px -2px 0 #bab0a6,
    9px 9px 0 #a63e3b;
  font-effect: outline;
}

Podpora: Firefox 3.5, Gecko 1.9.1, Opera 9.5 Safari 1.1, WebKit 100, Konqueror 3.4, Chromium 2.0.158.0

Nepodporuje IE8-, (IE5.5 podporuje pouze filtry Shadow a DropShadow)

Směr psaní textu – direction

p {direction: rtl;}

Orientace toku textu – unicode-bidi

p {unicode-bidi: bidi-override; direction: rtl;}

Pozadí

Sdružená definice pozadí – background

Umožňuje zkrácený zápis všech vlastností pozadí:

• background-color
• background-image
• background-position
• background-repeat
• background-attachement

body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Barva pozadí – background-color

p {background-color: #cf3;}
#header p {background-color: transparent;}

Obrázek na pozadí – background-image

body {background-image: url(../images/pozadi.jpg);}
.zadny-obrazek {background-image: none;}

Pozice obrázku na pozadí – background-position

body {
  background: url(../images/pozadi.jpg) no-repeat;
  background-position: center bottom; /* osa x a osa y */
}

Ekvivalentní zápisy:

• left top ~ 0% 0% ~ 0 0
• right bottom ~ 100% 100%

Pokud uvedete pouze jednu hodnotu, druhá se automaticky nastaví na střed:

• 0 ~ left ~ left center ~ 50% 50%
• 50% ~ center ~ center center ~ 50% 50%
• 100% ~ right ~ right center ~ 100% 50%
• top ~ center top ~ 50% 0% ~ 50% 0
• bottom ~ center bottom ~ 50% 100%

V jedné deklaraci nepoužívejte současně textové a číselné hodnoty.

Opakování obrázku na pozadí – background-repeat

body {
  background-image: url(../images/pozadi.jpg);
  background-repeat: repeat-x; /* repeat-y, no-repeat, repeat */
}

Posouvání obrázku na pozadí – background-attachment

body {
  background-image: url(../images/pozadi.jpg);
  background-attachment: fixed;
}

IE6- umožňuje použít hodnotu fixed pouze pro element body.

Rámeček, okraje a rozměry

Zápis hodnot vlastností, u kterých je možné nastavovat všechny čtyři strany je možné zkrátit.

Sdružená definice rámečku – border

Umožňuje zkrácený zápis všech vlastností rámečku:

• border-width
• border-style
• border-color

h1 {border: 4px groove green;}
p {border: 4px ridge green;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Samostatně lze zadávat i jednotlivé strany:

body {
  border-top: 10px solid lime;
  border-right: 10px double green;
  border-bottom: 10px dotted purple;
  border-left: 10px dashed blue;
}

Šířka rámečku – border-width

body {
  border: solid green;
  border-width: 1px 2px 3px 4px;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: solid green;
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

Šířka vykreslování klíčových slov (thin, medium, thick) se v jednotlivých prohlížečích liší.

Styl rámečku – border-style

• solid – spojitý
• double – dvojitý
• groove – příkop
• ridge – val
• inset – vmáčknutý
• outset – vystouplý
• dotted – tečkovaný
• dashed – čárkovaný
• none – žádný

body {
  border: 10px green;
  border-style: solid;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px green;
  border-top-style: double;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: none;
}

IE6- vykresluje tečkovaný rámeček o šířce 1px čárkovaně.

IE5- vykresluje tečkovaný a čárkovaný rámeček jako spojitý.

Barva rámečku – border-color

body {
  border: 10px solid;
  border-color: red black blue green;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px solid;
  border-top-color: red;
  border-right-color: black;
  border-bottom-color: blue;
  border-left-color: transparent;
}

Zaoblení rámečku – border-radius

.radius {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  behavior: url('sites/all/themes/legadino/design/pie.htc');
}

V současné době nepodporují prohlížeče IE a Opera. Pro prohlížeče Mozilla Firefox, Google Chrome a Safari je možné již dnes používat zkušební vlastnosti -moz-border-radius a -webkit-border-radius.

Omezení:

• zaoblit rohy elementu <img> není možné, ale můžete použít obrázek v pozadí elementu <div>
• pro prohlížeč Opera musí být styl pro kulaté rožky uveden ve zdrojovém kódu stránky (na odstranění tohoto omezení se pracuje)

Vnější okraj – margin

p {margin: 1em 0 .5em;}

Samostatně lze zadávat i jednotlivé strany:

p {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: .5em;
  margin-left: 0;
}

Vnitřní okraj – padding

th, td {padding: 0.1em .3em 0;}

Samostatně lze zadávat i jednotlivé strany:

th, td {
  padding-top: .1em;
  padding-right: .3em;
  padding-bottom: 0;
  padding-left: .3em;
}

Výška – height

• pouze pro blokové elementy (pro řádkové je možné použít vlastnost line-height)
• hodnota vyjádřená procenty se vztahuje k zadané výšce nadřazeného elementu
• je-li obsah elementu menší než zadaná výška, vytvoří se pod obsahem prázdné místo
• přetečení obsahu řeší vlastnost overflow

#header {height: 100px;}

 Maximální výška – max-height

div {max-height: 100px;}

Nepodporuje IE6-

Minimální výška – min-height

div {min-height: 100px;}

Nepodporuje IE6-

Šířka – width

• pouze pro blokové elementy
• hodnota vyjádřená procenty se vztahuje k zadané šířce nadřazeného elementu
• je-li obsah elementu menší než zadaná šířka, vytvoří se vedle obsahu prázdné místo
• přetečení obsahu řeší vlastnost overflow

#header, #content, #footer {width: 760px;}

Maximální šířka – max-width

div {max-width: 100px;}

Nepodporuje IE6-

 Minimální šířka – min-width

div {min-width: 100px;}

Nepodporuje IE6-

Zobrazení, pozice a obtékání

Způsob zobrazení – display

Skrytý element na stránce nezabírá žádné místo.

h1 {display: inline;} /* zobrazi se jako radkovy element */
#menu a {display: block;} /* zobrazi se jako blokovy element */
.hidden {display: none;} /* nezobrazi se */

Viditelnost – visibility

Skrytý element na stránce stále zabírá své místo.

.skryt {visibility: hidden;}
.zobrazit {visibility: visible;}

Přetečení – overflow

Určuje jakým způsobem zacházet s obsahem, který se do elementu nevejde:

• visible – přetékající obsah se zobrazí
• hidden – přetékající obsah se nezobrazí
• scroll – posuvníky se zobrazí vždy
• auto – posuvníky se zobrazí pouze v případě nutnosti

pre {
  width: 556px;
  font-size: 13px;
  overflow: auto;
}

Samostatně lze zadávat i jednotlivé směry:

p {
  width: 100px;
  height: 100px;
  overflow-y: auto;
  overflow-x: scroll;
}

Pozice – position

Umístění každého elementu v rámci dokumentu může být statické (výchozí), relativní, absolutní nebo fixní. Umístění se vztahuje vždy k obsahovému bloku elementu.

Statické pozicování – static:

1. Obsahovým blokem je nejbližší nadřazený blokový element.
2. Blok elementu je umístěn v rámci běžného toku dokumentu (dle zdrojového kódu).

Relativní pozicování – relative:

1. Obsahovým blokem je nejbližší nadřazený blokový element.
2. Blok elementu je posunut z původního umístění jedním nebo více směry.
3. Původní prostor po elementu zůstane zachován.
4. Nová pozice elementu neovlivní pozici jiného elementu.

Absolutní pozicování – absolute:

1. Obsahovým blokem je nejbližší nadřazený pozicovaný element v jiném než statickém umístění.
2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
3. V nové pozici blok nijak neovlivňuje jiné elementy.

Fixní pozicování – fixed:

1. Obsahovým blokem je zobrazovací obslat prohlížeče.
2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
3. Blok zůstane v nové pozici i při posunu obsahu prohlížeče.

IE6- vyhodnocuje fixní umístění jako absolutní.

img {
  position: absolute;
  bottom: 0;
  left: 50%; /* levy roh se umisti na stred nadrazeneho elementu */
}

Horní vzdálenost – top

Vzdálenost horního vnějšího okraje relativně či absolutně pozicovaného elementu od horního vnitřního okraje nadřazeného elementu.

#links {
  position: absolute;
  top: 0;
}

Pravá vzdálenost – right

Vzdálenost pravého vnějšího okraje relativně či absolutně pozicovaného elementu od pravého vnitřního okraje nadřazeného elementu.

#menu {
  position: absolute;
  right: 0;
}

Spodní vzdálenost – bottom

Vzdálenost spodního vnějšího okraje relativně či absolutně pozicovaného elementu od spodního vnitřního okraje nadřazeného elementu.

#footer {
  position: absolute;
  bottom: 0;
}

Levá vzdálenost – left

Vzdálenost levého vnějšího okraje relativně či absolutně pozicovaného elementu od levého vnitřního okraje nadřazeného elementu.

#menu {
  position: absolute;
  left: 10px;
}

Vrstva – z-index

Umístění absolutně pozicovaného elementu do vzdálenější (nižší číslo) nebo bližší vrstvy (vyšší číslo).

h1 img {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
#links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

Ořez – clip

Ořízne absolutně pozicovaný element.

img {
  position: absolute;
  clip: rect(10px auto auto auto); /* souradnice z leveho horniho
   rohu */
}

IE6- neumí oříznout pozadí, ale pouze obsah elementu

Plovoucí pozice – float

1. Obsahovým blokem je nejbližší nadřazený blokový element.
2. Blok elementu je možné umístit vlevo nebo vpravo v rámci obsahového bloku.
3. Následujícímu obsahu je umožněno, aby element v plovoucím umístění obtékal zprava nebo zleva.
4. Plovoucí blok elementu se snaží umístit co možná nejvýše v rámci svého obsahového bloku.
5. V nové pozici plovoucí blok ovlivňuje pozice následujících elementů v normálním toku dokumentu.
6. Původní pozice je uvolněna pro další elementy.

Hodnoty:

• left – umístí element vlevo a umožní dalšímu obsahu, aby jej obtékal zprava
• right – umístí element vpravo a umožní dalšímu obsahu, aby jej obtékal zleva
• none – běžný tok dokumentu (zrušení plovoucí pozice)

img {  
  width: 100px; /* definovana sirka je nutnou podminkou */
  float: right;
}

Ukončení obtékání – clear

Určuje stranu, ze které se ukončí obtékání.

.clear {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

Tabulka

Vertikální zarovnání obsahu buněk tabulky – vertical-align

Hodnoty:

• baseline – účaří prvního řádku všech buněk na řádku (různé velikosti písma, vložený objekt)
• top – horní okraj
• middle – střed
• bottom – spodní okraj

th {vertical-align: bottom;}
td {vertical-align: top;}

Splynutí rámečku sousedních buněk a tabulky – border-collapse

table {
  border: 1px dotted blue;
  border-collapse: collapse;
}
table.dvojramecek {
  border: 1px solid green;
  border-collapse: separate; /* oddelene bunky a ramecek tabulky */
}

Velikost mezer mezi rámečky – border-spacing

table {
  border: 1px dotted blue;
  border-spacing: 10px;
}

Nepodporuje IE7-

Umístění titulku – caption-side

Hodnoty:

• top – nad tabulkou
• bottom – pod tabulkou
• left – vlevo
• right – vpravo

table {
  caption-side: bottom;
}

Nepodporuje IE7-

Opera zná pouze hodnoty top a bottom

Rámeček kolem prázdných buněk – empty-cells

table {
  border: 1px dotted blue;
  empty-cells: hide;
}
table.zobrazit {
  border: 1px solid green;
  empty-cells: show;
}

Nepodporuje IE7-

Seznamy

Sdružená definice seznamů – list-style

Umožňuje zkrácený zápis všech vlastností seznamů:

• list-style-type
• list-style-position
• list-style-image

ul li {list-style: square outside none;}
ol li {list-style: upper-latin outside url(images/menu.gif);}

Typ označení položky seznamu – list-style-type

ul, ol {list-style-type: none;} /* bez oznaceni */
ul.kolecko {list-style-type: disc;}
ul.kruh {list-style-type: circle;}
ul.ctverec {list-style-type: square;}
ol.cislo {list-style-type: decimal;}
ol.velke-pismeno {list-style-type: upper-latin;}
ol.male-pismeno {list-style-type: lower-latin;}
ol.velke-rimske {list-style-type: upper-roman;}
ol.male-rimske {list-style-type: lower-roman;}
ol.velke-pismeno {list-style-type: upper-alpha;}
ol.male-pismeno {list-style-type: lower-alpha;}
ol.recke-pismeno {list-style-type: lower-greek;} /* nefunguje v IE */
ol.s-pocatecni-nulou {list-style-type: decimal-leading-zero;}
 /* nefunguje v IE */
ol.armenske-cislo {list-style-type: armenian;} /* nefunguje
 v IE a Opeře */
ol.hebrejske-cislo {list-style-type: georgian;} /* nefunguje
 asi nikde */

Pozice označení položky seznamu -list-style-position

ul {list-style-position: outside;}
ol {list-style-position: inside;}

Obrázek označení položky seznamu – list-style-image

Definovaný obrázek přepíše vlastnost list-style-type.

ul {list-style-image: url(images/menu.gif);}

Akordeon

 Efekt rozbalování s sbalování obsahu využívající jQuery rozšíření Collapser.

Stejná výška prvků

Pokud potřebujete zajistit na stránce stejnou výšku některých prvků (tj. zjistit maximální výšku a nastavit ji u všech ostatních) jistě se Vám bude hodit níže uvedené řešení.

1. Do stránky připojte jQuery knihovnu, skripty jquery.equalHeights.js a jquery.pxem.js (převod z px na em v em-based layoutech) skripty obsažené v arichvu eaualheights.zip.
   

     ...
     <meta http-equiv="content-script-type" content="text/javascript" />
     <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
     <script type="text/javascript" src="jquery.equalHeights.js"></script>
     <script type="text/javascript" src="jquery.pxem.js"></script>
     <script type="text/javascript" src="jquery.settings.js"></script>
   </head>
   <body>
     ...

2. Vytvořte soubor jquery.settings.js s níže uvedeným obsahem a upravte požadované selektory dle potřeb (skript se spustí automaticky po načtení celé stránky):
   

   $(document).ready(function(){
     // vyber selektoru
     $("#box1, #box2, .boxes ... etc.").equalHeights({ relative: true });  
   });

Zvýraznění obrázkové mapy

Efekt grafického zvýraznění obrázkové mapy využívající jQuery rozšíření Map Hilight.

Řazení dat v tabulce

Pomocí jQuery pluginu TableSort je možné řadit data v tabulce dle záhlaví.