Ú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. OS Windows 7 a vyšší 2. editor pro zápis kódu (Adobe Dreamweaver, PSPad, Notepad++, Sublime Text) 3. virtuální webový server (Wamp, Xampp) 4. 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
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
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
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
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
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 <ostrých závorkách> 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 <tag atribut= "hodnota ">text</tag> další text <tag>další text</tag> 1.3.3. Vytvoření HTML souboru Zobrazovaný text 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
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
1.3.5. Struktura HTML dokumentu <!DOCTYPE html> <html lang="cs"> <head> <title>název stránky</title> </head> <body> Obsah stránky. </body> </html> 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. <!DOCTYPE html> = definuje, že se jedná o HTML dokument <head> = hlavička dokumentu, která obsahu důležité informace pro vyhledávače a prohlížeče <body> = 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ů: <!-- Konec 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 <body> a jeho ukončovací tag je </body>. 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. <body>obsah stránky.</body> 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
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 <title> Jedná se o párový tag, jehož obsah je prohlížečem chápán jako název stránky a zobrazuje ho i na kartě (panelu) otevřené stránky. Pro každou podstránku projektu je nutné volit jiný název a to takový, který odpovídá obsahu dané stránky. Pokud na jedné doméně existují stránky se stejným názvem, vyhledávač je chápe jako duplicitní a vyřadí je z výsledků hledání. <title> je jedním z klíčových tagů pro vyhledávače a tudíš důležitý pro SEO. <title>název stránky</title> Propojení HTML dokumentu s jiným dokumentem <link> Tag se nejčastěji využívá pro spojení s CSS dokumentem nebo JavaScript dokumentem. Atribut Význam Hodnoty rel vztah mezi dokumenty stylesheet type MIME typ připojovaného dokumentu text/css (nejčastěji) icon 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ý media ID zařízení soubor určen <link href="css/style.css" rel="stylesheet" type="text/css" /> 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) name robots typ meta informací indexování stránek roboty author (autor) copyright (vlastník) viewport (zjištění informací o zobrazovacím zařízení) all, follow nofollow index noindex 14
Atribut Význam Hodnoty content-type (typ dokumentu) http-equiv content 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. <meta charset="utf-8" /> <meta name="description" content="zde se nachází popis stránky." /> <meta name="author" content="zde je jméno autora dokumentu" /> <meta name="copyright" content="zde je jméno vlastníka autorských práv" /> <meta name="robots" cotent="index,follow" /> <meta http-equiv="refresh" content="30" /> <meta http-equiv="cache-control" content="no-cache" /> 1.3.9. 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 v HTM5 b tučné písmo ano 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. <b>zde se nachází tučný text.</b> 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
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 - <ins>. Má oblíbená barva je <del>modrá</del> <ins>fialová</ins>. 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</mark> 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 <font>, který má tři možné atributy, jenž specifikují typ písma, jeho barvu a velikost. Atributy tagu <font> Atribut Význam Hodnoty face typ písma názvy fontů, např. Tahoma, Arial, Courier size velikost písma pouze hodnoty 1 7 color barva písma názvy barev (green, blue, black, ) decimální zápis (rgb) hexadecimální zápis (#) <font color="red" size="4" face="arial">formátovaný text</font> Text zformátovaný červenou barvou, velikostí 4 a písmem Arial. HTML značka <font> a její atrinuty nejsou již nadále podporovány, proto je nevyužívejte. 16
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ů. <b><i>tento text je tučnou kurzívou</i></b> <i>a tento pouze kurzívou.</i> 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 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> 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. <p>první odstavec.</p> <p>druhý odstavec.</p> Zalomení řádku <br /> Nepárová značka, která v místě zápisu zalomí řádek, ale nevytvoří žádnou viditelnou mezeru. <p>první odstavec.<br /> zde pokračuje první odstavec na dalším řádku.</p> 17
Oddíl <div> Blokový oddíl <div> 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. <div id="hlavicka"> <h1>vítejte na našich stránkách</h1> <img src="logo.png" alt="logo společnosti" width="200" height="200" /> </div> Nadpis <h X> Tagy <h1> - <h6> 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. <h1>nadpis 1. úrovně</h1> 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 <ol> Atribut Význam atributu Hodnoty Význam hodnoty type typ číslování 1 arabské číslice ano 18
Atribut Význam atributu Hodnoty I i Význam hodnoty římské číslice malé římské číslice A velké písmenkování start reversed začátek číslování sestupné číslování a číslo reversed malé písmenkování číslo (písmeno), od kterého chcete seznam začít číslovat ano ano <ol type="1" start="10"> <!-- číslovaný seznam, arabsky od 10 --> <li>první položka</li> <!-- položka seznamu --> <li>druhá položka</li> <li>třetí položka</li> </ol> <!-- konec seznamu --> 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 <ul> Atribut Význam atributu Hodnoty Význam hodnoty disc puntík type typ odrážky square čtvereček circle o kolečko ne Atributy položky seznamu <li> Položka seznamu <li> musí být uvnitř elementu <ul> nebo <ol>. 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 Význam atributu Hodnoty? typ odrážky nebo type všechny výše uvedené hodnoty Ne číslování 19
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 <li> a </li>. Chcete-li, aby některá z položek obsahovala druhou úroveň číslování nebo odrážek, jednoduše do dané položky <li> vnoříte další seznam <ul> nebo <ol>. <ol type="1"> <!-- první úroveň seznamu --> <li>první položka <!-- položka první úrovně seznamu --> <ol type="a"> <!-- druhá úroveň seznamu --> <li>první podpoložka</li> <!-- položka druhé úrovně seznamu --> <li>druhá podpoložka</li> </ol> <!-- konec druhé úrovně seznamu --> </li> <!-- konec položky, ve které je vnořena druhá úroveň --> <li>druhá položka</li> <!-- položka první úrovně seznamu --> <li>třetí položka</li> </ol> <!-- konec první úrovně seznamu --> 1.3.15. Odkazy Pro vytvoření odkazu slouží tag <a> (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 <a> je párový a vše, co je uvedeno mezi <a> a </a> slouží jako samotný odkaz. Nemusí zde být pouze text, ale i obrázek, video. Atributy tagu <a> Atribut Význam atributu Hodnoty Význam hodnoty href cíl odkazu URL adresa ano name název odkazu jakýkoliv název (bez diakritiky a mezer) ne _blank otevře dokument v novém okně nebo panelu otevře dokument ve stejném okně _self (výchozí hodnota) target cílový rám _parent otevře dokument v nadřazeném rámu ano _top otevře dokument přes celé okno vlastninazev otevře dokument v okně se zvoleným názvem rel alternate odkazuje na alternativní verzi dokumentu ano 20
Atribut Význam atributu definuje vztah mezi aktuálním a odkazovaným dokumentem Hodnoty author bookmark help licence next nofollow noreferrer prefetch prev search tag Význam hodnoty odkazuje na autora dokumentu trvalý odkaz pro vytvoření záložky odkaz na dokument s nápovědou odkaz na dokument s copyrightem následující dokument 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 předchozí dokument odkaz na vyhledávací nástroj dokuemntu tag (klíčové slovo) aktuální dokumentu title popisek libovolný text při najetí myší na odkaz zobrazí popisek 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. <a href="http://www.google.cz/" target="_blank">odkaz na Google</a> <br /> <a href="http://www.seznam.cz/" title="kliknutím přejdete na Seznam.cz">Seznam</a> 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
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. <p id="clanek">obsah elementu</p> 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. <a href="#clanek">text odkazu</a> <!-- Odkaz na záložku na stejné stránce --> <a href="url#clanek">text odkazu</a> <!-- Odkaz na záložku na jiné stránce --> Příklad: Odkazy a záložky Řešení 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. <h1 id="obsah">navigace</h1> <a href="#nadpis1">nadpis 1</a><br /> <a href="#nadpis2">nadpis 2</a><br /> <a href="#nadpis3">nadpis 3</a><br /> <a href="#nadpis4">nadpis 4</a><br /> <a href="#nadpis5">nadpis 5</a> <h2 id="nadpis1">nadpis 1</h2> <p>lorem ipsum dolor sit amet consectetuer convall... <h2 id="nadpis2">nadpis2</h2> <p>phasellus sed semper nulla est semper scelerisq... <h2 id="nadpis3">nadpis3</h2> <p>feugiat lorem nulla auctor Sed neque scelerisqu... <h2 id="nadpis4">nadpis4</h2> <p>venenatis porttitor Vivamus consequat semper ju... <h2 id="nadpis5">nadpis5</h2> <p>vitae quis tincidunt amet justo Maecenas ut ege... <a href="#obsah">zpět na začátek</a> 22
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í: <a href="dalsi-clanek.html">text odkazu</a> Pokud se bude soubor dalsi-clanek.html nacházet v podadresáři, bude cesta vypadat takto: <a href="vnoreny-adresar/dalsi-clanek.html">text odkazu</a> 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ýš: <a href="../clanek.html">text odkazu</a> 1.3.18. Obrázky Obrázek na stránce zobrazíte pomocí nepárového tagu <img> 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 <img> 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
Atributy tagu <img> Atribut Význam atributu Hodnoty src cíl (umístění obrázku) URL 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. <img src="obrazek.jpg" alt="nějaký obrázek" width="200" height="100" /> Šíř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 <figure>. 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 <figcaption> slouží k vložení titulku značce <figure> a musí být vložena jako podřízený element tagu <figure>. <figure> <img src="image/prague-panorama.jpg" alt="panorama Prahy" width="550" height="150" /> <figcaption>obr1. - Panoramatický pohled na centrum Prahy.</figcaption> </figure> 24
1.3.20. Obrázková mapa Atribut usemap použitý u značky <img> vytvoří z obrázku klikací mapu klepnutím v přesně definovaném místě obrázku např. otevřete jiný obrázek. Jako hodnota atributu usemap uveďte znak hash (#) a jméno mapy. <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> Značka <map> V dokumentu se tento element nijak nezobrazuje, pouze způsobuje, že obrázek bude na některých místech klikat jako odkaz. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>. Pomocí jména (atributu name) je mapa spojena s obrázkem (atribut usemap u tagu <img>). Atributy tagu <area> Atribut Význam atributu Hodnoty alt alternativní popis alternativní popis oblasti; nutno zadat, pokud je uveden atribut href download stažení souboru cíl a název souboru ano href cíl odkazu URL adresa ano specifikuje, pro jaké media zařízení je cílová URL media query (popsáno později v CSS) ano optimalizovaná alternate rel definuje vztah mezi aktuálním a odkazovaným dokumentem author bookmark help licence next follow nofollow noreferrer prefetch ano ano 25
Atribut Význam atributu Hodnoty shape target definuje tvar oblasti určuje cílový rám odkazu prev search tag default rect circle poly _blank _parent _self _top nazevframu ano ano <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm" /> </map> Vyzkoušejte příklad na stránce http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap. Příklad: Vložení obrázku 1. Vytvořte nový soubor HTML a uložte ho jako obrazky.html. 2. Ve složce, kam jste uložili tento soubor, vytvořte podsložku pro obrázky, např. s názvem img, image, images, obrazky, atd. 3. Z Internetu stáhněte do složky pro obrázky libovolný obrázek. 4. Na stránku obrazky.html vložte stažený obrázek. 5. Zadejte atributy tagu <img> - alternativní popis, šířku a výšku. <img src="image/prague-panorama.jpg" alt="panorama Praha" width="550" height="150" /> 1.3.21. Tabulky Obsah tabulky je ohraničen párovým tagem <table>, který obsahuje další tagy řádky a buňky, případně záhlaví, zápatí, tělo a nadpis tabulky. Atributy tagu <table> Atribut Význam atributu Hodnoty align zarovnání tabulky left center ne 26
Atribut Význam atributu Hodnoty right background obrázek na pozadí URL obrázku ne bgcolor pozadí tabulky decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx název barvy border rámeček tloušťka rámečku v px nebo relativních jednotkách ne bordercolor barva rámečku decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx název barvy cellpadding mezera mezi okrajem hodnota v px relativní jednotka buňky a obsahem ne cellspacing mezera mezi buňkami hodnota v px relativní jednotka ne sortable umožňuje třídění v tabulce sortable ano width šířka tabulky hodnota v px nebo relativní jednotka ne ne ne Řádek <tr> Řádek <tr> se vyskytuje pouze uvnitř tagu <table> a označuje začátek. Další atributy se standardně neuvádí nejsou podporovány. Tag <tr> je nepovinně párový, avšak doporučuji řádek vždy ukončit tagem </tr>. Buňka <td> a atributy Značka <td> označuje buňku v HTML tabulce. Je to nepovinně párový tag, avšak opět doporučuji buňku vždy uzavřít. Tabulky mohou obsahovat dva typy buněk: hlavičkové buňky obsahují názvy sloupců (tag <th> místo <td>) standardní buňky obsahují data (tag <td>) Atribut Význam atributu Hodnoty align zarovnání obsahu buňky left right center justify background obrázek na pozadí URL obrázku ne bgcolor pozadí buňky bordercolor barva rámečku decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx název barvy decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx ne ne ne 27
Atribut Význam atributu Hodnoty název barvy colspan určuje počet sloupců, přes které bude číslo ano buňka sloučena height výška buňky výška v px nebo % ne nowrap rowspan valign povolí nebo zamezí zalamování řádků určuje počet řádků, přes které bude buňka sloučena vertikální zarovnání wrap nowrap číslo top middle bottom baseline width šířka buňky šířka v px nebo % ne ne ano ne Atributy, které HTML5 nepodporuje, nepoužívejte! Příklad: Tabulka V následujícím příkladu použijte i nepodporované atributy. 1. Vytvořte nový soubor HTML a uložte ho jako tabulka.html. 2. Vytvořte tabulku 4x4. 3. V prvním řádku budou buňky jako záhlaví tabulky. 4. Šířku nastavte na 400px. 5. Nastavte mezeru mezi buňkami na 0px. 6. Mezeru mezi rámečkem buňky a jejím obsahem nastavte na 3px. 7. Rámeček buňky nastavte na tloušťku 1px a barvu na modrou. 8. Nastavte světle žluté pozadí tabulky. 9. Slučte třetí a čtvrtou buňku druhého řádku. 10. Slučte první a druhou buňku čtvrtého řádku. 11. Slučte čtvrtou buňku třetího řádku s čtvrtou buňku čtvrtého řádku. 12. Tabulku zarovnejte vodorovně na střed stránky. 28
Řešení <table border="1" bordercolor="blue" width="400" cellspacing="0" cellpadding="3" bgcolor="lightyellow" align="center"> <tr> <th>aaa</th> <th>bbb</th> <th>ccc</th> <th>ddd</th> </tr> <tr> <td>aaa</td> <td>bbb</td> <td colspan="2">ccc</td> </tr> <tr> <td colspan>aaa</td> <td>bbb</td> <td>ccc</td> <td rowspan="2">ddd</td> </tr> <tr> <td colspan="2">aaa</td> <td>bbb</td> </tr> </table> 1.3.22. Titulek tabulky Element <caption> definuje titulek tabulky, který se ve výchozím nastavení zobrazí vycentrovaný nad tabulkou. Tag <caption> musí následovat hned po tagu <table> a jedna tabulka může obsahovat pouze jeden titulek. <table> <caption>měsíční úspory</caption> <tr> <th>měsíc</th> <th>úspory</th> </tr> <tr> <td>leden</td> <td>3000 Kč</td> </tr> </table> 29
Atributy tagu <caption> Atribut Význam atributu Hodnoty left align zarovnání titulku right top bottom ne 1.3.23. Seskupení buněk tabulky Tag <colgroup> definuje skupinu sloupců v tabulce, které chcete formátovat. Je tedy mnohem efektivnější využít značku <colgroup> místo opakování stylu na každou buňku v každém řádku zvlášť. Značka <colgroup> musí být vnořeným tagem značky <table> a musí následovat až za tagem <caption>, pokud je uveden a musí ležet před tagy <thead>, <tfoot> a <tr>. Pro definování odlišných vlastností pro různé sloupce, použijte tag <col> uvnitř tagu <colgroup>. Tag <col> určuje vlastnosti sloupců pro každý sloupec uvnitř elementu <colgroup>. <table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>isbn</th> <th>titul</th> <th>cena</th> </tr> <tr> <td>123456</td> <td>první kroky s HTML</td> <td>250 Kč</td> </tr> <tr> <td>654321</td> <td>první kroky s CSS</td> <td>250 Kč</td> </tr> </table> 30