Дипломная работа "Методика преподавания основ Web-дизайна"
Автор: Джумалиева Алия Кабдуллаевна (учитель информатики, МКОУ "Нововасильевская ООШ")
Тип документа: Реферат. Аудитория: Учителя информатики. Дата публикации: 05.10.2015
Описание: В этой дипломной работе описывается методика преподавания основ Web-дизайна. Изучив  проблему обучения основам Web-дизайна в теории и практике, можно сделать вывод о том, что формирование знаний и умений, связанных с вопросами Web-дизайна должно  быть  достаточно длительным процессом, особенностью которого является постоянное обращение к ранее изученному материалу. Оптимальной формой организации  учебной деятельности школьников по освоению вопросов, связанных с оформлением сайтов может являться организация внеклассной работы в  форме кружка «Основы Web-дизайна», в котором участвуют учащиеся 7-9 классов.


                                                Джумалиева Алия Кабдуллаевна
                                                 МКОУ "Нововасильевская ООШ"
                                                         Учитель информатики


      Федеральное государственное бюджетное образовательное учреждение
                    высшего профессионального образования
                 «АСТРАХАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСТИТЕТ»
                      ИНСТИТУТ НЕПРЕРЫВНОГО ОБРАЗОВАНИЯ


                      ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
                   МЕТОДИКА ПРЕПОДАВАНИЯ ОСНОВ WEB-ДИЗАЙНА


                                                                   Выполнил:
                                                         слушатель программы
                                             профессиональной переподготовки
                                                               «Информатика»
                                                            Джумалиева А. К.
                                                       Научный руководитель:
                                                            доцент, к. т. н.
                                                               Харченко О.А.
                                 ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ    3
ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ОБУЧЕНИЯ WEB-ДИЗАЙНУ      5
  1.1. Место темы «Web-дизайн» в школьном курсе информатики  5
  1.2. Использование возможностей внеклассной работы для формирования знаний
  и умений, связанных с разработкой дизайна сайта 7
  1.3. HTML – язык разметки гипертекста      9
  1.4. Каскадные таблицы стилей   14
ГЛАВА 2. МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО ОБУЧЕНИЮ ОСНОВАМ WEB-ДИЗАЙНА 22
  2.1. Базовые элементы и элементы форматирования страницы языка HTML   22
    2.1.1. Расположение текста на web-странице и задание заголовка 22
    2.1.2. Структура текста 23
    2.1.3. Вид текста  24
    2.1.4. Выравнивание и отступы 26
    2.1.5. Фон страницы     27
  2.2. Работа с таблицами, списками, картинками и ссылками в HTML-документе
  29
    2.2.1. Оформление фона страницы с использованием картинки      29
    2.2.2. Использование списков  30
    2.2.3. Вставка картинки на web-страницу  33
    2.2.4. Использование таблиц   34
    2.2.5. Использование ссылок и закладок   36
  2.3. Дополнительные материалы для углубленной работы с языком HTML    42
    2.3.1. Объединение ячеек в таблице 42
    2.3.2. Работа с  бегущей строкой и разделительной линией 44
ЗАКЛЮЧЕНИЕ  47
ЛИТЕРАТУРА  49
ПРИЛОЖЕНИЕ 1     51
ПРИЛОЖЕНИЕ 2     52










                                  ВВЕДЕНИЕ
       Актуальность темы  дипломной  работы  связана  с  тем,  что  развитие
информационного  общества,  рост  использования  информационных  технологий,
существенно изменяют  характер  и  виды  профессиональной  деятельности.  На
основе применения средств ИКТ все большее значение  приобретает  способность
человека  грамотно  представлять  информацию  в  сети  Internet,   то   есть
представление информации с помощью Web-сайта.
        Красивый  внешний  вид  сайта  привлекает  и   удерживает   внимание
посетителей, а, как известно, дизайн  должен  обеспечить  гармонию  внешнего
облика и внутреннего содержания проектируемого объекта как  единого  целого.
Следовательно  возникает  необходимость  формирования  знаний  и  умений   у
подрастающего поколения в области web-дизайна.
       В связи с тем, что информатика является одной из быстро развивающихся
областей знаний, учебные программы для различных классов,  пытаясь  «идти  в
ногу со временем» не позволяют отводить на  изучение  какой-либо  конкретной
темы много часов, оставляя реализацию этой возможности только  в  профильных
курсах информатики.  Что  обуславливает  проблему,  связанную   с  важностью
изучения темы «Web-дизайн», и недостаточным  количеством  часов,  выделяемых
на её изучение в курсе информатики основной школы.
      Цель   исследования:   разработать   дидактические    материалы    для
преподавания   темы   «Web-дизайн»    в    школьном    курсе    информатики,
ориентированные на использование внеклассной работы по информатике .
      Исходя  из  цели  исследования,  были  поставлены  конкретные   задачи
исследования:
         • изучить и  проанализировать  состояние  исследуемой  проблемы  в
           учебной литературе;
         • на основе изучения и анализа литературы  выделить  теоретические
           основы  преподавания  темы   «Web-дизайн»   в   школьном   курсе
           информатики;
         •  выявить возможности совершенствования  методики  изучения  темы
           «Web-дизайн» в рамках внеклассной работы;
         • разработать методические рекомендации для проведения занятий  по
           теме «Web-дизайн»;
         • разработать  задания   по  теме  «Web-дизайн»  для  углубленного
           изучения.
      В соответствии с целями и задачами были определены  объект  и  предмет
исследования.
      Объект исследования – процесс обучения информатике в школе.
      Предмет   исследования   –   теоретические   и   методические   основы
преподавания темы «Web-дизайн».
      Для  решения  поставленных  задач  использовались   следующие   методы
исследования:
изучение и анализ учебно-методической литературы по проблеме исследования;
наблюдение;
анализ и синтез;
 метод обобщений;
апробация.
      Структура  исследовательской  работы  включает  введение,  две  главы,
заключение и литературу.
      Практическая значимость результатов исследования  заключается  в  том,
что  разработанные  методические  рекомендации  для  учителей,  тематическое
планирование   для   проведения   занятий   кружка   «Основы   Web-дизайна»,
разработанная система заданий могут быть  использованы  в  учебном  процессе
средней школы при изучении информатики, а  также  во  внеклассной  работе  и
проектной деятельности.

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ОБУЧЕНИЯ WEB-ДИЗАЙНУ


1.1. Место темы «Web-дизайн» в школьном курсе информатики


      Развитое информационное общество предполагает овладение  культурой  по
использованию  информационно-коммуникационных  технологий.  В  эту   область
входит и непосредственное создание веб- сайтов.
      Веб-сайт –  основа  публикаций  во  Всемирной  паутине,  интерактивное
средство   представления   различного   рода   информации.   Каждому   члену
информационного   общества   для   достижения   наилучших   результатов    в
профессиональной деятельности необходимы умения и навыки по созданию  своего
веб-сайта и пониманию принципов его создания и оформления.
      Информатика  во  многих  школах  преподается  на  базовом   уровне   и
следовательно количество часов, отводимое на изучение такое важной темы  как
создание  сайтов,  а  тем  более  вопросам,   посвященных   Web-дизайну   не
достаточно. Лишь профильные курсы  информатики  позволяют  выделять  большее
количество часов  на  темы,  связанные  с  Web-дизайном.  Но,  к  сожалению,
профильные  курсы  информатики  выбирают  в  основном  в  школах  с  физико-
математической направленностью.
      Авторы большинства учебных пособий [4], [12], [14] предлагают  изучать
темы, связанные с Web-дизайном  в  раздел  «Коммуникационные  технологии»  и
отводят 2-4 часа на изучение этих тем.
      Угринович  Н.Д.  предлагает  следующее  тематическое  планирование  по
разделу «Коммуникационные технологии» для 7-9 классов.
      Информационные  ресурсы  Интернета.  Всемирная  паутина.   Электронная
почта. Файловые архивы. Общение в  Интернете.  Мобильный  Интернет.  Звук  и
видео в Интернете. Поиск информации в  Интернете.  Электронная  коммерция  в
Интернете.
      Передача   информации.   Локальные   компьютерные   сети.   Глобальная
компьютерная  сеть  Интернет.  Состав  Интернета.  Адресация  в   Интернете.
Маршрутизация и транспортировка данных по компьютерным сетям.
      Разработка Web-сайтов  с  использованием  языка  разметки  гипертекста
HTML.  Web-страницы  и  Web-сайты.  Структура  Web-страницы.  Форматирование
текста на Web-странице. Вставка изображений в Web-страницы.  Гиперссылки  на
Web-страницах.  Списки  на  Web-страницах.  Интерактивные  формы   на   Web-
страницах.
      А также следующие лабораторные работы:
         • Практическая работа. Путешествие по Всемирной паутине.
         • Практическая работа. Работа с электронной Web-почтой.
         • Практическая работа. Загрузка файлов из Интернета.
         • Практическая работа. Регистрация и  общение  в  социальной  сети
           Facebook.
         • Практическая работа. Поиск информации в Интернете.
         •  Практическая  работа.  Предоставление  доступа   к   диску   на
           компьютере, подключенному к локальной сети.
         • Практическая работа. «География» Интернета.
         • Практическая работа. Разработка  сайта  с  использованием  языка
           разметки текста HTML.
      Откуда видно, что разработке сайта посвящена всего  одна  практическая
работа.
      У Босовой Л.Л.  в  тематическом  планировании[3]  для  7-9  классов  в
разделе «Коммуникационные технологии»  на  создание  сайта  выделено  девять
тем:
         • Локальные и глобальные компьютерные сети
         • Как устроен Интернет. IP-адрес компьютера
         • Доменная система имён. Протоколы передачи данных.
         • Всемирная паутина. Файловые архивы.
         • Электронная почта. Сетевое коллективное взаимодействие.  Сетевой
           этикет.
         • Технологии создания сайта.
         • Содержание и структура сайта.
         • Оформление сайта.
         • Размещение сайта в Интернете.
      Семакин И.Г. предлагает  в  8  классе  обучать  разработке  сайта  при
изучении раздела «Передача информации в компьютерных сетях». На весь  раздел
отводится 8 часов. Тема называется создание  «Создание  простой  страницы  с
помощью текстового процессора». Отводится на данную тему 1час.
      Таким образом, анализ показывает, что основам Web-дизайна  в  школьном
курсе информатики уделено очень мало учебного времени.

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

      Основной формой организации учебно-воспитательной работы  с  учащимися
по всем предметам в средней школе  является  урок.  Школьный  урок  образует
основу классно-урочной системы  обучения,  характерными  признаками  которой
являются [5]:
      • постоянный состав учебных групп учащихся;
      • строгое определение содержания обучения в каждом классе;
      • определенное расписание учебных занятий;
      • сочетание индивидуальной и коллективной форм работы учащихся;
      • ведущая роль учителя;
      • систематическая проверка и оценка знаний учащихся.
      Но не  стоит  забывать,  что  разнообразная  внеклассная  деятельность
способствует  раскрытию  индивидуальных  способностей  ребенка,  которые  не
всегда  проявляются  на   уроке.   Разнообразие   внеклассной   деятельности
способствует самореализации ребенка, повышению его  самооценки,  уверенности
в себе, т.е. положительному восприятию самого  себя.  Включение  учащихся  в
различные виды  внеклассной  работы  обогащает  их  личный  опыт,  знания  о
разнообразии человеческой деятельности, формирует  необходимые  практические
умения и навыки.
      Внеклассные занятия могут  быть  использованы  для  углубления  знаний
учащихся  в  области  программного  материала,   развития   их   логического
мышления,   воображения,   исследовательских   навыков,    усвоения    языка
информатики, для сообщения учащимся сведений из истории информатики.
      К  формам  внеклассной  работы  по  информатике  относятся: экскурсии,
кружки, факультативы, олимпиад и прочие. Каждая из них  имеет  свои  цели  и
задачи и используется учителем в  работе,  естественно,  не  так  часто  как
урок, но довольно регулярно.
      Рассмотрим  несколько из  перечисленных  форм  внеклассной  работы  по
информатике.
      Целями факультативных занятий являются: углубленное знание  в  области
информатики или другой дисциплины[7]. Факультативные  занятия  ориентирована
на учащихся одной параллели, например, факультатив для 8-х классов.
      Кружок –  наиболее  гибкая,  глубоко  индивидуальная  форма  работы  с
разнообразным содержанием. В кружке могут заниматься дети  разных  возрастов
[13]. В кружке занимаются только те, кто проявил явный и повышенный  интерес
к  делу.  Лёгкое  ограничение  на  численность  участников  кружка   вызовет
полезное соревнование за право участия в нём.
      С учетом выше  сказанного  представляется  целесообразным  организация
обучения по оформлению сайта  в  рамках  кружка  «Основы  Web-дизайна».  Где
следует  разбирать  основные   моменты,   без   понимания   которых   нельзя
сформировать основные знания и умения по оформлению сайта.
      Существует много программных продуктов, которые позволяют  без  знаний
основ языка HTML и каскадных  таблиц  стилей  создавать  сайты.  Но  следует
отметить,   что   подобные   сайты   имеют   большой   информационный   вес,
соответственно долго загружаются и  т.п.  А  главное,  не  позволяют  самому
разработчику такого  сайта  освоить  и  понять  азы  профессионального  web-
дизайна, так  как  вся  работа  за  разработчика  выполнена  программистами-
создателями используемого программного продукта.
      Рассмотрим тематическое планирование, которое может быть  использовано
при организации кружковой работы по информатике в 7-9 классах.  Тематическое
планирование  представлено  14  темами  и  рассчитано  на   18-32   часа   в
зависимости от состава учащихся и их подготовки.
      Тематическое планирование:
    • Базовые элементы и элементы форматирования страницы языка HTML
    • Расположение текста на web-странице и задание заголовка
    • Структура текста
    • Вид текста
    • Выравнивание и отступы
    • Фон страницы
    • Работа с таблицами, списками, картинками и ссылками в HTML-документе
    • Оформление фона страницы с использованием картинки
    • Использование списков
    • Вставка картинки на Web-страницу
    • Использование таблиц
    • Использование ссылок и закладок
    • Объединение ячеек в таблице
    • Бегущая строка и разделительная линия
      Содержание базируется на изучении языка HTML и может  быть  продолжено
на базе использования каскадных таблиц стилей (CSS).

1.3. HTML – язык разметки гипертекста

      Создание Web-страницы заключается  в  разметке  содержащегося  на  ней
текста, подготовленного любым текстовым редактором. Другие  виды  информации
(графика,  звук,  анимация)   готовятся   соответствующими   редакторами   и
оформляются в виде файлов с соответствующими расширениями, стандартными  для
используемого браузера. Связь между файлами, используемыми на  Web-странице,
осуществляется с помощью гиперссылок.
      Разметка заключается в форматировании текста – определении  его  места
на странице и способа  отображения,  в  указании,  в  какое  место  страницы
должна быть вставлена графика, как она соотносится  с  текстом  (вставляется
на  свободное  место,  является   фоном,   на   который   наносится   текст,
«обтекается» текстом и т.д.), и вставке гиперссылок, осуществляющих  переход
на  другие  Web-страницы  или  на  используемые  программы.   Для   разметки
используется язык HTML.
      Важнейшими элементами  Web-страниц  являются  информационная  часть  и
гиперссылки.
      Гиперссылки    позволяют     создавать     навигационную     структуру
многостраничного сайта, т.е. определять, куда, в  какие  части  сайта  можно
попасть с каждой его страницы.
      HTML – это текстовый язык, в  котором  инструкции  по  форматированию,
называемые тэгами (tags), встроены в текст документа. Процесс создания HTML-
документа заключается во включении тэгов внутрь  неформатированного  текста,
несущего информационную нагрузку.
      Тэги HTML  –  это  последовательности  символов,  начинающиеся  знаком
«меньше» (<) и заканчивающиеся знаком «больше» (>).
      Браузеры WWW  при  анализе  предложений  HTML  работают  по  следующим
правилам:
      – пробелы и другие «невидимые» символы игнорируются;
      – все  тэги  могут  быть  разделены  на  группы:  базовые  тэги,  тэги
форматирования, структурные тэги, указатели и т.д.;
      – тэги форматирования могут быть написаны строчными и / или прописными
буквами;
      – большинство тэгов форматирования  пишутся  парами.  Открывающий  тэг
активирует данный эффект, а закрывающий выключает  его.  Пара  тэгов  иногда
называется контейнером, поскольку эффект, который они включают  и  выключают
проявляется на тексте, расположенном внутри них. Например, для  того,  чтобы
указать,  что  строка  должна  быть  напечатана  жирными   символами,   надо
написать: <В> Эта строка будет  напечатана  жирным  текстом  </В>  –  текст,
находящийся  внутри  закрывающего   тэга,   всегда   предваряется   символом
«обратная косая черта».  Среди  базовых  тэгов  HTML  исключением  из  этого
правила являются: <BASE> (основная информация), <BR>  (конец  строки),  <HR>
(горизонтальная линейка), и  <IMG>  (изображение).  Эти  тэги  существуют  в
единичном экземпляре, т.е. не требует закрывающего тэга [6].
      Каждый документ HTML имеет граничные тэги: <HTML> и </HTML>. Эта  пара
тэгов заключает в себе все другие тэги  Web-страницы  и  все  информационное
содержание  документа.  Фактически  они  декларируют,  что  все   содержимое
контейнера является кодом HTML. Тэг <HTML>  должен  располагаться  в  первой
строке файла, а тэг </HTML> – в последней.
      Каждый HTML-документ содержит заголовок документа и его тело.
      Заголовок документа идентифицирует  документ.  Он  должен  идти  сразу
после тэга <HTML> и  начинаться  с  <HEAD>.  Заканчивается  заголовок  тэгом
</HEAD>.
      В  заголовке  документа  обязательно  должны  присутствовать  название
документа и его базовый URL-адрес.
      Название документа располагается между тэгами <TITLE> и </TITLE>.  Оно
используется браузером и Web-сервером. Длина названия  не  должна  превышать
40  символов.  Название  документа  должно  быть   информативным,   отражать
содержание документа.  Название  встречается  в  строке  заголовка  Internet
Explorer, в списках журнала (History) и «Избранных страницах» (Favorites).
      Базовый URL должен быть  полным  (абсолютным)  и  содержать  протокол,
адрес компьютера в Internet и имя файла. Он указывается в тэге <BASE HREF  =
«6a30Bbifi_URL»>.  Все  остальные  URL   в   документе   могут   указываться
относительно   базового.   Например,   если   базовый   URL   имеет   адрес:
http://www.microsoft.com/products/office/word/datesheets.html  и  необходимо
указать    URL    файла    features.html,    расположенного    в    каталоге
/products/office/excel      на       том       же       сервере,       можно
указать:../excel/features.html, а не набирать полный адрес.
      Символы «../» указывают, что нужно перейти на один  уровень  каталогов
вверх относительно базового адреса.
      Наличие базового адреса облегчает перенос документа на другой  сервер,
так как если все остальные URL в документе относительные,  то  при  переносе
необходимо изменить только имя сервера в базовом URL.
      Тело документа содержит весь текст,  несущий  информацию  и  все  тэги
HTML, используемые для  форматирования  текста.  Тело  документа  начинается
сразу же после заголовка и ограничивается тэгами <BODY> и </BODY>.
      Пример HTML-документа:
      <HTML>
      <HEAD>
      <TITLE> Название документа </TITLE>  <BASE  HREF  =  «6a30Bbra_URL»  >
</HEAD> <BODY>
      </BODY> </HTML>
      Тэги, используемые в теле  документа,  позволяют  указывать  следующие
элементы разметки текста:
      – начало абзаца и конец строки,
      – стили заголовков,
      – физические стили,
      – логические стили,
      – списки,
      – специальные символы.
      Гипертекстовые  ссылки  состоят  из  двух  частей:  указателя  и  URL.
Указатель – это текст, по которому пользователь должен  щелкнуть  для  того,
чтобы куда-то переместиться. URL указывает адрес, с которого  браузер  будет
загружать документ, когда пользователь щелкнет по указателю [17].
      Текстовые указатели  в  графических  браузерах  обычно  подчеркнуты  и
выделены цветом. В чисто текстовых браузерах они выделяются жирным шрифтом.
      В качестве указателя может использоваться любой текст,  независимо  от
его размеров и особенностей  форматирования.  Указатель  может  состоять  из
нескольких букв, слов или даже строк текста.
      Формат указателя:
      <А HREF = «URL»> текст указателя </А>, где буква А  в  тэге  <А  HREF>
означает указатель (anchor),  a  HREF  –  гипертекстовую  ссылку  (Hypertext
REFerence). Все, что  находится  между  тэгами  <А  HREF  =  «URL»>  и  </А>
является текстом указателя, который  выводится  на  экран  подчеркнутым  или
жирным шрифтом.
      Вместе с гипертекстовыми указателями могут  быть  использованы  другие
форматирующие коды. Например:
      <А HREF = «URL»> <1> Переход к более подробному  изложению  </1>  </А>
или
      <I> <А HREF = «URL»> Переход к более подробному изложению </А> </1>.
      Более подробное использование основ языка HTML для оформления  страниц
сайта рассматривается в  методичсеких рекомендациях во второй главе.

1.4. Каскадные таблицы стилей

      Каскадные (многоуровневые) таблицы стилей  –  cascading  style  sheets
(CSS) – это мощный  стандарт  на  основе  текстового  формата,  определяющий
представление данных в браузере.
      Если формат HTML предоставляет  информацию  о  составе  документа,  то
таблицы стилей сообщают как он должен  выглядеть.  Таким  образом  каскадные
таблицы  стилей  дают  возможность  хранить  содержимое  отдельно   от   его
представления.
      Стиль включает все типы элементов дизайна: шрифт,  фон,  текст,  цвета
ссылок, поля и расположение объектов на странице.
      CSS разрабатывались так, чтобы обеспечить больший уровень контроля над
размещением текста и графики.
      Каскадные  таблицы  стилей  обеспечивают  должный   уровень   единства
оформления,  организации  и  контроля  во  время  разработки  узла,  который
является недостижимым с помощью одного только HTML.
      CSS  предполагает  3  типа  таблиц  стилей  –  встроенные,  внедренные
(внутренние) и связанные (внешние).
      Впервые  идея  форматирования  HTML-документов  с  помощью  CSS   была
рекомендована Консорциумом W3C в 1996 году. Эта рекомендация,  которая  была
обновлена в 1998 году, используется Web-разработчиками и по сей день.
      Термин  «каскадный»  означает,  что  в  одной  странице   HTML   могут
использоваться разные стили. Браузер, поддерживающий таблицы  стилей,  будет
следовать их порядку (как по каскаду), интерпретируя информацию стилей.  Это
означает, что вы можете использовать все три типа стилей,  и  браузер  будет
интерпретировать сначала связанные, затем внедренные и, наконец,  встроенные
стили. Даже если ко всему узлу будут применены образцы стилей,  можно  будет
управлять отдельными  аспектами  страниц  с  помощью  внедренных  стилей,  а
отдельными областями внутри этих  страниц  –  с  помощью  встроенных  стилей
[28].
      Другой   аспект   каскадирования   –    наследование    (inheritance).
Наследование означает, что если не указано иное, то конкретный  стиль  будет
унаследован другими элементами страницы HTML. Например,  если  вы  примените
определенный цвет текста в  теге  <р>,  то  все  теги  внутри  этого  абзаца
наследуют этот цвет, если не оговорено иное.
      Существует  ряд  методов,  с  помощью  которых  таблицы  стилей  могут
применяться к документу HTML.  Синтаксис  соответствует  реальной  структуре
информации, содержащейся внутри таблицы стиля.
      Существует три метода для применения таблицы стилей к документу HTML:
      Встроенный (Inline). Этот метод  позволяет  взять  любой  тег  HTML  и
добавить  к  нему  стиль.  Использование  встроенного  метода  предоставляет
максимальный контроль над всеми  свойствами  Web-страницы.  Предположим,  вы
хотите задать внешний вид  отдельного  абзаца.  Вы  можете  просто  добавить
атрибут style к тегу абзаца,  и  браузер  отобразит  этот  абзац  с  помощью
параметров стиля, добавленного в код.
      Внедренный (Embedded). Внедрение позволяет контролировать всю страницу
HTML. При использовании тега  <style>,  помещенного  внутри  раздела  <head>
страницы HTML, в код вставляются детализированные  атрибуты  стиля,  которые
будут применяться ко всей странице.
      Связанный (Linked или External). Связанная  таблица  стилей  –  мощный
инструмент, который позволяет  создавать  образцы  стилей  (master  styles),
которые можно затем применять  ко  всему  узлу.  Основной  документ  таблицы
стилей (расширение.css) создается  Web-дизайнером.  Этот  документ  содержит
стили, которые будут едиными для  всего  Web-узла  (неважно,  содержит  одну
страницу или тысячи страниц). Любая страница, связанная с  этим  документом,
будет использовать указанные стили [9].
      Таблицы  стилей  строятся  в  соответствии  с  определенным   порядком
(синтаксисом), в противном случае они не могут нормально работать.
      Синтаксис всех методов, используемых для применения стилей к документа
HTML, практически одинаков.  Таблицы  стилей  составляются  из  определенных
частей. Эти части включают следующие элементы:
      Указатель (Selector). Указатель является элементом, к  которому  будут
применяться назначаемые вами  атрибуты.  Это  может  быть  просто  тег  типа
заголовка (H1) или абзаца (Р) [27]. Таблицы  стилей  позволяют  использовать
различные объекты, включая классы, которые будут кратко обсуждаться далее.
      Свойство (Property). Свойство определяет указатель. Например,  если  в
качестве указателя выбран абзац, вы можете включить  свойства,  определяющие
этот указатель. В  свойства  входят  такие  элементы,  как  поля,  шрифты  и
фоновые изображения. В таблицах стилей  существует  много  свойств,  которые
можно использовать для того, чтобы определить указатель.
      Значение (Value). Значения определяют свойства. Предположим, что у вас
есть заголовок первого уровня H1 (указатель) и вы  включаете  свойство  type
family (семейство шрифта). Шрифт, который на самом  деле  будет  применен  к
указанному фрагменту, задается значением этого свойства.
      Итак, каскадная таблица стилей – это набор правил форматирования тегов
HTML. Например, для того,  чтобы  цвет  фона  Web-страницы  сделать  черным,
необходимо объявить следующее правило форматирования:
      body {background:black}
      По умолчанию цвет шрифта – черный.
      Свойства CSS должны находиться в фигурных скобках.
      Для каждого тега HTML можно указать не одно, а несколько свойств стиля
[26].
      Изменим с помощью CSS не только цвет  фона  Web-страницы,  но  и  цвет
шрифта (на белый).
      body {background:black; color:white}
      Формат самого правила не имеет  значения,  главное  –  правило  должно
читаться удобно и легко. Например, вышеприведенное правило можно записать  и
так:
      body {
      background:black;
      color:white}
      Одно и  то  же  правило  стиля  можно  применить  сразу  к  нескольким
различным тегам HTML-страницы. Например:
      body, td, h1 {
      background:black;
      color:white}
      Встроенный стиль
      Встроенный стиль применяется к любому тегу  HTML  с  помощью  атрибута
style следующим образом:
      <P style= «font: 12pt Courier New»> The text in this line will
      display as 12 point text using the Courier New font.
      </P>
      Или:
      <p style= «font: 12pt Arial»>
      The text in this line will display as 18 point text using the
      Arial font.
      </p> [17].
      Можно добавлять встроенный стиль в  любой  тег  HTML,  в  котором  эта
операция  будет  иметь  смысл.  Среди  таких  тегов  можно  назвать  абзацы,
заголовки, горизонтальные  линии,  якоря  и  ячейки  таблиц.  Ко  всем  этим
элементам логично применять встроенные стили.
      Существуют два тега, которые помогают  применять  встроенные  стили  к
разделам  страницы.  Это  теги  <div>   (division   –   раздел)   и   <span>
(промежуток). Эти теги определяют диапазон текста, так что все,  находящееся
между ними, будет оформлено с помощью нужного стиля.  Единственное  различие
между <div> и <span> состоит в том, что <div> создает принудительный  разрыв
строки, a <span> – нет.
      Следовательно, нужно использовать <span>  для  изменения  стиля  любой
части текста, меньшей абзаца.
      Внедренные стили используют тег <style>,  расположенный  между  тегами
</head> и <bodу> в стандартном документе HTML.
      Рассмотрим пример внедренного стиля:
      <html>
      <head>
      <title>Embedded Style Sheet Example </title>
      </head>
      <style>
      BODY {
      background: #FFFFFF;
      color: #000000;
      }
      H1 {
      font: 14pt verdana; color: #CCCCCC;}
      P {font: 12pt times;}
      A {color: #FFOOOO; text-decoration: none}
      </style>
      Как  видно  из  примера,  приведенного  выше,  таблица  стилей  теперь
отличается от кода стандартной страницы HTML, но все  же  логику  проследить
нетрудно. В нашем случае для основной части  страницы  (body)  указаны  цвет
фона, цвет текста и верхнее, левое и правое поля в дюймах.
      Для заголовка первого уровня (HI) указывается шрифт (название шрифта и
размер в пунктах). В этом и состоит удобство каскадных таблиц  стилей  –  вы
можете задавать размеры не только в пунктах, но и пикселях  (рх),  процентах
(75%) и сантиметрах (cm).
      Существует и несколько новых единиц измерения, самой примечательной из
которых является m.
      В отличие от пунктов или пикселов, представляющих  абсолютные  размеры
различных объектов, 1m – ширина строчной буквы m  в  том  шрифте  о  котором
идет речь. Правда, большинство браузеров об этом не догадываются  и  поэтому
определяют  1m  просто  как  размер,  заданный  по  умолчанию.  Например,  в
Internet Explorer 4.0 и выше для гарнитуры Verdana размер  1m  соответствует
12 пунктам. Точнее  сказать  «соответсвует  значению,  которое  пользователь
установил в качестве  размера  шрифта  по  умолчанию.  Таким  образом,  если
установить в браузере размер шрифта по умолчанию 16 пунктам, то  и  1m  тоже
станет равна 16  пунктам,  и  все  остальные  размеры  будут  соответственно
увеличены [9].
      Другой интересный момент этой таблицы стилей – различие стилей шрифтов
заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой.
      В теге  якоря  (А)  можно  увидеть  еще  один  очень  удобный  элемент
синтаксиса. Строка text-decoration: none удаляет подчеркивание  ссылок,  так
что результат выглядит чисто и привлекательно.
      Связанные (linked), или внешние (external),  таблицы  стилей  являются
расширением понятия внедренных стилей. Используется тот же самый код, что  и
для внедренной таблицы стилей, но он помещается в отдельный  документ  (файл
с расширением.css). После этого с этим документом (файлом)  связываются  все
страницы, к которым необходимо применить данный стиль.
      Вот как выглядит пример связанной таблицы стилей:
      <style>
      BODY {
      background: #ffffcc;
      color: #000000;
      }
      P {
      font-family: sans-serif;
      font-style: italic;
      font-size: 16pt;
      color: #006633;
      }
      H1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24pt;
      color: #996633;
      }
      </style>
      Документ необходимо сохранить как отдельный файл. Назовем  его  style-
l.css и поместим в папку таблиц стилей с именем style.
      С этим документом любое  количество  страниц  HTML.  Для  этого  нужно
использовать между тегами </title> и </head> следующую конструкцию:
      <link rel=stylesheet href= «style-1.css» type= «text/css»>
      Любая страница, содержащая такую связь, будет оформлена в соответствии
со стилями, указанными в файле style_1.css.
      Один  из  наиболее  привлекательных  аспектов  таблиц  стиля   –   это
возможность  применения  различных  шрифтов  к  определенной  странице   без
необходимости  использовать  многочисленные  теги  <font>.  Таблицы   стилей
позволяют  выбирать  ряд  шрифтов  и  применять  их  к  конкретным  разделам
страницы типа номера заголовка, абзаца или другого фрагмента. Однако  вместо
стандартного тега HTML <font>  используется  атрибут  таблицы  стилей  font-
family. Вы можете добавлять в этот тег  многие  атрибуты  либо  использовать
классы и группировку, чтобы реализовать всю мощь средств работы со  шрифтами
с помощью таблиц стилей.
      Практическая реализация поддержки шрифтов в таблицах стилей аналогична
проблемам, с которыми  пользователи  сталкиваются  при  использовании  тегов
<font> и соответствующих атрибутов. Конкретный шрифт должен быть  установлен
на том компьютере, где происходит  просмотр  страницы.  Как  и  тег  <font>,
таблицы стилей позволяют указывать  любое  число  шрифтов,  чтобы  увеличить
вероятность того, что браузер  клиента  подберет  нужный  шрифт  из  списка.
Например, если у них не  будет  шрифта  Century  Schoolbook,  то,  возможно,
найдется  Garamond  и  т.д.  Хотя  сами  эти  шрифты  различаются   довольно
значительно,  их  семейства  достаточно  похожи,  чтобы  считать,  что   они
выполняют сходные дизайнерские задачи [29].
      Таблицы стилей распознают пять семейств шрифтов: Serif (С  засечками),
Sans  Serif  (Рубленые),  Script  (Рукописные),  Monospace   (Моноширинные),
Decorative (Декоративные).
      У шрифтов есть очень много свойств, которые можно  изменять,  и  очень
много значений, которые могут принимать эти свойства.
      Как и для  стандартных  шрифтов  HTML,  можно  задавать  свойства  для
управления размером и  цветом.  Однако  для  шрифтов  HTML  нельзя  изменять
насыщенность  и  тип  шрифта,  а  также  высоту   строки   или   интерлиньяж
(расстояние между отдельными  строками  текста).  Кроме  того,  доступные  в
таблицах  стилей  методы  управления  размером  шрифта  намного  превосходят
уровень, предлагаемый стандартами HTML [30].
      Таблицы  стилей  используют  стандартные  методы  работы   с   цветами
браузера.   Другими   словами,   для   получения   оптимальных   результатов
используйте шестнадцатиричный (и  лучше  всего,  поддерживаемый  браузерами)
цвет. Вы можете добавлять  цвет,  как  и  другие  свойства  стиля,  в  любой
подходящий  тег  HTML  для  встроенных,  внедренных  и   связанных   стилей.
Например, при описании  цвета  заголовка  первого  уровня  указоно  значения
color:#333399;, в результате мы видим заголовок «Каскадные  таблицы  стилей»
темно-синего цвета.
      Размер шрифта в таблицах стилей  можно  определять,  используя  пункты
(points),  пиксели  (pixels),  дюймы  (inches),  сантиметры   (centimeters),
миллиметры (millimeters) и пики (picas), а  также  используя  новые  единицы
измерения.




ГЛАВА 2. МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО ОБУЧЕНИЮ ОСНОВАМ WEB-ДИЗАЙНА


2.1. Базовые элементы и элементы форматирования страницы языка HTML


2.1.1. Расположение текста на web-странице и задание заголовка

    Одним из самых  простых  механизмов  web-дизайна  является  язык  HTML.
Именно с него стоит начинать обучение разработке web-страниц.
    Были разработаны методические  рекомендации  для  изучения  основ  web-
дизайна  при  помощи  языка  HTML.  В  данных   рекомендациях   представлена
логическая   последовательность   обучения   основным    элементам    языка,
базирующаяся на постепенном добавлении новых элементов в решение заданий,  а
также последовательное их  усложнение.  Для  отработки  применения  основных
элементов языка HTML задания разбиваются на несколько этапов, на  каждом  из
которых отрабатывается один элемент языка. На  следующем  уровне,  используя
уже  имеющиеся  знания,  учащиеся  переходят  к  изучению  новых  элементов,
параллельно применяя изученные до этого,  что  дает  возможность  еще  лучше
усвоить материал и устранить возможные недочеты.
    Учащимся  предлагается  задание,  в   котором   необходимо   разместить
предложенный  текст  (Приложение  1)  на  web-страницу  и   отформатировать:
изменить шрифт и  фон  страницы,  а  также  выровнять  текст.  Для  основных
понятий  сделать  шрифт  «Arial»,  курсив,  размера   шрифта   «4»,   синий.
Словосочетание «структура ЭВМ» выделить шрифтом «Arial» размера  4,  сделать
жирным,  подчеркнутым  и  красного  цвета.  Оформить  заголовок  при  помощи
заголовочных тэгов второго уровня, выровнять по центру.
Первый абзац текста выровнять по левому краю, второй – по ширине,  а  третий
– по правому краю. Фон страницы задать цветом по своему усмотрению.
    Оформляем необходимый текст основными тэгами <html>, <head>, <body>, не
забывая про  парные  закрывающие  тэги.  Эти  тэги  составляют  основу  web-
страницы, ее «голову» и «тело», которые, впоследствии, будут  видоизменяться
при помощи других тэгов. Также добавляем  заголовок  страницы  вверху  окна,
который будет отображаться на вкладке  браузера,  при  помощи  парного  тэга
<title>.
      При необходимости между тэгами <head></head> можно поместить  непарный
тэг <meta>, имеющий несколько атрибутов  и  в  основном  использующийся  для
задания кодировки, а также сообщить браузеру информацию  о web-странице.
    Получили следующий код html-страницы:
    <html>
    <head>
    <title> Архитектура компьютера </title>
    </head>
    <body>
    Архитектура ЭВМ
    Архитектура ЭВМ включает в себя как структуру,  отражающую  состав  ПК,
так и программно - математическое обеспечение.
    Структура ЭВМ  – совокупность элементов и связей между  ними.  Основным
принципом построения всех современных ЭВМ является программное управление.
    </body>
    </html>
    Файл с кодом сохраняется с расширением .html.
    На данном этапе  необходимо  отформатировать  текст,  выделив  основные
определения, подобрать общий  стиль  страницы,  а  также  разработать  общую
структуру текста, чтобы он хорошо воспринимался.

2.1.2. Структура текста

    Название  текста  удобно  выделить  при  помощи   тэгов   для   задания
заголовков.  Оптимальным  для  данного   фрагмента   текста   выглядит   вид
заголовка, задаваемый тэгами <h2></h2> (чем  меньше  цифра  после  «h»,  тем
больше шрифт заголовка). Возможно  задать  значения  заголовка  от  1  до  6
(числа после «h»).
    Для удобного чтения текст следует разбить на абзацы. Это можно  сделать
с помощью тэгов  <p></p>,  поставленных  в  предполагаемом  начале  и  конце
абзаца. Также часто используется непарный тэг <br>, но  стоит  помнить,  что
его основное назначение — перенос строки, а не создание  абзаца.  Его  лучше
использовать, если текст облачен в стихотворную форму.
    Таким образом, получили код:
    <html>
    <head>
    <title> Архитектура компьютера </title>
    </head>
    <body>
    <h2> Архитектура ЭВМ </h2>
    <p>Архитектура ЭВМ включает в себя как структуру, отражающую состав ПК,
так и программно-математическое обеспечение.</p>
    <p>Структура ЭВМ – совокупность элементов и связей между ними.</p>
    <p>Фон Нейман не только выдвинул основополагающие принципы  логического
устройства ЭВМ, но и предложил ее структуру. </p>
    </body>
    </html>

      2.1.3. Вид текста

    После разработки структуры текста следует решить,  каким  именно  будет
сам текст: жирным, курсивным, подчеркнутым, каким будет его цвет,  размер  и
шрифт.
    Пусть важные понятия отображаются жирным  и  подчеркнутым  текстом  при
помощи тэгов <b></b>  и  <u></u>,  а  понятия,  на  которые  нужно  обратить
внимание, отображаются курсивом с тэгами <i></i>  (при  необходимости  можно
сделать текст зачеркнутым при помощи тэгов  <strike></strike>,  перевести  в
верхний – <sup></sup>, или нижний индексы – <sub></sub>).
    Шрифт (по умолчанию «Times New Roman»),  размер  и  цвет  текста  можно
изменить при помощи парного тэга <font>, задав ему нужные атрибуты.
    Зададим основным  понятиям  данного  текста  шрифт  «Arial»,  используя
атрибут «face» и размер  «4»  с  атрибутом  «size».  Следует  заметить,  что
значения атрибута «size» могут изменяться от 1 (самый маленький шрифт) до  7
(самый  большой).  Что  касается  типа  шрифта,  то  лучше  не  использовать
экзотических шрифтов, так как в разных браузерах  они  могут  выглядеть  по-
разному.
    Цвет текста  зададим  при  помощи  атрибута  «color»  двумя  способами:
непосредственным названием цвета  на  английском  языке  и  при  помощи  его
шестнадцатеричного значения, например, «blue» и «#0000FF».
    Код страницы на данном этапе:
    <html>
    <head>
    <title> Архитектура компьютера </title>
    </head>
    <body>
    <h2> Архитектура ЭВМ </h2>
    <p>Архитектура ЭВМ включает в себя как структуру, отражающую состав ПК,
так и программно - математическое обеспечение.</p>
    <p><b><u><font face =  "Arial"  size  =  "4"  color  =  "red">Структура
ЭВМ</font></u></b> – совокупность элементов  и  связей  между  ними.  Основы
учения об архитектуре вычислительных машин были  заложены  <i><font  face  =
"Arial" size = "4" color = "#0000FF">Джон фон Нейманом</font></i>.
    Совокупность этих принципов породила <i><font face = "Arial" size = "4"
color     =     "blue">классическую      (фон-неймановскую)      архитектуру
ЭВМ</font></i>.</p>
    </body>
    </html>
    Следует обратить внимание на правильную вложенность парных  тэгов.  Это
влияет и на верное  отображение  задаваемых  параметров,  и  на  последующее
удобное исправление или доработку кода страницы.

2.1.4. Выравнивание и отступы

    Чтобы выровнять текст так, как нам удобно, в тэги  абзаца  <p></p>  или
заголовка <h2></h2> (в нашем случае) добавляют атрибут «align» с  различными
значениями. По умолчанию это значение «left». Кроме атрибута  «align»,  есть
отдельный парный тэг <center></center>, задающий выравнивание по центру.
    В нашем тексте выровняем заголовок по центру, первый  абзац  по  левому
краю, второй – по ширине, а третий абзац – по правому краю.
    Получим следующий код страницы:
    <html>
    <head>
    <title> Архитектура компьютера </title>
    </head>
    <body>
    <h2><center> Архитектура ЭВМ  </center></h2>
    <p align =  "left">Архитектура  ЭВМ  включает  в  себя  как  структуру,
отражающую состав ПК, так и программно - математическое обеспечение.</p>
    <p align = "justify"><b><u><font face  ="Arial"  size  =  "4"  color  =
"red">Структура ЭВМ</font></u></b> – совокупность элементов и  связей  между
ними. Совокупность этих принципов породила <i><font face =  "Arial"  size  =
"4"   color    =    "blue">классическую    (фон-неймановскую)    архитектуру
ЭВМ</font></i>.</p>
    <p align =  "right">Фон  Нейман  не  только  выдвинул  основополагающие
принципы логического устройства ЭВМ, но и предложил ее структуру. </p>
    </body>
    </html>
    Если мы хотим, чтобы данный текст отступал от краев окна браузера, то в
тэг <body> можно добавить атрибуты «leftmargin» –  отступ  от  левого  края,
«rightmargin» – отступ от правого края, «topmargin»  –  отступ  от  верхнего
края, «bottommargin» – отступ  от  нижнего  края  и  задать  им  необходимые
значения.
    Код страницы в этом случае:
    <html>
    <head>
    <title> Архитектура компьютера </title>
    </head>
    <body       leftmargin="50"       rightmargin="50"       topmargin="50"
bottommargin="50">
    <h2><center> Архитектура ЭВМ  </center></h2>
    <p align =  "left">Архитектура  ЭВМ  включает  в  себя  как  структуру,
отражающую состав ПК, так и программно - математическое обеспечение.</p>
    <p align = "justify"><b><u><font face = "Arial"  size  =  "4"  color  =
"red">Структура ЭВМ</font></u></b> - совокупность элементов и  связей  между
ними. Совокупность этих принципов породила <i><font face =  "Arial"  size  =
"4"   color    =    "blue">классическую    (фон-неймановскую)    архитектуру
ЭВМ</font></i>.</p>
    <p align =  "right">Фон  Нейман  не  только  выдвинул  основополагающие
принципы логического устройства ЭВМ, но и предложил ее структуру. </p>
    </body>
    </html>

2.1.5. Фон страницы

    Фон страницы можно задать двумя способами:  при  помощи  атрибута  тэга
<body> – «bgcolor» задается цвет фона или при помощи атрибута того  же  тэга
– «background» фоном будет являться картинка, путь к которой нужно указать.
    Для  нашего  фрагмента  текста  ограничимся  однотонным   фоном   цвета
«#F4A460». Для поиска оптимального оттенка можно  воспользоваться  таблицами
цветов, представленными в сети.
    Получили код:
    <html>
    <head>
    <title> Архитектура компьютера </title>
    </head>
    <body leftmargin="50" rightmargin="50" topmargin="50" bottommargin="50"
bgcolor = "#F4A460">
    <h2><center> Архитектура ЭВМ </center></h2>
    <p align =  "left">Архитектура  ЭВМ  включает  в  себя  как  структуру,
отражающую состав ПК, так и программно - математическое обеспечение.</p>
    <p align = "justify"><b><u><font face = "Arial"  size  =  "4"  color  =
"red">Структура ЭВМ</font></u></b> - совокупность элементов и  связей  между
ними. Совокупность этих принципов породила <i><font face =  "Arial"  size  =
"4"   color    =    "blue">классическую    (фон-неймановскую)    архитектуру
ЭВМ</font></i>.</p>
    <p align =  "right">Фон  Нейман  не  только  выдвинул  основополагающие
принципы логического устройства ЭВМ, но и предложил ее структуру. </p>
    </body>
    </html>
    Таким образом, страница выглядит так (рисунок 1.):
                                 Рисунок 1.
    Для  дальнейшего  закрепления  данного   материала   дается   несколько
однотипных заданий по оформлению web-страницы известными учащимся  тэгами  и
атрибутами.

2.2. Работа с таблицами, списками, картинками и ссылками в HTML-документе


2.2.1. Оформление фона страницы с использованием картинки

      Следующим этапом изучения языка HTML может стать усложненное  задание,
которое включает в себя другие элементы оформления web-страницы.
      Учащимся предоставляется задание, где необходимо оформить материал про
импрессионистов  по  своему  усмотрению,  но  так,  чтобы  на   web-странице
обязательно присутствовали разные виды списков, таблицы, различные  картинки
и ссылки. Считается,  что  форматировать  саму  страницу  и  текст  они  уже
научились.
    Текст  оформляется  соответствующими  базовыми  тэгами  языка  HTML   и
форматируется (см. пункт 2.1). Фоном для страницы служит картинка.
    Получили следующий код:
    <html>
    <head>
    <title> Импрессионисты </title>
    </head>
    <body background = "images/fon2.jpg" >
    <h2><center> Импрессионисты </center></h2>
    <p  align=   "justify"><b><u><font   size="3"   face   ="Arial"   color
="red">Импрессионизм</font></u></b> (франц. impressionnisme,  от  impression
— впечатление), направление в искусстве  последней  трети  девятнадцатого  —
начала  двадцатого  века,  мастера  которого,   фиксируя   свои   мимолетные
впечатления,  стремились  наиболее  естественно  и  непредвзято  запечатлеть
реальный мир в его подвижности и изменчивости. </p>
    <p  align=   "justify"><b><u><font   size="3"   face   ="Arial"   color
="red">Неоимпрессионизм</font></u></b> (франц.    neo-impressionnisme)     —
течение в живописи, возникшее во  Франции  около  1885,  когда  его  главные
мастера,  Ж.  Сера  и  П.  Синьяк,  разработали  новую  живописную   технику
дивизионизма.</p>
    <p  align=   "justify"><b><u><font   size="3"   face   ="Arial"   color
="red">Постимпрессионизм</font></u></b> (от   лат.   post    —    после    и
импрессионизм)  —  собирательное  название  основных   течений   французской
живописи конца 19 — начала 20 веков.</p>
    <p><b><font size="4">Импрессионисты:</font></b></p>
    Эдгар Дега;<br>
    Винсент ван Гог;<br>
    Эдуард Мане;<br>
    Клод Моне;<br>
    Огюст Ренуар;<br>
    </body>
    </html>
    Следует заметить, что фоновая картинка, вставленная с помощью  атрибута
«background» тэга <body>, не растягивается на весь экран,  а  замощает  его.
Чтобы добиться расположения  картинки  на  всем  экране,  надо  использовать
методы CSS.

2.2.2. Использование списков

    В языке HTML списки бывают двух видов:  маркированные  и  нумерованные.
При этом можно задавать не  только  вид  списка,  но  и  тип  нумерации  или
маркера, а также задавать  номер  (для  нумерованных  списков),  с  которого
должен начинаться список. Списки можно делать вложенными.
    Добавим в начало  текста  задания  перечисление  видов  импрессионизма.
Сделаем  получившийся  список  маркированным  с  помощью  тэгов   <ul></ul>и
изменим тип маркера с круга на квадрат,  используя  атрибут  «type».  Каждый
пункт  списка  оформляется  тэгами  <li></li>,  что   используется   как   в
маркированных, так и в нумерованных списках.
    Получили   следующий   код,   расположенный   в   начале   текста   про
импрессионистов:
    <p><b><font size="4">Виды импрессионизма:</font></b></p>
    <ul type ="square">
    <li>Импрессионизм</li>
    <li>Неоимпрессионизм</li>
    <li>Постимпрессионизм</li>
    </ul>
    Стоит заметить, что в списке, чтобы перейти на следующую строку не надо
использовать дополнительные тэги.
    Далее сделаем список более сложным.  Для  каждого  вида  импрессионизма
добавим в виде вложенного списка художников, творивших в нем. При  этом  тип
маркера для подпунктов сделаем другим.
    Получилось следующее:
    <p><b><font size="4">Виды импрессионизма:</font></b></p>
    <ul type ="square">
    <li>Импрессионизм</li>
    <ul type = "circle">
    <li>Э. Мане</li>
    <li>О. Ренуар</li>
    <li>Э. Дега</li>
    </ul>
    <li>Неоимпрессионизм</li>
    <ul type = "circle">
    <li>Ж. Сера</li>
    <li>П. Синьяк</li>
    </ul>
    <li>Постимпрессионизм</li>
    <ul type = "circle">
    <li>П. Сезанн</li>
    <li>П. Гоген</li>
    </ul>
    </ul>
    Не следует забывать про правильную вложенность  тэгов  для  правильного
отображения текста.
    Фрагмент страницы со списком (рисунок 2):
                                 Рисунок 2.
    Далее в середине текста оформим список всех импрессионистов при  помощи
нумерованного списка с римскими числами. Будем использовать  тэги  <ol></ol>
и атрибут «type».
    Код:
    <p><b><font size="4">Импрессионисты:</font></b></p>
    <ol type ="I">
    <li>Эдгар Дега;</li>
    <li>Винсент ван Гог;</li>
    <li>Эдуард Мане;</li>
    <li>Клод Моне;</li>
    <li>Огюст Ренуар.</li>
    </ol>
    Фрагмент страницы со списком (рисунок 3):
                                 Рисунок 3.

2.2.3. Вставка картинки на web-страницу

    Перейдем к вставке картинок не  в  качестве  фона,  а  в  нужном  месте
текста. Добавим после вставленного списка картинку и отцентрируем ее.  Будем
использовать  непарный  тэг  <img>.  Следует  также  помнить,  что  если  не
устраивает размер картинки по умолчанию, то его  можно  изменить,  используя
атрибуты тэга <img> «width» и «height». Причем размеры можно задавать как  в
пикселях, так и в процентах от размеров окна браузера.
    Для вставки картинки потребуется следующий код:
    <center><img src="images/main.jpg" width="300" height = "200"></center>
    Также можно добавить атрибут «alt», который  определяет  альтернативный
текст,  комментарий,  который  считывает   поисковый   робот   при   анализе
содержимого  web-страницы,  или  атрибуты  «hspace»  и   «vspace»,   которые
определяют расстояния по горизонтали и вертикали между картинкой и текстом.
    Фрагмент страницы с картинкой (рисунок 4):
                                 Рисунок 4.

2.2.4. Использование таблиц

    Перейдем к вставке таблиц на нашу страницу. Сделаем таблицу при  помощи
тэгов <table></table>, состоящую из двух столбцов и шести  строк.  Строки  в
таблице  оформляются  тэгами  <tr></tr>,   а  ячейки  в  строках  —   тэгами
<td></td>. В первом столбце будет информация  о  художнике,  а  в  правом  —
какая-нибудь из его картин. Первая строка  —  заголовок  таблицы.  Не  будем
забывать и про различные атрибуты, такие  как  вид  границы  ячеек  таблицы,
цвет фона, выравнивание, размер и объединение ячеек.
    Получившийся код:
    <table cellpadding = "30" border="2" align="center">
    <tr><td    colspan="2"><center><b><font   size="5"   color   =    "red"
face="Arial">Художники</font></b></center></td></tr>
    <tr><td align = "justify" valign = "middle"><p><b><font  size="4">Эдгар
Дега</b></p> Дега Эдгар (Degas Edgar)  (1834–1917),  французский  живописец,
график и скульптор. Учился в парижской Школе изящных  искусств  (1855–1856),
в 1854–1859 ездил в Италию изучать  искусство  Раннего  Возрождения  побывал
также в США (1872–1873) и Испании. </font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/dega.jpg"></td></tr>
    <tr><td   align   =    "justify"    valign    =    "middle"><p><b><font
size="4">Винсент ван Гог</b></p> Ван Гог Винсент (Van Gogh  Vincent)  (1853-
1890),   голландский   живописец.   В   1869-1876    служил    комиссионером
художественно-торговой фирмы в Гааге,  Брюсселе,  Лондоне,  Париже,  в  1876
работал учителем в Англии. </font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/vangog.jpg"></td></tr>
    <tr><td align = "justify" valign = "middle"><p><b><font size="4">Эдуард
Мане</b></p> Мане Эдуар (Manet Eduar)  (1832-1883),  французский  живописец.
Учился   в   парижской   Школе   изящных   искусств   у   Т.Кутюра    (1850-
1856).</font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/mane.jpg"></td></tr>
    <tr><td align = "justify" valign =  "middle"><p><b><font  size="4">Клод
Моне</b></p>  Моне  Клод  Оскар  (Monet  Claude)  (1840-1926),   французский
живописец. Учился в частных студиях в Париже  (1859-1863),  изучал  японскую
гравюру на дереве; испытал влияние Камиля Коро, Гюстава Курбе, Эдуара  Мане,
мастеров барбизонской школы.</font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/mone.jpg"></td></tr>
    <tr><td align = "justify" valign = "middle"><p><b><font  size="4">Огюст
Ренуар</b></p>Ренуар   (Renoir)   Пьер   Oгюст   (1841-1919),    французский
живописец, график  и  скульптор.В  юности  работал  живописцем  по  фарфору,
расписывал шторы и веера. </font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/renoir.jpg"></td></tr></table>
    Атрибут «colspan» показывает, сколько столбцов должно быть объединено в
одну ячейку («rowspan»  —  сколько  строк).  Атрибут  таблицы  «cellpadding»
добавляет отступ в пикселях содержимого ячейки от ее границ.
    Стоит заметить, что с помощью таблиц также  можно  оформлять  различные
горизонтальные  и  вертикальные  меню  на  странице.  Фрагмент  получившейся
страницы (рисунок 5):


                                 Рисунок 5.

2.2.5. Использование ссылок и закладок

    На многих web-страницах довольно часто используются ссылки  на  внешние
источники, а также на  другие  файлы.  В  первом  случае  при  помощи  тэгов
<a></a> и атрибута «href» указывается ссылка на интернет-ресурс,  во  втором
случае при помощи тех  же  тэгов  указывается  путь  к  необходимому  файлу.
Также, когда на  одной  странице  слишком  много  текста,  есть  возможность
использовать закладки, которые  перемещают  читателю  в  нужную  часть  web-
страницы.
    Сделаем  ссылки  на   сайт   Википедии   по   словам   «Импрессионизм»,
«Неоимпрессионизм» и «Постимпрессионизм». Также добавим  закладки  в  списке
художников на нужную часть таблицы, расположенной  ниже  и  внизу  страницы,
чтобы можно было переместиться в самое начало.
    Код страницы с вставленными ссылками и закладками:
    <p align= "justify"><b><u><font size="3" face ="Arial" color  ="red"><a
href="https://ru.wikipedia.org/wiki/Постимпрессионизм">Постимпрессионизм</a>
</font></u></b> (от лат. post  —  после  и  импрессионизм)  —  собирательное
название основных течений французской живописи конца 19 — начала 20 веков.
    <p><b><font size="4">Импрессионисты:</font></b></p>
    <ol type ="I">
    <li><a href="#z1">Эдгар Дега;</a></li>
    <li><a href="#z2">Винсент ван Гог;</a></li>
    <li><a href="#z3">Эдуард Мане;</a></li>
    <li><a href="#z4">Клод Моне;</a></li>
    <li><a href="#z5">Огюст Ренуар.</a></li>
    </ol>
    Следует заметить, что вставка закладки отличается  от  вставки  обычной
ссылки. Чтобы вставить закладку, в нужной части текста добавляется  тэг  <a>
с атрибутом «name», в котором указывается  имя  закладки.  А  в  месте,  где
должна быть ссылка на закладку, добавляется  тэг  <a>  с  атрибутом  «href»,
который содержит имя закладки, перед которым обязательно указывается  символ
«#». Закладки можно делать как в пределах одной страницы, так и ссылаясь  на
другие страницы.
    Фрагмент страницы с вставленными ссылками (рисунок 6):
                                 Рисунок 6.
    Добавим внизу  страницы  кнопку  при  помощи  тэгов  <button></button>,
содержащую  картинку  и  отправляющую  при  нажатии  пользователя   в   верх
страницы.
    Код кнопки:
    <center><p>  <button>  <img  src="images/palitra.png"  style="vertical-
align: middle"> <b> <font size="5"> <a href="#z6"> Наверх </a> </font>  </b>
</button> </p></center>
    В данном коде атрибут «style»  со  значением  «vertical-align:  middle»
выравнивает надпись на кнопке по центру.
    Получившаяся кнопка (рисунок 7):
                                    [pic]
                                 Рисунок 7.
    Таким образом, конечный результат выполнения задания:
    <html>
    <head>
    <title> Импрессионисты </title>
    </head>
    <body background = "images/fon2.jpg">
    <a name="z6"></a>
    <h2><center> Импрессионисты </center></h2>
    <p><b><font size="4">Виды импрессионизма:</font></b></p>
    <ul type ="square">
    <li>Импрессионизм</li>
    <ul type = "circle">
    <li>Э. Мане</li>
    <li>О. Ренуар</li>
    <li>Э. Дега</li>
    </ul>
    <li>Неоимпрессионизм</li>
    <ul type = "circle">
    <li>Ж. Сера</li>
    <li>П. Синьяк</li>
    </ul>
    <li>Постимпрессионизм</li>
    <ul type = "circle">
    <li>П. Сезанн</li>
    <li>П. Гоген</li>
    </ul>
    </ul>
    <center><img src="images/main.jpg" width="300" height = "200"></center>
    <p align= "justify"><b><u><font size="3" face ="Arial" color  ="red"><a
href="https://ru.wikipedia.org/wiki/Импрессионизм">Импрессионизм</a></font><
/u></b> (франц. impressionnisme, от impression —  впечатление),  направление
в  искусстве  последней  трети  девятнадцатого  —  начала  двадцатого  века,
мастера которого, фиксируя свои мимолетные впечатления, стремились  наиболее
естественно и непредвзято запечатлеть  реальный  мир  в  его  подвижности  и
изменчивости. </p>
    <p align= "justify"><b><u><font size="3" face ="Arial" color  ="red"><a
href="https://ru.wikipedia.org/wiki/Неоимпрессионизм">Неоимпрессионизм</a></
font></u></b> (франц. neo-impressionnisme) — течение в  живописи,  возникшее
во Франции около 1885, когда его главные  мастера,  Ж.  Сера  и  П.  Синьяк,
разработали новую живописную технику дивизионизма.</p>
    <p align= "justify"><b><u><font size="3" face ="Arial" color  ="red"><a
href="https://ru.wikipedia.org/wiki/Постимпрессионизм">Постимпрессионизм</a>
</font></u></b> (от лат. post  —  после  и  импрессионизм)  —  собирательное
название  основных  течений  французской  живописи  конца  19  —  начала  20
веков.</p>
    <p><b><font size="4">Импрессионисты:</font></b></p>
    <ol type ="I">
    <li><a href="#z1">Эдгар Дега;</a></li>
    <li><a href="#z2">Винсент ван Гог;</a></li>
    <li><a href="#z3">Эдуард Мане;</a></li>
    <li><a href="#z4">Клод Моне;</a></li>
    <li><a href="#z5">Огюст Ренуар.</a></li>
    </ol>
    <table cellpadding = "30" border="2" align="center">
    <tr><td    colspan="2"><center><b><font   size="5"   color   =    "red"
face="Arial">Художники</font></b></center></td></tr>
    <tr><td align = "justify"  valign  =  "middle"><p><b><font  size="4"><a
name="z1"></a>Эдгар  Дега</b></p>  Дега  Эдгар  (Degas  Edgar)  (1834–1917),
французский живописец, график и скульптор. </font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/dega.jpg"></td></tr>
    <tr><td align = "justify"  valign  =  "middle"><p><b><font  size="4"><a
name="z2"></a>Винсент ван Гог</b></p> Ван Гог  Винсент  (Van  Gogh  Vincent)
(1853-1890),  голландский  живописец.  В  1869-1876   служил   комиссионером
художественно-торговой фирмы в Гааге,  Брюсселе,  Лондоне,  Париже,  в  1876
работал учителем в Англии. </font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/vangog.jpg"></td></tr>
    <tr><td align = "justify"  valign  =  "middle"><p><b><font  size="4"><a
name="z3"></a>Эдуард Мане</b></p>  Мане  Эдуар  (Manet  Eduar)  (1832-1883),
французский живописец. Учился в парижской Школе изящных искусств у  Т.Кутюра
(1850-1856).</font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/mane.jpg"></td></tr>
    <tr><td align = "justify"  valign  =  "middle"><p><b><font  size="4"><a
name="z4"></a>Клод Моне</b></p> Моне Клод Оскар (Monet Claude)  (1840-1926),
французский живописец.  Учился  в  частных  студиях  в  Париже  (1859-1863),
изучал японскую гравюру на дереве;  испытал  влияние  Камиля  Коро,  Гюстава
Курбе, Эдуара Мане, мастеров барбизонской школы.</font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/mone.jpg"></td></tr>
    <tr><td align = "justify"  valign  =  "middle"><p><b><font  size="4"><a
name="z5"></a>Огюст Ренуар</b></p>Ренуар (Renoir)  Пьер  Oгюст  (1841-1919),
французский живописец, график и скульптор.</font></td>
    <td     align     =      "center"      valign      =      "middle"><img
src="images/renoir.jpg"></td></tr>
    </table>
    <center><p>  <button>  <img  src="images/palitra.png"  style="vertical-
align: middle"> <b> <font size="5"> <a href="#z6"> Наверх </a> </font>  </b>
</button> </p></center>
    </body>
    </html>

2.3. Дополнительные материалы для углубленной работы с языком HTML


2.3.1. Объединение ячеек в таблице

      Следующим  этапом  в  применении  элементов  языка   HTML   становится
углубленное изучение некоторых их аспектов.
      Для закрепления навыков работы с таблицами (так как именно  они  часто
вызывают  наибольшие  затруднения  в  понимании)  учащихся  дается   задание
создать   галерею   художников-импрессионистов.   При   этом   должно   быть
продемонстрировано разное расположение  картинок  в  таблице,  что  возможно
сделать, используя различные виды объединения ячеек таблицы.
      Используя уже известные тэги <table>, <tr>, <td>, а также, где  нужно,
атрибуты «colspan», «rowspan», «align» и  «valign»  создадим  горизонтальную
галерею,  где  картины  выровнены  по  правому  краю  ячеек.  Также  следует
помнить, что для рационального  расположения  картинок,  можно  изменять  их
размеры при помощи атрибутов «height» и «weight» тэга <img>.
      Код для данной галереи:
      <html>
      <head>
      <title> Импрессионисты </title>
      </head>
      <body background = "images/fon2.jpg">
      <h2><center> Импрессионисты </center></h2>
      <table align="center" cellpadding = "20" border="3">
      <tr><td align = "center"  valign  =  "middle"  colspan="3"><p><b><font
size="4" color="red" face="Arial">Винсент ван Гог</font></b></p></td></tr>
      <tr><td     align="right"><img     height      ="50%"      width="70%"
src="images/vangog.jpg"></td>
      <td      align="right"><img      height       ="50%"       width="70%"
src="images/vangogh2.jpg"></td>
      <td      align="right"><img      height       ="50%"       width="70%"
src="images/vangogh3.jpg"></td>
      </tr>
      </table>
      </body>
      </html>
      При этом страница выглядит так (рисунок 8):
[pic]
                                 Рисунок 8.
    Расположим картинки по-другому. Объединим две ячейки первого столбца  в
одну, а второй столбец  оставим  как  есть.  Выровняем  картинки  посередине
ячеек.
    Тогда код таблицы:
    <table align="center" cellpadding = "20" border="3">
    <tr><td align =  "center"  valign  =  "middle"  rowspan="2"><p><b><font
size="4" color="red" face="Arial">Эдгар Дега</font></b></p></td>
    <td align="center" valign =  "middle"><img  height  ="50%"  width="50%"
src="images/dega.jpg"></td></tr>
    <tr><td align="center" valign = "middle"><img height ="50%" width="50%"
src="images/dega2.jpg"></td>
    </tr>
    </table>
    При этом галерея (рисунок 9):
                                 Рисунок 9.

2.3.2. Работа с  бегущей строкой и разделительной линией

    Одним  из  интересных  заданий  при  дальнейшем  изучении  языка   HTML
является  работа  с  бегущей  строкой  и   разделительными   горизонтальными
линиями.
    Учащимся дается задание добавить горизонтальную линию  после  заголовка
страницы и создать движущуюся галерею художника в одной из ячеек таблицы.
    В качестве бегущей строки может быть не только текст,  но  и  картинка,
таблица.
    Непарный тэг горизонтальной линии <hr> имеет несколько атрибутов, таких
как «size»,  «color»,  «width»  и  другие,  которые  помогают  менять  цвет,
толщину, ширину и выравнивание горизонтальной линии.
    Парный тэг бегущей строки <marquee></marquee> также  имеет  достаточное
количество атрибутов: «behavior», «bgcolor», «direction», «loop»  и  прочие,
задающих фоновый цвет бегущей строки, направление движения текста,  скорость
его движения и т. д.
    Код страницы:
    <html>
    <head>
    <title> Импрессионисты </title>
    </head>
    <body background = "images/fon2.jpg"  leftmargin="30"  rightmargin="30"
topmargin="30" bottommargin="30">
    <h2><center> Импрессионисты </center></h2>
    <hr size="6" color ="green" width ="80%">
    <table align="center" cellpadding = "20" border="3">
    <tr><td align  =  "center"  valign  =  "middle"  ><p><b><font  size="4"
color="red"  face="Arial"><marquee  behavior   ="scroll"   direction="right"
>Камиль Писсарро</marquee></font></b></p></td></tr>
    <tr><td  align="center"><marquee  behavior  ="scroll"  direction="left"
loop="-1" scrollamount="9">
    <img height ="60%" width="40%"  src="images/pissarro2.jpg"><img  height
="60%" width="40%" src="images/pissarro3.jpg">
    <img              height               ="60%"               width="40%"
src="images/pissarro4.jpg"></marquee></td>
    </tr>
    </table>
    </body>
    </html>
    В результате выполнения кода страница выглядит так:
                                 Рисунок 10.
    Предложенные задания  позволяют  учащимся  глубже  освоить  возможности
использование таблиц,  а  также  применение  специфических  элементов  языка
HTML,  таких как бегущая строка и горизонтальная линия.
    Разработаны методические рекомендации для обучения основам языка  HTML,
на базе использования  которых  педагог  может  построить  процесс  обучения
работе  с  web-дизайном  страниц  сайта.   Предложенную   последовательность
обучения различным элементам языка можно применять на  различных  учебных  и
внеклассных занятиях.

                                 ЗАКЛЮЧЕНИЕ

      Изучив  проблему обучения основам Web-дизайна  в  теории  и  практике,
можно сделать вывод о том, что формирование знаний  и  умений,  связанных  с
вопросами  Web-дизайна  должно   быть   достаточно   длительным   процессом,
особенностью которого  является  постоянное  обращение  к  ранее  изученному
материалу.
      Оптимальной формой организации   учебной  деятельности  школьников  по
освоению  вопросов,  связанных   с   оформлением   сайтов   может   являться
организация внеклассной работы  в   форме  кружка  «Основы  Web-дизайна»,  в
котором участвуют учащиеся 7-9 классов.
      Достижению  этих  целей  будет  способствовать  следование   следующим
методическим принципам:  принципу  системности  и  принципу  параллельности.
Учитывая принцип системности, в ходе изучения курса  необходимо  выстраивать
в сознании учащихся взаимосвязанную систему понятий. Им  должна  быть  видна
структура  курса,  место  каждого  раздела  и  понятия  в  общей  структуре.
Реализация  принципа параллельности означает, что необходимо  параллельно  и
одновременно  изучать  как  фундаментальные,  основные  понятия,  так  и  те
понятия, которые составляют содержание практического компонента  курса  Web-
дизайна.
      Предложен  тематический  план  кружка  «Основы  Web-дизайна»,  который
ориентирован на использовании языка HTML и формирует понятие о  возможностях
использования каскадных таблиц стилей.
      В поддержку процесса обучения разработаны методические рекомендации  с
системой заданий, выполнение которых подробно разбирается  в  виде  кода,  а
далее реализуется в виде Web-страниц.
      Большое внимание в методических рекомендациях уделено структуре и виду
текста, выравниванию и отступам  текста,  бегущей  строке.  Особое  внимание
обращается на работу с таблицами, так как они  являются  основой  разработки
макета  страницы.  Также  рассмотрены  вопросы  работы  с  фоном   страницы,
использования картинки  в  качестве  фона.  Разбираются  вопросы  размещения
списков на страницах  сайта.  Выделены  задания  для  углубленной  работы  с
учащимися.
      Материалы методических рекомендаций для кружковой работы  также  могут
быть  использованы  при  проведении   уроков,   факультативных   занятий   и
организации проектной работы.

                                 ЛИТЕРАТУРА

        1. Босова Л.Л. Учебник «Информатика» для 7 класс.– 2-е изд.  –  М.:
           БИНОМ. Лаборатория знаний, 2013. – 224 с.
        2. Босова Л.Л. Учебник «Информатика» для 8 класс.– 2-е изд.  –  М.:
           БИНОМ. Лаборатория знаний, 2013. – 278 с.
        3. Босова Л.Л. Методические рекомендации по  преподаванию  предмета
           «Информатика» в 5-9 классах. – М.:  БИНОМ.  Лаборатория  знаний,
           2013. – 145 с.
        4. Босова Л.Л. Учебник  «Информатика»  для  9  класс.–  М.:  БИНОМ.
           Лаборатория знаний, 2013. – 156 с.
        5.  Дидактика  средней  школы:   Некоторые   проблемы   современной
           дидактики / Под ред. М.Н.Скаткина. — 2-е изд. — М.: Просвещение,
           1982. –  302 с.
        6. Дунаев В.А. HTML. Скрипты и стили. – М.: 2014. – 33 с.
        7. Калинин И.А. Информатика. Программа  для  старшей  школы:  10-11
           класы. – М.: БИНОМ. Лаборатория знаний, 2013. – 124  с.
        8. Кит Д. HTML для веб-дизайнеров, 2013. – 236 с.
        9. Лапчик М.П., Семакин И.Г.,  Хеннер  Е.К.  Методика  преподавания
           Информатики: Учебное пособие для студентов пед.  вузов.  –   М.:
           Издательский центр «Академия», 2001. – 624 с.
       10. Лоусон Б. Изучаем HTML. Библиотека специалиста, 2012. – 404 с.
       11. Макфарланд Д. Большая книга CSS.  .  –  Санкт-Петербург:  Питер,
           2012. –  271 с.
       12. Малев В.В.  Общая  методика  преподавания  информатики:  Учебное
           пособие. – Воронеж: ВГПУ, 2005. –  271 с.
       13. Мейер Э. CSS – каскадные таблицы стилей. Подробное  руководство,
           2013 г. – 48 с.
       14. Могилев А.В., Пак Н.И., Хеннер Е.К. Информатика: Учебное пособие
           для студентов пед. вузов. – М.: Издательский  центр  «Академия»,
           2003. –  816 с.
       15. Поляков К.Ю. Информатика. Углубленный уровень:  учебник  для  10
           класса. – М.: БИНОМ. Лаборатория знаний, 2013. – 98 с.
       16. Робсон Э. Изучаем HTML и CSS, 2013. – 76 с.
       17. Семакин И.Г. Информатика и ИКТ: учебник  для  8  класса.  –  М.:
           БИНОМ. Лаборатория знаний, 2012. – 176 с.
       18. Семакин И.Г.   Информатика.  Углубленный  уровень:  методическое
           пособие для 10-11 классов.  –  М.:  БИНОМ.  Лаборатория  знаний,
           2014. – 43 с.
       19. Семакин И.Г. Информатика и ИКТ: учебник  для  9  класса.  –  М.:
           БИНОМ. Лаборатория знаний, 2012. – 201 с.
       20. Сидерхолм Д. CSS для веб-дизайнеров, 2013. – 155 с.
       21. Софронова Н.В. Теория и методика обучения  информатике:  Учебное
           пособие. – М.:  ФГУП, Изд-во «Высшая школа», 2003. – 113 с.
       22. Сухов К.А. HTML. Путеводитель по технологии. – М.: ДМК, 2013.  –
           112 с.
       23. Угринович Н.Д. Информатика и ИКТ: учебник для 9 класса/1-е изд.,
           испр. – М.: БИНОМ. Лаборатория знаний, 2012. – 297с.
       24. Угринович Н.Д. Информатика и ИКТ: учебник для 8 класса/1-е изд.,
           испр. – М.:БИНОМ. Лаборатория знаний, 2012. – 210 с.
       25. Угринович Н.Д. Информатика и ИКТ.  Профильный  уровень:  учебник
           для 10 класса/ 1-е изд., испр. – М.: БИНОМ. Лаборатория  знаний,
           2012. –  387 с.
       26. Фрейн Б. HTML и CSS.  Разработка сайтов для  любых  браузеров  и
           устройств, 2013. –  203 с.
       27. Фримен Э. Изучаем HTML и CSS, 2013. –  314 с.
       28. Хенник Б.  HTML и CSS Путь к совершенству, 2013. – 75 с.
       29. Хоган Б. HTML и CSS. Веб-разработка, 2014. –  214 с.
       30. Хольцнер С. HTML за 10 минут, 2012. –  143 с.

ПРИЛОЖЕНИЕ 1

    Текст для страницы сайта
    Архитектура ЭВМ
    Архитектура ЭВМ включает в себя как структуру,  отражающую  состав  ПК,
так и программно-математическое обеспечение.
    Структура ЭВМ  – совокупность элементов и связей между  ними.  Основным
принципом построения всех современных ЭВМ является программное управление.
    Основы учения об архитектуре вычислительных машин были заложены  Джоном
фон Нейманом.
    Совокупность этих принципов  породила  классическую  (фон-неймановскую)
архитектуру ЭВМ.
    Фон Нейман не только  выдвинул  основополагающие  принципы  логического
устройства ЭВМ, но и предложил ее структуру, представленную на рисунке.






ПРИЛОЖЕНИЕ 2

    Текст для страницы сайта
    Импрессионизм (франц. impressionnisme, от  impression  —  впечатление),
направление в искусстве последней трети девятнадцатого —  начала  двадцатого
века, мастера которого, фиксируя  свои  мимолетные  впечатления,  стремились
наиболее  естественно  и  непредвзято  запечатлеть  реальный   мир   в   его
подвижности и изменчивости. Импрессионизм зародился во французской  живописи
в  конце  1860-х  годов.  Эдуард  Мане  (формально  не  входивший  в  группу
импрессионистов),  Огюст  Ренуар,  Эдгар  Дега  внесли   в   изобразительное
искусство свежесть и непосредственность восприятия жизни.
    Неоимпрессионизм (франц. neo-impressionnisme)  —  течение  в  живописи,
возникшее во Франции около 1885, когда его главные мастера,  Ж.  Сера  и  П.
Синьяк,  разработали  новую  живописную  технику  дивизионизма.  Французские
неоимпрессионисты и их последователи (Т.  ван  Рейселберге  в  Бельгии,  Дж.
Сегантини в Италии  и  др.),  развивая  тенденции  позднего  импрессионизма,
стремились приложить к искусству  современные  открытия  в  области  оптики,
придав  методичный  характер  приемам  разложения  тонов  на  чистые  цвета;
одновременно     они     преодолевали      случайность,      фрагментарность
импрессионистической композиции, прибегали в своих пейзажах и  многофигурных
картинах-панно к плоскостно-декоративным решениям.
    Постимпрессионизм (от  лат.   post   —   после   и   импрессионизм)   —
собирательное название основных течений  французской  живописи  конца  19  —
начала 20 веков. Мастера постимпрессионизма, многие из которых  примыкали  к
импрессионизму,  с  середины  1880-х  годов   искали   новые   выразительные
средства,  способные  преодолеть   эмпиризм   художественного   мышления   и
позволить  перейти  от  импрессионистической  фиксации  отдельных  мгновений
жизни  к  воплощению  ее  длительных  состояний,  материальных  и   духовных
констант. Для периода постимпрессионизма характерно активное  взаимодействие
отдельных   направлений    и    индивидуальных    творческих    систем.    К
постимпрессионизму обычно причисляют творчество мастеров  неоимпрессионизма,
группы "Наби", а также В. ван Гога, П. Сезанна, П. Гогена.
    Импрессионисты:
    Эдгар Дега;
    Винсент ван Гог;
    Эдуард Мане;
    Клод Моне;
    Огюст Ренуар;