Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 858 Лабораторна робота 5 на тему Створення списків з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота 5 на тему Створення списків з курсу Сучасні Internet-технології, НУДПСУ

« Назад

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

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

Хід роботи

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

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

3. Створимо маркірований список, елементами якого будуть місяці року. Для цього у файлі 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>

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

4. Розглянемо можливість зміни типу маркера. Необхідно відобразити маркери заповненими квадратиками для перших чотирьох елементів списку, відобразити маркери незаповненими колами для інших чотирьох елементів списку та відобразити маркери заповненими колами для останніх чотирьох елементів списку. Реалізуємо зміну типу маркерів за допомогою параметра 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>

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

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

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

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

<ol>

<b>Перший квартал включає такі місяці року:</b>

<li>Січень

<li>Лютий

<li>Березень

</ol>

</body>

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

...

<ol>

<b>Квартали включають такі місяці року:</b>

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

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

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

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

</ol>

</body>

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

<ol start="1995">

<li>

<li>

<li  value="2003">

<li>

<li>

</ol>

</body>

 

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

9. Створимо список визначень. У першій частині пункту списку запишемо термін, який визначає темперамент людини. Реалізуємо це за допомогою тегу <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>

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

10. Створимо вкладений список, показує супутники деяких планет. Розглянемо випадок, коли у кожен елемент маркірованого списку вкладений свій нумерований список. Записуємо відповідний 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

З повагою ІЦ “KURSOVIKS”!