KNOWLEDGE HYPERMARKET


Вставка текстової информації. Повні уроки
 
(3 промежуточные версии не показаны)
Строка 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>  
Строка 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>
+
=== Перенос рядка ===
-
На відміну від абзацу, тег переносу рядка &lt; BR &gt; не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці тексту. <br>  
+
На відміну від абзацу, тег переносу рядка &lt; BR &gt; не створює додаткових вертикальних відступів між рядками і може застосовуватися практично в будь-якому місці [[Операции при создании текстов|тексту]]. <br>  
А такий тег як &lt; NOBR &gt; забороняє автоматичний перенос<br>  
А такий тег як &lt; NOBR &gt; забороняє автоматичний перенос<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>  
*за допомогою заголовків легко регулюється розмір тексту. Чим вищий рівень заголовку, тим більший розмір шрифта. Найбільшим рівнем заголовку є &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>  
-
[[Image:Zagol.jpg]]  
+
[[Image:Zagol.jpg|320px|Заголовок]]  
-
[[Image:H1h2h3.jpg]]  
+
[[Image:H1h2h3.jpg|320px|Заголовок]]  
*на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
*на web-сторінці цілком достатньо використовувати заголовки з першого по третій рівень.
Строка 80: Строка 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>
Строка 86: Строка 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>
-
Якщо у вас є виправлення чи пропозиції до цього уроку, [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/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&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 клас