
- •Язык разметки гипертекста html. Назначение html
- •Язык разметки гипертекста html
- •Краткая история html
- •Программы для просмотра электронных документов
- •Лабораторная работа № 1. Язык разметки гипертекста html. Основные понятия языка
- •Основные понятия
- •Структура документа html
- •Задания к лабораторной работе № 1 Задание 1. Создание простейшей Web-страницы.
- •Контрольные вопросы
- •Лабораторная работа № 2. Форматирование текста.
- •Форматирование абзаца
- •Форматирование шрифта
- •Физические стили
- •Размер шрифта
- •Логические стили
- •Горизонтальные линии
- •Escape последовательности (символьные объекты)
- •Контрольные вопросы
- •Лабораторная работа № 3. Управление цветом
- •Цветовая гамма html-документа
- •Сочетание цветов
- •Задания к лабораторной работе № 3 Управление цветом
- •Контрольные вопросы
- •Лабораторная работа № 4. Гиперссылки
- •Относительные адреса ссылок
- •Задания к лабораторной работе № 4 Гипертекстовые ссылки Задание к лабораторной работе №4
- •Контрольные вопросы
- •Лабораторная работа № 5. Работа со списками
- •Маркированный (ненумерованный - Unordered List) список
- •Нумерованные списки
- •Вложенный список
- •Списки определений
- •Список-меню
- •Список-указатель (список-индекс)
- •Теплым.
- •Круглым.
- •Желтым.
- •Контрольные вопросы
- •Лабораторная работа № 6. Вставка графических изображений
- •Роль графики
- •Характеристика графических стандартов
- •Вставка графических изображений
- •Использование карт изображений
- •Преимущества и недостатки карт-изображений
- •Область применения
- •Конфигурация карт-изображений
- •Типы карт-изображений
- •Серверный вариант
- •Клиентский вариант
- •Задания к лабораторной работе № 6 Вставка графических изображений
- •Примеры карт
- •Карта 2
- •Контрольные вопросы
- •Лабораторная работа № 7. Таблицы html-документов
- •Основные методы создания таблиц
- •Цветные таблицы
- •Группировка данных
- •Колонтитулы таблицы
- •Прорисовка структуры таблицы
- •Вложенные таблицы
- •Преимущества вложенных таблиц
- •Задания к лабораторной работе № 7.
- •Задание 3. Форматирование таблицы
- •Контрольные вопросы
- •Лабораторная работа № 8. Формы
- •1. Организация обратной связи
- •2. Авторизация
- •3. Проведение исследований
- •4. Пользовательский профиль
- •Структура пользовательских форм
- •Параметры текстовой строки
- •Параметры опции выбора
- •Параметры кнопки с рисунком
- •Параметры текстового поля
- •Параметры
- •Параметры текстового поля
- •Задания к лабораторной работе № 6 Формы
- •Индивидуальное задание
- •Контрольные вопросы
- •Лабораторная работа № 9. Фреймы
- •Синтаксис фреймов
- •Атрибуты:
- •Планирование фреймов и взаимодействия между фреймами
- •Зарезервированные имена фреймов
- •Бегущая строка (элемент marquee)
- •Фиксация информации на экране (элемент banner)
- •Задания к лабораторной работе № 9. Фреймы
- •Контрольные вопросы
- •Справочник
- •Приложение 1. Таблица спецсимволов
- •Литература
Вложенный список
Вложенный список (Nested Lists) может содержать в себе элемент или целый список любого вида. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Необходимо быть особенно внимательным при расположении флагов начала и конца каждого списка! Чтобы не ошибиться, удобно записывать элементы вложенной конструкции с небольшим отступом.
Пример.
<HTML>
<HEAD>
<TITLE>Вложенные списки</title>
</head>
<BODY>
<UL>
<LI> Глава 1
<OL>
<LI> Параграф 1.1
<LI> Параграф 1.2
</ol>
<LI> Глава 2
<OL>
<LI> Параграф 2.1
<LI> Параграф 2.2
</ol>
<LI> Глава 3
<OL>
<LI>Пункт 3.1
<LI>Пункт 3.2
</ol>
</ul>
</body>
</html>
Списки определений
Списки определений – это особый тип структуризации информационных данных, идеально подходящий для отображения терминологичесих и толковых словарей, а также различных справочников средствами HTML.
<DL> ... </DL>
Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition — определение определения).
Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с новой строки. Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение — произвольный текст под заголовком.
Пример.
<HTML>
<HEAD>
<TITLE>Списки определений</title>
</head>
<BODY>
<BASEFONT SIZE=3>
<DL>
<DT>Гиперссыпка
<DD>- фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
<DT>Фрейм
<DD>- область документа со своими полосами прокрутки.
<DD>- одиночное изображение в анимационном графическом файле (кадр).
</dl>
</body>
</html>
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL compact>.
Пример.
<HTML>
<HEAD>
<TITLE>Списки определений</title>
</head>
<BODY>
<BR>
<DL compact>
<DT>Москва
<DD> – столица нашей Родины
<DT>Ставрополь
<DD> – город, в котором я живу.
</dl>
</body>
</html>
Список-меню
<MENU> (Menu List) используется для представления информации в виде списка-меню, в котором каждая запись занимает одну строку. Это позволяет сделать список более компактным по сравнению с конструкцией <UL>...</UL>. Формат такого списка зависит от используемой программы просмотра HTML-документа, однако многие программы просмотра используют <MENU> как "синоним" <UL>. Каждому элементу списка на экране обычно предшествует символ "пуля".
Пример
<HTML>
<HEAD>
<TITLE>Список-меню</title>
</head>
<BODY>
<BR>
<MENU>
<LI>Это - первый элемент списка-меню.
<LI>Второй элемент.
<LI>Третий элемент.
</menu>
</body>
</html>