zoznamy n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
ZOZNAMY PowerPoint Presentation
Download Presentation
ZOZNAMY

Loading in 2 Seconds...

play fullscreen
1 / 51

ZOZNAMY - PowerPoint PPT Presentation


  • 125 Views
  • Uploaded on

ZOZNAMY. Ekonomická univerzita Fakulta podnikového manažmentu Katedra informačného manažmentu. Zoznamy. Jazyk HTML obsahuje niekoľko druhov zoznamov. Budeme sa zaoberať dvoma základnými: Nečíslovaný zoznam Číslovaný zoznam. Nečíslovaný zoznam.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'ZOZNAMY' - teo


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
zoznamy

ZOZNAMY

Ekonomická univerzita

Fakulta podnikového manažmentu

Katedra informačného manažmentu

zoznamy1
Zoznamy
  • Jazyk HTML obsahuje niekoľko druhov zoznamov. Budeme sa zaoberať dvoma základnými:
  • Nečíslovaný zoznam
  • Číslovaný zoznam
ne slovan zoznam
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>

parametre pre ne slovan zoznamy
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.

ne slovan zoznam1
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
slovan zoznam
Čí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.

slovan zoznam1
Číslovaný zoznam
  • Parameter START=x udáva hodnotu, od ktorej sa má číslovanie začať.
zoznamy2
Zoznamy
  • Zoznamy je možné do seba ľubovolne vkladať a vetviť.
slide9
Ú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
slide10
<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>

slide11
Ľudské telo tvorí:
  • hlava
    •  ústa
      • zuby
      • jazyk
      • ďasná
    •  nos
    •  oči
  • telo
    •  hrudník
    •  brucho
    •  chrbát
  • končatiny
    •  ruky
    • nohy
rie enie
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>

odkazy1
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
odkazy na as dokumentu
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

odkazy na as dokumentu1
Odkazy na časť dokumentu
  • Pri odkazovaní na časť dokumentu je nevyhnutné:
  • Vytvoriť samotné hyperlinky
  • Zadefinovať časť dokumentu, na ktorú budú hyperlinky odkazovať
slide17
Úloha
  • Otvorte si súbor internet.html
  • Pod hlavný nadpis vytvorte nečíslovaný zoznam
  • Položky nečíslovaného zoznamu zadefinujte ako hyperlinky.
slide18

1. krok

<UL><LH><B>Obsah stránky</B></LH><LI>Internet</LI></A><LI>Intranet</LI></A>

<LI>Extranet</LI></A>

</UL>

slide19

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>

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

odkazy na in dokumenty
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.
odkazy na in dokumenty1
Odkazy na iné dokumenty
  • Jazyk HTML pozná dva druhy odkazov:
  • Absolútne
  • Relatívne
absol tne odkazy
Absolútne odkazy
  • Je taký odkaz na zdroj, ktorý obsahuje všetky informácie potrebné na dosiahnutie zdroja.
  • Je nezávislý na svojom okolí.
absol tne odkazy1
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>

relat vne odkazy
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
relat vne odkazy pr klad
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
slide28
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>

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

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

obr zky v html
Obrázky v HTML
  • Jazyk HTML používa tri hlavné grafické formáty:
          • Formát GIF
          • Formát JPG, JPEG
          • Formát PGN
slide33
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.
slide34
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.
slide35
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í.
slide36
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 )
slide38
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
slide39
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á.
slide40
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.

slide41
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
slide42
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.
slide43
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.
slide44
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í
obr zky v html1
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”>

slide46
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.
slide47
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.
slide48
Úloha:

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

slide49
Riešenie:

<HEAD>

<TITLE>Obrázky</TITLE>

</HEAD>

<BODY>

<img src=„obrazok1.jpg">

<img src=„obrazok2.jpg">

<img src=„obrazok3.gif">

</BODY>

</HTML>

slide50
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
slide51
texttop horný okraj grafiky bude zarovnaný s horným okrajom textu na riadku
  • absmiddle stred grafiky bude zarovnaný na stred riadku
  • baseline dolný okraj grafiky bude zarovnaný na stred riadkuabsbottom dolný okraj grafiky bude zarovnaný so spodným okrajom riadku