Версия 18:07, 2 ноября 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.

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

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

Аршавін А. С.

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

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