WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

HTML5 - Tárolóelem ábrákhoz



HTML5 Speciális tárolóelem ábrákhoz


Név Angol eredete Hatás Jellemzők
<figure> Figure Páros címke, amelybe több ábra is beágyazható. Általános ; Események
<figcaption> figure caption Páros címke. Az ábrá(k)hoz tartozó felírat (cím, képaláírás, leírás, magyarázat) adható meg segítségével. Általános ; Események
A következő böngészők támogatják: Chrome logó Firefox logó Safari logó Opera logó IE logó

A <figcaption> közvetlen <figure> címke után vagy a </figure> előtt adható meg.

Hasonlókép használjuk, mint a nyomtatott anyagokban (pl. a könyvek és folyóiratok) a képek, diagramok, vagy példakódok képaláírásainál megszoktuk.

A div vagy aside elemekkel hasonló módon kezeljük.

Ha a fő tartalomhoz tartozó fontos információt adunk közre, akkor a <figure > , ha kevésbé fontos vagy a tartalomhoz csupán érintőlegesen kapcsolódó információkat, akkor az < aside > elemet használjuk.

Példa 1:

Egy kép képaláírással és forrásmegjelöléssel.

Forráskód



<figure>
  <blockquote>
     <img src="i5_processzor_300.jpg" alt="Az Intel P5 processzora">
  </blockquote>
  <figcaption>
     1. ábra Intel P5 processzora....  
     <br>
     <cite>
        <a href="http://www.intel.com"> Intel Corporation</a>
     </cite>
   </figcaption>
</figure>
 

Eredmény*

Példa 2:

Több kép képaláírással

Forráskód



<figure style="text-align:center;">

  <img src="i5_processzor_180.jpg" alt="Az Intel P5 processzora">
  <img src="i5_processzor_huto_180.jpg" alt="Processzor hűtő">
  <img src="memoria_modul_180.jpg" alt="Memória modulok">

  <figcaption>
     A kiválasztott alaplaphoz még egy processzort, egy processzor 
     hűtőventilátort és memória modulokat is kell vásárolni.
  </figcaption>
</figure>
 

Eredmény*

Példa 3:

Kód képaláírással.
Megj. az entitások használatánál a példakód plusz szóközöket tartalmaz.

Forráskód



<figure> 
     <figcaption>
        Ha HTML forráskódot jelenítünk meg, akkor a
        <code> < és ></code> karakterek helyett 
        entitásukat használjuk:
     </figcaption>
     <p><code>
      & lt;a rel="license" 
         href="http://creativecommons.org/licenses/by-nc-sa/2.5/hu/"
      & gt;
        Creative Commons licenc
      & lt;/a& gt; 
  </code></p>

</figure>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_figure_1.html ; html5_figure_2.html ; html5_figure_3.html