Radek Štěpán, VIII.A Referát č. 22 1. Osnova  A) Standardy pro tvorbu webových stránek  B) Základní pravidla pro vytváření internetových stránek  C)

Prezentace na téma: "Radek Štěpán, VIII.A Referát č. 22 1. Osnova  A) Standardy pro tvorbu webových stránek  B) Základní pravidla pro vytváření internetových stránek  C)"— Transkript prezentace:

1 Radek Štěpán, VIII.A Referát č. 22 1

2 Osnova  A) Standardy pro tvorbu webových stránek  B) Základní pravidla pro vytváření internetových stránek  C) HTML  D) CSS  E) Software pro tvorbu www stránek  F) Umístění stránek na internetu 2

3 A) Standardy a zásady  Při tvorbě webových stránek se dodržují tyto standardy a zásady:  1. Validita - Validita znamená obecně platnost. Validní webovou stránku lze interpretovat jako stránku korektní, neobsahující chyby.  2. Přístupnost -Přístupný web lze charakterizovat jako web dostupný na každém typu zobrazovacích zařízení.  3. Použitelnost -Použitelnost internetových stránek určuje, jak snadno se na nich uživatelé orientují a jak snadno pochopí jejich uspořádání a ovládání. 3

4 B) Základní pravidla pro návrh www stránek  Měli byste mít jasno jaké informace bude váš web obsahovat.  Návštěvník vaší stránky musí mít možnost návratu z jakékoli stránky na titulní.  Dbejte na to, aby vaše stránky měly jednotný vzhled.  Používejte standardní fonty (Arial, Verdana, Courier, Courier New, Helvetica, Times).  Nezapomeňte na autorský zákon, použijte vlastní grafiku a texty.  Zálohujte si stránky pro případ selhání serveru a ztráty dat.  Rozvrhněte si adresářovou strukturu pro přehlednost – každý větší celek by měl mít svůj adresář, grafika a informace by měly být umístěny v odlišných adresářích. 4

5 C) HTML (HyperText Markup Language)  Základní znalostí pro vytváření webových stránek je jazyk HTML. Je to typ jednoduchého značkovacího jazyka (markup language) použitelného na různých platformách, který slouží pro popis obsahu stránky. Stejně jako celý internet se i HTML vyvíjí velice rychle a má v každém roce několik doplnění a obvykle alespoň jednu podstatnou novou verzi. HTML řídí konsorcium W3C, která jako jediný vrcholový orgán specifikuje a oficiálně vydává nové verze jazyka HTML. V současné době je poslední oficiální specifikací jazyka HTML verze 5 5

6 HTML (HyperText Markup Language)  Značkovací jazyky, mezi které patří i HTML, vycházejí z čistě textového souboru. Ten obsahuje jak vlastní text, který chceme sdělit uživateli, tak instrukce ovlivňující jeho vzhled a strukturu. V HTML jsou tyto instrukce zapisovány prostřednictvím speciálních znakových řetězců tzv. tagů. Tag je libovolný n- znakový identifikátor uložený ve dvou závorkách: 6

7 Tagy obecně dělíme do dvou základních skupin:  párové...... Párové tagy se vyznačují tím, že jsou uvozovány počáteční značkou, za kterou následuje nějaký objekt, zpravidla nějaký text, a ukončeny ukončovací značkou. Párovými tagy jsou například:  nepárové Nepárové tagy jsou značky tvaru, které nepopisují, jak bude vypadat objekt uzavřený mezi počáteční a koncovou značkou, ale v místě volání zavedou na stránku nějaký objekt. (např. obrázek, čáru...). Nepárovými tagy jsou například: 7

8  Každý tag může obsahovat vedle svého identifikátoru také atributy. Pod pojmem atributy si lze nejjednodušeji představit volby, určující nějaké nastavení nebo vlastnosti. Každý atribut pak má definovanou svou hodnotu. Pořadí zapsaných atributů v tagu je libovolné. Následují příklad ukazuje definici atributů písma pomocí tagu FONT: Nějaký text  Jednotlivé tagy lze do sebe vnořovat. Vnořené značky se ukončují v opačném pořadí, než jak byly volány: text bude napsán tučnou kurzívou 8

9 9 Název stránky Nadpis Nějaký text v odstavci Struktura HTML stránky Zobrazí se v záhlaví okna prohlížeče Typ dokumentu - verze použitého jazyka HTML Kódování Tělo stránky - vlastní obsah, který se zobrazí v hlavním okně prohlížeče

10 Příklady HTML tagů: značka HTML dokumentu záhlaví HTML dokumentu titulek dokumentu tělo HTML dokumentu obrázek na pozadí barva pozadí stránky (#000000) barva textu hlavička (1 až 6) tučný text kurzíva podtržený text barva písma odkaz na url zobrazí obrázek popisný text skryté pole jméno pole formuláře zaškrtávací políčko 10

11 D) CSS (Cascading Style Sheets)  Jazyk HTML byl původně navržen pro prezentaci informací. Pomocí tagů šlo snadno vyznačit jednotlivé logické části dokumentu. Minimální důraz byl přitom kladen na přesnou definici výsledného vzhledu dokumentu. S vývojem Internetu rostly i požadavky na lepší kontrolu nad grafickým vzhledem. Byly přidávány nové tagy a další atributy tagů určené pro lepší ovládání vzhledu a formátování dokumentu. Tento postup měl však své nevýhody. V HTML dokumentech se začal čím dál tím více místo struktury obsahu vyznačovat spíše grafický vzhled. Další nevýhodou byla nízká flexibilita a velká pracnost tohoto systému. Pro každý element dokumentu se totiž musí formátování nastavovat jednotlivě.  Požadavky na oddělení struktury dokumentu od jeho vzhledu vedly ke vzniku rozšíření základního HTML o možnost definování vzhledu jednotlivých elementů. Kaskádové styly (CSS) umožňují jednoduše definovat druh písma, způsob zarovnání, barvu a další vlastnosti, které se pak použijí jednotně v celém dokumentu. 11

12 CSS (Cascading Style Sheets)  Samotný dokument obsahuje pouze informace o jeho struktuře a grafický vzhled je definován stylem. Toto rozšíření přináší usnadnění při návrhu a správě webu, neboť jeden styl může být společný pro několik stránek, které tak získají jednotný vzhled. Jeho změnu pak můžeme snadno realizovat pouhou změnou stylu. Také může být v jednom dokumentu použito více stylů, které se navzájem doplňují. Jejich jedinou nevýhodou je, že nejsou implementovány ve starších verzích prohlížečů a i novější verze ne vždy podporují všechny uvedené vlastnosti jednotlivých elementů. 12

13 Styl můžeme do HTML kódu začlenit třemi způsoby:  Jako součást každého HTML tagu:  Definicí stylů v záhlaví dokumentu uvnitř tagu :...  Použitím definice stylů uložené v samostatném souboru s příponou.css. Vložení této externí definice stylů je v HTML kódu realizováno prostřednictvím tagu : 13

14  Základem deklarace stylů jsou pravidla tvaru: selektor { deklarace }  Kde selektor je libovolný HTML prvek a deklarace je dvojice: vlastnost:hodnota Pokud je na stránce několik stylů, mají vyšší váhu později uvedené styly. Chceme-li některou deklaraci učinit důležitější uvedeme za ní klíčové slovo !important. 14

15 E) Programy pro tvorbu www stránek  Nejčastěji se pro tvorbu webových stránek používá tzv. HTML editor (program pro editaci HTML kódu). V dnešní době existuje velké množství těchto programů, od jednoduchých zdarma distribuovaných amatérských programů až po komplexní profesionální editory podporující nejnovější technologie v hodnotě několik tisíc korun.  Na Internetu je možno si stáhnout velké množství kvalitních poloprofesionálních editorů, některé dokonce v češtině, které jsou šířeny zdarma nebo jako shareware za malý licenční poplatek (např. FirstPage, AceHTML nebo český EasyPad). 15

16 F) Umístění stránek na internetu  Pro umístění stránek na internet je potřeba udělat hlavní 2 věci:  Zaregistrovat vhodnou doménu, aby Váš web měl adresu, na které se bude zobrazovat. Nejčastěji používané koncovky jsou CZ, EU, INFO, NET, COM, ORG, NAME. Jejich ceny jsou v rozsahu od 100,– Kč.  Objednat spolehlivý webhosting, neboli prostor „na internetu”, kde bude web umístěn. Ceny za kvalitní hosting na jednoduchou prezentaci (statické stránky, fotogalerie ) se pohybují do 500 korun ročně, opravdový komfort a mimořádné služby navíc lze pak pořídit okolo 1200 korun ročně.  Existují také free webhostingy, kde je možné získat zdarma malé úložiště a zaregistrovat si doménu 3. řádu. To je ale většinou podmíněno umístěním reklamy na tyto stránky 16