Практическая работа № 2
Вставка изображений в HTML-документ
Цель работы. Знакомство с основными тегами для вставки изображений в HTML-документ, изучение атрибутов для преобразования изображений в документе.
Литература. Конспект лекций.
3. Подготовка к работе. Изучить конспект лекций по теме "Графика".
Перечень оборудования. Компьютер.
Задание.
5.1. Ознакомиться с основными тегами для вставки изображений в HTML-документ.
5.2. Изучить основные атрибуты для преобразования изображений.
5.4. Научиться оформлять изображения в web-страницах.
Порядок выполнения работы.
6.1. Вставка изображений на web-страницу.
1. Откройте программу Paint и создайте в нем три рисунка по образцу: каждый рисунок – в отдельном файле.
 |  |
Рис.1 Рис.2 Рис.3
Сохраните эти файлы под именами bloc1.gif, bloc2.gif, bloc3.gif в вашей папке.
2. Откройте текстовый редактор Блокнот и создайте web-страницу в соответствии с образцом:
Код web-страницы:
3. Сохраните полученный документ в вашей папке, присвоив файлу имя algoritm.html.
4. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
6.2. Создание горизонтальных линий и других объектов.
1. Откройте текстовый редактор Блокнот и создайте 2 web-страницы в соответствии с образцом:
Фрагмент кода web-страницы:
3. Сохраните полученный документ в вашей папке, присвоив файлу имя linii.html.
4. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
5. Создайте вторую web-страницу.
Фрагмент кода web-страницы:
6. Сохраните полученный документ в вашей папке, присвоив файлу имя list.html.
7. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
Создание карты изображений и вставка бегущей строки.
1. Создайте web-страницу, используя следующее изображение. Оно находится на Рабочем столе в папке Практические работы по НTML.
2. Создайте карту изобрадения таким образом, чтобы при наведении мыши на определенное устройство компьютера выводилось его название.
3. На этой же странице создайте бегущую строку:
Любишь играть в компьютерные игры, люби и сам программировать!
4. Сохраните полученный документ в вашей папке, присвоив файлу имя саrta.html.
5. Запустите браузер Internet Explorer. Просмотрите в нем полученную web-страницу.
Содержание отчета.
7.1. Файлы algoritm.html, linii.html, list.html, саrta.html в вашей папке.
8. Контрольные вопросы.
8.1. Какой тег служит для вставки изображений в HTML-документ?
8.2. Какой атрибут позволяет указать имя файла с изображением?
8.3. Какие атрибуты позволяют задать размеры картинки?
8.4. Какой атрибут позволяет задать положение изображения относительно окружающего текста?
8.5. Какой атрибут позволяет задать толщину рамки вокруг картинки?
8.6.. Какие атрибуты определяют величину свободного пространства слева, справа, над и под картинкой?
8.7. С помощью какого тега создаются карты изображений? Какие используются атрибуты?
8.8. Какой тег предназначен для создания бегущей строки?
Приложение.
Графика
Размещение графики на Web-странице. Форматы графических файлов
В Интернете наиболее популярны два графических формата: GIF и JPEG.
Обычно используют:
JPEG – для фотографий и очень сложных по цветовой гамме рисунков с плавными цветовыми переходами (в расширении записывается как JPG).
GIF – для логотипов, надписей, заголовков, рисунков, имеющих четкие цветовые граница.
Формат GIF
Картинки в этом формате поддерживают 256 цветов. GIF-формат имеет три дополнительные возможности:
Мультипликация. Используя анимационный GIF-редактор, легко собрать простой «мультик»: нарисовать отдельные кадры, настроить время задержки в последовательности показа, «зациклить кино» или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Но в этом файле не одна, а целая коллекция GIF-картинок и разная настроечная информация.
В HTML нет различия между заданием вывода на экран простого GIF или анимированного.
Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом:
Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9-ю и т.д. строки исходного изображения. Вторая – 2, 6, 10-ю и т.д. Третья – 3, 7, 11-ю и т.д. Четвертая – 4, 8, 12-ю и т.д.
Браузер строит на экране сначала первую часть картинки, потом которую, затем третью и четвертую. Получается эффект постепенного проявления изображения.
Формат JPEG
Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.
Конечно, высокое качество отражается на размерах файла. Но формат JPEG имеет одну особенность: в JPG-редакторе при записи на диск можно указать ту степень качества, которая нужна и, тем самым, балансируя на планке «качество-размер файла», достичь нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета на близкие, - на глаз такую подмену обнаружить будет практически невозможно, а размер файла существенно сократиться.
JPEG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. JPEG с таким свойством называется прогрессивным.
Элемент <IMG>
Элемент <IMG> используется для вставки в тело документа графического изображения.
Синтаксис: <IMG src = URL атрибуты >
Кроме того, элемент <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.
Атрибуты:
src (указывает на файл графики, задавая его URL).
Синтаксис: <IMG src=" URL ">
alt (вместо изображения отображает альтернативный текст типа здесь нарисован логотип фирмы).
Синтаксис: <IMG alt =" описание ">
align (задает расположение рисунка в окне и его выравнивание, может принимать значения: top -по верхнему краю, bottom -по нижнему краю, middle -по центру, right -справа, left -влево).
Синтаксис: <IMG align=" значение ">
width (задает ширину области в пикселях, отводимой в окне под изображение).
Синтаксис: <IMG wigth= число >
height (задает высоту области в пикселях, отводимой в окне под изображение).
Синтаксис: <IMG height= число >
hspace (задает пустое пространство в пикселях справа и слева от рисунка).
Синтаксис: <IMG hspace= число >
border (задает в пикселях толщину рамки вокруг рисунка).
Синтаксис: <IMG border= число >
vspace (задает пустое пространство в пикселях сверху и снизу от рисунка).
Синтаксис: <IMG vspace= число >
ismap (разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие рисунки называют MAP карта, они используются совместно с элементом <A>. В этом случае реакцию на щелчок по карте отрабатывает сервер).
Синтаксис: <A href=" URL карты "><IMG src=" URL изображения " ismap>
usemap ( разрешает использовать изображения, отдельные части которого связаны с картами, они используются совместно с элементом <MAP>. В этом случае реакцию на клик по карте отрабатывает браузер).
Синтаксис: <IMG src=" URL изображения " usemap= "URL" карты(#имя карты) >
Карты изображений.
Элемент <MAP>
Элемент <MAP> применяется для представления графического изображения в виде карты с активными областями. Он поддерживает аттрибут name, который задает его имя, и включает внутри себя элемент <AREA>, который и задает собственно активные области карты, связанные ссылками с прочими ресурсами.
Синтаксис: <MAP name=" имя "> <AREA атрибуты > </MAP>
Элемент <AREA>
Элемент <AREA> задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint, для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент <AREA> поддерживает различные атрибуты:
href ( указывает URL ссылки).
Синтаксис: <AREA href=" URL ">
alt (задает альтернативный текст для браузеров, которые не поддерживают данный элемент).
Синтаксис: <AREA alt=" текст подсказки ">
title (задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент).
Cинтаксис: <AREA title=" текст подсказки ">
shape (задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=X,Y,R, где X,Y,R - координаты центра круга и его радиус, "poly" coords=X1,Y1,X2,Y2,X3,Y3..., гдеX1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника, если многоугольник - прямоугольник, то достаточно указать его верхнюю левую и правую нижнюю вершины "rect" coords=X1,Y1,X3,Y3).
Синтаксис: <AREA " circle " coords= X,Y,R >
Пример изображения - карты:
<IMG src=" map.gif " usemap="# supermap " border= 0 >
<MAP name=" supermap ">
<AREA shape= circle coords=" 34,32,23 " href=" page1.html " title=" ссылка 1 ">
<AREA shape= poly coords=" 12,110,37,62,72,114 " href=" page2.html " title=" ссылка 2 ">
<AREA shape= rect coords=" 83,44,133,94 " href=" page3.html " title=" ссылка 3 ">
</MAP>