KNOWLEDGE HYPERMARKET


Выравнивание текста. Полные уроки
Строка 3: Строка 3:
<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; - ''выравнивание текстовой информации по обеим краям ''документа (веб-страницы).
+
 +
#&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; p align='''"center"''' &gt;:
Строка 53: Строка 48:
 +
[[Image:Vir-1.jpg|400px|Здравствуйте, это моя первая страница]]
-
[[Image:Vir-1.jpg]]
 
-
А вот в этом примере ''выключка текста происходит по обеим сторонам'', то есть с использованием атрибута '''«justify»:'''
+
А вот в этом примере '''выключка текста происходит по обеим сторонам''', то есть с использованием атрибута '''«justify»:'''
-
[[Image:Vir-2.jpg]]  
+
[[Image:Vir-2.jpg|400px|WEB-страница]]  
-
<u>Вот еще несколько слов касательно тэга &lt; p &gt;:</u>
+
 
 +
'''Вот еще несколько слов касательно тэга &lt; p &gt;:'''
- не рекомендуется вводить в документ такую конструкцию - &lt; p &gt;&lt; /p &gt;. Причиной является то, что пустые тэги &lt; p &gt; (то есть, без текста или других атрибутов) просто-напросто игнорируются браузерами.  
- не рекомендуется вводить в документ такую конструкцию - &lt; p &gt;&lt; /p &gt;. Причиной является то, что пустые тэги &lt; p &gt; (то есть, без текста или других атрибутов) просто-напросто игнорируются браузерами.  
Строка 68: Строка 64:
- после закрывающего тега &lt; /p &gt; происходит автоматический перенос строки.  
- после закрывающего тега &lt; /p &gt; происходит автоматический перенос строки.  
-
 
-
 
Но если этот перенос не нужен, есть альтернативный тэг для выключек - '''&lt; div &gt;.'''  
Но если этот перенос не нужен, есть альтернативный тэг для выключек - '''&lt; div &gt;.'''  
-
 
-
 
С этим тэгом можно использовать те же самые атрибуты, что и с &lt; p &gt;:  
С этим тэгом можно использовать те же самые атрибуты, что и с &lt; p &gt;:  
Строка 84: Строка 76:
&lt; div align="justify"&gt; текст &lt; /div &gt;  
&lt; div align="justify"&gt; текст &lt; /div &gt;  
-
 
-
 
'''Пример выключки по центру:'''
'''Пример выключки по центру:'''
 +
[[Image:Vir-3.jpg|400px|WEB-страница]]
-
[[Image:Vir-3.jpg]]
 
-
 
-
Итак, завершая этот урок подведем итоги и расскажем еще ''несколько замечаний по использованию тэгов для выключки текста'':
 
 +
Итак, завершая этот урок подведем итоги и расскажем еще '''несколько замечаний по использованию тэгов для выключки текста''':
Строка 111: Строка 100:
&lt; /p &gt;  
&lt; /p &gt;  
-
''или''
+
'''или'''
&lt; p align="right" &gt;
&lt; p align="right" &gt;
Строка 122: Строка 111:
&lt; /p &gt;  
&lt; /p &gt;  
-
 
Строка 143: Строка 131:
{{#ev:youtube| SQ7cWIy63yI&feature=related}}  
{{#ev:youtube| SQ7cWIy63yI&feature=related}}  
-
<br> '''Вопросы: '''
 
-
1. Какие атрибуты используются для выравнивания текста?
+
==Вопросы==
-
2. Как можно выровнять текст по обеим сторонам?
+
''1. Какие атрибуты используются для выравнивания текста? ''
-
3. Есть ли альтернатива тегу &lt; p &gt;?
+
''2. Как можно выровнять текст по обеим сторонам?''
-
4. Правила использования тэгов для выравнивания текста.  
+
''3. Есть ли альтернатива тегу &lt; p &gt;?''
 +
''4. Правила использования тэгов для выравнивания текста. ''
-
''Список использованных источников:''
 
-
1. Урок на тему: «Форматирование текста», Бурлаков А. С., г. Киев.
+
==Список использованных источников==
-
2. Квинт И. HTML и CSS на 100&nbsp;%. - Питер, 2008 г.  
+
''1. Урок на тему: «Форматирование текста», Бурлаков А. С., г. Киев. ''
-
3. Дуванов А.А Web-конструирование. HTML Основы информатики. - BHV-СПб, 2005 г.
+
''2. Квинт И. HTML и CSS на 100&nbsp;%. - Питер, 2008 г. ''
-
<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
+
''3. Дуванов А.А Web-конструирование. HTML Основы информатики. - BHV-СПб, 2005 г.''
----
----
-
'''<u>Над уроком работали</u>'''
+
 
 +
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
 +
 
 +
 
 +
----
 +
 
 +
 
 +
'''Над уроком работали'''
Бурлаков А. С.
Бурлаков А. С.
Строка 176: Строка 170:
----
----
-
 

Версия 11:58, 1 февраля 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 класс