KNOWLEDGE HYPERMARKET


Списки. Види списків. Повні уроки
 
(4 промежуточные версии не показаны)
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Списки. Види списків.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Списки. Види списків.</metakeywords>  
-
'''Тема: Списки. Види списків.'''
+
== Тема ==
-
'''Мета:''' Розглянути поняття списків у мові HTML. Навчити створювати різні види списків: від нумерованих до списків визначень. '''Тип уроку:'''теоретично-практичний.
+
*'''Списки. Види списків.'''
-
'''Хід уроку:'''
+
== Мета ==
 +
 
 +
*Розглянути поняття списків у мові [[Вступление в HTML. Полные уроки|HTML]]. Навчити створювати різні види списків: від нумерованих до списків визначень.
 +
 
 +
== Тип уроку ==
 +
 
 +
*теоретично-практичний.
 +
 
 +
== Хід уроку ==
 +
 
 +
=== Поняття "списки" ===
<br> Багато тегів не тільки відповідають за вигляд веб-сторінки але і визначають її структуру.  
<br> Багато тегів не тільки відповідають за вигляд веб-сторінки але і визначають її структуру.  
-
Згадайте заголовки - вони не просто виділяють текст жирним шрифтом, але і допомагають браузерам при автоматичній побудові змісту документа.  
+
Згадайте заголовки - вони не просто виділяють текст жирним шрифтом, але і допомагають [[Презентация на тему: Что такое Веб - Браузер|браузерам]] при автоматичній побудові змісту документа.  
Виходить, у заголовків більш широка «область дій», чим просто візуальне виділення фрагментів тексту.  
Виходить, у заголовків більш широка «область дій», чим просто візуальне виділення фрагментів тексту.  
-
Теж саме можна сказати і про ''списки'', які визначають структуру документа.  
+
Теж саме можна сказати і про '''списки'', які визначають структуру документа.  
-
{{#ev:youtube|J8Vc-6Jy6D8&feature=related}}
+
{{#ev:youtube|J8Vc-6Jy6D8&feature=related}}  
-
<u>Існує кілька видів списків: </u>
+
<br>  
 +
 
 +
=== Види списків ===
 +
 
 +
'''Існує кілька видів списків'''
*Нумеровані  
*Нумеровані  
*Марковані  
*Марковані  
-
*Списки визначень
+
*[[Робота з фрагментами тексту|Списки визначень]]
-
 
+
-
<br>
+
Відразу потрібно сказати, що всі види списків можуть бути використані у змішаному порядку і бувають як неупорядкованими, так і впорядкованими.  
Відразу потрібно сказати, що всі види списків можуть бути використані у змішаному порядку і бувають як неупорядкованими, так і впорядкованими.  
-
<br>
+
Окремим типом списків є '''багаторівневий''', для створення якого використовуються комбінації маркованих і нумерованих.  
-
 
+
-
Окремим типом списків є ''багаторівневий'', для створення якого використовуються комбінації маркованих і нумерованих.  
+
Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.  
Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.  
Строка 39: Строка 49:
{{#ev:youtube|Pz2onrsCdYk}}  
{{#ev:youtube|Pz2onrsCdYk}}  
-
<br> '''Нумерований список.'''
+
==== Нумерований список ====
-
Для створення нумерованих списків використовуються теги ''&lt; OL &gt; '' та ''&lt; LI &gt;: ''  
+
Для створення нумерованих списків використовуються [[Основные теги. Каркас веб-страницы. Полные уроки|теги]] ''&lt; OL &gt; '' та ''&lt; LI &gt;: ''  
#перший відзначає початок і закінчення всього списку  
#перший відзначає початок і закінчення всього списку  
Строка 50: Строка 60:
За допомогою атрибута ''type'' можна змінити стилі нумерації.  
За допомогою атрибута ''type'' можна змінити стилі нумерації.  
-
[[Image:Numeraciya.jpg]]  
+
[[Image:Numeraciya.jpg|550px|Нумерований список]]  
-
[[Image:Number1.jpg]]  
+
[[Image:Number1.jpg|550px|Нумерований список]]  
При доповненні вже існуючого списку новими значеннями, браузер перерахує його.  
При доповненні вже існуючого списку новими значеннями, браузер перерахує його.  
-
 
-
<br>
 
Причому, атрибуты '''start''' і '''value''' змінюють порядок нумерації списку:  
Причому, атрибуты '''start''' і '''value''' змінюють порядок нумерації списку:  
Строка 63: Строка 71:
*VALUE – призначає довільний номер будь-якому елементу списку
*VALUE – призначає довільний номер будь-якому елементу списку
-
<br>  
+
<br> [[Image:Number2.jpg|550px|Нумерований список]]  
-
 
+
-
[[Image:Number2.jpg]]  
+
-
<br> '''Маркований список '''
+
==== Маркований список ====
Для створення маркованих списків застосовують теги ''&lt; UL &gt;'' і ''&lt; LI &gt;: ''  
Для створення маркованих списків застосовують теги ''&lt; UL &gt;'' і ''&lt; LI &gt;: ''  
Строка 80: Строка 86:
Також потрібно знати, що в межах одного списку можна використовувати різне маркування елементів списку.  
Також потрібно знати, що в межах одного списку можна використовувати різне маркування елементів списку.  
-
<br>  
+
<br> [[Image:Markir.jpg|550px|Маркований список]]
<br>  
<br>  
-
[[Image:Markir.jpg]]
+
==== Списки визначень ====
-
 
+
-
<br>
+
-
 
+
-
<br> '''Списки визначень'''
+
Для створення списків визначень використовують три тега:  
Для створення списків визначень використовують три тега:  
Строка 96: Строка 98:
#&lt; DD &gt; - початок і кінець статті, яка пояснює термін
#&lt; DD &gt; - початок і кінець статті, яка пояснює термін
-
<br>  
+
<br> Теги ''&lt; DT &gt;'' і ''&lt; DD &gt;'' можуть не чергуватися.
-
Теги ''&lt; DT &gt;'' і ''&lt; DD &gt;'' можуть не чергуватися.  
+
Тобто, можна «прив'язати» до одного визначення кілька термінів або проробити ту ж операцію навпаки – це на розсуд самого [http://xvatit.com/busines/jobs-career/ програміста].  
-
Тобто, можна «прив'язати» до одного визначення кілька термінів або проробити ту ж операцію навпаки – це на розсуд самого програміста.  
+
<br> [[Image:Opredd.jpg|550px|Списки визначень]]
-
[[Image:Opredd.jpg]]  
+
<br> [[Image:Figurss.jpg|550px|Списки визначень]]  
-
[[Image:Figurss.jpg]]
+
<br> {{#ev:youtube|FAlsPU6Tg1k}}  
-
 
+
-
 
+
-
{{#ev:youtube|FAlsPU6Tg1k}}  
+
{{#ev:youtube|AsfATC5oSGw&feature=related}}  
{{#ev:youtube|AsfATC5oSGw&feature=related}}  
Строка 113: Строка 112:
<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>  
-
Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].
+
----
-
Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].  
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
 +
 
 +
<br>
 +
 
 +
----
 +
 
 +
<br> '''Над уроком працювали'''
 +
 
 +
Буйволова О. М.
 +
 
 +
Соловйов М. С.  
 +
 
 +
<br>
 +
----
 +
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
[[Category:Інформатика_10_клас]]
[[Category:Інформатика_10_клас]]

Текущая версия на 20:44, 4 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Списки. Види списків.

Содержание

Тема

  • Списки. Види списків.

Мета

  • Розглянути поняття списків у мові HTML. Навчити створювати різні види списків: від нумерованих до списків визначень.

Тип уроку

  • теоретично-практичний.

Хід уроку

Поняття "списки"


Багато тегів не тільки відповідають за вигляд веб-сторінки але і визначають її структуру.

Згадайте заголовки - вони не просто виділяють текст жирним шрифтом, але і допомагають браузерам при автоматичній побудові змісту документа.

Виходить, у заголовків більш широка «область дій», чим просто візуальне виділення фрагментів тексту.

Теж саме можна сказати і про 'списки, які визначають структуру документа.



Види списків

Існує кілька видів списків

Відразу потрібно сказати, що всі види списків можуть бути використані у змішаному порядку і бувають як неупорядкованими, так і впорядкованими.

Окремим типом списків є багаторівневий, для створення якого використовуються комбінації маркованих і нумерованих.

Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.



Нумерований список

Для створення нумерованих списків використовуються теги < OL > та < LI >:

  1. перший відзначає початок і закінчення всього списку
  2. другий позначає початок і кінець окремого елемента списку

За замовчуванням, елементи списку нумеруються по порядку, тобто - 1, 2, 3 і т.д.

За допомогою атрибута type можна змінити стилі нумерації.

Нумерований список

Нумерований список

При доповненні вже існуючого списку новими значеннями, браузер перерахує його.

Причому, атрибуты start і value змінюють порядок нумерації списку:

  • START – задає початковий номер списку.
  • VALUE – призначає довільний номер будь-якому елементу списку


Нумерований список

Маркований список

Для створення маркованих списків застосовують теги < UL > і < LI >:

  1. < UL > відзначає початок і закінчення всього списку
  2. < LI > позначає початок і кінець окремого елемента списку.

Елементи списку, за замовчуванням, завжди маркуються чорним кружечком.

А за допомогою атрибута type можна змінити стиль маркірування.

Також потрібно знати, що в межах одного списку можна використовувати різне маркування елементів списку.


Маркований список


Списки визначень

Для створення списків визначень використовують три тега:

  1. < DL > - початок і кінець списку
  2. < DT > - початок і кінець конкретного терміну
  3. < 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.




Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.




Над уроком працювали

Буйволова О. М.

Соловйов М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Інформатика > Інформатика 10 клас