(X)HTML a CSS. VOŠ a SŠT Česká Třebová

Transkript

1 (X)HTML a CSS Mgr. Petr Slívko VOŠ a SŠT Česká Třebová

2 STRUKTURA WEBU Webová prezentace (anglicky website) je několik webových stránek provázaných hypertextovými odkazy. Tomu, které stránky web obsahuje a jak jsou mezi sebou provázány odkazy, se říká struktura webu. Struktura webu se navrhuje podle jeho obsahu. Návrh struktury nejlépe na papír, včetně názvů jednotlivých souborů. Přehlednost webu je ovlivněna grafickým ztvárněním. Důležité: Dobře navržená struktura stránek a odkazů mezi nimi. 2

3 Strukturní konvence Startovací stránka webu má název index.htm nebo index.html, popř. default.html nebo také index.php. Z každé stránky by měl vést odkaz na domovskou (úvodní) stránku webu. Názvy souborů - volba podle obsahu stránek. Omezení: Názvy by neměly obsahovat mezery a znaky s diakritikou a měly by být psány pouze malými písmeny. 3

4 Webová stránka a její (X)HTML kód Webová stránka je dokument ve formátu HTML nebo v jeho modernější podobě XHTML souhrnně je značíme (X)HTML. (X)HTML dokument může obsahovat jen textové znaky a číslice. Nejsou v něm žádné obrázky a neobsahuje žádné formátování textu. Obsahuje však pokyny (příkazy) pro prohlížeč, jak má stránku zobrazit a kde na ní má zobrazit jaký obrázek. Obrázky jsou uloženy zvlášť v samostatných souborech a načítají se podle pokynů v (X)HTML kódu na určená místa v dokumentu. Formát textu a vůbec celé stránky je často obsažen v samostatném souboru s definicí kaskádových stylů (CSS). 4

5 Postup tvorby webu: Navrhnete strukturu webu a názvy jednotlivých souborů. Navrhnete vzhled webu a připravíte si CSS soubor(y) s definicemi stylů. Vytvoříte nebo jinak získáte obrázky a připravíte je v přesné velikosti, barevné hloubce a přesném typu souboru. Napíšete potřebné texty. Poskládáte webové stránky s využitím všech výše uvedených komponent. Odladíte kompletní web (vyzkoušíte jej, odhalíte a opravíte chyby). Nahrajete hotový web na server Internetu a opět zkontrolujete funkčnost. 5

6 DŮLEŽITÉ POJMY HTML hypertextový značkovací jazyk (HyperText Markup Language) CSS kaskádové styly (Cascading Style Sheets) PHP skriptovací jazyk na straně serveru (PHP: Hypertext Preprocessor) JavaScript skriptovací jazyk na straně klienta 6

7 HTML (XHTML) HTML je značkovací jazyk. Značkuje (označuje) části dokumentu, stránky. To znamená, že pomocí HTML určujeme, jaký význam bude mít ta která část HTML stránky. Tedy pomocí HTML řekneme, že tenhle kus textu bude nadpis, jiný kus textu odstavec a jiný tabulka. 7

8 CSS CSS je formátovací jazyk, určuje vzhled stránky. Např: barvu a velikost nadpisu, textu, pozadí a šířku tabulky, Neříká ale, která část stránky bude nadpisem, odstavcem či tabulkou. CSS tedy určuje jen vzhled stránky. Samostatný css soubor. 8

9 PHP PHP je skriptovací jazyk. Dělají se pomocí něj různé webové aplikace jako je kniha hostů, počítadlo návštěv, anketa, diskusní fórum nebo chat. Rozhodně s PHP nezačínáme, pokud ještě neovládáme základy HTML. 9

10 JavaScript JavaScript je také skriptovací jazyk. Rozdíl mezi JavaScriptem a PHP je v tom, že PHP funguje na serveru a JavaScript na klientovi. To znamená, že to, co dělá JavaScript se vždy odehrává na vašem počítači (resp. na počítači uživatele vašich stránek) a neodesílá žádná data na server. Pomocí JavaScriptu tedy nevytvoříte nic, co by muselo proběhnout Internetem. JavaScripty dokonce fungují, i když nejste k Internetu zrovna připojeni. V JavaScriptu tedy chat ani knihu hostů neuděláte. Uděláte v něm ale různé efekty jako je rozbalovací menu, běhací a točící se nesmysly, otevírání nových oken s nějakým nastavením a podobně. 10

11 Verze jazyka HTML Verze 0.9 Byla vydána zhruba v roce Nepodporuje grafický režim Verze 2.0 Zachycuje stav jazyka v polovině roku Přidává k původní specifikaci interaktivní formuláře, podpora grafiky. Verze 3.2 Byla vydána 14. ledna 1997 a zachycuje stav jazyka v roce Připravovaná verze HTML 3.0 nebyla nikdy přijata jako standard kvůli své složitosti a slabé podpoře v prohlížečích. Standard už vydalo konsorcium W3C, stejně jako následující verze. Přidává k jazyku tabulky, zarovnávání textu a stylové elementy pro ovlivňování vzhledu. Verze 4.0 Byla vydána 18. prosince Do specifikace jazyka přidala nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Verze 4.01 Byla vydána 24. prosince Tato verze opravuje některé chyby verze předchozí a přidává některé nové tagy. Verze března 2007 byla založena nová pracovní skupina HTML, jejíž cílem je vývoj nové verze HTML. V květnu 2007 bylo odhlasováno, že základem nové specifikace se stanou Web Applications 1.0 a Web Forms 2.0 ze specifikace WHATWG. Jako název nové specifikace bylo odhlasováno HTML 5.0 a specifikace by měla být hotova v roce

12 XHTML XHTML(eXtensible HyperText Markup Language) rozšiřitelný hypertextový značkovací jazyk je nástupce HTML založený na XML. Počáteční verze XHTML 1.0 nepřinesla žádné nové prvky v porovnání s HTML 4, jednalo se jen o přepis existujících prvků tak, aby vyhovovaly XML. (XML je jazyk, který nemá na starost zobrazovat data, ale být nositelem dat, obsahu. Umožňuje oddělení obsahu od formy, vzhledu, a tím jednoduché zobrazení stejného obsahu na různých zařízeních obrazovka, tiskárna, mobilní telefon atd.) (O rozvoj standardů pro Web se stará společnost W3C (World Wide Web Consorcium) která sdružuje akademické i komerční organizace zabývající se WWW, Internetem a souvisejícími technologiemi.) 12

13 Co budeme potřebovat? Editory K psaní WWW-stránek tedy není třeba žádný speciální software, může postačit obyčejný textový editor, např. Poznámkový blok (nutná znalost (X)HTML). Pro tvorbu webových stránek existuje nepřeberné množství editorů. V zásadě je můžeme rozdělit na strukturní a WYSIWYG editory. 13

14 Strukturní editory Práce přímo ve zdrojovém kódu dokumentu, nutné znát HTML. Průběžný vzhled přepnutím do prohlížeče. Jsou to např. PSPad, HomeSite, HTML-Kit, Emacs, Vim, 1stPage, Golden HTML Editor, EasyPad, UltraEdit... Pro uživatele Linuxu pak například Quanta. 14

15 WYSIWYG editory Wysiwyg je anglická zkratka, která znamená What you see is what you get, tedy co vidíš, to dostaneš. Nepracuje se s kódem, ale se vzhledem stránky. Napíše se normálně text, vloží se obrázky a uloží se to na disk do souboru a příponou html. Editor všechny html značky (tagy) doplní sám. Výhoda: Pohodlnější práce. Nevýhoda: Výsledný kód je zmatečný, není validní. Např.: Dreamweaver, NVU, FrontPage, 15

16 Prohlížeče Nutné k zobrazení WWW stránek. Pozor! - Prohlížeče interpretují kód odlišně! Např.: Internet Explorer, Mozilla, Opera Pro uživatele Mac: Safari (asi 90% mac-uživatelů) Statistiky o používání internetových prohlížečů, rozlišení monitorů apod. (/global.html) 16

17 Pozn: Pro vytváření stránek lze použít tzv. konvertory z jiných datových formátů. Řada programů přímo obsahuje export do (X)HTML, např. MS Word, MS Excel, MS PowerPoint, atd. Kvalita výstupu bývá problematická, HTML kód je nekvalitní a často se zobrazuje chybně. 17

18 Kontrolní nástroje validátory (X)HTML, kontrola odkazů apod. Validátory provádějí kontrolu (X)HTML kódu a upozorňují na chybná či problematická místa. Validátory jsou k dispozici jak ve formě běžných programů, tak jako on-line služba, kde se zadá adresa stránky a validátor ji zhodnotí. Nejběžnější je validátor pocházející přímo od WWW Consorcia (http://validator.w3.org/). Jednou zčasto prováděných kontrol je testování funkčnosti odkazů. 18

19 Struktura webové stránky: 19