Файл: Языки гипертекстовой разметки (Возможности применения технологии HTML в образовательном процессе).pdf

Важную роль играет Сеть в образовательном процессе. Несмотря на растущую популярность клиент-приложений для работы с каким-либо сайтом, основным способом взаимодействия с ресурсами Интернет был и остаётся браузер. Основным способом интерпретации ресурса является язык гипертекстовой разметки HTML. Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в 1986-1991 годах в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, для людей, не являющимися специалистами в области вёрстки.

Язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов – дескрипторов. Дескрипторы часто называют «тегами». HTML помогает создать простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже^[16].

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

Например, тег <table> предназначен для создания в документах таблиц, но иногда используется и для оформления размещения элементов на странице. С течением времени основная идея платформо-независимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении^[17].

Применение технологии HTML в образовательном процессе можно использовать при обучении студентов работе с данным языком разметки. Это начальная ступень web-разработки и её изучение позволит заинтересовать студентов в этом направлении. А применение отдельных страниц и сайтов можно использовать для обучения. Здесь не имеются в виду уже существующие образовательные платформы и сайты. Наверное, самым необходимым online-ресурсом для студентов является расписание занятий (рисунок 4).

Оно же будет и самым сложным в разработке. Не в техническом плане, а во множестве возможностей, предоставляемых HTML. Можно составить простейшую страницу с минимумом украшений, нетребовательную к ресурсам, как клиента, так и сервера. А можно, используя весь функционал разметки и CSS, создать вычурную схему, показывающую не только расписание, но и, например, план здания, фотографию аудитории и преподавателя (что будет особенно полезно для первокурсников).

Рисунок 4. Пример расписания (расписание Центра среднего профессионального образования Елецкого Государственного Университета им. И. А. Бунина)

Предполагается разработка и внедрение индивидуальных проектов для каждого ВУЗа. Конечно, многие из них будут схожими, но необходимо учитывать специфику каждого отдельного учебного заведения на финальной стадии разработки. Другой возможностью применения HTML будет создание учебных пособий, методических указаний, лабораторных работ и других материалов для студентов. Многообразие способов визуализации материала позволит создать наиболее удобный формат подачи для каждого предмета и направления подготовки. Одним из наиболее востребованных возможностей языка разметки в создании учебных материалов – это гиперссылки. Они позволят связать в единую сеть всю программу курса или направления подготовки.

Вышеуказанная возможность применима как в онлайн, так и в оффлайн пространстве. Иной же способ применим только в онлайн. Это wikiпространство университета. В Сети существует множество wiki-проектов. Наиболее известный, конечно, Wikipedia, но существуют проекты, посвященные отраслям науки, искусства, произведениям литературы и кино. Да, в чём-то этот проект будет дублировать предыдущий, но, с другой точки зрения, wiki больше словарь и справочник, нежели учебник (рисунок 5). Таким образом, оба этих проекта имеют право на жизнь^[18].

Рисунок 5. Пример wiki-ресурса (Wiki-учебник)

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

Глава 3. Особенности создания информационного сайта образовательного учреждения

Создание информационного сайта образовательного учреждения с использованием языка гипертекстовой разметки HTML является сегодня востребованным и актуальным на рынке информационных услуг^[19].

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

Создание веб-сайта ОУ – это серьёзный и ответственный процесс, который состоит из нескольких стадий и требует пристального внимания, как со стороны заказчика, так и со стороны исполнителя заказа. Далеко не последнее значение имеет подготовка (предпроектный анализ), предшествующая разработке.

Успех сайта любого образовательного учреждения зависит от того, насколько правильно создатели смогли понять потребности аудитории, то есть ресурс сам по себе должен учитывать не только интересы самого учреждения, но и таких групп пользователей как учащихся, родителей и гостей. Существует несколько способов создания сайта (услуги фрилансеров, привлечение профессиональных веб-дизайнеров, использование конструктора) обладающих своими особенностями, преимуществами и недостатками. Профессиональный подход базируется на использовании системы управления контентом. В системе управления контентом могут находиться самые различные данные: документы, видеозаписи, фотографии, номера телефонов, научные данные и многое другое. Такая система часто используется для хранения, управления, пересмотра и публикации документации. Контроль версий является одним из основных её преимуществ, когда содержимое изменяется группой людей. Если раньше большинство сайтов были статичными и требовали внесения правок в их содержимое вручную, то сейчас динамика развития проектов требует готовности быстро реагировать на изменения и внедрять их с максимальной оперативностью^[20].

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

Механизм работы CMS заключён в схеме разделения содержимого сайта и его дизайна. Пользователю предоставляется возможность выбрать заготовку, которой заранее определено оформление страницы, и останется только заполнить его нужной информацией. Большинство систем управления контентом основывается на использовании визуального редактора — программы, которая позволяет посредством понятного интерфейса добавлять или изменять информацию на сайте^[21].

Стоит отметить, что сайт не состоит из совокупности страниц как таковой, а формируется динамически. Добавленный контент сохраняется в базе данных, и используется при генерации странички после получения соответствующего запроса со стороны клиента. Зачастую CMS используются для блогов, форумов (WordPress, phpBB, vBulletin); интернет-магазинов (Magento, OpenCart, osCommerce); социальных сетей (InstantCMS, Social Engine); персональных сайтов (WordPress, Monstra); корпоративных сайтов (Joomla, Drupal); порталов (DLE, Drupal). Большинство CMS гибко настраиваемы и могут быть использованы для разработки сайтов различной направленности, даже сайтов образовательных учреждений. Преимущества CMS: простота и удобство в использовании; доступ к широкому функционалу за счет дополнений, тем, расширений; возможность создать сайт за короткий промежуток времени; наличие документации^[22].

Для работы по созданию сайта нами был выбран язык гипертекстовой разметки, HTML – стандартизированный язык разметки документов в Интернете. Он отвечает за расположение в документе текстов, рисунков, и таблиц. В HTML нет логических функций, он читается программами-обозревателями (браузерами) и воспроизводят с помощью команд информацию в том виде, в котором многие люди привыкли видеть страницы в Интернете^[23].

Команды в HTML называются дескрипторами, или тегами. Тег (tag - указатель, метка) - это код, идентифицирующий определённый элемент документа, например: заголовок, ссылку, таблицу. Теги заключаются в угловые скобки. Большинство тегов являются парными, то есть для каждого начального тега <Имя> есть конечный тег </Имя>, в котором к имени тега добавляется косая черта "/" (слеш).

Таким образом, то, что написано между <…> - называется тегами, они не видны читателю, заглянувшему на страницу, но хорошо видны браузеру, который видит тег <html> и понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде. В свою очередь тег </html> говорит о том, что документ закончился и от браузера больше ничего не требуется, поэтому он может не производить считывающих действий. Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это язык, отвечающий за визуальное представление документов пользователю. У внешней таблицы стилей имеются свои особые преимущества. Сохранение стилей отдельно от содержания HTML поможет избежать дублирования; облегчит обслуживание; позволит делать изменения для всего сайта в одном месте^[24].

Приступая к разработке сайта-визитной карточки Центра среднего профессионального образования Елецкого Государственного Университета им. И. А. Бунина мы выделили содержательный и эстетический компоненты. Сайт будет содержать основную информацию о Центре СПО (учебную, научную, воспитательную), контакты, фотоматериалы и возможность перехода на основной сайт ЕГУ и Центра СПО. Писать сайт на языке HTML можно в текстовом редакторе «Блокнот», который входит в набор стандартных программ любой операционной системы, поэтому в ходе работы мы будем пользоваться им, а также текстовым редактором Notepad++ для представления кода в более удобном для восприятия виде.

Перед началом работы с текстовым редактором, мы составили макет самого сайта. Перед работой с кодом сайта определяем основные теги, которые мы будем использовать: html - корневой тег документа, который является контейнером веб-страницы; head - в этом теге указываются основные данные, которые касаются генерации веб-страницы (заголовок, стили, мета-теги и так далее); body - основной тег страницы; <!DOCTYPE html> - указывает на тип документа (Doctype); meta - используется для указания метаданных страницы; title - задает непосредственный заголовок страницы (Тег title); H1 - заголовок страницы/статьи (подзаголовки задаются тегами H2H6); P - тег, с помощью которого выделяются абзацы в тексте страницы. HTMLстраницы сайта имеют древовидную структуру. Одни теги могут быть вложены в другие, а те, в свою очередь, - в ещё одни. Это значит, что структура документа определена достаточно четко. Открывающиеся теги (<html>, <head>, <body>) обязательно должны иметь закрывающую пару (</html>, </head>, </body>).

Самый первый тег в нашем коде <html>, а самый последний </html>. Они обозначают границы HTML-документа.

Рисунок 6. Начало кода

Следующий тег <HEAD>. Элемент HEAD обозначает заголовочную часть, и предоставляет браузеру общую информацию о HTML-файле. Под ним с помощью <title> и </title> создадим название страницы, это будет «ЕГУ:: Центр СПО». Сюда ещё вложен элемент meta. Он предназначен для поисковых роботов. Когда поисковый робот обнаружит новый сайт в Интернете, он просмотрит содержимое тегов <meta> и включит указанные ключевые слова (чёрного цвета) в свою базу данных. После заголовочной части идёт тег <body>, и второй снизу конечный тег </body>.

Рисунок 7. <Head> и <meta> теги