Фон веб-сторінки. Повні уроки - История изменений

User17 в 20:59, 4 ноября 2012

2012-11-04T20:59:44Z

← Предыдущая		Версия 20:59, 4 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>

-	==Тема==	+	== Тема ==
-	*'''Фон веб-сторінки.'''	+

-	~~==Мета==~~	+	*'''Фон веб-сторінки.'''
-	*~~Навчити змінювати фон~~ веб-сторінки ~~за допомогою як кольору, так і картинки~~.	+

-	==~~Тип уроку~~==	+	== Мета ==
-	*теоретично-практичний	+

-	~~==Хід уроку==~~	+	*Навчити змінювати фон веб-сторінки за допомогою як кольору, так і [http://xvatit.com/relax/photoshop-online.php картинки].

-	===Колір як фон===	+	== Тип уроку ==
		+
		+	*теоретично-практичний
		+
		+	== Хід уроку ==
		+
		+	=== Колір як фон ===

	Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега < BODY>. <br>		Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега < BODY>. <br>
Строка 56:		Строка 59:
	<br>		<br>

-	Важливо знати, що поряд з тегом < '''BODY''' > одночасно можна прописувати і колір тексту, і колір фону.	+	Важливо знати, що поряд з тегом < '''BODY''' > одночасно можна прописувати і колір [[Операции при создании текстов\|тексту]], і колір фону.

	Наприклад: ''<body <u>text</u>="green" <u>bgcolor</u>="pink">''		Наприклад: ''<body <u>text</u>="green" <u>bgcolor</u>="pink">''
Строка 66:		Строка 69:
	Наприклад, не потрібно зловживати яскравими кольорами: жовтим, червоним, салатовим і т.д.		Наприклад, не потрібно зловживати яскравими кольорами: жовтим, червоним, салатовим і т.д.

-	Пошкодуйте очі відвідувачів сайту – адже яскраві кольори важко сприймаються. Тим більше текс на такому фоні просто не можливо буде читати.	+	Пошкодуйте очі відвідувачів [[Структура веб-сайтів, різновиди веб-сайтів\|сайту]] – адже яскраві кольори важко сприймаються. Тим більше текс на такому фоні просто не можливо буде читати.

	<br>		<br>
-	===Картинка як фон===	+
		+	=== Картинка як фон ===

	Окрім кольору, фоном також може служити і картинка або який-небудь візерунок.<br>		Окрім кольору, фоном також може служити і картинка або який-небудь візерунок.<br>
Строка 77:		Строка 81:
	Атрибут Background вказує шлях, де лежить картинка для фону.		Атрибут Background вказує шлях, де лежить картинка для фону.

-	У цьому прикладі він указує на те, що картинка лежить у тій же папці, що і наший веб-документ.	+	У цьому прикладі він указує на те, що картинка лежить у тій же [[Папки (каталоги)\|папці]], що і наший веб-документ.

	Наприклад, <''body background="image1.jpg" ''>		Наприклад, <''body background="image1.jpg" ''>
Строка 95:		Строка 99:
	{{#ev:youtube\|eUsuuxo3nYo}}<br>		{{#ev:youtube\|eUsuuxo3nYo}}<br>

		+	<br>

-	==Самоконтроль==	+	== Самоконтроль ==

	''1. Яка команда дозволяє встановити фоновий колір документа? ''<br>		''1. Яка команда дозволяє встановити фоновий колір документа? ''<br>
Строка 102:		Строка 107:
	''2. Що потрібно зробити для того, щоб поставити на фон картинку? ''<br>		''2. Що потрібно зробити для того, щоб поставити на фон картинку? ''<br>

-	''3. Перелічить основні правила при розміщенні фонової картинки на веб-~~сторінку~~. ''	+	''3. Перелічить основні правила при розміщенні фонової картинки на [[Основные теги. Каркас веб-страницы. Полные уроки\|веб-сторінку]]'' .

	<br>		<br>

-	==Список використаної літератури==	+	== Список використаної літератури ==

-	''1. Урок на тему: «Вибираємо фон для веб-сторінки», Соломка А. І., м. Воронеж. ''	+	''1. Урок на тему: «Вибираємо фон для веб-сторінки», Соломка А. І., м. Воронеж. ''

-	''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>
Строка 122:		Строка 127:
	----		----

		+	<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''

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

	----		----

		+	<br> '''Над уроком працювали'''

-	~~'''Над уроком працювали'''~~	+	Соломка А. І.

-	~~Соломка А. І.~~	+	Соловйов М. С.
-		+
-	Соловйов М. С.	+

		+	<br>

	----		----

-		+	<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
-	Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>	+
-		+

	[[Category:Інформатика_10_клас]]		[[Category:Інформатика_10_клас]]

User16 в 18:27, 2 ноября 2012

2012-11-02T18:27:29Z

← Предыдущая		Версия 18:27, 2 ноября 2012
Строка 48:		Строка 48:
	[[Image:Fon2.jpg\|480px\|Фон веб-сторінки]]		[[Image:Fon2.jpg\|480px\|Фон веб-сторінки]]

-	Більше кольорів для використання їх як фону можна обрати за цим посиланням: http://www.artlebedev.ru/tools/colors/	+	Більше кольорів для використання їх як фону можна обрати за цим посиланням: http:/ /www.artlebedev.ru/tools/colors/

	<br>		<br>

User16 в 18:27, 2 ноября 2012

2012-11-02T18:27:05Z

← Предыдущая		Версия 18:27, 2 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>

-	~~<br>~~ '''~~Тема:~~ Фон веб-сторінки.'''	+	==Тема==
		+	*'''Фон веб-сторінки.'''

-	~~'''~~Мета~~:'''~~ Навчити змінювати фон веб-сторінки за допомогою як кольору, так і картинки.	+	==Мета==
		+	*Навчити змінювати фон веб-сторінки за допомогою як кольору, так і картинки.

-	~~'''~~Тип уроку~~:'''~~теоретично-практичний	+	==Тип уроку==
		+	*теоретично-практичний

-	~~'''~~Хід уроку~~:'''~~	+	==Хід уроку==

-	~~<br>~~	+	===Колір як фон===
-		+
-	~~'''~~Колір як фон~~.'''~~	+

	Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега < BODY>. <br>		Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега < BODY>. <br>
Строка 37:		Строка 38:
	<br>		<br>

-	[[Image:Fon1.jpg]]	+	[[Image:Fon1.jpg\|480px\|Фон веб-сторінки]]

	<br>		<br>
Строка 45:		Строка 46:
	Якщо в елементі BODY колір не вказувати, то за замовчуванням він буде білим.		Якщо в елементі BODY колір не вказувати, то за замовчуванням він буде білим.

-	[[Image:Fon2.jpg]] Більше кольорів для використання їх як фону можна обрати за цим посиланням: http://www.artlebedev.ru/tools/colors/	+	[[Image:Fon2.jpg\|480px\|Фон веб-сторінки]]
		+
		+	Більше кольорів для використання їх як фону можна обрати за цим посиланням: http://www.artlebedev.ru/tools/colors/

	<br>		<br>
Строка 57:		Строка 60:
	Наприклад: ''<body <u>text</u>="green" <u>bgcolor</u>="pink">''		Наприклад: ''<body <u>text</u>="green" <u>bgcolor</u>="pink">''

-	<br> [[Image:Fon3.jpg]]	+	<br> [[Image:Fon3.jpg\|480px\|Фон веб-сторінки]]

	<br> Але є деякі правила при використанні кольору для фону.		<br> Але є деякі правила при використанні кольору для фону.
Строка 66:		Строка 69:

	<br>		<br>
-		+	===Картинка як фон===
-	~~'''~~Картинка як фон~~'''<br>~~	+

	Окрім кольору, фоном також може служити і картинка або який-небудь візерунок.<br>		Окрім кольору, фоном також може служити і картинка або який-небудь візерунок.<br>
Строка 81:		Строка 83:
	<br>		<br>

-	[[Image:Fon4.jpg]]	+	[[Image:Fon4.jpg\|480px\|Фон веб-сторінки]]

	<br> Існують деякі зауваження з приводу використання картинки як фону:		<br> Існують деякі зауваження з приводу використання картинки як фону:
Строка 94:		Строка 96:


-	~~<br>~~	+	==Самоконтроль==
-		+
-	~~'''~~Самоконтроль~~:''' <br>~~	+

-	1. Яка команда дозволяє встановити фоновий колір документа? <br>	+	''1. Яка команда дозволяє встановити фоновий колір документа? ''<br>

-	2. Що потрібно зробити для того, щоб поставити на фон картинку? <br>	+	''2. Що потрібно зробити для того, щоб поставити на фон картинку? ''<br>

-	3. Перелічить основні правила при розміщенні фонової картинки на веб-сторінку.	+	''3. Перелічить основні правила при розміщенні фонової картинки на веб-сторінку. ''

	<br>		<br>

-	''Список використаної літератури~~:'' <br>~~	+	==Список використаної літератури==

-	1. Урок на тему: «Вибираємо фон для веб-сторінки», Соломка А. І., м. Воронеж. ~~<br> 2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.~~	+	''1. Урок на тему: «Вибираємо фон для веб-сторінки», Соломка А. І., м. Воронеж. ''

-	3. ~~Квинт И~~. HTML и ~~XHTML~~. ~~Языки разметки web-страниц~~. - ~~Питер~~, 2010.	+	''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''

-	4. ~~Богомолова О~~.Б. ~~Web~~-~~конструирование на HTML~~. - ~~БИНОМ. Лаборатория знаний~~, ~~2008~~.	+	''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''

-	5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.	+	''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''
		+
		+	''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''

	<br>		<br>
		+
		+	----
		+

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

-	~~<br> <br> ----~~

-	'''~~<u>~~Над уроком працювали~~</u>~~'''	+	----
		+
		+
		+	'''Над уроком працювали'''

	Соломка А. І.		Соломка А. І.
Строка 128:		Строка 135:
	Соловйов М. С.		Соловйов М. С.

-	~~----~~

		+	----

User11 в 10:19, 10 марта 2011

2011-03-10T10:19:30Z

← Предыдущая		Версия 10:19, 10 марта 2011
Строка 120:		Строка 120:
	''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

-	<br> ~~Якщо у вас є виправлення чи пропозиції до цього уроку~~, [http://xvatit.com/~~index~~.~~php?do=feedback напишіть нам~~].	+	<br> <br> ----
		+
		+	'''<u>Над уроком працювали</u>'''
		+
		+	Соломка А. І.
		+
		+	Соловйов М. С.
		+
		+	----
		+
		+
		+
		+	Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>

-	Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

	[[Category:Інформатика_10_клас]]		[[Category:Інформатика_10_клас]]

User17 в 13:01, 25 января 2011

2011-01-25T13:01:28Z

← Предыдущая		Версия 13:01, 25 января 2011
Строка 93:		Строка 93:
	{{#ev:youtube\|eUsuuxo3nYo}}<br>		{{#ev:youtube\|eUsuuxo3nYo}}<br>

-	~~{{#ev:youtube\|aQL2X7rWH84}}~~

	<br>		<br>

User17 в 12:59, 25 января 2011

2011-01-25T12:59:29Z

← Предыдущая		Версия 12:59, 25 января 2011
Строка 49:		Строка 49:
	<br>		<br>

-	{{#ev:youtube\|~~iaoag2iymii~~&feature=related}}	+	{{#ev:youtube\|iaoaG2iymII&feature=related}}

	<br>		<br>
Строка 91:		Строка 91:
	<br>		<br>

-	{{#ev:youtube\|~~eusuuxo3nyo~~}}<br>	+	{{#ev:youtube\|eUsuuxo3nYo}}<br>

-	{{#ev:youtube\|~~aql2X7rwh84~~}}	+	{{#ev:youtube\|aQL2X7rWH84}}

	<br>		<br>

User17: Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

2011-01-11T14:35:22Z

Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

Новая страница

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 10 клас. Повні уроки|Інформатика 10 клас. Повні уроки]]>> Інформатика: Фон веб-сторінки.'''

<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>

 '''Тема: Фон веб-сторінки.'''

'''Мета:''' Навчити змінювати фон веб-сторінки за допомогою як кольору, так і картинки.

'''Тип уроку:'''теоретично-практичний

'''Хід уроку:'''

 

'''Колір як фон.'''

Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега < BODY>. 

Наприклад, якщо ми хочемо, щоб фон документа було рожевим, то код виглядає так:

 

< html >

< head > < title > Фон сторінки < /title >

< /head >

'''< '''''Body '''''bgcolor="pink" > ''' 

< h2 > Зараз використовується рожевий колір для фону < h2 >

< /body >

< /html >

 

[[Image:Fon1.jpg]]

 

Документ можна розфарбувати будь-яким іншим кольором. 

Якщо в елементі BODY колір не вказувати, то за замовчуванням він буде білим.

[[Image:Fon2.jpg]] Більше кольорів для використання їх як фону можна обрати за цим посиланням: http://www.artlebedev.ru/tools/colors/

 

{{#ev:youtube|iaoag2iymii&feature=related}}

 

Важливо знати, що поряд з тегом < '''BODY''' > одночасно можна прописувати і колір тексту, і колір фону.

Наприклад: ''<body text="green" bgcolor="pink">''

 [[Image:Fon3.jpg]]

 Але є деякі правила при використанні кольору для фону.

Наприклад, не потрібно зловживати яскравими кольорами: жовтим, червоним, салатовим і т.д.

Пошкодуйте очі відвідувачів сайту – адже яскраві кольори важко сприймаються. Тим більше текс на такому фоні просто не можливо буде читати.

 

'''Картинка як фон''' 

Окрім кольору, фоном також може служити і картинка або який-небудь візерунок. 

За допомогою того ж тега < '''BODY''' > і такого атрибута як «Background», можна використовувати будь-яку картинку як фон веб-сторінки.

Атрибут Background вказує шлях, де лежить картинка для фону.

У цьому прикладі він указує на те, що картинка лежить у тій же папці, що і наший веб-документ.

Наприклад, <''body background="image1.jpg" ''>

 

[[Image:Fon4.jpg]]

 Існують деякі зауваження з приводу використання картинки як фону:

*По-перше, потрібно ретельно вибирати картинку для фону, тому що власне картинки не годяться для фону і жахливо виглядають у розмноженому вигляді
*По-друге, рекомендується для фону брати який-небудь візерунок (як у прикладі, вище)
*По-третє, важливо знати, що картинка в документі «розмножується» ліворуч праворуч і зверху вниз

 

{{#ev:youtube|eusuuxo3nyo}} 

{{#ev:youtube|aql2X7rwh84}}

 

'''Самоконтроль:''' 

1. Яка команда дозволяє встановити фоновий колір документа? 

2. Що потрібно зробити для того, щоб поставити на фон картинку? 

3. Перелічить основні правила при розміщенні фонової картинки на веб-сторінку.

 

''Список використаної літератури:'' 

1. Урок на тему: «Вибираємо фон для веб-сторінки», Соломка А. І., м. Воронеж. 2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.

3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.

 

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

 Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

[[Category:Інформатика_10_клас]]