Практическая работа № 27

Тема: Размещение графики на Web-странице.

Цель: Научиться внедрять в HTML-документ графические изображения.

Ход работы:

Одна из наиболее привлекательных черт Web – страниц - это возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега < IMG>. Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.

Существует несколько способов использования графики в HTML-документах.

Один из них - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа.

Синтаксис тега:

< IMG SRC=" URL " ALT=" text " HEIGHT=n1 WIDTH=n2 ALIGN= top|middle|bottom|texttop >

Элементы синтаксиса тега:

URL

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

ALT=" text"

Этот необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тег ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1

Этот необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2

Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселях.

ALIGN

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

BORDER

Этот параметр позволяет автору определить ширину рамки вокруг рисунка.

VSPACE

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

HSPACE

То же самое, что и VSPACE, но только по горизонтали.

ФОНОВЫЕ РИСУНКИ

Большинство браузеров позволяет включать в документ фоновый рисунок, который будет отображаться на фоне всего документа. Описание фонового рисунка включается в тег BODY и выглядит следующим образом: < BODY BACKGROUND=" picture . gif " >

Задание 1. Размещение графики на Web-странице.

Тег < img> является одиночным, т.е. закрывающий тег не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Перед выполнением упражнения поместите файл moi.jpg в ту же папку, которая будет использована для хранения создаваемой Web-страницы.

1. Внесите изменения в файл moi.html, созданный на прошлом занятии (если файл утрачен, создайте новый):

2. Самостоятельно внесите изменения в файл moi.html, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:

Задание 2. Фоновое отображение графики на Web-странице.

1. Поместите файл back.jpg в ту же папку, что и moi.html.

2. Внесите изменения в файл moi.html:

Задание 3. Линейки и буквицы.

Графические элементы возможно применять в качестве различного вида " украшений". Если Вы придумаете что-нибудь оригинальное, ваша Web-страница будет смотреться необычно и запомнится посетителю.

Можно применить графический элемент в качестве буквицы. Встроить буквицу в текст можно следующим образом:

< IMG SRC=" b.gif" WIDTH=" 60" HEIGHT=" 59" BORDER=" 0" АLТ=" В" >

от пример встроенной в текст буквицы, она добавлена в начало параграфа.

Для экономии места приводится текст только того места странички где вставлена буквица. На всякий случай в качестве альтернативного текста дается буква " В", чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.

1. Разместите в Вашем документе moi.html разделитель anim_hr.gif.

2. Задайте этому изображению высоту, равную 2 пикселям.

3. Сместите анимированный разделитель в центр документа.

4. В слове Расписание замените букву Р изображением, взять его Вы можете у преподавателя.

5. Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране.

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

Задание 4. Графические маркеры.

Язык HTML позволяет создавать маркированные и нумерованные списки.

Пример маркированного списка:

o элемент списка

o элемент списка

o...

o элемент списка

В терминах языка HTML это выглядит так:

Пример нумерованного списка:

5. элемент списка

6. элемент списка

7....

8. элемент списка

В терминах языка HTML это выглядит так:

Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое - когда каждый сам имеет возможность создать маркер.

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

Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники.

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

2. Этот файл нужно поместить рядом с уже созданным файлом moi.html.

3. Теперь введем в тег < UL> атрибут STYLE:

< UL STYLE=" list-style-image: url('marker.gif'); " >

Ваш список должен выглядеть так:

элемент списка

Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.

Задание 5. Оформление кнопок.

Еще одно частое применение графических элементов - это оформление кнопок.

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

Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики.

1. Чтобы создать кнопку, поместите в Ваш HTML-документ следующий код:

< BUTTON> ЭТO KHОПKА< /BUTTON>

В браузере она должна выглядеть так:

Между тегами < BUTTON>...< /BUTTON> можно поместить не только текст, но и изображение. Если мы поместим туда тег < IMG>, то получим кнопку с графическим изображением.

2. У преподавателя возьмите изображение home-button.gif, поместите его в ту же папку, что и файл moi.html.

3. Замените текст «ЭТO KHОПKА» на описание тега < IMG>, указывающего на файл home-button.gif.

4. В тег < BUTTON> введите атрибут onClick - этот атрибут позволяет описать действия, которые необходимо отработать браузеру при шелчке мыши по объекту. Обновленный тег должен вылядеть так: < BUTTON onClick=" location.href=''" >

Теперь при нажатии указателем мыши на созданную кнопку браузер перейдет на главную страницу:

? Контрольные вопросы:

1. С помощью какого тега происходит вставка графических объектов в Web-страницу?

2. Каким образом создать фоновое изображение Web-страницы?

3. Как создать маркированные и нумерованные списки?

4. Как поместить кнопки на создаваемой Web-странице?

5. Какое расширение будет иметь созданная Web-страница в Блокноте, содержащая графические изображения?

6. Каким главным условием является отображение на Web-странице созданных в ней графических изображений, кнопок, фонового рисунка?