KNOWLEDGE HYPERMARKET


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