افزودن عنوان به تصاویر

دو عنصر جدید در html5 عبارتند از:

FIGURE و FIGCAPTION عنصر اول، FIGURE برای استفاده در عناصری مانند تصاویر و سایر عناصر گرافیکی مناسب است، در حالیکه عنصر دوم FIGCAPTION، برای معرفی تصویر مورد نظر بکار برده می شود.

مثال:

 

<FIGURE>

<IMG SRC="york_images/york_minster.jpg">
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>

</FIGURE>

در مثال فوق، تگ img توسط دو تگfigure  احاطه شده است. سپس تگ figcaption در زیر تصویر اضافه شده است. کدهای بالا در مرورگر به شکل زیر نمایان می شوند:

در صورت تمایل می توان تگ  FIGCAPTION را بالای تصویر قرار داد:

<FIGURE>

<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
<IMG SRC="york_images/york_minster.jpg">

</FIGURE>

توجه داشته باشید که تگهای figure و figcaption، دارای قالب از پیش تعریف شده ای نیستند و برای تنظیم استایل آنها می بایست تنظیمات لازم را در فایل css ایجاد نمایید:

FIGCAPTION {

font-style: italic;
font-variant: small-caps;

}

به دلیل اینکه figure و figcaption تگهای جدید html5  هستند، مرورگرهای قدیمی قادر به شناسایی آنها نمی باشد. بنابراین مانند تگهای خطی در صفحه نمایش داده می شوند. به این معنا که یک شکست خط خودکار برای قسمت figcaptionایجاد نمی شود و آنها در کنار تصویر نمایش داده می شوند. برای رفع این مشکل، می توان از ویژگی display با مقدار blck برای این تگها استفاده کرد. مانند:

FIGURE, FIGCAPTION {

display: block;
font-style: italic;
font-variant: small-caps;

}

کدهای css فوق، به مرورگر می گوید که تگ های figure و figcaption، یک بلاک هستند. چون بلاک ها به صورت زیر هم در صفحه قرار می گیرند، بنابراین عنوان عکس که در تگ figcaption نوشته شده است، در محل مناسب خود قرار می گیرد. بالا یا پایین تصویر (در مورد عناصر سطح بلاک در درس های بعدی بیشتر توضیح داده خواهد شد).

تا اینجا آموزش تصاویر کافی است. در درس بعدی نگاهی به ابر پیوند(hyperlinks) می اندازیم.