Перейти к содержанию

Пример изображения

В приведенном примере логотип - это изображение в формате GIF (оно содержит однотонные участки), а фотографии сохранены в формате JPEG.

Основная фотография помещена в элемент <figure> языка HTML5 и у нее есть подпись.

Атрибут alt каждого из изображений предоставляет описание того, что можно видеть на рисунке, для посетителей сайта, использующих программы экранного доступа.

Атрибут title содержит дополнительную информацию, выводимую во всплывающей подсказке.

В этом примере вы не увидите таких атрибутов, как height, width и align.

На сегодняшний день они считаются устаревшими и вместо них рекомендуется использовать соответствующие свойства каскадных таблиц стилей (CSS).

Код
<html>
    <head>
        <title>Изображения</title>
    </head>
    <body>
        <h1>
            <img src="images/logo.gif" alt="От А до Яблока" />
        </h1>
        <figure>
            <img src="images/chocolate-islands.jpg"
            alt="Шоколадные острова" 
            title="Уникальные кексы Шоколадных островов" />
            <p>
                <figcaption>
                    Этот рецепт для приготовления уникальных 
                    шоколадных кексов так прост и так восхитителен!
                </figcaption>
            </p>
        </figure>
        <h4>Еще рецепты:</h4>
            <p>
                <img src="images/lemon-posset.jpg"
                alt="Лимонный поссет" 
                title="Десерт - лимонный поссет" />
                <img src="images/roasted-brussel-sprouts.jpg"
                alt="Жареная брюссельская капуста" 
                title="Гарнир из жареной брюссельской капусты" />
                <img src="images/zucchini-cake.jpg" 
                alt="Яблочный пирог" 
                title="Яблочный пирог без охлаждения" />
            </p>
    </body>
</html>

Результат