KNOWLEDGE HYPERMARKET


Фон веб-страницы. Полные уроки
 
(1 промежуточная версия не показана)
Строка 3: Строка 3:
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фон веб-страницы.</metakeywords>  
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фон веб-страницы.</metakeywords>  
-
'''Тема: Фон веб-страницы.'''
+
== Тема ==
-
'''Цель:''' Научить изменять фон веб-страницы посредством как цвета, так и картинки.  
+
*'''Фон веб-страницы.'''
-
<br>
+
== Цель  ==
-
'''Цвет как фон.'''
+
*Научить изменять фон [[Основные теги. Каркас веб-страницы. Полные уроки|веб-страницы]] посредством как цвета, так и картинки.
 +
 
 +
== Ход урока  ==
 +
 
 +
=== Цвет как фон ===
Цвет фона веб-страницы устанавливается в уже знакомом тэге '''&lt; BODY&gt;.'''<br>  
Цвет фона веб-страницы устанавливается в уже знакомом тэге '''&lt; BODY&gt;.'''<br>  
-
Например, мы хотим, чтобы фон документа был розовым. <br>
+
Например, мы хотим, чтобы фон документа был розовым.  
Вот так выглядит код:  
Вот так выглядит код:  
-
 
-
<br>
 
&lt; html &gt;  
&lt; html &gt;  
-
&lt; head &gt; &lt; title &gt; Фон страницы &lt; /title &gt;  
+
&lt; head &gt; &lt; title &gt; [[Фон веб-сторінки. Повні уроки|Фон страницы]] &lt; /title &gt;  
&lt; /head &gt;  
&lt; /head &gt;  
-
'''&lt; ''''''BODY''''''bgcolor="pink" &gt; '''<br>  
+
'''&lt; BODY bgcolor="pink" &gt; '''<br>  
&lt; h2 &gt; Сейчас используется розовый цвет для фона &lt; h2 &gt;  
&lt; h2 &gt; Сейчас используется розовый цвет для фона &lt; h2 &gt;  
Строка 33: Строка 35:
&lt; /html &gt;  
&lt; /html &gt;  
-
<br>  
+
<br> [[Image:Fon1.jpg|400px|Фон страницы]]
-
[[Image:Fon1.jpg]]
+
<br> Документ можно раскрасить любым другим цветом. <br>
-
<br>  
+
Если в элементе '''&lt; BODY<span style="font-weight: bold;"> </span>&lt;span style="font-weight: bold;" /&gt; &gt;''' цвет не указывать, то по умолчанию он будет белым.
-
Документ можно раскрасить любым другим цветом. <br>
+
[[Image:Fon2.jpg|400px|Фон страницы]]
-
Если в элементе '''&lt; '''''BODY<span style="font-weight: bold;"> </span>''&lt;span style="font-weight: bold;" /&gt;'''&gt;''' цвет не указывать, то по умолчанию он будет белым.  
+
<br> Больше цветов для использования их как фона можно взять по этой ссылке: http:/ /www.artlebedev.ru/tools/colors/
-
[[Image:Fon2.jpg]]
+
<br> {{#ev:youtube|iaoaG2iymII&feature=related}}
-
<br>  
+
<br> Важно иметь ввиду, что в тэге &lt; '''BODY''' &gt; одновременно можно прописывать и цвет [[Оформление текста|текста]], и цвет фона.
-
Больше цветов для использования их как фона можно взять по этой ссылке: http://www.artlebedev.ru/tools/colors/  
+
Например: '''&lt;body <u>text</u>="green" <u>bgcolor</u>="pink"&gt;'''
-
<br>  
+
<br> [[Image:Fon3.jpg|400px|Фон страницы]]
-
{{#ev:youtube|iaoaG2iymII&feature=related}}
+
<br> Но есть некоторые правила при использовании цвета для фона.  
-
 
+
-
<br>  
+
-
 
+
-
Важно иметь ввиду, что в тэге &lt; '''BODY''' &gt; одновременно можно прописывать и цвет текста, и цвет фона.
+
-
 
+
-
Например: ''&lt;body <u>text</u>="green" <u>bgcolor</u>="pink"&gt;''
+
-
 
+
-
<br> [[Image:Fon3.jpg]]
+
-
 
+
-
<br>
+
-
 
+
-
Но есть некоторые правила при использовании цвета для фона.  
+
Например, не нужно злоупотреблять яркими фонами: желтым, красным, салатовым и т.д.  
Например, не нужно злоупотреблять яркими фонами: желтым, красным, салатовым и т.д.  
Строка 71: Строка 61:
<br>  
<br>  
-
'''Картинка как фон'''<br>
+
=== Картинка как фон ===
Кроме цвета, фоном также может служить и картинка или какой-нибудь узор.<br>  
Кроме цвета, фоном также может служить и картинка или какой-нибудь узор.<br>  
-
С помощью того же тэга &lt; '''BODY''' &gt; и такого атрибута как '''«Background»''', можно использовать любую картинку как фон веб-страницы. ]  
+
С помощью того же [[Основні теги. Каркас веб-сторінки. Повні уроки|тэга]] &lt; '''BODY''' &gt; и такого атрибута как '''«Background»''', можно использовать любую картинку как фон веб-страницы. ]  
-
Атрибут ''"Background"'' указывает путь, где лежит картинка для фона.  
+
Атрибут '''"Background"''' указывает путь, где лежит картинка для фона.  
В этом примере он указывает на то, что картинка лежит в той же папке, что и наш документ.  
В этом примере он указывает на то, что картинка лежит в той же папке, что и наш документ.  
-
Например, &lt;''body background="image1.jpg" ''&gt;  
+
Например, &lt;'''body background="image1.jpg" '''&gt;  
-
<br>  
+
<br> [[Image:Fon4.jpg|400px|Фон страницы]]  
-
 
+
-
[[Image:Fon4.jpg]]  
+
-
 
+
-
<br>
+
-
Существуют некоторые замечания по поводу использования картинки как фона:  
+
<br> Существуют некоторые замечания по поводу использования картинки как фона:  
*Во-первых, нужно тщательно выбирать картинку для фона, так как их большинство просто не годятся для фона или же ужасно выглядят во множестве  
*Во-первых, нужно тщательно выбирать картинку для фона, так как их большинство просто не годятся для фона или же ужасно выглядят во множестве  
*Во-вторых, рекомендуется для фона брать какой-либо узор (как в примере, выше)  
*Во-вторых, рекомендуется для фона брать какой-либо узор (как в примере, выше)  
-
*В-третьих, важно знать, что картинка в документе «размножается» слева направо и сверху вниз
+
*В-третьих, важно знать, что [[Вставка изображений в веб-страницу. Полные уроки|картинка в документе]] «размножается» слева направо и сверху вниз
-
<br>  
+
<br> {{#ev:youtube|eUsuuxo3nYo}}<br>  
-
 
+
-
{{#ev:youtube|eUsuuxo3nYo}}<br>
+
-
 
+
-
<br>  
+
<br>  
<br>  
-
'''Вопросы: '''<br>
+
== Вопросы ==
-
1. Какая команда позволяет установить фоновый цвет документа? <br>  
+
''1. Какая команда позволяет установить фоновый цвет документа? ''<br>  
-
2. Что нужно сделать для того, чтобы поставить на фон картинку? <br>  
+
''2. Что нужно сделать для того, чтобы поставить на фон картинку? ''<br>  
-
3. Перечислите основные правила при размещении фоновой картинки на веб-страницу.  
+
''3. Перечислите основные правила при размещении фоновой картинки на веб-страницу.''
<br>  
<br>  
-
''Список использованных источников: ''<br>
+
== Список использованных источников ==
-
1. Урок на тему: «Выбираем фон для веб-странички», Малахова Е. В., г. Киев. <br>  
+
''1. Урок на тему: «Выбираем фон для веб-странички», Малахова Е. В., г. Киев. ''<br>  
-
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. <br>  
+
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''<br>  
-
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.  
+
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
<br>  
<br>  
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С. '' <br>
 
----
----
-
'''<u>Над уроком работали</u>'''
+
<br> ''Отредактировано и выслано преподавателем Киевского национального [http://xvatit.com/vuzi/ukraine-ukr/ университета] им. Тараса Шевченко Соловьевым М. С. ''
-
 
+
-
Малахова Е. В.
+
-
 
+
-
Соловьев М. С.
+
 +
<br>
----
----
 +
<br> '''Над уроком работали'''
 +
Малахова Е. В.
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
+
Соловьев М. С.  
-
   
+
 +
<br>
 +
 +
----
 +
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
[[Category:Информатика_10_класс]]
[[Category:Информатика_10_класс]]

Текущая версия на 19:33, 2 февраля 2013

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Фон веб-страницы.

Содержание

Тема

  • Фон веб-страницы.

Цель

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

Ход урока

Цвет как фон

Цвет фона веб-страницы устанавливается в уже знакомом тэге < BODY>.

Например, мы хотим, чтобы фон документа был розовым.

Вот так выглядит код:

< html >

< head > < title > Фон страницы < /title >

< /head >

< BODY bgcolor="pink" >

< h2 > Сейчас используется розовый цвет для фона < h2 >

< /body >

< /html >


Фон страницы


Документ можно раскрасить любым другим цветом.

Если в элементе < BODY <span style="font-weight: bold;" /> > цвет не указывать, то по умолчанию он будет белым.

Фон страницы


Больше цветов для использования их как фона можно взять по этой ссылке: 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. - СПб.: Питер, 2002 г.

3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.




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




Над уроком работали

Малахова Е. В.

Соловьев М. С.




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

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