Урок 8. Вставляем изображение

До сих пор вы размещали на странице своего сайта лишь текстовую информацию. Теперь давайте научимся добавлять изображения.

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

Чтобы поместить ее на сайт необходим, как всегда - тэг.

Выглядит он следующим образом:

И в браузере:

Попробовали?

Получилось?

Теперь давайте разберемся, что есть что в данном тэге.

Для того чтобы сообщить браузеру, что вы вставляете изображение, служит тэг «img» (сокр. от image)? Затм указывается его размещение «src»
(сокращение для "source"). Далее имя файла «Закат.jpg» и его название - alt="Закат", которое отображается, пока картинка не закачана либо на ее месте, если в браузере отключена функция показа изображений.

Обратите внимание, что тэг «img» не требует наличия закрывающего тэга.

Кое-что еще про изображения.

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

Пример:

Пример:

Также допускается использовать ссылки вместе с изображениями.

Пример

В браузере это будет выглядеть примерно так (попробуйте щёлкнуть на изображении):

С целью дать изображению краткое описание используется атрибут «title».

Пример

Еще два важных атрибута - «width» и «height» (ширина и высота изображения):

Пример

В браузере получим:

Несмотря на то, что отображаемое браузером изображение уменьшилось, реальный размер файла в килобайтах остался неизменным. То есть время загрузки останется прежним.

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

А атрибуты «width» и «height» полезно применять, чтобы браузер еще до загрузки изображения мог определить его размер на странице, что позволит быстрее и качественнее загружать их.

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

Далее... Урок 9. Верстка с помощью блоков.

Вернуться к Оглавлению