Организация гипертекстовых ссылок
Гипертекстовые ссылки позволяют связать отдельные элементы текста (слова, группы слов, элементы графики и т.д.) с другими HTML-документами, что позволяет осуществить быстрый переход от одного документа к другому по смыслу без использования процедур поиска, а также эффективное оглавление документа.
3.1. Для установки гиперссылок следует использовать следующие тэговые конструкции:
Тэг <A> </A> - указатель ссылки, между тэгами которого устанавливается текст указателя. Здесь можно записать текст, установить, рисунок, дать адрес Web-страницы и т.д.
Например: <A HREF="URL">текст указателя</A>. (HREF - Hypertext REFerence)
Для понимания механизма организации в тексте ссылок на другие Web-страницы следует выполнить перечень операций:
a) Записать фразу: Студент ФИО учится в университете ..... на факультете......на кафедре.... Вместо точек указать реальный текст, оформив его в виде гиперссылок на соответствующие Web-страницы университета, факультета, кафедры.
b) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить эффективность действия гиперсвязей.
3.2.Гиперсвязи можно использовать для формирования оглавления документа. Такие гиперссылки определяются как внутренние ссылки.
Для разделения документа на главы (части) следует использовать указатель, который необходимо установить в начале каждой главы (части, раздела) текста: <A NAME=имя_части> </A>. (в качестве "имя_части" можно записать "Label_1" и т.д.). Имя главы должно состоять из одного слова, для чего можно использовать знак "_".
|
|
|
Для создания ссылки на соответствующий указатель, размещенный в текущем документе, следует в параметре HREF указать имя ссылки с префиксом #, например <A HREF="#имя_части">Подготовка документа</A>.
Сформировать оглавление для текущего документа:
a) Установить указатели в начале выполненных упражнений, выполненных по следующим пунктам заданий: 1, 2.1., 2.4., 2.7., 3., присвоив им соответствующие имена (имя_части).
b) Записать построчно в начале содержательной части документа оглавление, со ссылками на соответствующие указатели.
c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить эффективность действия гиперссылок.
4.Копировать текст текущего задания в рабочую папку, присвоив ему имя 3_2_ФИО. Организовать текст задания с подробным оглавлением в форме HTML-документа.
Сохранить HTML-коды документов на вашем диске.
Закрыть все приложения на рабочем столе.
ТЕМА 2: СПИСКИ И ТАБЛИЦЫ В WEB-ДОКУМЕНТАХ
Цель работы состоит в овладении навыками установки списков и таблиц на страницах Web-документа: маркированный список, графические маркеры, нумерованный список, списки определений, вложенные списки, простые таблицы, форматирование данных внутри таблицы, цвет в таблицах, сложные таблицы, вложенные таблицы, особенности построения таблиц и др.
|
|
|
Задание для самостоятельной работы
Подготовка документа для ввода текста.
1.1.Вызвать новый документ в текстовом редакторе WordPad, сохранить его под новым именем с расширением .html:
a) Сохранить новый документ в личной папке под именем 4_1_ФИО: меню "Файл", опция "Сохранить как...", указать в списке "Тип файла" документ HTML.
b) Записать заголовок HTML-документа: HTML-cписки и таблицы: ФИО.
c) Установить рабочее окно редактора на правой стороне экрана.
1.2.Вызвать браузер и перейти на поле Web-документа:
a) В меню "Файл" активизировать опцию "Открыть страницу". На новой вкладке щелкнуть по кнопке "Обзор".
b) Выбрать в рабочей папке необходимый файл. Вернувшись на вкладку щелкнуть по кнопке "Открыть".
c) Установить рабочее окно редактора на левой стороне экрана.
Разметка простого списка.
Простой список состоит из нескольких строк, каждая из которых имеет маркер. Если маркер постоянный, то список определяют как неупорядоченный (маркированный), если в качестве маркера используют цифровую или буквенную последовательность, то список определяют как нумерованный.
|
|
|
2.1. Для организации маркированного (неупорядоченного) списка используют следующую конструкцию:
<UL> </UL> - тэг-контейнер, внутри которого располагаются все строки списка,
<LI> - тэг, определяющий каждую строку списка (закрывать этот тэг необязательно),
TYPE - атрибут тэга <UL>, определяющий тип маркера: диск, окружность, квадрат - disk, circle, square (следует использовать только строчные буквы). Например, <UL TYPE=circle> (По умолчанию - диск).
Выполнить следующие упражнения:
a) Создать список учебных дисциплин текущего семестра, используя один из дополнительных маркеров.
b) Сформировать вложенный маркированный список, используя в качестве первого уровня список учебных дисциплин, а в качестве второго - дополнительные подстроки: Лекции и Семинары, с использованием другого маркера, указав число учебных часов в семестре по каждому виду занятий.
c) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.
2.2.Сформировать список с использованием рисунка в качестве маркера:
a) Подготовить самостоятельно рисунок маркера (например шарик) или найти на Web-страницах подходящий маркер, скопировать его в рабочую папку в формате .gif или .jpg.
|
|
|
b) Разместить заголовок для нового списка учебных занятий на текущий день.
c) Записать строки списка, начиная каждую из них с установки URL-адреса рисунка маркера, используя конструкцию <IMG SRC='URL">строка списка<BR>.
d) Закрыть список. Проверить результат.
2.3.Для организации нумерованного (упорядоченного) списка следует использовать следующую конструкцию:
<OL> </OL> - тэг-контейнер, внутри которого располагаются элементы списка,
<LI> - тэг строки списка,
TYPE - параметр вида нумерации списка: A - прописные латинские буквы, a - строчные латинские буквы, I - большие римские цифры, i - маленькие римские цифры, 1 - арабские цифры (используется по умолчанию). Пример, <OL TYPE=A>,
START - параметр списка, определяющий начальное значение нумерации (по умолчанию равен 1). В качестве параметра можно использовать только натуральное число, например <OL START=2>,
COMPACT - указывает на вывод списка в компактном виде: уменьшенные шрифт и расстояние между строчками.
a) Привести нумерованный список сотрудников фирмы, состоящий из пяти строк.
| I Глава 1 A. Проблема 1 B. Проблема 2 II Глава 2 A. Задача 1 1. Цель 1 2. Цель 2 i. Средство 1 ii. Средство 2 3. Цель 3 B. Задача 2 C. Задача 3 |
b) Разместить на Web-странице список, пример организации которого показан на рисунке.
c) Разработать упорядоченный список - оглавление учебного курса, состоящий из частей, тем, глав, параграфов, разделов.
d) Составить нумерованный список Ваших основных задач, начиная нумерацию с буквы "C".
e) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.
2.4.Язык гипертекстовой разметки позволяет организовать список описаний (определений), напоминающий страницу толкового словаря: слева устанавливается термин, а в правой части - его определение (толкование). Для такой формы организации списка необходимо использовать следующую конструкцию:
<DL> </DL> - тэг списка описаний, который состоит из строк немаркированного списка, и определений к этим строкам, которые записываются после соответствующей строки в виде текста (описание строки списка),
<DT> </DT> - тэг строки списка,
<DD> </DD> - тэг описания строки списка.
Выполнить следующее упражнение:
a) На Web-странице повторить список товаров фирмы с описанием их свойств, используя формат списка описаний,
b) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.
Дата добавления: 2018-04-05; просмотров: 348; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!