<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка текстової інформації.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка текстової інформації.</metakeywords>
-
'''Тема: Вставка текстової інформації.'''<br>
+
== Тема ==
-
'''Мета:''' Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядки. '''Тип уроку:''' теоретично-практичний.
+
*'''Вставка текстової інформації.'''<br>
-
'''Хід уроку:'''
+
== Мета ==
+
+
*Навчити: вставляти [[Оформление текста|текст]] у веб-сторінку, форматувати абзаци, переносити рядки.
+
+
== Тип уроку ==
+
+
*теоретично-практичний.
+
+
== Хід уроку ==
<br> Для вставки і зміни вигляду тексту існує безліч різних тегів. <br>
<br> Для вставки і зміни вигляду тексту існує безліч різних тегів. <br>
-
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид інформації. <br>
+
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид [http://xvatit.com/it/fishki-ot-itshki/ інформації]. <br>
-
'''Абзаци. '''
+
=== Абзаци ===
Як правило, блоки тексту розділяються між собою абзацами (параграфами). <br>
Як правило, блоки тексту розділяються між собою абзацами (параграфами). <br>
Строка 21:
Строка 29:
<br>
<br>
-
[[Image:Abz1.jpg]]
+
[[Image:Abz1.jpg|320px|Абзац]]
<br>
<br>
Строка 35:
Строка 43:
<br>
<br>
-
[[Image:Primerabz.jpg]]
+
[[Image:Primerabz.jpg|320px|Приклад]]
<br>
<br>
-
'''Перенос рядка.'''<br>
+
=== Перенос рядка ===
-
На відміну від абзацу, тег переносу рядка < BR > не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці тексту. <br>
+
На відміну від абзацу, тег переносу рядка < BR > не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці [[Операции при создании текстов|тексту]]. <br>
А такий тег як < NOBR > забороняє автоматичний перенос<br>
А такий тег як < NOBR > забороняє автоматичний перенос<br>
Строка 47:
Строка 55:
<br>
<br>
-
[[Image:Intervals.jpg]]
+
[[Image:Intervals.jpg|320px|Інтервали]]
<br>
<br>
-
'''Заголовки.'''<br>
+
=== Заголовки ===
Заголовки виконують кілька важливих функцій на web-сторінці:<br>
Заголовки виконують кілька важливих функцій на web-сторінці:<br>
Строка 57:
Строка 65:
*вони показують важливість розділу, до якого відносяться. Чим більше заголовок, тим більш він значимий. Адже, у газетах заголовки важливих статей набрані великим шрифтом, тим самим, залучаючи до них увагу читача.<br>
*вони показують важливість розділу, до якого відносяться. Чим більше заголовок, тим більш він значимий. Адже, у газетах заголовки важливих статей набрані великим шрифтом, тим самим, залучаючи до них увагу читача.<br>
-
[[Image:Tekst-1.jpg]]<br>
+
[[Image:Tekst-1.jpg|320px|Текст]]<br>
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є < H1 >, а найнижчим - < H6 >.<br>
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є < H1 >, а найнижчим - < H6 >.<br>
-
{{#ev:youtube|fnOlxY09MVA&feature=related} <br>
+
{{#ev:youtube|fnOlxY09MVA&feature=related}}
-
*пошукові системи додають рейтинг тексту, якщо він перебуває всередині тегу заголовка. <br>
+
<br>
+
+
*пошукові системи додають рейтинг тексту, якщо він перебуває всередині [[Основные теги. Каркас веб-страницы. Полные уроки|тегу]] заголовка. <br>
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.<br>
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.<br>
-
[[Image:Zagol.jpg]]
+
[[Image:Zagol.jpg|320px|Заголовок]]
-
[[Image:H1h2h3.jpg]]
+
[[Image:H1h2h3.jpg|320px|Заголовок]]
*на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
*на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
Строка 78:
Строка 88:
*Тег '''< CITE > ''' потрібний для того, щоб показати, що цей текст цитується або взятий з іншого джерела<br>
*Тег '''< CITE > ''' потрібний для того, щоб показати, що цей текст цитується або взятий з іншого джерела<br>
-
*Тег '''< PRE >''' сприймається браузерами як пре-форматирований. Тобто, абсолютно всі пробіли і різноманітні символи наприкінці рядка зберігаються і відображаються Веб-браузерами. Виводиться такий текст шрифтом з фіксованою шириною. До того ж, на нього не діє автоматичний перенос. <br>
+
*Тег '''< PRE >''' сприймається браузерами як преформатирований. Тобто, абсолютно всі пробіли і різноманітні символи наприкінці рядка зберігаються і відображаються [[Презентация на тему: Что такое Веб - Браузер|Веб-браузерами]]. Виводиться такий текст шрифтом з фіксованою шириною. До того ж, на нього не діє автоматичний перенос. <br>
*Тег '''< Q >''' використовується для виводу невеликих цитат, які будуть відображатися не окремим блоком (параграфом), а рядком у самій статті. <br>
*Тег '''< Q >''' використовується для виводу невеликих цитат, які будуть відображатися не окремим блоком (параграфом), а рядком у самій статті. <br>
*Тег '''< KBD > ''' вказує приклад тексту, який повинен бути набраний користувачем у полі введення. Цей елемент корисний, коли користувачеві потрібно розрізнити текст, який він повинен ввести і опис самого поля введення.<br>
*Тег '''< KBD > ''' вказує приклад тексту, який повинен бути набраний користувачем у полі введення. Цей елемент корисний, коли користувачеві потрібно розрізнити текст, який він повинен ввести і опис самого поля введення.<br>
Строка 84:
Строка 94:
<br>
<br>
-
{{#ev:youtube|VM_cYnqxrSM&feature=related}}
+
{{#ev:youtube|VM_cYnqxrSM&feature=related}}
<br>
<br>
-
'''Самоконтроль:'''
+
== Самоконтроль ==
-
1. Який елемент використовується для створення абзацу?
+
''1. Який елемент використовується для створення абзацу? ''
-
2. Тег для переносу рядка.
+
''2. Тег для переносу рядка. ''
-
3. Тег для заголовків. Види заголовків.
+
''3. Тег для заголовків. Види заголовків. ''
-
4. Навіщо потрібні заголовки?
+
''4. Навіщо потрібні заголовки? ''
-
5. Тег < PRE >
+
''5. Тег < PRE > ''
<br>
<br>
-
''Список використаної літератури:''
+
== Список використаної літератури ==
-
1. Урок на тему: «HTML: Робота з текстом», Михєєв Н. Н., м. Одеса.
+
''1. Урок на тему: «HTML: Робота з текстом», Михєєв Н. Н., м. Одеса.''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
-
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
<br>
+
----
+
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
+
+
<br>
+
+
----
+
+
<br> '''Над уроком працювали'''
+
+
Михєєв Н. Н
+
+
Соловйов М. С.
+
+
<br>
-
Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].
+
----
-
Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядки.
Тип уроку
теоретично-практичний.
Хід уроку
Для вставки і зміни вигляду тексту існує безліч різних тегів.
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид інформації.
Абзаци
Як правило, блоки тексту розділяються між собою абзацами (параграфами).
За замовчуванням між параграфами існує невеликий вертикальний відступ, який називається відбивкою.
Синтаксис створення абзаців такий:
< p >Абзац 1< /p >
< p >Абзац 2< /p >
Кожний абзац починається з тегу < p > і повинен мати обов'язковий закриваючий тег < /p >
Перенос рядка
На відміну від абзацу, тег переносу рядка < BR > не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці тексту.
А такий тег як < NOBR > забороняє автоматичний перенос
Заголовки
Заголовки виконують кілька важливих функцій на web-сторінці:
вони показують важливість розділу, до якого відносяться. Чим більше заголовок, тим більш він значимий. Адже, у газетах заголовки важливих статей набрані великим шрифтом, тим самим, залучаючи до них увагу читача.
за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є < H1 >, а найнижчим - < H6 >.
пошукові системи додають рейтинг тексту, якщо він перебуває всередині тегу заголовка.
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.
на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
Нижче наведені ще декілька основних елементів для роботи з текстом.
Тег < CITE > потрібний для того, щоб показати, що цей текст цитується або взятий з іншого джерела
Тег < PRE > сприймається браузерами як преформатирований. Тобто, абсолютно всі пробіли і різноманітні символи наприкінці рядка зберігаються і відображаються Веб-браузерами. Виводиться такий текст шрифтом з фіксованою шириною. До того ж, на нього не діє автоматичний перенос.
Тег < Q > використовується для виводу невеликих цитат, які будуть відображатися не окремим блоком (параграфом), а рядком у самій статті.
Тег < KBD > вказує приклад тексту, який повинен бути набраний користувачем у полі введення. Цей елемент корисний, коли користувачеві потрібно розрізнити текст, який він повинен ввести і опис самого поля введення.
Самоконтроль
1. Який елемент використовується для створення абзацу?
2. Тег для переносу рядка.
3. Тег для заголовків. Види заголовків.
4. Навіщо потрібні заголовки?
5. Тег < PRE >
Список використаної літератури
1. Урок на тему: «HTML: Робота з текстом», Михєєв Н. Н., м. Одеса.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Михєєв Н. Н
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
