Referát č. 22 Tvorba webových stránek (Struktura webu, struktura HTML dokumentu, vytvoření webové stránky exportem z aplikačního programu, provázání dokumentů odkazy, zásady přístupnosti a použitelnosti webových stránek).
Přístupy ke tvorbě www stránek: Existují v podstatě tři přístupy ke tvorbě www stránek. Prvním je využití tzv. wysiwyg editorů, ve kterých píšete rovnou text , nestaráte se o to jak je kód stránky tvořen. Druhou možností je psát přímo kód stránky - Internetová stránka je soubor s příponou htm nebo html a je to skoro obyčejný textový soubor obohacený o značky jazyka HTML (tagy).Třetí možností je kombinace předchozích - tj. kombinace nějakého vysiwyg editoru, ve kterém tvoříme obsah stránky a ruční editace a úprava kódu.
WWW stránky jsou spolu s elektronickou poštou a komunikačními programy nejpoužívanějšími prostředky internetu. WWW stránky jsou vytvořeny ve speciálním jazyce HTML. HTML je zkratka HyperTextMarkUp Language ("nadtextový značkový jazyk"). místo příkazů jsou zde takzvané tagy. HTML dokument je pouze textový soubor, který lze běžně přečíst v libovolném textovém programu. Aby prohlížeč poznal, že se jedná o stránku internetu, resp. o HTML dokument, bývá uložen s příponou HTM nebo HTML - podle serveru, na kterém je uložen. Zobrazení HTML stránky funguje tak, že pomocí prohlížeče načteme soubor htm a ten "poskládá" stránku do takové podoby, v jaké ji vidíme na obrazovce. To může přinést potíže, pokud použijeme některé nestandartní funkce, při zobrazení v různých prohlížečích (Internet Explorer, Mozilla, Firefox, Opera...) Při nastavení vzhledu stránky využíváme prostého HTML kódu, nověji využíváme tzv. kaskádových stylů a pro operace s databázemi,soubory atd. využíváme tzv. JavaScripty a PHP (dynamické html stránky)
Wysiwyg editory: Pro vytváření stránek můžeme vytvořit v komerčně dodávaných (placených) editorech (MS Front Page, Publisher) , export do HTML umožňují i textové editory (MS Word, OOffice) a nebo jsou i programy zdarma - např. program NVU, SeaMonkey atd.
Princip struktury HTML stránek: 1. Úvodní stránka má obvykle název index.htm 2. Všechny stránky ukládáme při tvorbě do jedné pracovní složky (např. vytvoříme složku WWW, do ní ukládáme soubory s příponou htm) 3. V pracovní složce vytvoříme složku OBRAZKY do které vkládáme grafické soubory
HTML: Pro „napsání“ www stránky je potřeba znát HTML kód. HTML kód je založen na značkách, které se nazývají TAGY. Tagy uzavírají každý text a určují jak bude vypadat v prohlížeči. Všechny tagy jsou uzavřené v ostrých závorkách <tag>. Většina tagů má tzv. počáteční tvar <tag> a koncový tvar </tag> a při používání XHTML kódu mají koncový tvar tagy všechny.
Základní kostra stránky vypadá takto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> - definice typu HTML se tzv. DOCTYPE, která se logicky umisťuje na úplný začátek dokumentu, ještě před tag <HTML> - začíná dokument <HEAD> - začíná hlavička, nezobrazuje se <TITLE> </TITLE> - vymezující název dokumentu </HEAD> - končí hlavička <BODY> - vlastní tělo dokumentu (angl. body = tělo), zobrazuje se </BODY> </HTML> - končí dokument
Jednoduchý dokument: a) odstavce - tag <P> Př. <P>První odstavec</P> b) konec řádku - pevný - tyg <BR> c) nadpisy různých úrovní (až šest úrovní) - tag <H1> ... Př. <H1>H1 - nadpis první úrovně</H1> <H2>H2 - nadpis druhé úrovně</H2> <H3>H3 - nadpis první úrovně</H3> <H4>H4 - nadpis první úrovně</H4> <H5>H5 - nadpis první úrovně</H5> <H6>H6 - nadpis první úrovně</H6>
d) zvýraznění určitých částí textu - zápis <tag>zvýrazněné slovo</tag> Př. <EM>kurzíva,</EM> <KBD>neproporcionální písmo,</KBD> <SAMP>výstupy z různých programů - neproporcionální písmo,</SAMP> <STRONG>silné zvýraznění textu,</STRONG> <VAR>označení proměnných - obvykle kurzíva,</VAR> <B>v textu vyznačuje tučné písmo,</B> <I>kurzíva,</I> <U>podtržený text,</U> <STRIKE>přeškrtnuté písmo,</STRIKE> <SUB>vyznačuje dolní index,</SUB> <SUP>vyznačuje horní index</SUP>
e) zarovnávání textu - atribut ALIGN (může nabývat hodnot LEFT, RIGHT a CENTER) u tagů pro nadpisy (H1-H6) a odstavce (P) Př: <H1 ALIGN=CENTER>H1 - nadpis první úrovně uprostřed</H1> f) zarovnávání více odstavců - tag <DIV> Př: <DIV ALIGN=RIGHT> <P>První odstavec... <P>Druhý odstavec... </DIV> g) barvy dokumentu - pozadí - atribut BGCOLOR - text - atribut TEXT Př: <BODY BGCOLOR=#800080 TEXT="#FFFFFF"> h) barvy pouze části dokumentu - tag <FONT> Př: <H1><FONT COLOR=#FFFF00">H1 - nadpis první úrovně a žlutý</FONT></H1>
Základní barvy:
Písmo: Text můžeme nejen barvit (viz. předcházející kapitola) ale můžeme měnit i jeho velikost. ch) velikost písma - atribut SIZE Př: <H2>Písma rozličných velikostí a barev</H2> <P><FONT COLOR=AQUA SIZE=1>Písmo velikosti 1 a modrozelené</FONT> <P><FONT COLOR=BLACK SIZE=2>Písmo velikosti 2 a černé</FONT> <P><FONT COLOR=BLUE SIZE=3>Písmo velikosti 3 a modré</FONT> <P><FONT COLOR=FUCHSIA SIZE=4>Písmo velikosti 4 a anilín. červené</FONT> <P><FONT COLOR=GRAY SIZE=5>Písmo velikosti 5 a šedivé</FONT> <P><FONT COLOR=GREEN SIZE=6>Písmo velikosti 6 a zelené</FONT> <P><FONT COLOR=LIME SIZE=7>Písmo velikosti 7 a citrónově zelené</FONT> i) velikost písma - atribut SIZE - relativní určování velikosti vzhledem k základnímu fontu Př: <BASEFONT SIZE="6">Změněná základní velikost <FONT SIZE="-1">Tady je velikost relativně zmenšená o 1</FONT> <FONT SIZE´"2">Absolutní velikost nastavena na 2.</FONT>
Obrázky a odkazy : Nedílnou součástí www stránek jsou odkazy (na určitou část stránky, na jiný dokument) a obrázky (které také mohou sloužit jako odkazy) Pro vložení více obrázků vedle sebe používáme tabulku (s nulovými okraji). Tabulku v editoru WWW stránek vytvoříme tak, že klikneme na Tabulka...Vložit...Tabulka... - zadáme počet řádků a sloupců, okraje 0 bodů. Obrázek může sloužit jako pozadí stránky - většinou je nutno takový obrázek nejdříve upravit - jeho barvu, velikost atd. Velice často vkládáme na stránky LOGA firem, organizací , atd. Je vhodné, když pozadí loga je tvořeno průhlednou barvou. Toho lze dosáhnou u grafických souborů ve formátu GIF. V grafickém editoru vybereme průhlednou barvu.
a) Odkaz je zvýrazněná část stránky, za kterou se skrývá adresa odkazu (URL) odkaz na určitou část aktuální stránky: Př: jak je vidět z přiložené <A HREF="#Prodej">tabulky</A> Mezi <A...>a</A> je část textu, pod kterou se skrývá odkaz - v HTML dokumentu vyznačen jinou barvou <A NAME="Prodej">Tabulka prodeje za uplynulé čtvrtletí</A> Mezi <A...> a </A> je návěští odkazu odkazy na jiný dokument HTML : Př: a) odkaz na dokument ve stejné složce (adresáři) <A HREF="priklad3.htm">vodové</A> b) odkaz na jiné www stránky <A HREF="http://obchod.vytvarnepotreby.cz">prodej</A>
b) Vkládání obrázků Př: <P><ING SRC="chemie b) Vkládání obrázků Př: <P><ING SRC="chemie.gif" ALT="Chemické nádoby"> atributy obrázků - ALIGN (=LEFT, RIGHT) Př: <P><IMG SRC="chemie.gif" ALIGH=LEFT ALT="Chemické nádoby"> atributy - WIDTH a HEIGHT (požadovaná šířka a výška obrázku v pixelech) Př: <P><IMG SRC="rukabila.gif" ALIGN=LEFT ALT="Ruka" WIDTH="100" HEIGHT="70" > obrázek může být i odkazem a mít rámeček Př: <P><A HREF="priklad.htm"><IMG SRC="rukabila.gif" ALIGN=LEFT ALT="Ruka" WIDTH="100" HEIGHT="70" BORDER=10></A></P>
Použití editorů: Novou WWW stránku můžeme také vytvořit v editoru. Mimo možnost použití MS Wordu (což není moc elegantní řešení) je možno využít editoru, který je součástí instalace prohlížeče Mozilla (najdete na www.czilla.cz). Editor spustíme z otevřeného prohlížeče v nabídce Soubor...Upravit stránku (nebo Ctrl + E) Nejdříve si vytvoříme svou WWW prezentaci na disku svého počítače. Pro začátek ukládáme všechny soubory do jedné složky (pro přehlednost můžeme v této základní složce vytvořit ještě složku na obrázky). V editoru pracujeme stejně, jako v běžném textovém editoru s některými výjimkami. Kód se generuje automaticky, zůstává nám možnost úpravy kódu ručně.
Rámy (FRAME): Rámy v HTML umožňují rozdělit okno prohlížeče na několik částí. V současné době se již považují za nemoderní způsob pogramování stránek, vzhledem ke své jednoduchosti ale nabízí poměrně snadné členění jednoduchých stránek, což vyhovuje v případě použití v našich jednoduchých případech. Struktura dokumentu, který definuje rozložení rámů na stránce, se od struktury běžné stránky trochu liší. Stránka s rámy musí obsahovat záhlaví (HEAD) a definici rozložení rámů (FRAMESET). Tělo dokumentu (BODY) je nepovinné a zobrazuje se pouze v těch prohlížečich, které rámy nepodporují. Definice rozložení rámů na stránce se provádí pomocí párového elementu FRAMESET. Lze u něho použít atributy ROWS a COLS, které určují, na kolik řádek či sloupců se obrazovka rozdělí. Pokud použijeme oba atributy najednou, vytvoří se mřížka.
Jednoduchý program, který nám může pomoct v tvorbě www stránek:
Kaskádové (CSS) styly: Pro formátování textu, prvků stránky i pro umístění objekttů na stránce se v současnosti pouzívají kaskádové styly. Dá se říct, že pomocí stylů pracujeme podobně, jako při využití stylů v textových editorech. Můžeme přesně modifikovat a nastavovat parametry písma, textu (odsazení odstavce...), hypertextové odkazy, detailní nastavení vlastností jednotlivých objektů atd. Problémem kaskádových stylů může být skutečnost, že ne všechny internetové prohlížeče akceptují striktní formu CSS a „vykládají si “ stejné styly různě. Je třeba vždy vyzkoušet, jak se stránka chová v různých prohlížečích.
CSS styly je možno definovat třemi způsoby. - přímý zápis stylu - tímto se rozumí definice stylu přímo v souvislost s konkrétním tagem uvnitř stránky. Př. Chceme vytvořit červený nadpis tučným písmem: <h1 style="color: red">Hlavní červený nadpis</h1> - definice stylu v hlavičce - souhrn vlastností na dané stránce zapíšeme do hlavičky stránky. Př: <head> ... <style> h1 {color: red} </style> </head> Mezi párovými tagy <style> můžeme definovat libovolný počet vlastních stylů. - externí soubor CSS V principu se jedná o oddělení obsahu stránky a souboru, určujícího její vzhled. Soubor určující vzhled se připojuje (linkuje) většinou do všech stránek jednoho vebu. Je tedy možno najednou změnit celý vzhled webové stránky pouze změnou jednoho souboru. Externí soubos se styly by měl mít příponu CSS - tedy např. neco.css (v našem příkladě styly.css) V tomto souboru stačí definovat bez jakýchkoli dalších značek definovat standardní metodou styl Př. - obsah jednoduchého souboru se styly h2 {color: blues} h1 {color: green}
Parametry CSS stylů: Formátování textů: Vlastnosti písma: color: rgb(28, 46, 59); - barva (red, blue atd. ) background-color: red: - barva pozadí font-size: 15px; - velikost font-style: normal; - styl písma (bold, italic) font-family: Arial,Helvetica,sans-serif; - font text-decoration; - podtržení (none, underline) Vlastnosti odstavce. text-align: left; - zarovnání (center, right, justify) vertical-align: top; margin-top: 6px; - odsazení nad odstavcem (v bodech px) margin-bottom: 0px; - odsazení pod odstavcem
Formátování odstavců: #ramecek { border: 10px solid rgb(191, 153, 115); - šířka, barva margin: 0pt auto 1em - vnější okraj; padding: 10px; - vnitřní okraj position: relative; - umístění - pozice - relativní vůči předchozí oblasti top: 0pt; left: 0pt; width: 90%; - velikost vůči stránce min-width: 530px; - minimální velikost max-width: 1024px; background-color: rgb(255, 230, 204); - barva elementu (ráměčku) Oblasti mohou být také plovoucí přes část okna prohlížeče: float: left: