- •Рекомендации по проведению занятий
- •1. Общие сведения о языке разметки гипертекста (html)
- •1.1. Структура html-документа
- •1.2. Знакомство с таблицами
- •1.3. Знакомство с графическими объектами
- •1.4. Создание gif-файлов
- •1.5. Цвета в html
- •2. Главное о форматировании текста
- •2.1. Заголовки
- •2.2. Шрифты
- •2.3. Начертание шрифта
- •2.4. Списки
- •2.5. Выравнивание и отступы
- •2.5.1. Выравнивание текста по левому или правому краю
- •2.5.2. Центрирование объектов
- •3. Работа c изображениями
- •3.1. Поля вокруг изображения
- •3.2. Фоновые изображения и фоновый цвет
- •4. Ссылки
- •4.1. Локальные ссылки
- •4.1.1. Ссылка - строка
- •4.1.2. Ссылка - изображение
- •4.1.3. Якорь и ссылка на него
- •4.2. Глобальные ссылки
- •5. Дополнительные возможности форматирования текста
- •5.1. Текст, обтекающий границы объекта
- •5.2. Отображение текста в одной строке (без переноса на другую строку)
- •5.3. Выделение абзацев с помощью списков определений и полей
- •6. Элегантные списки
- •6.1. Красивые нумерованные списки
- •6.2. Смена порядка нумерации в списке
- •7. Теги из разряда неосновных
- •7.1. Красивые толстые и тонкие горизонтальные линии
- •7.2. Вертикальная пунктирная линия с уменьшающейся длиной штриха
- •7.3. Ступеньки
- •7.4. Загрузка html-страниц
- •7.5. Показ html-тегов
- •8. Дополнительные возможности ms Internet Explorer
- •8.1. Бегущая строка
- •8.2. Прослушивание звуковых файлов
- •Задание 8.2.1. Используя документ bgsound.Htm как исходный, записать в рабочую папку файл bgsound1.Htm, в котором увеличить длительность звучания в два раза.
- •9. Дополнительные возможности Netscape Navigator
- •Библиографический список
- •Дорошев в.И., Хахаев и.А., Мошенский с.А. Работа в компьютерной сети internet. / Учебное пособие. Для студентов всех специальностей всех форм обучения. - Спб.: сПбТэи, 1998. - 32 с.
- •Климова р.Н., Сорокина м.В., Хахаев и.А., Мошенский с.А. Информатика торговой фирмы / Учебное пособие. Для студентов всех специальностей всех форм обучения. - Спб.: сПбТэи, 1998. - 32 с.
4.1.2. Ссылка - изображение
Активные изображения, или изображения, чувствующие щелчки мыши, позволяют создавать графические меню (рис. 3). Пользуясь таким меню, посетители сайта смогут более комфортно переходить от документа к документу. Используется активное изображение следующим образом: когда пользователь щелкает мышкой на такой картинке, координаты щелчка передаются с компьютера пользователя на посещаемый им Web-сервер. Сервер по переданным координатам определяет, какая ссылка выбрана, и передает программе просмотра пользователя соответствующую страницу.
Создадим простейший HTML-документ с активными изображениями. Для этого необходимо уяснить и выполнить следующие действия.
-
Запустить приложение Блокнот, используя кнопку или клавишу “Пуск”: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ
-
Набрать Блокнотом текст документа izobr1.htm:
<HTML>
<HEAD>
<TITLE>1-й HTML-документ со ссылкой-изображением</TITLE>
</HEAD>
<BODY LINK=#0000FF VLINK=#0000FF>
<TABLE> <TR> <TD>
<A HREF="izobr1.htm"><IMG SRC="down_btn1.gif" ALT="izobr1"></A>
<A HREF="izobr2.htm"><IMG SRC="up_btn2.gif" ALT="izobr2"></A>
</TD> </TR> </TABLE>
1-й HTML-документ
</BODY>
</HTML>
-
Сохранить документ в рабочей папке под именем izobr1.htm (Блокнот закрывать не следует, он пригодится для дальнейшей работы).
В заголовке документа izobr1.htm записан текст, используемый как надпись в заголовке окна программы просмотра и на кнопке панели задач. В теле записан тег <BODY> с неиспользовавшимися ранее атрибутами. Атрибут LINK= устанавливает цвета "непосещенных" гипертекстовых ссылок в документе (по которым пользователь еще не щелкал мышью). Атрибут VLINK= устанавливает цвета "посещенных" ссылок.
В теге <A>, атрибут HREF= формирует ссылку, например, на документ izobr2.htm, находящийся в той же папке, в которой находится данная методичка. Тег <IMG> своим атрибутом SRC="down_btn1.gif" указывает, какой рисунок должен быть использован в графическом меню. Атрибут ALT="izobr1" задает подсказку, которая появляется при установке указателя мыши на активное изображение.
-
Набрать Блокнотом документ izobr2.htm:
<HTML>
<HEAD>
<TITLE>2-й HTML-документ со ссылкой-изображением</TITLE>
</HEAD>
<BODY LINK=# FF0000 VLINK=# FF0000>
<TABLE> <TR> <TD>
<A HREF="izobr1.htm"><IMG SRC="up_btn1.gif" ALT="izobr1"></A>
<A HREF="izobr2.htm"><IMG SRC="down_btn2.gif" ALT="izobr2"></A>
</TD> </TR> </TABLE>
2-й HTML-документ
</BODY>
</HTML>
-
Сохранить документ в рабочей папке под именем izobr2.htm.
Заголовок и тело этого документа аналогичны izobr1.htm.
Задание 4.1.2.1. Используя файл izobr1.htm как исходный, записать в рабочую папку файл izob1.htm, в котором будут другие цвета "непосещенных" и "посещенных" гипертекстовых ссылок.
Задание 4.1.2.2. Используя файл izobr2.htm как исходный, записать в рабочую папку файл izob2.htm, в котором будут другие подсказки, которые появляются при установке указателя мыши на активное изображение.
4.1.3. Якорь и ссылка на него
Создадим HTML-документ с якорем. Для этого необходимо уяснить и выполнить следующие действия.
-
Запустить приложение Блокнот, используя кнопку или клавишу “Пуск”: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ
-
Набрать Блокнотом документ anchor1.htm:
<HTML>
<HEAD>
<TITLE> Якорь в текстовом HTML-документе </TITLE>
</HEAD>
<BODY>
<A NAME="1"> 1<BR></A> 2<BR>3<BR>4<BR>5<BR>6<BR> 7<BR> 8<BR> 9<BR>10<BR>11<BR>12<BR>13<BR>14<BR>15<BR>16<BR>17<BR> 18<BR>
<A HREF="anchor1.htm#1"> Для перехода на якорь 1 щелкните здесь</A>
</BODY>
</HTML>
-
Сохранить документ в рабочей папке под именем anchor1.htm.
В теле документа anchor1.htm записаны две пары тегов: <A> и </A>. Первая из них используется для создания якоря с произвольным именем 1 в некоторой точке документа anchor.htm. Тег <А> имеет атрибут NAME=, в котором записано в кавычках имя якоря: "1". Между тегами <A> и </A> записана информация, которая появится в окне программы просмотра при переходе на якорь.
Вторая пара тегов <A> и </A> необходима для создания гиперссылки на якорь. При этом используется тег <А> с атрибутом href, в котором имя якоря присоединяется к имени файла через знак # : <A HREF="anchor1.htm#1">. Между тегами <A> и </A> записан текст, который в окне программы просмотра будет выделен как ссылка: “Для перехода на якорь 1 щелкните здесь”.
Документ anchor1.htm не занимает все полностью раскрытое окно программы просмотра. Поэтому для анализа работы ссылки на якорь следует уменьшить высоту окна так, чтобы в нем помещалось шесть строк. При щелчке мышью по ссылке в окне появляется первая строка документа.
Задание 4.1.3.1. Используя файл anchor1.htm как исходный, записать в рабочую папку файл anchor2.htm, в котором будет обеспечен переход к якорю, расположенному в конце документа.
Задание 4.1.3.2. Используя файл anchor1.htm как исходный, записать в рабочую папку файл anchor3.htm, в котором будут два якоря, расположенные в начале и конце документа.