Сохранить 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) Привести нумерованный список сотрудников фирмы, состоящий из пяти строк.

b) Разместить на Web-странице список, пример организации которого показан на рисунке.

c) Разработать упорядоченный список - оглавление учебного курса, состоящий из частей, тем, глав, параграфов, разделов.

d) Составить нумерованный список Ваших основных задач, начиная нумерацию с буквы "C".

e) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.

2.4.Язык гипертекстовой разметки позволяет организовать список описаний (определений), напоминающий страницу толкового словаря: слева устанавливается термин, а в правой части - его определение (толкование). Для такой формы организации списка необходимо использовать следующую конструкцию:

<DL> </DL> - тэг списка описаний, который состоит из строк немаркированного списка, и определений к этим строкам, которые записываются после соответствующей строки в виде текста (описание строки списка),

<DT> </DT> - тэг строки списка,

<DD> </DD> - тэг описания строки списка.

Выполнить следующее упражнение:

a) На Web-странице повторить список товаров фирмы с описанием их свойств, используя формат списка описаний,

b) Перейти на окно браузера, нажать на кнопку "Обновить". Проверить организацию списка.