Képek beillesztése, felsorolások.

Képek beillesztése, felsorolások.

Kép beillesztése - Az <img> tag

Ha képet szeretnél beilleszteni a HTML dokumentumodba, akkor azt az <img> vagy az <object> tagok segítségével teheted meg. Az <object> tag általános célt szolgál, videókat vagy például Java alkalmazásokat is beszúrhatsz vele az oldaladra. Az <img> tagot kifejezetten képek beillesztésére hozták létre.

Az <img> tagnak nincs zárótagja. Fontosabb attribútumai:

    src: a kép elérési útja. Ugyan úgy adható meg, mint a linkek href attribútuma.

    width: a kép szélessége.

    height: a kép magassága.

    alt: azt a szöveget tartalmazza, ami akkor jelenik meg, ha nem töltődött le a felhasználó számítógépére a kép. A HTML szabvány szerint kötelező megadni ezt az attribútumot.

    title: a kép címe. Ha az egér a kép fölött áll, akkor az itt megadott szöveget kiírják a böngészők. (Ha a title attribútum nincs megadva, akkor a Microsoft Explorer böngészők az alt attribútum értékét jelenítik meg az egér kurzor alatt.)

    id, class, style, onclick: általános attribútumok.

Leggyakrabban használt stílus tulajdonságok:

    margó (margin)

    keret stílus (border-style)

    úsztatás (float) (ha kell, akkor a clear tulajdonsággal kombinálva)

    szélesség (width), magasság (height): Ezek a stílus tulajdonságok ugyan azt a funkciót töltik be, mint az <img> tag azonos nevű attribútumai. Akkor lehet célszerű képek méreteit stíluslapon definiálni, ha egy oldalon több azonos méretű kép van beillesztve, vagy ha egy kép (például a weblapod logója) több oldalon is látható.

Példa egy kép beillesztésére:

<img src="rose.jpg" width="230" height="189"    style="float: right" alt="Egy rózsa fényképe" title="Rózsa">

Ha a képet az eredeti méretében akarod megjeleníteni, akkor a szélességet és a magasságot nem kötelező megadni, de ajánlott. A böngésző programok a HTML fájlod letöltése után elkezdik megjeleníteni az oldaladat és elkezdik letölteni a képfájlt. Ha a böngésző csak a kép letöltése után ismeri meg annak méretét, akkor a már részben megjelenített oldalt újra kell terveznie. A weblapod olvasói ebből annyit látnak, hogy „ugrál” az oldal, ami alighanem zavarni fogja őket. Viszont ha a HTML kód vagy egy stíluslap tartalmazza a kép méretét, akkor azzal a böngésző tud számolni, és a weblapod összes eleme rögtön a végleges helyén jelenhet meg.

Az alt attribútum tartalma azok számára ad hasznos információt, akik nem láthatják a weboldalra beillesztett képet. (Például azért, mert a kép nem töltődött le a számítógépre. Vagy például egy vakok számára készült böngésző - amelyik felolvassa a weblapok tartalmát – valószínűleg nem is tölti le a fényképeket.) Ha olyan képet illesztesz be a weblapodra, ami nem a tartalom része, hanem dizájn célokat szolgál, akkor a szabvány ajánlása szerint az alt attribútum értékének egy üres sztringet kell megadni. Példa:

<img src="design_elem.gif" width="200" height="100" alt="">

Listák

Készíthetünk számozatlan, számozott és definíciós listákat.

Számozatlan lista

A számozatlan lista egy felsorolás, minden listaelem előtt egy kis pöttyel. Számozatlan listát az <ul> (unordered list, azaz számozatlan lista) címke vezet be, minden listaelem a <li> (list element, azaz listaelem) és a </li> címkék között van. A listaelemeken belül írhatunk sortörést, bekezdéseket, képeket stb.

<ul>

<li>tej</li>

<li>kenyér</li>

<li>Hertz szalámi</li>

</ul>

    tej

    kenyér

    Hertz szalámi

Számozott lista

Számozott listát az <ol> (ordered list, azaz számozott lista) címke vezet be, az elemeket itt is ugyanúgy kell megadni. A listaelemeken belül írhatunk sortörést, bekezdéseket, képeket stb.

<ol>

<li>tej</li>

<li>kenyér</li>

<li>Hertz szalámi</li>

</ol>

    tej

    kenyér

    Hertz szalámi

Definíciós lista

Fogalmakat és azok magyarázatait jeleníthetjük meg a definíciós lista segítségével. Az egészet a <dl> (definition list, azaz definíciós lista) és a </dl> címkék közé kell írni. Egy fogalmat a <dt> és </dt> címkék közé, magyarázatát pedig a <dd> és </dd> címkék közé kell helyezni.

<dl>

<dt>Tej</dt>

<dd>Tehenek leve</dd>

<dt>Kenyér</dt>

<dd>Lisztből készülő, pékek készítette finomság</dd>

<dt>Hertz szalámi</dt>

<dd>Húsféleség a kenyérhez</dd>

</dl>

Tej

    Tehenek leve

Kenyér

    Lisztből készülő, pékek készítette finomság

Hertz szalámi

    Húsféleség a kenyérhez

Beágyazott listák

Listákat egymásba is ágyazhatunk, az alábbi módon:

<ul>

  <li>Tej</li>

  <li>Kenyér

    <ul>

      <li>Fehér kenyér</li>

      <li>Barna kenyér

        <ul>

          <li>Rozs kenyér</li>

          <li>Kukoricás kenyér</li>

        </ul>

      </li>

    </ul>

  </li>

  <li>Hertz szalámi</li>

</ul>

    Tej

    Kenyér

        Fehér kenyér

        Barna kenyér

            Rozs kenyér

            Kukoricás kenyér

    Hertz szalámi