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