Создание гиперссылок и связывание веб-страниц

Оформление внешних и внутренних гиперссылок.

Гипертекст в отличие от обычного текста в html-документе содержит ссылки на объекты (другие страницы, документы, рисунки и т.п.), находя­щиеся вне данного текста. Гипертекстовые ссылки могут быть представ­лены как отдельными словами и фразами, так и изображениями. Те и дру­гие могут быть выделены на веб-страницах, для текста – это подчерки­ва­ние и выделение цветом (обычно – синим), для рисунков – это выделение рамками.

Обнаружить наличие гиперссылки можно подведением к ней мыши, в ответ на это действие появля­ется характерный указатель в виде кисти ру­ки с вытянутым пальцем. (Для рисунков рамка может отсутствовать да­же при наличии гиперссылки, ее и так несложно идентифици­ро­вать). Щелчок мыши по гиперссылке приводит к перходу по адресу гипер­ссылки. В html- документе гиперссылка оформляется парным тегом <a>. Гиперссылки бывают внешние и внутренние.

Для внешних гиперссылок используется адресный атрибут href, например: <a href =http: // www.microchip.com/ pic.html> </a>. Открытие документов по внешним ссылкам может быть разным в зависимости от значения атрибута taget тега <a>. По умолчанию действует значение taget= _blank и тогда документ открывается в новом окне. Если taget= _self, то документ открывается в том же окне.

Внутренние ссылки на определенную позицию в текстовом докумен­те оформляются с применением «якоря». Это удобно, когда документ обширный и в нем бывает трудно отыскать нужный абзац, термин или просто нужную позицию. Якорь – это метка в гипертексте html-документа, которая задается в теге <a> с его атрибутом name.

Пусть эта метка (якорь) имеет имя «M10». Тогда внутренняя ссылка в тексте документа оформляется как <a href=”#М10”> </a>, а в позицию текста документа (точку входа), куда должен осуществляться переход по ссылке, вставляется тег: <a name=М10> </a>.

 

5.2. Практические задания по теме: задания 5-1…5-11.

Задание 5-1.

1). В папке Prakt5 открыть файл bmt.txt и добавить в абзацы: КАРДИОГРАФЫ, ЭНЦЕФАЛОГРАФЫ, СПИРОГРАФЫ, РЕОГРАФЫ ссылки на пока не существующие документы – источники с техническими данными на каждый прибор. Предполагается, что файлы-источники лежат в той же папке Prakt5 и имеют имена: kar1.html, kar2. html, kar3. html, kar4. html (для абзаца КАРДИОГРАФЫ); enc1.html, enc2.html, enc3.html, enc 4. html (для абзаца; spi1. html, spi2. html, spi3. html, spi4. html (для абзаца СПИРОГРАФЫ); reo1. html, reo2. html, reo3. html, reo4. html (для абзаца РЕОГРАФЫ) и сохранить документ как файл bmt5-1.html.

(Ссылки оформляются по образцу <a href = “адрес файла-источни­ка>. Вставлять их следует после тега параграфа <p align=”center”>, перед тегом <img>).

2). Создать в той же папке файл-источник kar1.html сначала как пус­той до­кумент. Скопировать в него из документа Opis3.html, находя­щегося в папке Praktika, заголо­вочную часть со стилем h1. Сохранить результат и просмотреть в браузере.

3). Аналогично подготовить остальные документы-источни­ки и про­ве­рить в браузере действие ссылок в документе bmt5-1.html.

Задание 5-2.

1). Доработать документы-источники, вставив в них содержательную часть из файлов, соответственно: k1.txt, k2.txt, k3.txt, k4.txt (Кардиографы); e1.txt, e2.txt, e3.txt, e4.txt (Энцефалографы); s1.txt, s2.txt, s3.txt, s4.txt (Спирографы); r1.txt, r2.txt, r3.txt, r4.txt (Реографы). Сохранить результа­ты и просмотреть в браузере доработанные веб-страницы с техническими данными приборов.

(Файлы: kar1.html, kar2.html, kar3.html, kar4.html; enc1.html, enc2.html, enc3.html, enc 4.html; reo1.html, reo 2.html, reo.html, reo4.html).

2). Открыть документ bmt5-1.html и вновь проверить в нем дейст­вие ссылок на документы-источники.

Задание 5-3.

1). Начать подготовку сайта с создания главной страницы: скопиро­вать файл bmt5-1.html в папку Praktika и переименовать его в index.html.

2). Ознакомиться с рисунками jmp_gl.png, jmp_to.png, jmp_back.png из папки BAZA, вложенной в папку Praktika.

3). Скопировать документы: Kont1.html, Dost2.html, Opis3.html, Zakaz4.html, – в папку BAZA (дополнительные страницы создаваемого сайта).

3). Создать графические кнопки для реализации взаимных переходов между веб-страницами Kont1.html, Dost2.html, Opis3.html, Zakaz4.html и главной веб-страницей index.html.

Для этого в каждом из документов создать таблицу из строк с вло­жен­ными рисунками jmp_gl.png, jmp_to.png, jmp_back.png, которые встроены в гипер­ссылки на указанные веб-страницы. При этом следует предусмо­треть переходы между страницами в порядке расположения пунктов меню, на главной странице. Так, например, страница «Доставка», вызываемая из 2-го по порядку пункта меню на главной странице, должна иметь переходы к предыдущей странице «Контакты» и к следующей для нее странице – «Описание». Переход на главную страницу должен выпол­няться только из страниц «Контакты» и «Заказ» (соответ­ствующих крайним пунктам меню). Схема переходов показана на рис. 5.1.

Главная

Контактыты

Доставка

Описание

Главная

Заказ

 

Рис 5.1. Схема переходов между веб-страницами сайта.

 

Сохранить документы в папке BAZA и проверить действие переходов.

(Пример строки таблицы:

<td> <p align="center" > <a href="D:/Praktika/index.html"> <img src="jmp_gl.png" width="120" height="40" border="0" /></a></p></td>)

 

Задание 5-4.

1). В html-документы (веб-страницы) с техническими данными приборов (всего 16 доку­мен­тов) ввести графическую кнопку «Оформить заказ» табличным методом (по аналогии с заданием 5-3). Для оформ­ле­ния заказа на соответствующий прибор в таблице предусмотреть гипер­ссылку на документ D:/ Praktika/ blank_z.html) из рисунка (графической кнопки) D:/ Praktika/oform_z.png. Сохранить результаты как файлы с теми же именами, но в папке Praktika.

(Шаблон для оформления графической кнопки:

<table width="200" height="70" border="0" align="left" cellpadding="2">

<tr > <td> <p align="center" > <a href="blank_z.html"> <img src="oform_z.png" width="200" height="70" border="0" > </ a> </p> </td> </tr> </table>

 

Задание 5-5.

1). Открыть главную страницу (файл index.html в папке Praktika), скорректировать адреса ссылок на документы-источники, сохранить изме­не­ния и проверить действие всех ссылок, начиная с вызова документов из меню. (Последние версии файлов-источников хранятся в папке Praktika).

 

Задание 5-6.

1). Добавить в конец документа bmt5-1.html заголовок и первые два абза­ца из файла Opis3.html и сохранить документ как файл bmt5-2.html.

2). В заголовочную часть документа bmt5-2.html из файла Opis3.html вставить определение стилей tip1 и tip2 и сохранить документ.

3). Заголовок добавленных абзацев изменить на «НАША ПРОДУК­ЦИЯ» с выравниванием по центру. В определение стилей ввести параметр margin-left =200px, сохранить результат и проверить в браузере.

 

Задание 5-7.

1). Для слова «продукция» в новом тексте последнего документа ввести гиперссылку на файл Opis3.html (в том числе и в заголовке «НАША ПРОДУКЦИЯ»).

Сохранить результат как файл bmt5-3.html.

2). Открыть документ bmt5-3.html, обратить внимание на то, что слово «продукция» оказалось подчеркнутым, что указывает на гипер­ссылку. Проверить действие гиперссылки по щелчку мыши.

 

Задание 5-8.

1). Создать внутреннюю ссылку из заголовка «МЕДИ­ЦИН­СКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ» в конец документа, на той же странице.

Сохранить документ как файл bmt5-4.html и проверить действие ссылки в браузере.

 

Рис. 5.2. Веб-страница документа bmt5-8.html (начало).

Рис. 5.2. Веб-страница документа bmt5-8.html (продолжение).

 

Рис. 5.2. Веб-страница документа bmt5-8.html (окончание).

Задание 5-9.

1). В документе bmt5-4.html изъять предыдущую ссылку для заго­ло­в­ка «МЕДИ­ЦИН­СКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ». Изменить адрес ссылки на <a href=http://www.mail.ru> для слова «про­дук­ция» в тексте до­ку­мента (после заголовка «НАША ПРОДУКЦИЯ»). Сохранить резуль­тат как файл bmt5-5.html и проверить действие ссылок.

Задание 5-10.

1). Добавить атрибут taget=_self к ссылке в слове «ПРОДУКЦИЯ» в документе bmt5-4.html. Сохранить результат как файл bmt5-5.html и про­верить действие ссылки в браузере. Убедиться, что вызываемый документ-источник открывается в том же окне, что и исходный документ. В панели вкладок браузера должен присутствовать только один ярлычок документа.

Задание 5-11.

1). Удалить из документа bmt5-5.html атрибут taget (по умолчанию taget= _blank). Сохранить документ как файл bmt5-6.html и проверить дей­ст­вие ссылки в слове «ПРОДУКЦИЯ» в браузере. Убедиться, что вызыва­емый документ-источник открывается в новом окне.

В панели вкладок браузера должны присутствовать два ярлычка доку­мента. Если изменить размер открытого документа, то различие в действии атрибутов taget=_self и taget=_blank проявляется очевидным образом.