2015-05-10
290Лабораторно-практическая работа № 3
Тема: Создание Web-страниц.
Цель: Освоить основные теги HTML с помощью текстового редактора "Блокнот" и методику использования тегов для создания списка в HTML-документе.
Теоретическая часть
В HTML есть возможность создавать нумерованные и маркированные списки.
<ol>…</ol> – создает нумерованный список элементов
Атрибуты:
start="N" – начать нумерацию с числа N
type="…" -определяет формат нумерации
1 – арабские цифры (по умолчанию)
A – прописные буквы (A, B, C)
а – строчные буквы (a, b, c)
I – прописные римские цифры (I, II, III)
i – строчные римские цифры (i, ii, iii)
<ul>…</ul> – создает маркированный список элементов
Атрибут:
type="…"
– определяет формат маркера
disk – диск (по умолчанию)
circle – окружность
square – квадрат
<li>…</li> – задает элемент списка в нумерованном или маркированном списке
Атрибуты:
type="…" – формат номера или маркера (см. описание <ol> и <ul>)
value="N" – задает номер элемента списка
Пример:
HTML-код:
<ol>
<li>арабские цифры (по умолчанию)</li>
<li type="A">прописные буквы</li>
<li type="a">строчные буквы</li>
<li type="I">прописные римские цифры</li>
<li type="i">строчные римские цифры</li>
</ol>
<ul>
<li>диск (по умолчанию)</li>
<li type="circle">окружность</li>
<li type="square">квадрат</li>
</ul>
Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков, каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка записывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.
Списки определений задаются с помощью тега <DL> (Definition List). Внутри тега тегом <DT> (Definition Term) помечается определяемый термин, а тегом <DD> (Definition Description) – абзац с его определением. Для тегов <DT> и <DD> можно не записывать соответствующие закрывающие теги.
В общем, список определений записывается следующим образом:
<DL>
<DТ>Термин
<DD> Определение термина
</DL>
Ход работы
1. В папке HTML создать текстовый документ с названием List.html, открыть его с помощью браузера и перейти к редактированию HTML-кода.
2. Создайте маркированный список, элементами которого будут месяцы года. Для этого в файле List.html запишите HTML-код:
<html>
<head>
<title> Создание списков </ title>
</ head>
<body>
<ul>
<b> Месяцы года: </ b>
<li> январ
<li> февраль
<li> март
<li> апрель
<li> май
<li> июнь
<li> июль
<li> август
<li> сентябрь
<li> октябрь
<li> ноябрь
<li> декабрь
</ ul>
</ body>
</ html>
3. Рассмотрим возможность изменения типа маркера. Необходимо отразить маркеры заполненными квадратиками для первых четырех элементов списка, отобразить маркеры незаполненными кругами для других четырех элементов списка и отобразить маркеры заполненными кругами для последних четырех элементов списка. Реализовать изменение типа маркеров можно с помощью параметра type тега <li>. Для этого модифицируйте код списка:
...
<ul>
<b> Месяцы года: </ b>
<li type="square"> январь
<li type="square"> февраль
<li type="square"> март
<li type="square"> апрель
<li type="circle"> май
<li type="circle"> июнь
<li type="circle"> июль
<li type="circle"> август
<li type="disk"> сентябрь
<li type="disk"> октябрь
<li type="disk"> ноябрь
<li type="disk"> декабрь
</ ul>
</ body>
4. Создайте список с графическими маркерами без тегов <li>. Перед каждым элементом списка необходимо вставить графическое изображение. Тогда элементы списка отделяем друг от друга с помощью тега принудительного перевода строки <br>. Файл star.jpg должен находится в том же каталоге, что и наш файл List.jpg, т.е. в папке HTML. Запишите HTML-код:
...
<ul>
<b> Месяцы года: </ b> <br> <br>
<img src="star.jpg"> январь <br>
<img src="star.jpg"> февраль <br>
<img src="star.jpg"> март <br>
<img src="star.jpg"> апрель <br>
<img src="star.jpg"> май <br>
<img src="star.jpg"> июнь <br>
<img src="star.jpg"> июль <br>
<img src="star.jpg"> август <br>
<img src="star.jpg"> сентябрь <br>
<img src="star.jpg"> октябрь <br>
<img src="star.jpg"> ноябрь <br>
<img src="star.jpg"> декабрь
</ ul>
</ body>
5. Создайте нумерованный список с помощью тега - контейнера <ol> </ ol>. Элементами нумерованного списка будут снова месяцы года. Запишите соответствующий HTML-код и посмотрите этот нумерованный список в браузере:
...
<ol>
<b> Первый квартал включает следующие месяцы года: </ b>
<li> январь
<li> февраль
<li> март
</ ol>
</ body>
6. Определите различные виды нумерации списка. Реализуйте это с помощью параметра type тега <li>. Запишите HTML-код для указанного списка и посмотрите его в браузере:
...
<ol>
<b> Кварталы включают следующие месяцы года: </ b>
<li type="I"> Январь, февраль, март
<li type="i"> Апрель, май, июнь
<li type="A"> Июль, август, сентябрь
<li type="a"> Октябрь, ноябрь, декабрь
</ ol>
</ body>
7. Определите нумерованный список, состоящий из пяти элементов. В этом списке нумерация начинается с 1995, и в третьей строке списка начало нумерации меняется на 2003. Запишите соответствующий HTML-код:
...
<ol start="1995">
<li>
<li>
<li value="2003">
<li>
<li>
</ ol>
</ body>
8. Создайте список определений. В первой части пункта списка запишите срок, который определяет темперамент человека. Реализуем это с помощью тега <dt>. А во второй части пункта списка запишите объяснение, которое раскрывает значение термина. Это реализуйте с помощью тега <dd>. Запишите HTML-код для такого списка определений:
...
<dl>
<h3 align="center"> Классификация типичных темпераментов человека, <br> которая основана на воззрениях Гиппократа </ h3>
<dt> Флегматик
<dd> Пассивный, очень трудоспособный, медленно приспосабливается; <br> настроение устойчивый, мало поддается внешнему воздействию; <br> вялость эмоциональных реакций и медлительность в волевой деятельности <br> <br>
<dt> Сангвиник
<dd> Активный, энергичный, легко приспосабливается; <br> живость и подвижность эмоциональных реакций, скорость и сила волевых проявлений <br> <br>
<dt> Холерик
<dd> Активный, очень энергичный, настойчивый; <br> порывистость и сила эмоциональных реакций, бурные волевые проявления <br> <br>
<dt> Меланхолик
<dd> Пассивный, легко утомляется, тяжело приспосабливается; <br> слабость волевых проявлений и преобладание подавленного настроения, неуверенность в себе
</ dl>
</ body>
9. Создайте вложенный список, который показывает спутники некоторых планет. Рассмотрим случай, когда в каждый элемент маркированного списка вложенный свой нумерованный список. Запишите соответствующий HTML-код:
...
<ul>
<b> Спутники некоторых планет </ b>
<li> Земля
<ol>
<li> Луна
</ ol>
<li> Марс
<ol>
<li> Фобос
<li> Деймос
</ ol>
<li> Уран
<ol>
<li> Ариэль
<li> Умбра эль
<li> Титания
<li> Оберон
<li> Миранда
</ ol>
<li> Нептун
<ol>
<li> Тритон
<li> Нереида
</ ol>
</ ul>
</ body>
10. Создайте страницу «Мое хобби». Страница должна содержать заголовок «Мое хобби», выровненный по центру, краткое описание вашего хобби и нумерованный список ваших интересов (спорт, науки, игры и т.п.). Название файла – hobby.html.
Измените тип нумерации на нумерацию буквами и римскими цифрами и сохраните в файле hobby1.html.
Измените тип списка на маркированный, используйте разные типы маркеров и сохраните в файле hobby2.html.
Контрольные вопросы к ЛПР № 3:
1. Как определяется нумерованный список?
2. Как определяется маркированный список?
3. Как определяется список определений?
4. Как изменить тип маркера в маркированном списке?
5. Как изменить тип порядок нумерации в нумерованном списке?
6. Как определить список с маркерами в виде рисунков?
7. Как начать нумерованный список с произвольного номера?
8. Как определяются вложенные списки?
9. Зачем используются списки?
10. Как пронумеровать список с помощью прописных английских букв?
Контрольные вопросы к ЛПР № 3:
1. Как определяется нумерованный список?
2. Как определяется маркированный список?
3. Как определяется список определений?
4. Как изменить тип маркера в маркированном списке?
5. Как изменить тип порядок нумерации в нумерованном списке?
6. Как определить список с маркерами в виде рисунков?
7. Как начать нумерованный список с произвольного номера?
8. Как определяются вложенные списки?
9. Зачем используются списки?
10. Как пронумеровать список с помощью прописных английских букв?
Контрольные вопросы к ЛПР № 3:
1. Как определяется нумерованный список?
2. Как определяется маркированный список?
3. Как определяется список определений?
4. Как изменить тип маркера в маркированном списке?
5. Как изменить тип порядок нумерации в нумерованном списке?
6. Как определить список с маркерами в виде рисунков?
7. Как начать нумерованный список с произвольного номера?
8. Как определяются вложенные списки?
9. Зачем используются списки?
10. Как пронумеровать список с помощью прописных английских букв?
Контрольные вопросы к ЛПР № 3:
1. Как определяется нумерованный список?
2. Как определяется маркированный список?
3. Как определяется список определений?
4. Как изменить тип маркера в маркированном списке?
5. Как изменить тип порядок нумерации в нумерованном списке?
6. Как определить список с маркерами в виде рисунков?
7. Как начать нумерованный список с произвольного номера?
8. Как определяются вложенные списки?
9. Зачем используются списки?
10. Как пронумеровать список с помощью прописных английских букв?
Контрольные вопросы к ЛПР № 3:
1. Как определяется нумерованный список?
2. Как определяется маркированный список?
3. Как определяется список определений?
4. Как изменить тип маркера в маркированном списке?
5. Как изменить тип порядок нумерации в нумерованном списке?
6. Как определить список с маркерами в виде рисунков?
7. Как начать нумерованный список с произвольного номера?
8. Как определяются вложенные списки?
9. Зачем используются списки?
10. Как пронумеровать список с помощью прописных английских букв?
