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

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

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.

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.

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

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.

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.

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á

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">

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

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

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

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>

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>

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

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>

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

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

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>

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>

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ů

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>

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)

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

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

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

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

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í

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

NVU

Tvorba www stránek