SlideShare a Scribd company logo
1 of 14
Тема заняття:Тема заняття:
Теги оформленняТеги оформлення
списків даних всписків даних в
мовімові HTMLHTML
МетаМета::Ознайомити учнів з методами cтворення
нумерованих, маркерованих та багаторівневих
списків, гіперпосиланнь на ресурси Інтернет та
сторінки веб-сайту, розміщення зображення на веб-
сторінці та форматувати його засобами мови HTML;
• Розвивати логіку, вміння аналізувати, порівнювати,
робити висновки, висловлювати свою думку;
• Виховувати акуратність, уважність, ввічливість і
дисциплінованість, дбайливе cтавлення до свого
здоров'я.
Списки
• Список – це упорядкований перелік
елементів
• У будь-яких НТМL-документах для
покращення сприйняття тексту можна
використовувати списки трьох типів
СПИСКИСПИСКИ
послідовно
нумеровані
Не нумерованіНе нумеровані
(з маркером(з маркером
позиції)позиції)
списки
словникового типу
або списки
визначень
Не нумеровані (з маркеромНе нумеровані (з маркером
позиції)позиції)
•Даний список оформляється з
допомогою тега
<UL>…</UL>,<UL>…</UL>,
який відмічає відповідно початок і
кінець списку.
•Кожний елемент списку
починається з поодинокого тегу <LI>.<LI>.
• UL>UL>
• <LI> Перший елемент списку<LI> Перший елемент списку
• <LI> Другий елемент списку<LI> Другий елемент списку
• <LI> Третій елемент списку<LI> Третій елемент списку
• . …. …
• . …. …
• <LI> n-й елемент списку<LI> n-й елемент списку
• </UL></UL>
•Тег <UL><UL> має атрибут TYPETYPE, який
визначає зовнішній вигляд маркерів.
Він може приймати значення:
•1) "disc" – диск;1) "disc" – диск;
•2) "circle" – коло;2) "circle" – коло;
•3) "square" – квадрат.3) "square" – квадрат.
Значки списку, символи або цифри
можна змінювати як звичайний текст.
Для цього використовується тег
<FONT><FONT> з атрибутами.
Нумеровані спискиНумеровані списки
Даний список оформляється з
допомогою тега <OL>…</OL>,<OL>…</OL>, які
відмічають відповідно початок і
кінець списку.
Кожний елемент списку
починається з поодинокого тегу
<LI>.<LI>.
Нумеровані спискиНумеровані списки
•<OL>
• <LI> Перший елемент списку
• <LI> Другий елемент списку
• <LI> Третій елемент списку
• .
• .
• <LI> n-й елемент списку
•</OL>
Тег <OL> має атрибути:Тег <OL> має атрибути:
•TYPETYPE – визначає тип
нумерації.
Він може приймати
значення:
•А – великі латинські
літери;
•a– малі латиські літери;
•І – римські цифри;
•1 – арабські цифри (дане
значення прийнято за
замовчуванням)
•STARTSTART – задає, з якого
порядкового номера
починається нумерація у
списку. Значення
атрибуту являється
число.
Наприклад: атрибут
START="4" означає
список, у якого
нумерація починається з
пункту 4
Вкладені спискиВкладені списки
•Мова HTML дозволяє вкладати
списки один в один.
Це можливо при виконанні двохЦе можливо при виконанні двох
умов:умов:
•перша – всі списки повинні бути
різного типу,
•друга – вкладень повинно бути
не більше трьох.
ПрикладПриклад
• <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>
Практична роботаПрактична робота
•ЗавданняЗавдання 11
Створіть веб-сторінку мовою
HTML на якій виводився
маркерований список.
Маркер – диск,
розмір тексту – 5,
гарнітура - Comic Sans MS,
колір червоний,
елементи списку: Весна, Літо,
Осінь, Зима.
Практична роботаПрактична робота
•Завдання 2.Завдання 2.
Створіть веб-сторінку мовою HTML на якій
знаходисться багаторівневий список.
Перший рівень: нумерований список, розмір
тексту – 5, гарнітура - Times New Romans,
колір – синій, елементи списку: Осінь, Зима.
Другий рівень: маркерований список, маркер
– квадрат, розмір тексту – 4, гарнітура -
•Times New Romans, курсив, елементи
списку: вересень, жовтень, листопад,
грудень, січень, лютий.
Домашнє завдання
• Опрацювати конспект
• Удосконалити власну веб-
сторінку на тему “Моє хобі”
використавши списки

More Related Content

More from Людмила Олефіренко

презантація досвіду вчителя математики
презантація досвіду вчителя математики презантація досвіду вчителя математики
презантація досвіду вчителя математики Людмила Олефіренко
 
Конкурсна робота учениці 11 класу Тищенко Аліни
Конкурсна робота учениці 11 класу Тищенко АліниКонкурсна робота учениці 11 класу Тищенко Аліни
Конкурсна робота учениці 11 класу Тищенко АліниЛюдмила Олефіренко
 
Презентація соціального проекту "Дихай вільно"
Презентація соціального проекту "Дихай вільно"Презентація соціального проекту "Дихай вільно"
Презентація соціального проекту "Дихай вільно"Людмила Олефіренко
 
Презентація до соціального проекту "Подаруй дитині щастя"
Презентація до соціального проекту "Подаруй дитині щастя"Презентація до соціального проекту "Подаруй дитині щастя"
Презентація до соціального проекту "Подаруй дитині щастя"Людмила Олефіренко
 

More from Людмила Олефіренко (20)

Globus.pptx
Globus.pptx Globus.pptx
Globus.pptx
 
презентаци до уроку
презентаци до урокупрезентаци до уроку
презентаци до уроку
 
презентаци до уроку
презентаци до урокупрезентаци до уроку
презентаци до уроку
 
конспект.
конспект.конспект.
конспект.
 
досв д
досв ддосв д
досв д
 
Babochki na-listyah
Babochki na-listyahBabochki na-listyah
Babochki na-listyah
 
досвід
досвіддосвід
досвід
 
презентація кабінету інформатики
презентація кабінету інформатикипрезентація кабінету інформатики
презентація кабінету інформатики
 
презантація досвіду вчителя математики
презантація досвіду вчителя математики презантація досвіду вчителя математики
презантація досвіду вчителя математики
 
презентація досвіду 1
презентація досвіду 1презентація досвіду 1
презентація досвіду 1
 
презентация1
презентация1презентация1
презентация1
 
сказка про ліс
сказка про ліссказка про ліс
сказка про ліс
 
презентаци до уроку
презентаци до урокупрезентаци до уроку
презентаци до уроку
 
конспект уроку
конспект урокуконспект уроку
конспект уроку
 
Конкурсна робота учениці 11 класу Тищенко Аліни
Конкурсна робота учениці 11 класу Тищенко АліниКонкурсна робота учениці 11 класу Тищенко Аліни
Конкурсна робота учениці 11 класу Тищенко Аліни
 
Презентація соціального проекту "Дихай вільно"
Презентація соціального проекту "Дихай вільно"Презентація соціального проекту "Дихай вільно"
Презентація соціального проекту "Дихай вільно"
 
Презентація до соціального проекту "Подаруй дитині щастя"
Презентація до соціального проекту "Подаруй дитині щастя"Презентація до соціального проекту "Подаруй дитині щастя"
Презентація до соціального проекту "Подаруй дитині щастя"
 
2. зно 2015 інновації зно-2015
2. зно 2015 інновації зно-20152. зно 2015 інновації зно-2015
2. зно 2015 інновації зно-2015
 
презентація досв.степаненко
презентація досв.степаненкопрезентація досв.степаненко
презентація досв.степаненко
 
62 _
62  _62  _
62 _
 

заняття 3

  • 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. Домашнє завдання • Опрацювати конспект • Удосконалити власну веб- сторінку на тему “Моє хобі” використавши списки