Форматирование документов

Воображаемые уроки с вымышленными учениками

Цели

  1. Основная. Абзац основная семантическая единица и текста и документа.
  2. Образовательная. Формирование предметного тезауруса и логического стиля мышления.
  3. Деятельностная. Семантическое форматирование документа.

Задачи

  1. Сформировать понятие структуры документа.
  2. Сформировать понятие роли абзацев как основа форматирования документа.
  3. Сформулировать правила форматирования документов.
  4. Познакомить с назначением блочных элементов и особенностями их применения.
  5. Приступить к созданию индивидуальных и коллективного справочника
    «Блочные элементы HTML».

Инструменты

  1. Текстовый редактор с подсветкой синтаксиса по выбору.
    • Akelpad с настройками Объединения ЛиК
    • PSPED
  2. Браузер для разработки (предпочтительно Firefox Developer Edition) и пара из других групп для тестирования создаваемого документа HTML.
    • Группа браузеров от Mozilla:
      Firefox Developer Edition Для выбора особой установки воспользуйтесь ссылкой «Firefox для других платформ и языков» в нижней части страницы.
      или Firefox.
    • Группа браузеров на ядре Chromium:
      Яндекс.Браузер. Предпочтителен по многим причинам, одна из основных — его создали русские для русских на базе браузера Opera;
      Crome, Opera, Amigo, Нихром и им подобные.
    • Группа браузеров от Microsoft:
      IE версия 9 (входит в состав ОС Windows 7 — без обновлений не знает о новых возможностях CSS3);
      IE версия 11 (входит в состав ОС Windows 7 — предпочтителен, так как оснащён полноценным эмулятором предыдущих версий);
      Edge встроен в систему Windows 10.

Материалы

  1. Учебник Web-конструирование 2.
    • Тема 1. > 02. Структура HTML-кода. > Блочные и строчные элементы.
    • Тема 1. > 02 Структура HTML-кода. > Стиль записи кода программы.
    • Тема 1. > 03. Как работает браузер.
    • Тема 1. > 04. Улучшенная HTML-страничка.
    • Тема 1. > 09. Кодирование списков.
    • Тема 1. > 10. Стиль записи кода.
    • Тема 1. > 11. Тестирование и отладка.

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

Управлять внешним видом строчных элементов вы уже научились. И умеете даже вставлять в текст символы юникода. Но это мы проверим позже. А сейчас перед нами стоит задача понять, что такое абзацы, для чего и как ими управлять.

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

Презентация Форматирование в формате PDF. Её можно запускать и по интернету на всех компьютерах при условии, что школьный сервер правильно настроен на массовый выход в интернет. Предпочтительнее же запускать на большом экране или локально у каждого ученика на рабочем месте.

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

Теперь вы знаете, как правильно приступать к форматированию документа. Но документы HTML форматировать будет браузер. Мы должны только разметить правильно его код.

Ответ. Для правильного форматирования документа нужно:

  1. Прочесть текст документа.
  2. Определить роли абзацев, построив структуру документа мысленно или на бумаге (зависит от сложности и объёма документа).
  3. Для каждой роли определить элемент и разметить документ.

Разметка абзацев

Теперь вы уже знаете, что и абзацы имеют свои семантические роли, и что для них есть элементы HTML с аналогичными ролями. Осталось попрактиковаться. Но чтобы двигаться дальше вы должны быть уверены в своих умениях размечать строчные элементы и вставлять символы юникода в текст.

Стихи Винни Пуха. Винни Пух и все, все, все. Алан Милн. Перевод Бориса Заходера. http://sheba.spb.ru/libra/miln_puh.htm


Загадочный шум

Опять ничего не могу я понять.
Опилки мои -- в беспорядке.
Везде и повсюду, опять и опять
Меня окружают загадки.

Возьмём это самое слово Опять.
Зачем мы его произносим,
Когда мы свободно могли бы сказать
«Ошесть», и «Осемь», и «Овосемь»?

Молчит этажерка, молчит и тахта --
У них не добьёшься ответа,
Зачем эта хта -- обязательно ТА.
А жерка, как правило, ЭТА!

«Собака кусается»… Что ж, не беда.
Загадочно то, что собака,
Хотя и кусаетСЯ, но никогда
Себя не кусает, однако…

О, если бы мог я всё это понять.
Опилки пришли бы в порядок!
А то мне -- загадочно! -- хочется спать
От всех этих Трудных Загадок!



Стишок по пути к мосту

Не странно ли, что Волки
Не могут жить на ёлке?

Живут на ёлках Белки --
Хоть ёлки и не елки!

Интересный казус произошёл со вторым стишком. В печатном издании и в большом количестве копий в интернете буква Ё в тексте никак не обозначена. А на этом сайте букву Ё расставили везде, где она используется в речи. А две последние строчки там записаны так:

Живут на ёлках Белки --
Хоть ёлки и не ёлки!

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

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

  1. Создать копию шаблона из папки tamplate в папке test.
  2. Переименовать копию шаблона, например, в winnie.htm
  3. Скопировать текст в файл.
  4. При разметке стихов четверостишье считается абзацем.
  5. В конце каждой из первых трёх строк четверостишья нужно добавить разрыв строки.
  6. В тексте найти и выделить некоторые фрагменты, которые, по вашему мнению, сделают содержание стихов выразительнее.

Может быть понадобится сначала обсудить план выполнения работы, а затем отпустить учеников в свободный «полёт».

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

Если разметка учениками будет выполнена по опыту предыдущей работы, то в первом абзаце Заголовок первого уровня вместе с названием документа окажутся и ссылка, и авторы. Нужно оценить полученный заголовок и решить, что в нём должно остаться только первое предложение, так как только у него роль — заголовок.

Но остальные предложения окажутся между абзацами заголовок и обычный. Отсавлять их без своего абзаца — это неравильно и их тоже нужно поместить в подходящий по роли. Это элемент ADDRESS. Роль этого элемента — содержать в себе любые сведения, которые прямо указывают на место и время создания (в данном случае) документа, на авторов, их контактные данные (при наличии) и т. п. и т.п.

Далее обязательно обратить внимание на то, что заголовок у нас не один, а есть ещё два. Поэтому, если первый заголовок поместили в элемент H1, а второй в H2, то в какой будем помещать третий заголовок… ? Здесь стоит обсудить, что цифры в названии заголовка означают уровень вложенности или подчинённости.

Разметка сложного документа

Для практических занятий поработайте волшебниками. В файле literacy.zip запакован файл с небольшим текстом, который вам нужно превратить в отформатированный документ HTML. Скачайте архив, распакуйте его и откройте одноимённый файл с документом. Оцените документ, его текст и его внешний вид.

В папке test по шаблону light.htm создайте файл по имени literacy.htm.

  1. Откройте файл literacy.htm в редакторе.
  2. Поместите в него текст из файла literacy.rtf.
  3. В TITLE запишите название документа.
  4. Cохранте изменённый код.
  5. И откройте файл literacy.htm в браузере.
  6. Измените размеры окна редактора и браузера так, чтобы каждое занимало половину экрана. Разместите окно редактора слева, а браузера — справа. Зкройте все остальные окна и переключаться из окна редактора в окно браузера будет удобно клавиатурным аккордом Ctrl + Tab.

Теперь документ полностью подготовлен к разметке.

Разверните окно браузера на веcь экран или измените его размеры. Почему это происходит... (Браузер любое количество пробельных символов и концы абзацев превращает в один пробел)? Для того, чтобы он пниял где начинается и заканчивается абзац, вы должны явно указать тегами элемента P?

Что нужно сделать перед форматированием документа… (прочесть текст, определить роли абзацев и построить структуру документа)? Этим и займёмся.

Весь процесс построения семантической структуры документа и структуры кода должен фиксироваться на доске. Стоит обращать внимание на соблюдение структурных отступов (2 пробела).

В нашем документе размещена Статья. Запишем это, соблюдая структурный отсуп.

··Документ
····Статья

Статья всегда имеет… ( Заголвок ) и первый абзац как раз подходит на эту роль. Но заголовок находится внутри Статьи — тоже добавляем структурный отступ.

··Документ
····Статья
······Заголовок

Следующий абзац — высказывание какого-то ученика. Чужой текст называется… ( цитата )? Добавляем к нашей структуре документа абзац с ролью Цитата. Она находится на одном уровне с Заголовком, поэтому структурные отсупы нужно только соблюсти.

··Документ
····Статья
······Заголовок
······Цитата

После неё три обычных абзаца с повествованием. Их роль — Простой текст.

··Документ
····Статья
······Заголовок
······Цитата
······Простой текст
······Простой текст
······Простой текст

Следующими абзацами идут рисунок с ролю Изображение и подпись под ним — Простой текст. Следом ещё один абзац с ролью Простой текст. Так и запишем.

··Документ
····Статья
······Заголовок
······Блочная цитата
······Простой текст
······Простой текст
······Простой текст
······Изображение
······Простой текст
······Простой текст

Далее идут шесть абзацев, по смыслу схожих друг с другом, но отличных от обычных. Они похожи на перечисление. Но перечисление чего… (первый, третий и пятый определяют действия: «нахождение», «интерпретация», «рефлексия»)? Но есть ещё три абзаца с объяснением этих определений. То есть, мы имеем нечто похожее на словарь с терминами и их толкованием.

Так и запишем: одному абзацу роль Определение термина, а следующему — Описание термина. Причём запишем три раза и добавим последний абзац — Простой текст.

··Документ
····Статья
······Заголовок
······Блочная цитата
······Простой текст
······Простой текст
······Простой текст
······Изображение
······Простой текст
······Простой текст
······Определение термина
······Описание термина
······Определение термина
······Описание термина
······Определение термина
······Описание термина
······Простой текст

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

Вынуждайте ребят подбирать элементы самостоятельно.

Пусть пользуются электронными переводчиками, справочниками и личным в том числе. Можно стимулировать завершение работы над справочником: те кто его писал сам, а не просто «копипастил» (copy+paste — скопировать+вставить), быстрее смогут выполнить работу. Им не нужно рыться в справочниках. Знания нужно носить в голове, а не в портфеле (АБ).

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

Привычные элементы P (роль Простой текст) не вызовут сложностей. А вот высказывание какого-то ученика… Чужой текст в отдельном абзаце называется… (блочная цитата). Элемент — … (BLOCK QUOTE — BLOCKQUOTE)

Составные элементы

FIGURE

Особое внимание нужно обратить на элемент Изображение. Он не текстовый и просто так его в текстовый документ вставить невозможно. Вместо него можно вставить гиперссылку на файл с изображением, которая добавит это изображение в документ HTML на экране. Элемент так и называется… (изображение — IMaGe — IMG).

Как правило к изображению, как и в нашем документе, добавляется его подпись. Но с этим сразу возникает две проблемы.

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

То же самое будет происходить с рисунками, фотографиями, видеороликами, аудиотреками с панелями управления… То есть, со всеми нетекстовыми объектами. Назовём их общим словом Фигура — изображения, контуры. Элемент с такой же ролью называется… ( FIGURE ).

Что может располагаться в этом элементе… (из справочника узнаём, что лишь IMG — гиперссылка на изображение, и некий FIGCAPTION — подпись под рисунком)? Но наша подпись — Простой абзац, и его нужно поместить в FIGCAPTION.

                               FIGURE
······Изображение              IMG
                                 FIGCAPTION
······Простой текст              P

Теперь в одном элементе FIGURE расположились и IMG с гиперссылкой, и FIGCAPTION с простым текстом P в нём. Теперь можно переместить FIGURE куда угодно. И изображение, и подпись будут следовать друг за другом. А так как абзац с подписью теперь находится на другом уровне структуры, браузеры не станут путать его с остальными абзацами. Обе проблемы оказались решены.

DL

Элемент, подходящий по смыслу к роли Списокlist ) Определенийdefinition ) терминов… (Definition List — DL). Опять идём в справочник. Внутри DL могут содержаться… ( Definition Term DT — определение термина, и Definition Description DD — описание термина. Никакого текста и никаких других элементов в нём быть не может )?

Вот теперь, ориентируясь на семантическую структуру документа, мы сумели создать семантическую структуру элементов HTML.

··Документ                 BODY
····Статья                 ··ARTICLE
······Заголовок            ····H1
······Блочная цитата       ····BLOCKQUOTE
······Простой текст        ····P
······Простой текст        ····P
······Простой текст        ····P
                             ····FIGURE    
······Изображение          ······IMG
                             ······FIGCAPTION
······Простой текст        ········P
······Простой текст        ····P
                             ····DL
······Определение термина  ······DT
······Описание термина     ······DD
······Определение термина  ······DT
······Описание термина     ······DD
······Определение термина  ······DT
······Описание термина     ······DD
······Простой текст        ····P

Теперь у вас есть готовая структура элементов HTML для данного документа. Давайте начнём размечать код вместе, а завершите работу самостоятельно.

Ученики должны знать, что структуру формируют только блочные элементы.

Фрагменты текста и содержащиеся в них строчные элементы записываются от начала строки без соблюдения структурных отступов. Они, как правило, очень длинные, и поэтому при ограничении ширины строки в 80 символов встраивание их в структуру создаёт неудобство для поиска ошибок и редактирования кода.

Начнём разметку. Первым элементом в BODY добавим ARTICLE соблюдая структурные отступы. В него — H1, в который и поместим текст заголовка.

Перемещение абзацев
Клавиатурные аккорды

Быстро выделить текстовый абзац можно с клавиатуры. Поставьте точку ввода (текстовый курсор) в начало первой строки абзаца, а затем с нажатой клавишей Shift, нажимая Down Arrowстрелка вниз ), переместите курсор в начало следующего абзаца. Таким образом выделится не только весь текст, но и символ конца абзаца.

Рефлексия и оценка¶
Понять и осмыслить сложный текст,
оценить представленную информацию,
сформулировать на её основе гипотезу
и выводы и т.п.
│В качестве заданий испытуемым предлагаются…

Далее клавиатурным аккордом Ctrl + X вырежьте текстовый абзац в буфер обмена. Поставьте точку ввода в начало строки с закрывающим тегом и аккордом Ctrl + V вставьте вырезанный текст.

 ··BODY
 ····ARTICLE
 ······H1···/H1
 ······P

Это самый простой и оптимальный способ перемещать абзацы. Дело в том, что когда вы редактируете документ, обе ваши руки лежат на клавиатуре. Нажать комбинацию клавиш на много быстрее, чем разыскивать мышку на столе, искать курсор на экране и прицеливаться и т. п. Результат не заставит себя ждать.

 ··BODY
 ····ARTICLE
 ······H1
 Понять и осмыслить сложный текст,
 оценить представленную информацию,
 сформулировать на её основе гипотезу
 и выводы и т.п.
│······/H1
 ······P
Перемещение мышью

Первый приём выделения (не работает в Блокноте). Выполните тройной щелчок в любом слове абзаца (в OpenOffice — четверной). Весь текст абзаца выделится вместе с концом абзаца.

Второй приём выделения. Наведите указатель (курсор мыши) на поле слева от первой строки абзаца. Внешний вид указателя изменится на стрелку, направленную вправо на строку ➚. Зажмите главную кнопку мыши и протяните мышь вниз до последней строки абзаца. Теперь его можно вырезать.

Третий приём выделения. Подведите указатель к левому краю первой буквы абзаца. Указатель станет похож на текстовый курсор. Зажмите главную кнопку мыши и протяните мышь строго вниз до начала следующего абзаца. Перемещать мышь вправо нельзя, так как в выделение не попадёт символ конца абзаца. Вырежте выделнный абзац.

Далее при вставке абзаца следите, чтобы точка ввода находилась в начале строки с закрывающим тегом.

Разметка FIGURE

C обычными P и BLOCKQUOTE ученики справятся самостоятельно.

Но FIGURE не так прост. Во-первых, он блочный, записывать его будем… (с соблюдением структурных отступов).

В него поместим IMG (пока атрибутами заполнять не надо).

Вопрос. Можем ли мы изображение вставить в текстовый файл… (нет…)?
Вопрос. Внутри IMG будет что-нибудь размещаться… (нечего размещать)?

Но позже мы будем добавлять атрибуты.

Вопрос. Где записывают атрибуты… (не в элементе, а в его открывающем теге)?
Вопрос. Раз в IMG ничего не будет, то сколько тегов понадобится для его записи… (тольк открывающий, закрывающий тег ему не нужен)?

А сам элемент будет считаться строчным.

Вопрос. Где мы его запишем, в каком месте… (в новой строке от левого края)?

Следом за ним поместим FIGCAPTION. Это элемент тоже строчный. А вот в нём P — блочный. Его запишем с учётом структурных отсупов. Получилось вот так.

······FIGURE
IMG
········FIGCAPTION
········/FIGCAPTION
······/FIGURE

Блочные элементы DL, DT и DD ученикам предложить разметить самостоятельно. Пример кода.

······DL
········DT
········/DT
········DD
········/DD
······/DL
Разметка строчных элементов

Абзацы готовы. Теперь вернёмся к самому началу и разметим строчные элементы.

В цитате в первом предложении заменить технические кавычки на традиционные русские ёлочки: « ( « — Left-pointing double Angle QUOtation mark — двойная угловая кавычка влево) и »( »Right-pointing double Angle QUOtation mark — двойная угловая кавычка вправо). Второе предложение — источник цитаты поместить в… ( CITE ).

В следующем абзаце 2 предложения. Как вы их охарактеризуете… (вопрос и ответ)? Причём ответ важнее вопроса. Нужно, чтобы читатель обратил внимание именно на него. Как бы вы хотели это оформить?

Цветом, например, красным — нельзя. Эту статью могут распечатывать. В офисах принтеры чаще всего с чёрной краской. Так как любой цвет светлее чёрного, то на бумаге такое выделение получится серым или светло-серым. Хотели привлечь внимание, а получилось наоборот — спрятали фрагмент среди ярких чёрных букв.

Давайте подбирать элемент. Нужно фразе добавить выразительности, акцент. И в русском и в английском языках есть греческое слово Эмфаза — показывать. А элемент с этим же смыслом будет называться… (EMphasis — EM). Поместим в него всё второе предложение.

Во втором абзаце есть расшифровка аббревиатуры и её перевод. Есть читатели, которые это уже знают. Поэтому нельзя засорять текст ненужными пояснениями. Но есть и другие. Хотелось бы для них этот текст оставить. А «если нельзя, но хочется, то можно», но не так как обычно.

Для аббревиатуры есть элемент со схожим названием… (ABBReviation — ABBR). Поместим в него аббревиатуру и добавим ему атрибут со знакомым именем title — титул, название. А значением этого атрибута вставим тот самый поясняющий текст.

Теперь поясняющей фразы в тексте не видно, но она есть. Если наведём указатель на аббревиатуру — то её увидим.

Вставка изображения из файла

Картинки на странице нет. Элемент IMG не знает, где находится файл-источник картинки. Для уточнения ему нужен атрибут… (источник — SouRCe — src), а в его значении запишем URL файла (Uniform Resource Locator — единообразный указатель ресурса; ранее назывался Universal — универсальный).

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

Если вы поедете в деревню, то подключение может быть медленным, а если за границу — то дорогим. Картинки имеют больший размер по сравнению с текстом. Поэтому в одном случае загрузка страницы с картинками будет очень медленной, а в другом — дорогой.

Для экономии времени и денег грамотный пользователь может в своём браузере отключить загрузку картинок. Вместо них в тексте будут отображаться пустые прямоугольники. Чтобы понять, о чём идёт речь в том или ином абзаце с отсутствующей картинкой, щелчком мыши можно загрузить только её.

Как читатель узнает, в каком прямоугольнике щёлкнуть для загрузки нужной картинки?

Надо добавить атрибут с альтернатива ным описанием отсутствующей картинки. Атрибут так и называется… (ALTernative — alt). В пустых прямоугольниках вместо картинок будет отображаться эта надпись и читатель сам будет решать, надо ли загружать картинку и какую.

Кроме альтернативной подписи и гиперссылки на изображение браузеру обязательно нужно уточнить его ширину и высоту. Это ещё два атрибута… (width и height). Иначе при их отсутствии и незагруженной картинке будет неизвестно, какого размера прямоугольник вывести вместо изображения. у этого изображения размер: 500×300 пикселей. В значении атрибутов достаточно указать только числа. Если единицы измерения не указаны, то это пикселы.

Справочник (второй сезон)

Предложить выполнение этой работы можно сразу после первого практического занятия с абзацами. На каждом уроке контролировать объём выполнения.

Заполнять таблицу можно на бумаге, в текстовых редакторах, текстовых или табличных процессорах, а если кто умеет, то в таблице документа HTML. В дальнейшем это будет личный справочник. Его можно будет использовать для знакомства с оформлением таблиц.

Стоит выделять некоторое время на занятиях или выделить отдельное занятие для обсуждения собранных данных. Кто-то не смог найти полное английское имя, у кого-то не получилось грамотное описание роли и т. п. Неудачи можно обсуждать коллегиально для поиска правильного ответа с двумя оговорками: рассматривать ошибку безотносительно к учащемуся, но обратить внимание на причину или причины этой и подобных ошибок.

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

Мы рассмотрели способы и приступили к разметке абзацев. Элементы для форматирования абзацев всегда начинаются с новой строки и занимают всю ширину от левого до правого края, образуя условный прямоугольный блок. Поэтому их называют блочными (англ.: block — блок).

В HTML 5 блочных элементов для форматирования абзацев всего 25. Все они имеют семантические роли и напрямую связаны с ролями текстовых фрагментов — абзацев и или их групп.

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

Задание. В описании стандарта HTML5 найти все блочные элементы для управления абзацами кроме устаревших-нерекомендуемых и запрещённых. Результат запишите в таблицу по образцу.

Таблица 2. Блочные элементы для форматирования и группировки абзацев
Имя элемента Полное имя Семантическая роль
английское русское
P paragraf абзац Формирование обычного абзаца.
H1 heading first rank заголовок первого уровня Главный заголовок страницы, как правило на стрнице он только один.
ADDRESS address адрес Предназначен для дополнительных сведений об объекте в родительском элементе: имя, название, реквизиты и т. п. Если родительский элемент BODY, то сведения о самом документе.
H2 heading second rank заголовок второго уровня Заголовок части документа (раздела) по структуре подчинённый заголовку первого уровня.

Для практики создайте документ HTML с несколькими (3-5) обычными абзацами. Абзацы, кроме крайних по очереди, можно размечать тегами очередного исследуемого блочного элемента. Задача: наблюдать, как веб-страница реагирует на изменение роли текстового фрагмента.

Для выполнения работы пользуйтесь ресурсами.

  1. Официальный сайт консорциума W3C раздел «4.3 Sections» и «4.4 Grouping content». Для тех, кто не боится английских текстов или умеет пользоваться переводчиками. Здесь можно узнать полное английское имя элемента.
  2. Справочник Влада Мержевича. Весьма полезный ресурс. Рекомендуется положить в закладки и заглядывать в него почаще.
  3. Переводчики: Яндекс, Промт (Промт перед работой настройте: Определить тематику Техника: Компьютеры), Гугл, Бинг.

А так же можете пользоваться имеющейся литературой и знакомыми ресурсами.

Выводы

Ведение урока

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