1 / 31

Tvorba www stránek

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.

misu
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. 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 e-mailovou 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 whitebílá#C0C0C0 silver stříbrná #000000 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á #008000 green zelená#808000 olive tmavě žlutá #FFFF00 yellow žlutá#800080 purple tmavě fialová #808080 gray šedá #FF00FF fuchsia fialová #000080 navy tmavě modrá#008080 teal tmavě tyrkysová

  9. Základní tagy • HTML párový tag, který ohraničuje celý dokument. • HEADurčuje začátek a konec hlavičky. • TITLEobsahuje 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ázkuobrázekna pozadí stránkybgcolor=barva barva pozadí stránkytext= barva barva textulink=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) odstavecpřed odstavcem sevynechá řádek, atribut align=zarovnáníurčuje zarovnání textu: left, right, center, justify, tj. vlevo, vpravo, na střed, do blokupř: <p align="left"> text zarovnaný vlevo </p> • DIV (divide) oddíl, libovolná část textu • BR (break) měkký konec řádku, entertento nepárový tag zalomí řádekpř: 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ísmaPárový tag, slouží k nastavení velikosti, typu a barvy písma. Má atributy:size=velikost velikost písma (1-7)color=barva barva písmaface=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ážekLI jednotlivá položka seznamu • OL vyznačuje část číslováníLI jednotlivá položka seznamuatribut 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á atributysrc=název obrázku (včetně typu jpg, gif, png…)alt=popisek obrázkualign=zarovnáníwidth, height =šířka, výškaborder=šíř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, atributybgcolor=barva pozadíbehavior=scroll,slide,alternatedirection=left,right,up,down směr pohybuwidth, height= šířka, výškaloop=čí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í odkazuautomaticky se podtrhuje, s atributyhref=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= “ http://www.centrum.cz“>klikni sem</a><a href= “pes.gif“>náš pes</a> <a href= “mailto:info@centrum.cz“>informace</a><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 atributyalign=zarovnání vodorovnévalign=zarovnání kolmé (top, middle, bottom)bgcolor=barva pozadíborder, bordercolor=síla rámečku, jeho barvawidth, height=šířka, výška (absolutně v bodech nebo relativně v %)cellspacing=vzdálenost mezi buňkami v tabulcecellpadding=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 atributycolspan=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á e-mailem) • ACTION=akce specifikuje, co se má s daty dít, (e-mailová 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ídkaoption - jeden řádek nabídky • button, image, reset, submit - tlačítka

  25. Příklad formuláře <form action="mailto:nekdo@nekde.cz?subject=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.czWebsnadno.cz Blog.czBloguje.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. NVU

More Related