Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Tvorba www stránek Internet je fenoménem současnosti a potřeba mít vlastní internetovou stránku je stále naléhavější. Pro firmu je to téměř nutnost. Vyzkoušíme.

Podobné prezentace


Prezentace na téma: "Tvorba www stránek Internet je fenoménem současnosti a potřeba mít vlastní internetovou stránku je stále naléhavější. Pro firmu je to téměř nutnost. Vyzkoušíme."— Transkript prezentace:

1 Tvorba www stránek Internet je fenoménem současnosti a potřeba mít vlastní internetovou stránku je stále naléhavější. Pro firmu je to téměř nutnost. Vyzkoušíme postupně různě obtížné způsoby, poznáme základy HTML i systémy, které vytvoří www stránky během pár minut. Vytvořit dokonalé stránky vyžaduje navíc grafické cítění, praxi s ovládáním grafických programů a digitálního fotoaparátu.

2 Stručně o internetu Internet je postaven na normách (standardech), které popisují způsoby komunikace a neváží se na konkrétní vlastnosti daného operačního systému. hlavním pilířem je jazyk HTML, který slouží k popisu toho, jak bude stránka vypadat odkazy se zapisují ve standardizované podobě pomocí URL přenos stránek ze serveru do počítače uživatele zajišťuje protokol HTTP

3 Jak vytvořit WWW stránky Máte 4 různé možnosti (a jejich případné kombinace): Naučit se vytvořit www stránky. Můžete se zkusit jazyk HTML, kterým se tvoří webové stránky. Využít aplikace, kterou své stránky snadno vytvoříte bez jakékoli znalosti. Budete řídit vlastní web podobně jako ovou schránku. Zkuste systém e-Stránky.cz nebo WebSnadno.cz. e-Stránky.cz WebSnadno.cz Využít speciálního programu pro tvorbu www stránky. Stránky vytváříte podobně jako dokument ve Wordu. Pro publikaci na internet jsou nutné další znalosti. Vyzkoušejte například NVU.NVU Nechat si vytvořit www stránky od někoho jiného.

4 HTML HTML a charakteristika HTML je zvláštní formát užívající se zejména na webu. HTML má tu výhodu, že jej můžete číst a upravovat i v obyčejném textovém editoru (např. Poznámkový blok). Většina dnešních programů obsahuje volbu Uložit jako stránku WWW nebo Uložit jako HTML. HTML a tisk Dokument nebo ve formátu HTML není určen tisku. HTML je určeno k prohlížení ve speciálních prohlížečích (např. Microsoft Internet Explorer, Mozilla, Opera). Formát HTML je obvykle závislý na zobrazovacích schopnostech počítače (velikost obrazovky, barvy, písma). Pro tisk je určen formát PDF.

5 HTML příkazy - tagy Tag je značka, podle které se počítač řídí. Tag určuje, jakým způsobem bude stránka upravena - zarovnej text doprava, zvětši písmo a zobraz je červeně, vlož odkaz na jiný server. Tagy se uzavírají do znaků. Můžeme je rozdělit na párové a nepárové (samostatné). Párové tagy se ukončují pomocí lomítka, ohraničují tak svou oblast působnosti. Tagy lze psát velkými i malými písmeny. Špatně zadaný tag prohlížeč ignoruje, nehlásí žádnou chybu. Příslušné formátování se samozřejmě neprovede. Příklady: text ahoj (tučně): ahoj, vložení obrázku kolie.gif vlevo.

6 Tvorba první www stránky Pro vložení textu použijeme NotePad, Poznámkový blok, který ukládá čistý text. Zapsanou stránku uložíme na disk s příponou html. Pro jméno používáme optimálně pouze malá písmena anglické abecedy a znak _ nebo -. Nepoužívejte ani mezeru! Vytvořenou stránku otevřeme v internetovém prohlížeči, zhodnotíme a v Notepadu odstraníme případné chyby. Prohlížeč není nutné spouštět znovu, značí jeho obsah aktualizovat (F5). Pracujeme tedy se dvěma okny, mezi kterými se přepínáme.

7 Tagy podrobněji Tagy lze do sebe strukturovaně vnořovat. Většina tagů umožňuje použití atributů. Ty umožňují dále specifikovat příkaz. Většina atributů má stanovenu předdefinovanou (implicitní) hodnotu. Často lze použít několik atributů současně. Na pořadí atributů obvykle nezáleží. Používané barvy lze pojmenovat buď jejich anglickými názvy (red, blue, green, silver) nebo RGB kódem. Ten tvoří číselná kombinace šesti hexadecimálních čísel uvozená mřížkou – např. #FF18A0.

8 Barvy RGB kódnázev #FFFFFFwhitebílá#C0C0C0 silverstříbrná #000000blackčerná #FFD700goldzlatá #FF0000redčervená#FFB6C1pinkrůžová #0000FFbluemodrá#FF6347tomatorajčatová #00FFFFaqua tyrkysová#D2691E chocolatečokoládová #008000greenzelená #808000olivetmavě žlutá #FFFF00yellowžlutá#800080purpletmavě fialová #808080grayšedá #FF00FFfuchsiafialová #000080navytmavě modrá#008080tealtmavě tyrkysová

9 Základní tagy HTML párový tag, který ohraničuje celý dokument. HEAD určuje začátek a konec hlavičky. TITLE obsahuje titulek hlavičky, který bude v okně prohlížeče napsán v modrém titulkovém pruhu. BODY ohraničuje tělo stránky, nabízí atributy: background=adresa obrázku obrázek na pozadí stránky bgcolor=barvabarva pozadí stránky text= barva barva textu link=barva barva odkazů (modrá) vlink= barvabarva navštíveného odkazu (fialová) alink=barva barva aktuálního odkazu(červená) Příklad

10 Struktura HTML dokumentu Každý HTML dokument se skládá z hlavičky a těla. Hlavička obsahuje titulek, v těle je vlastní obsah stránky. Kostra HTML dokumentu: Název dokumentu nadpis text, vlastní obsah www stránky hlavička tělo

11 Formátování textu P (paragraph) odstavec před odstavcem se vynechá řádek, atribut align=zarovnání určuje zarovnání textu: left, right, center, justify, tj. vlevo, vpravo, na střed, do bloku př: text zarovnaný vlevo DIV (divide) oddíl, libovolná část textu BR (break) měkký konec řádku, enter tento nepárový tag zalomí řádek př: jméno adresa zobrazí adresu pod jménem

12 Jednoduchá úprava textu Párové tagy pro úpravu písma bez atributů: Tučné.. Přeškrtnuté.. Kurzíva.. Velké.. Podtržené.. Dolní index.. Horní index.. Neproporcionální, předformátov... Vystředěné, vycentrované.. Tyto tagy lze do sebe vnořovat, např. text: ahoj lidi zobrazí ahoj lidi

13 Font písma, nadpisy FONT font písma Párový tag, slouží k nastavení velikosti, typu a barvy písma. Má atributy: size=velikostvelikost písma (1-7) color=barva barva písma face=fontvolba fontu (Arial, Times New Roman) Př. … H1..H6 (Head – hlavička) nadpisy Párové tagy pro nadefinování velikosti nadpisů v šesti úrovních s možným atributem pro zarovnání align. Nejmenší velikost písma je H6. H1 je hlavní nadpis stránky, H1 má přisouzenu největší důležitost. Nadpisy psané stylem H1 budou indexované roboty. Př. Nadpis stránky

14 Horizontální čára HR (Horizontal row) horizontální čára Tento samostatný tag vloží vodorovnou čáru. Atributy: size=velikost definuje tloušťku čáry (1-10) align=zarovnánítj. left, center a right color=barvabarva čáry, standardní je šedá noshadečára nebude stínovaná width=číslo nebo procentavelikost (délka) čáry se zadá číselně v bodech nebo relativně v procentech (př. 50%) Př.

15 Odrážky a číslování UL vyznačuje část odrážek LI jednotlivá položka seznamu OL vyznačuje část číslování LI jednotlivá položka seznamu atribut type=vzhled odrážky nebo číslování, možnosti: disc, circle, square, 1,I,i, A,a (arabské, římské, písmena) Příklad: jaro léto podzim zima 1.jaro 2.léto 3.podzim 4.zima jaro léto podzim zima I.jaro II.léto III.podzim IV.zima

16 Jednoduchá stránka v Notepadu básnička K.J.Erben Zlatý kolovrat Okolo lesa pole lán, hoj, jede, jede z lesa pán na vraném, bujném jede koni vesele podkovičky zvoní, jede sám a sám. Před chaloupkou z koně hop, a na chaloupku klop, klop, klop. Hola hej, otevřte mi dveře, zbloudil jsem při lovení zvěře, dejte vody pít.

17 Stejná stránka v prohlížeči

18 Obrázek IMG (image) vložení obrázku (i animovaného) tag je nepárový, má atributy src=název obrázku (včetně typu jpg, gif, png…) alt=popisek obrázku align=zarovnání width, height =šířka, výška border=šířka řámečku (0 znamená bez rámečku) Aby se obrázek správně zobrazil, musíte zadat opravdu přesný název (často včetně cesty). Ve složce proto nastavte zobrazování přípon souborů (Nástroje-Možnosti složky-Zobrazení)

19 Rolující text, obrázek MARQUEE vytvoří pohyblivý objekt, atributy bgcolor=barva pozadí behavior=scroll,slide,alternate direction=left,right,up,down směr pohybu width, height= šířka, výška loop=číslo počet opakování Pohybovat se může text, obrázek i tabulka Ahoj! Dobry den!

20 Hypertextový odkaz A (anchor) vložení odkazu automaticky se podtrhuje, s atributy href=adresa, kam se má přejít - stránka na internetu, soubor na místním počítači - schéma mailto (pro zaslání mailu) title=titulek Odkazem může být text, obrázek, tabulka… klikni sem náš pes informace

21 Tabulky Tabulku tvoří buňky členěné do řádků a sloupců TABLE s atributy align=zarovnání vodorovné valign=zarovnání kolmé (top, middle, bottom) bgcolor=barva pozadí border, bordercolor=síla rámečku, jeho barva width, height=šířka, výška (absolutně v bodech nebo relativně v %) cellspacing=vzdálenost mezi buňkami v tabulce cellpadding=vzdálenost textu od okraje buňky TR (table row) řádek tabulky TH (table head) nadpisová buňka (tučné, vystředěné) TD (table data) datová buňka s atributy colspan=počet sloučených sloupců rowspan=počet sloučených řádků

22 Příklad tabulky období výdělek jaro Kč léto Kč

23 FORM (=formulář) Tvorba formuláře pomocí párového tagu FORM NAME=jméno formuláře METHOD=způsob předání dat, GET nebo POST (to znamená em) ACTION=akce specifikuje, co se má s daty dít, ( ová adresa, skript) ENCTYPE=formátování (text/plain)

24 INPUT (=vstup) Vytváří všechny elementy, na ně uživatel reaguje. Je nepárový. Atribut type=druh prvku: text, password - textový rámeček, pro heslo textarea - větší textová oblast (i samostatně) checkbox - zatržítko radio - přepínač select - rozevírací nabídka option - jeden řádek nabídky button, image, reset, submit - tlačítka

25 Příklad formuláře

jméno adresa kraj Jihomoravský Moravskoslezský Olomoucký Zlínský pohlaví muž žena majetek byt auto Hjhjhg Ghjhgjhg hgj

26 WWW stránky snadno Nemusíte znát podrobnosti o vytváření www stránky a přitom je můžete vyrobit. Existuje k tomu řada systémů. Prostřednictvím nich snadno vytvoříte www stránky zdarma, které budou hezké, funkční a hlavně je budete mít plně ve své moci. Vyzkoušejte: Estranky.cz Websnadno.cz Blog.cz Bloguje.cz

27 Blog Blog (weblog) je webový zápisník, obsahuje periodicky řazené články (spoty, záznamy). Umožňuje řadit záznamy do různých kategorií a automaticky vytváří archivy podle let a měsíců. Jak vytvořit blog Blogy jsou oblíbené proto, že je nesmírně snadné je spravovat. Blogy se vytvářejí pomocí buď webových administrací nebo existují jako program, který si stáhnete na disk a používáte. Nástroje k tvorbě blogu Blog.cz Blog.cz - Blogovací systém: adidasadidas Easy PadEasy Pad - Program na tvoření blogu : pizzeriepizzerie WordPressWordPress - Program na tvoření blogu: postřehypostřehy Blogger.com Blogger.com - Blogovací systém

28 NVU NVU je kvalitní WYSIWYG editor na vytváření a správu webových stránek, který je založen na Editoru z balíku Mozilla Suite. Mezi hlavní přednosti se řadí snadné ovládání a kvalita vytvářených webových stránek.Mozilla Suite Nedílnou součásti NVU je Správce stránek, který vám umožní snadno spravovat vytvářené webové stránky a ty následně nahrávat přímo na web prostřednictvím protokolu FTP. Program lze získat zcela zdarma. Více informací

29 Výběr barev K volbě barev písma i pozadí na stránkách Uvedeme základní doporučení: - méně je někdy více - hlavní zásada je čitelnost - doporučujeme používat barevná schémata, která tvoří skupiny ladících barev generátor barevných schémat

30

31 NVU


Stáhnout ppt "Tvorba www stránek Internet je fenoménem současnosti a potřeba mít vlastní internetovou stránku je stále naléhavější. Pro firmu je to téměř nutnost. Vyzkoušíme."

Podobné prezentace


Reklamy Google