Создание гипертекстовых документов

12. Создание гипертекстовых документов

Цель работы – освоение приемов работы
с гипертекстовыми документами

Общие сведения

Современные компьютерные средства предоставляют много возможностей для создания сложных документов, структурирования и быстрого поиска информации. В настоящее время можно не только одним щелчком мыши открыть файл, находящийся на другом конце света. Можно также легко создать информационную сеть, в которой установлены такие связи между документами.

Основным инструментом создания сложных информационных структур являются редакторы WEB-страниц, а средой для их работы – сеть Internet.

Однако и Word дает возможность создавать достаточно сложные структуры связанных документов. Работа с ними аналогична работе с WEB-страницами.

При создании сложного документа главная проблема – четкое определение цели его создания. На ее основе формируется структура информации, задаются связи между отдельными фрагментами данных. В типичном случае фрагментами данных, объединяемыми в гипертекстовый документ, являются текстовые файлы, запросы к базам данных, электронные таблицы, графики и диаграммы, рисунки. Для полноты картины иногда добавляются звуко — и видеозаписи.

Обычно доступ к фрагментам осуществляется из главного документа, которым может быть WEB-страница или файл Word. Этот главный документ играет роль оглавления или указателя расположения фрагментов.

Переход к любому включенному в документ фрагменту производится с помощью гиперссылки, в которой указывается местоположение фрагмента данных – путь к файлу, содержащему соответствующий фрагмент данных и (иногда) имя фрагмента этого файла, например, имя листа Excel, таблицы базы данных или перекрестной ссылки для документа Word.

Документ с гиперссылками называтеся гипертекстовым документом.

Конечно, Word – не самый лучший инструмент для создания WEB-страниц. Но в данной работе главное – освоить принципы их создания.

Если используется сеть Internet, то местоположение файла задается как адрес Internet. В локальной сети местоположение файла задается как адрес, включающий имя компьютера, имя диска и путь к заданному файлу на диске.

Гиперссылка имеет следующие особенности.

¨ Для ее создания обычно не требуется вводить путь к источнику информации посимвольно. При создании гиперссылок используются средства автоматизации с наглядными средствами поиска нужного файла, аналогичные, например, средствам открытия файлов в приложениях MS Office.

¨ Гиперссылка имеет произвольно задаваемый внешний вид. Она не обязательно выглядит в документе как адрес. Чаще всего это просто текст, выделенный определенным цветом. Гиперссылка может быть присоединена и к рисунку, и к кнопке, и даже к невидимой области экрана (например, к определенному участку рисунка карты).

Таким образом, при работе с гиперссылкой различают действия с ее внешним видом и действия с содержимым адресной части.

Пусть требуется разработать два документа, показанные на Рис. 7 и Рис. 8. Они располагаются каждый в своем файле.

Информатика – общее название группы дисциплин, занимающихся различными аспектами применения и разработки компьютеров.

Студенты нашей кафедры изучают Windows, Word, Excel, Access.

У нас есть лаборатория, в которой установлены компьютеры.

(Программа изучения дисциплины).

Лаборатория расположена на первом этаже третьего корпуса СПбГПУ, в аудитории 110.

Рис 7. Документ, описывающий дисциплину

При чтении каждого из этих документов возникает непреодолимое желание узнать больше информации из другого документа.

Если требуется, чтобы эти документы были пригодны для быстрого просмотра, необходимо обеспечить быстрый переход с одного на другой. Если пользоваться Проводником, то нужно будет знать названия файлов этих документов. Конечно, можно, вставить в текст соответствующие комментарии типа «Смотри файл C:\Information\General Information\About Department\Department. doc.» Но перспектива искать этот файл с помощью Проводника не вдохновляет.

«Предпринимательство и коммерция»

Относится к факультету Экономики и менеджмента – одному из старейших в СПбГТУ.

Расположена в третьем учебном корпусе СПбГТУ.

Готовит специалистов в области маркетинга и бухгалтерского учета.

Одной из самых полезных дисциплин является информатика.

Рис 8. Документ, описывающий кафедру

Похожая задача возникает при чтении книги с экрана. Она содержит длинный текст, разбитый на главы. Оглавление может быть либо в начале, либо в конце книги. Пусть даже Вы нашли оглавление и узнали номер нужной страницы. После этого нужно еще перейти к ней, «прокручивая» весь текст.

Выходом из создавшегося положения и служат гиперссылки.

Документы с гиперссылками будут иметь вид Рис. 9, Рис. 10.

Обратите внимание на ссылку Переход к началу документа на Рис. 9. Теперь не требуется долго искать начало файла или вспоминать, какой комбинацией клавиш можно туда перейти. Достаточно щелкнуть по ссылке – и Вы в начале текста.

Выделенные и подчеркнутые слова также являются указателями. Щелчок по ним позволит перейти к описанию того, где находится лаборатория (ссылка лаборатория) или к описанию кафедры (ссылка нашей кафедры).

Точно по такому же принципу работает и ссылка в документе с информацией о кафедре.

Чтобы создать ссылку лаборатория внутри файла[1], проще всего

¨ выделить первое слово абзаца, в который нужно перейти,

¨ скопировать его в буфер,

¨ перейти на то место, где требуется гиперссылка и

¨ выбрать меню à Правка à Вставить как гиперссылку.

Информатика – общее название группы дисциплин, занимающихся различными аспектами применения и разработки компьютеров.

Студенты нашей кафедры изучают Windows, Word, Excel, Access.

У нас есть лаборатория, в которой установлены компьютеры.

(Программа изучения дисциплины).

Лаборатория нашей кафедры расположена на первом этаже третьего корпуса СПбГТУ, в аудитории 108.

Переход к началу документа

Ждем Вас.

Рис 9. Документ с гиперссылками, описывающий дисциплину

«Предпринимательство и коммерция»

Относится к факультету Экономики и менеджмента – одному из старейших в СПбГТУ.

Расположена в третьем учебном корпусе СПбГТУ.

Готовит специалистов в области маркетинга и бухгалтерского учета.

Одной из самых полезных дисциплин является информатика.

Рис 10. Документ с гиперссылками, описывающий кафедру

При этом выбранное слово повторится в месте вставки. Оно будет выделено цветом и подчеркнуто. Это и есть гиперссылка. Когда указатель мыши проходит над ней, он принимает вид руки. Щелчок вызывает переход к тому месту, откуда производилось копирование[2].

Чтобы поменять видимую в тексте надпись гиперссылки, нельзя пользоваться мышью, так как при щелчке по ссылке сразу же произойдет переход. Следует щелкнуть около ссылки и передвинуть курсор внутрь текста ссылки с помощью клавиш Влево/Вправо.

Ссылку можно установить и другим способом.

¨ Перейдите к тому месту, куда должна указывать будущая ссылка (конец текста, где дан адрес лаборатории).

¨ Выберите меню à Вставка à Закладка…. Добавьте закладку. Это может быть любое слово, например, ааа.

¨ Выделите то слово, которое должно стать ссылкой (это слово лаборатория в начале документа).

¨ Выберите меню à Вставка à Гиперссылка… Откроется окно определения гиперссылки. В нем нужно задать имя файла ( в данном случае – того же, в котором Вы работаете) и имя созданной закладки.

Таким же способом устанавливаются ссылки, связанные с рисунками (щелчок по рисунку вызовет переход), а также ссылки на другие файлы.

«Настоящие» Web-страницы отличаются следующим.

¨ Они обычно создаются на языке HTML (Hypertext Markup Language), который воспринимается большим числом браузеров («просматривателей») и позволяет вставлять множество различных объектов. Word позволяет сохранить созданные в нем файлы в этом формате, но, во-первых, эта функция работает неустойчиво во многих версиях Word, во-вторых, не все объекты, которые позволяет создавать и просматривать Word, могут быть сохранены в формате HTML. Наконец, в третьих, не все, что можно сделать в HTML, можно сделать в Word. Для файлов HTML имеются специальные редакторы.

¨ Файлы HTML помещаются на сервер – мощную машину, имеющую быстрый доступ к сети и специальное программное обеспечение.

¨ Специальные программы передают эти файлы по одновременным запросам многих пользователей.

Итак, самое сложное при создании WEB-страниц – определить их содержание. Но это может сделать только разработчик.

Задание, часть 1

Сделайте гипертекстовый документ, содержащий сведения о себе.

Он должен содержать общие сведения о студенте, сведения о работе, учебе, хобби, планах на будущее, вкусах, домашних животных и проч. Всего следует создать не менее 5 разделов. Тематика их произвольна. По крайней мере один из разделов должен содержать подразделы. Например, раздел хобби может содержать такие хобби, как чтение книг (любимые жанры и проч.), лыжные прогулки зимой (карта местности), успехи рыбалки летом (максимальный вес пойманной рыбы, место поимки). Каждый раздел и подраздел лучше оформить в виде отдельного файла Word. Далее следует продумать расположение ссылок и создать их.

Рекомендации по работе

¨ Очень важно следить за расположением создаваемых файлов. Они должны находиться в Вашей индивидуальной папке.

¨ Оформление документов должно быть красивым (с использованием текстур, рисунков, других элементов оформления), но не слишком пестрым.

¨ Не следует выполнять никаких действий, связанных с форматом HTML, так как в некоторых версиях программы MS Office это может привести к разрушению всего программного обеспечения.

Результат работы

Информация о каждом студенте в группе в нескольких файлах, соединенных гиперссылками.

Задание, часть 2

На каждом компьютере должен находиться документ о группе в целом. Наряду с общими сведениями о группе (номер, количество человек, специальность, ФИО старосты), этот документ обязательно должен включать в себя гиперссылки на информацию о каждом студенте.

Рекомендации по работе

Для того, чтобы Вы могли работать, не мешая другим студентам, сделайте копии Ваших файлов. Расположите их в своем каталоге, но под другими именами. Рекомендуется просто добавить перед именем символ _.

Внимание. Копии предназначены для работы других студентов и не должны в дальнейшем изменяться.

Имя главного файла следует сообщить всем другим студентам в группе.

При создании ссылки на другие компьютеры выйдите на уровень рабочего стола. Найдите значок Сетевое окружение. Откройте его. Вы увидите список компьютеров. Узнайте, какой номер имеет тот компьютер, с которым Вы хотите связаться (например, 20), и откройте его. Вы увидите папки, одна из которых называется С. Это диск С: компьютера номер 20. Откройте его, найдите в нем папку USER и персональную папку Вашего коллеги. Создайте ссылку на его главный файл, имя которого он Вам сообщит.

Надо продумать, каким образом в главный документ будут включаться сведения о студентах, которые еще не создали своего персонального документа.

Результаты работы

Гипертекстовый документ о группе на каждом компьютере со ссылками на гипертекстовые документы сведений о каждом студенте группы.

[1] Ссылка и место, на которое она указывает, не должны быть видны одновременно. Для этого файл должен быть достаточно велик.

[2] На самом деле, гиперссылка обращается к набору букв по их порядковому номеру от начала текста.

Источник

ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ

• ознакомиться с основами языка разметки гипертекста HTML;
• ознакомиться с принципами создания гипертекстовых страниц с помощью текстового редактора и с помощью редактора гипертекстовых страниц Dreamweaver;
• научиться создавать сайт, состоящий из нескольких страниц.

Оглавление

7.3.1. Принципы гипертекстовой разметки

Гипертекстовые страницы создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language) в текстовом редакторе или в среде специальных редакторов web-страниц.

Гипертекстовый документ содержит:

• текст, который отображается в окне браузера в соответствии с форматированием, заданным в кодах HTML;
• коды разметки, определяющие форматирование элементов документа;
• коды разметки, обеспечивающие вставку различных элементов в документ;
• коды, определяющие структуру связей с другими информационными ресурсами (гипертекстовые ссылки). Эти связи могут объединять документы с самыми разными информационными ресурсами, в том числе содержащими звуки, видео. Поэтому гипертекстовые документы называются еще и гипермедиальными.

Коды разметки представляют собой символы ASCII. Поэтому страницы можно создавать в текстовых редакторах.

Существующие редакторы web-страниц позволяют пользователю создавать и форматировать элементы страницы с помощью меню, кнопок панелей инструментов.

Язык разметки HTML представляет собой описание документов с помощью указателей HTML-кодов, называемых также тэгами. Тэги гипертекстового документа представляют собой варианты сокращений слов английского языка, регистр букв не имеет значения.

Текст тэга заключается в угловые скобки, например, ), разрыва строки(
), вставки изображения .

Контейнер – это пара тэгов, начального и конечного, между которыми содержатся другие элементы документа, например текст или другие тэги. Указания тэгов применяются к расположенному между ними объекту.

Тэг-контейнер имеет следующую структуру:

Имя конечного тэга идентично имени начального, но перед ним ставится знак «/».

Действие начального тэга применяется к тому, что находится за ним, и прекращается конечным тэгом. Например, чтобы выделить текст жирным шрифтом нужно расположить его между тэгами:

Обязательный компонент тэга — его имя и, иногда, указание адреса используемого ресурса, или гиперссылки. За ними может следовать необязательный список атрибутов тэга и их значений, которые могут задаваться автором. Значение атрибута следует за знаком равенства после имени атрибута. Атрибуты перечисляются в тэге в свободном порядке.

Например, при описании таблицы, открывающий тэг может выглядеть так:

Но он может содержать атрибуты, задающие:

• WIDTH — ширину таблицы;
• ALIGN — расположение таблицы относительно других объектов страницы;
• BORDER — ширину границы;
• BGCOLOR — цвет таблицы.

Тогда тэг-контейнер, задающий вид таблицы, выглядит следующим образом:

Приведенный тэг задает ширину таблицы 780 пикселей, выравнивание — по левому краю, ширину рамки — 1 пиксел, цвет фона таблицы – слоновой кости.

Значения атрибутов принято заключать в одинарные или двойные кавычки, особенно, если они содержат несколько слов, разделенных пробелами. Длина значения атрибута ограничена 1024 символами.

Вставка специальных символов — CER (Character Entity Reference)

Специальные сочетания символов позволяют отображать на web –страницах те символы, которые могут быть неверно обработаны браузером. Например, символы, используемые тэгами (угловые скобки, двойные кавычки). Некоторые из них приведены в Таблице 1. Эти сочетания вводятся в нужном месте гипертекста без угловых скобок.

Таблица 1. Вставка специальных символов.

Символ

Имя

Описание

Больше

пробел

Пробел

Амперсанд

Фунт

Копирайт

Регистрированная торговая марка

Тэги можно разделить по назначению:

• тэги формирования структуры документа;
• тэги оформления страниц (вид текста, списки, изображения, списки, таблицы, картинки);
• тэги гипертекстовых ссылок и закладок;
• тэги интерактивных форм;
• тэги внедренных объектов, например, вызова программ.

7.3.2. Структура документа

Основная часть документа

HTML-документ позволяет вкладывать контейнеры друг в друга. Документ начинается с тэга — контейнера и заканчивается конечным тэгом .

В гипертекстовом документе определяется его заголовок (HEAD), и основная часть, называемая телом (BODY).

Пример структуры документа:

Заголовок первого уровня

Наряду с простой структурой гипертекстовой разметки существует фреймовая структура. Фреймы (кадры), на которые делится окно браузера, могут содержать одновременно разные гипертекстовые документы. Гиперссылки в этих документах позволяют указывать тот кадр, в который нужно загрузить новый документ. Например, один фрейм отображает содержание сайта в виде гиперссылок, а в другом загружаются последовательно страницы, вызываемые этими гиперссылками (рис. 1).

Если используется фреймовая структура, то документ не имеет тэга . На случай браузера, который не поддерживает загрузку фреймов в коде разметки указывается тэг и вариант описания параметров для обычной структуры страницы.

Для создания структуры (рис. 2) должно быть 3 файла. Файл с определением набора фреймов, который описывает количество кадров, их имена, размеры, наличие линеек прокрутки. Чтобы заполнить кадры нужно в тэге frame определить, какие файлы будут в них загружаться.

На рис. 2 в левом фрейме отображен список банков, каждый элемент которого является гиперссылкой. Щелчок по гиперссылке загружает в правый фрейм нужный файл. Атрибут Name задает имена кадров. Левый кадр имеет имя topics, правый — docum. Они задаются для управления загрузкой документов в нужный кадр. Файл, задающий фреймы выглядит следующим образом:

Заголовок документа

Элемент разметки HEAD–контейнер не является обязательным тэгом. В заголовке часто располагаются элементы разметки, задающие параметры документа, такие как:

• TITLE (заглавие документа или его тема);
• META (метаинформация);
• STYLE (описатели стилей);
• SCRIPT (скрипты).

Элемент разметки TITLE

Контейнер TITLE служит для задания темы документа в World Wide Web. Так же именуется окно браузера, в котором документ просматривается. Слова из контейнера TITLE попадают в индекс поисковой системы.

Элемент разметки META

Тэг META позволяет хранить список ключевых слов и описание документа, которые используются для составления индекса поисковой системы.

Атрибут CONTENT отображает содержание описания документа.

При индексировании документы, в которых задана тема в тэгах TITLE, ключевые слова и описание документа в атрибутах тэга META, попадут в индекс некоторых поисковых машин.

Элемент разметки STYLE

Предназначение тэга разметки STYLE — размещение описания стилей. Описание стиля может встречаться и в теле страницы, но если оно находится в заголовке – правила отображения стиля действуют для всей страницы.

Атрибут тэга – TYPE задает тип стиля. Это может быть либо text/css, либо text/javascript:

Элемент разметки SCRIPT

1. Контейнер SCRIPT содержит код JavaScript, VBScript или JScript.
2. Он не обязательно должен находиться в заголовке, а может быть также и в теле документа.
3. Если открыт тэг начала, то должен быть тэг конца контейнера.
4. В общем виде запись контейнера выглядит следующим образом:

При использовании элемента разметки SCRIPT в заголовке определяется зона видимости функций и переменных во всем документе, т.е. они определяются как глобальные переменные.

Основная часть документа

Оформление документа

Цвет элементов

Основная часть документа начинается с тэга .

Он может содержать атрибуты, которые определяют параметры всего документа, например, цвет текста, ссылки, цвет фона.

Цвета задаются названиями цветов, которые можно найти в специальных таблицах или шестнадцатиричными кодами, в которых каждые две цифры задают значения трех составляющих цвета – RGB (красного, зеленого, синего). Например, код цвета фона bgcolor =»# FF 0000″ задает максимальное значение красного (FF) и минимальные зеленого и синего.

Таблица 2. Цвета, используемые в Internet

Данные Таблицы 2 скопированы с сайта известного дизайнера А.Лебедева.

Белый цвет задается смешением максимальных значений красного, зеленого и синего цветов. Код его FFFFFF. Черный – наоборот все нули.

В тэге BODY можно задавать цвет фона страницы, текста, гиперссылок.

Пример определения цвета разных элементов страницы:

TEXT – цвет текста страницы;

BGCOLOR – цвет фона страницы;

LINK – цвет ссылок;

VLINK – цвет посещенных ссылок.

Другие элементы оформления

Горизонтальная линия часто используется для раздела логических частей страницы. Линия выглядит в виде канавки. Задается тэгом . Атрибуты тэга :

— выравнивание (center или left);

— ширина линии в процентах или пикселях;

— толщина линии в пикселях;

— задание цвета линии, действует в только в Internet Explorer.

7.3.3. Форматирование текста

Текст, представленный на странице, может иметь различное форматирование. Основные тэги, используемые для оформления текста, приведены в Таблице 3.

Таблица 3. Тэги, оформляющие текст.

Назначение тэга

Имя

Атрибуты

Пример

Шрифт (задание размеров, цвета, вида)

Параграф (Начало нового абзаца)

Возможные значения – left; right; justify; center

Заголовок. Объявление текста заголовком. Можно задать заголовки шести уровней.

color – цвет align – выравнивание

текст

Полужирный текст

Верхний индекс, например для задания степеней

Type – тип маркера :.

Начало списка маркированного

Начало списка нумерованного

Перевод следующего за тэгом текста на новую строку

Встает заря во мгле холодной. На нивах шум работ умолк.

7.3.4. Вставка изображений

Тэг вставки изображения в простейшем варианте выглядит так:

SRC – обязательный атрибут, указывающий на файл–источник изображения, в данном случае — «photo.jpg». Предполагается, что файл находится в той же папке, что и страница, куда вставляется изображение. Если это другая папка, например, images, то ее имя необходимо указать:

Если же изображение находится в папке images на удаленном компьютере, то тэг выглядит так:

Тэг вставки изображения может иметь такие атрибуты как:

WIDTH – ширина изображения, значение которой задается в пикселях или в процентах от экрана. Важно предусмотреть, чтобы изображение не было слишком большим, если будет открываться на маленьком экране;

HEIGHT – высота изображения, значение которой задается в пикселях или процентах;

ALIGN – выравнивание, расположение относительно текста. Задаются такие значения атрибута как: слева, справа, по центру;

BORDER – ширина рамки. Значение задается в пикселях. Если рисунок является ссылкой и цвет его рамки не соответствует стилю остальных элементов страницы, можно задать рамку равной нулю;

ALT – альтернативный текст, представляющий собой фразу, комментирующую изображение;

HSPACE – расстояние между изображением и текстом по горизонтали в пикселях;

VSPACE – расстояние между изображением и текстом по вертикали в пикселях.

Чтобы вставить изображение таким образом, как на рис.2

Указанное изображение находится в одной папке со страницей. Его имя — paris_photo.jpg. Ширина изображения меняется в зависимости от размеров экрана и составляет 70% от его ширины (рис.2). Изображение имеет альтернативный текст. Рамка изображения отсутствует.

Рис. 2. Фрагмент гипертекстовой страницы с изображением

7.3.5. Таблицы

Широко применимым является тэг

, с помощью которого можно задавать расположение элементов на странице, создавать панель навигации, представлять табличную информацию.

Таблица задается тэгом-контейнером:

Таблица состоит из строк и столбцов (ячеек), которые указываются следующими тэгами:

— столбец (ячейка) таблицы.

Для лучшего результата таблицу предварительно стоит нарисовать на бумаге. В ячейках таблицы могут находиться изображения, текст, гиперссылки, а также другие таблицы. Следующий HTML-код задает таблицу. Браузер преобразует код в таблицу, представленную на рис. 3.

Рис. 3. Представление изображений в таблице

Некоторые атрибуты таблицы, рядов и ее ячеек:

• WIDTH – ширина;
• HEIGHT — высота;
• ALIGN – выравнивание;
• VALIGH – расположение текста в ячейке по вертикали, возможные значения: top, bottom;
• ROWSPAN — объединение рядов, указывается числом (количество);
• COLSPAN – объединение столбцов (ячеек);
• BGCOLOR – цвет ячейки, ряда, таблицы;
• CELLSPACING – расстояние между ячейками;
• CELLPADDING – расстояние между содержимым и границами ячейки.

Атрибут CELLSPACING задает пространство между ячейками в пикселях.

Если нужно избавиться от пространства между ячейками значение атрибута CELLSPACING приравнивается нулю:

Атрибут CELLPADDING задает пространство между содержимым ячейки и ее границами, и также может быть использован для его уменьшения.

7.3.6. Гиперссылки

Сайт представляет собой набор связанных гипертекстовых документов. Самая главная страница сайта, которая загружается первой, имеет, как правило, имя index.html или main.html. Она содержит ссылки на другие страницы. Они могут быть оформлены в виде панели навигации. Имена страниц сайта могут иметь любые имена, но нужно помнить, что система различает строчные и заглавные буквы. Например, photos.html и Photos.html – это разные файлы. Страницы сайта могут находиться в одном каталоге (папке) или — в разных, или — на удаленном компьютере.

Чтобы документы связать, необходимо определить, какие элементы страницы будут использованы в качестве гиперссылок и какие страницы будут загружаться при активизации этих ссылок.

Гипертекстовая ссылка — это адрес другого документа или информационного ресурса Internet, который связан с документом посредством ссылки. Щелчок по ней позволяет загрузить этот документ в окно браузера или скопировать на локальный компьютер, или открыть окно приложения для создания сообщения электронной почты.

Гиперссылка активизируется благодаря атрибуту HREF ( hypertext reference – гипертекстовая ссылка), задающему адрес документа.

Например, имеется документ с фотографиями, имя которого paris.html. Он находится в одной папке с главным документом index.html.

Для создания гиперссылки нужно выбрать фразу или слово, например «Поездка в Париж», поместить их в тэг-контейнер , называемый якорем. HTML-код этой ссылки выглядит так:

Тэг делает ссылкой не только текст, но и изображения, и адреса электронной почты. Адрес документа задается по тем же принципам, что и для изображений:

• Поездка в Париж — файл находится в одной папке с текущей страницей;
• Впечатления — файл находится в папке pages;
• Фотоальбом — файл находится на удаленном компьютере.

Ссылкой может быть текст (фраза или слово), изображение, анимация, адрес электронной почты.

Адрес ссылки (URL) может быть указанием на:

Ссылка может быть не только текстом, но и изображением.

IMG — это тэг вставки изображения;

SRC — атрибут указания файла с изображением. Само изображение — гиперссылка.

Гиперссылка может вызывать загрузку не только гипертекстовых документов, но и других файлов (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:)

Закладки

Иногда важно сделать ссылку не на другую страницу, а на определенный текст текущей страницы. Место, к которому нужно перейти называют закладкой. Ему задают имя:

Гиперссылки на нужные закладки оформляются следующим образом:

7.3.7. Навигационные карты

Навигационная карта — это изображение, на котором определены геометрические области, являющиеся гиперссылками. Это дает возможность переходить с одного изображения к разным страницам, в зависимости от выбранной области.

Навигационная карта задается тэгом-контейнером MAP, описывающим ее. Геометрические области изображения определяются тэгом AREA.

Форма области задается атрибутом SHAPE:

• Прямоугольник — SHAPE=»rect»;
• Круг — SHAPE=»circle»;
• Многоугольник — SHAPE=»poly».

и соответствующими координатами. Их определяет атрибут COORDS. Число координат и порядок их значений зависят от выбранной формы (рис.4).

Рис. 4. Координаты геометрических областей навигационной карты

Левый верхний угол изображения (рис.4) имеет координаты (0;0). При задании координат прямоугольной области задаются координаты верхнего левого и нижнего правого углов области. Порядок записи координат для параметра coords следующий:

Предположим, что на рис. 4 x1=25, y1=36; x2=114, y2=98.

Пример кода навигационной карты, на которой задана эта прямоугольная область:

К описанию областей нужно добавить гиперссылки:

Это только описание карты. Кроме описания необходимо вставить в документ изображение с картинкой, выполняющей роль карты. Поскольку в документ может быть включено множество изображений, нужно определить имя того самого изображения, для которого сделано описание карты. Для этого используется атрибут NAME, задающий имя карты, например, тэг:

Для того, чтобы связать карту с изображением, необходимо в тэге вставки изображения использовать атрибут usemap=»#имя_карты» для картинки:

Для создания круглой области задаются координаты ее центра (x и y) и длина радиуса (R) в пикселях:

Допустим, координаты круга будут такие: x=46, y=48; а длина радиуса — R=35. Тогда:

Описание карты может находиться в любом месте страницы. При вставке рисунка, это описание определяется по имени карты, указанному в тэге вставки рисунка.

Для задания многоугольной области используются координаты углов и атрибут POLY.

Координаты задаются подряд через запятые:

В карте также можно одновременно использовать разные области, например круг и многоугольник.

7.3.8. HTML формы

Формы задаются для того, чтобы пользователь мог выполнять какие-либо действия на сайте.

Обмен информацией с пользователем возможен с помощью таких экранных элементов как поля ввода текста, кнопки альтернативного выбора, флажки, выпадающие меню, прокручиваемые списки, кнопки. Для отправки информации, введенной пользователем существуют кнопки submit.

Для управления этими элементами динамических web-страниц, необходимо обрабатывать информацию пользователя или с помощью Java скриптов, или Visual Basic скриптов в браузере пользователя, или с помощью компонента программного обеспечения Web-сервера CGI (Common Gateway Interface).

Форма создается тэгом-контейнером .

Атрибут METHOD указывает один из двух возможных методов отправки данных, введенных в форму:

GET — информация из формы добавляется в конец URL, указанного в описании тэга ;

POST — информация из формы пересылается по указанному адресу.

Атрибут ACTION указывает URL, вызываемый для обработки формы. Как правило, это адрес CGI-программы, обрабатывающей форму.

Тэги формы

TEXTAREA – этот тэг позволяет пользователю вводить более одной строки информации в текстовое поле. Пример:

Платонов, Юрий Петрович,
Санкт-Петербург

Где: NAME — имя поля ввода; ROWS — высота поля ввода в символах; COLS — ширина поля ввода в символах.

INPUT — тэг используется для ввода одной строки текста или одного слова. Атрибуты тэга:

• CHECKED — подтверждение , что CHECKBOX (флажок) или RADIOBUTTON (кнопка альтернативного выбора) будут выбраны;
• MAXLENGTH — количество символов, которое пользователи могут ввести в поле ввода;
• NAME — имя поля ввода, идентификатор позволяющий получить данные, помещенные пользователем в это поле;
• SIZE — размер поля в символах;
• SRC — URL, указывающий на изображение;
• TYPE — тип поля ввода. По умолчанию это простое поле ввода для одной строки текста.

Другие типы элементов формы:

• CHECKBOX — флажок, задает одно из значений ON или OFF (логические).
• HIDDEN – поле, не отображаемое браузером, не позволяет делать изменения, передает длину логина или пароля.
• PASSWORD – текстовое поле, не отображаемое браузером на экране.
• RADIO — поле выбора одной из альтернативных возможностей. Альтернатива обеспечивается созданием нескольких полей ввода с атрибутом TYPE=»RADIO» с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
• RESET — кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
• SUBMIT — кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
• TEXT — текстовое поле одной строки. Атрибуты MAXLENGTH и SIZE определяют максимальную длину вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов). VALUE – атрибут, присваивающий полю значение по умолчанию или значение, которое будет выбрано при использовании элементов разного типа.
• LISTBOX — меню выбора.

Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов.

Рис. 5. Форма для отправления файла

HTML-код формы выглядит следующим образом:

Отправить данный файл :

7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver

В окне редактора (рис. 6) строка заголовка отображает название страницы и имя файла.

Рис. 6. Окно приложения Micromedia Dreamveawer

Под окном заголовка — строка меню.

Слева — панель объектов, при помощи которой можно создавать различные объекты: таблицы, слои, вставлять картинки и многое другое.

Справа можно открывать дополнительные окна, например (рис.6), «HTML style», «Behaviors «, «CSS styles» и т.д.

Рис. 7. Окно параметров

Перед работой в приложении необходимо сделать начальные установки. Команда Preferences/General открывает окно, в котором можно задать необходимые параметры. Например, чтобы отображался и русский и английский текст нужно выбрать категорию Fonts/Encoding и правильно настроить Default Encoding, выбрав из набора шрифт, содержащий кириллицу. Здесь же можно задать другие параметры шрифта.

Рис. 8. Панель объектов.

В рабочем поле окна приложения можно создавать документ, вводя текст, в нужных местах можно вставлять объекты, используя меню INSERT и панель объектов (рис. 8).

Для изменения свойств объектов вызывается специальная панель properties (свойства), в полях которой задаются конкретные параметры объекта (рис.9).

Рис. 9. Панель свойств таблицы.

В приложении можно вызывать окно, отображающее HTML-код создаваемой страницы и окно просмотра страницы в браузере.

При создании сайта рекомендуется продумать его структуру. Затем создать папку, в которой будут располагаться все файлы сайта. В ней можно создать отдельные папки для используемых файлов с изображениями, например, IMAGES.

Команда Site>Define sites откроет окно настройки параметров сайта. Категория Local info позволяет задать имя сайта (рис.10), местный адрес папки с сайтом, а также HTTP Address – адрес сайта в Интернет.

Рис. 10. Окно настройки параметров сайта. Категория Local Info

Категория Remote Info позволяет задать адрес FTP сервера, в графе HOST Directory нужно указать папку на удаленном компьютере (рис.11), в которую Dreamweaver будет перемещать файлы созданного сайта.

Рис. 11. Настройки сайта Remote Info

В поле Login ввести логин пользователя на удаленном компьютере. В поле Password — пароль.

Вопросы для закрепления материала

1. Что представляет собой файл с гипертекстом?
2. Что такое тэг? Автономный тэг? Тэг-контейнер?
3. В каком приложении можно создать гипертекстовую страницу?
4. Какие расширения имеют файлы с гипертекстом?
5. Какова структура гипертекстовой страницы?
6. Что такое Фрейм (кадр)?
7. Для чего используются тэги , ?
8. Как задается цвет элементов гипертекстовой страницы?
9. Каким образом форматируется текст гипертекстовой страницы?
10. Как создать гиперссылку?
11. Какие атрибуты могут менять изображения гипертекстовых страниц?
12. Для чего используются таблицы?
13. Что такое карта?
14. Каковы принципы создания гипертекстовых страниц в приложении Micromedia Dreamweaver ?

Версия для печати

Хрестоматия

Практикумы

В рамках данной работы Вы должны будете освоить технологию:

Источник

Читайте также:  Самый легкий способ сделать блинчики

Оцените статью

Вам также может понравиться

Ясень семена способ распространения

Ясень обыкновенный Fraxinus excelsior – так в ботанической

Ярлыки способы создания ярлыков ос windows

Создаем ярлыки на рабочем столе Windows Создаем ярлыки

Японское удобрение фуджима способ применения

Удобрения Фуджима Знаете потрясающее удобрение, палочка

Японский чай способ заварки

Технология заваривания японского чая Известно, что

• Правообладателям
• Политика конфиденциальности
• Контакты

Название практикума	Аннотация