Úvod

Název Internet je složen z původně latinské předpony inter (mezi, mezinárodní) a anglického slova net (počítačová síť).

Síťová služba World-Wide Web (celosvětová pavučina – zkráceně web) umožňuje prezentovat informace v přehledném grafickém prostředí. Libovolnou webovou stránku je možné v prohlížeči zobrazit zadáním její unikátní adresy URL (Uniform Resource Locator). Informace jsou uloženy v textovém dokumentu, doplněném o grafické prvky a multimédia ve formě webových stránek. Stránka může obsahovat odkazy, pomocí nichž je možné přejít na jiné místo aktuálního, nebo i jiného dokumentu v Internetu – tento způsob členění se nazývá hypertext.

Webová stránka je textový dokument s příponu html (dynamicky generované stránky mohou mít i jiné přípony např. php, asp atd.) obsahující zdrojový kód. Z důvodu zmenšení objemu přenášených dat obsahuje zdrojový kód pouze ta nejnutnější data, která je schopen prohlížeč interpretovat (předat uživateli v přehledné formě). Webovou stránku je možné přirovnat k "receptu", podle kterého prohlížeč "vaří".

Zdrojový kód webové stránky je možné zobrazit:

ve webovém prohlížeči příkazem Zobrazit, Zdrojový kód;
v textovém editoru, kde je možné jej také upravovat.

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

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	Znalost (X)HTML, CSS, skriptování atd.

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

Znakové sady

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

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)
„	&bdquo;	„ (počáteční kulatá uvozovka – 99)
“	“	“ (koncová kulatá uvozovka – 66)
‚	&sbquo;	‚ (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)
&permil;		‰ (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	'
<	<	less than	<
>	>	greater than	>
		non-breaking space (patří za jednoslabičné přeložky)	"pevná (nerozdělitelná) mezera"
‑	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"
		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:

Dokument v aplikaci MS Word, který vyexportujte do HTML formátu.
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.

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

Úvod

Aplikace

Serverové aplikace

Lokální editory

PSPad

Vývoj

HTML 2.0

HTML 3.0

HTML 3.2

HTML 4.0

HTML 4.01

XHTML 1.0

XHTML 1.1

XHTML 2.0

HTML 5

XML

Srovnání HTML, XHTML a XML

Stejná technologie

Různé použití

HTML

XHTML

XML

Základní pojmy

Interpret (User Agent)

URI (Uniform Resource Identifier)

URL (Uniform Resource Locator)

Zavržený (Deprecated)

Znakové sady

128 znaků (27)

ASCII

256 znaků (28)

ISO 8859-1

ISO 8859-2

ISO 8859-...

CP852

Kód Kamenických

Windows 1250 (CP 1250)

Miliardy znaků

Unicode (ISO 10646)

UTF-8

UTF-16

UTF-32

Kódování znaků

Značkovací jazyk

Element (prvek, značka)

Element bez obsahu

Atributy (parametry, vlastnosti)

Komentáře

Podmíněné komentáře

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

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

Znakové entity

Speciální znakové (html) entity

Dokument

XML deklarace

Typ dokumentu

Element <html>

Hlavička dokumentu <head>

Tělo dokumentu <body>

Cvičení 1

Cvičení 2

128 znaků (2⁷)

256 znaků (2⁸)