Новини освіти і науки:

Тлумачний словник
Авто
Автоматизація
Архітектура
Астрономія
Аудит
Біологія
Будівництво
Бухгалтерія
Винахідництво
Виробництво
Військова справа
Генетика
Географія
Геологія
Господарство
Держава
Дім
Екологія
Економетрика
Економіка
Електроніка
Журналістика та ЗМІ
Зв'язок
Іноземні мови
Інформатика
Історія
Комп'ютери
Креслення
Кулінарія
Культура
Лексикологія
Література
Логіка
Маркетинг
Математика
Машинобудування
Медицина
Менеджмент
Метали і Зварювання
Механіка
Мистецтво
Музика
Населення
Освіта
Охорона безпеки життя
Охорона Праці
Педагогіка
Політика
Право
Програмування
Промисловість
Психологія
Радіо
Регилия
Соціологія
Спорт
Стандартизація
Технології
Торгівля
Туризм
Фізика
Фізіологія
Філософія
Фінанси
Хімія
Юриспунденкция

Лабораторна робота №5 Створення списків

Мета роботи:опанувати основні прийоми роботи зі створення списків

Хід роботи:

1. Скопіювати в теку HTML виданий викладачем графічний файл star.jpg.

2. В теці HTML створити текстовий документ з назвою List.html, відкрити його за допомогою браузеру та перейти до редагування HTML-коду

3. Створимо маркірований список, елементами якого будуть місяці року. Для цього в файлі List.html записуємо HTML-код:

<html>

<head>

<title>Створення списків</title>

</head>

<body>

<ul>

Місяці року:

<li>Січень

<li>Лютий

<li>Березень

<li>Квітень

<li>Травень

<li>Червень

<li>Липень

<li>Серпень

<li>Вересень

<li>Жовтень

<li>Листопад

<li>Грудень

</ul>

</body>

</html>

Перегляд списку в браузері повинен відповідати рис. 1.

Рис. 1. Відображення браузером маркірованого списку

4. Розглянемо можливість зміни типу маркеру. Необхідно відобразити маркери заповненими квадратиками для перших чотирьох елементів списку, відобразити маркери незаповненими колами для других чотирьох елементів списку та відобразити маркери заповненими колами для останніх чотирьох елементів списку. Реалізуємо зміну типу маркерів за допомогою параметра type тега <li>. Для цього модифікуємо код списку:

…

<ul>

Місяці року:

<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>

Переглянемо цей маркірований список у браузері (рис.2)

Рис.2. Відображення маркірованого списку, для елементів якого визначено різні значення параметра type

5. Створимо список з графічними маркерами. При цьому можна обійтись без тегів <li>. Перед кожним елементом списку необхідно вставити графічне зображення. Тоді елементи списку відокремлюємо один від одного за допомогою тегу примусового переводу строки  . Графічний файл star.jpg повинен знаходиться в тому ж самому каталозі, що і наш файл List.jpg, тобто в папці HTML на диску E. Записуємо HTML-код:

…

<ul>

Місяці року: 

<img src="star.jpg">Січень 

<img src="star.jpg">Лютий 

<img src="star.jpg">Березень 

<img src="star.jpg">Квітень 

<img src="star.jpg">Травень 

<img src="star.jpg">Червень 

<img src="star.jpg">Липень 

<img src="star.jpg">Серпень 

<img src="star.jpg">Вересень 

<img src="star.jpg">Жовтень 

<img src="star.jpg">Листопад 

<img src="star.jpg">Грудень

</ul>

</body>

Переглянемо цей маркірований список у браузері (рис.3)

6. Створимо нумерований список. Реалізуємо це за допомогою тегу - контейнеру <ol> </ol>. Елементами нумерованого списку будуть знову місяці року. Записуємо відповідний HTML-код та переглянемо цей нумерований список у браузері (рис.4) :

…

<ol>

Перший квартал включає наступні місяці року:

<li>Січень

<li>Лютий

<li>Березень

</ol>

</body>

Рис.3. Відображення маркірованого списку з графічними маркерами

6. Визначимо різні види нумерації списку. Реалізуємо це за допомогою параметру type тегу <li>. Записуємо HTML-код для вказаного списку та переглянемо його у браузері (рис. 5):

...

<ol>

Квартали включають наступні місяці року:

<li type="I">Січень, лютий, березень

<li type="i">Квітень, травень, червень

<li type="A">Липень, серпень, вересень

<li type="a">Жовтень, листопад, грудень

</ol>

</body>

Рис. 4. Відображення нумерованого списку

Рис.5. Відображення нумерованого списку, для якого визначено різні види нумерації списку

7. Визначимо нумерований список, який складається з п’яти елементів. В цьому списку нумерація починається з 1995, та в третьому рядку списку початок нумерації змінюється на 2003. Записуємо відповідний HTML-код :

…

<ol start="1995">

<li>

<li value="2003">

<li>

</ol>

</body>

Переглянемо цей нумерований список у браузері (рис.6)

Рис. 6. Відображення нумерованого списку, для якого визначено заміну початку нумерації списку та заміну нумерації пунктів в середині списку

8. Створимо список визначень. В першій частині пункту списку запишемо термін, який визначає темперамент людини. Реалізуємо це за допомогою тегу <dt>. А в другій частині пункту списку запишемо пояснення, яке розкриває значення терміну. Це реалізуємо за допомогою тегу <dd>. Записуємо HTML-код для такого списку визначень :

…

<dl>

<h3 align="center"> Класифікація типових темпераментів людини, яка заснована на поглядах Гіппократа </h3>

<dt> Флегматик

<dd> Пасивний, дуже працездатний, повільно пристосовується; настрій стійкий, мало піддається зовнішньому впливу; млявість емоційних реакцій та повільність у вольовій діяльності

<dt> Сангвінік

<dd> Активний, енергійний, легко пристосовується; живість та рухливість емоційних реакцій, швидкість та сила вольових проявів

<dt> Холерик

<dd> Активний, дуже енергійний, наполегливий; поривчастість та сила емоційних реакцій, бурні вольові прояви

<dt> Меланхолік

<dd> Пасивний, легко стомлюється, важко пристосовується; слабість вольових проявів та перевага подавленого настрою, невпевненість в собі

</dl>

</body>

Переглянемо цей список визначень у браузері (рис. 7)

Рис. 7. Відображення списку визначень, який розкриває класифікацію темпераментів людини

9. Створимо вкладений список, який показує супутники деяких планет. Розглянемо випадок, коли в кожен елемент маркірованого списку вкладений свій нумерований список. Записуємо відповідний HTML-код:

…

<ul>

Супутники деяких планет

<li>Земля

<ol>

<li>Луна

</ol>

<li>Марс

<ol>

<li>Фобос

<li>Деймос

</ol>

<li>Уран

<ol>

<li>Аріель

<li>Умбрі ель

<li>Тітанія

<li>Оберон

<li>Міранда

</ol>

<li>Нептун

<ol>

<li>Тритон

<li>Нереїда

</ol>

</ul>

</body>

Переглянемо цей вкладений список у браузері (рис. 8)

Рис. 8. Відображення вкладеного списку, який показує супутники деяких планет

Завдання для самостійної роботи

1. Визначити список відповідно зразка, показаного на рис.9.

Рис. 9. Зразок списку

2. Оформити звіт.

Питання для самоперевірки

1. Як визначається нумерований список?

2. Як визначається маркірований список?

3. Як визначається список визначень?

4. Як змінити тип маркеру в маркірованому списку?

5. Як змінити тип порядок нумерації в нумерованому списку?

6. Як визначити список з маркерами у вигляді рисунків?

7. Як почати нумерований список з довільного номеру?

8. Як визначаються вкладені списки?

9. Навіщо використовуються списки?

10. Як пронумерувати список за допомогою прописних англійських літер?

Читайте також:

<== попередня сторінка	\|	наступна сторінка ==>
Лабораторна робота № 4 Створення гіперпосилань	\|	Лабораторна робота №7 Створення фреймів

Не знайшли потрібну інформацію? Скористайтесь пошуком google:

Генерація сторінки за: 0.063 сек.