KNOWLEDGE HYPERMARKET


Про лінії. Повні уроки
 
(1 промежуточная версия не показана)
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Про лінії.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Про лінії.</metakeywords>  
-
<br> '''Тема: Про лінії.'''
+
== Тема ==
-
'''Мета:''' Розказати про горизонтальні лінії і навчити вставляти їх в html-сторінку. Розглянути види горизонтальних ліній і їх властивості.
+
*'''Про лінії.'''
-
'''Тип уроку:'''теоретично-практичний
+
== Мета ==
-
'''Хід уроку:'''
+
*Розказати про горизонтальні лінії і навчити вставляти їх в html-сторінку.
 +
*Розглянути види горизонтальних ліній і їх властивості.
-
<br>
+
== Тип уроку ==
 +
 
 +
*теоретично-практичний
 +
 
 +
== Хід уроку ==
-
У мові веб-програмування HTML є елемент, який відповідає за створення, вставку і редагування горизонтальних ліній.  
+
У мові веб-[[О системном ПО и системах программирования|програмування]] HTML є елемент, який відповідає за створення, вставку і редагування горизонтальних ліній.  
Цим елементом є тег '''&lt; HR &gt;'''.  
Цим елементом є тег '''&lt; HR &gt;'''.  
Строка 19: Строка 24:
Він малює горизонтальну лінію, зовнішній вид якої залежить від використовуваних параметрів (атрибутів), а також і від власне браузерів.  
Він малює горизонтальну лінію, зовнішній вид якої залежить від використовуваних параметрів (атрибутів), а також і від власне браузерів.  
-
Важливо знати, що команда '''HR''' – непарний елемент. Тобто, його не потрібно закривати значком «/», на відміну від багатьох інших тегів.  
+
Важливо знати, що команда '''HR''' – непарний елемент. Тобто, його не потрібно закривати значком «/», на відміну від багатьох інших [[Основные теги. Каркас веб-страницы. Полные уроки|тегів]].  
'''&lt; HR &gt;''' ставиться до блокових елементів. Лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.  
'''&lt; HR &gt;''' ставиться до блокових елементів. Лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.  
Строка 25: Строка 30:
<br>  
<br>  
-
[[Image:Primline1.jpg]]  
+
[[Image:Primline1.jpg|480px|Приклад ліній]]  
<br>  
<br>  
-
<u>Параметри (атрибути) тега &lt; HR &gt;:</u>
+
'''Параметри (атрибути) тега &lt; HR &gt;:'''
'''1) ALIGN''' - визначає вирівнювання горизонтальної лінії.  
'''1) ALIGN''' - визначає вирівнювання горизонтальної лінії.  
Строка 43: Строка 48:
<br>  
<br>  
-
[[Image:Primline2.jpg]]  
+
[[Image:Primline2.jpg|480px|Приклад ліній]]  
<br> '''2) COLOR''' – задає колір лінії  
<br> '''2) COLOR''' – задає колір лінії  
Строка 55: Строка 60:
'''4) SIZE''' - визначає товщину лінії в пікселях.  
'''4) SIZE''' - визначає товщину лінії в пікселях.  
-
'''5) WIDTH''' - Визначає довжину лінії в пікселях або відсотках від розміру вікна браузера.  
+
'''5) WIDTH''' - Визначає довжину лінії в пікселях або відсотках від розміру вікна [[Презентация на тему: Что такое Веб - Браузер|браузера]].  
<br>  
<br>  
-
[[Image:Primline3.jpg]]  
+
[[Image:Primline3.jpg|480px|Приклад ліній]]  
-
Цікаво, що замість горизонтальної лінії можна створити декілька різних по діаметру і кольору кружечків:  
+
<br> Цікаво, що замість горизонтальної лінії можна створити декілька різних по діаметру і кольору кружечків:  
-
[[Image:Prostokol.jpg]]  
+
<br> [[Image:Prostokol.jpg|480px|Приклад ліній]]  
-
[[Image:Prostokol-2.jpg]]  
+
<br> [[Image:Prostokol-2.jpg|480px|Приклад ліній]]  
-
 
+
-
<br>
+
-
 
+
-
----
+
<br> {{#ev:youtube|lXGJaoMbO3I}}  
<br> {{#ev:youtube|lXGJaoMbO3I}}  
-
{{#ev:youtube|fEF8bVNjahs}}
+
<br> {{#ev:youtube|fEF8bVNjahs}}  
<br>  
<br>  
-
<br> '''Самоконтроль:'''
+
== Самоконтроль ==
-
1. Який елемент відповідає за вставку в документ горизонтальної лінії?  
+
''1. Який елемент відповідає за вставку в документ горизонтальної лінії? ''
-
2. Назвіть атрибути, використовувані для зміни параметрів лінії.  
+
''2. Назвіть атрибути, використовувані для зміни параметрів лінії. ''
-
3. Як вирівняти лінію по центру?  
+
''3. Як вирівняти лінію по центру? ''
-
4. Які одиниці використовуються для визначення довгі лінії?  
+
''4. Які одиниці використовуються для визначення довгі лінії? ''
-
5. За що відповідає атрибут &lt; NOSHADE &gt;?  
+
''5. За що відповідає атрибут &lt; NOSHADE &gt;? ''
<br>  
<br>  
-
''Список використаної літератури:''
+
== Список використаної літератури ==
 +
''1. Урок на тему: «Лінії в мові [[Вступление в HTML. Полные уроки|HTML]]», Багацький А. М., м. Одеса. ''
 +
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
1. Урок на тему: «Лінії в мові HTML», Багацький А. М., м. Одеса.  
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.  
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.  
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
+
<br>
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
+
----
-
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''  
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.'' <br>
 +
----
-
<br> ----
+
<br> '''Над уроком працювали'''
-
'''<u>Над уроком працювали</u>'''
+
Багацький А. М.
-
Багацький А. М.
+
Соловйов М. С.  
-
Соловйов М. С.
+
<br>
----
----
-
 
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
-
 
+
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
+
-
 
+
[[Category:Інформатика_10_клас]]
[[Category:Інформатика_10_клас]]

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

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

Содержание

Тема

  • Про лінії.

Мета

  • Розказати про горизонтальні лінії і навчити вставляти їх в html-сторінку.
  • Розглянути види горизонтальних ліній і їх властивості.

Тип уроку

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

Хід уроку

У мові веб-програмування HTML є елемент, який відповідає за створення, вставку і редагування горизонтальних ліній.

Цим елементом є тег < HR >.

Він малює горизонтальну лінію, зовнішній вид якої залежить від використовуваних параметрів (атрибутів), а також і від власне браузерів.

Важливо знати, що команда HR – непарний елемент. Тобто, його не потрібно закривати значком «/», на відміну від багатьох інших тегів.

< HR > ставиться до блокових елементів. Лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.


Приклад ліній


Параметри (атрибути) тега < HR >:

1) ALIGN - визначає вирівнювання горизонтальної лінії.

Параметр може нести наступні значення:

LEFT - вирівнювання по лівому краю сторінки

RIGHT - вирівнювання по правому краю сторінки

CENTER - вирівнювання по центру сторінки (використовується за замовчуванням)


Приклад ліній


2) COLOR – задає колір лінії

3) NOSHADE - задає спосіб розфарбовки лінії як суцільний.

Параметр не вимагає вказівки значення.

Без даного параметра лінія відображається як об'ємна.

4) SIZE - визначає товщину лінії в пікселях.

5) WIDTH - Визначає довжину лінії в пікселях або відсотках від розміру вікна браузера.


Приклад ліній


Цікаво, що замість горизонтальної лінії можна створити декілька різних по діаметру і кольору кружечків:


Приклад ліній


Приклад ліній




Самоконтроль

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

2. Назвіть атрибути, використовувані для зміни параметрів лінії.

3. Як вирівняти лінію по центру?

4. Які одиниці використовуються для визначення довгі лінії?

5. За що відповідає атрибут < NOSHADE >?


Список використаної літератури

1. Урок на тему: «Лінії в мові HTML», Багацький А. М., м. Одеса.

2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.

3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.




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



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

Багацький А. М.

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




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

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