CC BY
13Технология и практика обучения
П.В. Нюхтилин
ТЕХНОЛОГИЯ ФОРМИРОВАНИЯ НАВЫКОВ ВЁРСТКИ У БУДУЩИХ УЧИТЕЛЕЙ
Обучение будущего учителя конструированию учебно-информационных ресурсов (УИР) наиболее рационально начинать именно с овладения навыками вёрстки, поскольку это позволяет создать базу практических возможностей для вывода на визуальное обозрение реального, информационно организованного продукта дидактического назначения.
Здесь принципиально следует исходить из того, что базовым языком разметки принимается язык HTML, поскольку именно этот язык сегодня составляет общемировую основу гиперссылочных программных продуктов. В дебютной стадии изучения языка HTML самое главное дать понятие о разнице между языками разметки и языками программирования, чтобы далее студент никогда визуально не путал язык разметки и программный код. На данном этапе следует акцентироваться именно на визуальных отличиях между языком разметки и кодом, поскольку студент ещё не готов видеть между ними операционную разницу.
Поэтому в первые же часы преподавания теории необходимо с помощью объяснения таких терминов, как «веб-браузер», «интерпретатор» и «компилятор» сформировать более глубокое, расширенное понимание разницы между программированием и вёрсткой через различие в способах представления информации языка разметки и какой-либо программы. Дидактический маршрут решения этой задачи начинается с понятия о том, что язык разметки читается и трансформируется в наглядно-представительский вид специальным программным устройством, которое называется веб-браузер, а программный продукт, перед выводом на пользователя зачастую проходит этап так называемой компиляции. После выхода на эту дистинкцию форм наглядного представления языка разметки и программного кода студента можно считать подготовленным к усвоению основного фактора идентификации языка разметки, проявляющегося в том, что текст HTML в принципе можно использо-
ОБРАЗОВАТЕЛЬНЫЕ ТЕХНОЛОГИИ. № 1/2010
? 129 С
вать визуально, без браузера (то есть он будет читаться), однако увидеть результат работы программы, не запустив её на выполнение, невозможно.
На базе этих параметров идентификации далее целесообразно и в теоретическом цикле обучения, и в практических его фазах называть текст HTML «разметкой», а не «кодом», что раз и навсегда терминологически верно определит классификацию инструмента вёрстки в общем терминологическом реестре программных продуктов.
После этой общетеоретической преамбулы следует ограничить рамки предмета изучения непосредственно языком HTML, использовав для этого экскурс в его историю, начиная непосредственно с SGML и заканчивая появлением параллельного языка разметки XHTML. Это важно не только для того, чтобы студент получил знания о дескрипторах и атрибутах, но и для того, чтобы студент вошёл в мир веб-технологий в том его виде, в каком он пребывает в настоящее время — постоянно трансформируется и развивается. На этом этапе, помимо базовых теоретических знаний о языке разметки, будущий учитель должен осознать, что мир веб-технологий не стоит на месте, что спецификация языка постоянно изменяется. И если в процессе своей педагогической деятельности учитель не будет следить за изменениями в мире разработчиков веб-документов, он может через некоторое время столкнуться с тем, что его HTML-документы начнут отображаться браузерами некорректно.
В настоящее время для создания веб-узлов используется как HTML, так и XHTML (Extensible Hypertext Markup Language). Однако
в процессе обучения конструированию УИрЬ^] следует ограничиться HTML версией 4.01, так как данная спецификация была утверждена в 1999 году. В ней были устранены ошибки версии 4.0 (1997 год), и после этого в разработках HTML наступила концептуальная стагнация, что и позволяет считать данную спецификацию достаточной для того, чтобы получить соответствующий времени уровень навыков вёрстки.
Перед началом изучения первых его элементов следует обратить внимание студентов на обязательную удобочитаемость разметки, иначе в будущем у них возникнут большие трудности в процессе разработки или редактуры самостоятельно свёрстанных HTML-до-кументов. В качестве способа достижения удобочитаемости разрабатываемых студентами гипертекстов наиболее рационально потребовать, чтобы они, начиная с этого этапа и на протяжении всего дальнейшего процесса обучения, придерживались строгих правил формирования документов, ориентированных на стиль разметки преподавателя.
Дальнейшее обучение вёрстке начинается с определения используемых в работе обозначений:
<br clear=«all»> — Дескриптор Ьг имеет один атрибут clear со значение all.
br — имя дескриптора (говорим: дескриптор br);
clear — имя атрибута (говорим: атрибут
clear);
all — значение атрибута (говорим: значение all).
Далее вводится понятие элемента: элемент состоит из открывающего дескриптора, содержания и закрывающего дескриптора.
ТЕОРИЯ И ПРАКТИКА ПРОЕКТИРОВАНИЯ
130,
Содержанием называется всё, что находится между открывающим и закрывающим дескрипторами.
<body>TeKCT</body> — элемент body.
Теперь, когда предмет изучения определён общетеоретически, терминологически, фактуально (версия 4.01) и конвенциально унифицирован в обозначениях, начинается изучение непосредственно HTML. Первой в ряду остальных тем изучается глобальная структура документа. На этом этапе вводятся элементы html, head, title и body. Основные элементы знаний здесь: информация, которая находится внутри элемента head, не выводится браузером на экран, однако она влияет на вывод содержания самого документа, а элемент title — это единственный обязательный элемент внутри элемента head. Здесь же, непосредственно на данном этапе, осуществляется ввод таких понятий, как атрибуты text, link, alink, vlink.
И только после этого начинается работа с текстом и списками, где наиболее важно сфокусировать внимание студента на том, как HTML интерпретирует несколько пробелов, введённых с помощью клавиши клавиатуры SPACE. Когда это твёрдо усвоено, объясняется интерпретация переходов на новую строку, заданных с помощью клавиши клавиатуры ENTER. Ключевыми для данного раздела можно считать следующие дескрипторы: b, strong, i, em, u, sub, sup, hi, h2, ... h6, pre, tt, big, small, center, s, p, div, br, ul, li, hr, font.
С этого момента начинается ветвление дидактических маршрутов изучения HTML, поскольку при описании дескрипторов ul и li придётся обязательно изучить атрибут type со значениями disc, circle, square, 1, a, A, I, i, а так-
же показать студентам, как списки могут вкладываться друг в друга. Именно углублённое изучение каждого из дескрипторов начинает разворачивать систему знаний о языке разметки HTML в её комплексном виде. Например, ни в коем случае не стоит ограничиваться поверхностным описанием дескриптора font. Необходимо подробно изложить те возможности, которые предоставляют атрибуты face и size, а также все способы, которыми можно задавать значение цвета для атрибута color.
После введения всех дескрипторов нужно разобрать атрибуты Align и Valign соответственно с их значениями left, center, right, justify и top, middle, bottom. Необходимо показать, что атрибуты Align и Valign могут использоваться с различными элементами, дать перечень этих элементов и описать, как влияют их значения на отображение текста.
После усвоения данного материала студент уже должен уметь форматировать в HTML-документе текст. И теперь начинается переход к изучению гиперссылок. Первоначально необходимо научить создавать ссылки между документами одного каталога, затем ввести понятия относительной и абсолютной ссылки, далее научить делать внутренние ссылки на якорный элемент и в заключение научить почтовым ссылкам.
Далее следует перейти к операциям внедрения изображений в HTML-документ. Начать необходимо с изучения элемента img, который исполняет функцию вставки графических изображений в документ. Здесь, прежде всего, следует осветить специфику таких форматов, как GIF, JPEG и PNG. Главное в этом процессе добиться того, чтобы студенты чётко пред-
ставляли, для каких изображений предназначаются данные форматы и как наиболее целесообразно их использовать для формирования документов. Затем изучаются способы расположения изображения на веб-странице, для чего изучаются следующие атрибуты: src, alt, height, width, usemap, align, border, hspace, vspace, с разъяснением, почему необходимо всегда указывать размеры рисунков, которые не относятся к фону документа. В заключение рассматривается метод конструирования ссылок из отдельных областей в пределах одного и того же рисунка.
После этого осуществляется переход к изучению одного из самых важных разделов методики практического конструирования — «Таблицы», поскольку в настоящее время в подавляющем большинстве узлов основой визуальной структуры документов служат именно таблицы. Данный переход должен обязательно предваряться изучением понятия о фреймах, для чего достаточно изложить базовые понятия, дать структуру фреймов, рассказать обо всех элементах и атрибутах.
Изучение же самих таблиц начинается с изучения ключевых элементов их вёрстки: table, tr, td и атрибутов border, cellspacing, cellpadding, width, height, rowspan, colspan, nowrap. Сопровождать изучение данных элементов и атрибутов следует демонстрационными мероприятиями вёрстки документов с помощью взаимного вложения таблиц друг в друга как наиболее простого, но трудоёмкого способа макетирования документа. После освоения навыков вложения таблиц друг в друга следует показать, как те же самые доку-
ОБРАЗОВАТЕЛЬНЫЕ ТЕХНОЛОГИИ. № 1/2010 ..............
менты могут быть более эффективно организованы через использование атрибутов rowspan и colspan, чтобы студент наглядно увидел преимущества использования данных атрибутов.
После этого наступает последний по очереди, но не по значимости этап обучения вёрстке — «Формы». При изучении HTML студенту пока ещё трудно увидеть значимость данного раздела, так как широко HTML-формы будут использоваться только при изучении языков программирования и систем управления базами данных. Поэтому нужно обратить внимание на то, что если недостаточно хорошо изучить все элементы и атрибуты, относящиеся к данной главе, то в будущем будет просто невозможно создавать страницы с обратной связью, так как именно формы передают переменные с их значениями сценариям обработки. Необходимо объяснить, что понимается под обратной связью, и перейти к изучению ключевых элементов и атрибутов форм: form, action, method, input, type, text, password, checkbox, radio, submit, reset, file, hidden, image, button name, value, size, maxlength, checked, src, alt, textarea, select, selected, option.
На этом изучение языка разметки HTML заканчивается, и студент получает достаточно твёрдые базовые знания для самостоятельного конструирования простых веб-продуктов дидактического назначения. Начиная с данного этапа, всё дальнейшее обучение будущего учителя веб-конструированию УИР можно квалифицировать как совершенствование навыков вёрстки, полученных при изучении HTML.
$
