- •Основы создания web-страниц
- •Составители а.В. Распопов, д.В.Меркулов, о.Е.Ефимова
- •Введение
- •Основные понятия, инструменты создания и просмотра web-страниц
- •Стандарты языка html
- •Браузеры
- •Редакторы html-документов
- •Основы языка html
- •Синтаксис html-тегов
- •Структура html-документа
- •Адресация ресурсов
- •Задание к лабораторной работе №1 «Основные понятия, инструменты создания и просмотра web-страниц. Основы языка html»
- •Основные теги html
- •3.1 Комментарии
- •3.2 Символьные примитивы (&-последовательности)
- •Форматирование текста
- •4.1 Разбиение текста
- •4.2 Форматирование символов
- •4.2.1 Логическое форматирование
- •4.2.2 Физическое форматирование
- •4.3 Параметры шрифта
- •4.4 Заголовки разных уровней внутри текста
- •Задание к лабораторной работе №2 «Основные теги html. Форматирование текста»
- •Представление цвета и графики в html-документах
- •5.1 Формы представления цвета
- •5.2 Цвет текста и фон документа
- •5.3 Графические форматы
- •5.4 Графические изображения
- •Задание к лабораторной работе №3 «Представление цвета и графики в html-документах»
- •Задание к лабораторной работе №4 «Списки»
- •Гиперссылки
- •Задание к лабораторной работе №5 «Гиперссылки»
- •Изображение-карта
- •Задание к лабораторной работе №6 «Изображение-Карта»
- •Задание к лабораторной работе №7 «Таблицы»
- •10.1 Описание структуры набора фреймов
- •10.2 Общий вид html-документа, задающего набор фреймов
- •10.4 Целевые фреймы
- •11.1 Простейшая форма
- •11.2 Типы элементов форм
- •Задание к лабораторной работе №9 «Формы»
- •Несколько советов
- •Список использованных источников
- •Методические указания к лабораторным работам по курсу «Информационные технологии» для студентов специальности 080801
Задание к лабораторной работе №4 «Списки»
Тщательно изучить содержимое раздела 6.
Выполнить все примеры, приведенные в данном разделе.
Создать html-страницу со свободной тематикой, оформив ее с использованием всего пройденного материала.
Гиперссылки
В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к заранее назначенному документу или фрагменту документа.
Связь между html-документами и фрагментами документов организуется с помощью тегов <A> ... </A> (от английского anchor - якорь).
Тег <A> употребляется в двух формах.
В первом случае – при создании гиперссылки. При этом, обязательным является атрибут HREF = url – адрес целевого документа. Текст и изображения, размещенные между тегами <A> ... </A>, становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тега <BODY> (либо цветом по умолчанию). Из необязательных атрибутов здесь упомянем один: TARGET = имя – имя фрейма или окна для вывода целевого документа.
Во втором случае – при создании якоря (метки) фрагмента. Здесь обязателен атрибут NAME = имя – имя идентификатора фрагмента. Созданный в некоторой точке документа якорь служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент. При создании ссылки на этот фрагмент используется тег <A> с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #.
Рассмотрим пример совместного использования якоря и гиперссылки. Представим себе длинный документ book.htm, состоящий из нескольких глав. Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные имена, например:
.......
<A NAME="chapter1"></A> Глава 1. ........
.......
<A NAME="chapter2"></A> Глава 2. ........
.......
Следите за написанием имен якорей: большинство браузеров отличают большие заглавные буквы от строчных.
Теперь можно создать гиперссылки из этого же документа, или из любого другого, на указанные фрагменты. Приведем, например, гиперссылки на точку документа, с которого начинается Глава 2.
Гиперссылка из того же документа:
<A HREF="#chapter2">переход к Главе 2</A>
Гиперссылка из другого документа, находящегося в том же каталоге:
<A HREF="book.htm#chapter2">переход к Главе 2</A>
Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере. Из этого следует одно очень важное практическое соображение. Допустим, Вы подготовили к публикации некоторую группу html-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере. Тогда, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или ... в Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком (например, <A HREF="pr.htm"> <IMG SRC="picture.gif"> </A>). Для того, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту (см. раздел Изображение-карта).
Возможны также ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>;
<A HREF="mailto:user@mail.box">Послать письмо</A>.