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.

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. 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. 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ě): <B>ahoj</B>, vložení obrázku kolie.gif vlevo < img src="kolie.gif" align="left">.

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ód název #FFFFFF white bílá #C0C0C0 silver stříbrná
# black černá #FFD700 gold zlatá #FF0000 red červená #FFB6C1 pink růžová #0000FF blue modrá #FF6347 tomato rajčatová #00FFFF aqua tyrkysová #D2691E chocolate čokoládová # green zelená # olive tmavě žlutá #FFFF00 yellow žlutá # purple tmavě fialová # gray šedá #FF00FF fuchsia fialová # navy tmavě modrá # teal tmavě 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=barva barva pozadí stránky text= barva barva textu link=barva barva odkazů (modrá) vlink= barva barva navštíveného odkazu (fialová) alink=barva barva aktuálního odkazu(červená) Příklad <body bgcolor="blue" text="black" link="olive">

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: <html> <head> <title>Název dokumentu</title> </head> <body> nadpis text, vlastní obsah www stránky </body> </html> 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ř: <p align="left"> text zarovnaný vlevo </p> DIV (divide) oddíl, libovolná část textu BR (break) měkký konec řádku, enter tento nepárový tag zalomí řádek př: jméno<br>adresa zobrazí adresu pod jménem

12 Jednoduchá úprava textu
Párové tagy pro úpravu písma bez atributů: Tučné <B> .. </B> Přeškrtnuté <S> .. </S> Kurzíva <I> </I> Velké <BIG> .. </BIG> Podtržené <U> .. </U> Dolní index <SUB> .. </SUB> Horní index <SUP> .. </SUP> Neproporcionální, předformátov. <PRE> .. </PRE> Vystředěné, vycentrované <CENTER> .. </CENTER> Tyto tagy lze do sebe vnořovat, např . text: <b> <u>ahoj</u > lidi</b> 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=velikost velikost písma (1-7) color=barva barva písma face=font volba fontu (Arial, Times New Roman) Př. <font size=6 face="Arial" color="green"> …</font> 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ř. <h2 align="center">Nadpis stránky</h2>

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=barva barva čáry, standardní je šedá noshade čára nebude stínovaná width=číslo nebo procenta velikost (délka) čáry se zadá číselně v bodech nebo relativně v procentech (př. 50%) Př.<hr> <hr size=3 width=220 color="blue" align="center"> <hr size=8 width=25% align="right" noshade>

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: <ol> <li>jaro</li> <li>léto</li> <li>podzim</li> <li>zima</li> </ol> <ol type=I> <li>jaro</li> <li>léto</li> <li>podzim</li> <li>zima</li> </ol> jaro léto podzim zima jaro léto podzim zima

16 Jednoduchá stránka v Notepadu
<html> <head> <title>básnička</title> </head> <body bgcolor=silver> <center><h1>K.J.Erben<hr width=20% size=8></h1></center> <h2><i><u>Zlatý kolovrat</u></i></h2> <font color=blue size=4> <p>Okolo lesa pole lán,<br>hoj, jede, jede z lesa <u>pán</u><br> na vraném, bujném jede koni <br>vesele podkovičky zvoní,<br> <font color=tomato>jede sám a sám.</font></p> </font> <font color=green size=5 face=arial> <p align=right> Před chaloupkou z koně hop,<br>a na chaloupku klop, klop, klop.<br> Hola hej, otevřte mi dveře,<br>zbloudil jsem při lovení zvěře,<br> <big>dejte vody pít.</big><br></p></font> <hr> </body> </html>

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) <img src=kolo.jpg> <img src=klokan.gif width=50%> 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 <marquee>Ahoj!</marquee> <marquee direction=down>Dobry den! </marquee> <marquee> <img src=kolo.jpg> </marquee>

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… <a href= “ sem</a> <a href= “pes.gif“>náš pes</a> <a href= <a href= “velky_pes.gif“><img src=maly_pes.jpg></a>

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 <table border=3 bgcolor=pink width=20%>
<tr bgcolor=silver> <th>období</th><th>výdělek</th> </tr> <tr> <td>jaro</td><td>15000 Kč</td> </tr> <tr> <td>léto</td><td>40000 Kč</td> </tr> </table>

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 <form enctype="text/plain" method="POST"> jméno <input type="text" name="name" ><br> adresa<textarea rows="3" name="adr" ></textarea><br> kraj<select> <option value="JM">Jihomoravský</option> <option value="MS">Moravskoslezský</option> <option value="OL">Olomoucký</option> <option value="ZL">Zlínský</option> </select><br> pohlaví <input type="radio" name="p"> muž <input type="radio" name="p"> žena<br> majetek <input type="checkbox" name="byt">byt <input type="checkbox" name="auto">auto<br> <input type="submit" value="Odeslat"> </form> 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 - Blogovací systém: adidas Easy Pad - Program na tvoření blogu : pizzerie WordPress - Program na tvoření blogu: postřehy 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. 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