Zoznamy
This presentation is the property of its rightful owner.
Sponsored Links
1 / 51

ZOZNAMY PowerPoint PPT Presentation


  • 82 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

ZOZNAMY

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


Zoznamy

Ú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


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>


Zoznamy

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


Odkazy

ODKAZY


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ť


Zoznamy

Úloha

  • Otvorte si súbor internet.html

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

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


Zoznamy

1. krok

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

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

</UL>


Zoznamy

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>


Zoznamy

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


Zoznamy

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


Zoznamy

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


Zoznamy

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


Grafika v html

Grafika v HTML


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


Zoznamy

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.


Zoznamy

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


Zoznamy

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


Zoznamy

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


Zoznamy

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


Zoznamy

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


Zoznamy

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


Zoznamy

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


Zoznamy

  • 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


  • Zoznamy

    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.


    Zoznamy

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


    Zoznamy

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


    Zoznamy

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


    Zoznamy

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


    Zoznamy

    • Úloha:

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


    Zoznamy

    • Riešenie:

      <HEAD>

      <TITLE>Obrázky</TITLE>

      </HEAD>

      <BODY>

      <img src=„obrazok1.jpg">

      <img src=„obrazok2.jpg">

      <img src=„obrazok3.gif">

      </BODY>

      </HTML>


    Zoznamy

    • 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


    Zoznamy

    • 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


  • Login