Hypertextový značkovací jazyk
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:
Kvalita webových stránek závisí na znalostech a časových možnostech tvůrce.
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ř.:
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ů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 |
Editor | Cena | Poznámky |
---|---|---|
Adobe Dreamweaver (GoLive) |
|
|
Quanta |
|
|
Microsoft FrontPage |
|
|
CKeditor |
|
|
Kompozer (NVU) |
|
|
Writer/Web editor z OpenOffice |
|
|
Easy Editor |
||
Mozilla Editor |
|
|
Netscape Editor |
|
|
Amaya Editor |
|
Editor | Cena | Poznámky |
---|---|---|
Eclipse |
|
|
NetBeans IDE |
|
|
PSPad |
|
|
Notepad++ |
||
Macromedia HomeSite |
|
|
AceHTML |
||
EasyPad |
||
Bluefish |
|
Některé aplikace umožňují uložit (exportovat) dokument jako webovou stránku:
Existuje také mnoho průvodců a podpůrných utilit na vytváření webových stránek či dotazníků:
*.module
<li>
a do políčka "na konec" napište </li>
<ul>
a </ul>
pro nečíslovaný seznam
je možné vkládat klávesovou zkratkou Ctrl+Shift+mezeraCESTA-K-PSPAD\Script\JScript
Vývoj základního jazyka pro tvorbu webových stránek, který umožňuje publikovat dokumenty na Internetu.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Verze 3.0 nebyla nikdy jako standard přijata pro svoji přílišnou složitost.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!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">
<!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">
application/xhtml+xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<h1>Nadpis první úrovně</h1>
<p>Odstavec textu</p>
<a href="http://www.google.com/">Google</a>
Zařízení, které interpretuje (zpřístupňuje, vyjadřuje) webovou stránku:
Jedinečná identifikace zdroje, obecně použitelná množina na všechny druhy adres.
Jedinečná identifikace zdroje často používaných schémat, která jsou podmnožinou URI.
Definuje:
Příklad URL pro http protokol:
http://cs.wikipedia.org:80/w/wiki.phtml?title=URL&action=edit
Zastaralý prvek, který byl nahrazen jiným, nebo bude ze specifikace vypuštěn.
Znaková sada určuje uspořádanou množinu znaků.
Ve dvojkové soustavě je možné 128 znaků vyjádřit pomocí 7 bitů.
Znak | Pořadové číslo |
---|---|
" | 34 |
& | 38 |
' | 39 |
< | 60 |
> | 62 |
@ | 64 |
\ | 92 |
Ve dvojkové soustavě je možné 256 znaků vyjádřit pomocí 8 bitů (bajt).
Prvních 128 znaků je shodných s ASCII.
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.
Kódování znaků vyjadřuje binární podobu znaků znakové sady a je možné jej určit pomocí:
<?php header("Content-Type: text/html; charset=utf-8"); ?>
<?xml version="1.0" encoding="utf-8"?>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
Značkovací jazyky se dělí na:
(X)HTML je značkovací jazyk, který je tvořen pomocí elementů (prvků, značek).
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í:
<h1>Nadpis první úrovně</h1>
Při vnořování se prvky nesmí křížit!
<h1><em></h1></em>
<h1><em></em></h1>
Zápis elementu bez obsahu je možné zkrátit.
Např. zápis:
<hr></hr>
<hr />
<hr>
Poznámka:
Elementy bez obsahu nemají v HTML uzavírací část!
Atributy se dělí na:
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' />
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ů.
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 (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 | 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) |
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]-->
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]-->
Používají se pro vyjádření znaků nezávisle na znakové sadě dokumentu.
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) |
Mají v kódu dokumentu zvláštní význam a proto musí být v běžném textu nahrazovány entitami.
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ů:
(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
<?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 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:
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Syntaktická pravidla stanovující:
U HTML 4.01 a XHTML 1.0 je možné si zvolit jeden ze tří typů dokumentu:
Typ dokumentu obsahuje:
<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:
Důvody uvádění kódu jazyka:
<head> </head>
<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ů |
Z přiložených dat vytvořte dle PDF vzoru:
Příloha | Velikost |
---|---|
data-oit.zip | 124.45 KB |
data-oit-easy.zip | 124.22 KB |
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.
Obsah hlavičky dokumentu <head>
prohlížeče přímo nezobrazují, mohou ho ovšem zpřístupnit jiným způsobem.
Např. vizuální prohlížeče mohou:
Špatně:
<title>Vojsko</title>
<title>Moje stránky</title>
Dobře:
<title>Velitelství výcviku – Vojenská akademie</title>
<title>Tomáš Daněk > životopis</title>
Poznámka: entita > se zobrazí jako znak větší než >
Meta data (informace) – specifikují informace o daném dokumentu.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Kódování uvádějte v hlavičce dokumentu vždy před prvním textem tj. i před elementem <title> .
Primární jazyk dokumentu a sémantická informace o jazyku obsahu dokumentu
<meta http-equiv="content-language" content="cs" /> <meta name="language" content="cs" />
<meta name="description" content="Resortní vzdělávací a výcvikové zařízení Ministerstva obrany České republiky" />
<meta name="keywords" content="velitelství,výcvik,vojenská,akademie,Vyškov,vzdělání,kurz,vojsko,armáda" />
<meta name="author" content="all: Odbor informačních technologií (OIT) VeV-VA; oit@ispovy.acr" />
<meta name="author" content="code: Tomáš Daněk (Tomas Danek); tomas.danek@ispovy.acr" /> <meta name="author" content="style: Petr Novák (Petr Novak); pepa@z-depa.cz" /> <meta name="author" content="scripts: Petr Kozina; kozina@skriptovani.com" />
<meta name="webmaster" content="Bc. Tomáš DANĚK (http://tomas.dankovi.info/)" />
<meta name="copyright" content="2009 Velitelství výcviku – Vojenská akademie - Odbor informačních technologií (oit@ispovy.acr)" />
Pokud používáte u elementů atributy style
je vhodné doplnit do hlavičky:
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="default-style" content="nazev-stylu" />
<meta http-equiv="content-script-type" content="text/javascript" />
nebo
<meta http-equiv="content-script-type" content="text/vbscript" />
Počet sekund do obnovy dokumentu – použitelné např. u webových kamer
<meta http-equiv="refresh" content="10" />
Používejte pouze u webů, které velmi často mění svůj obsah (webové kamery, zpravodajství, webová fóra atp.)
<!-- dokument se nesmi ukladat do cache --> <!-- CACHE - MSIE --> <meta http-equiv='cache-control' content='must-revalidate, post-check=0, pre-check=0' /> <meta http-equiv='pragma' content='public' /> <!-- CACHE - MSIE end --> <!-- CACHE - other browsers --> <meta http-equiv='cache-control' content='no-cache' /> <meta http-equiv='pragma' content='no-cache' /> <meta http-equiv='expires' content='-1' /> <!-- CACHE - other browsers end --> <!-- end: dokument se nesmi ukladat do cache -->
Po uvedeném datu žádá prohlížeč o obnovení dokumentu (neuvádějte hodnotu nula), hodnota -1 znamená neukládat do cache viz víše:
<meta http-equiv="expires" content="Thu, 30 Dec 2002 15:17:45 GMT" />
Dokument je platný (může být nahráván z cache prohlížeče) jeden týden tj. 604 800 s od posledního požadavku:
<meta http-equiv="cache-control" content="max-age=604800, must-revalidate">
Dokument je platný (může být nahráván z cache prohlížeče) jeden den tj. 86 400 s od posledního požadavku:
<meta http-equiv="cache-control" content="max-age=86400, must-revalidate" />
Soubor metadatových prvků, jehož záměrem je usnadnit vyhledávání elektronických zdrojů.
<meta name="DC.Title" content="Velitelství výcviku – Vojenská akademie" /> <meta name="DC.Identifier" content="http://www.vavyskov.cz" /> <meta name="DC.Language" content="cs" />
Klíčová slova:
Indexovat obsah, následovat odkazy, okolo výsledku vyhledávání zobrazit i část textu a archivovat snímek stránky:
<meta name="robots" content="index,follow" /> <meta name="googlebot" content="index,follow,snippet,archive" />
Neindexovat obsah, nenásledovat odkazy, okolo výsledku vyhledávání nezobrazovat část textu a nevytvářet snímek stránky:
<meta name="robots" content="noindex,nofollow" /> <meta name="googlebot" content="noindex,nofollow,nosnippet,noarchive" />
Klíčová slova bez a se záporem no je možné i kombinovat.
<meta>
. Univerzálním řešením je používat kódování UTF-8. Pro češtinu je také možné použít ISO-8859-2 nebo windows-1250.<html>
a skládá se ze dvou základních částí: hlavičky <head>
a těla <body>
.<title>
.
Tělo dokumentu <body>
:
Blokové elementy při zobrazení začínají a končí novým řádkem.
<h1>Nadpis první úrovně</h1>
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ů.
<p>Odstavec textu</p>
<hr />
<address>Velitelství výcviku – Vojenská akademie (VeV-VA), 682 01 Vyškov, Víta Nejedlého, Tel. +420 973 451 022</address>
<address> Velitelství výcviku – Vojenská akademie (VeV-VA)<br /> Víta Nejedlého<br /> 682 01 Vyškov<br /> Tel. +420 973 451 022 </address>
Viz Bílé znaky
Viz Kontejnery
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 |
Řádkové elementy:
<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.
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:
<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>.
<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>.
Příklad 23:
<p>2<sup>3</sup></p>
Příklad H2O:
<p>H<sub>2</sub>0</p>
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>
Tento element označuje citovaný zdroj, odkaz na další zdroje nebo citaci (jména osob, organizací apod.).
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>
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>
Obsahem tohoto elementu je pojem nebo definice.
<p>Definice: <dfn>Lednička</dfn> se obvykle používá k chlazení potravin.</p>
Používá se k označení počítačového nebo programového kódu.
<p>Odkaz se v (X)HTML vytváří pomocí elementu <code>a</code>.</p>
Vyznačuje vzorový výstup programů, skriptů apod.
Označuje proměnnou, její vzorovou hodnotu apod.
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>
Velikost textu bude o jednu úroveň větší než okolní text.
Velikost textu bude o jednu úroveň menší než okolní text.
Všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu).
Viz Kontejnery
Příloha | Velikost |
---|---|
elementy-radkove.html | 6.07 KB |
Některé elementy jsou nahrazovány jinými objekty.
Jedná se např. o elementy <img>, <audio>, <video>, <canvas> atd.
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
.
Bývá zobrazen přeškrtnutý.
Bývá zobrazen kurzivou.
<p> Mezery a→ → tabulátory </p>
<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.
<pre> Předformátovaný text s mezerami → → tabulátory a s odřádkováním </pre>
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 spojky na koncích rádků je vhodné spojovat s následujícím slovem.</p>
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 |
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>
<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>
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 |
Výčet zdůrazňuje rovnocennost položek.
Element <ul> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:
<ul> <li>jedna položka</li> <li>druhá položka</li> <li>třetí položka</li> </ul>
Výčet zdůrazňuje rovnocennost a pořadí položek.
Element <ol> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:
<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 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>.
Ohraničuje obsah seznamu.
Měla by být co možná nejkratší. Povolený obsah:
Povolený obsah:
<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>
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>
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 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>
Povolený obsah:
Pomocí atributu summary vždy uvádějte popis tabulky tj. souhrn účelu a struktury tabulky pro nevizuální interprety.
Povolený obsah:
Povolený obsah:
Některé povolené atributy:
Poznámka:
Do prázdných buněk je vhodné vložit znakovou entitu 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 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> </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> </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 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> </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> </td>
</tr>
</tbody>
</table>
Alternativní způsob zobrazení složitější tabulky:
<h3>Program na víkend</h3> <h4>Pátek</h4> <ul> <li>Příjezd <ul> <li><strong>Čas:</strong> do 19.00 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 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 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 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 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 h</li> <li><strong>Účast:</strong> Do hmotnosti 80 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 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 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 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 |
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:
Povinný atribut určující URI adresu obrázku (umístění a název).
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 – Vojenské akademie"
title="Logo Velitelství výcviku – Vojenské akademie"
longdesc="popis/vyznam-symbolu.html" />
<a href="popis/vyznam-symbolu.html" title="Popis jednotlivých
symbolů loga Logo Velitelství výcviku – Vojenské
akademie">[popis]</a>
</p>
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í:
Alternativní informace k obrázku, pokud nestačí atribut alt.
Příloha | Velikost |
---|---|
obrazek.zip | 20.58 KB |
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.
<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>
<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.
Strukturální elementy (header, nav, main, section, article, aside, footer) vytváří strukturu dokumentu tj. člení dokument na jednotlivé celky.
Sémantické elementy - popisují povahu obsahu elementu:
Z přiložených dat vytvořte webovou prezentaci.
Příloha | Velikost |
---|---|
data-iro.zip | 110.7 KB |
Z přiložených dat vytvořte webovou fotogalerii.
Příloha | Velikost |
---|---|
data-fotogalerie.zip | 2.25 MB |
V češtině bychom správně měli rozlišovat pevnou mezeru non-breaking space (patří za jednoslabičné přeložky) a tenkou mezeru thin space (používá se mezi číslem a jednotkou, titulem a jménem, v telefonních číslech atd.) viz znakové entity. Bohužel ne všechny prohlížeče interpretují tenkou mezeru jako nerozdělitelnou.
Základní zásady:
×
)–
a spojovníky (-)
„
a horní 66 “
) a anglické "rovné"Bližší informace: