1 / 16

Tvorba WWW Stránek

Radek Štěpán, VIII.A Referát č. 22. Tvorba WWW Stránek. 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. A) Standardy a zásady.

newton
Download Presentation

Tvorba WWW Stránek

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Radek Štěpán, VIII.A Referát č. 22 Tvorba WWW Stránek

  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

  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í.

  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.

  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

  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: <identifikátor>

  7. Tagy obecně dělíme do dvou základních skupin: • párové <tag atributy> ...... </tag> Párové tagy se vyznačují tím, že jsou uvozovány počáteční značkou <tag atributy> , za kterou následuje nějaký objekt, zpravidla nějaký text, a ukončeny ukončovací značkou </tag> . Párovými tagy jsou například: <font> <i> <body> <center> <a> <table> • nepárové <tag atributy> Nepárové tagy jsou značky tvaru <tag atributy>, 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: <img> <hr> <input> <meta> <br>

  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: <font size=5 color="Blue">Nějaký text</font> • 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: <b><i>text bude napsán tučnou kurzívou</i></b>

  9. Struktura HTML stránky Typ dokumentu - verze použitého jazyka HTML Zobrazí se v záhlaví okna prohlížeče Kódování Tělo stránky - vlastní obsah, který se zobrazí v hlavním okně prohlížeče <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Název stránky </title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head> <body> <h1> Nadpis </h1> <p>Nějaký text v odstavci </p> </body> </html>

  10. Příklady HTML tagů: <HTML></HTML> značka HTML dokumentu <HEAD></HEAD> záhlaví HTML dokumentu <TITLE></TITLE> titulek dokumentu <BODY></BODY> tělo HTML dokumentu <BODY BACKGROUND="url"> obrázek na pozadí <BODY BGCOLOR="#xxxxxx"> barva pozadí stránky (#000000) <BODY TEXT="#xxxxxx"> barva textu <H></H> hlavička (1 až 6) <B></B> tučný text <I></I> kurzíva <U></U> podtržený text <FONT COLOR="#xxxxxx"> barva písma <A HREF="url"></A> odkaz na url <IMG SRC="url"> zobrazí obrázek <IMG SRC="url" ALT="text"> popisný text <INPUT TYPE=HIDDEN> skryté pole <INPUT NAME="název_pole"> jméno pole formuláře <INPUT CHECKED> zaškrtávací políčko

  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.

  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ů.

  13. Styl můžeme do HTML kódu začlenit třemi způsoby: • Jako součást každého HTML tagu: <PRVEK style="..."> • Definicí stylů v záhlaví dokumentu uvnitř tagu <STYLE>: <STYLE type="text/css"> ... </STYLE> • 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 <LINK>: <LINK rel="StyleSheet" href="název_souboru.CSS" type="text/css">

  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.

  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).

  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

More Related