- •Общие сведения о языке разметки гипертекста(html)
- •Общие сведения о языке разметки гипертекста (html)
- •Структура html-документа
- •Знакомство с графическими объектами
- •Создание gif-файлов
- •Цвета в html
- •Главное о форматировании текста
- •Заголовки
- •Начертание шрифта
- •Выравнивание и отступы
- •Выравнивание текста по левому или правому краю
- •Центрирование объектов
- •Поля вокруг изображения
- •Фоновые изображения и фоновый цвет
- •Локальные ссылки
- •Ссылка - строка
- •Ссылка - изображение
- •Якорь и ссылка на него
- •Глобальные ссылки
- •Дополнительные возможности форматирования текста
- •Текст, обтекающий границы объекта
- •Отображение текста в одной строке (без переноса на другую строку)
- •Выделение абзацев с помощью списков определений и полей
- •Рекомендации по проведению занятий
Ссылка - изображение
Активные изображения, или изображения, чувствующие щелчки мыши, позволяют создавать графические меню . Пользуясь таким меню, посетители сайта смогут более комфортно путешествовать по Web-yзлу. Используется активное изображение следующим образом: когда пользователь щелкает мышкой на такой картинке, координаты щелчка передаются с компьютера пользователя на посещаемый им 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, в котором будут другие подсказки, которые появляются при установке указателя мыши на активное изображение.
Якорь и ссылка на него
Создадим 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>записана информация, которая появится в окне программы просмотра при переходе на якорь. В теле документа anchor1.htm записаны две пары тегов: <A>и</A>. Первая из них используется для создания якоря с произвольным именем 1 в некоторой точке документа anchor.htm. Тег<А>имеет атрибут NAME=, в кото-ром записано в кавычках имя якоря: "1". Между тегами<A>и</A>записана информация, которая будет выделен как ссылка: "Для перехода на якорь 1 щелкните здесь". Документ anchor1.htm не занимает все полностью раскрытое окно программы просмотра. Поэтому для анализа работы ссылки на якорь следует уменьшить высоту окна так, чтобы в нем помещалось шесть строк. При щелчке мышью по ссылке в окне появляется первая строка документа.Задание 4.1.3.1.Используя файл anchor1.htm как исходный, записать в рабочую папку файл anchor2.htm, в котором будет обеспечен переход к якорю, расположенному в конце документа.Задание 4.1.3.2.Используя файл anchor1.htm как исходный, записать в рабочую папку файл anchor3.htm, в котором будут два якоря, расположенные в начале и конце документа.