KNOWLEDGE HYPERMARKET


Вставка текстової информації. Повні уроки
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка текстової інформації.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка текстової інформації.</metakeywords>  
-
'''Тема: Вставка текстової інформації.'''<br>  
+
==Тема==
 +
*'''Вставка текстової інформації.'''<br>  
-
'''Мета:''' Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядки. '''Тип уроку:''' теоретично-практичний.  
+
==Мета==
 +
*Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядки.  
-
'''Хід уроку:'''
+
==Тип уроку==
 +
*теоретично-практичний.
 +
 
 +
==Хід уроку===
<br> Для вставки і зміни вигляду тексту існує безліч різних тегів. <br>  
<br> Для вставки і зміни вигляду тексту існує безліч різних тегів. <br>  
Строка 13: Строка 18:
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид інформації. <br>  
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид інформації. <br>  
-
'''Абзаци. '''
+
===Абзаци===
Як правило, блоки тексту розділяються між собою абзацами (параграфами). <br>  
Як правило, блоки тексту розділяються між собою абзацами (параграфами). <br>  
Строка 21: Строка 26:
<br>  
<br>  
-
[[Image:Abz1.jpg]]  
+
[[Image:Abz1.jpg|320px|Абзац]]  
<br>  
<br>  
Строка 35: Строка 40:
<br>  
<br>  
-
[[Image:Primerabz.jpg]]  
+
[[Image:Primerabz.jpg|320px|Приклад]]  
<br>  
<br>  
-
'''Перенос рядка.'''<br>
+
===Перенос рядка===
На відміну від абзацу, тег переносу рядка &lt; BR &gt; не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці тексту. <br>  
На відміну від абзацу, тег переносу рядка &lt; BR &gt; не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці тексту. <br>  
Строка 47: Строка 52:
<br>  
<br>  
-
[[Image:Intervals.jpg]]  
+
[[Image:Intervals.jpg|320px|Інтервали]]  
<br>  
<br>  
-
'''Заголовки.'''<br>
+
===Заголовки===
Заголовки виконують кілька важливих функцій на web-сторінці:<br>  
Заголовки виконують кілька важливих функцій на web-сторінці:<br>  
Строка 57: Строка 62:
*вони показують важливість розділу, до якого відносяться. Чим більше заголовок, тим більш він значимий. Адже, у газетах заголовки важливих статей набрані великим шрифтом, тим самим, залучаючи до них увагу читача.<br>
*вони показують важливість розділу, до якого відносяться. Чим більше заголовок, тим більш він значимий. Адже, у газетах заголовки важливих статей набрані великим шрифтом, тим самим, залучаючи до них увагу читача.<br>
-
[[Image:Tekst-1.jpg]]<br>  
+
[[Image:Tekst-1.jpg|320px|Текст]]<br>  
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є &lt; H1 &gt;, а найнижчим - &lt; H6 &gt;.<br>
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є &lt; H1 &gt;, а найнижчим - &lt; H6 &gt;.<br>
Строка 69: Строка 74:
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.<br>  
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.<br>  
-
[[Image:Zagol.jpg]]  
+
[[Image:Zagol.jpg|320px|Заголовок]]  
-
[[Image:H1h2h3.jpg]]  
+
[[Image:H1h2h3.jpg|320px|Заголовок]]  
*на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
*на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
Строка 90: Строка 95:
<br>  
<br>  
-
'''Самоконтроль:'''
+
==Самоконтроль==
-
1. Який елемент використовується для створення абзацу?  
+
''1. Який елемент використовується для створення абзацу? ''
-
2. Тег для переносу рядка.  
+
''2. Тег для переносу рядка. ''
-
3. Тег для заголовків. Види заголовків.  
+
''3. Тег для заголовків. Види заголовків. ''
-
4. Навіщо потрібні заголовки?  
+
''4. Навіщо потрібні заголовки? ''
-
5. Тег &lt; PRE &gt;  
+
''5. Тег &lt; PRE &gt; ''
<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> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''  
 +
----
----
-
'''<u>Над уроком працювали</u>'''
+
 
 +
'''Над уроком працювали'''
Михєєв Н. Н
Михєєв Н. Н
Строка 126: Строка 136:
Соловйов М. С.
Соловйов М. С.
-
----
 
 +
----

Версия 17:57, 2 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Вставка текстової інформації.

Содержание

Тема

  • Вставка текстової інформації.

Мета

  • Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядки.

Тип уроку

  • теоретично-практичний.

Хід уроку=


Для вставки і зміни вигляду тексту існує безліч різних тегів.

Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид інформації.

Абзаци

Як правило, блоки тексту розділяються між собою абзацами (параграфами).

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


Абзац


Синтаксис створення абзаців такий:

< 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.




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




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

Михєєв Н. Н

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




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

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