Лекция: Отображение встроенных рисунков
Изображения в Интернете бывают разных форматов. Самыми признанными и распространенными среди них являются GIF, JPG.
Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований.
Формат JPG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое может иметь 7 уровней качества (от очень плохого до наилучшего).
Для размещения на Web-странице встроенного рисунка используем тег <IMG>. Этот тег имеет атрибут scr указания адреса отображаемого рисунка, но можно использовать вместо пути его URL в Internet'е.
<html>
<base href=«www.mjk.msk.ru/~dron/images»>
<p><img src=«prob.gif»>
<p><img src="../banner.gif">
<p><img src=«www.rambler.ru/dronban.jpg»>
</html>
Первая картинка будет загружаться из www.mjk.msk.ru/~dron/images/prob.gif.
Вторая уже будет загружаться из каталога высшего уровня, т.е. в данном случае прямо из www.mjk.msk.ru/~dron/.
Последняя картинка демонстрирует возможность загрузки картинок с других сайтов, и загрузится с сайта www.rambler.ru/. Эти названия изображений даны только для примера и на самом деле не существуют !!!
Кроме атрибута src существуют еще несколько атрибутов:
alt - этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Этот текст также выскакивает в всплывающей подсказке. Как правило в тексте указывается краткое описание изображения или ссылки, а также иногда содержит в себе название файла с его размером.
Пример:
<img src=«pic1.gif» alt=«Рисунок 1. Пример вращения твердого тела.»>
<img src=«b.jpg» alt=«b.jpg»>
Большинство атрибутов в html не требуют заключения в кавычки, но атрибут alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки, которые браузер не сможет обработать.
lowsrc - источник изображения низкого качества или размера, для быстрой предварительной загрузки.
align — задает выравнивание изображения относительно текущей строки:
align=top Выравнивает верхний край изображения по верхнему краю текущей строки.
align=middle Выравнивает центр изображения по базовой линии текущей строки.
align=bottom — Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки.
align=left - Выравнивает изображение по левому полю.
align=right - Выравнивает изображение по правому полю.
width и height — Эти атрибуты задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место.
border — Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то для толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.
vspace - Используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило по умолчанию равно 0. Но может быть и иным.
usemap и ismap — Устанавливают на картинку карты ссылок, на которых я остановлюсь подробнее в следующих шагах.
СОДЕРЖАНИЕ РАБОТЫ
- Ознакомиться с теоретическим материалом.
- Загрузить программу Блокнот.
- Создать HTML-документ, который в окне Web-браузера отобразится так, как показано на примере.
- Сохранить набранный текст в файл с расширением *.html
- Открыть файл в окне браузера и, если есть недостатки, устранить их.
- Выполнить одно из заданий, выданное преподавателем. Открыть файл в окне браузера.