Tvorba jednoduché webové prezentace. Fakulta elektrotechniky a informatiky Ostrava 2004

Transkript

1 . Tvorba jednoduché webové prezentace Daniela Ďuráková Vysoká škola báňská - Technická univerzita Ostrava Fakulta elektrotechniky a informatiky Ostrava

2 Pokyny ke studiu 1 Pokyny ke studiu Struktura textu Postup při studiu Orientace v textu Základy práce s html Princip WWW stránek WWW stránky Doporučení pro tvorbu WWW stránek První HTML stránka Používání značek Formální značky Struktura dokumentu Umístění WWW stránek v rámci Internetu Uložení WWW stránky URL a odkazy URL Relativní vs. absolutní odkazy Odkazy na určité místo dokumentu Odkazy na určité dokumenty

3 3 Formátování stránky Seznamy Nečíslovaný seznam Číslovaný seznam Definiční seznam Tabulky Písmo, kódování Obrázky Doporučení pro práci s obrázky Barevnost WWW dokumentů Barvy pro část textu Barvy pro celý dokument Pozadí stránky

4 Struktura textu Kapitola 1 Pokyny ke studiu Při studiu následujícího textu se v úvodu stručně seznámíte se základními principy poskytování údajů v rámci webových stránek. Dále se dozvíte, jaké prostředky potřebujete pro vytvoření svého vlastního jednoduchého dokumentu, svých vlastních webových stránek ve formátu html. Pro tvorbu takových stránek je nezbytná alespoň základní znalost jazyka HTML, což je náplní tohoto modulu. Dozvíte se, jak se takový text tvoří, jak je možné jej formátovat a co je nutné k tomu, aby bylo možné takový dokument zobrazovat v rámci Internetu. 4

5 Pokyny ke studiu Postup při studiu 1.1 Struktura textu Studijní text, který budete pročítat, se dělí na kapitoly, ty poté podle logických celků na jednotlivé podkapitoly. Na začátku každé kapitoly jsou stručně vymezeny cíle studia příslušné kapitoly. Také je uvedena časová náročnost, kolik minut průměrnému studentovi prostudování kapitoly zabere. V textu kapitol jsou také často uváděny otázky. Doporučujeme Vám, abyste se průběžně snažil(a) na otázky zformulovat odpověd, nejlépe i písemně. U většiny otázek jsou uvedeny také odpovědi. Abyste dosáhl(a) maximálních výsledků, pokuste se vždy na otázku nejprve samostatně odpovědět, než si přečtete odpověd. Na závěr každé kapitoly je uvedeno stručné shrnutí, s čím jste se při studiu kapitoly seznámil(a). 5

6 Struktura textu Orientace v textu 1.2 Postup při studiu Kapitoly studijního textu jsou za sebe řazeny v pořadí, v jakém je autoři považovali za nejvhodnější studovat. Doporučujeme Vám každou jednotlivou kapitolu prostudovat pokud možno najednou. Kapitoly jsme se snažili koncipovat tak, aby uvedený orientační čas vhodný pro studium nepřesáhl dobu, po kterou je student schopen udržet svou soustředěnou pozornost. Časové náročnosti uvedené na začátku každé kapitoly zahrnují i dobu řešení úkolů a otázek průběžně uváděných v textu. Uvedený čas je orientační a slouží spíše jako vodítko pro rozvržení studia dané kapitoly. 6

7 Postup při studiu Základy práce s html 1.3 Orientace v textu Aby byla orientace ve studijním textu co nejvíce usnadněna, je struktura všech kapitol jednotná, důležité termíny vysvětlované v textu jsou pro Vás označeny tučně. Navíc jsou jednotlivé oddíly vyznačeny těmito ikonami: Časová náročnost kapitoly. Stručné vymezení cílů studia dané kapitoly. Stručné shrnutí obsahu právě prostudované kapitoly. Zvýraznění části textu, která přináší podstatnou informaci. Zajímavý tip nebo praktický poznatek pro čtenáře. Varování. Poznámka rozšiřující základní text o zajímavou informaci. Otázka nebo úkol. 7?

8 Odpověd nebo řešený příklad. Úspěšné a příjemné studium tohoto modulu Vám přeje Daniela Ďuráková 8

9 Orientace v textu Princip WWW stránek Kapitola 2 Základy práce s html Časová náročnost kapitoly: 60 minut Cíl kapitoly: V této kapitole se dozvíte jaký je princip fungování WWW stránek, jak vytvořit vlastní WWW stránku ve formě HTML dokumentu, jak tuto vytvořenou stránku zpřístupnit uživatelům Internetu. 9

10 Základy práce s html WWW stránky 2.1 Princip WWW stránek Elektronická pošta a poskytování informací pomocí WWW stránek patří dnes mezi běžné komunikační techniky. World Wide Web (WWW) patří k nejvyužívanějším službám počítačové sítě Internet. Umožňuje prezentaci informací pomocí grafického rozhraní. Informace jsou uloženy ve formě WWW stránek, které mají formát textových dokumentů rozšířených o odkazy na části dokumentů, jiné dokumenty, obrázky, zvukové sekvence, videosekvence ap. Nicméně to nejdůležitější, co WWW umožňuje, je nezávislost na platformě, která je pro zobrazení použita. Zvolená stránka se zobrazí jak na počítači pracujícím pod operačním systémem Windows, tak i na počítači pracujícím po UNIXem, případně Linuxem. Proto jsou Vaše vytvořené dokumenty přístupné celému světu (na Internetu). Dokumenty jsou vytvářeny pomocí speciálního jazyka HyperText Markup Language (HTML), který používání odkazů na jiné části dokumentu či jiné dokumenty umístěné kdekoliv na Internetu umožňuje. Propojení dokumentů mezi sebou vytváří pomyslnou pavučinu, což vystihuje anglické označení web. Pro prezentaci dokumentů vytvořených v HTML se používají prohlížeče, které umožňují zobrazit WWW stránku v grafické podobě. Soubory vytvořené pomocí jazyka HTML mají typicky příponu.html, případně.htm. 10

11 Princip WWW stránek Doporučení pro tvorbu WWW stránek 2.2 WWW stránky První způsob vytvoření vlastních WWW dokumentů je zvládnutí zápisu pomocí HTML jazyka. Potřebujeme k tomu následující čtyři prvky. 1. Editor, který umí pracovat s čistým ASCII textem, nebot HTML dokumenty jsou obyčejné textové soubory. V prostředí operačního systému Windows postačí notepad. 2. Znalost jazyka HTML, schopné vytvořit zdrojový kód ve formátu HTML. 3. Prohlížeč, který nám umožní kontrolu vytvořených WWW stránek (momentálně mezi nejpoužívanější patří Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla). 4. Připojení k síti internet, pokud chceme WWW stránky zpřístupnit ostatním uživatelům internetu. možnost tvorby WWW dokumentu, je použití tzv. WYSIWYG editorů (WY- SIWYG - What You See Is What You Get). Takový editor umožňuje jednoduše psát text, měnit fonty, jejich velikost, vkládat obrázky, tabulky. Výsledný text je však uložen ve formátu HTML. Navíc během editace se stránka zobrazuje přibližně tak, jak bude zobrazena v prohlížeči. Mezi nejznámější WYSIWYG editory patří Front Page, Dream Weaver či Netscape Composer. Podobnou možnost nabízí i MS Word, jen při uložení dokumentu si musíte vynutit uložení ve formátu HTML. Při tomto způsobu tvorby WWW dokumentu a jeho dalšího udržování (změny textu a odkazů) mohou nastat problémy, které jsou způsobeny konverzí formátu.doc do.html. Jednodušší tvorba textu (bez znalosti HTML) je ovšem zaplacena přidáním množstvím zbytečných informací, které mohou nepříznivě ovlivnit načítání stránky a údržbu stránek, nebot se ve zdrojovém textu velmi špatně dohledávají případné chyby. 11

12 WWW stránky První HTML stránka Doporučení pro tvorbu WWW stránek Důležité je uvědomit si, že zdrojový text je dobré kontrolovat prohlížečem ne vždy se splní naše očekávání a je lépe chyby opravovat za pochodu, než je vyhledávat až po dopsání celého dokumentu. Rozpracované WWW stránky, budeme kontrolovat následujícím způsobem: zpracovávaný text průběžně ukládáme na lokální disk (případně na jiné pamět ové médium), pro zobrazení použijeme prohlížeč v režimu Otevřít soubor. Pro jednoduchost nebudeme k WWW stránce přistupovat prostřednictvím sít ových služeb, ale soubor budeme načítat přímo z disku. Vytvořený text je vhodné zkontrolovat ve více prohlížečích. Nejpoužívanější MS Explorer přehlíží mnohé prohřešky ve zdrojových textech HTML a zobrazí i některé špatně zapsané formulace. Pokud si pak takový text zobrazíte v jiném prohlížeči, může dojít k jeho odlišnému zobrazení (často až nečitelnému). Při tvorbě webových stránek je dobré si uvědomit několik maličkostí: Jedna stránka by neměla obsahovat příliš souvislého textu bez nadpisu a obrázků, či jiných prvků pro členění textu, není vhodné vystavovat stránky s informací, že se teprve připravuje či že se na ní pracuje, je lépe stránku nejprve připravit a pak na ni odkazovat, stránky by měly obsahovat informace o poslední aktualizaci (některé informace ztrácejí po delším čase smysl - například konání akce před dvěmi lety), pro jednoduchou správu stránek je lépe se zpočátku vyhnout složitějším prvkům, kterým úplně nerozumíte. 12

13 Doporučení pro tvorbu WWW stránek Používání značek 2.3 První HTML stránka První text vytvoříme v textovém editoru Notepad. Formátovací značky (obvykle se používá označení tag), které do textu vkložíme, zajistí textu určitý význam. Tím je zajištěna interpretace textu použitým prohlížečem. Jak budeme postupovat při tvorbě WWW dokumentu? Postupně vykonáme popsané kroky a tím vytvoříme jednoduchou stránku. 1. Otevřeme notepad. 2. Napíšeme zdrojový kód WWW dokumentu. 3. Uložíme na lokální disk s příponou.html. (Někdy vzniká problém s koncovkou.txt, kterou notepad automaticky přidává. Při ukládání HTML souboru je nutné změnit kolonku Save As Type na All Files a pak můžete napsat jméno souboru správně i s koncovkou.html. ) 4. Otevřeme prohlížeč. 5. Zvolíme menu Soubor(File)/Otevřít soubor(open File). 6. Doplníme požadovanou cestu k právě uloženému dokumentu a potvrdíme tlačítkem Otevři(Open). 7. Přepneme do okna prohlížeče a zkontrolujeme, jak stránka vypadá. Zkuste si napsat první jednoduchou stránku a zobrazit ji v prohlížeči. Řešení je také uloženo v souboru prvni.html, na serveru rccv.vsb.cz.? <TITLE>První HTML stránka</title> <H1>Nadpis první úrovně</h1> <P>První odstavec obsahuje...</p> <P>V druhém odstavci se popisuje...</p> 13

14 Napíšeme-li tento text, dostaneme jednoduchou WWW stránku, která obsahuje pouze tři typy značek jednu pro označení stránky (<TITLE>), druhou pro členění textu (<H1>) a třetí pro odsazení nového odstavce (<P>). Značky ve většině případů fungují jako závorky v matematice použijeme-li levou závorku, patří sem všechno až po ukončení pravou závorkou (pochopitelně stejného typu). Tak jako se v matematice používá několik typů párových závorek, i zde je použito několik typů párových značek. 14

15 První HTML stránka Formální značky 2.4 Používání značek Text vytvořený pomocí jazyka HTML si můžeme představit jako skládačku. Části skládačky jsou tvořeny různými prvky, kterým říkáme elementy. Celý text je tedy tvořen řadou různých elementů, které dohromady tvoří WWW dokument podle typu použitých elementů. Každý element je speciálně označen a začleněn do struktury textu. Členění textu má určitá pravidla, která je nutno při tvorbě textu dodržovat. Stejnými pravidly se řídí i prohlížeč, který pak jednoznačně interpretuje význam jednotlivých elementů a dokáže je zobrazit odpovídajícím způsobem. Jaká pravidla pro používání tagů je nutno dodržovat? Při použití levého (počátečního) tagu ve tvaru <xxx> je nutné použít i pravý (koncový) tag </xxx>, v případě tzv. párového tagu. Levý tag samotný se používá například při vkládání obrázků. Konkrétní význam elementu je dán použitým tagem identifikátor elementu. Text mezi počátečním a koncovým tagem daného typu tvoří tělo elementu. Identifikátory elementů mohou být psány malými i velkými písmeny. Zápisy ve tvaru <TITLE>, <TiTlE>, <title> i <title> prohlížeč chápe a interpretuje stejně. Na začátku tagu nesmí být mezera! Například < title> je špatně! Tagy, které prohlížeč nezná, ignoruje. Nehlásí žádnou chybu! Pokud používáte MS Windows, znak < je možné napsat (bez přepnutí klávesnice na anglickou) stiskem kláves pravý Alt + <, znak > stiskem kláves pravý Alt + >. Princip členění dokumentu je ilustrován na obrázku 2.1, který ukazuje některé elementy naší první stránky. Použité tagy označují následující elementy: 1. <TITLE> - název stránky, zobrazuje se jako titulek okna prohlížeče (doporučuje se maximálně 64 znaků), 15

16 2. <H1> - nadpis první úrovně, 3. <P> - oddělovač pro nový odstavec. Je výhodné pro tagy používat jednotné označení (například <TITLE>), které je odliší od ostatního textu. Záleží na tvůrci textu. 16

17 Používání značek Struktura dokumentu Formální značky Zobrazení stránky z předchozího příkladu bude stejné, vložíme-li do textu ještě formálně vyžadované tagy. Většina prohlížečů totiž toleruje neuvedení formálních tagů, nicméně jejich použití zajišt uje efektivnější zobrazení stránky, navíc některé prohlížeče to vyžadují. Zkuste se podívat na zdrojový kód některé webové stránky a najít formální tagy. Rozšiřte svou první pokusnou stránku o formální tagy. První stránka s formálními tagy.? <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > <HTML> <HEAD> <TITLE>První HTML stránka</title> </HEAD> <BODY> <H1>Nadpis první úrovně</h1> <P>První odstavec obsahuje... <P>Druhý odstavec popisuje... </BODY> </HTML> Mezi nepárové tagy patří i <P>. Prohlížeč dokáže rozpoznat ukončení odstavce a proto není nutné pro ukončení použít koncový </P>. Nově přidané tagy mají následující význam: 1. <!DOCTYPE...> - se používá pro dosažení kompatibility s SGML a obsahuje identifikaci použité verze HTML, 2. <HTML> - ohraničuje celý WWW dokument, 3. <HEAD> - záhlaví dokumentu (pomocné informace, které nejsou zobrazovány v okně prohlížeče), 17

18 4. <BODY> - ohraničuje tělo dokumentu (informace obsažené v tomto elementu jsou předmětem zobrazení v prohlížeči). SGML - metajazyk, který slouží k definování značkových jazyků (například HTML). 18

19 PSfrag replacements HTML dokument HEAD První HTML stránka BODY H1 Nadpis první úrovně P První odstavec obsahuje... P Druhý odstavec popisuje.... P Poslední odstavec... Obrázek 2.1: Hierarchické členění HTML dokumentu. HTML text je obyčejný text obalený formátovacími značkami (tagy). Tagy určují, jak bude text zobrazen, dělají z něj jakousi skládačku. Je možné si jej představit jako šuplík plný různě velkých krabiček s různorodým obsahem. Každá krabička je na první pohled rozeznatelná od ostatních svým označením (tagem) pro konkrétní obsah krabičky (elementu). 19

20 Formální značky Umístění WWW stránek v rámci Internetu Struktura dokumentu Vytvářený dokument je logicky členěn podle obsahu, podle kontextu obsažených informací, případně z hlediska účelu dalšího použití. Logické členění textu je tvořeno dvěmi základními prvky nadpisy a odstavci, případně dalšími strukturami jako jsou seznamy, tabulky apod. Členění dokumentu do větších celků je možné díky šesti úrovní nadpisů. Úroveň 1 je nejvyšší a úroveň 6 je nejnižší. Nadpisy jsou zobrazovány větším a tučnějším písmem, od vyšší úrovně směrem k nižší se písmo obvykle zmenšuje. Zápis elementu nadpis vypadá takto: <Hn> text nadpisu </Hn>, kde n nahradíme podle úrovně nadpisu číslem. Je dobré pro prvně použitý nadpis použít úroveň 1 a postupně v dalším členění snižovat použité úrovně nadpisů. Obvykle je nadpis první úrovně totožný s názvem (titulem) stránky. V případě, že celý dokument je členěn do kapitol (a tím je také uložen ve více souborech), je vhodné, aby nadpis první úrovně odpovídal názvu kapitoly. Název je pak obvykle složen z několika částí, které dokument jasně řadí mezi ostatní související dokumenty. Odstavce se v HTML vyznačují pomocí tagu <P> v místě jeho začátku. Uzavírací tag </P> nemusí být uveden, prohlížeče jsou většinou schopny jej doplnit samy. Odstavce mohou být oddělovány i několika prázdnými řádky, je to vhodné pro lepší přehlednost zdrojového textu. Prohlížeče nahrazují více za sebou následujících mezer jedinou mezerou. Velikost odstavce/ců, stejně jako délka řádku/ů se odvíjí od velikosti okna prohlížeče. Při změně velikosti okna je text přeformátován. V případě, že vyžadujeme zalomení řádku, použijeme tag <BR>. Ten si vynutí zalomení řádku na místě uvedeného tagu. Prohlížeč pak následující text zobrazí na dalším řádku. 20

21 Struktura dokumentu Uložení WWW stránky 2.5 Umístění WWW stránek v rámci Internetu Pokud chceme vytvořené WWW stránky zpřístupnit, je nutné umístit je na počítač, který je součástí internetu. To samo o sobě by nestačilo. Pro zobrazení WWW stránek je nutné mít zajištěné služby, které podporují jejich zpřístupnění. Zajišt ují přenesení obsahu (spíše kopie) HTML stránky z počítače (serveru), na němž jsou umístěny, na počítač, kde budou zobrazovány. V případě HTML stránek je tato služba nejčastěji zajištěna pomocí protokolu HTTP. Na naší škole jsou pro studenty tohoto modulu vytvořeny odpovídající podmínky na webovém serveru rccv.vsb.cz. Pro každého uživatele je zde připraven adresář public html, do kterého je nutné vytvořené soubory WWW stránek uložit. Úvodní stránku je vhodné uložit do souboru, který má název index.htm nebo index.html a pomocí odkazů umístěných v ní se v prohlížeči bude možné dostat k ostatním částem dokumentu. Každý uživatel má své stránky umístěny ve svém domovském adresáři v podadresáři s názvem public html. Ke svému adresáři pak přistupuje přes URL loginname. Pozor na přístupová práva ve filesystému! Pro prezentaci je nutné takové nastavení, aby soubory mohli číst i jiní uživatelé Internetu. V případě problémů je nutné se poradit se správcem serveru. 21

22 Umístění WWW stránek v rámci Internetu URL a odkazy Uložení WWW stránky Vaše soubory s webovou prezentací uložíme na server homel.vsb.cz. Tím bude také zajištěna její prezentace v rámci Internetu. Každý uživatel má své stránky umístěny ve svém domovském adresáři public html. Ke svému adresáři pak přistupuje přes URL loginname. Upozornění: Pozor na přístupová práva na filesystému. Je na vlastníku adresáře, jak nastaví práva ke svým souborům. Pro prezentaci je nutné, aby soubory mohli číst i jiní uživatelé Internetu, což v prostředí serveru homel.vsb.cz je možné nastavit posloupností příkazů: > chmod go+x > chmod go+x /public_html > chmod -R a+r /public_html Soubor, který se implicitně bere jako hlavní v adresáři by měl mít jedno z následujících jmen: index.html, index.htm nebo index.php pro případ dynamických stránek. Názvy souborů, které jsou zobrazovány implicitně, jsou dány konfigurací daného serveru. 22

23 Uložení WWW stránky URL 2.6 URL a odkazy Zachycení vztahů mezi dokumenty či částmi jednoho dokumentu (at už textu, obrázky, videosekvencemi,...) je významným znakem HTML. Některé elementy WWW stránky fungují jako takzvané linky odkazy na jiné stránky. Odkaz funguje následujícím způsobem: kliknutí myši na takovém místě znamená odskok na nové místo v dokumentu nebo jinou stránku. Odkaz poznáme tak, že je podtržen (ve většině textů) či zarámečkován (v případě obrázku). Navíc, pohybuje-li se kurzor myši nad odkazem, dojde ke změně tvaru kurzoru místo šipky se objeví ukazující ruka. Jak jsou tvořeny odkazy? Pomocí takzvaných URL adres. Každý odkaz na jiný dokument znamená určení místa v internetu, kam odkaz ukazuje a kde je patřičný dokument uložen. 23

24 PSfrag replacements HTML dokument HEAD První HTML stránka BODY H1 Nadpis první úrovně P odstavec obsahuje... Odkaz do dokumentu odstavec popisuje... Poslední odstavec... Návěští 1 Návěští 3 Odkaz na dokument Návěští 2. Obrázek 2.2: Odkazy mezi a v HTML dokumentech 24

25 URL a odkazy Relativní vs. absolutní odkazy URL URL (Uniform Resource Locator) je jednoznačná adresa v rámci internetu. Identifikuje různé zdroje, at už jdou to webovské stánky, ové adresy, soubory,... Nejčastěji se setkáte s URL v následujícím tvaru: která se skládá z několika částí. Dnes se používá i protokol https, což je stejný protokol jako http, pouze přenášená data jsou kryptována (zabezpečená). Význam jednotlivých částí je následující: http znamená typ protokolu, který zajišt uje přenos stránek umístěných na webovém serveru na počítač uživatele, je jedinečné označení (zde jméno) serveru v rámci Internetu, které je tvořeno z částí: www název serveru v rámci VŠB, vsb v rámci české domény doména vsb (Vysoká škola báňská), cz označení národní či jinak světově registrované domény (v našem případě české) /cz/vitejte/ další část URL je cesta k patřičným dokumentům, areal.htm název dokumentu. / oddělovače jednotlivých částí adresy. 25

26 URL Odkazy na určité místo dokumentu Relativní vs. absolutní odkazy Odkazy, pomocí kterých jsou propojeny různé soubory, mohou být zapsány dvěmi odlišnými způsoby. Pomocí relativního odkazu a absolutního odkazu. Existuje pravidlo, které by nám pomohlo rozhodnout se, který ze způsobů zápisu odkazu v našem dokumentu použít? Vhodné je uvědomit následující vlastní související stránky by měly používat relativní odkazy z důvodu přenositelnosti na jiný server. Odkazy na cizí zdroje a stránky by naopak měly být absolutní, aby byla zajištěna jejich funkčnost právě v případě jejich přenesení na jiný server. Tvar relativního odkazu se od absolutního liší neuvedením jména serveru stačí pouze jméno dokumentu, případně uvedení patřičného adresáře ze stromové struktury adresářů na disku, kde jsou dokumenty umístěny. Například: Absolutní odkaz na dokument a odpovídající relativní odkaz projekt01.html Pokud je soubor umístěn o úroveň výš, stačí do odkazu přidat znak pro cestu na vyšší úroveň adresáře.../projekt01.html 26

27 Relativní vs. absolutní odkazy Odkazy na určité dokumenty Odkazy na určité místo dokumentu Odkazy v rámci jednoho dokumentu se používají hlavně v případě, kdy je dokument dlouhý. Je vhodné se odkazovat nejen na celý dokument, ale i na jeho jednotlivé části. Například v případě, že dokument je členěn na více kapitol, je vhodné umístit na začátek dokumentu seznam kapitol s možností odskočit na jednotlivé kapitoly. Odkazy jsou definovány pomocí elementu <A> (anchor, angl. kotva) a odpovídajících atributů. Pro odkaz uvnitř dokumentu je to parametr NAME. Atribut NAME umožňuje označit určitou část dokumentu návěštím, na které se pak dá odkazovat z libovolného místa stejného dokumentu či jiného dokumentu. Návěstí je definováno: 1. nejprve začátek tagu <A (následuje povinná mezera) 2. jméno návěstí, kam bude směřovat odkaz NAME= jméno návěstí > 3. text, který bude návěstím označen 4. definice návěstí končí tagem </A>. Například <A HREF= #aaa >aaa návěstí</a>. Odkaz na nějakou část v rámci téhož dokumentu s relativní URL:... odkaz v rámci tohoto dokumentu <A HREF= #aaa >aaa návěstí</a> a odkaz na návěstí v jiném dokumentu s připojeným fragmentem (což je jméno návěstí doplněné zepředu o znak # ) za názvem dokumentu s tímto návěštím:... odkaz na místo bbb v jiném dokumentu: <A HREF= > Budoucnost</A> Část souboru druhy.html bude nutně obsahovat definici návěští: 27

28 ... <A NAME= bbb >Budoucnost</A> <P> V blízké budoucnosti firma SME vybuduje... Ukázka takového případu je uvedena v souboru odkaz in.html. 28

29 Odkazy na určité místo dokumentu Formátování stránky Odkazy na určité dokumenty K vytvoření odkazu na jiný dokument se používá element <A> s parametrem HREF a jeho zápis vypadá takto: 1. Začátek tagu <A (následuje povinná mezera) 2. URL dokumentu (nebo jiného zdroje), kam se chceme odkazovat, čili HREF= URL > 3. text, který se zobrazí jako odkaz (většinou se zobrazuje podtržený a kliknutím na něj se odkaz aktivuje) 4. ukončíme tagem </A>. Odkaz vytvořený uvnitř textu nějakého dokumentu:... informace o naší firmě najdete na serveru <A HREF= >SME</A>. Naleznete zde i informace o kontaktních adresách na jednotlivá pracoviště.... V prohlížeči se bude zobrazovat takto: informace o naší firmě najdete na serveru SME. Naleznete zde i informace o kontaktních adresách na jednotlivá pracoviště. Ukázka tohoto typu odkazu je uvedena v souboru odkaz sme.html. Při specifikaci cesty v URL se k oddělování jednotlivých adresářů používá lomítko / jako v UNIXu (na rozdíl od DOSu nebo Windows). Například: 29

30 Důležité je při zápisu URL rozlišovat malá a velká písmena, nebot většina serverů pracuje pod operačními systémy UNIX, kde jsou rozlišovány. (Windows NT velikost písmen sice také rozlišují, ale při vyhledávání souborů ji ignorují). V zápisu URL je vhodné nepoužívat české fonty a mezery, nebot dochází k jejich překódování. Adresu pak není možné vůbec zobrazit. 30

31 Shrnutí kapitoly: Princip WWW stránek a požadavky pro jejich tvorbu. Základní tagy pro tvorbu stránek. Struktura webového dokumentu. Umístění stránek na internetu. URL a odkazy. 31

32 Odkazy na určité dokumenty Seznamy Kapitola 3 Formátování stránky Časová náročnost kapitoly: 60 minut Cíl kapitoly: V této kapitole se dozvíte jaké prostředky se používají pro formátování WWW stránek, jak vytvořit vlastní struktury v HTML dokumentu. jak zvýraznit určitou část textu, jak je řešena barevnost HTML dokumentu, jak umístit do HTML dokumentu obrázky. Formátování dokumentu zahrnuje celou řadu možností, které se používají k námi požadované prezentaci. Element seznam umožňuje zvýrazit určité části textu, které spolu souvisí a chceme zvýraznit členění určitých skupin informací podobné úrovně. Element tabulka člení text jak horizontálně, tak vertikálně a používáme ji tam, kde chceme stručně a přehledně zobrazit informace související křížově. zde popisované značky nám pomohou formátování dokumentu ovlivnit použitím různého písma (volbou fontu, velikostí či barvou), použitím barev nebo vložením obrázků. 32

33 Formátování stránky Nečíslovaný seznam 3.1 Seznamy V HTML jsou definovány tři základní druhy seznamů: nečíslovaný, číslovaný, a definiční. 33

34 Seznamy Číslovaný seznam Nečíslovaný seznam Vytvoření nečíslovaného seznamu je definováno: 1. Začátek seznamu pomocí tagu <UL>, 2. jednotlivé položky seznamu každá položka musí být označena tagem <LI>, 3. ukončení seznamu tagem </UL>. Zkuste si vytvořit jednoduchý nečíslovaný seznam. Jednoduchý seznam by mohl vypadat takto: <UL> <LI>Transformátory <LI>Rozvodny <LI>Bloky <LI>Svorky </UL>? V prohlížeči se bude zobrazovat zhruba takto: Transformátory Rozvodny Bloky Svorky Každá položka může být i rozepsána. Text o více odstavcích stačí oddělit tagem <P>. Uvedený nečíslovaný seznam je obsažen v souboru u list.html. Při tvorbě seznamu můžeme ovlivnit tvar odrážky před každkou položkou. K dispozici jsou tři typy odrážek: (CIRCLE), (DISC), (SQUARE). Použijeme-li <UL TYPE = CIRCLE>, budou všechny položky uváděny znakem. Je možné použít jenom <LI TYPE = CIRCLE> pro jednotlivé položky. Pak bude znakem uvedena konkrétní položka včetně všech následujících až do konce seznamu (pokud je ovšem nepředefinujeme dalším <LI TYPE = ). 34

35 Nečíslovaný seznam Definiční seznam Číslovaný seznam Na rozdíl od nečíslovaného seznamu u číslovaných seznamů předchází jednotlivé položky pořadové číslo položky v seznamu. Definice seznamu je stejná jako u nečíslovaných seznamů, tag pro číslovaný seznam je <OL> a </OL>. Vytvořený jednoduchý nečíslovaný seznam přepište na číslovaný. Výsledek by měl vypadat takto:? <OL> <LI>Transformátory <LI>Rozvodny <LI>Bloky <LI>Svorky </OL> V prohlížeči se bude zobrazovat zhruba takto: 1. Transformátory 2. Rozvodny 3. Bloky 4. Svorky Ukázka číslovaného seznamu je uvedena v souboru o list.html. Podobně jako u nečíslovaného seznamu i u číslovaného můžeme pomocí TYPE ovlivnit způsob číslování i počáteční hodnotu v seznamu (například začneme číslem 6) užitím <OL TYPE = hodnota START = 6 >. 35

36 Číslovaný seznam Tabulky Definiční seznam Definiční seznam se na rozdíl od předchozích používá tehdy, když chceme do dokumentu zařadit například slovníček s vysvětlivkami jednotlivých termínů. Vytvoření nečíslovaného seznamu je definováno: 1. Začátek seznamu pomocí tagu <DL>, 2. před každý termín v seznamu napíšeme tag <DT>, 3. mezi termín a jeho definici vložíme tag <DD>, 4. body 2. a 3. se použijí opakovaně pro každý termín, 5. ukončení seznamu tagem </DL>. Rozšiřte vytvořený jednoduchý seznam o definice jednotlivých pojmů. Stručná definice jednotlivých pojmů z předchozího seznamu by mohla vypadat takto:? <DL> <DT>Transformátory <DD>V transformátorech jsou uloženy... <DT>Rozvodny <DD>Rozvodny jsou stavby malého i většího... <DT>Bloky... </DL> V prohlížeči se zobrazí následovně: Transformátory V transformátorech jsou uloženy... Rozvodny 36

37 Rozvodny jsou stavby malého i většího... Bloky... Seznamy do sebe mohou být libovolně vnořovány. 37

38 Definiční seznam Písmo, kódování 3.2 Tabulky Tabulka se do stránky vkládá pomocí elementu <TABLE>. Jednotlivé buňky tabulky se zapisují po řádcích. Každý řádek tabulky je ohraničen tagy <TR> a </TR>. Jednotlivé buňky v řádku jsou ohraničeny tagy <TD> a </TD> pro normální buňky nebo <TH> a </TH> pro buňky v hlavičce tabulky. Vymyslete si tabulkovou reprezentaci Vašich údajů a vytvořte jednoduchou dvousloupcovou tabulku. Příklad tabulky:? <TABLE> <TR> <TH>Dráty</TH> <TH>Délka</TH> </TR> <TR> <TD>Tlusté</TD> <TD>2 km</td> </TR> <TR> <TD>Střední</TD> <TD>9 km</td> </TR> <TR> <TD>Tenké</TD> <TD>11 km</td> </TR> </TABLE> Zobrazení uvedené tabulky v prohlížeči: Dráty Tlusté Střední Tenké Délka 2 km 9 km 11 km 38

39 Tabulky se mohu zvýraznit orámečkováním, když použijeme v tagu <TABLE> atribut BORDER. Změňte tabulkovou reprezentaci Vašich údajů tak, aby vytvořená tabulka obsahovala zvýrazněný rámeček. Příklad tabulky s jednoduchým rámečkem:? <TABLE BORDER> <TR> <TH>Dráty</TH> <TH>Délka</TH> </TR> <TR> <TD>Tlusté</TD> <TD>2 km</td> </TR> <TR> <TD>Střední</TD> <TD>9 km</td> </TR> <TR> <TD>Tenké</TD> <TD>11 km</td> </TR> </TABLE> Zobrazení tabulky se v prohlížeči změní takto: Dráty Tlusté Střední Tenké Délka 2 km 9 km 11 km Při práci s tabulkami je možné řídit pomocí dalších atributů šířku orámování, umístění textu v buňce, velikost mezer mezi buňkami tabulky, vnořovat tabulky do sebe, apod. Velikost buněk tabulky je určována automaticky. Nechceme-li rozdělit jednu buňku do více řádků, použijeme atribut NOWRAP při definici hodnoty buňky <TD NOWRAP>. Tabulky se často používají při členění celé webové stránky. Celá stránka se nadefinuje jako jediná tabulka. Jednotlivé elementy stránky se pak podle potřeby rozmístí po celé ploše stránky 39

40 Tabulky Obrázky 3.3 Písmo, kódování Změna písma v textu se používá hlavně v případech, kdy chceme určitou část textu odlišit. Existují dva způsoby, jak toho docílit. Logickým označením textu je část textu označená podle svého významu (například citace, kód programu, zvýraznění,...). Fyzickým označením textu rozumíme určitý úsek textu, který chceme změnit tak, že mu přiřadíme jednoznačný vzhled použijeme námi definovaný typ písma, velikost,... Změnu písma si předvedeme ovlivněním velikosti písma pomocí atributu SIZE v elementu <FONT>. Velikost lze zadat absolutně číslem (1-7) nebo relativně (pomocí znamének + a - před číslem). Velikost písma se pak určí přímo nebo přičtením (+) či odečtením (-) zadaného čísla od základní velikosti nastavené elementem <BASEFONT>. Napište si zkušební text tak, aby byla patrná změna velikosti písma. Příklad změny písma:? Zkušební text základní velikosti. <FONT SIZE=-2>Relativně zmenšený text o dvě.</font> <BASEFONT SIZE=5> Zvětšený text absolutně - zadanou hodnotou. <BASEFONT> a absolutní hodnota elementu <FONT> se nevztahuje na nadpisy. Změnu velikosti písma jen o jednu jednotku můžeme také udělat uvedením tagů <SMALL> nebo <BIG>.... <FONT SIZE=-1> zmenšený text o jednu </FONT> <FONT SIZE=+1> zvětšený text o jednu </FONT>... Stejným způsobem se zobrazí 40

41 ... <SMALL> zmenšený text o jednu </SMALL> <BIG> zvětšený text o jednu </BIG>... Ukázka změny velikosti písma je uvedena v souboru font size.html. 41

42 Písmo, kódování Doporučení pro práci s obrázky 3.4 Obrázky Služba WWW způsobila změnu v rozhraní, které bylo do doby, než vznikla, tvořeno znakovými terminály. Použití grafiky ve WWW dokumentech vedlo k úspěchu webu. Vkládání obrázků vyžaduje vhodný formát vkládaného obrázku. Prohlížeče jsou schopny zobrazit obrázky ve formátech GIF (Graphics Interchange Format) JPEG PNG (Portable Network Graphics), který byl navržen pro WWW. Vložení obrázku do WWW dokumentu zajišt uje nepárový element IMG s parametrem SRC, který musí obsahovat URL obrázku. Je vhodné soubor s obrázkem uložit do stejného adresáře jako WWW dokument, pak stačí napsat pouze relativní URL název souboru s obrázkem. Vložení obrázku je definováno takto: <TITLE>První HTML stránka s obrázkem</title> <H1>První kapitola o obrázcích</h1> <P>V prvním odstavci uvádíme obrázek uložený ve stejném adresáři jako je tento dokument s použitím relativní adresy <IMG SRC= sme.gif >... <P>Ve druhém odstavci je vložen obrázek s URL adresou na jiné místo na internetu <IMG SRC= sme.gif >... 42

43 Ukázka vložení obrázku je uvedena v souboru obr.html. V případě, že by někteří uživatelé používali prohlížeč bez podpory grafiky, je možné uvést alternativní text, který se zobrazí v tomto typu prohlížeče (například Lynx). Do elementu IMG stačí přidat parametr ALT s patřičným textem. Tuto možnost využívají i uživatelé s pomalým připojením na internet - nejprve si zjistí, zda má cenu obrázek přenášet. Do některého z Vašich vypracovaných textů vložte element obrázek. Příklad první stránky s obrázkem:? <TITLE>První HTML stránka s obrázkem</title> <H1>První kapitola o obrázcích</h1> <P>V prvním odstavci uvádíme obrázek s možností náhrady pro prohlížeč nepodporující grafické prostředí <IMG SRC= sme.gif ALT= Logo SME >... Je vhodné vkládat obrázek jako samostatný odstavec. Tím si zajistíte, že obrázek bude opravdu vložen co nejvíce vlevo v daném prohlížeči. Jinak se může stát, že bude přilepen někde za textem (třeba vpravo). 43

44 Obrázky Barevnost WWW dokumentů Doporučení pro práci s obrázky Velikost vloženého obrázku ovlivňuje rychlost zobrazní stránky v prohlížeči a protože je spousta uživatelů, kteří nemají rychlé připojení k internetu, je vhodné aby obrázky byly uloženy v souborech o malé velikosti. Jak se dá velikost obrázkového souboru zmenšit? Existují dvě možnosti: snížením rozlišení, a zmenšením počtu použitých barev. Rozlišení je ovlivněno nastavením obrazovky (800 x 600, x 768, 12.. x 1 024). Obrázky o větším rozlišení, než je nastavení obrazovky, přesahují za obrazovku a tak se dají prohlédnout jedině posunem ve směru šířky či výšky. Typickým případem je digitální fotografie či obrázek pořízený skenováním. Snížení počtu barev rovněž vede ke zmenšení velikost obrázku. Poměr je zhruba následující 256 barev : HiColor : TrueColor (16 mil. barev) je zhruba. Redukce počtu barev vede k výrazným úsporám místa. Pozor ovšem na zhoršování kvality obrázku. Tyto operace umožňují různá kreslítka Adobe PhotoShop, CorelDraw, Paint- Shop Pro,... včetně možnosti uložit obrázek ve formátu vhodném pro Internet. Při definici obrázků je užitečné používat atributy WIDTH a HEIGHT. V takovém případě si prohlížeč hned při načtení stránky vyhradí místo pro obrázek a uživatel uvidí prostor, kde potenciální obrázek bude zobrazen. Pokud existuje definice obrázku <IMC SRC a obsahuje i ALT = > může se uživatel rozhodnout zda obrázek chce natáhnout či ne. Pokud nás obrázek nezajímá, stačí počkat na natažení textu a stránku zavřít. 44

45 Doporučení pro práci s obrázky Barvy pro část textu 3.5 Barevnost WWW dokumentů Vylepšení WWW dokumentů se ve většině případů tvůrci snaží pomocí barevnosti svých stránek. V HTML lze měnit barvu pozadí stránky, textu a barvu odkazů. Změna se provádí zadáním hodnoty atributů, které určují barvu - bud použitím jména barvy nebo její definicí v RGB modelu. Jména barev jsou následující: black (černá), gray (šedivá), navy (tmavá modř), blue (modrá), aqua (jasná modrozelená), teal (tmavá modrozelená), green (zelená), olive (olivová), lime (citrónově zelená), yellow (žlutá) maroon (kaštanová), fuchsia (anilínová červeň), purple (purpurová), red (červená), silver (stříbrná), white (bílá). 45

46 černá tmavá modř PSfrag replacements modrá žlutá purpurová červená anilínová červeň tmavá modrozelená zelená jasná modrozelená citrónově zelená kaštanová Obrázek 3.1: Ukázka barev 46

47 Barevnost WWW dokumentů Pozadí stránky Barvy pro část textu Pomocí elementu <FONT> lze mimo jiné také změnit barvu textu pouze pro určitou část textu. Platí to pro celou část textu umístěnou mezi tagy <FONT> a </FONT> s použitým atributem COLOR. Chceme-li například modré nadpisy: <H1><FONT COLOR=BLUE>Nadpis této stránky je modrý</font></h1> Upozornění: je nutné nekřížit jednotlivé elementy! Barvy pro celý dokument Pro celou stránku se nastavují barvy pomocí atributů tagu <BODY>. Pozadí celé stránky pomocí atributu BGCOLOR = barva je možné definovat bud předdefinovanou barvu nebo vlastní (namíchanou). Žlutý podklad dostaneme uvedením <BODY BGCOLOR=YELLOW> nebo <BODY BGCOLOR=#FFFF00>. Barva textu uvedením atributu TEXT. Pro žlutou stránku volíme kontrastní barvu písma - tmavě modrý text. <BODY BGCOLOR=YELLOW TEXT=NAVY> Barvu odkazů je možné volit zvlášt pro nenavštívené odkazy (atribut LINK), navštívené odkazy (atribut VLINK) a pro aktivní odkaz byl vybrán kliknutím myši (atribut ALINK): <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > <HTML> <HEAD><TITLE>Barevná stránka</title></head> <BODY BGCOLOR=YELLOW TEXT=NAVY LINK=AQUA ALINK=PURPLE VLINK=LIME> <H1>Barevná stránka</h1> První odkaz <A HREF= xxx >nenavštívený</a>. Na druhý odkaz jsme se již podívali, a proto je <A HREF= yyy >navštívený</a>. </BODY> </HTML> Ukázka práce s barvami je uvedena v souboru color.html. 47

48 Barvy pro část textu Pozadí stránky Kromě změny barvy pozadí stránky, je možné pozadí vytvořit pomocí nadefinováním obrázku. V případě, že obrázek nepokrývá celou stránku, opakuje se tak, aby pokryl celou plochu stránku. Pozor na vhodnou volbu vzoru kvůli přechodu mezi jednotlivými opakováními vzoru, dále kvůli čitelnosti textu a velikost obrázku. Pozadí pomocí obázku dosáhneme použitím atributu BACKGROUND v elementu BODY. <BODY BACKGROUND= waves.gif > Ukázka stránky s vloženým pozadím je uvedena v souboru backgr.html. Shrnutí kapitoly: Formátování stránky. Seznamy - číslovaný, nečíslovaný, definiční. Tabulky. Obrázky. Barevnost WWW dokumentů, fonty, pozadí dokumentu. 48