Download as PDF, PPTX
More Related Content
Similar to Теги оформлення списків даних в мові HTML
Теги оформлення списків даних в мові HTML
- 1. Тема заняття:Тема заняття: ТегиоформленняТеги оформлення списків даних всписків даних в мовімові HTMLHTML МетаМета::Ознайомити учнів з методами cтворення нумерованих, маркерованих та багаторівневих списків, гіперпосиланнь на ресурси Інтернет та сторінки веб-сайту, розміщення зображення на веб- сторінці та форматувати його засобами мови HTML; • Розвивати логіку, вміння аналізувати, порівнювати, робити висновки, висловлювати свою думку; • Виховувати акуратність, уважність, ввічливість і дисциплінованість, дбайливе cтавлення до свого здоров'я.
- 2. Списки • Список –це упорядкований перелік елементів • У будь-яких НТМL-документах для покращення сприйняття тексту можна використовувати списки трьох типів
- 3. СПИСКИСПИСКИ послідовно нумеровані Не нумерованіНе нумеровані (змаркером(з маркером позиції)позиції) списки словникового типу або списки визначень
- 4. Не нумеровані (змаркеромНе нумеровані (з маркером позиції)позиції) •Даний список оформляється з допомогою тега <UL>…</UL>,<UL>…</UL>, який відмічає відповідно початок і кінець списку. •Кожний елемент списку починається з поодинокого тегу <LI>.<LI>.
- 5. • UL>UL> • <LI>Перший елемент списку<LI> Перший елемент списку • <LI> Другий елемент списку<LI> Другий елемент списку • <LI> Третій елемент списку<LI> Третій елемент списку • . …. … • . …. … • <LI> n-й елемент списку<LI> n-й елемент списку • </UL></UL>
- 6. •Тег <UL><UL> маєатрибут TYPETYPE, який визначає зовнішній вигляд маркерів. Він може приймати значення: •1) "disc" – диск;1) "disc" – диск; •2) "circle" – коло;2) "circle" – коло; •3) "square" – квадрат.3) "square" – квадрат. Значки списку, символи або цифри можна змінювати як звичайний текст. Для цього використовується тег <FONT><FONT> з атрибутами.
- 7. Нумеровані спискиНумеровані списки Данийсписок оформляється з допомогою тега <OL>…</OL>,<OL>…</OL>, які відмічають відповідно початок і кінець списку. Кожний елемент списку починається з поодинокого тегу <LI>.<LI>.
- 8. Нумеровані спискиНумеровані списки •<OL> •<LI> Перший елемент списку • <LI> Другий елемент списку • <LI> Третій елемент списку • . • . • <LI> n-й елемент списку •</OL>
- 9. Тег <OL> маєатрибути:Тег <OL> має атрибути: •TYPETYPE – визначає тип нумерації. Він може приймати значення: •А – великі латинські літери; •a– малі латиські літери; •І – римські цифри; •1 – арабські цифри (дане значення прийнято за замовчуванням) •STARTSTART – задає, з якого порядкового номера починається нумерація у списку. Значення атрибуту являється число. Наприклад: атрибут START="4" означає список, у якого нумерація починається з пункту 4
- 10. Вкладені спискиВкладені списки •МоваHTML дозволяє вкладати списки один в один. Це можливо при виконанні двохЦе можливо при виконанні двох умов:умов: •перша – всі списки повинні бути різного типу, •друга – вкладень повинно бути не більше трьох.
- 11. ПрикладПриклад • <HTML> • <HEAD><TITLE>Мова HTML </TITLE> • </HEAD> • <BODY> • <OL TYPE="I"><FONT SIZE="5" • FACE="Arial" COLOR="navy"> • <LI>Весна • <LI>Літо • <LI>Осінь • <LI>Зима </FONT> • </OL> • </BODY> • </HTML>
- 12. Практична роботаПрактична робота •ЗавданняЗавдання11 Створіть веб-сторінку мовою HTML на якій виводився маркерований список. Маркер – диск, розмір тексту – 5, гарнітура - Comic Sans MS, колір червоний, елементи списку: Весна, Літо, Осінь, Зима.
- 13. Практична роботаПрактична робота •Завдання2.Завдання 2. Створіть веб-сторінку мовою HTML на якій знаходисться багаторівневий список. Перший рівень: нумерований список, розмір тексту – 5, гарнітура - Times New Romans, колір – синій, елементи списку: Осінь, Зима. Другий рівень: маркерований список, маркер – квадрат, розмір тексту – 4, гарнітура - •Times New Romans, курсив, елементи списку: вересень, жовтень, листопад, грудень, січень, лютий.
- 14. Домашнє завдання • Опрацюватиконспект • Удосконалити власну веб- сторінку на тему “Моє хобі” використавши списки