KNOWLEDGE HYPERMARKET


Вирівнювання тексту. Повні уроки
 
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вирівнювання тексту.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вирівнювання тексту.</metakeywords>  
-
==Тема==
+
== Тема ==
-
*'''Вирівнювання тексту.'''
+
-
==Мета==
+
*'''Вирівнювання тексту.'''
-
*Навчити форматувати текстову інформацію на веб-сторінці.  
+
-
==Тип уроку==
+
== Мета  ==
-
*теоретично-практичний
+
-
==Хід уроку==  
+
*Навчити форматувати текстову [http://xvatit.com/it/fishki-ot-itshki/ інформацію] на веб-сторінці.
 +
 
 +
== Тип уроку  ==
 +
 
 +
*теоретично-практичний
 +
 
 +
== Хід уроку ==
Для вирівнювання тексту на веб-сторінці використовується вже відомий тег &lt; p &gt;.  
Для вирівнювання тексту на веб-сторінці використовується вже відомий тег &lt; p &gt;.  
-
Але самий процес форматування тексту відбувається не за допомогою цього тегом, а за допомогою додаткових команд (''атрибутів'') цього тега:  
+
Але самий процес [[Конспект уроку до теми «Копіювання, переміщення, вилучення, форматування таблиці»|форматування]] тексту відбувається не за допомогою цього тегом, а за допомогою додаткових команд (''атрибутів'') цього тега:  
#&lt; p '''align="center"''' &gt;текст&lt; /p &gt; - ''центрування тексту''  
#&lt; p '''align="center"''' &gt;текст&lt; /p &gt; - ''центрування тексту''  
Строка 55: Строка 58:
[[Image:Vir-1.jpg|480px|Вирівнювання тексту]]  
[[Image:Vir-1.jpg|480px|Вирівнювання тексту]]  
-
 
+
<br> А от у цьому прикладі '''виключка відбувається по обидва боки''', тобто з використанням атрибута '''«justify»:'''  
-
А от у цьому прикладі '''виключка відбувається по обидва боки''', тобто з використанням атрибута '''«justify»:'''  
+
<br> [[Image:Vir-2.jpg|480px|Вирівнювання тексту]]  
<br> [[Image:Vir-2.jpg|480px|Вирівнювання тексту]]  
 +
<br> Ще декілька слів стосовно тега &lt; p &gt;:
-
Ще декілька слів стосовно тега &lt; p &gt;:
+
- не рекомендується вводити в документ таку конструкцію - &lt; p &gt;&lt; /p &gt;. Причиною є те, що порожні [[Основные теги. Каркас веб-страницы. Полные уроки|теги]] &lt; p &gt; (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.  
-
 
+
-
- не рекомендується вводити в документ таку конструкцію - &lt; p &gt;&lt; /p &gt;. Причиною є те, що порожні теги &lt; p &gt; (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.  
+
- за замовчуванням, текст на сторінці без завдання параграфу якого-небудь атрибута, завжди буде вирівнюватися по лівому краю  
- за замовчуванням, текст на сторінці без завдання параграфу якого-небудь атрибута, завжди буде вирівнюватися по лівому краю  
Строка 85: Строка 86:
<br> [[Image:Vir-3.jpg|480px|Вирівнювання тексту]]  
<br> [[Image:Vir-3.jpg|480px|Вирівнювання тексту]]  
-
Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:  
+
Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки [[Операции при создании текстов|тексту]]:  
<br> '''1) ''' Параграф не може містити в собі інші параграфи (а також і тег &lt; div &gt;).  
<br> '''1) ''' Параграф не може містити в собі інші параграфи (а також і тег &lt; div &gt;).  
Строка 127: Строка 128:
&lt; /div &gt;  
&lt; /div &gt;  
-
<br>{{#ev:youtube|XqF8lM2gbyc}}
+
<br>{{#ev:youtube|XqF8lM2gbyc}}  
{{#ev:youtube| omyeH5h1lqA&feature=related}}  
{{#ev:youtube| omyeH5h1lqA&feature=related}}  
-
{{#ev:youtube| SQ7cWIy63yI&feature=related}}
+
{{#ev:youtube| SQ7cWIy63yI&feature=related}}  
-
==Самоконтроль==
+
== Самоконтроль ==
-
<br> ''1. Які атрибути використовуються для вирівнювання тексту? ''
+
<br> ''1. Які атрибути використовуються для вирівнювання тексту? ''  
-
''2. Як можна вирівняти текст по обидва боки? ''
+
''2. Як можна вирівняти текст по обидва боки? ''  
-
''3. Теги &lt; p &gt; і &lt; div &gt;? ''
+
''3. Теги &lt; p &gt; і &lt; div &gt;? ''  
-
''4. Правила використання тегів для вирівнювання тексту. ''
+
''4. Правила використання тегів для вирівнювання тексту. ''  
-
==Список використаної літератури==
+
== Список використаної літератури ==
-
''1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.''
+
''1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.''  
-
''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/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
<br>
-
 
+
----
----
 +
<br> '''Над уроком працювали'''
-
'''Над уроком працювали'''
+
Аршавін А. С.
-
Аршавін А. С.
+
Соловйов М. С.  
-
 
+
-
Соловйов М. С.
+
 +
<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:38, 4 ноября 2012

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

Содержание

Тема

  • Вирівнювання тексту.

Мета

  • Навчити форматувати текстову інформацію на веб-сторінці.

Тип уроку

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

Хід уроку

Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < p >.

Але самий процес форматування тексту відбувається не за допомогою цього тегом, а за допомогою додаткових команд (атрибутів) цього тега:

  1. < p align="center" >текст< /p > - центрування тексту
  2. < p align="left" >текст< /p > - вирівнювання тексту по лівому краю
  3. < p align="right" >текст< /p > - вирівнювання тексту по правому краю
  4. < p align="justify" >текст< /p > - вирівнювання текстової інформації з обом краям документа (веб-сторінки).

У видавничій справі вирівнювання називається виключка – так буде правильніше.

Тобто, виключка по лівому краю, по правому, по центру або по обидва боки.


Приміром, ось використання команди < p align="center" >:

< html >

< head >

< title>Моя перша сторінка< /title >

< /head >

< body >

< h1 >

< p align="center"> Привіт, це моя перша сторінка.< /p >

< /h1 >

< /body >

< /html >


Вирівнювання тексту


А от у цьому прикладі виключка відбувається по обидва боки, тобто з використанням атрибута «justify»:


Вирівнювання тексту


Ще декілька слів стосовно тега < p >:

- не рекомендується вводити в документ таку конструкцію - < p >< /p >. Причиною є те, що порожні теги < p > (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.

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

- після закриваючого тегу < /p > відбувається автоматичний перенос рядка.

Але якщо цей перенос не потрібний, є альтернативний тег для виключок - < div >.

Із цим тегом можна використовувати ті ж самі атрибути, що і з < p >:

< div align="center"> текст < /div >

< div align="left"> текст < /div >

< div align="right"> текст < /div >

< div align="justify"> текст < /div >


Приклад виключки по центру:


Вирівнювання тексту

Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:


1) Параграф не може містити в собі інші параграфи (а також і тег < div >).

Тобто, такі варіанти будуть невірні і вводити їх в документ не можна:

< p align="right" >

< p >текст< /p >

< p >текст< /p >

< p >текст< /p >

< /p >

або

< p align="right" >

< div >текст< /div >

< p >текст< /p >

< div >текст< /div >

< /p >


2) Елемент < div > може містити в собі параграфи. За допомогою нього можна згрупувати їх, наприклад, по правому краю:

< div align="right" >

< p >текст першого абзацу< /p >

< p >текст другого абзацу< /p >

< p >текст третього абзацу< /p >

< /div >




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


1. Які атрибути використовуються для вирівнювання тексту?

2. Як можна вирівняти текст по обидва боки?

3. Теги < p > і < div >?

4. Правила використання тегів для вирівнювання тексту.

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

1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.

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

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

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

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




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




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

Аршавін А. С.

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




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

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