Kapitola 1. Pokyny ke studiu. Struktura textu. rozhodl jste se studovat modul Práce s Internetem.

Transkript

1 Struktura textu Kapitola 1 Pokyny ke studiu Milý čtenáři, rozhodl jste se studovat modul Práce s Internetem. V úvodu se 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. 1

2 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). 2

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

4 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. Odpověd nebo řešený příklad. 4

5 Úspěšné a příjemné studium tohoto modulu Vám přeje Daniela Ďuráková 5

6 6

7 Orientace v textu Princip WWW stránek Kapitola 2 Základy práce s html Časová náročnost kapitoly: 45 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. 7

8 Základy práce s html Požadavky pro tvorbu a zpřístupnění WWW stránek 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. 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. 8

9 Princip WWW stránek Doporučení a zásady pro tvorbu WWW stránek 2.2 Požadavky pro tvorbu a zpřístupnění WWW stránek První způsob vytvoření vlastních WWW dokumentů je zvládnutí zápisu pomocí HTML jazyka. Potřebujeme k tomu následující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, kterou nabízí MS Word, je uložení dokumentu 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. 9

10 Požadavky pro tvorbu a zpřístupnění WWW stránek První HTML stránka Doporučení a zásady 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. 10

11 Doporučení a zásady 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. (Nevznikne tam probmlém s koncovkou.txt, kterou si tam ten blbec notepad vnutí?) 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: <TITLE>První HTML stránka</title> <H1>Nadpis první úrovně</h1> <P>První odstavec obsahuje...</p> <P>V druhém odstavci se popisuje...</p> 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. 11

12 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>. 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ě. Princip členění dokumentu je ilustrován na obrázku 2.1, který odpovídá naší první stránce. Použité tagy označují následující elementy: 1. <TITLE> - název stránky, 2. <H1> - nadpis první úrovně, 3. <P> - oddělovač pro nový odstavec. 12

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

14 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. 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> Některé tagy nemusí být párové, například u <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), 4. <BODY> - ohraničuje tělo dokumentu (informace obsažené v tomto elementu jsou předmětem zobrazení v prohlížeči). 14

15 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 vypadaá 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. 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. 15

16 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 vytvořeny odpovídající podmínky na webovém serveru homel. Pracuje pod operačním systémem linux. 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ánka bude mít název souboru 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. 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 konfiguraci serveru. 16

17 Umístění WWW stránek v rámci internetu URL a odkazy Uložení WWW stránky Následující kroky popisují, jak uložit vlastní WWW stránky do adresáře public html na serveru homel.vsb.cz z operačního systému Windows. 1. Použijeme program winscp, kde na vyžádání zadáme přihlašovací jméno (login name) a heslo. 2. Vytvoříme nový adresář public html. 3. Zkopírujeme soubor do tohoto adresáře a přejmenujeme jej dle předchozího doporučení. 4. Zkontrolujeme, zda stránka je v prohlížeči správně zobrazena uvedeme URL adresu loginname. 17

18 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ícm 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. 18

19 PSfrag replacements HTML dokument HEAD První HTML stránka BODY H1 Nadpis první úrovně P První odstavec obsahuje... Druhý odstavec popisuje... Poslední odstavec... Obrázek 2.2: Odkazy mezi a v HTML dokumentech 19

20 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 ve tvaru a skládá se z několika částí. Dnes se používá i https, což je stejný protokol, pouze přenášená data jsou kryptována. Význam jednotlivých částí je následující: http znamená typ protokolu 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. 20

21 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 HREF= > Projekt z tzd</a>... a odpovídající relativní odkaz... <A HREF= projekt01.html >Projekt </A>... Pokud je soubor umístěn o úroveň výš, stačí do odkazu přidat znak pro cestu na vyšší úroveň adresáře.... <A HREF=../projekt01.html >Projekt </A>... 21

22 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. 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>. Odkaz na nějakou část v rámci téhož dokumentu s relativní URL:... blíží se 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= > Budoucí bloky </A> Část souboru druhy.html bude nutně obsahovat definici návěští:... <A NAME= bbb >Budoucí bloky</a> <P> V blízké budoucnosti firma SME vybuduje bloky... 22

23 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 XXX. Naleznete zde i informace o kontaktních adresách na jednotlivá pracoviště. 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: Upozornění: 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í). 23

24 24

25 Odkazy na určité dokumenty Seznamy Kapitola 3 Formátování stránky Časová náročnost kapitoly: 0.5 hodiny 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ů. 25

26 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í. 26

27 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>. Příklad jednoduchého seznamu: <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>. 27

28 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>. Příklad jednoduchého číslovaného seznamu: <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 28

29 Čí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>. Příklad jednoduchého seznamu: <DL> <DT>Transformátory <DD>V montážních četách pracují... <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 uoženy... Rozvodny Rozvodny jsou stavby malého i většího... Bloky... 29

30 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. 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í tabulky v prohlížeči: Dráty Tlusté Střední Tenké Délka 2 km 9 km 11 km Tabulky se mohu zvýraznit orámečkováním, když použijeme v tagu <TABLE> atribut BORDER. 30

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

32 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 velikosti písma je možné měnit 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>. Příklad: 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í... <SMALL> zmenšený text o jednu </SMALL> <BIG> zvětšený text o jednu </BIG>... 32

33 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 >... 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 elemnetu 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. <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 >... 33

34 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, PaintShop Pro,... včetně možnosti uložit obrázek ve formátu vhodném pro Internet. 34

35 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á). 35

36 černá tmavá modř g 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 36

37 Barevnost WWW dokumentů Pozadí stránky Barvy pro část textu Pomocí elementu <FONT> lze 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> 37

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