KNOWLEDGE HYPERMARKET

Фон веб-сторінки. Повні уроки
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Фон веб-сторінки.</metakeywords>  
-
<br> '''Тема: Фон веб-сторінки.'''  
+
==Тема==
 +
*'''Фон веб-сторінки.'''  
-
'''Мета:''' Навчити змінювати фон веб-сторінки за допомогою як кольору, так і картинки.  
+
==Мета==
 +
*Навчити змінювати фон веб-сторінки за допомогою як кольору, так і картинки.  
-
'''Тип уроку:'''теоретично-практичний  
+
==Тип уроку==
 +
*теоретично-практичний  
-
'''Хід уроку:'''
+
==Хід уроку==
-
<br>
+
===Колір як фон===
-
 
+
-
'''Колір як фон.'''
+
Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега &lt; BODY&gt;. <br>  
Колір фону веб-сторінки встановлюється за допомогою вже знайомого тега &lt; BODY&gt;. <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:
Наприклад: ''&lt;body <u>text</u>="green" <u>bgcolor</u>="pink"&gt;''  
Наприклад: ''&lt;body <u>text</u>="green" <u>bgcolor</u>="pink"&gt;''  
-
<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:
Соловйов М. С.
Соловйов М. С.
-
----
 
 +
----

Версия 18:27, 2 ноября 2012

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

Содержание

Тема

  • Фон веб-сторінки.

Мета

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

Тип уроку

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

Хід уроку

Колір як фон

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

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


< html >

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

< /head >

< Body bgcolor="pink" >

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

< /body >

< /html >


Фон веб-сторінки


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

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

Фон веб-сторінки

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




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

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


Фон веб-сторінки


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

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

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


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

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

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

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

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

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


Фон веб-сторінки


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

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





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

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

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

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


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

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

2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.

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

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

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



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



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

Соломка А. І.

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



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

Источник — «http://edufuture.biz/index.php?title=%D0%A4%D0%BE%D0%BD_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B8._%D0%9F%D0%BE%D0%B2%D0%BD%D1%96_%D1%83%D1%80%D0%BE%D0%BA%D0%B8»
Предмети > Інформатика > Інформатика 10 клас

Авторські права | Privacy Policy |FAQ | Партнери | Контакти | Кейс-уроки

©  Автор системы образования 7W и Гипермаркета Знаний - Владимир Спиваковский

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: