<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Списки. Види списків.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Списки. Види списків.</metakeywords>
-
'''Тема: Списки. Види списків.'''
+
==Тема==
+
*'''Списки. Види списків.'''
-
'''Мета:''' Розглянути поняття списків у мові HTML. Навчити створювати різні види списків: від нумерованих до списків визначень. '''Тип уроку:'''теоретично-практичний.
+
==Мета==
+
*Розглянути поняття списків у мові HTML. Навчити створювати різні види списків: від нумерованих до списків визначень.
-
'''Хід уроку:'''
+
==Тип уроку==
+
*теоретично-практичний.
+
+
==Хід уроку==
+
+
===Поняття "списки"===
<br> Багато тегів не тільки відповідають за вигляд веб-сторінки але і визначають її структуру.
<br> Багато тегів не тільки відповідають за вигляд веб-сторінки але і визначають її структуру.
Строка 15:
Строка 22:
Виходить, у заголовків більш широка «область дій», чим просто візуальне виділення фрагментів тексту.
Виходить, у заголовків більш широка «область дій», чим просто візуальне виділення фрагментів тексту.
-
Теж саме можна сказати і про ''списки'', які визначають структуру документа.
+
Теж саме можна сказати і про '''списки'', які визначають структуру документа.
{{#ev:youtube|J8Vc-6Jy6D8&feature=related}}
{{#ev:youtube|J8Vc-6Jy6D8&feature=related}}
-
<u>Існує кілька видів списків: </u>
+
+
===Види списків===
+
+
'''Існує кілька видів списків'''
*Нумеровані
*Нумеровані
*Марковані
*Марковані
*Списки визначень
*Списки визначень
-
-
<br>
Відразу потрібно сказати, що всі види списків можуть бути використані у змішаному порядку і бувають як неупорядкованими, так і впорядкованими.
Відразу потрібно сказати, що всі види списків можуть бути використані у змішаному порядку і бувають як неупорядкованими, так і впорядкованими.
-
<br>
+
Окремим типом списків є '''багаторівневий''', для створення якого використовуються комбінації маркованих і нумерованих.
-
+
-
Окремим типом списків є ''багаторівневий'', для створення якого використовуються комбінації маркованих і нумерованих.
+
Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.
Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.
Строка 39:
Строка 45:
{{#ev:youtube|Pz2onrsCdYk}}
{{#ev:youtube|Pz2onrsCdYk}}
-
<br> '''Нумерований список.'''
+
====Нумерований список===
Для створення нумерованих списків використовуються теги ''< OL > '' та ''< LI >: ''
Для створення нумерованих списків використовуються теги ''< OL > '' та ''< LI >: ''
Строка 50:
Строка 56:
За допомогою атрибута ''type'' можна змінити стилі нумерації.
За допомогою атрибута ''type'' можна змінити стилі нумерації.
-
[[Image:Numeraciya.jpg]]
+
[[Image:Numeraciya.jpg|480px|Нумерований список]]
-
[[Image:Number1.jpg]]
+
[[Image:Number1.jpg|480px|Нумерований список]]
При доповненні вже існуючого списку новими значеннями, браузер перерахує його.
При доповненні вже існуючого списку новими значеннями, браузер перерахує його.
-
-
<br>
Причому, атрибуты '''start''' і '''value''' змінюють порядок нумерації списку:
Причому, атрибуты '''start''' і '''value''' змінюють порядок нумерації списку:
Строка 63:
Строка 67:
*VALUE – призначає довільний номер будь-якому елементу списку
*VALUE – призначає довільний номер будь-якому елементу списку
-
<br>
-
[[Image:Number2.jpg]]
+
[[Image:Number2.jpg|480px|Нумерований список]]
-
<br> '''Маркований список '''
+
====Маркований список====
Для створення маркованих списків застосовують теги ''< UL >'' і ''< LI >: ''
Для створення маркованих списків застосовують теги ''< UL >'' і ''< LI >: ''
Строка 80:
Строка 83:
Також потрібно знати, що в межах одного списку можна використовувати різне маркування елементів списку.
Також потрібно знати, що в межах одного списку можна використовувати різне маркування елементів списку.
-
<br>
-
-
<br>
-
[[Image:Markir.jpg]]
+
[[Image:Markir.jpg|480px|Маркований список]]
<br>
<br>
-
<br> '''Списки визначень'''
+
====Списки визначень====
Для створення списків визначень використовують три тега:
Для створення списків визначень використовують три тега:
Строка 96:
Строка 96:
#< DD > - початок і кінець статті, яка пояснює термін
#< DD > - початок і кінець статті, яка пояснює термін
-
<br>
Теги ''< DT >'' і ''< DD >'' можуть не чергуватися.
Теги ''< DT >'' і ''< DD >'' можуть не чергуватися.
Строка 102:
Строка 101:
Тобто, можна «прив'язати» до одного визначення кілька термінів або проробити ту ж операцію навпаки – це на розсуд самого програміста.
Тобто, можна «прив'язати» до одного визначення кілька термінів або проробити ту ж операцію навпаки – це на розсуд самого програміста.
-
[[Image:Opredd.jpg]]
-
[[Image:Figurss.jpg]]
+
[[Image:Opredd.jpg|480px|Списки визначень]]
+
+
+
[[Image:Figurss.jpg|480px|Списки визначень]]
Строка 113:
Строка 114:
<br>
<br>
-
'''Самоконтроль:'''
+
==Самоконтроль==
-
1. Для чого потрібні списки?
+
''1. Для чого потрібні списки? ''
-
2. Види списків.
+
''2. Види списків. ''
-
3. Як створити нумерований список?
+
''3. Як створити нумерований список? ''
-
4. Що являє собою список визначень?
+
''4. Що являє собою список визначень? ''
-
<br> <br> ''Список використаної літератури:''
+
==Список використаної літератури==
-
<br> 1. Урок на тему: «Списків у мові HTML», Буйволова О. М., м. Херсон.
+
<br> ''1. Урок на тему: «Списків у мові HTML», Буйволова О. М., м. Херсон. ''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
+
+
+
----
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
Розглянути поняття списків у мові HTML. Навчити створювати різні види списків: від нумерованих до списків визначень.
Тип уроку
теоретично-практичний.
Хід уроку
Поняття "списки"
Багато тегів не тільки відповідають за вигляд веб-сторінки але і визначають її структуру.
Згадайте заголовки - вони не просто виділяють текст жирним шрифтом, але і допомагають браузерам при автоматичній побудові змісту документа.
Виходить, у заголовків більш широка «область дій», чим просто візуальне виділення фрагментів тексту.
Теж саме можна сказати і про 'списки, які визначають структуру документа.
Види списків
Існує кілька видів списків
Нумеровані
Марковані
Списки визначень
Відразу потрібно сказати, що всі види списків можуть бути використані у змішаному порядку і бувають як неупорядкованими, так і впорядкованими.
Окремим типом списків є багаторівневий, для створення якого використовуються комбінації маркованих і нумерованих.
Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.
=Нумерований список
Для створення нумерованих списків використовуються теги < OL > та < LI >:
перший відзначає початок і закінчення всього списку
другий позначає початок і кінець окремого елемента списку
За замовчуванням, елементи списку нумеруються по порядку, тобто - 1, 2, 3 і т.д.
За допомогою атрибута type можна змінити стилі нумерації.
При доповненні вже існуючого списку новими значеннями, браузер перерахує його.
Причому, атрибуты start і value змінюють порядок нумерації списку:
START – задає початковий номер списку.
VALUE – призначає довільний номер будь-якому елементу списку
Маркований список
Для створення маркованих списків застосовують теги < UL > і < LI >:
< UL > відзначає початок і закінчення всього списку
< LI > позначає початок і кінець окремого елемента списку.
Елементи списку, за замовчуванням, завжди маркуються чорним кружечком.
А за допомогою атрибута type можна змінити стиль маркірування.
Також потрібно знати, що в межах одного списку можна використовувати різне маркування елементів списку.
Списки визначень
Для створення списків визначень використовують три тега:
< DL > - початок і кінець списку
< DT > - початок і кінець конкретного терміну
< DD > - початок і кінець статті, яка пояснює термін
Теги < DT > і < DD > можуть не чергуватися.
Тобто, можна «прив'язати» до одного визначення кілька термінів або проробити ту ж операцію навпаки – це на розсуд самого програміста.
Самоконтроль
1. Для чого потрібні списки?
2. Види списків.
3. Як створити нумерований список?
4. Що являє собою список визначень?
Список використаної літератури
1. Урок на тему: «Списків у мові HTML», Буйволова О. М., м. Херсон.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Буйволова О. М.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
