ZOZNAMY

1. ZOZNAMY

2. Zoznamy • Jazyk HTML obsahuje niekoľko druhov zoznamov. Budeme sa zaoberať dvoma základnými: • Nečíslovaný zoznam • Číslovaný zoznam

3. Nečíslovaný zoznam • Nečíslovaný zoznam definuje párový tag <UL>..…</UL> • Názov zoznamu sa definuje pomocou tagov <LH>….</LH> • Položky zoznamov sú opísané pomocou príkazov: <LI>….</LI>

4. Parametre pre nečíslované zoznamy • Pre tag UL a LI je možné použiť parameter TYPE=square (štvorec) TYPE=disc (kruh) TYPE=circle (kružnica) Parameter zadaný pre tag UL je definíciou pre celý zoznam. Parameter tagu LI ovplyvní len jednu položku zoznamu.

5. Nečíslovaný zoznam Zdrojový kód: <UL TYPE=disc> <LH>Zoznamy v HTML</LH> <LI>Číslované zoznamy</LI> <LI TYPE=circle>Nečíslované zoznamy</LI> </UL> Vytvorí zoznam: Zoznamy v HTML • Číslované zoznamy • Nečíslované zoznamy

6. Číslovaný zoznam Číslovaný zoznam používa namiesto tagu UL tag OL. • Parameter TYPE môže mať hodnoty TYPE=A - číslovanieveľkými písmenami A,B,C,D atd. TYPE=a - číslovaniemalými písmenami a,b,c,d atd. TYPE=I - číslovanieveľkýmirímskymi číslicami I, II, III VI atd. TYPE=i - číslovaniemalýmirímskymi číslicami i, ii, iii, vi atd. TYPE=1 – číslovanie latinskými číslicami 1, 2, 3, 4 atd.

7. Číslovaný zoznam • Parameter START=x udáva hodnotu, od ktorej sa má číslovanie začať.

8. Zoznamy • Zoznamy je možné do seba ľubovolne vkladať a vetviť.

9. Úloha: Vytvorte v HTML zoznam: Zoznamy v HTML • Nečíslované zoznamy • Položky odlíšené kružnicou • Položky sú odlíšené kruhom • Položky sú odlíšené štvorcom • Číslované zoznamy • Položky sú odlíšené veľkými písmenami • Položky sú odlíšené malými písmenami • Atď • Kombinované zoznamy

10. <OL TYPE=1. > <LH>Zoznamy v HTML</LH> <LI>Nečíslované zoznamy</LI> <UL> <LI TYPE=circle>Položky odlíšené kružnicou</LI> <LI TYPE=disc>Položky odlíšené kruhom</LI> <LI TYPE=square>Položky odlíšené štvorcom</LI> </UL> <LI>Číslované zoznamy</LI> <OL> <LI TYPE=A>Položky odlíšené veľkými písmenami</LI> <LI TYPE=a>Položky odlíšené malými písmenami</LI> <LI TYPE=a>Atď</LI> </OL> <LI>Kombinované zoznamy</LI> </OL>

11. Ľudské telo tvorí: • hlava •  ústa • zuby • jazyk • ďasná •  nos •  oči • telo •  hrudník •  brucho •  chrbát • končatiny •  ruky • nohy

12. Riešenie <LI>telo UL><LI>hrudník <LI>brucho <LI>chrbát </UL> <LI>končatiny <UL><LI>ruky <LI>nohy </UL> </UL> Ľudské telo tvorí: <UL><LI>hlava <UL><LI>ústa <UL><LI>zuby <LI>jazyk <LI>ďasná </UL> <LI>nos <LI>oči </UL>

13. ODKAZY

14. Odkazy • Hypertextové odkazy sú základom jazyka HTML. Umožňujú v rámci jedného dokumentu odskakovať buď na jeho časti, alebo otvárať iné dokumenty. • Odkazy budeme členiť na odkazy v rámci jedného dokumentu a na odkazy na iné dokumenty

15. Odkazy na časť dokumentu • V dlhom dokumente je užitočné, ak je na začiatku uvedený obsah. Kliknutím na položku zoznamu je možné sa presunúť na zodpovedajúcu časť dokumentu • Hypertextové odkazy sú definované tagom <A> Z angl. Anchor – kotva

16. Odkazy na časť dokumentu • Pri odkazovaní na časť dokumentu je nevyhnutné: • Vytvoriť samotné hyperlinky • Zadefinovať časť dokumentu, na ktorú budú hyperlinky odkazovať

17. Úloha • Otvorte si súbor internet.html • Pod hlavný nadpis vytvorte nečíslovaný zoznam • Položky nečíslovaného zoznamu zadefinujte ako hyperlinky.

18. 1. krok <UL><LH><B>Obsah stránky</B></LH><LI>Internet</LI></A><LI>Intranet</LI></A> <LI>Extranet</LI></A> </UL>

19. 2. krok <UL><LH><B>Obsah stránky</B></LH><A HREF="#internet"><LI>Internet</LI></A><A HREF="#intranet"><LI>Intranet</LI></A> <A HREF="#extranet"><LI>Extranet</LI></A> </UL>

20. DRUHÁ ČASŤ: <A NAME=“internet”> <center><B><H4>INTERNET</h4></B></center></A>nakopírujte 40 x tak <BR> <A NAME=“intranet”> <center><B><H4>INTRANET</h4></B></center></A>nakopírujte 40 x tak <BR> <A NAME=“extranet”> <center><B><H4>ExtraNET</h4></B></center></A>nakopírujte 40 x tak <BR>

21. Odkazy na iné dokumenty • Pre jednoznačné stanovenie umiestnenia informácie, či už súboru, alebo dokumentu bol pre internet vytvorený URL (Uniform Resource Locator) • Jeho tvar bol navrhnutý tak, aby bol použiteľný pre čo najviac sieťových služieb od emailu až po dokumenty WWW.

22. Odkazy na iné dokumenty • Jazyk HTML pozná dva druhy odkazov: • Absolútne • Relatívne

23. Absolútne odkazy • Je taký odkaz na zdroj, ktorý obsahuje všetky informácie potrebné na dosiahnutie zdroja. • Je nezávislý na svojom okolí.

24. Absolútne odkazy • príklady absolútnych odkazov: <a href="http://www.zoznam.sk"> www.zoznam.sk</a> <a href="C:/Moje dokumenty/prva.html">prva.html</a>

25. Relatívne odkazy • relatívny odkaz neobsahuje kompletnú cestu. • štartovým bodom pre relatívny odkaz je adresár súboru, s ktorým pracujete. • do adresárov, ktoré sú hierarchicky nadradené sa prepíname pomocou “../” • do podadresárov sa dostaneme vypísaním mena podadresára

26. Relatívne odkazy - príklad • Na počítači vytvárame html dokument, ktorý je uložený na pevnom disku “C:/“ v adresári Moje dokumenty s názvom stranka.html • Budeme v ňom chcieť spraviť relatívne odkazy na súbory: • stranka2.html • stranka3.html • stranka4.html

28. Odkaz na súbor stranka2.html • súbor sa nachádza v tom istom adresári, takže stačí napísať len meno súboru <A HREF=“stranka2.html”>Odkaz na stránku 2</A>

29. Odkaz na súbor stranka3.html - súbor sa nachádza v adresári c:/webstránka Pri odkazovaní sa musíme najprv prepnúť do nadradeného adresára a potom do adresára webstranka. <A HREF=“../webstranka/stranka3.html”> Odkaz na stránku 3</A>

30. Odkaz na súbor stranka4.html • súbor sa nachádza v adresári c:/webstránka/podadresar Pri odkazovaní sa musíme najprv prepnúť do nadradeného adresára a potom do adresára webstranka2 a potom do adresara podadresar <A HREF=“../webstranka2/podadresar/stranka4.html”> Odkaz na stránku 4</A>

31. Grafika v HTML

32. Obrázky v HTML • Jazyk HTML používa tri hlavné grafické formáty: • Formát GIF • Formát JPG, JPEG • Formát PGN

33. GIF • GIF = Graphics Interchange Format • Pochádza od firmy CompuServe z roku 1987. Vznikli dva základné varianty tohto formátu. A to GIF87a a GIF89a. • Základnou vlastnosťou je spôsob ukladania farieb. Neukladá priamo farbu jednotlivého bodu, ale používa nepriame vyjadrenie farby pomocou tvz. Palety farieb.

34. Paleta farieb je tabuľka, kde je ku každej farbe priradené číslo. • Zápis v súbore má tvar: „Tento bod je zafarbený farbou 3,ďalší farbou 5...“ • Samotná paleta je tiež obsiahnutá v súbore.

35. Používa komprimáciu pomocou algoritmu LZW firmy Unisys. Algoritmus nahradzuje opakujúce sa sekvencie bitov kratším kódom – čím častejšie je opakovanie danej postupnosti, tým kratší kód sa snaží zvoliť. • Z uvedeného vyplýva, že súvislé plochy farieb sú v GIF obrázku dobre komprimované a zväčšenie jednofarebnej plochy veľkosť výsledného súboru veľmi neovplyvní.

36. Dôležitou vlastnosťou formátu GIF je možnosť definovať priesvitnosť. Po zadefinovaní jednej z farieb na priesvitnú sa pri zobrazení vynechá. Podkladová plocha bude cez ňu presvitať.(len GIF89a )

37. Ďalšou významnou vlastnosťou GIF je možnosť animácií. (len GIF89a )

38. Výhody: • Vhodný na ostré prechody medzi farbami • Efektívna komprimácia, jednofarebné plochy zaberajú málo miesta • Vhodný pre malé obrázky • Umožňuje definovanie počtu farieb • Umožňuje priehľadnosť, prekladanie a animáciu Nevýhody: • Maximálny počet farieb je 256 • Slabý v plynulých prechodoch farieb

39. JPEG • V porovnaní s GIF má dve základné odlišnosti: • Počet farieb. JPEG umožňuje ukladať plnú grafickú informáciu na jeden bod. Preto je vhodnejší na ukladanie fotografií. • Stratovosť. Pre dosiahnutie lepšej kompresie je pôvodná grafická informácia pozmenená.

40. Dôležité: K strate grafickej informácie dochádza pri každom uložení obrázku. t.j. Formát nie je vhodný pre prácu. Výhodnejšie je uložiť si až finálnu verziu.

41. Výhody: • Vhodný pre ukladanie fotografií • Ukladá plnú farebnú informáciu • Nastaviteľná kvalita • Nevýhody: • Stratovosť/skreslenie • Nemožnosť nastavenia priehľadnosti a tvorby animácií • Neefektívny pre jednofarebné plochy a ostré prechody farieb

42. PNG • Formát PNG (PORTABLE NETWORK GRAHICS) vznikol v polovici roku 1997. Mal odstrániť nedostatky a problémy GIF (obmedzený počet farieb a patentovaný komprimačný algoritmus). Vznikol pod záštitou konzorcia WWW. • V použití farieb je veľmi univerzálny. Je možné použiť v ňom indexovanú farbu, alebo uložiť obrázok ako monochromatický alebo s plnou farebnou informáciou.

43. Používa kompresný mechanizmus delflate, ktorý je veľmi podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší. • Problém môže spôsobiť použitie formátu starším Browserom, ktoré ho dokážu zobraziť, ale nie pomocou štandartného tagu <img>. V takom prípade je lepšie použiť EMBED.

44. Výhody: • Nestratový formát • Plná farebná informácia - 24 bitov na jeden bod • Viac úrovní priehľadnosti a možnosť jej nastavenia pre každý bod • Nevýhody: • Menej známy formát, pomerne mladý • Nie je vhodný pre plnofarebné fotografie – výsledok býva veľký • Bez možnosti uloženia animácií

45. Obrázky v HTML • Jazyk HTML umožňuje vkladanie obrázkov do dokumentu pomocou príkazu <img> Základný syntax <img src=“cesta k súboru”>

46. Atribút “src” oznamuje prehliadaču, kde sa dokument nachádza. • Príkaz <img> chápe prehliadač ako akýkoľvek iný príkaz pre napísanie textu. To znamená, že obrázok nie je nijak osadený, ani umiestnený do iného odstavca.

47. Pokiaľ za sebou nasleduje viacero príkazov <img>, a medzi nimi nie je žiaden iný tag ako napr. <P> alebo <BR>, sú obrázky znázornené vo výslednom HTML dokumente vedľa seba, ak je na to dostatok miesta.

48. Úloha: Nájdite v počítači tri ľubovolné obrázky vhodné pre jazyk HTML.Vytvorte HTML dokument, ktorý obrázky znázorní.

49. Riešenie: <HEAD> <TITLE>Obrázky</TITLE> </HEAD> <BODY> <img src=„obrazok1.jpg"> <img src=„obrazok2.jpg"> <img src=„obrazok3.gif"> </BODY> </HTML>

50. align umiestnenie grafického objektu voči okoliu Možné hodnoty: • top horný okraj grafiky bude zarovnaný s horným okrajom riadku • middle stred grafiky bude zarovnaný na stred riadku • bottom dolný okraj grafiky bude zarovnaný so spodným okrajom riadku • left vodorovné umiestenie na ľavý okraj; text obteká grafiku zprava • right vodorovné umiestnenie na pravý okraj; text obteká grafiku zľava