Инфоурок / Информатика / Конспекты / Методическое пособие "Язык разметки гипертекста. HTML"
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.

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

Только сейчас Вы можете пройти дистанционное обучение прямо на сайте "Инфоурок" со скидкой 40% по курсу повышения квалификации "Организация работы с обучающимися с ограниченными возможностями здоровья (ОВЗ)" (72 часа). По окончании курса Вы получите печатное удостоверение о повышении квалификации установленного образца (доставка удостоверения бесплатна).

Автор курса: Логинова Наталья Геннадьевна, кандидат педагогических наук, учитель высшей категории. Начало обучения новой группы: 27 сентября.

Подать заявку на этот курс    Смотреть список всех 216 курсов со скидкой 40%

Методическое пособие "Язык разметки гипертекста. HTML"

библиотека
материалов

Министерство образования и науки Украины

Открытый Таврический Колледж



П. А. Гресько






Основы работы на языке программирования HTML


Курс лекций


Для студентов колледжей экономических специальностей






















Симферополь 2006

Содержание


Начало работы в HTML


Структура HTML документа


Форматирование текста


Кодирование символов


Кодирование цветов


Задание фона страницы


Разделительные линии


Бегущая строка


Создание ссылок


Добавление рисунка


Маркированный список


Создание таблиц


Фреймы


Стили


Позиционный текст


Стили 3d- эффект


Статические фильтры


Всплывающие подсказки

Переключатели и флажки

Ниспадающее меню

Окна сообщений

Начало работы в HTML


В настоящее время Internet занимает одно из первых мест в сфере информационных услуг. Многие люди уже не идут за информацией в библиотеки и книжные магазины, а пользуются услугами Internet-кафе. Океан свежей и разнообразной информации представлено на серверах расположенных во всех странах мира. Это и научные работы, и брачные объявления, прогноз погоды и свежие новости, всемирный чат и онлайновые игры. Каждый найдет себе информацию, отвечающую даже самому требовательному посетителю сети. И почти у каждого пользователя Internet-а возникает желание поделиться со всеми той информацией, которой он обладает. Самый простой способ это чат - страница, где пользователи общаются в реальном времени. Но невозможно постоянно находиться в ON-LINE и чат ограничивает число пользователей, поэтому напрашивается вопрос, а почему бы самому не сделать свой сайт и разместить в нем все, что хочется донести до широких масс. Размещение небольшого сайта на сервере провайдера бесплатно, а написание не требует профессиональных навыков в программировании. Целью данной работы не было создание серьезного учебного пособия по языку HTML, а всего лишь попытка доступным образом осветить основы написания простых страничек начинающими Web-дизайнерами. Единственное условие, это то, что требуется запомнить большое количество команд, хотя при желании их можно записать в отдельный файл и пользоваться им как справочником.

Для того чтобы начать создание простых и не очень Web-страниц необходимо установить на Вашем компьютере Броузер Internet Explorer или Netscape Navigator. Если это условие выполнено, то можно смело приступать к работе.

Прежде всего, необходимо научиться создавать HTML Document. Для этого достаточно одного правого клика мышки внутри папки, в которой Вы будете работать. В контекстном меню выберите Создать- Microsoft HTML Document. После этого произведется загрузка Броузера, в котором Вы увидите чистый лист нового HTML Document. Правым кликом в поле броузера вызовите контекстное меню и выберите просмотр в виде HTML. После этого откроется окно блокнота, в котором Вам и предстоит создавать сайты и Web-документы.

При более глубоком знании языка HTML Вы можете работать в любом текстовом редакторе как в DOS-овском, так и в ОС Windows. Только в данном случае документы нужно будет сохранять с расширением *.htm (в DOS) *.html (в WINDOWS)

Вы можете посмотреть листинг любой страницы правым кликом в поле броузера просмотр в виде HTML и прочитать источник документа

Структура HTML документа

Любой HTML-документ состоит из команд и авторского текста

Тэг-команда языка HTML.

Тэгов очень много и довольно трудно все запомнить, поэтому в данном учебнике будут приведены примеры большинства тэгов и их использование при работе с HTML

Самая простая страничка состоит из трех тэгов. Начнем их изучение

начальный и конечный тэги документа на языке HTML. Только при их наличии Броузер начинает загрузку документа

Замечание: некоторые тэги парные (контейнерные), как, например . При этом первый из них называется открывающим, а второй – закрывающим.

начальный и конечный тэги "тела" документа. Между ними пишется авторский текст и другие тэги.

начальный и конечный тэги заголовка Web-страницы, помещающийся в заголовке окна броузера. (в принципе он необязателен)

Ниже приведен листинг простейшей страницы


Пример:

Заголовок

<body>

"авторский текст"

body>

HTML>

Форматирование текста

Для форматирования текста служат следующие тэги. Текст, который Вы хотите отформатировать должен находиться между тэгами, изменяющими текст. Т.е <тэг> текст тэг>


- полужирный

- наклонный

- подчеркнутый

- зачеркнутый

<sub> sub>- нижний индекс

<sup> sup>- верхний индекс

<br>- переход на другую строку

<p> p>- начало и конец абзаца

Кроме этого можно оперировать тэгами заголовков

- заголовок 1-го уровня

- заголовок 2-го уровня

- заголовок 3-го уровня

- заголовок 4-го уровня

- заголовок 5-го уровня

- заголовок 6-го уровня

И, наконец, можно вручную задавать параметры текста при помощи тэга

- определяет тип, размер и цвет шрифта параметры задаются с помощью атрибутов

size="абсолютный размер шрифта" (от 1 до 7) face="имя шрифта" (например Arial, Tahoma)

Категории шрифтов Гарнитуры

* Serif - Times, Century Schoolbook, Garamond

* Sans-serif - Helvetica, Arial, Verdana

* Monospaced - Courier, Courier New

* Script - Nuptial script, Buolevard, Signature

* Decorative - Whimsy, Arriba!, Bergell

color="цвет" (например red, blue подробнее о цветах в "Кодировании цветов")


Пример:

<Title> Форматирование текста Title>

<body>

<h1> заголовок 1-го уровня h1>

<h2> заголовок 2-го уровня h2>

<h3> заголовок 3-го уровня h3>

<h4> заголовок 4-го уровня h4>

<h5> заголовок 5-го уровня h5>

<h6> заголовок 6-го уровня h6>

"авторский текст"

<b> полужирный b>

курсив

<u> подчеркнутый u>

<b> <i> <u> полужирный подчеркнутый курсив u> i> b>

<s> зачеркнутый s>

Х<sub> нижний индекс sub>

Х<sup> верхний индекс sup>

< font face="arial" size=5 color="red" > шрифт №5 arial красного цвета

< font face="tahoma" size=7 color="gold" > шрифт №7 tahoma золотого цвета

body>

HTML>


Здесь приведена иллюстрация того, что появиться на вашем экране

заголовок 1-го уровня

заголовок 2-го уровня

заголовок 3-го уровня

заголовок 4-го уровня

заголовок 5-го уровня
заголовок 6-го уровня

"авторский текст"

полужирный

курсив

подчеркнутый

полужирный подчеркнутый курсив

зачеркнутый

Х нижний индекс

Х верхний индекс

шрифт №5 arial красного цвета

шрифт №7 tahoma золотого цвета

Кодирование символов


С проблемой кодирования символов впервые столкнулся при написании данной книжки. В самом деле, некоторые символы воспринимаются броузером как элементы тэгов или их атрибутов. С данной проблемой справляются несколько громоздким, но все - таки единственным способом.

Замечание: перед числовым кодом добавляется комбинация символов .

А перед мнемоническим символ &


Пример:

© - дает символ ©

® - дает символ ®


Ниже приведена таблица кодирования символов.


Использование цифровых и мнемонических кодов спецсимволов.

числовой

код

мнемонический

код

название

символ

34

quot

прямая кавычка

"

38

amp

амперсант

&

60

lt

знак "меньше"

<

62

dt

знак "больше"

>

153

trade

торговая марка

160

nbsp

неразрывный пробел

 

162

cent

цент

¢

163

pound

фунт

£

164

curren

знак валюты

¤

165

yen

йена

¥

166

brvbar

вертикальная черта

¦

167

sect

параграф

§

169

copy

копирайт

©

171

laquo

левая типографская кавычка

«

172

not

знак отрицания

¬

174

reg

знак "зарегистрировано"

®

176

deg

знак градуса

°

177

plusmn

знак "плюс минус"

±

178

sup2

степень 2

²

179

sup3

степень 3

³

181

micro

знак "микро"

µ

182

para

знак абзаца

183

middot

точка-маркер

·

185

sup1

степень 1

¹

187

raquo

правая типографская кавычка

»

188

frac14

одна четвертая

¼

189

frac12

одна вторая

½

215

times

знак умножения

×

247

divide

знак деления

÷



Кодирование цветов


Цвета в HTML задаются с помощью атрибута color="имя или код цвета"

Имена и коды основных цветов будут представлены ниже


таблица кодирование цветов

русское название

английское название

RGB-код

цвет

аквамарин

aqua

#00FFFF


белый

white

#FFFFFF


желтый

yellow

#FFFF00


зеленый

green

#008000


золотой

gold

#FFD700


индиго

indigo

#4B0080


каштановый

maroon

#800000


красный

red

#FF0000


оливковый

olive

#808000


оранжевый

orange

#FFA500


пурпурный

purple

#800080


светло-зеленый

lime

#00FF00


серебристый

silver

#C0C0C0


серый

gray

#808080


сизый

teal

#008080


синий

blue

#0000FF


ультрамарин

navy

#000080


фиолетовый

violet

#EE80EE


фуксиновый

fuchsia

#FF00FF


черный

black

#000000



Задание фона страницы


Для оформления страницы просто необходимо уметь пользоваться данной командой. Для этого достаточно в тэге добавить bgcolor="имя цвета" Если же в качестве фона задается рисунок, то используется команда background="имя файла"


Пример:

команда первой страницы, где 1.jpg- графический файл, расположенный в том же каталоге, что и Ваш HTML-документ. Если файл находиться в другом месте, то необходимо задать путь к файлу (C:\My pic\1.jpg)

Разделительные линии


Разделительные линии один из самых простых в использовании графических объектов

- тэг разделительной линии

Как и другие объекты HTML задаются атрибутами

size -толщина в пикселях

width -ширина в пикселях

color -цвет линии

align -способ выравнивания

center, right или left


Пример:

Это просто линия без атрибутов

Это линия толщиной 5

Это линия толщиной 10 и шириной 100 желтого цвета

hello_html_m5bb50471.gif

Это просто линия без атрибутов

hello_html_40518ae.gif

Это линия толщиной 5

hello_html_4cf2eb44.gif

Это линия толщиной 10 и шириной 100 желтого цвета


Бегущая строка


Бегущая строка - часто употребляемый в HTML элемент, который может привлечь внимание посетителя страницы

-тэг бегущей строки

как и другие тэги обладает атрибутами

width -ширина поля бегущей строки в пикселях

heugth -высота поля бегущей строки в пикселях

hspace, vspace -интервалы по горизонтали и вертикали между текстом бегущей строки и ее полем

align -положение текста бегущей строки или выравнивание (принимает значения top -вверху bottom -внизу middle -посередине)

direction -направление движения бегущей строки (принимает значения left -слева направо right -справа налево)

behavior -характер движения (принимает значения: scroll -появляется с одного края и скрывается за другим, slide -вытягивается из одного края и останавливается у другого, alternate -переменное движение от одного края к другому)

loop -количество повторений ( infinity -бесконечность)

scrollamount -длина прыжка текста за один такт

scrolldelay -величина паузы между тактами перемещения (в мс)

bgcolor -цвет поля бегущей строки


Пример:

Внимание: тэги font и marquee -парные и должны быть закрыты аналогичными с символом.

Создание ссылок


Ссылки на другие документы позволяют перемещаться по файловой системе переходить к другим документам и графическим объектам, кроме этого запускать программы, и наконец перемещаться по сайтам WWW посредством гиперссылок

- тэг ссылки на другие файлы и документы. Здесь необходимо указать имя файла на который идет ссылка. При зтом текст ссылки будет выделен и подчеркнут. Цвет ссылки задается своими атрибутами

linc="цвет_ссылки" -задает цвет ссылки

vlinc="цвет_ссылки" -задает цвет ссылки после её посещения


Пример:

-ссылка на первую страницу

-ссылка на первую страницу

-ссылка на рисунок

-ссылка на рисунок


Кроме этого можно делать графические ссылки

Пример:

1.jpg - графическая ссылка на первую страницу

hello_html_1900fcd.jpg- графическая ссылка на первую страницу


Можно делать графические ссылки без рамки


Пример:

1.gif - графическая ссылка на первую страницу без рамки

hello_html_cf039ed.png- графическая ссылка на первую страницу без рамки


Добавление рисунка


Добавление в HTML- документ рисунка используется во многих сайтах и на сегодняшний день трудно представить себе Web- страницу без графических объектов. При добавлении графики в страницу не забудьте о том, что графические файлы гораздо больше по размерам , чем графические. Поэтому старайтесь выбирать файлы небольшие по размеру (лучше всего использовать файлы с расширениями gif или jpg). О том, как работать с графикой мы рассмотрим несколько позже.

_файла- тэг вставляющий в документ графический файл. Файл, содержащий рисунок должен находиться в том же каталоге, что и Ваш HTML- документ


Пример:

2.gif -Вставляет в документ файл 2.gif


Тэг img может иметь атрибуты устанавливающие размеры рисунка

WIDTH -задает ширину рисунка

HEIGHT -задает высоту рисунка и его выравнивание относительно страницы броузера

align- принимает значения

left- по левому краю

right- по правому краю

center- по центру


Пример:

2.gif -Вставляет в документ файл 2.gif с размерами 120Х150 пикселей выровненный по центру

Ниже приведен пример совместного использования текста и графики Данный текст обтекает рисунок справа и оба объекта не конфликтуют друг с другом. Данная операция осуществляется командой:

2.gif


Маркированный список


Списки используются в документах для получения более удобочитаемой формы текста. Существует несколько разновидностей списков

- ненумерованный список


Пример:

пункт 1

пункт 2

пункт 3

на экране получим

  • пункт 1

  • пункт 2

  • пункт 3


Можно изменить форму маркера следующим тэгом

Типы маркеров

disc –диск

circle –окружность

squareквадрат

-диск

-окружность

-квадрат

диск

окружность

квадрат


- нумерованный список

Структура нумерованного списка похожа на предыдущую


Пример:

пункт 1

пункт 2

пункт 3

на экране получим

  1. пункт 1

  2. пункт 2

  3. пункт 3


атрибут type принимает значения

Значения атрибута Type

атрибут

вид нумерации

type="1"

1, 2, 3, 4...

type="i"

i, ii, iii, iv...

type="I"

I, II, III, IV...

type="a"

a, b, c, d...

type="A"

A, B, C, D...


- многоуровневый список


Пример:

пункт 1

пункт 1.1

пункт 2

пункт 2.1

пункт 2.2

пункт 3

на экране получим

пункт 1

пункт 1.1

пункт 1.2

пункт 2

пункт 2.1

пункт 2.2

пункт 2.3

пункт 3


Создание таблиц


Таблицы наиболее удобная форма представления информации, которая позволяет наглядно разместить массивы данных и дает возможность дальнейшей их обработки


-тэги описания таблицы

border -атрибут таблицы, задаюший толщину границы

-тэги названия таблицы

align -атрибут выравнивания названия границы

-тэги заголовков столбцов таблицы

-тэги строк таблицы

-тэги столбцов таблицы


Пример:

меню на 1.01.02

наименование выход цена

суп - харчо 300г 2-80

пельмени 250г 2-10

салат овощной 150г 0-50

чай 200г 0-25

table>


Фреймы


Фрейм- раздел или окно размещенное в окне броузера. В каждом фрейме отображается свой HTML- документ. Иными словами, окно можно разбить на несколько разделов, которые называются Фреймами.

При использовании фреймов используется несколько HTML- файлов. Один из них называется Установочным. В нем описывается расположение (раскладка) фреймов в окне броузера и назначаются исходные HTML- файлы для каждого из фреймов, но нет собственного текста и графики. Исходные HTML- файлы выводятся во фреймы и могут содержать тексты, графику, ссылки и пр.

Установочный HTML- файл, как и любой другой начинается с тэга и заканчивается тэгом

- Тэг разделения окна на несколько фреймов. Задается атрибутами

cols- задает разделение на два вертикальных фрейма (в %)

rows- задает разделение на два горизонтальных фрейма (в %)

border="ширина_полосы" - определяет ширину разделительной полосы в пикселях

bordercolor="цвет_полосы" - определяет цвет разделительной полосы

"> "> scrolling - определяет будут ли присутствовать о окне фрейма полосы прокрутки; если прокрутка нужна задается аргумент YES, иначе NO.

noresize - запрещает пользователю изменять размеры окна


Пример:

тело фрейма

body>

noframe>

html>


Данный документ представляет собой установочный HTML - файл. Теперь нужно создать два исходных HTML - файла.


Первый файл - 1.html

1

<hi>Первый фреймh3><hr>

В данном элементе обычно находится содержание или список доступных элементов

<li> Глава 1

<li> Глава 2

<li> Глава 3

<li> Глава 4

<li> Глава 5

<li> Глава 6

<li> Глава 7

body>

HTML>


Второй файл - 2.html

2

<hi>Второй фреймh3><hr>

В данном элементе обычно находится основной текст страницы

body>

HTML>


Пример страницы с фреймами



hello_html_d6c90d0.gif

Стили


Здесь предложены примеры стилей рассмотренных ниже


Данный элемент позволяет создавать текст с различным начертанием (стилем), и затем в ходе выполнения программы задавать созданный стиль различным элементам текста

- тэг стилей. Вставляется поcле тэга HEAD


Применение тэга STYLE

тэг {свойство1:значение1;свойство2:значение2;...свойствоN:значениеN;}


Пример:

h1 {font-size :48pt; color:red}

h2 {font-size :20pt; color:blue}

<style>

head>

<body>

<h1> Это стиль 1 красного цвета h1> ( см. Заголовок №1)

Это стиль 2 синего цвета

( см. Заголовок №2)

Кроме этого мы можем создавать стили самостоятельно, составляя библиотеку стилей и затем по мере надобности вызывать необходимый нам в данный момент стиль. При этом за стилем необходимо закрепить имя. Это имя задается как обычное имя, но сточкой в качестве первого символа.

- тэг обращения к стилю.


Пример:

.mystyle {font-size :32pt; color:gold; font-family:tahoma}

мой стиль

body>

3d- эффект

Применение тэга STYLE при создении 3d- эффекта


Листинг стиля 3d- Эффект

p {font-family: "sans-serif";font-size:96pt;color:red}

p.highlight {color:silver}

p.shadow {color:black}

3d-

эффект

3d-

эффект

<p>3d- эффектp> div>

Cтатические фильтры


Фильтры используются для изменения внешнего вида графики и текста на странице. С помощью фильтров можно отражать тексты и графику. Фильтры задаются как свойство в табдице стилей используя запись вида

filter: имя_фильтра

перечислим несколько видов фильтров

blur- создает эффект размытости

fliph- горизонтальное отражение картинки или текста

flipv- вертикальное отражение картинки или текста

wave- эффект волны

xray- только контур объекта

Позиционный текст


Для размещения текста в произвольном месте экрана используют "Позиционный текст". Кстати это применимо и к графическим объектам, но об этом позже. Для позиционирования элементов необходимо внутри тэг Задать требуемый стиль. Например

p {font-family: "sans-serif";font-size:32pt;color:red} Затем в теле вызовем этот стиль с параметрами

Учебник HTML

div>

Где:

position:absolute - указание на позиционный текст. Элемент помещается в верхний левый угол окна

""> ""> wight:1000 - ширина текста

height:200 - высота текста

marigin:";">

Всплывающие подсказки


Для ввода элемента "Всплывающая подсказка" пользуются атрибутом Title (не путать с заголовком окна). Этот атрибут вставляют перед текстом, которому требуется подсказка или внутри тэга добавления рисунка


Пример:


Всплывающие подсказки

<h3>Всплывающие подсказкиh3>

<img src="1.gif" title="Это мой компьютер"> -Рисунок снабжен подсказкой <h4 align=center>

Этот текст снабжен подсказкой

<b title="подсказка к этому тексту"><font color="red"> текст b>h4>font> center>

body>

HTML>

hello_html_cf039ed.png-Рисунок снабжен подсказкой

Этот текст снабжен подсказкой

текст

Переключатели и флажки


Страница с переключателями и флажками

<h3>Страница с переключателями и флажкамиh3>

<ul>

<input type="radio" name="click" value="Переключатель №1" checked> Переключатель №1

<input type="radio" name="click" value="Переключатель №2" >Переключатель №2

<input type="radio" name="click" value="Переключатель №3" >Переключатель №3

hello_html_m61d364c1.gifПереключатель №1

hello_html_m69f49ff1.gifПереключатель №2

hello_html_m69f49ff1.gifПереключатель №3

Флажок №1

Флажок №2

Флажок №3

hello_html_6cb9d089.gifФлажок №1

hello_html_6cb9d089.gifФлажок №2

hello_html_6cb9d089.gifФлажок №3


Ниспадающее меню


Ниспадающее меню - элемент HTML-документа позволяющий осуществлять переход к другому документу без помощи ссылок. Этот тэг позволяет экономить место в окне броузера вставляя в нужное место страницы компактный и удобный в обращении элемент

Для добавления этого элемента используется тэг

FORM который с помощью тэгов SELECT и OPTION выделяет и осуществляет переход к выбранной странице. Страница- это отдельный HTML файл


Пример


< FORM >

< FONT size=1 style="COLOR: #1a1a1a; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px" >

< SELECT name=map onchange="if (this.options[this.selectedIndex].value == '') this.selectedIndex=0; else window.open(this.options[this.selectedIndex].value,'_top')" size=1 >

< OPTION selected value="" > Выберите страницу!

< /OPTION >

< OPTION value=23_1.html > page1

< /OPTION >

< OPTION value=23_2.html > page2

< /OPTION >

< OPTION value=23_3.html > page3

< /OPTION >

< OPTION value=23_4.html > page4

< /OPTION >

< OPTION value=23_5.html > page5

< /OPTION >

< OPTION value=23_6.html > page6

< /OPTION >

< /SELECT >

< /FONT >

< /FORM >

Данная программа выводит на экран окно с ниспадающим меню содержащим ряд пунктов. При выборе одного из пунктов открывается соответствующая страница

Начало формы

Конец формы

Окна сообщений


Для создания окон сообщений используются скрипты написанные на языке программирования javascript. Для зтого необходимо в тэге head сделать запись

Данная запись открывает возможность оперировать тремя видами окон:

alert- сигнальное окно alert("текст_в_окне")

alert ("Пример окна сообщения")


hello_html_m6a9e04c5.png


confirm- окно с кнопками OK и Cansel confirm("текст_в_окне")

confirm ("Вы хотите закончить работу")


hello_html_m11511aea.png


prompt- окно сообщения с текстовым полем prompt("текст_в_окне", "") prompt ("Введите ваше имя","")


hello_html_m6da4a592.png


После объявления окон необходимо закрыть

Примеры окон представлены при загрузке данной страницы



Самые низкие цены на курсы переподготовки

Специально для учителей, воспитателей и других работников системы образования действуют 50% скидки при обучении на курсах профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 27 сентября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

Общая информация

Номер материала: ДA-053717

Похожие материалы

2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации. Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии.

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Законы экологии», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

Конкурс "Законы экологии"