Гиперссылки Перед создателями ЭУП всегда стоит ... имеющийся учебный материал (теоретическая часть, ...

Гиперссылки
Перед создателями ЭУП всегда стоит задача: расположить весь
имеющийся учебный материал (теоретическая часть, практические
задания, лабораторные работы, глоссарий, тесты и многое другое) на
электронном носителе, так чтобы студент имел возможность легко, при
простом нажатии на клавишу, осуществлять переходы по всему
документу, а если текст большой, организовать переходы внутри
страницы.
К счастью, одним из достоинств Internet -технологий заключается в
такой возможности. Автор может организовать переходы по
документам как среди своей Web -страницы, так и ссылаться на Web страницы других авторов.
Таким образом, ссылка представляет собой логическую связь одного
элемента документа с другим документом в том же самом или в другом
документе.
Обычно гиперссылка - это слово (краткое предложение) либо
графическое изображение (рисунок) при щелчке на них, происходит
переход на другой файл, либо в другое место данного документа.
Браузер выделяет этот фрагмент цветом, а после использования
гиперссылка меняет цвет.
Наиболее удачное определение гиперссылки, предложил М.М.
Субботин1: «Гипертекст — это форма организации текстового
материала, при которой его единицы представлены не в линейной
последовательности, а как система явно указанных возможных
переходов, связей между ними. Следуя этим связям, можно читать
материал в любом порядке, образуя разные линейные тексты»
Отметим, что здесь не конкретизируется способ представления
текста (рукопись, книга, электронное издание).
Применительно к компьютерным технологиям представляется
удачным определение гиперссылки, приведенное А.В. Поликахиным
и А.Ю. Савиным2: «Гипертекст—это информационный массив, в
Субботин М.М. Новая информационная технология: создание и
обработка гипертекстов. М.: «Новинтех», 1992.
1
[Поликохин А.В., Савин А.Ю. Гипертекст: сущность состояние,
проблемы, перспективы. М.: 1993. 126 с.].
2
3
котором заданы и автоматически поддерживаются связи между
выделенными элементами»
Ссылки характеризуются двумя закладками (anchor – якорь, закладка)
– начальная (source anchor) и конечная (destination anchor) закладки.
Начальная закладка устанавливается в том месте документа, где
требуется пояснить часть документа, расшифровать некоторые
сокращения, перейти в другое место данного документа либо на другой
документ, сайт. Начальная закладка может располагаться в любом
месте документа, в таблицах, во фреймах, а также на рисунках.
Конечная закладка определяет пункт назначения начальной закладки.
В HTML–документах различают внутренние и внешние гиперссылки.
Внутренние ссылки осуществляют переход в пределах одного и того
же документа. Обычно этот вид ссылок применяется в больших
документах для перемещения по разделам. Например, в начале
документа размещается содержание, состоящее из ссылок на заголовки
разделов документов.
Внешние ссылки (удаленные гиперссылки) обеспечивают переходы к
другим документам, расположенным на других Web- серверах.
Рассмотрим основные правила, которых нужно придерживаться при
создании ссылок.
Элемент привязки < a >
Для создания ссылок применяется элемент <a>, называемый элементом
привязки, или, другими словами, якорным элементом. Название
элемента <a> происходит от первой буквы слова anshor –якорь, и цель
его отобразить содержимое ссылки на экране и указать браузеру, к
какому ресурсу необходимо перейти при вызове ссылки. Тег <a>
должен выполнять простую задачу: отображать содержимое на экране
и указывать браузеру, к какому ресурсу необходимо перейти при
щелчке на ссылке. Внутри тега <a> ставится атрибут href , с помощью
которого определяется целевой ресурс, а внутри контейнера
размещается содержимое ссылки. Начальная закладка может быть в
виде текста, слова, предложения, рисунка, и обязательно выделяется
цветом и подчеркиванием.
Цвет ссылки зависит от того, в каком состоянии находится ссылка:
 непосященная ссылка (link)- это ссылка на страницу, о посещении
которой в браузере нет сведений, иными словами это цвет ссылки
в которую ещё не заходили;
 посещенная ссылка (vlink) - это ссылка на страницу, сведения, о
посещении которой имеются в браузере.
4
 активная ссылка (alink) - это ссылка, на которой щелкают мышью в
текущий момент.
Цвет применяемых ссылок задается с помощью атрибутов link, vlink,
alink.
Например:
<body bgcolor="#FFFFFF" text="black" link="#FF0000 " alink="#00FF00"
vlink="#0000FF">
Цвет ссылок можно задавать в символьном эквиваленте,
шестнадцатеричном коде или формате цветовой модели RGB. textdecoration="none"
В этом примере цвет задан в шестнадцатеричном коде (от 00 до FF с
приставкой # (читается "диез")).
Обратите внимание на то, что ссылки по умолчанию кроме
отличительного цвета, ещё и подчеркиваются. Однако некоторые
дизайнеры отменяют подчеркивание, чем самым ставят в
затруднительное положение клиентов. Посетители сайтов привыкли к
тому, что ссылки подчеркиваются и могут понять, в этом случае, где
ссылка, а где просто выделенное слово для того, чтобы на него
обратили внимание. Пример неподчеркнутой ссылки, но с
использованием задания цвета ссылки
Задание цвета ссылок при помощи каскадных таблиц стилей разберём
ниже.
Простейшая программа создания ссылки выглядит так:
< a href =”адрес ссылки”>комплексные соединения</ a >
Содержимое ссылки это выделенное слова “комплексные соединения”.
В тексте это слово будет отличаться от других цветом, поэтому
элементы ссылок лучше всего размещать, не прерывая текста
документа пробелами и переносами строк. Текст должен быть кратким
и содержательным.
Задавать ссылки можно:
• по абсолютному адресу;
• по относительному;
• по внутреннему.
Задание ссылки по абсолютному адресу
Задание ссылки по абсолютному адресу указывается полный адрес:
<a href =” http :/ www . side . ru / docs / page 1. html ”>комплексные
соединения</ a >
При этом задании независимо от того, с какого документа клиент
нажмет на ссылку, он перейдет по адресу:
http :/ www . side . ru / docs / page 1. html
5
Задание ссылки по относительному адресу
При относительном переходе в атрибуте href указывается ссылка на
документ, который расположен в том же каталоге, что и основной
документ (документ с которого осуществляется переход). Например:
<a href=”page1.html”>Text</a>
Если документ, на который производится ссылка и основной документ,
находятся в разных каталогах, то переход запишется так:
<a href=”...Figures/page1.html”>Text</a>, где Figures каталог, в котором
находится файл page1.html.
Задание ссылки по внутреннему адресу
Если документ слишком большого размера и нет возможности разбить
его на несколько файлов, то вводятся внутренние ссылки, которые
позволяют делать переходы внутри страницы. Структура внутренней
гиперссылки включает две части:
• ссылка;
• ее идентификатор - #
В общем, ссылка будет выглядеть так:
< a href =”#гидролиз”>гидролиз солей</ a >
...............................................................
.............................................................
Основной текст
.............................................
<a name=” гидролиз ”></a>
Задание ссылки на рисунок или по рисунку
При ссылке на рисунок вводится другая конструкция:
<a img src=” Atom.gif”</a>, т.е. в теге <a> вместо атрибута href
вставляется img src="" внутри которого, вставляется путь к рисунку. В
этом случае рисунок будет загружаться вместе с Web - страницей. Если
желаем загрузить рисунок по мере необходимости, то необходимо
сделать на его ссылку типа:
<a href="Ro1.jpg"><imgsrc="Ro1.jpg></a>
Создание всплывающих подсказок для гиперссылок
Часто отпадает необходимость переходить по гиперссылке, если
всплывет некоторая подсказка, объясняющая смысл ссылки. Для этого
в тег <a> вставляется атрибут alt для людей с дефектом зрения. При
6
наведении на рисунок мыши, проговаривается текст, которые
описывает рисунок.
Тот же принцип действует для текстовых ссылок, однако, вместо
alt="" вставляется title="". Например <a href="c1.htm" tatle="При
переходе к файлу c1.htm возникнет ситуация, в котором текст
представляется в другой кодировки. Для прочтения необходимо
изменить кодировку - для этого проведите переход Вид - Кодировка windows (кириллица)">Переход к файлу c1.htm</a>
Лабораторная работа 1. Гиперссылки
Ход работы
1. Откройте “Блокнот”;
2. Скопируйте приведенную ниже программу;
3. Создайте каталог и несколько файлов и рисунков (расширение
gif или jpg), на которые будете в дальнейшем ссылаться;
4. Сохраните программу как Web-документ (расширение htm) в
созданном каталоге;
5. Замените ссылки, приведенные в программе, на созданные
вами;
6. Отчет по работе представьте преподавателю.
Для более полного ознакомления с гиперссылками смотри ссылку на
Web -документ:
<a href=”Chem11.htm”> </a>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title> ВПЕРЁД </title>
</head>
<body>
<b>
<p ALIGN="left">
<a href="GlossTX.htm"> ВПЕРЁД </a>
<h2 align="center">Введение в комплексные соединения</h2>
соединения< br >< br >
<p align="center">
<font size="2">Определения, составные части и
7
классификация</font>
</b>
<p><font size="2">Комплексными называются химические соединения
сложного состава, состоящие из центрального атома и лигандов, с
координированных вокруг центрального атома.
Комплексные соединения образуются из более
простых.</font></p>
<p><img src="k1.jpg" width="251" height="173" alt="k1.jpg (6207 bytes)"
></p>
<p ><em><strong><font size="2"> Рис .1 Образование
комплексной соли </font></strong></em></p>
<p><img src="k2.jpg" width="296" height="188" alt="k2.jpg (6919 bytes)"
align="left"><em><strong><font
size="2">
Рис
.2
Строение
комплексного соединения </font></strong></em>
<p><font
size="2">3KCN
+
Fe(CN)<sub>3
</sub>=
K<sub>3</sub>[Fe(CN)<sub>6</sub>]
</font></p>
<p><font size="2">4NH<sub>3 </sub>+ CuSO<sub>4 </sub>=
[Cu(NH<sub>3</sub>)<sub>4</sub>]SO<sub>4</sub></font></p>
<p><font size="2">В квадратные скобки ставят собственно комплекс.
Внутри скобок - внутренняя координационная сфера, а за скобками внешняя. </font>
<p ><font size="2"><a name="komp"> Комплексы </a>
(комплексные, координационные соединения) - это молекулы или
ионы, обладающие высокой симметрией, имеющие атом в центре
симметрии - центральный атом, комплексообразователь, электронная
валентность
которого
больше
стехиометрической.
Вокруг
центрального атома располагаются атомы или группы атомов - <a
name="lig"><b>лиганды</b>, которые и образуют симметричную
фигуру.</a></font></p>
<p ALIGN="center"><img src="k3.jpg" width="298" height="192"
alt="k3.jpg (7073 bytes)" align="right" ></p>
<p ALIGN="center"><em><strong><font size="2"> Рис. 3 Квадратный
комплекс
[Pt(NH3)<sub>2</sub>Cl<sub>2</sub>]
</font></strong></em></p>
<p ><font size="2"> Например, [Pt(NH3)<sub>2</sub>Cl<sub>2</sub>]
квадрат с атомом Pt в центре (V<sub>стх.</sub> = 2, Vе = 4) и
лигандами
Cl<sup>-</sup>
и
NH<sub>3</sub>;
[CoF<sub>6</sub>]<sup>3-</sup> октаэдр с атомом Co </font>
8
<br>
<font size="2">в центре и лигандами F<sup>-</sup> (V<sub>стх</sub>
= 3, Vе = 6) .</font></p>
</html>
Лабораторная работа 2
Гиперссылки между папками и файлами
Цель работы: организовать переходы между файлами внутри папок и
между файлами находящихся в других папках.
1. На рабочем столе компьютера, создайте три папки с
названиями: папка1, папка2, папка3;
2. Откройте “Блокнот” и наберите текст: Мы находимся в
папка1, файл1.htm;
3. Сохраните файл под именем: файл1.htm. Создайте ещё два
файла: файл2.htm, файл3.htm с текстами: “Мы находимся в
папка1, файл2.htm” и “Мы находимся в папка1, файл3.htm”;
4. Откройте “Блокнот” и наберите текст: Мы находимся в
папка2, файл1.htm;
5. Сохраните файл под именем: файл1.htm. Создайте ещё два
файла: файл2.htm, файл3.htm с текстами: “Мы находимся в
папка2, файл2.htm” и “Мы находимся в папка2, файл3.htm”;
6. Откройте “Блокнот” и наберите текст: Мы находимся в
папка3, файл1.htm;
7. Сохраните файл под именем: файл1.htm. Создайте ещё два
файла: файл3.htm, файл3.htm с текстами: “Мы находимся в
папка3, файл2.htm” и “Мы находимся в папка1, файл3.htm”;
8. Организуйте переходы между файлами различных папок;
9. Отчёт о проделанной работе представьте преподавателю.
Списки
При написании электронных учебных пособий, (ЭУП) часто
необходимо создавать общее содержание всех глав (модулей) ЭУП,
параграфов, тем, лекций и т.д., то есть создать интерфейс ЭУП таким,
чтобы студенты могли легко ориентироваться в представленном
материале. В этом нам помогут списки - упорядоченное расположение
9
содержания.
Когда и в каком случае следует применять списки?
1. Информация в виде списка позволяет разбить большие
массивы данных на отдельные, четкие фрагменты, которые
человеку гораздо удобнее воспринимать, нежели весь поток в
целом.
Например:
Список рубрик;
o Новости
o Финансы
o Спорт
o Погода
o Горячая линия
2. Списки позволяют создавать понятную и логическую
внутреннюю
структуру
информационных
данных,
ориентироваться в которой - дело простое и удобное.
Например:
Состав интегрированного пакета;
1. Excel;
2. Access;
3. Outlook;
4. Publisher;
5. PhotoDraw.
6. Team Manadger
3. Использование удобно для отображения определенных
пошаговых и прочих последовательных процессов.
Например, создания содержания необходимо:
I.
На бумаге нарисовать общую структуру глав учебника;
II.
В блокноте ввести тег <ol tipe="1"> и между тегами <li> </li>
ввести главы;
III.
Главы разбить на параграфы;
IV.
В блокноте записать тег <ul tipe="disc"> и между тегами <li>
</li> ввести параграфы
V.
и т.д.
VI.
.......
Спецификация HTML предусматривает три основных типа списков:
1. Нумерованные списки;
2. Маркированные списки;
3. Списки определений (см словарь школьника)
Нумерованные списки
10
Для создания нумерованного списка используется тег-контейнер
<ol>,внутри которого располагаются пункты перечня информационных
данных, за указание которых отвечает тег <li>
<h3> Пример нумерованного списка </h3>
<HR align= "center" NOSHADE width="98%">
<ol>
<font face="Tahoma"><B>Визуальные эффекты Adobe Photoshop
7:</b></font>
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
</ol>
В результате получим нумерованный список следующего вида:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:
1. Drope Shadow
2. Bebel and Emboss
3. Color Overlay
Если в программу вставить <br> после, например, третьего номера <li
value="5">Stroke, то четвертый номер пропустится:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:
1. Drope Shadow
2. Bebel and Emboss
3. Color Overlay
5. Stroke
Параметры тега <ol>
Тег составления нумерованных списков <ol> может включать
параметры TYPE, START, COMPACT.
Параметр используется для указания типа нумерованного списка.
Помимо обычных арабских цифр могут применяться большие и
маленькие римские цифры, а также строчные и прописные латинские
буквы.
Программа:
<h3
align="center">
Пример
нумерованного
списка
</h3>
<HR align= "center" NOSHADE width="98%">
<ol>
<font face="Tahoma"><B>Визуальные эффекты Adobe Photoshop
7:</b></font>
<li>Drope Shadow
11
<li>Bebel and Emboss
<li>Color Overlay
<li value="5">Stroke</li>
</ol>
<ol type="i">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li value="5">Stroke</li>
</ol>
<ol type="a">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li value="5">Stroke</li>
</ol>
Вид:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:
1. Drope Shadow
2. Bebel and Emboss
3. Color Overlay
5. Stroke
i.
Drope Shadow
ii.
Bebel and Emboss
iii.
Color Overlay
v.
Stroke
a. Drope Shadow
b. Bebel and Emboss
c. Color Overlay
e. Stroke
Можно вводить и смешанную нумерацию, вводя параметры списка в
тег <li type="1">
Например:
Визуальные эффекты Adobe Photoshop 7:
1. Drope Shadow
b. Bebel and Emboss
iii.
Color Overlay
I.
Stroke
Маркированные списки
12
Маркированный список представляет собой ненумерованный и
неупорядоченный перечень элементов, для заголовка которых
используется специальные маркеры. В качестве маркеров выступают
специальные символы, называемые буллетами.
Для создания маркированного списка используется тег-контейнер <ul>,
внутри которого располагаются элементы самого списка <li>.
Пример:
<h3 flign="cente">Пример нумерованного списка </h3>
<HR align= "center" NOSHADE width="98%">
<ul type="circle">
<font face="Tahoma"><B>Визуальные эффекты Adobe Photoshop
7:</b></font>
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li>Stroke</ul>
<ul type="disc">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li>Stroke
</ul>
<p></p>
<ul type="square">
<li>Drope Shadow
<li>Bebel and Emboss
<li>Color Overlay
<li>Stroke
Вид:
Пример нумерованного списка
Визуальные эффекты Adobe Photoshop 7:
 Drope Shadow
 Bebel and Emboss
 Color Overlay
 Stroke
 Drope Shadow
 Bebel and Emboss
 Color Overlay
 Stroke
 Drope Shadow
13
 Bebel and Emboss
 Color Overlay
 Stroke
Списки определений (см. словарь школьника)
Список определений
- это особый
тип
структуризации
информационных данных , идеально подходящих для отображения
терминологических и толковых словарей, а также различных
справочников средствами HTML. Список определений состоит из двух
частей: самого определения (термина) и его содержательной части
(описания)
Структура списка определений описывается тегом-контейнером <DL>,
внутри которого указывается тег <DT>. определяющий заголовок, и
тег <DD>, описывающий содержательную часть определения.
Пример создания словаря:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
<title>Новая страница 1</title>
</head>
<body>
<center>
<h3><font size="3">Словарь школьника</font></h3>
<h3><font size="3">B</font></h3>
</center>
<dl>
<dt>Вакуум
<dd>Это состояние разряженного газа, находящегося при давлении
ниже атмосферного.
<dt>Векторная физическая величина
<dd>Это физическая величина, которая имеет не только численное
значение, но и направление
<dt>Вес тела
<dd>Это сила, с которой тело, вследствие его притяжения к Земле,
действует на опору или подвес
</dl>
</body>
</html>
14
Лабораторная работа 1.
Глоссарий
Цель работы: используя теги <dl>, <dt> и <dd>, составьте словарь
своего курса по образцу, представленному ниже.
Ход работы:
1. Создайте файл в одной из папок с названием “Glossary.htm”;
2. Создайте алфавит от А до Я;
3. Организуйте переходы на любую букву;
4. Заполните словарь;
5. Сдайте отчет преподавателю.
Примерный вид словаря:
Физика
B
Вакуум
Это состояние разряженного газа, находящегося при давлении
ниже атмосферного.
Векторная физическая величина
Это физическая величина, которая имеет не только численное
значение, но и направление
Вес тела
Это сила, с которой тело, вследствие его притяжения к Земле,
действует на опору или подвес.
1.
2.
Литература
Гаевский А.Ю. 100% самоучитель по созданию Webстраниц и Web-сайтов. HTML и JavaScript: учебное
пособие для вузов - М.: ТЕХНОЛОДЖИ – 3000, 2005. - 464
с.
Кэмпбел Марк Строим Web-сайты. Дизайн: пер. с англ. яз.
– М.: Триумф, 2006.- 480с.
15
3.
Петюшкин А.В. HTML. Экспресс-курс. – Спб.: БХВПетербург, 2003. – 256 с.: ил.
ТЕОРИЯ И ПРАКТИКА СОЗДАНИЯ ЭЛЕКТРОННЫХ УЧЕБНЫХ
ПОСОБИЙ
Гиперссылки и списки
Часть 3.
Методические указания по лабораторной работе
для слушателей дополнительного образования направления
“Преподаватель высшей школы”
Составитель Иванов Геннадий Филиппович
Подписано к печати
Формат 60х84/16. Бумага офсетная.
Печать RISO. Усл. печ. л.
. Уч.-изд. л.
.
Тираж
экз. Заказ
. Цена свободная.
Издательство ТПУ. 634050, Томск, пр. Ленина, 30.
16