Úvod Skripta „Tvorba www stránek“ jsou určena pro všechny, kteří si chtějí rozšířit své IT znalosti v oblasti tvorby a webových stránek. Skripta jsou určena pro začátečníky a pokrývají standardy HTML5, CSS3, JavaScript, knihovna jQuery. Dozvíte se také, jak optimalizovat webové stránky pro vyhledávače – SEO, jak zaregistrovat doménu, zřídit hosting a publikovat webové stránky na Internetu. Zaměříme se i na optimalizaci webových stránek pro mobilní zařízení – moderní responzivní design a na základy grafiky s použitím produktu Adobe Photoshop. Součástí těchto skript jsou i příklady. Softwarové požadavky pro Windows: 1. 2. 3. 4.

OS Windows 7 a vyšší editor pro zápis kódu (Adobe Dreamweaver, PSPad, Notepad++, Sublime Text) virtuální webový server (Wamp, Xampp) alespoň 3 standardní webové prohlížeče (Google Chrome, Internet Explorer, Mozilla Firefox)

Softwarové požadavky pro Linux: OS Linux – distribuce Ubuntu, Debian editor pro zápis kódu (Bluefish) virtuální webový server (Lamp) standardní webové prohlížeče (Google Chrome, Mozilla Firefox)

Softwarové požadavky pro Mac: Mac OS X Snow Leopard nebo Lion nebo OS X Mountain Lion a vyšší editor pro zápis kódu (Adobe Dreamweaver, Sublime Text) virtuální webový server (je součástí systému Mac OS X nebo OS X)

Skripta obsahují části textů a náměty ze zdrojů: wikipedia.org, w3schools.com a ukázky příkladů z volně dostupných zdrojů. EULA Podle ustanovení § 12 Autorského zákona č. 121/2000 Sb. udělují ASYS IJD, spol. s r. o. (dále jen vlastník) a Jiří Hampl (dále jen autor) uživateli právo k užití díla pro osobní potřebu, citace apod. (viz ustanovení § 29 a násl. Autorského zákona). Vlastník uděluje uživateli nevýhradní licenci a výslovně zakazuje uživateli publikaci skript nebo jejich částí na Internetu, zakazuje rozmnožování a distribuci. Vlastník si nárokuje odměnu za užití licence. Odměnu stanoví vlastník při poskytnutí licence konkrétnímu uživateli (nabyvateli). V případě, že k užití autorského díla dojde bez souhlasu vlastníka a autora, má vlastník podle ustanovení § 40 odst. 4 Autorského zákona právo na náhradu škody a na vydání bezdůvodného obohacení. Vlastník má právo se domáhat, namísto ušlého zisku, náhrady ušlého zisku ve výši obvyklé odměny.

6

I. Značkovací jazyk HTML

1.

Kódování HTML

1.1.

Základní informace o webových stránkách

1.1.1.

Webové stránky statické a dynamické

Webová stránka je dokument, který je možné pomocí webového prohlížeče zobrazit na monitoru počítače či displeji mobilního přístroje. Webové stránky jsou obvykle poskytované v rámci World Wide Webu. Informace jsou prezentovány ve formě hypertextu, který je vytvořen použitím značek HTML. Stránky se skládají z textu, multimediálních dat (obrázky, videa, zvuky,…) a odkazů, které umožňují přechod na další webové stránky. Webové stránky mohou být uloženy v podobě souborů na pevném disku nebo je poskytují webové servery prostřednictvím počítačové sítě nebo Internetu, kde jsou přenášeny pomocí protokolu HTTP. Stránky mohou být statické (obsahují stále stejný obsah, jsou uloženy v souborech) nebo dynamické (mění svůj obsah v čase, vytváří je program na straně webového serveru). Stránka se může měnit i přímo v prohlížeči použitím skriptovacích jazyků, Javy, ActiveX a dalších technologií.

1.1.2.

Co je HTML?

HyperText Markup Language (HTML) neboli značkovací jazyk je standard pro tvorbu struktury a obsahu webových stránek. Můžete se setkat s označením XHTML, který je rovněž značkovacím jazykem, jehož původní přínos měl být nahrazení právě HTML. Ve skutečnosti přinesl spoustu omezení a nepříjemností při kódování a stal se slepou uličkou při určování standardů. HTML5 HTML5 je nejnovější verze specifikace značkovacího jazyka HTML, která přinesla velké změny v technologiích webových stránek. Významným krokem od poslední verze 4.01 je zjednodušení zápisu některých značek, odstranění zbytečných a zastaralých značek, možnost pracovat s multimédii nebo sémantické značky definující strukturu stránky.

1.1.3.

Co je CSS?

Cascading Style Sheets neboli kaskádové styly je standard pro popis způsobu vykreslování stránek ve webových prohlížečích, napsané v jazycích HTML, XHTML, XML. Hlavním smyslem je umožnit kodérům a programátorům oddělit vzhled dokumentu od jeho struktury a obsahu, rozsáhlé možnosti formátování a jednoduchou údržbu webové prezentace. Nevýhodou CSS je ne vždy dostatečná podpora v majoritních prohlížečích. Prohlížeče obsahují v implementaci CSS chyby a je někdy nesnadné napsat kód tak, aby se ve všech (resp. v běžných) prohlížečích výsledek zobrazil stejně. Pro některé CSS vlastnosti existuje několik variant zápisu tak, aby byl styl vykreslen ve všech běžných prohlížečích. CSS3 CSS3 je třetí verze kaskádových stylů od roku 2005, kdy byla tato technologie vyvinuta. Její kompletní dokončení se předpokládá na rok 2015. CSS3 přináší velké množství nových vlastností, díky kterým odpadávají některé práce v grafických editorech nebo obcházení skriptovacími jazyky.

7

I. Značkovací jazyk HTML

Než bude dokončen vývoj této verze a než standardní prohlížeče začnou plně podporovat všechny vlastnosti, je potřeba tyto nové vlastnosti definovat s tzv. vendor prefixy pro jednotlivé prohlížeče.

K vendro prefixům se dostaneme později.

1.1.4.

Co je PHP?

Hypertext Preprocesor neboli hypertextový preprocesor, původně Personal Home Page, je nejrozšířenější programovací skriptovací jazyk určený především k programování dynamických webových stránek a webových aplikací. Syntaxe jazyka je inspirována několika programovacími jazyky, např. Perl, C, Pascal, Java. Oblíbený je hlavně díky jednoduchosti použití a bohaté zásobě funkcí. PHP podporuje mnoho knihoven pro různé účely, např. zpracování textu, grafiky, práci se soubory, přístup k většině databázových systémů (MySQL, ODBC, Oracle, MSSQL) a podporuje celé řady internetových protokolů (HTTP, SMTP, FTP, IMAP, POP3, …). Na rozdíl od HTML a CSS jsou skripty zpracovány na straně serveru a k uživateli je odeslán výsledek skriptu, který prohlížeč následně vykreslí na zobrazovacím zařízení.

1.1.5.

Co je MySQL?

MySQL je multiplatformní databázový systém. Komunikace s ním probíhá pomocí jazyka SQL s několika modifikacemi a rozšířeními. V současnosti patří MySQL k nejrozšířenějším řešením jako základ webového serveru a to díky snadné implementaci, výkonu a bezplatné GPL licenci (existuje i komerční licence).

1.1.6.

Co je JavaScript

JavaScript (JS) je objektově orientovaný skriptovací jazyk, který se nejčastěji využívá jako interpretovaný programovací jazyk pro webové stránky. Obvykle jsou jím ovládány různé interaktivní prvky nebo tvořeny animace a efekty obrázků nebo textů. Ačkoliv je JS programovací skriptovací jazyk, oproti PHP se zpravidla spouští na straně klienta po stažení webové stánky. Existují však implementace, které umožní spouštět skript na straně serveru.

Většina dnešních webových stránek hojně využívá JavaScript, proto není dobré, abyste jako uživatel měl tento jazyk v prohlížeči zakázaný. V dobách, kdy bylo běžné, že uživatel platí za přenesená data, byl právě JS v prohlížečích zakázaný.

jQuery jQuery je javascriptová knihovna s několika funkcemi, např. pro vytváření událostí, manipulaci s CSS, animací a efektů nebo AJAX.

8

I. Značkovací jazyk HTML

1.1.7.

Co je CMS?

Content Management System, neboli systém pro správu obsahu je software zajišťující správu dokumentů, nejčastěji pak webového obsahu – redakční systém. Smyslem CMS je umožnit uživatelům bez znalostí HTML a programovacích jazyků snadnou správu obsahu webových stránek. Hlavními funkcemi CMS jsou tvorba, editace a publikování článků, řízení přístupu k obsahu a správa uživatelů a jejich přístupových práv, správa diskusí a komentářů, správa souborů, galerií, obrázků, kalendářní funkce a statistiky. Nejrozšířenějšími redakčními systémy, které jsou nasazovány na webové stránky, jsou Drupal, Joomla!, Wordpress.

1.2.

Výběr a instalace HTML editoru

1.2.1.

Jaký editor zvolit?

Existuje široká řada editorů – opravdu jednoduché, bez jakýchkoliv funkcí až po velmi pokročilé, které dokáží pracovat s různými programovacími jazyky, obsahují šablony a nástroje pro vytváření profesionálních webových stránek. První otázka při volbě editoru, kterou budete řešit, je volba mezi editorem pro ruční zápis kódu a tzv. WYSIWYG editorem. WYSIWYG editory What You See Is What You Get (WYSIWYG), neboli co vidíte, to získáte. Jde o typ editoru, kde nepracujete se samotným kódem, ale stránku a obsah vytváříte podobně jako v aplikaci Word – tedy, vyberete text a pomocí nástrojů ho formátujete. Určitě se hodí pro začínající uživatele, kteří si mohou osvojit HTML tagy z výsledků, které editor vytvoří. Nutno však upozornit, že většina WYSIWYG editorů generuje ne zrovna čistý, tvz. nevalidní kód. Nejpoužívanějším je TinyMCE, ačkoliv nejlepší WYSIWYG editor je žádný WYSIWYG editor. Chcete-li se naučit tvořit kvalitní webové stránky a porozumět jejich kódu, zvolte některý z následujících „klasických“ editorů. PSPad V Česku je jednoznačně nejpoužívanějším HTML editorem aplikace PSPad, jejímž autorem je Čech. Výhodou aplikace je bezplatná licence, práce s více soubory najednou a jejich seskupování do projektů, šablony, zvýrazňování syntaxí a podpora více jazyků. Notepad++ Rovněž bezplatný a jednoduchý nástroj, který podporuje více jazyků. Nabízí zvýraznění syntaxe, WYSIWYG editor, seskupování částí kódu. Adobe Dreamweaver Velmi pokročilá aplikace pro tvorbu a správu webu a to za pomocí jak vizuálních úprav i přímého psaní kódu. Podporuje několik standardů – HTML5, CSS3, JavaScript, PHP, integruje knihovnu jQuery, umožňuje tvorbu aplikací pro iOS a Android, obsahuje podporu CMS, automatické doplňování párových tagů. Dreamweaver je ideální jak pro začínající uživatele i pro ty pokročilé, kteří tvoří rozsáhle projekty. Výhodou je jistě i podpora práce s grafikou, interaktivní prohlížeč a detekce chyb v kódu.

9

I. Značkovací jazyk HTML

Licence softwaru je poskytována za pravidelný roční poplatek pro všechny typy zákazníků. Roční licence vyjde zhruba na 8 tisíc Kč. Pro další období je poskytnuta sleva cca 30 %. Bluefish Dalším pokročilým nástrojem je aplikace Bluefish, která běží pod systémem Windows, ale i Linux a OS X. Podporuje několik značkovacích a skriptovacích jazyků, zvýrazňování syntaxí, podpora projektů, detekce chyb a další. Sublime Text Na první pohled jednoduchá aplikace s čistým a přívětivým uživatelským prostředím, která však ukrývá nespočet výhod. Kromě práce s více soubory a projekty si zaslouží pozornost možnost instalace dalších užitečných doplňků, vytváření vlastních snippetů. Jelikož jsou tato skripta určena především pro začínající uživatele, bude v následujících kapitolách využívána aplikace PSPad.

1.2.2.

Stažení a instalace aplikace PSPad

1. Přejděte na stránku pspad.com/cz. 2. Přejděte na odkaz Stažení PSPadu a klikněte na položku Instalátor. Soubor uložte na disk. 3. Spusťte instalaci. Ponechte všechna výchozí nastavení.

1.2.3.

Základní nastavení PSPadu

1. Zapněte číslování řádků, případně zalamování řádků v nabídce Zobrazit > Čísla řádků, Zalomení řádků. 2. Přidejte možnost spouštět stránky přímo z PSPadu ve standardních prohlížečích: nabídka Nastavení > Nastavení zvýrazňovačů v levém sloupci vyberte HTML v pravé horní části okna přejděte na kartu Externí programy v části Program klikněte na tlačítko pro procházení na systémovém disku ve složce Program Files/Program Files (x86) vyhledejte složku webového prohlížeče (Google, Internet Explorer, Mozilla) vyberte spouštěcí soubor webového prohlížeče (chrome, iexplore, firefox)

Čísla a zalomení řádků

Přidání webového prohlížeče

10

I. Značkovací jazyk HTML

1.3.

Značkovací jazyk HTML

1.3.1.

Správné návyky při kódování otevřete soubor ve dvou programech – v HTML editoru a ve webovém prohlížeči, po provedených změnách v kódu soubor uložte a webovou stránku aktualizujte – vykreslí se provedené změny strukturujte části HTML kódu pomocí tabulátorů a nepište vše v jednom sloupci pokud začínáte párový tag, ihned ho i ukončete, abyste na to později nezapomněli při vytváření adresářů (složek) nebo souborů nepoužívejte diakritiku a místo mezer použijte pomlčku nebo spodní pomlčku, názvy adresářů a souborů zapisujte malými písmeny zapamatujte si tyto klávesové zkratky:

Znak

Zkratka

<

Alt + , (pravý alt a čárka)

>

Alt + . (pravý alt a tečka)

[

Alt + F

]

Alt + G

{

Alt + B

}

Alt + N

#

Alt + X

\

Alt + Q

&

Alt + C

^

Alt + 094 (levý alt a číslice 094 na numerické klávesnici)

1.3.2.

HTML tagy (značky)

HTML soubor je text obalený značkami, které se nazývají tagy. tagy určují, jak bude text vypadat, např. zda bude tučný, v odstavci, modrou barvu apod. všechny tagy jsou uzavřeny v tagy mohou obsahovat atributy specifikující další vlastnosti obsahu, který tagy obalují co není v ostrých závorkách, je text, který se bude na webové stránce zobrazovat

text další text další text

Zobrazovaný text

1.3.3.

Vytvoření HTML souboru

1. V aplikaci PSPad otevřete nabídku Soubor a klikněte na položku Nový nebo klikněte na panelu nástrojů na tlačítko Nový.

11

I. Značkovací jazyk HTML

2. V seznamu souborů vyberte HTML nebo HTML Multihighlighter a potvrďte OK. 3. Vytvoří se nový soubor typu .html, který bude obsahovat základní strukturu HTML dokumentu. 4. Nově vytvořený soubor uložte na disk. 5. Klikněte pravým tlačítkem na kartu nově vytvořeného souboru a z nabídky vyberte Přidat do projektu nebo uchopte kartu s názvem souboru a přetáhněte ji do nové složky projektu v levém navigačním podokně. 6. Uložte projekt: Otevřete nabídku Projekt a v nabídce klikněte na Uložit projekt. Projekt uložte nejlépe do stejné složky, jako soubor HTML.

Struktura složek v levém navigačním podokně není provázaná se samotnými složkami na disku, tzn., vytvoříte-li v podokně složku, nevytvoří se zároveň na disku a naopak.

1.3.4.

Změna/úprava šablony

Aktuální verze PSPadu (4.5.7) stále nabízí jako výchozí šablonu standard HTML 4.01. Proveďte změnu výchozí šablony na standard HTML5: 1. V aplikaci PSPad otevřete nabídku Soubor > Otevřít. 2. Vyhledejte soubor HTML5.html v adresáři Program Files/Program Files(x86) > PSPad editor > Template. 3. V šabloně odstraňte řádky 7 a 10 a soubor uložte do stejného adresáře jako Default.html (nahraďte stávající soubor).

Nový soubor HTML - šablona HTML5

12

I. Značkovací jazyk HTML

1.3.5.

Struktura HTML dokumentu

Obsah stránky.

Používat jednoduché nebo dvojité uvozovky? Při kódování HTML používejte dvojité, ale v zásadě na tom nezáleží. Později, až budeme programovat, Vás upozorním kdy jaké použít.

= definuje, že se jedná o HTML dokument = hlavička dokumentu, která obsahu důležité informace pro vyhledávače a prohlížeče = tělo dokumentu, kam se vkládá obsah, který chceme na stránce zobrazit

1.3.6.

Komentáře (poznámky)

Součástí kódu mohou být komentáře (poznámky), které se na stránce ve webovém prohlížeči nezobrazují a mají pouze informativní charakter pro kodéra webu. Pomocí komentářů můžete odlišit začátek a konec různých částí stránky nebo skriptů jiných jazyků a usnadnit tak orientaci v kódu stránky. Začátek komentáře uvozuje posloupnost těchto znaků: Vše, co uvedete mezi tyto znaky, bude sloužit jako poznámka a webový prohlížeč ji na stránce nezobrazí.

1.3.7.

Párové a nepárové tagy

HTML tagy jsou ve většině případů párové – jeden tag označuje začátek, např. těla dokumentu, druhý tag označuje jeho konec. Počáteční tag těla dokumentu je a jeho ukončovací tag je . Vše, co se vyskytne mezi těmito tagy, vykreslí prohlížeč na zobrazovacím zařízení. Lomítko tedy ukončuje párový tag. Obsah stránky.

Kromě párových tagů se vyskytují i nepárové, ale nejsou příliš časté. Který tag je párový a který není, Vás vždy upozorním.

1.3.8.

Hlavička HTML dokumentu

Hlavnička HTML dokumentu obsahuje několik důležitých informací pro prohlížeče a vyhledávače, které se na stránce nezobrazují. Zejména se jedná o kódování stránky, popis stránky, název stránky, provázání s dalšími dokumenty (CSS, JS), vnitřní CSS, informace o jazykové lokalizaci stránek atd.

13

I. Značkovací jazyk HTML

Tag

Význam

Pár

title

název stránky

ano

link

propojení HTML dokumentu s externím dokumentem

ne

meta

informace o dokumentu

ne

Název stránky

Propojení HTML dokumentu s jiným dokumentem Tag se nejčastěji využívá pro spojení s CSS dokumentem nebo JavaScript dokumentem. Atribut

Význam

rel

vztah mezi dokumenty

type

MIME typ připojovaného dokumentu

text/css (nejčastěji)

href

umístění připojovaného dokumentu

URL adresa

hreflang

jazyk připojovaného dokumentu

ID jazyka

sizes

nastavení velikosti ikony (pouze pro icon) velikost v px specifikace zařízení, pro které je připojovaný ID zařízení soubor určen

media

Hodnoty stylesheet icon



Informace o dokumentu <meta> Meta tagy neboli metadata jsou obsaženy v hlavičce HTML dokumentu a některé z nich jsou klíčové pro vyhledávače nebo prohlížeče. Mohou např. nést informace o tom, co se na stránce nachází, kdo je autorem, kdo je vlastníkem autorských práv, jaká se má použít znaková sada při renderování obsahu, zda mají být stránky indexovány roboty nebo zda se mají zjišťovat informace o zařízení, na němž se stránka zobrazuje. Atribut

Význam

Hodnoty

charset

znaková sada

utf-8, windows-1250, … description (popis stránky) author (autor)

name

typ meta informací

robots

indexování stránek roboty

copyright (vlastník) viewport (zjištění informací o zobrazovacím zařízení) all, follow nofollow index noindex

14

I. Značkovací jazyk HTML

Atribut

Význam

Hodnoty content-type (typ dokumentu)

http-equiv

content <meta <meta <meta <meta <meta <meta <meta

1.3.9.

určuje chování obsahu

obsah meta tagů

cache-control (ukládání v proxy) refresh (obnovení nebo presměrování stránky) expires (platnost stránky) popis, autor, vlastník, znaková sada, počet sekund do refreshe, indexování atd.

charset="utf-8" /> name="description" content="Zde se nachází popis stránky." /> name="author" content="Zde je jméno autora dokumentu" /> name="copyright" content="Zde je jméno vlastníka autorských práv" /> name="robots" cotent="index,follow" /> http-equiv="refresh" content="30" /> http-equiv="cache-control" content="no-cache" />

Formátování textu

HTML rozlišuje fyzické a logické formátování textu. Fyzické formátování se považuje za zastaralé a nedoporučuje se používat. Všechna fyzická formátování byla nahrazena styly CSS. Fyzické formátování nenese žádnou sémantickou hodnotu, kdežto logické ano. Všechny značky logického formátování jsou dnes vymřelé, kromě tagu <strong>, který se však spíše využívá s fyzickým významem. Pouze pro informaci uvedu tagy fyzického formátování, protože i dnes se s nimi můžete setkat. Ačkoliv je doporučeno použít spíše CSS. Z praktického hlediska může být ale někdy jednodušší a rychlejší použít některý z těchto tagů, než používat in-line zápis CSS nebo vytvářet novou třídu či identifikátor. Přehled HTML tagů pro fyzické formátování textu Tag

Význam

Pár

b

tučné písmo

ano

Podpora v HTM5 ano

i

kurzíva

ano

ano

u

podtržení

ano

ano

strike

přeškrtnutí

ano

ne

sub

dolní index

ano

ano

sup

horní index

ano

ano

font

písmo (vzhled určují další atributy)

ano

ne

Zde je normální text. Zde se nachází tučný text. Opět normální text.

1.3.10.

Neplatný (přeškrtnutý) text

V tabulce výše jste si mohli všimnout dnes již nepodporovaného tagu <strike>, který přeškrtnte text, který tato značka obaluje.

15

I. Značkovací jazyk HTML

Do HTML5 byla implementována nová značka <del>, která také přeškrtne text, ale pro vyhledávače nese také informaci, že se jedná o text, který není nadále platný a byl nahrazen jiným textem, který je uzavřený v další nové značce - . Má oblíbená barva je <del>modrá fialová.

1.3.11.

Zvýraznění části textu

Sémantická značka <mark> slouží ke zvýrazňování částí textu. Dnes se učíme <mark>HTML tagy.

Zvýrazěný text.

1.3.12.

Atributy tagů

HTML tagy mohou obsahovat tzv. atributy s přiřazenými hodnotami, které dále specifikují formát daného elementu, resp. obsahu, který daný element obaluje. Příkladem může být tag , který má tři možné atributy, jenž specifikují typ písma, jeho barvu a velikost. Atributy tagu Atribut

Význam

Hodnoty

face

typ písma

názvy fontů, např. Tahoma, Arial, Courier

size

velikost písma

pouze hodnoty 1 – 7 názvy barev (green, blue, black, …)

color

barva písma

decimální zápis (rgb) hexadecimální zápis (#)

Formátovaný text

Text zformátovaný červenou barvou, velikostí 4 a písmem Arial.

HTML značka a její atrinuty nejsou již nadále v HTML5 podporovány, proto je nevyužívejte.

16

I. Značkovací jazyk HTML

Křížení tagů Pokud obalíte text více tagy např. fyzického formátování, dbejte na to, aby nedošlo k jejich křížení při ukončování párových tagů. Tento text je tučnou kurzívou a tento pouze kurzívou.

Při ukončování párových tagů tedy vždy postupujte od konce – od posledního započatého k prvnímu započatému.

1.3.13.

Blokové tagy

Blokové tagy automaticky zalamují řádek. Jde např. o odstavce a jiné oddíly textu nebo nadpisy. Některé z těchto blokových tagů dělají před a za elementem viditelnou mezeru. Tag

Význam

Pár

p

odstavec

ano

Podpora v HTML5? ano

br

zalomení řádku

ne

ano

div

oddíl

ano

ano

h1 – h6

nadpis 1. – 6. úrovně

ano

ano

hr

vodorovná čára

ne

ne

Odstavec

Párový tag, který obaluje libovolně dlouhý text. V místě ukončovacího tagu bude zalomen řádek a před a za odstavcem vznikne viditelná mezera.

První odstavec.

Druhý odstavec.

Zalomení řádku
Nepárová značka, která v místě zápisu zalomí řádek, ale nevytvoří žádnou viditelnou mezeru.

První odstavec.
zde pokračuje první odstavec na dalším řádku.

17

I. Značkovací jazyk HTML

Oddíl

Blokový oddíl

se používá jako univerzální obalový element jakékoliv části kódu – části textu, obrázky, sekce stránek atd. Velmi často je tento element použit jako obal celé stránky. Těmto oddílům jsou pak přiřazeny CSS vlastnosti určující jejich vzhled a chování. Tento element před a za sebou nedělá žádnou viditelnou mezeru – horní a dolní okraj je 0.

Vítejte na našich stránkách

Nadpis Tagy

-

označují úrovně nadpisů. Text je pak automaticky formátován příslušnou velikostí, která je výchozí pro daný prohlížeč, je tučný a dělá kolem sebe vertikální mezery.

Nadpis 1. úrovně

1.3.14.

Seznamy

U aktuálního standardu se setkáte se dvěma typy seznamů – tříděný, tedy číslovaný (ordered list) a netříděný, odrážkový (unordered list). Tag

Význam

Pár

ol

číslovaný (tříděný)

ano

ul

odrážkový (netříděný)

ano

li

položka seznamu

ano

Atributy číslovaného seznamu

Atribut type

Význam atributu typ číslování

Hodnoty

Význam hodnoty

1

arabské číslice

Podpora v HTML5 ano

18

I. Značkovací jazyk HTML

Atribut

start reversed

Význam atributu

začátek číslování sestupné číslování


první
1. druhá
2. třetí


Podpora v HTML5

Hodnoty

Význam hodnoty

I

římské číslice

i

malé římské číslice

A

velké písmenkování

a

malé písmenkování číslo (písmeno), od kterého chcete ano seznam začít číslovat

číslo reversed

ano

start="10"> položka položka položka



Tříděný seznam začínající od čísla 10.

Atribut reversed není podporován v poslední verzi Internet Exploreru (verze 11).

Atributy odrážkového seznamu
Atribut

type

Význam atributu typ odrážky

Hodnoty

Význam hodnoty

disc

•

square

Podpora v HTML5

puntík čtvereček

circle

o

ne

kolečko

Atributy položky seznamu
• Položka seznamu
• musí být uvnitř elementu
  nebo
  . Každá položka se automaticky zobrazuje na novém řádku, beztoho, aniž by za sebou dělala vertikální mezeru. Ačkoliv položka seznamu nemusí být párovým tagem, doporučuji položku vždy ukončit. Atribut type
  
  Význam atributu typ odrážky nebo číslování
  
  Hodnoty
  
  Podpora v HTML5?
  
  všechny výše uvedené hodnoty Ne
  
  19
  
  I. Značkovací jazyk HTML
  
  Víceúrovňový seznam Číslovaný i odrážkový seznam mohou obsahovat vnořené úrovně seznamů. Dbejte na validní syntaxi kódu – vnořená úroveň seznamu je vždy zahrnuta mezi tagy
  1. a
  . Chcete-li, aby některá z položek obsahovala druhou úroveň číslování nebo odrážek, jednoduše do dané položky
  2. vnoříte další seznam
     nebo
     .
     1. první položka
        1. první podpoložka
        2. druhá podpoložka
     2. druhá položka
     3. třetí položka
     
     
     1.3.15.
     
     Odkazy
     
     Pro vytvoření odkazu slouží tag (anchor), který sám o sobě nikam neodkazuje. Jako odkaz na konkrétní cíl ho utváří teprve atribut s cestou, tedy cílem odkazu. Odkaz lze využít i jako záložku pro odrolování na konkrétní místo na stejné nebo jiné stránce. Tag je párový a vše, co je uvedeno mezi a slouží jako samotný odkaz. Nemusí zde být pouze text, ale i obrázek, video. Atributy tagu
     
     href
     
     Význam atributu cíl odkazu
     
     name
     
     název odkazu
     
     Atribut
     
     Hodnoty URL adresa jakýkoliv název (bez diakritiky a mezer) _blank _self
     
     target
     
     cílový rám
     
     _parent _top vlastninazev
     
     rel
     
     Význam hodnoty
     
     alternate
     
     Podpora v HTML5 ano ne
     
     otevře dokument v novém okně nebo panelu otevře dokument ve stejném okně (výchozí hodnota) otevře dokument v nadřazeném rámu
     
     ano
     
     otevře dokument přes celé okno otevře dokument v okně se zvoleným názvem odkazuje na alternativní verzi dokumentu ano
     
     20
     
     I. Značkovací jazyk HTML
     
     Atribut
     
     Význam atributu
     
     definuje vztah mezi aktuálním a odkazovaným dokumentem
     
     popisek
     
     title
     
     Hodnoty
     
     Význam hodnoty
     
     author
     
     odkazuje na autora dokumentu
     
     bookmark
     
     trvalý odkaz pro vytvoření záložky
     
     help
     
     odkaz na dokument s nápovědou
     
     licence
     
     odkaz na dokument s copyrightem
     
     next
     
     následující dokument
     
     nofollow
     
     prefetch
     
     odkaz nebude sledován roboty prohlížeč nebude odesílat HTTP hlavičku stránky, ze které uživatel přišel cílový dokument bude uložen do cache
     
     prev
     
     předchozí dokument
     
     search
     
     odkaz na vyhledávací nástroj dokuemntu
     
     tag
     
     tag (klíčové slovo) aktuální dokumentu
     
     libovolný text
     
     při najetí myší na odkaz zobrazí popisek
     
     noreferrer
     
     Podpora v HTML5
     
     ano
     
     Příklad: Vytvoření odkazu 1. Vytvořte nový dokument HTML a uložte ho jako odkazy.html. 2. V dokumentu vytvořte odkaz s textem Google, který bude směrovat na domovskou stránku Google a stránka se otevře v novém okně/na novém panelu (záložce). 3. Vytvořte odkaz s textem Seznam, který bude směrovat na domovskou stránku Seznam.cz. Stránka se otevře ve stejném okně a při najetí myší na odkaz se zobrazí popisek „Kliknutím přejdete na Seznam.cz“. Odkaz na Google
     Seznam
     
     Při použití URL používejte protokoly – http, https, ftp, file.
     
     1.3.16.
     
     Záložky
     
     V některých případech budete chtít odkazovat na konkrétní část stránky (nadpis, oddíl apod.), kdy po kliknutí na daný odkaz se stránka zobrazí na požadované pozici. K tomuto řešení použijete odkaz na záložku vytvořenou právě u konkrétní části stránky, na kterou chcete odkazovat.
     
     21
     
     I. Značkovací jazyk HTML
     
     Vytvoření záložky Záložku vytvoříte atributem id nebo name v daném elementu, na který budete chtít odkaz směrovat a jako hodnotu atributu zvolíte vhodný název, který bude element identifikovat.

     Obsah elementu

     
     
     Odkaz směrující na záložku Odkaz, který bude směrovat na záložku na stejné stránce, ze které vede odkaz, zadáte jako hodnotu atributu href. Hodnotou bude zvolené id nebo name konkrétní záložky. Samotné hodnotě, která identifikuje element,
     
     musí předcházet znak hash (#). Chcete-li odkazovat na jinou stránku, než na stejnou, ze které vede odkaz, znak hash a název záložky připojíte za URL adresu odkazu. Text odkazu Text odkazu
     
     
     
     Příklad: Odkazy a záložky 1. Vytvořte nový soubor HTML a uložte ho jako zalozky.html. 2. Na stránce vygenerujte 5 odstavců s 200 – 300 slovy (Nástroje > Lorem Ipsum generátor). 3. Před každý odstavec vložte nadpis. 4. Každému nadpisu přidejte vhodný identifikátor. 5. Na začátku stránky vytvořte seznam odkazů jako navigaci na jednotlivé nadpisy. 6. Pod posledním odstavcem vytvořte odkaz, který po kliknutí odroluje stánku zpět na začátek k navigaci. Řešení

     Navigace

     Nadpis 1
     Nadpis 2
     Nadpis 3
     Nadpis 4
     Nadpis 5
     
     /> /> /> />
     
     

     Nadpis 1

     Lorem ipsum dolor sit amet consectetuer convall...

     Nadpis2

     Phasellus sed semper nulla est semper scelerisq...

     Nadpis3

     Feugiat lorem nulla auctor Sed neque scelerisqu...

     Nadpis4

     Venenatis porttitor Vivamus consequat semper ju...

     Nadpis5

     Vitae quis tincidunt amet justo Maecenas ut ege... Zpět na začátek
     
     22
     
     I. Značkovací jazyk HTML
     
     1.3.17.
     
     Relativní a absolutní odkazy
     
     Při vkládání odkazů, ale i souborů nebo obrázků na stránku je potřeba se rozhodnout, jaký typ odkazu zvolíte – relativní nebo absolutní. Absolutní adresa Absolutní odkaz je např. takový, když někomu přes sociální síť odešlete odkaz na nějaký článek na Internetu (http://www.server.cz/clanek.html/). Je tedy přesně určena cesta k cílovému souboru clanek.html. Relativní adresa U relativních odkazu záleží na místě, ze kterého odkazujete na cílový soubor. Cesta vždy vede z daného místa, kde se nachází stránka, ze které na požadovaný soubor odkazujete. Budete-li chtít např. odkazovat ze souboru clanek.html do souboru dalsi-clanek.html, který je ve stejném adresáři jako clanek.html, pak bude cesta následující: Text odkazu
     
     Pokud se bude soubor dalsi-clanek.html nacházet v podadresáři, bude cesta vypadat takto: Text odkazu
     
     Pokud budete chtít naopak odkazovat ze souboru dalsi-clanek.html do souboru clanek.html, který je v nadřazeném adresáři, zadáte do odkazu dvě tečky a lomítko – tím vyskočíte o úroveň výš: Text odkazu
     
     1.3.18.
     
     Obrázky
     
     Obrázek na stránce zobrazíte pomocí nepárového tagu a atributu určujícího cíl obrázku, tedy kde se daný soubor nachází. Může se jednat o cíl směřující na váš hostitelský server, ale i obrázek umístěný kdekoliv v Internetu (pozor na platnost odkazu). Doporučuji však vždy odkazovat na obrázky umístěné na vašem hostitelském serveru. Kromě samotného umístění obrázku by měl tag obsahovat i atribut s alternativním popisem, který slouží jako popis obrázku v případě že se nenačte, a také je tu pro osoby zrakově postižené, jenž využívají různé čtečky a alternativní popis jim může pomoci s pochopením obsahu. Datová velikost Obrázky jsou jedním z prvků, které značně ovlivňují rychlost načítání webové stránky a jako uživatelé Internetu můžete sami potvrdit, že rychlost načtení stránky je rozhodujícím faktorem ovlivňující setrvání uživatele na stránce. Pokud se mi bude stránka načítat 5 sekund bez odezvy, s největší pravděpodobností stránku opustím a vyberu jinou z výsledků hledání. Zdlouhavé načítání jsou i 2 sekundy. Je tedy velmi důležité vkládané obrázky optimalizovat pro web a nevkládat je v plné datové velikosti. Existuje spousta nástrojů pro jejich optimalizaci, ať už s bezztrátovou kompresí nebo ztrátovou. O jejich optimalizaci si povíme později.
     
     23
     
     I. Značkovací jazyk HTML
     
     Atributy tagu Atribut
     
     Význam atributu
     
     Hodnoty
     
     src
     
     cíl (umístění obrázku)
     
     URL
     
     Podpora v HTML5 ano
     
     alt
     
     alternativní popis
     
     jakýkoliv text (i s diakritikou a mezerami)
     
     ano
     
     width
     
     šířka
     
     velikost v px nebo relativní jednotka (%, em, rem)
     
     ano
     
     height
     
     výška
     
     velikost v px nebo relativní jednotka (%, em, rem)
     
     ano
     
     border
     
     šířka rámečku
     
     velikost v px nebo relativní jednotka (%, em, rem)
     
     ne
     
     vspace
     
     vertikální okraj
     
     velikost v px nebo relativní jednotka (%, em, rem)
     
     ne
     
     hspace
     
     horizontální okraj
     
     velikost v px nebo relativní jednotka (%, em, rem)
     
     ne
     
     align
     
     zarovnání obrázku
     
     left, right (okolní objekty budou obtékat)
     
     ne
     
     usemap
     
     obrázková mapa
     
     název obrázkové mapy
     
     ano
     
     Šířka a výška obrázku Rozměry pomocí atributů width a height není nutné pro samotné zobrazenní obrázku zadávat, ale jsou to povinné atributy, které by vždy měly být uvedeny. Zadané hodnoty udávají velikost v px, ale můžete využít i relativních jednotek (%, em, rem). Uvedete-li pouze jeden rozměr, budou zachovány proporce obrázku.
     
     Šířku a výšku vždy uveďte. Pokud z nějakého důvodu nedojde k načtení obrázku nebo se načítá déle, prohlížeč, v případě neuvedení těchto rozměrů bude ignorovat jeho existenci a dojde k narušení layoutu. Až po jeho načtení se vše poskládá správně. Jsou-li rozměry uvedeny, již při načítání je pro obrázek rezervováno místo. Zadáním menší velikosti obrázku nezměníte jeho datovou velikost. Pokud má např. obrázek 2MB v plné velikosti, tak i při zmenšené velikost bude prohlížeč stahovat 2MB.
     
     1.3.19.
     
     Označení fotografie a titulek
     
     K označení fotografie v dokumentu slouží značka

     . Mimo označování fotografií se používá k označení ilustrací, diagramů nebo ukázek kódu. Pozor! Nejedná se o označení každého obrázku na webu, ale pouze o takový obrázek, který doplňuje nějaký článek. Pozice tohoto elementu není závislá na hlavním toku dokumentu a při jeho odstranění by nemělo dojít k narušení toku dokumentu. Značka