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ř.:

• optimizepress.com – responzivní web (jednorázová platba) 
• webflow.com – responzivní web (zdarma doména 3. řádu, další možnosti -> měsíční platba) 
• 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
• ebrana.cz – tvorba webových stránek, e-shopů, internetová reklama a SEO, PPC
• home.spaces.live.com - blog, fotografie, videa, další moduly a miniaplikace (500 MB týdně, fotka max. 600 px)
• webmium.com - vytvořte si web snadno a rychle (firemní)
• 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
• webdomu.cz – aplikace pro bytová družstva a společenství vlastníků jednotek (SVJ)
• 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.

Způsoby vytváření webových stránek

Způsob	Editor	Výhody	Nevýhody
Rychle	WYSIWYG (What You See Is What You Get) editor – při vytváření vidíte stránku tak, jak by měla vypadat v prohlížeči	K vytvoření stránek stačí pouze základní znalost ovládání počítače.	Závislost na kvalitě editoru
Kvalitně	Textový (strukturní) editor – vytváříte přímo zdrojový kód	Úplná kontrola nad obsahem stránek	Znalost (X)HTML, CSS, skriptování atd.
Efektivně	Editor zvládající WYSIWYG i textový režim	K zrychlení práce je možné využít vhodné funkce WYSIWYG editoru

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 vycházející z jazyka SGML
• Specifikaci vydala standardizační organizace v roce 1994

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

HTML 3.0

Verze 3.0 nebyla nikdy jako standard přijata pro svoji přílišnou složitost.

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ámců

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
• Od konce roku 2012 se začíná HTML5 na webu postupně prosazovat
• 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

Značkovací jazyky se dělí na:

• popisné – např. (X)HTML
• prodedurální
• prezentační

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

Element (prvek, značka)

Elementy nejsou webovým prohlížečem zobrazovány přímo, ale jsou interpretovány k vytvoření vizuálního obsahu.

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)
  • některé specifikace (verze) značkovacího jazyka uzavírací část nevyžadují – jedná se o tzv. nepárové (prázdné) elementy, kterým je např. <img>, <hr>, <br> atd.
  • pokud u párových elementů není uzavírací značka uvedena, prohlížeč si ji snaží "domyslet" např. neuzavřený blokový element uzavře, pokud je bezprostředně následován dalším blokovým elementem 

<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)

Atributy se dělí na:

• obecné (globální) – mohou být použity u všech elementů např. id, class, title atd.
• specifické (vlastní) – jsou určeny pouze pro konkrétní elementy např. href pro odkaz, src pro obrázek atd.

Slouží k upřesnění významu nebo k přiřazení vlastností prvku. Každý atribut má definovanou svoji výchozí hodnotu. Atribut se uvádí pouze u počátečního tagu.

<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).

Syntaxe podmíněných komentářů

Syntaxe	Význam
!	negace (not)
lt	menší než (less than)
lte	menší nebo rovno (less than or equal to)
gt	větší než (greater than)
gte	větší nebo rovno (greater than or equal to)
&	a (and)
|	nebo (or)

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]-->

Pro odstranění mezer (používá se např. v hlavičce dokumentu) se používá syntaxe:

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

<!--[if !IE]><!--><html><!--<![endif]-->

Znakové entity

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

Příklad znakových entit

Decimální zápis znakové entity	Alternativní zápis	Grafické vyjádření
ß		β (řecká abeceda)
å		å (norština)
水		水 (čínský znak pro vodu)
&247;	÷	÷ (děleno)
×	×	× (krát)
±	±	± (plus mínus)
&8722;	−	– (minus)
–	–	– (půlčtverčíková pomlčka, ne spojovník)
—	—	— (čtverčíková pomlčka)
„	„	„ (počáteční kulatá uvozovka – 99)
“	“	“ (koncová kulatá uvozovka – 66)
‚	‚	‚ (počáteční jednoduchá uvozovka)
‘	‘	‘ (koncová jednoduchá uvozovka)
’	’	’ (apostrof – odsuvník)
»	»	» (počáteční obrácené franc. uvozovky)
«	«	« (koncové obrácené franc. uvozovky)
®	®	® (registrovaná známka)
©	©	© (copyright)
¶	¶	¶ (znak odstavce)
★		★ (černá hvězda)
☆		☆ (bílá hvězda)
✔		✔ (ano)
✓		✓ (ano)
✓		✓ (ano)
✗		✗ (ne)
✘		✘ (ne)
✕		✕ (ne)
✖		✖ (ne)
‰		‰ (promile)

Speciální znakové (html) entity

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

Speciální znakové entity

Decimální zápis znakové entity	Alternativní zápis	Poznámka	Grafické vyjádření
"	"	quote	"
&	&	ampersand (et)	&
'	' (neznají všechny prohlížeče)	apostrophe	'
&#060;	&lt;	less than	<
&#062;	&gt;	greater than	>
&#160;	&nbsp;	non-breaking space (patří za jednoslabičné přeložky)	"pevná (nerozdělitelná) mezera"
&#8209;	N/A	non-breaking hypen (Dalším řešením může být použití CSS: <span style="white-space: nowrap;">e-mail</span>)	"pevná (nerozdělitelná) pomlčka"
	&thinsp;	thin space (Měla by se používat mezi číslem a jednotkou, titulem a jménem, v telefonních číslech atd. Bohužel ne všechny prohlížeče ji interpretují jako nerozdělitelnou.)	"tenká" mezera

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">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první HTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html>

Struktura XHTML 1.0 dokumentu

• X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód
  • meta tag "X-UA-Compatible" by měl být přímo za elementem <head> (v ideálním případě by mezi DOCTYPE, html, head a tímto meta tagem nemělo být nic tj. ani žádný podmíněný komentář )
  • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování bližší info viz What's the difference if meta “X-UA-Compatible” exists or not?
  • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován)
    • podpora jen do ledna 2014 !!!

<?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="X-UA-Compatible" content="IE=edge,chrome=1" />
    <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" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Můj první XHTML dokument</h1>
    <p>Jak snadné, že?</p>
  </body>
</html> 

Struktura HTML 5 dokumentu

<!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">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
  </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" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </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 se jedná o veřejně dostupnou deklaraci
• 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 již raději nepoužívejte.

Příloha	Velikost
dokument-html401.html	753 bajtů
dokument-xhtml10.html	859 bajtů

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.

Příloha	Velikost
data-oit.zip	124.45 KB
data-oit-easy.zip	124.22 KB

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>
  <div>Autor: <cite>Jan Werich</cite></div>
</blockquote>

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. 

Příloha	Velikost
elementy-blokove.html	2.34 KB

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

Příloha	Velikost
elementy-radkove.html	6.07 KB

Základní nahrazované elementy

Některé elementy jsou nahrazovány jinými objekty.

Jedná se např. o elementy <img>, <audio>, <video>, <canvas> atd.

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čů.

Příloha	Velikost
bile-znaky.html	1.4 KB

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>

 

Příloha	Velikost
kontejnery.html	1.05 KB

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>

Nastavení počátku a hodnoty číslování:

<ol start="4">
  <li>čtvrtá položka</li>
  <li>pátá položka</li>
  <li value="2">druhá 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.

Příloha	Velikost
seznamy-definice.html	1.77 KB

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>

 

Příloha	Velikost
tabulka.html	6.29 KB

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.

Příloha	Velikost
obrazek.zip	20.58 KB

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.