Изображения

< >

5 / 5

Автор: Администратор

23.07.2014

<IMG> - тег картинки или просто изображения. Его используют, чтобы добавить на страницу необходимые иллюстрации, например фото.

Этот тег является непарным, для корректности его лучше писать так <IMG />.

Если добавить этот тег просто без необходимых атрибутов, то на страничке ничего не отобразится.

Важным атрибутом является SRC, путь до файла. Путь до картинки или изображения, лучше всего писать полный путь до картинки, с указанием домена, вы можете указать даже тот путь, который ведет на другой сайт, главное чтобы он был корректным. Так же есть возможность писать относительный путь. Возьмем файл, в котором будет подобный тег, тогда относительный путь будет указывать местоположение картинки, на вашем же хостинге, относительно папки, в которой лежит этот html-файл.

Пример вставки двух одинаковых картинок, с указанием полного пути и относительного

<HTML>
    <HEAD>
        <TITLE> Изображения. Пример использования разных путей в SRC </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <img src="http://web.cofp.ru/images/Courses/HTML_for_beginner/pages/9_Атрибут(src)/img/smile.jpg" /><br>
        <img src="/img/smile.jpg" />
    </BODY>
</HTML>

Получим

Ваш браузер не поддерживает плавающие фреймы!

Другим важным атрибутом является ALT, в котором указывается письменное описание картинки. Добавление этого атрибута можно считать обязательным. Хотя если вы его пропустите, никто вас ругать не будет. Суть этого атрибута, в том, что если картинка не загрузилась (неправильный путь до картинки), то будет выводиться это описание. Не все браузеры так поступаю, для некоторых в случае некорректного ввода пути до картинки, будет выводиться значок не найденной картинки. Другое значение этого атрибута для поисковых систем. По этому тексту поисковики определяют, что это за картинка, а как им это делать иначе?

Атрибут TITLE так же стоит указывать, как и в случае со ссылками A, туда пишут текст, который появляется при наведении и удержании курсора на изображении.

Выведем две картинки, одну с корректным путем и описанием ALT и TITLE, а другую с некорректным путем, описанием ALT и TITLE.

<HTML>
    <HEAD>
        <TITLE> Изображения. Пример использования атрибута ALT </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <img src="/img/smile.jpg" alt="Смайлик" /><br>
        <img src="/img/smile2.jpg" alt="Смайлик" />
    </BODY>
</HTML>

Как это выглядит

Ваш браузер не поддерживает плавающие фреймы!

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

Тестовые задания, для использования знаний на практике

В этом уроке будет всего одно задание первого уровня. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать. Задания опираются на все пройденные уроки, но основная часть - текущий урок, на его понимание.

Уровень первый

Для выполнения этого задания вам нужно скачать исходные материалы, которые включают в себя папку с картинками и файл index.html, в котором при помощи тега <img> вызывается картинка с неправильным путем до нее. Ваша цель - исправить этот путь, используя исходные материалы, а так же добавить еще 3 картинки, так чтобы они выглядели как показано ниже:

Скачать рабочий код задания

Рабочий код задания(для проверки)

<HTML>
    <HEAD>
        <TITLE> Изображения. Тестовое задание. </TITLE>
    </HEAD>
    <BODY>
        <IMG src="/images/animals/mistifical/fenix.jpeg" alt="Феникс" width="300px" />
        <IMG src="/images/colors.jpeg" alt="Цвета" height="200" />
        <IMG src="/images/flowers/rose.jpg" alt="Роза" height="300px;" />
        <IMG src="/images/animals/mistifical/fenix.jpeg" alt="Феникс" width="300px" />
    </BODY>
</HTML>

< >