Конспект урока «Вставка изображений в HTML-документ» по информатике

Вставка изображений в HTML-документ

• Создайте в своей папке папку Картинки.

• Запустите программу Блокнот и создайте простейший HTML-документ согласно рисунку. Сохраните созданную страницу в папку Картинки. Задайте для страницы имя index.html

• Для встраивания изображения в документ используется тег img>, имеющий единственный обязательный параметр src, который позволяет задать имя файла с картинкой.

• В папке Картинки создайте папку Pic. Скопируйте в созданную папку изображение 01.gif

• Вставьте на созданную нами страничку изображение 01.gif, для этого после тега body> запишите следующий тег img src=01.gif>. Просмотрите полученную страничку с помощью браузера. Отображается ли картинка?

• Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt тега img>. Измените содержимое тега img> следующим образом img src=01.gif alt=”Зверь”>. Сохраните изменения. Просмотрите полученную страничку с помощью браузера.

• Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, при наведении курсора на картинку, в маленьком окошке появиться надпись, и сообщит дополнительную информацию.

• Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с html-файлами. Тогда команда вывода графики будет иметь вид: img src=pic/01.gif alt=”Зверь”>.

• Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега . Эти атрибуты задают ширину и высоту прямоугольника, в который выводится картинка в пикселях. Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.

• Обязательно задавайте размеры всех изображений на web-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений размещенных внутри таблицы. Такая таблица не будет показана до тех пор, пока рисунок не будет загружен полностью.

• Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому может возникать ситуация, когда маленький рисунок грузится на странице долго. А увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл загружается быстро.

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

• Измените тег img> следующим образом: img src=pic/01.gif alt=”Зверь” width=150 height=100>. Просмотрите какие изменения произошли на странице. Верните первоначальные размеры изображению.

• Изображение, помещаемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега . При отсутствии атрибута или при значении атрибута 0 рамка вокруг изображения не рисуется. Цвет рамки совпадает с цветом текста, заданным с помощью параметра text тега . Зададим для нашего рисунка рамку зеленого цвета толщиной в 5 пикселей. Для этого необходимо изменить содержимое тега : , а затем изменим содержимое тега img>: img src=pic/01.gif alt=”Зверь” border=5>.

• Уберите рамку вокруг изображения.

• Для любого изображения можно задать пустые отступы по горизонтали и вертикали с помощью параметров hspace и vspace тега img>. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство.

• Скопируйте в папку Картинки html-страницу skazka.html и в папку pic рисунок 02.jpg.

• Вставьте рисунок 02.jpg на страницу skazka.html в раздел подходящий по смыслу сказки. Для этого откройте страницу, щелкните по тексту правой кнопкой мыши и в контекстном меню выберите пункт Просмотр html-кода. Затем измените его необходимым образом. Просмотрите измененную страницу.

• Задайте для вставленного рисунка отступы по горизонтали и вертикали. Для этого измените тег следующим образом: img src=pic/02.jpg hspace=10 vspace=10>. Сохраните изменения, просмотрите страницу.

• Для изображений можно указывать их положение относительно текста или других изображений на web-странице. Способ выравнивания изображений задается параметром align тега img>. В таблице перечислены возможные значение этого параметра и результат его использования.

• Используйте различные способы выравнивания рисунка относительно текста для страницы skazka.html.

• Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге img> добавить параметр hspace и vspace, задающих расстояние до текста в пикселях. Измените содержимое тега img> следующим образом img src=pic/02.jpg hspace=10 vspace=10 align=left>. Сохраните изменения и просмотрите страницу.

Задание. Веселый зоопарк.

Создайте для детей страничку с забавными историями про животных. В качестве иллюстраций можно использовать коллекцию картинок из каталога pic01.