KNOWLEDGE HYPERMARKET


Вирівнювання тексту. Повні уроки
(Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»)
Строка 120: Строка 120:
< /div >  
< /div >  
-
<br> {{#ev:youtube|xqf8lm2gbyc}}  
+
<br>{{#ev:youtube|XqF8lM2gbyc}}
-
{{#ev:youtube| omyeh5h1lqa&feature=related}}  
+
{{#ev:youtube| omyeH5h1lqA&feature=related}}  
-
{{#ev:youtube| SQ7cwiy63yi&feature=related}}  
+
{{#ev:youtube| SQ7cWIy63yI&feature=related}}
<br> '''Самоконтроль:'''  
<br> '''Самоконтроль:'''  

Версия 12:47, 25 января 2011

Гіпермаркет Знань>>Інформатика>>Інформатика 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 >


Vir-1.jpg


А от у цьому прикладі виключка відбувається по обидва боки, тобто з використанням атрибута «justify»:


Vir-2.jpg


Ще декілька слів стосовно тега < p >:

- не рекомендується вводити в документ таку конструкцію - < p >< /p >. Причиною є те, що порожні теги < p > (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.

- за замовчуванням, текст на сторінці без завдання параграфу якого-небудь атрибута, завжди буде вирівнюватися по лівому краю

- після закриваючого тегу < /p > відбувається автоматичний перенос рядка.

Але якщо цей перенос не потрібний, є альтернативний тег для виключок - < div >.

Із цим тегом можна використовувати ті ж самі атрибути, що і з < p >:

< div align="center"> текст < /div >

< div align="left"> текст < /div >

< div align="right"> текст < /div >

< div align="justify"> текст < /div >


Приклад виключки по центру:


Vir-3.jpg

Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:


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.


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


Якщо у вас є виправлення чи пропозиції до цього уроку, напишіть нам.

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - Образовательный форум.

Предмети > Інформатика > Інформатика 10 клас