Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Практическая работа № 7
Тема: Правила создания HTML документов: Организация списков. Авторский стиль редактирования
1. общие сведения
Цель работы: Изучить организацию списков в HTML-документах и их особенности, получить практические навыки их создания.
Оснащение: индивидуальные методические указания для самостоятельной работы, научно-методическая литература, периодическая печать, материал, подготовленный в процессе выполнения предыдущих практических работ, электронный учебник «Основы проектирования педагогических программных средств», электронный учебник виртуального факультатива.
2. ОСНОВНЫЕ ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.
Маркированные списки: <UL> ... </UL>
Текст, расположенный между метками <UL> и </UL>, воспринимается как маркированный список. Каждый новый элемент списка следует начинать с метки <LI>.
<UL> <LI> яблоки <LI> бананы </UL>
Дает на экране:
· яблоки
· бананы
В тегах строк «LI» списков, при введении параметра title="Подсказка" возможна вставка пояснений, срабатывающая при наведении на строку.
Закрывающие строчные теги</li> необязательны, но, как правило, их всегда пишут.
Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как маркированные, только вместо символов, выделяющих новый элемент, используются цифры.
К нумерованному списку <OL> возможно добавление атрибута TYPE, который дает возможность задавать значение нумерации. Например: 1 - обычные (арабские) числа (1,2,3,...n) ; a – латинские подстрочные буквы (a, b,c,...n) ;A - латинские надстрочные буквы (A, B,C,...n); i – римские маленькие цифры (i, ii, iii,...n); I – римские большие цифры (I, II, III,...).
<OL TYPE=I>
<LI> карандаш <LI> блокнот <LI> ручка
</OL>
Дает на экране:
I. карандаш
II. блокнот
III. ручка
Если нет никаких дополнительных атрибутов Browser автоматически нумерует элементы такого списка арабскими цифрами.
<OL>
<LI> карандаш <LI> блокнот <LI> ручка
</OL>
Дает на экране:
1. карандаш
2. блокнот
3. ручка
Закрывающие строчные теги</li> необязательны, но, как правило, их всегда пишут.
Списки определений: <DL> ... </DL>
Список определений несколько отличается от других видов списков. Вместо тегов <LI> в списках определений используются теги <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<html>
<head>
<title>Пример списков определений</title>
</head>
<body BGCOLOR=fff99d>
<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<DT>HTML-документ
<DD>Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).
</DL>
</body>
</html>
Этот фрагмент будет выведен на экран как показано на рисунке 1:
Рисунок 1 Наглядный пример списка определений
Обратите внимание: точно так же, как тег <LI>, у тегов <DT> и <DD> закрывающие строчные теги</DT> и </DD> необязательны.
Вложенные списки
Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений. Например:
<html>
<head>
<title>Наглядный пример вложенных списков</title>
</head>
<body BGCOLOR=fff99d >
<H1>HTML поддерживает несколько видов списков </H1>
<DL>
<DT><b>Маркированные списки</b>
<DD>Элементы маркированного списка выделяются специальным символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT><b>Нумерованные списки</b>
<DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией:
<OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</OL>
<DT><b>Списки определений</b>
<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.
<P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P>
</DL>
</body>
</html>
Наглядный пример вложенных списков представлен на рисунке 2
Рисунок 2 Внешний вид HTML-страницы со вложенными списками
Авторский стиль редактирования
Текст документа формируется browser, которые игнорируют множественные пробелы и символы конца строки. Однако, если использовать <pre>...</pre> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.
Например:
<html>
<html>
<head>
<title>Пример авторского стиля редактирования</title>
</head>
<body Bgcolor=fff99d >
<pre><H3>
При этом на экране текст пишется
шрифтом фиксированной ширины,
и отделяется пустыми строками.</pre>
</body>
</html>
Наглядный вид HTML-страницы представлен на рисунке 3
Рисунок 3 Внешний вид HTML-страницы с авторским стилем редактирования
В пределах <PRE> могут использоваться гиперссылки. Однако, в пределах <PRE>, необходимо избегать использования других методов форматирования.
Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>
Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
3. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
· Ознакомиться с основными теоретическими положениями;
· Создать HTML-документ с заголовком «Я учусь организовывать списки», который будет выводить нумерованный список структурно-логической схемы изучения материала, подготовленного в практической работе № 1. Использовать для текста заголовок вашей темы разработанного урока 1 уровня. Выровнять заголовок по центру, а остальной текст по левому краю. При нумерации использовать римские надстрочные цифры. Цвет текста должен быть разноцветным.
· Создать HTML-документ с заголовком «Списки определений», который будет выводить список определений по разработанному вами материалу к урокам. Использовать для списка заголовок 1 уровня.
· Создать HTML-документ с заголовком разработанной темы к уроку. Документ должен выводить вложенный список разработанного вами материала урока, разделенного на модули и блоки. В качестве основного списка (модули) использовать нумерованный список римскими цифрами надстрочного уровня, в качестве вложенного списка (блоки) использовать нумерованный список арабскими цифрам, а в качестве вложенного списка (подблоки) использовать маркированный список. В качестве фона использовать любое фоновое изображение.
· Ответить на контрольные вопросы.
4. КОНТРОЛЬНЫЕ ВОПРОСЫ
- Что такое список?
- Какие используются списки?
- Что такое маркированный список? Привести примеры таких списков.
- Что такое нумерованный список? Привести примеры таких списков.
- Каким образом можно изменить вид нумерованного списка в HTML-документе?
- Для чего используются списки определений? Какие теги при этом используют?
- Что представляет собой вложенный список?
- Для чего используется тег <PRE>?
- Что такое авторский стиль редактирования?
