Zoznamy
Download
1 / 51

ZOZNAMY - PowerPoint PPT Presentation


  • 121 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


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


Ú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


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


Ľ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ť


Úloha

  • Otvorte si súbor internet.html

  • Pod hlavný nadpis vytvorte nečíslovaný zoznam

  • Položky nečíslovaného zoznamu zadefinujte ako hyperlinky.


1. krok

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

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

</UL>


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>


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


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


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


  • 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


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.



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




Výhody: animácií. (len GIF89a )

  • 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


JPEG animácií. (len GIF89a )

  • 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á.


  • Dôležité: animácií. (len GIF89a )

    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.


  • Výhody: animácií. (len GIF89a )

    • 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


  • PNG animácií. (len GIF89a )

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


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


    • Výhody: podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.

      • 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 podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.

    • Jazyk HTML umožňuje vkladanie obrázkov do dokumentu pomocou príkazu <img>

      Základný syntax

      <img src=“cesta k súboru”>


    • Atribút podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.“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.


    • Pokiaľ za sebou nasleduje viacero príkazov podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.<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.


    • Úloha: podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.

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


    • Riešenie: podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.

      <HEAD>

      <TITLE>Obrázky</TITLE>

      </HEAD>

      <BODY>

      <img src=„obrazok1.jpg">

      <img src=„obrazok2.jpg">

      <img src=„obrazok3.gif">

      </BODY>

      </HTML>


    • align podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší.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


    • texttop podobný algoritmu LZW použitému v GIF. V niektorých prípadoch môže byť efektívnejší. 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


    ad