KNOWLEDGE HYPERMARKET


Выравнивание текста. Полные уроки
 
Строка 1: Строка 1:
'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Выравнивание текста.'''  
'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Выравнивание текста.'''  
-
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Выравнивание текста.</metakeywords>
+
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Выравнивание текста.</metakeywords>  
-
==Тема==
+
== Тема ==
-
*'''Выравнивание текста.'''
+
-
==Цель==
+
*'''Выравнивание текста.'''
-
*Научить форматировать текстовую информацию на веб-странице.  
+
-
==Ход урока==
+
== Цель  ==
 +
 
 +
*Научить форматировать текстовую информацию на [[Основные теги. Каркас веб-страницы. Полные уроки|веб-странице]].
 +
 
 +
== Ход урока ==
Для выравнивание текста на веб-странице используется уже известный тэг &lt; p &gt;.  
Для выравнивание текста на веб-странице используется уже известный тэг &lt; p &gt;.  
-
Но сам процесс форматирования текста происходит не этим тэгом, а с помощью дополнительных команд ('''атрибутов''') этого тэга:  
+
Но сам процесс [[Практическая робота на тему: Форматирование шрифта текста при создании документов|форматирования]] текста происходит не этим тэгом, а с помощью дополнительных команд ('''атрибутов''') этого тэга:  
 +
<br>
-
#&lt; p '''align="center"''' &gt;текст&lt; /p &gt; - '''центрирование текста'''
+
#&lt; p '''align="center"''' &gt;текст&lt; /p &gt; - '''центрирование текста'''  
-
#&lt; p '''align="left"''' &gt;текст&lt; /p &gt; - '''выравнивание текста по левому краю'''
+
#&lt; p '''align="left"''' &gt;текст&lt; /p &gt; - '''выравнивание текста по левому краю'''  
-
#&lt; p '''align="right"''' &gt;текст&lt; /p &gt; - '''выравнивание текста по правому краю'''
+
#&lt; p '''align="right"''' &gt;текст&lt; /p &gt; - '''выравнивание текста по правому краю'''  
-
#&lt; p '''align="justify"''' &gt;текст&lt; /p &gt; - '''выравнивание текстовой информации по обеим краям '''документа (веб-страницы).
+
#&lt; p '''align="justify"''' &gt;текст&lt; /p &gt; - '''выравнивание текстовой [[Поиск информации в Интернете|информации]]''' по обеим краям '''документа (веб-страницы).'''
В издательском деле выравнивание называется '''выключка''' – так правильней.  
В издательском деле выравнивание называется '''выключка''' – так правильней.  
-
То есть, выключка по левому краю, по правому, по центру или по обеим сторонам.
+
То есть, выключка по левому краю, по правому, по центру или по обеим сторонам.  
-
К примеру, вот использование команды &lt; p align='''"center"''' &gt;:
+
К примеру, вот использование команды &lt; p align='''"center"''' &gt;:  
-
&lt; html &gt;
+
&lt; html &gt;  
-
&lt; head &gt;
+
&lt; head &gt;  
-
&lt; title&gt;Мой первая страница&lt; /title &gt;
+
&lt; title&gt;Мой первая страница&lt; /title &gt;  
-
&lt; /head &gt;
+
&lt; /head &gt;  
-
&lt; body &gt;
+
&lt; body &gt;  
-
&lt; h1 &gt;
+
&lt; h1 &gt;  
&lt; p align="center"&gt;Здравствуйте, это моя первая страница.&lt; /p &gt;  
&lt; p align="center"&gt;Здравствуйте, это моя первая страница.&lt; /p &gt;  
Строка 47: Строка 50:
&lt; /html &gt;  
&lt; /html &gt;  
 +
<br> [[Image:Vir-1.jpg|400px|Здравствуйте, это моя первая страница]]
-
[[Image:Vir-1.jpg|400px|Здравствуйте, это моя первая страница]]
+
<br> А вот в этом примере '''выключка текста происходит по обеим сторонам''', то есть с использованием атрибута '''«justify»:'''
 +
<br> [[Image:Vir-2.jpg|400px|WEB-страница]]
-
А вот в этом примере '''выключка текста происходит по обеим сторонам''', то есть с использованием атрибута '''«justify»:'''
+
<br> '''Вот еще несколько слов касательно тэга &lt; p &gt;:'''  
 +
- не рекомендуется вводить в документ такую конструкцию - &lt; p &gt;&lt; /p &gt;. Причиной является то, что пустые тэги &lt; p &gt; (то есть, без текста или других атрибутов) просто-напросто игнорируются [[Презентация на тему: Что такое Веб - Браузер|браузерами]].
-
[[Image:Vir-2.jpg|400px|WEB-страница]]
+
- по умолчанию, текст на странице без задания параграфу какого-либо атрибута, всегда будет выравниваться по левому краю  
-
 
+
-
 
+
-
'''Вот еще несколько слов касательно тэга &lt; p &gt;:'''
+
-
 
+
-
- не рекомендуется вводить в документ такую конструкцию - &lt; p &gt;&lt; /p &gt;. Причиной является то, что пустые тэги &lt; p &gt; (то есть, без текста или других атрибутов) просто-напросто игнорируются браузерами.
+
-
 
+
-
- по умолчанию, текст на странице без задания параграфу какого-либо атрибута, всегда будет выравниваться по левому краю
+
- после закрывающего тега &lt; /p &gt; происходит автоматический перенос строки.  
- после закрывающего тега &lt; /p &gt; происходит автоматический перенос строки.  
-
Но если этот перенос не нужен, есть альтернативный тэг для выключек - '''&lt; div &gt;.'''  
+
Но если этот перенос не нужен, есть альтернативный [[Основні теги. Каркас веб-сторінки. Повні уроки|тэг]] для выключек - '''&lt; div &gt;.'''  
С этим тэгом можно использовать те же самые атрибуты, что и с &lt; p &gt;:  
С этим тэгом можно использовать те же самые атрибуты, что и с &lt; p &gt;:  
Строка 71: Строка 70:
&lt; div align="center"&gt; текст &lt; /div &gt;  
&lt; div align="center"&gt; текст &lt; /div &gt;  
-
&lt; div align="left"&gt; текст &lt; /div &gt;
+
&lt; div align="left"&gt; текст &lt; /div &gt;  
&lt; div align="right"&gt; текст &lt; /div &gt;  
&lt; div align="right"&gt; текст &lt; /div &gt;  
Строка 77: Строка 76:
&lt; div align="justify"&gt; текст &lt; /div &gt;  
&lt; div align="justify"&gt; текст &lt; /div &gt;  
-
'''Пример выключки по центру:'''
+
'''Пример выключки по центру:'''  
 +
<br> [[Image:Vir-3.jpg|400px|WEB-страница]]
-
[[Image:Vir-3.jpg|400px|WEB-страница]]
+
<br> Итак, завершая этот урок подведем итоги и расскажем еще '''несколько замечаний по использованию тэгов для выключки текста''':  
 +
<br> '''1) '''Параграф не может содержать в себе другие параграфы (а также и тэг &lt; div &gt;).
-
Итак, завершая этот урок подведем итоги и расскажем еще '''несколько замечаний по использованию тэгов для выключки текста''':  
+
То есть, такие варианты будут неверны и вводить их в [[Практическая робота на тему: Форматирование шрифта текста при создании документов|документ]] нельзя:  
 +
&lt; p align="right" &gt;
-
'''1) '''Параграф не может содержать в себе другие параграфы (а также и тэг &lt; div &gt;).
+
&lt; p &gt;текст&lt; /p &gt;  
-
 
+
-
То есть, такие варианты будут неверны и вводить их в документ нельзя:
+
-
 
+
-
&lt; p align="right" &gt;
+
&lt; p &gt;текст&lt; /p &gt;  
&lt; p &gt;текст&lt; /p &gt;  
&lt; p &gt;текст&lt; /p &gt;  
&lt; p &gt;текст&lt; /p &gt;  
-
 
-
&lt; p &gt;текст&lt; /p &gt;
 
&lt; /p &gt;  
&lt; /p &gt;  
-
'''или'''
+
'''или'''  
-
&lt; p align="right" &gt;
+
&lt; p align="right" &gt;  
-
&lt; div &gt;текст&lt; /div &gt;
+
&lt; div &gt;текст&lt; /div &gt;  
&lt; p &gt;текст&lt; /p &gt;  
&lt; p &gt;текст&lt; /p &gt;  
Строка 112: Строка 108:
&lt; /p &gt;  
&lt; /p &gt;  
-
 
+
<br> '''2)''' Элемент &lt; div &gt; может содержать в себе параграфы. С помощью него можно сгруппировать их, например, по правому краю:  
-
'''2)''' Элемент &lt; div &gt; может содержать в себе параграфы. С помощью него можно сгруппировать их, например, по правому краю:  
+
&lt; div align="right" &gt;  
&lt; div align="right" &gt;  
-
&lt; p &gt;текст первого абзаца&lt; /p &gt;
+
&lt; p &gt;текст первого абзаца&lt; /p &gt;  
-
&lt; p &gt;текст второго абзаца&lt; /p &gt;
+
&lt; p &gt;текст второго абзаца&lt; /p &gt;  
-
&lt; p &gt;текст третьего абзаца&lt; /p &gt;
+
&lt; p &gt;текст третьего абзаца&lt; /p &gt;  
&lt; /div &gt;  
&lt; /div &gt;  
-
<br> {{#ev:youtube|XqF8lM2gbyc}}
+
<br> {{#ev:youtube|XqF8lM2gbyc}}  
{{#ev:youtube| omyeH5h1lqA&feature=related}}  
{{#ev:youtube| omyeH5h1lqA&feature=related}}  
Строка 131: Строка 126:
{{#ev:youtube| SQ7cWIy63yI&feature=related}}  
{{#ev:youtube| SQ7cWIy63yI&feature=related}}  
 +
<br>
-
==Вопросы==
+
== Вопросы ==
-
''1. Какие атрибуты используются для выравнивания текста? ''
+
''1. Какие атрибуты используются для выравнивания текста? ''  
-
''2. Как можно выровнять текст по обеим сторонам?''
+
''2. Как можно выровнять текст по обеим сторонам?''  
-
''3. Есть ли альтернатива тегу &lt; p &gt;?''
+
''3. Есть ли альтернатива тегу &lt; p &gt;?''  
-
''4. Правила использования тэгов для выравнивания текста. ''
+
''4. Правила использования тэгов для выравнивания текста. ''  
 +
<br>
 +
== Список использованных источников  ==
-
==Список использованных источников==
+
''1. Урок на тему: «Форматирование текста», Бурлаков А. С., г. Киев. ''
-
''1. Урок на тему: «Форматирование текста», Бурлаков А. С., г. Киев. ''
+
''2. Квинт И. HTML и CSS на 100&nbsp;%. - Питер, 2008 г. ''  
-
''2. Квинт И. HTML и CSS на 100&nbsp;%. - Питер, 2008 г. ''
+
''3. Дуванов А.А Web-конструирование. HTML [http://xvatit.com/vuzi/ Основы информатики]. - BHV-СПб, 2005 г.''  
-
 
+
-
''3. Дуванов А.А Web-конструирование. HTML Основы информатики. - BHV-СПб, 2005 г.''
+
 +
<br>
----
----
 +
<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
+
<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_класс]]

Текущая версия на 19:09, 2 февраля 2013

Гипермаркет знаний>>Информатика>>Информатика 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»:


WEB-страница


Вот еще несколько слов касательно тэга < p >:

- не рекомендуется вводить в документ такую конструкцию - < p >< /p >. Причиной является то, что пустые тэги < p > (то есть, без текста или других атрибутов) просто-напросто игнорируются браузерами.

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

- после закрывающего тега < /p > происходит автоматический перенос строки.

Но если этот перенос не нужен, есть альтернативный тэг для выключек - < div >.

С этим тэгом можно использовать те же самые атрибуты, что и с < p >:

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

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

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

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

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


WEB-страница


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


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 >?

4. Правила использования тэгов для выравнивания текста.


Список использованных источников

1. Урок на тему: «Форматирование текста», Бурлаков А. С., г. Киев.

2. Квинт И. HTML и CSS на 100 %. - Питер, 2008 г.

3. Дуванов А.А Web-конструирование. HTML Основы информатики. - BHV-СПб, 2005 г.




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




Над уроком работали

Бурлаков А. С.

Соловьев М. С.




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

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