Урок 8. Вставляем изображение
До сих пор вы размещали на странице своего сайта лишь текстовую информацию. Теперь давайте научимся добавлять изображения.
Возьмите любую картинку, которая хранится у вас на компьютере или сохраните ту, что видите ниже.
Чтобы поместить ее на сайт необходим, как всегда - тэг.
Выглядит он следующим образом:
И в браузере:
Попробовали?
Получилось?
Теперь давайте разберемся, что есть что в данном тэге.
Для того чтобы сообщить браузеру, что вы вставляете изображение, служит тэг «img» (сокр. от image)? Затм указывается его размещение «src»
(сокращение для "source"). Далее имя файла «Закат.jpg» и его название - alt="Закат", которое отображается, пока картинка не закачана либо на ее месте, если в браузере отключена функция показа изображений.
Обратите внимание, что тэг «img» не требует наличия закрывающего тэга.
Кое-что еще про изображения.
Существует возможность вставлять изображения, которые размещены в других папках или даже на других сайтах. Вот как это делается:
Пример:
Пример:
Также допускается использовать ссылки вместе с изображениями.
Пример
В браузере это будет выглядеть примерно так (попробуйте щёлкнуть на изображении):
С целью дать изображению краткое описание используется атрибут «title».
Пример
Еще два важных атрибута - «width» и «height» (ширина и высота изображения):
Пример
В браузере получим:
Несмотря на то, что отображаемое браузером изображение уменьшилось, реальный размер файла в килобайтах остался неизменным. То есть время загрузки останется прежним.
Поэтому для изменения размера изображения используйте соответствующие программы для редактирования.
А атрибуты «width» и «height» полезно применять, чтобы браузер еще до загрузки изображения мог определить его размер на странице, что позволит быстрее и качественнее загружать их.
Ну что ж, с изображениями разобрались. Вам осталось попробовать выполнить подобные манипуляции у себя на компьютере.
Далее... Урок 9. Верстка с помощью блоков.
Ключевые теги: Учебник HTML, Блоки, div, блочная верстка