Лабораторная работа № 9. Лабораторная работа 9 Язык гипертекстовой разметки html. Работа с изображениями. Создание собственного Web сайта. Внимание

Скачать 0.79 Mb.

Название	Лабораторная работа 9 Язык гипертекстовой разметки html. Работа с изображениями. Создание собственного Web сайта. Внимание
Анкор	Лабораторная работа № 9.doc
Дата	17.11.2017
Размер	0.79 Mb.
Формат файла
Имя файла	Лабораторная работа № 9.doc
Тип	Лабораторная работа #11271

Лабораторная работа № 9 «Язык гипертекстовой разметки HTML. Работа с изображениями. Создание собственного Web - сайта».
ВНИМАНИЕ

Не выключайте компьютер после завершения работы.
Прежде чем приступать к оформлению отчета, прочитайте работу целиком и попробуйте сначала выполнить ее, не создавая отчет. Это позволит вам не задавать лишних вопросов преподавателю.
В процессе выполнения данной работы необходимо оформить отчет, который будет представлять собой несколько HTML страниц. Внимательно читайте работу. В тексте приведены задания для выполнения. Они выделены синим шрифтом. Затем необходимо выполнить самостоятельное задание.

Web-графика

Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web-документов. Сегодня графические элементы Web-страниц используют два основных формата — GIF и JPEG (новый формат PNG пока еще нельзя считать общепринятым). Все графические браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны распознавать и отображать файлы этих форматов.

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

Файлы формата GIF (Graphic Interchange Format) имеют расширение .GIF. Изображения в этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может занимать значительно меньше места, чем неупакованный растровый рисунок (например, в формате .BMP).

Спецификация формата GIF позволяет создавать файлы .GIF, обладающие специальными возможностями.

Один из цветов изображения может быть объявлен прозрачным. Это означает, что в соответствующих местах сквозь него будет проглядывать фон Web-страницы, что позволяет задать не только прямоугольную форму рисунка, но и лает его более естественным.
Чересстрочные изображения при их приеме из Интернета прорисовываются постепенно, вначале грубо, а затем все более и более четко. Это «скрадывает» время, необходимое на их загрузку из Интернета, особенно при приеме информации по медленным линиям.
GIF-анимация превращает обычный рисунок в небольшой видеоролик. В стандартном файле с расширением .GIF хранится набор кадров, а также сценарий их отображения.

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

Файлы формата JPEG (Joint Photographic Expert Group — по названию группы исследователей, предложившей этот формат, читается «джей-пег») могут иметь расширение .JPEG или .JPG. Формат предназначен для хранения фотографических изображений, использующих 24-разрядный цвет. При конвертировании в формат JPEG происходит потеря части информации, приводящая к некоторому ухудшению качества изображения, обычно незаметному на глаз.

При выборе формата изображения в первую очередь принимают во внимание объем получающегося файла и во вторую — качество изображения. При загрузке Web-документа львиную долю времени занимает именно загрузка иллюстраций, так что приветствуется любая экономия. При выборе формата рекомендуется создать два файла: в формате GIF и в формате JPEG с минимально приемлемым качеством, после чего выбрать вариант, имеющий меньший объем.

Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Web-страниц. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом . Тег должен содержать обязательный атрибут SRC=, задающий адрес URL файла с изображением в относительной или абсолютной форме.

При отображении рисунка браузер по умолчанию использует его реальные размеры. Если рисунок необходимо отмасштабировать, применяют атрибуты WIDTH= и HEIGHT=, задающие ширину и высоту рисунка (в пикселах), соответственно. Если эти параметры заданы, то браузер может определить, какое место надо выделить для отображения рисунка, еще до того, как рисунок загружен. Это несколько ускоряет отображение загружаемой страницы, так что удобно задавать эти атрибуты

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

Для изображения, которое действительно включено в строку, можно задать режим взаимодействия с текстом с помощью атрибута ALIGN=.

Этот атрибут может принимать три значения:

если задано ALIGN="BOTTOM", то нижняя граница изображения совмещается с основанием текстовой строки;
если задано ALIGN="MIDDLE", то середина изображения совмещается с серединой текстовой строки;
если задано ALIGN="TOP", то верхняя граница изображения выравнивается по верхнему обрезу текстовой строки.

Однако более предпочтительно использование «плавающего» изображения, обтекаемого текстом, что также достигается использованием атрибута ALIGN=:

если задано ALJGN="LEFT, то изображение размещается у левого края страницы, а последующий текст размещается справа от него;
если задано ALIGN="RIGHT", то изображение размещается у правого края страницы, а последующий текст размещается слева от него.

В этом случае рекомендуется помещать тег в самое начало соответствующего абзаца.

Однако нормальный режим обтекания требует, чтобы между текстом и изображением оставался некоторый промежуток. Задать величину этого промежутка можно при помощи атрибутов HSPACE= (по горизонтали) и VSPACE= (по вертикали). Размеры задаются в пикселах.

Создавая иллюстрированные страницы, не следует забывать, что не все смогут увидеть эти иллюстрации. Читателей, не имеющих адекватного средства просмотра, можно ознакомить с содержанием иллюстраций при помощи альтернативного текста. Альтернативный текст задается как значение атрибута ALT= и отображается вместо картинки, если она по каким-то причинам не может быть выведена.

Так как изображение задается как текстовый элемент, оно может быть помещено внутрь другого текстового элемента, например, задающего гиперссылку (тег <�А>). В этом случае изображение становится изображением-ссылкой. При отображении документа на экране компьютера такое изображение отличается синей рамкой и изменением формы указателя при наведении.

Еще один способ применения изображений на Web-страницах состоит в использовании их в качестве фонового рисунка. При отображении документа, содержащего фоновый рисунок, на компьютере рабочая область окна заполняется этим рисунком последовательно (как паркетом), считая от верхнего левого угла документа окна. Фоновый рисунок задается с помощью атрибута BACKGROUND= в теге . Значением этого атрибута должен быть абсолютный или относительный адрес URL для файла с изображением.

Выравнивание изображений

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

Таблица 1. Значение параметра ALIGN

Значение параметра ALIGN	Действие параметра
TOP	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
TEXTTOP	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения посередине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

Поясним действие параметров выравнивания, приведенных в таблице. Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.

К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы).

Приведем пример HTML-кода, в котором используются изображения, как элемент строки.

Выравнивание

по верхнему краю

Выравнивание побазовой линии

Файл eagle.jpg скопируйте (НЕ ПЕРЕМЕЩАЙТЕ) из папки с лабораторным практикумом в папку с вашими страницами. Его изображение может отличаться от изображенного в примере.

Созданную страницу сохраните с именем lab9_1.html.

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

Поступающим в АГТУ гарантируется независимо от пола, расы, национальности, языка, происхождения, места жительства, отношения к религии, убеждений, принадлежности к общественным организациям (объединениям), возраста, состояния здоровья, социального, имущественного и должностного положения, наличия судимости получение бесплатного высшего профессионального образования на конкурсной основе в пределах государственных образовательных стандартов, если образование данного уровня гражданин получает впервые.
Ограничение прав граждан на получение профессионального образования в АГТУ по признаку пола, возраста, состояния здоровья, наличия судимости определяется законами Российской Федерации только в той мере, в какой это необходимо в целях защиты нравственности, здоровья, прав и законных интересов других лиц, обеспечения обороны страны и безопасности государства. Для приема документов от поступающих, организации и проведения вступительных испытаний и зачисления в АГТУ организована приемная комиссия.

Выравнивание ALIGN=TOP

Выравнивание ALIGN=TEXTTOP

(текст абзаца)
(текст абзаца)