Методические указания

к практическому занятию

«Разработка web-сайта» Тема: Работа с графическими изображениями и гиперссылками

Цель - изучение способов создания гипертекстовой организации HTML - страниц с использованием ги­перссылок.

ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

Работа с графическими изображениями

Графические файлы включаются в HTML-документы с помощью команды <IMG>. Допускается использование файлов в формате GIF или JPG/JPEG (для систем, работающих под MS Windows, допускаются файлы формата BMP).

C тегом <IMG> могут быть использованы атрибуты:

SRC= определяет URL-адрес (имя) графического файла.

ALT= - атрибут, указывающий, что ставить на место рисунка, если браузер не умеет показывать графические файлы или вследствие медленной скорости перекачки вы не получили файл по сети (рис. 9).

HEIGHT= n – Задает высоту контура (здесь n - количество пикселей), в котором будет размешено изображение.

WIDTH= n - Задает ширину контура (здесь n - количество пикселей), в котором будет размещено изображение.

Например,

<IMG SRC="rogd03.jpg" WIDTH=250 HEIGHT=113 ALT="New Year">.

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

HSPACE=т - ширина чистых полей в пикселях слева и справа изображения.

VSPACE = т - ширина чистых полей в пикселях сверху и снизу изображения.

BORDER= n – ширина рамки изображения.

Для создания «плавающей» картинки, которую обтекает текст, используют атрибут ALIGN= LEFT (или RIGHT).

В конце плавающего объекта обязательно должна присутствовать команда BR с атрибутом CLEAR=LEFT (или RIGHT), который прекращает обтекание картинки. После этой команды текст выводится ниже графического файла.

Ссылки

Связь между документами и отдельными частями документов дается через соответствующие гиперссылки. Тег гиперссылки имеет следующую структуру:

<A HREF= “URI”> текст ссылки </A>,

где

URL –уникальный доменный адрес;

текст ссылки – текст, который в окне браузера будет выделен как ссылка;

“ ” - кавычки необязательны, но желательны.

Например,

<A HREF=”http://www.sumdu.edu.ua”> Сумский государственный университет </A>.

Фраза «Самые интересные новости» отобразится на странице в соответствии с принятыми правилами форматирования гиперссылок (по умолчанию используется синий подчеркнутый шрифт). Если щелкнуть мышкой на эту фразу, то в окно браузера автоматически будет загружена заглавная страница сайта www.sumdu.edu.ua

<A HREF=”http://www.lenty.ru/ua/01/21.html”> Наука в Украине </A>.

При нажатии мышкой на ссылку «Наука в Украине» в окно браузера автоматически будет загружена информация конкретной страницы (21.html) сайта www.lenty.ru .

При использовании гиперссылок на страницы внутри одного сайта рекомендуется выполнять относи­тельную адресацию. В этом случае указывается не полный путь к странице, на которую делается гиперссылка, а относительный путь, в котором задается только расположение страницы - адре­са относительно исходной страницы, например, запись <А HREF="tables.hlml ⁿ>Таблицы</A> означает, что страница tables.hlml расположена в том же каталоге, что и страница, из которой делается гиперссылка.

Запись <А HREP="..\pages\tables.html "> Таблицы</А> предусматривает гиперссылку на страницу, которая находится в папке pages, а эта папка находится в той же папке, что и исход­ный файл, содержащий тэг <А>.

Набор символов « ../ » - указывает на то, что следует перейти в каталог верхнего уровня.

В HTML предусмотрена возможность делать ссылку не на весь документ, а на некую его часть, которая заранее была поименована, как закладка. Для этого у тега <A> существует атрибут.

NAME=“метка” - задание метки внутри HTML документа, где метка – это любой символ или набор символов.

Например, <A NAME=”b”>Текст ссылки </A>,

<A NAME=b> Текст ссылки</A>,

<A NAME=”2”>Текст ссылки</A>.

На определенную закладку всегда можно сделать ссылку из:

• любого места того же файла <A HREF=”#метка”> Текст ссылки </A>;

• из другого файла одного сайта

<A HREF=../../razdel2/2.html#2> Где купить ПО? </A>;

- из другого сайта

<A HREF=”http://www.user3.sumy.ua /razdel2/2.html#2> ПО для MAC</A>.

Кроме того, к гиперссылке можно добавить комментарий (поясняющую над­пись, которая воспроизводиться если к тексту гиперссылки под­вести указатель мышки). Для этого используется атрибут TITLE команды <А>

Например, <А TITLE= "Текст комментария" HREF="test.html>Teкcm</A>.

ЗАДАНИЯ К ВЫПОЛНЕНИЮ РАБОТЫ

1. Ознакомиться с содержанием теоретической части работы.

2. Работа с графикой.

   1. Создать текстовый файл image.html.

   2. В HTML-документ поместить текст из файла bank_tab.txt.

   3. С использованием любого графического редактора определить размер картинки smile.jpg (высота, ширина в пикселях).

   4. Разместить в тексте картинку smile.jpg с указанием альтернативного текста «Улыбка».

   5. Разместить в тексте картинку smile.jpg с указанием ширины чистоты полей справа и слева 10 пикселей, сверху и снизу в 5 пикселей.

   6. Выполнить обтекание картинки smile.jpg текстом справа.

   7. Выполнить обтекание картинки smile.jpg текстом слева.

3. Работа с гиперссылками

   1. Создать текстовый файл link.html, в котором разместить ссылки на наиболее часто используемые сайты в процессе обучения.

   2. В файле index.html на фамилии студента, выполнившего отчет, установить гиперссылку на электронный адрес студента.

   3. В конце файла index.html добавить ссылку на файл soderg.html с текстом ссылки «Содержание».

   4. В текстовом файле soderg.html внести следующие изменения:

      1. В текст «Работа с текстом в HTML» установить гиперссылку на файл text.html.

      2. В текст «Таблицы в HTML. Работа над сложными таблицами» установить гиперссылку на файл table.html.

      3. В текст «Списки в HTML» установить гиперссылку на файл list.html.

      4. В текст «Размещение графических изображений на web-страницах» установить гиперссылку на файл image.html.

      5. В текст «Ссылки» установить гиперссылку на файл link.html.

      6. В конце файла добавить гиперссылки с текстом «Вернуться назад» - на титульную страницу отчета (index.html) и «Листать вперед» - на страницу text.html.

   5. В каждом из ниже перечисленных файлов добавить ссылки «Листать назад», «Содержание», «Листать вперед» согласно таблице1

Таблица 1

Файл	Текст ссылки
	«Листать назад»	«Содержание»	«Листать вперед»
text.html	index.html	soderg.html	table.html
table.html	text.html	soderg.html	list.html
list.html	text.html	soderg.html	image.html
image.html	list.html	soderg.html	link.html
link.html	image.html	soderg.html	index.html