Л а б о р а т о р н а я р а б о т а № 6 . Г р а ф и к а н а в е б - с т р а н и ц е .

Основные способы применения графики.

Фоновое изображение

Допустим, что у нас заготовлен соответствующий фоновый рисунок (откройте на диске С папку Мои документы/Мои рисунки/ и выберите любой понравившейся рисунок, сохраните его в созданную папку Лаб№6, переименуйте его например img1.jpg.

(Если в папке Мои рисунки нет подходящего фона для страницы, то можно сделать так:

_ Открыть текстовый редактор MS Word;

_ Нарисовать большой прямоугольник на размер страницы;

_ Добавить заливку – градиентная , выберите готовую заготовку;

_ Выполните копирование вида экрана – нажмите кнопку PrintScreen;

_ Зайдите в любой графический редактор, например в Paint;

_ Выполните Правка/Вставить, вырежьте изображение и вставьте в новый пустой файл;

_ Выполните Файл/Сохранить как, дайте имя файлу - img1 и Тип файла jpg).

Чтобы поместить рисунок на веб-страницу в качестве фона, нужно установить в теге атрибут

BACKGROUXD= со значением, содержащим имя файла рисунка.



Если рисунок меньше окна браузера, то он будет повторяться по горизонтали и по вертикали. Это происходит автоматически, и до недавнего времени это нельзя было отменить. Теперь же, если вы не хотите повторения можно указать либо относительное местоположение файла рисунка (то есть путь доступа к нему относительно расположение исходного HTML-файла), либо его полный URL-адрес. Здесь и далее мы предполагаем, что вы разместили в той же папке, что и HTML-файл.

Самостоятельно создайте новую web-страничку и примените к ней фоновый рисунок. Примените также цвет к тексту, так чтобы он был четким на вашем фоне.

В качестве заголовка используйте следующий текст - Александр Сергеевич Пушкин.Затем введите на веб- страницу следующий текст - Творчество Александра Сергеевича Пушкина. Примените

форматирование по центу и тип заголовка – первый. Затем установите горизонтальную линию.

Затем впишите по центру, курсивом и типом заголовка второй текст - Пушкин: Краткий очерк жизни и творчества.

Установите горизонтальную линию.

Затем впишите по ширине и шрифтом меньше на один пункт от основного текста следующий текст: 1799, 26 мая (6

---

июня) - А. С. Пушкин родился в Москве в семье офицера Гвардии Сергея Львовича Пушкина и внучки Ганнибала А. П.,

сына эфиопского князя, попавшего в Россию ок. 1706 г. (Арап Петра Великого), Надежды Осиповны Ганнибал.

Установите горизонтальную линию.

Затем впишите по центру и третьим типом заголовка, текст - Стихи Пушкина, на следующей строке, подчеркнутый текст

- Я вас любил: любовь еще, быть может.

Установите горизонтальную линию.

Затем впишите с левой стороны и шрифтом меньше на один пункт от основного текста следующий текст:

«Я вас любил: любовь еще, быть может

В душе моей угасла не совсем;

Но пусть она вас больше не тревожит;

Я не хочу печалить вас ничем.

Я вас любил безмолвно, безнадежно,

То робостью, то ревностью томим;

Я вас любил так искренно, так нежно,

Как дай вам бог любимой быть другим.

1829»
Графические иллюстрации

Проиллюстрируем наш текст, вставив перед стихотворением фотографию Пушкина. Предположим, что фотография у

нас уже готова и лежит в текущей папке Лаб6 под именем Pushkin.jpg. Вставить ее в текст можно с помощью тега ,

например, вот так:



На месте этой записи браузер отобразит нашу картинку.

Атрибуты тега .

Изображения загружаются из сети всегда намного медленнее, чем обычный текст. Поэтому сам файл картинки должен

быть не очень большого объема. Многие браузеры, начав загружать картинку, приостановят загрузку последующего текста

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

загружаться параллельно с картинкой: пока она догружается, можно было бы что-то уже читать. Чтобы браузер мог это

сделать, ему нужно явно указать размеры будущей картинки с помощью атрибутов WIDTH= и HEIGHT=:



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

Однако обычно этого не делают. Представлять картинку меньшей, чем она есть, нецелесообразно. Файлы для картинок

большого размера имеют большой размер и грузятся из Интернета, соответственно, намного дольше. Лучше сделать

---

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

есть, то, как правило, она будет выглядеть малопривлекательно за счет появления “ступенчатости” как в формах, так и в

цвете.

Далее, хорошим тоном является наличие так называемого альтернативного текста для тех случаев, когда в браузере

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

который сопровождается пояснением, что за картинка на этом месте должна быть. Альтернативный текст вводится как

значение атрибута ALT:



Вокруг рисунка можно отобразить рамку. Толщина этой рамки задается как значение атрибута BORDER=. Если мы, как

в данном случае, не хотим отображать рамку вокруг рисунка, то можем ничего и не указывать, так как большинство

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

и отсутствие рамки тоже:



Картинки могут содержать гиперссылки. Например, можно при щелчке на изображении Пушкина перейти на сайт

творчества Пушкина.







Тег может иметь собственный атрибут ALIGX=, который управляет расположением рисунка относительно

текста. Если рисунок “встроен” в текст, то есть несколько вариантов его расположения:

ALIGX="left" — текст обтекает рисунок, который располагается слева;

ALIGX="right" — текст обтекает рисунок, который располагается справа;

ALIGX="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей

букв текста (можно также применять значение "texttop");

ALIGX="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру

рисунка (можно также при менять значение "absmiddle");

ALIGX="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней

границей букв текста (можно также применять значение "absbottom" или "baseline").

---

Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Для

этого в теге используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальное

и вертикальное “поля” рисунка.

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

Результат у Вас должен получится похожим на рис.6.1.

Браузер Internet Explorer (версия 4 и выше) позволяет с помощью тега загружать и просматривать также

видеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYXSRC=, в качестве значения

которого указать имя AVI-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинать

проигрывание видео: "FILEOPEX" — сразу после загрузки файла или "MOUSEOVER" — после наведения указателя

мыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "0" означает бесконечное

повторение, а любое другое число указывает точное количество повторов.


Рис.6.1. Пример странички с фоновым рисунком и иллюстрацией

---

Смотрите также файлы

• 1. Слемдесу (музыка) барлыы лезгинка биін билеп шыады Таныстыру (Нржігіт жне Мерей) лтты таам таныстыру Нрали Б.docx

• Работала участковым педиатром в г года.docx

• Методические указания для обучающихся очной и заочной форм обучения по направлению подготовки.doc

• Задача 1. Разберите, относятся ли к предмету административного права внешневластные правоотношения между.docx

• Будущая сумма, млн долл.docx