<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Робота із зовнішнім виглядом тексту.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Робота із зовнішнім виглядом тексту.</metakeywords>
-
<br> '''Тема: Робота із зовнішнім виглядом тексту.'''
+
== Тема ==
-
'''Мета:''' Навчити змінювати зовнішність тексту за допомогою спеціальних тегів.
+
*'''Робота із зовнішнім виглядом тексту.'''
-
'''Тип уроку:''' теоретично-практичний
+
== Мета ==
-
'''Хід уроку:'''
+
*Навчити змінювати зовнішність [[Операции при создании текстов|тексту]] за допомогою спеціальних тегів.
-
<br>
+
== Тип уроку ==
+
+
*теоретично-практичний
+
+
== Хід уроку ==
За зовнішній вигляд тексту в мові html відповідає чимало елементів.
За зовнішній вигляд тексту в мові html відповідає чимало елементів.
Строка 17:
Строка 21:
Найосновніші будуть розглянуті в цьому уроці.
Найосновніші будуть розглянуті в цьому уроці.
-
{{#ev:youtube|atvcghjm-gu}}
+
{{#ev:youtube|atvcGhjM-gU}}
-
Отже, найголовніший елемент, який відповідає за оформлення тексту, це тег '''< font >'''.
+
Отже, найголовніший елемент, який відповідає за оформлення тексту, це [[Основные теги. Каркас веб-страницы. Полные уроки|тег]] '''< font >'''.
Він має кілька параметрів:
Він має кілька параметрів:
Строка 33:
Строка 37:
<br>
<br>
-
[[Image:Color-1.jpg]]
+
[[Image:Color-1.jpg|480px|колір тексту]]
2) атрибут '''«size»''' - відповідає за розмір вміщеного в контейнер тексту.
2) атрибут '''«size»''' - відповідає за розмір вміщеного в контейнер тексту.
-
[[Image:Size-1.jpg]]
+
<br> [[Image:Size-1.jpg|480px|розмір тексту]]
-
<br>
+
<br> [[Image:Size-2.jpg|480px|розмір тексту]]
-
[[Image:Size-2.jpg]]
+
<br> 3) атрибут '''«face»''' - відповідає за шрифт вміщеного в контейнер тексту.
-
+
-
+
-
+
-
+
-
+
-
<br>
+
-
+
-
3) атрибут '''«face»''' - відповідає за шрифт вміщеного в контейнер тексту.
+
''< font color=”red” size=”+20” face="arial”>Це моя перша сторінка (шрифт Arial) < /font >''
''< font color=”red” size=”+20” face="arial”>Це моя перша сторінка (шрифт Arial) < /font >''
-
<br>
+
<br> [[Image:Face-1.jpg|480px|шрифт тексту]]
-
+
-
+
-
+
-
[[Image:Face-1.jpg]]
+
-
+
-
+
-
+
-
<br>
+
-
Наступні типи шрифтів обов’язково повинні бути встановлені на комп'ютері кожного користувача і їх можна завжди використовувати:
+
<br> Наступні типи шрифтів обов’язково повинні бути встановлені на [http://xvatit.com/it/fishki-ot-itshki/ комп'ютері] кожного користувача і їх можна завжди використовувати:
*''Times New Roman''
*''Times New Roman''
Строка 74:
Строка 62:
*''Garamond''
*''Garamond''
-
<br>
+
<br> В атрибуті '''«face»''' можна вказати кілька типів шрифтів через кому, наприклад:
-
+
-
В атрибуті '''«face»''' можна вказати кілька типів шрифтів через кому, наприклад:
+
''< font face="arial, verdana, courier" > текст < /font >''
''< font face="arial, verdana, courier" > текст < /font >''
Строка 84:
Строка 70:
Якщо немає Verdana, то текст буде відображений шрифтом Courier і т.д.
Якщо немає Verdana, то текст буде відображений шрифтом Courier і т.д.
-
Якщо хочеться використовувати якийсь екзотичний шрифт, то краще зберегти цей текст із таким типом шрифта як картинку – і ніяких проблем не буде.
+
Якщо хочеться використовувати якийсь екзотичний шрифт, то краще зберегти цей [[Оформление текста|текст]] із таким типом шрифта як картинку – і ніяких проблем не буде.
<br>
<br>
-
{{#ev:youtube|xgrsrnf-nxg&feature=related}}
+
{{#ev:youtube|xGRSrNf-Nxg&feature=related}}
<br>
<br>
-
Наступними елементами для роботи з текстом розглянуті нижче:
+
Наступними елементами для [http://xvatit.com/busines/jobs-career/ роботи] з текстом розглянуті нижче:
*'''< B >''' - Напівжирний шрифт
*'''< B >''' - Напівжирний шрифт
Строка 100:
Строка 86:
*'''< TT >''' відображає монотонний текст (начебто він набраний на друкарській машинці)
*'''< TT >''' відображає монотонний текст (начебто він набраний на друкарській машинці)
-
<br>
+
<br> [[Image:Kursivs-1.jpg|480px|курсив]]
-
+
-
[[Image:Kursivs-1.jpg]]
+
<br>
<br>
Строка 110:
Строка 94:
<br>
<br>
-
[[Image:Migau.gif]]
+
[[Image:Migau.gif|480px|«блимаючий» текст]]
*'''< SUB >''' означає нижній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи нижче базової лінії.
*'''< SUB >''' означає нижній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи нижче базової лінії.
*'''< SUP >''' означає верхній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи вище базової лінії.
*'''< SUP >''' означає верхній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи вище базової лінії.
+
+
<br> [[Image:Indexx.jpg|480px|індекс]]
+
+
<br> {{#ev:youtube|5YPvfe_cCRk&feature=related}}
<br>
<br>
-
[[Image:Indexx.jpg]]
+
== Самоконтроль ==
-
{{#ev:youtube|5Ypvfe_ccrk&feature=related}}
+
''1. Який тег відповідає за зовнішність тексту? ''
+
+
''2. Особливості атрибутів COLOR, SIZE, FACE. ''
+
+
''3. Які шрифти є стандартними? ''
+
+
''4. Який тег відповідає за: - курсивний шрифт - напівжирний шрифт - підкреслений шрифт - закреслений шрифт? ''
<br>
<br>
-
'''Самоконтроль:'''
+
== Список використаної літератури ==
-
1. Який тег відповідає за зовнішність тексту?
+
''1. Урок на тему: «Робота з текстом в HTML», Малин Г. А., м. Севастополь. ''
-
2. Особливості атрибутів COLOR, SIZE, FACE.
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
3. Які шрифти є стандартними?
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
4. Який тег відповідає за: - курсивний шрифт - напівжирний шрифт - підкреслений шрифт - закреслений шрифт?
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''
+
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. '''
<br>
<br>
-
''Список використаної літератури:''
+
----
-
1. Урок на тему: «Робота з текстом в HTML», Малин Г. А., м. Севастополь.
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
+
<br>
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
+
----
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
+
<br> '''Над уроком працювали'''
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
+
Малин Г. А.
-
<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>
Навчити змінювати зовнішність тексту за допомогою спеціальних тегів.
Тип уроку
теоретично-практичний
Хід уроку
За зовнішній вигляд тексту в мові html відповідає чимало елементів.
Найосновніші будуть розглянуті в цьому уроці.
Отже, найголовніший елемент, який відповідає за оформлення тексту, це тег< font >.
Він має кілька параметрів:
1) атрибут «сolor» – відповідає за колір вміщеного в контейнер тексту.
Атрибут "color", як і інші атрибути, не належить тільки одному тегу, він може бути привласнений і деяким іншим.
Власне, сам колір тексту вводиться у лапках після знаку дорівнює. Замість вказаного кольору «red» можна підставляти інші значення.
< font color="red" > Це моя перша сторінка < /font >
2) атрибут «size» - відповідає за розмір вміщеного в контейнер тексту.
3) атрибут «face» - відповідає за шрифт вміщеного в контейнер тексту.
< font color=”red” size=”+20” face="arial”>Це моя перша сторінка (шрифт Arial) < /font >
Наступні типи шрифтів обов’язково повинні бути встановлені на комп'ютері кожного користувача і їх можна завжди використовувати:
Times New Roman
Aria
Helvetica
Courier
Verdana
Tahoma
Cosmic Sans
Garamond
В атрибуті «face» можна вказати кілька типів шрифтів через кому, наприклад:
< font face="arial, verdana, courier" > текст < /font >
У цьому випадку якщо в користувача немає шрифту Arial, то текст буде відображений шрифтом Verdana.
Якщо немає Verdana, то текст буде відображений шрифтом Courier і т.д.
Якщо хочеться використовувати якийсь екзотичний шрифт, то краще зберегти цей текст із таким типом шрифта як картинку – і ніяких проблем не буде.
Наступними елементами для роботи з текстом розглянуті нижче:
< B > - Напівжирний шрифт
< I > - Виділяє текст курсивом
< S > - Перекреслює шрифт
< U > - Підкреслює текст
< TT > відображає монотонний текст (начебто він набраний на друкарській машинці)
< BLINK > Виводить «блимаючий» текст.
< SUB > означає нижній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи нижче базової лінії.
< SUP > означає верхній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи вище базової лінії.
Самоконтроль
1. Який тег відповідає за зовнішність тексту?
2. Особливості атрибутів COLOR, SIZE, FACE.
3. Які шрифти є стандартними?
4. Який тег відповідає за: - курсивний шрифт - напівжирний шрифт - підкреслений шрифт - закреслений шрифт?
Список використаної літератури
1. Урок на тему: «Робота з текстом в HTML», Малин Г. А., м. Севастополь.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. '
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Малин Г. А.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
