Навчити форматувати текстову інформацію на веб-сторінці.
Тип уроку
теоретично-практичний
Хід уроку
Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < 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 > і < div >?
4. Правила використання тегів для вирівнювання тексту.
Список використаної літератури
1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Аршавін А. С.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
