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 charakteristikaHTML 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 tiskDokument 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 white bílá #C0C0C0 silver stříbrná
#000000 black černá #FFD700 gold zlatá
#FF0000 red červená #FFB6C1pink 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. 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á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> nadpistext, vlastní obsah www stránky</body></html>
hlavička
tělo
Formátování textu
P (paragraph) odstavecpř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 blokupř: <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í řá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í čáraTento samostatný tag vloží vodorovnou čáru. Atributy:size=velikost definuje tloušťku čáry (1-10)align=zarovnání tj. left, center a rightcolor=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>
1. jaro
2. léto
3. podzim
4. zima
<ol type=I><li>jaro</li><li>léto</li><li>podzim</li><li>zima</li></ol>
I. jaro
II. léto
III. podzim
IV. 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:[email protected]“>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 atributy
align=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 atributy
colspan=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ídka
option - jeden řádek nabídky button, image, reset, submit - tlačítka
Příklad formuláře<form action="mailto:[email protected]?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.czBlog.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 blogBlogy 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ě bloguBlog.cz - Blogovací systém: adidasEasy Pad - Program na tvoření blogu : pizzerieWordPress - Program na tvoření blogu: postřehyBlogger.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
