KNOWLEDGE HYPERMARKET


Робота із зовнішнім виглядом тексту. Повні уроки
 
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Робота із зовнішнім виглядом тексту.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Робота із зовнішнім виглядом тексту.</metakeywords>  
-
==Тема==
+
== Тема ==
-
*'''Робота із зовнішнім виглядом тексту.'''
+
-
==Мета==
+
*'''Робота із зовнішнім виглядом тексту.'''
-
*Навчити змінювати зовнішність тексту за допомогою спеціальних тегів.  
+
-
==Тип уроку==
+
== Мета ==
-
*теоретично-практичний
+
-
==Хід уроку==  
+
*Навчити змінювати зовнішність [[Операции при создании текстов|тексту]] за допомогою спеціальних тегів.
 +
 
 +
== Тип уроку ==
 +
 
 +
*теоретично-практичний
 +
 
 +
== Хід уроку ==
За зовнішній вигляд тексту в мові html відповідає чимало елементів.  
За зовнішній вигляд тексту в мові html відповідає чимало елементів.  
Строка 18: Строка 21:
Найосновніші будуть розглянуті в цьому уроці.  
Найосновніші будуть розглянуті в цьому уроці.  
-
{{#ev:youtube|atvcGhjM-gU}}
+
{{#ev:youtube|atvcGhjM-gU}}  
-
Отже, найголовніший елемент, який відповідає за оформлення тексту, це тег '''&lt; font &gt;'''.  
+
Отже, найголовніший елемент, який відповідає за оформлення тексту, це [[Основные теги. Каркас веб-страницы. Полные уроки|тег]] '''&lt; font &gt;'''.  
Він має кілька параметрів:  
Він має кілька параметрів:  
Строка 38: Строка 41:
2) атрибут '''«size»''' - відповідає за розмір вміщеного в контейнер тексту.  
2) атрибут '''«size»''' - відповідає за розмір вміщеного в контейнер тексту.  
 +
<br> [[Image:Size-1.jpg|480px|розмір тексту]]
-
[[Image:Size-1.jpg|480px|розмір тексту]]  
+
<br> [[Image:Size-2.jpg|480px|розмір тексту]]  
-
 
+
<br> 3) атрибут '''«face»''' - відповідає за шрифт вміщеного в контейнер тексту.  
-
[[Image:Size-2.jpg|480px|розмір тексту]]
+
-
 
+
-
 
+
-
3) атрибут '''«face»''' - відповідає за шрифт вміщеного в контейнер тексту.  
+
''&lt; font color=”red” size=”+20” face="arial”&gt;Це моя перша сторінка (шрифт Arial) &lt; /font &gt;''  
''&lt; font color=”red” size=”+20” face="arial”&gt;Це моя перша сторінка (шрифт Arial) &lt; /font &gt;''  
 +
<br> [[Image:Face-1.jpg|480px|шрифт тексту]]
-
[[Image:Face-1.jpg|480px|шрифт тексту]]
+
<br> Наступні типи шрифтів обов’язково повинні бути встановлені на [http://xvatit.com/it/fishki-ot-itshki/ комп'ютері] кожного користувача і їх можна завжди використовувати:  
-
 
+
-
 
+
-
Наступні типи шрифтів обов’язково повинні бути встановлені на комп'ютері кожного користувача і їх можна завжди використовувати:  
+
*''Times New Roman''  
*''Times New Roman''  
Строка 64: Строка 62:
*''Garamond''
*''Garamond''
-
 
+
<br> В атрибуті '''«face»''' можна вказати кілька типів шрифтів через кому, наприклад:  
-
В атрибуті '''«face»''' можна вказати кілька типів шрифтів через кому, наприклад:  
+
''&lt; font face="arial, verdana, courier" &gt; текст &lt; /font &gt;''  
''&lt; font face="arial, verdana, courier" &gt; текст &lt; /font &gt;''  
Строка 73: Строка 70:
Якщо немає Verdana, то текст буде відображений шрифтом Courier і т.д.  
Якщо немає Verdana, то текст буде відображений шрифтом Courier і т.д.  
-
Якщо хочеться використовувати якийсь екзотичний шрифт, то краще зберегти цей текст із таким типом шрифта як картинку – і ніяких проблем не буде.  
+
Якщо хочеться використовувати якийсь екзотичний шрифт, то краще зберегти цей [[Оформление текста|текст]] із таким типом шрифта як картинку – і ніяких проблем не буде.  
<br>  
<br>  
Строка 81: Строка 78:
<br>  
<br>  
-
Наступними елементами для роботи з текстом розглянуті нижче:  
+
Наступними елементами для [http://xvatit.com/busines/jobs-career/ роботи] з текстом розглянуті нижче:  
*'''&lt; B &gt;''' - Напівжирний шрифт  
*'''&lt; B &gt;''' - Напівжирний шрифт  
Строка 89: Строка 86:
*'''&lt; TT &gt;''' відображає монотонний текст (начебто він набраний на друкарській машинці)
*'''&lt; TT &gt;''' відображає монотонний текст (начебто він набраний на друкарській машинці)
 +
<br> [[Image:Kursivs-1.jpg|480px|курсив]]
-
[[Image:Kursivs-1.jpg|480px|курсив]]
+
<br>
-
 
+
*'''&lt; BLINK '''&gt; Виводить «блимаючий» текст.
*'''&lt; BLINK '''&gt; Виводить «блимаючий» текст.
Строка 102: Строка 99:
*'''&lt; SUP &gt;''' означає верхній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи вище базової лінії.
*'''&lt; SUP &gt;''' означає верхній індекс, тобто текст, укладений у даний елемент, буде виводитися трохи вище базової лінії.
 +
<br> [[Image:Indexx.jpg|480px|індекс]]
-
[[Image:Indexx.jpg|480px|індекс]]
+
<br> {{#ev:youtube|5YPvfe_cCRk&feature=related}}  
-
 
+
-
 
+
-
{{#ev:youtube|5YPvfe_cCRk&feature=related}}  
+
<br>  
<br>  
-
==Самоконтроль==  
+
== Самоконтроль ==
-
''1. Який тег відповідає за зовнішність тексту? ''
+
''1. Який тег відповідає за зовнішність тексту? ''  
-
''2. Особливості атрибутів COLOR, SIZE, FACE. ''
+
''2. Особливості атрибутів COLOR, SIZE, FACE. ''  
-
''3. Які шрифти є стандартними? ''
+
''3. Які шрифти є стандартними? ''  
-
''4. Який тег відповідає за: - курсивний шрифт - напівжирний шрифт - підкреслений шрифт - закреслений шрифт? ''
+
''4. Який тег відповідає за: - курсивний шрифт - напівжирний шрифт - підкреслений шрифт - закреслений шрифт? ''  
<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>  
Строка 138: Строка 133:
----
----
-
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''  
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''  
<br>  
<br>  
Строка 144: Строка 139:
----
----
 +
<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:48, 4 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Робота із зовнішнім виглядом тексту.

Содержание

Тема

  • Робота із зовнішнім виглядом тексту.

Мета

  • Навчити змінювати зовнішність тексту за допомогою спеціальних тегів.

Тип уроку

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

Хід уроку

За зовнішній вигляд тексту в мові 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. '




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




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

Малин Г. А.

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




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

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