KNOWLEDGE HYPERMARKET


Вставка текстової информації. Повні уроки
 
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка текстової інформації.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка текстової інформації.</metakeywords>  
-
==Тема==
+
== Тема ==
-
*'''Вставка текстової інформації.'''<br>
+
-
==Мета==
+
*'''Вставка текстової інформації.'''<br>
-
*Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядки.  
+
-
==Тип уроку==
+
== Мета  ==
-
*теоретично-практичний.
+
-
==Хід уроку==  
+
*Навчити: вставляти [[Оформление текста|текст]] у веб-сторінку, форматувати абзаци, переносити рядки.
 +
 
 +
== Тип уроку  ==
 +
 
 +
*теоретично-практичний.
 +
 
 +
== Хід уроку ==
<br> Для вставки і зміни вигляду тексту існує безліч різних тегів. <br>  
<br> Для вставки і зміни вигляду тексту існує безліч різних тегів. <br>  
-
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид інформації. <br>  
+
Це і не дивно, адже текст - найзрозуміліший і найпопулярніший вид [http://xvatit.com/it/fishki-ot-itshki/ інформації]. <br>  
-
===Абзаци===
+
=== Абзаци ===
Як правило, блоки тексту розділяються між собою абзацами (параграфами). <br>  
Як правило, блоки тексту розділяються між собою абзацами (параграфами). <br>  
Строка 44: Строка 47:
<br>  
<br>  
-
===Перенос рядка===
+
=== Перенос рядка ===
-
На відміну від абзацу, тег переносу рядка &lt; BR &gt; не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці тексту. <br>  
+
На відміну від абзацу, тег переносу рядка &lt; BR &gt; не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці [[Операции при создании текстов|тексту]]. <br>  
А такий тег як &lt; NOBR &gt; забороняє автоматичний перенос<br>  
А такий тег як &lt; NOBR &gt; забороняє автоматичний перенос<br>  
Строка 56: Строка 59:
<br>  
<br>  
-
===Заголовки===
+
=== Заголовки ===
Заголовки виконують кілька важливих функцій на web-сторінці:<br>  
Заголовки виконують кілька важливих функцій на web-сторінці:<br>  
Строка 66: Строка 69:
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є &lt; H1 &gt;, а найнижчим - &lt; H6 &gt;.<br>
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є &lt; H1 &gt;, а найнижчим - &lt; H6 &gt;.<br>
-
{{#ev:youtube|fnOlxY09MVA&feature=related}}
+
{{#ev:youtube|fnOlxY09MVA&feature=related}}  
<br>  
<br>  
-
*пошукові системи додають рейтинг тексту, якщо він перебуває всередині тегу заголовка. <br>
+
*пошукові системи додають рейтинг тексту, якщо він перебуває всередині [[Основные теги. Каркас веб-страницы. Полные уроки|тегу]] заголовка. <br>
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.<br>  
А це важливо для «розкручування» сайту і для його заняття перших рядків видачі результату пошуку.<br>  
Строка 85: Строка 88:
*Тег '''&lt; CITE &gt; ''' потрібний для того, щоб показати, що цей текст цитується або взятий з іншого джерела<br>  
*Тег '''&lt; CITE &gt; ''' потрібний для того, щоб показати, що цей текст цитується або взятий з іншого джерела<br>  
-
*Тег '''&lt; PRE &gt;''' сприймається браузерами як пре-форматирований. Тобто, абсолютно всі пробіли і різноманітні символи наприкінці рядка зберігаються і відображаються Веб-браузерами. Виводиться такий текст шрифтом з фіксованою шириною. До того ж, на нього не діє автоматичний перенос. <br>  
+
*Тег '''&lt; PRE &gt;''' сприймається браузерами як преформатирований. Тобто, абсолютно всі пробіли і різноманітні символи наприкінці рядка зберігаються і відображаються [[Презентация на тему: Что такое Веб - Браузер|Веб-браузерами]]. Виводиться такий текст шрифтом з фіксованою шириною. До того ж, на нього не діє автоматичний перенос. <br>  
*Тег '''&lt; Q &gt;''' використовується для виводу невеликих цитат, які будуть відображатися не окремим блоком (параграфом), а рядком у самій статті. <br>  
*Тег '''&lt; Q &gt;''' використовується для виводу невеликих цитат, які будуть відображатися не окремим блоком (параграфом), а рядком у самій статті. <br>  
*Тег '''&lt; KBD &gt; ''' вказує приклад тексту, який повинен бути набраний користувачем у полі введення. Цей елемент корисний, коли користувачеві потрібно розрізнити текст, який він повинен ввести і опис самого поля введення.<br>
*Тег '''&lt; KBD &gt; ''' вказує приклад тексту, який повинен бути набраний користувачем у полі введення. Цей елемент корисний, коли користувачеві потрібно розрізнити текст, який він повинен ввести і опис самого поля введення.<br>
Строка 91: Строка 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. Тег &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> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''  
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''  
 +
<br>
----
----
 +
<br> '''Над уроком працювали'''
-
'''Над уроком працювали'''
+
Михєєв Н. Н
-
Михєєв Н. Н
+
Соловйов М. С.  
-
 
+
-
Соловйов М. С.
+
 +
<br>
----
----
-
 
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
+
-
 
+
[[Category:Інформатика_10_клас]]
[[Category:Інформатика_10_клас]]

Текущая версия на 20:34, 4 ноября 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 клас