Veronika Hladíková. V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám.

Prezentace na téma: "Veronika Hladíková. V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám."— Transkript prezentace:

1 Veronika Hladíková

2 V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám takovou tvorbu webové stránky pokusím přiblížit od jejího zrodu až po samotnou prezentaci na webu.

3 Struktura webu Záhlaví Je nejdůležitějším prvkem na webové stránce. Webovou stránku identifikuje a návštěvníkovi dává najevo, čeho se server týká a co na něm najdeme. Mělo by obsahovat název webové stránky.

4 Navigace Bez navigace se neobejde žádná dobrá stránka. Pomocí kvalitně promyšlené navigace je zpřístupněn celý obsah webu. Nesmí se hnout z místa. Nachází se v horní části webové stránky. Musí obsahovat odkaz na úvodní stranu.

5 Vyhledávání Je neocenitelnou součástí internetové stránky. Návštěvníkovi nabízí možnost dostat se co nejrychleji k vyhledávaným informacím. Vyhledávací pole by mělo být zcela jasně viditelné. Obsahová část Text musí být čitelný s neagresivní barvou podkladu. Struktura textu musí být jednoduchá a o přehlednost se postará tučné písmo, kurziva, barvy, seznamy a ikonky.

6 Zápatí stránky Je to grafické zakončení stránky. Obsahuje určité informace a odkazy, které návštěvník hledá nejčastěji....Copyright a právní ujednání..stáří stránky..kontakt..odkaz na RSS kanál.. atd.

7 Co to vlastně HTML je? HTML je jednoduchý značkovací jazyk, kterým se tvoří webové stránky Při tvorbě www. stránek se nepoužívá jen html, ale i další jazyky: css, php, javascript a další.

8 Co je potřeba pro tvorbu HTML stránek? Jednoduchý textový editor. Postačí poznámkový blok nebo speciální editory s podporou html kódu. Poslední důležité vybavení jsou internetové prohlížeče. (Internet Explorer) Pro publikování webhosting.

9 Struktura HTML dokumentu Každý HTML soubor by měl obsahovat několik základních tagů, hlavičky a těla. Tím se zaručí, že všichni klienti (zejm. prohlížeče) pochopí, o co v dokumentu vlastně jde.

10 Základní značky TagVýznamVýskyt HtmlZačátek HTML dokumentu Na začátku souboru HeadHlavička stránkyNa začátku souboru BodyTělo stránky + definice pozadí Za poznámkakdekoliv !doctypeSpecifikace DTDÚplně na začátku souboru

11 Html- Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Head- Hlavička dokumentu Body- Tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky. Každý text má obsah a formu. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text.

12 1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů a : kurzíva ). Pomocí tagů se některé věci nedají udělat. 2. Novější způsob - CSS styly -- používá tag a obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné.

13 Atributy tagu Atribut tagu VýznamHodnotyCSS náhrada pro tag body BgcolorBarva pozadíBarvabackground-color backgroundObrázek na pozadíURLobrázkuBackground- imagine textBarva textuBarvacolor Pro příklad níže uvádím pár základních atributů tagu i s využitím CSS.

14 Poznámka- Všechno, co je v HTML souboru obaleno značkami, je považováno za poznámku !doctype- Specifikace DTD. Píše se úplně na začátek souboru, ještě před značku. Hlavní funkcí !doctype je dnes přepínání zobrazovacích modů CSS. Jinak řečeno podle doctype se určuje, ve kterém prohlížeči se budou jak počítat šířky a velikosti písma.

15 Příklad Tvorba webových stránek Tvorba webových stránek. A nějaké další texty.

16 začíná dokument končí dokument a začíná a končí hlavičku a vymezující název dokumentu Co je mezi a, se bude zobrazovat. je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo).

17 Prvky stránek Obrázky a pozadí V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Odkazy Text, který slouží jako odkaz, je obalen párovým tagem : Text odkazu

18 Obecná syntaxe HTML HTML má několik málo zásad, které je dobré zmínit. Nezáleží na velikosti písmen, je totéž co V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština. Na začátku tagu nesmí být mezera, třeba je špatně.

19 Jak dostat stránky na web? Jsou dva způsoby, jak publikovat na webu 1. Zadarmo- Buďto využijete služeb veřejných serverů (freehostingů) nebo Vás někdo nechá publikovat na své doméně. 2. Placený- Pokud můžete obětovat pár korun, doporučuji najít si nějaký placený hosting.

20 Pravidla tvorby přístupného webu 1. Obsah webových stránek je dostupný a čitelný. 2. Práci s webovou stránkou řídí uživatel. 3. Informace jsou srozumitelné a přehledné. 4. Ovládání webu je jasné a pochopitelné. 5. Odkazy jsou zřetelné a návodné. 6. Kód je technicky způsobilý a strukturovaný.