Размещено на http://www.allbest.ru/

1

3

Введение

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

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

В результате чего, работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть желали. Так, одним из способов самовыражения стало размещение личных страничек в Internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис, как составление резюме в формате Web-страницы и размещение этой информации в Сети. Важную роль Internet стал играть для научных, учебных и общественных организаций. Подтверждение этому легко найти, выйдя на просторы киберпространства.

Для того, чтобы научиться создавать собственные страницы для WWW необходимо познакомиться с правилами, в соответствии с которыми страницы хранятся на диске компьютера. Любая страница представлена в виде отдельного текстового файла, который можно создать любым текстовым редактором. Так как страница может содержать не только текст, но и множество других элементов (шрифтовое оформление текста, иллюстрации и т. п.), то в текст встраиваются специальные управляющие конструкции, называемые тегами. Весь набор правил, по которым нужно создавать файл с web-страницей и записывать отдельные теги, называется языком разметки гипертекста (HyperText Markup Language, HTML). Браузеры при открытии файла в формате HTML способны расшифровать теги и показать страницу в своём окне так, как она была задумана создателем. В операционной системе Windows файлы web страниц должны иметь расширения "htm" или "html".

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

Различные аспекты тематики настоящего исследования получили отражение в работах отечественных и западных ученых, среди которых можно отметить: М.М.Бежанову, А.М.Вендрова, Н.Вудхеда, И.В.Голубятникова, А.Л.Денисову, Е.А.Долмашева.

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

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

Объект исследования: язык HTML

Предмет исследования: гипертекстовые пособия

Цель исследования: раскрыть специфику языка HTML и на этой основе разработать гипертекстовое пособие.

Задачи:

1. раскрыть сущность понятия языка HTML

2. рассмотреть структуру файла в формате HTML

3. выявить особенности HTML-документа

4. познакомиться с основами создания HTML документа и форматированием текста в HTML

5. разработать гипертекстовое пособие

Для решения задач исследования использовались следующие методы:

анализ психолого-педагогической литературы, синтез, обобщение, классификация.

В структуру данной ВКР входят: введение, три главы, заключение, список литературы. В первой главе раскрываются теоретические основы языка HTML. В первом параграфе рассматривается структура файла в формате HTML. Во втором параграфе представлен HTML-документ и его характеристика.

Вторая глава ВКР посвящена разработке алгоритма создания HTML документа. В первом параграфе этой главы представлены примеры форматирования текста в HTML. Второй параграф раскрывает особенности создания гипертекстовых ссылок. Вторая глава сопровождается рисунками - схемами.

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

Глава 1. Теоретические основы языка HTML

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

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта. Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

1.2 Структура файла в формате HTML

В первую очередь нам потребуется создать файл с расширением "htm" или "html" и открыть его для редактирования в текстовом редакторе (работая под Windows, можно использовать стандартную программу "Блокнот").

Текст для HTML-документа набирается в том виде, в котором его должен показать браузер, а при выделения фрагментов, которые предназначены для разметки документа (тегов), используются угловые скобки (знаки "больше" и "меньше"), например: < или >.

Любой документ HTML начинается с открывающего тега и заканчивается соответствующим ему закрывающим тегом . Закрывающий тег отличается от открывающего наличием косой черты перед названием тега. В языке HTML нет различий между большими и малыми буквами при записи тегов, однако принято записывать открывающий тег большими буквами, а закрывающий - малыми. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тега, называется контейнером (to contain - содержать что-либо). Теги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде называются непарными. Весь файл web-страницы - это по сути дела один большой контейнер HTML (так как начинается и заканчивается ).

Внутри контейнера HTML последовательно записываются два контейнера:

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

2. (тело документа). Этот контейнер содержит всё то, что должен показать браузер внутри своего окна при открытии документа. Если документ содержит только текст, то этот текст нужно записывать именно здесь, если есть другие элементы (графика, таблицы, ссылки и т. д.).

Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and Office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.

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

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

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

Внутри подобной конструкции можно помещать и теги: они не будут восприниматься браузером.

1.3 HTML-документ и его характеристика

Html-документ - это текст, состоящий из HTML-кодов и основного текста документа. Для форматирования текста, задания структуры документа, встраивания ссылок и мультимедиа-объектов в HTML-документах используются специальные кодовые слова, которые называются дескрипторами разметки (тегами).

Итак, рассмотрим основные теги, входящие в каждый Web-документ.

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

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Это та часть документа, которую разрабатывает автор страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.

Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все гипертекстовые документы.

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, NAME, LINK, NEXTID.

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна браузера. Эта особенность часто используется для организации поиска в WWW. Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала назначение документа.

Описание стиля некоторых элементов Web-страницы. В выше приведенном примере назначены шрифты для элементов Н2 и CODE. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление STYLE не обязательно.

Этот элемент содержит служебную информацию, которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент NAME содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание.

Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:

– background=''Путь к файлу фона''

Более простое оформление фона сводиться к заданию его цвета:

– bgcolor=''#RRGGBB''

Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно.

Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно.

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

– text=''#RRGGBB''

Для задания цвета гиперссылок используется атрибут:

– link=''RRGGBB''

Также можно задать цвет для использованных гиперссылок:

– vlink=''RRGGBB''

Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы и фантазия разработчика.

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

Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть. Тогда при указании относительной ссылки можно задать не только имя файла, но и имена папок, в которых он находиться. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. Это полезно в том случае, когда для файлов указанных в документе, есть общий начальный фрагмент пути.

В выражении абсолютной ссылки можно также опустить указание на схему доступа (file://). В этом случае будут учитываться только левая часть абсолютной ссылки до первого левого символа <\>, то есть имя локального диска.

Выводы

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

Глава 2. Алгоритм создания HTML документа

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

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

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

Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация (См. Рис. 1).

Рис. 1.

Здесь стартовым тегом является тег <P>, а завершающим - </P>. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слэш).

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

A) Объявление HTML; B) Заголовочная часть; C) Тело документа.

A) Объявление HTML

<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним - </HTML> (в самом конце документа) (См. Рис. 2).

Рис. 2

B) Заголовочная часть

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE> (См. Рис. 3).

Рис. 3

C) Тело документа

Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML (См. Рис. 4).

Рис. 4

Теперь мы можем написать HTML-код нашей странички:

(См. Рис. 5).

Рис. 5

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

Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.

Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выравнить текст по центру возможно также тегом <CENTER>.

Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием(См. Рис. 6).

Рис. 6

Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями.

Например: (См. Рис. 7).

Рис. 7

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.

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

2.2 Создание гипертекстовых ссылок

Существует два шаблона для создания гипертекстовых ссылок.

Первый шаблон применяется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Internet, файл на локальном диске или метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. Именно на нем должен щелкнуть пользователь, чтобы осуществить переход. Браузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.

Второй шаблон предназначен для тех случаев, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет при использовании. Если ссылка указывает на рисунок, который находиться на локальном диске, она обязательно должна начинаться со слова «file», то есть содержать указание на схему доступа:

– file://Диск:\Путь к файлу

или

– file:///Диск:/Путь к файлу

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

– href=''URL''

или

– href=''Протокол://Адрес ссылки''

Например:

– href=''http://www.netscape.com''

Кодовое слово, стоящее вначале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из «разновидностей» Internet. В этом смысле можно сказать, что Internet - это как бы несколько сетей в одной. У каждой из них существуют свои правила доступа, достоинства, недостатки, свои приверженцы и противники. Но все ее клиенты используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Их можно использовать для связи голосом, передачи факсов, межкомпьютерной связи и т. д.

Главная особенность web-страниц состоит в том, что любая из них может позволить перейти к другой странице, находящейся на том же компьютере или в Интернет. Выглядит это следующим образом: фрагмент документа (текст, картинка или другой объект) выделяется особым образом; при просмотре страницы можно, щёлкнув мышью по этому фрагменту заставить браузер загрузить другую страницу, адрес которой записывается в тексте HTML-документа. По этой причине содержимое страниц называется гипертекстом.

Для выделения фрагмента, являющегося ссылкой, используется контейнер (от слова anchor - якорь). Наиболее важный атрибут тега - это HREF, в качестве значения которого записывается адрес страницы, на которую нужно перейти. Ниже приведён пример вставки гиперссылки:

В качестве адреса в атрибуте HREF записывается либо полный URL сайта или страницы, либо имя файла, содержащего страницу, если она лежит на том же компьютере, что и исходная. Если страница лежит на том же компьютере, в том же каталоге, что и просматриваемая, то в HREF достаточно указать имя файла. Если же она лежит в другом каталоге, то вместо имени протокола пишут "file://", а затем - полный путь к файлу и его имя.

Примеры:

– HREF="main.html"

– HREF="file://c:\WebPages\Book\contents.htm".

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

Чтобы сделать ссылку в пределах одного документа потребуется два шага:

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

2. При добавлении ссылки на "якорь", установленный в п. 1, в атрибуте HREF в кавычках пишут знак "#", за которым следует имя якоря, например: Глава 15.

Выводы

Рассматривая алгоритм создания HTML-документа, можно отметить то, что удобно пользоваться документами в формате HTML, просто создавать HTML документы.

Глава 3. Обучение учащихся созданию HTML-документов

3.1 Программа курса

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

· HTML-формат один из самых универсальных - его «понимает» практически любой компьютер;

· HTML-документ - это не только публикация в Интернете, но и HTML-презентации и различного рода мультимедийные оболочки, предназначенные для просмотра исключительно в локальном режиме;

· HTML-документ заметно компактнее в сравнении со схожими по функциональности документами других форматов.

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

Для учителя информатики важно то, что язык HTML является не только предметом изучения, но и средством обучения учащихся. «В перспективе знания программистов будут направлены на установление обучающих программ в HTML. Он может практически всё, что должен уметь язык программирования обучающих программ, имеет всё, в чём нуждается обучающая программа: графическая часть Internet позволяет переплетать картинки, видео, звук и т.д. и то полное интерактивное средство с обратным каналом связи», - цитата из журнала «Школьные технологии» №4 1998 год. Сейчас на рынке образовательных услуг предлагается множество обучающих программ, электронных учебников, но их практически невозможно модифицировать, адаптировать к конкретной учебной ситуации. Обучающие системы, созданные на основе стандарта HTML, несложно изменить, перестроить в соответствии с целями урока, особенностями обучаемых, для чего необходимо знать основы построения HTML-документов.

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

1. Постановка задачи. Цель разработанного курса: обучение основам создания HTML-документов; назначение: предназначен для школьников, желающих более углублённо изучить соответствующую тему.

2. Формирование обучающего материала. Основа теоретического материала: собственные знания и опыт, сведения из книги Д. Усенкова Уроки Web-мастера, из справочного руководства А. Матросова HTML 4.0, БВХ - Санкт-Петербург, 2003.

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

· изучение теоретического материала;

· работа с динамическими демонстрационными примерами;

· выполнение обучающего теста;

· выполнение практической работы.

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

4. Выбор среды программирования. Учебное пособие выполнено в формате HTML с применением JavaScript программирования для осуществления удобной навигации, организации тестирования, демонстрации динамических примеров.

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

Во многих публикациях, анализирующих опыт применения электронных обучающих систем, отмечается, что их эффективность во многом зависит от качества программного интерфейса, дизайна программы. Эти на первый взгляд второстепенные компоненты оказывают самое непосредственное влияние на мотивацию обучаемых, скорость восприятия материала, утомляемость и ряд других важных показателей. Поэтому при разработке интерфейса, дизайна обучающих систем требуется научно обоснованный, продуманный системный подход. Основные идеи такого подхода можно сформулировать в виде ряда рекомендаций, которые следует учитывать при создании компьютерных обучающих программ. Такие рекомендации сформулированы в статье «Особенности проектирования интерфейса средств обучения». (В. Г. Кречетников кандидат технических наук, доцент, докторант кафедры вычислительной техники Тихоокеанского военно-морского института, «Информатика и образование», № 4, 2002 г.)

гипертекст html пособие

Тематическое планирование

Тема	Количество часов
Основные понятия, структура HTML-страницы	1
Абзацы, заголовки	1
Изменение параметров шрифта	1
Иллюстрации	1
Таблицы	2
Маркированные и нумерованные списки	1
Гиперссылки	2
Цвет и фон	1
Фреймы	2
Каскадные таблицы стилей	2
Итоговая практическая работа	2
Итого	16

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

Содержание обучения

Тема 1. Основные понятия, структура HTML-страницы

Что такое HTML. Разделы HTML-документа. Основные правила построения HTML-страницы.

Учащиеся должны знать:

· понятия тэг, контейнер, заголовок, тело страницы;

· назначение контейнеров, задающих структуру страницы.

Учащиеся должны уметь:

· создавать простейшие HTML-документы, не содержащие форматирования;

· сохранять файлы в html-формате.

Тема 2. Абзацы. Заголовки

Разделение текста на абзацы, перевод строки, выравнивание текста, оформление текста заголовками.

Учащиеся должны знать:

· назначение тэгов <P>, <BR>, <NOBR>, контейнеров заголовков;

· значения параметра ALIGN в составе тэгов <P>, <H*>;

Учащиеся должны уметь:

· оформить текст заголовком и подзаголовками;

· отформатировать текст, части текста, выбрав способ выравнивания.

Тема 3. Изменение параметров шрифта

Шрифтовое оформление текста.

Учащиеся должны знать:

· назначение тэга <FONT> и его параметров;

· контейнеры, управляющие начертанием шрифта.

Учащиеся должны уметь:

· устанавливать тип, цвет, размер шрифта;

· выделять фрагменты текста, изменив начертание шрифта.

Тема 4. Иллюстрации

Встраивание изображений в HTML-документы. Выравнивание изображений, задание размеров изображений, отделение изображений от текста.

Учащиеся должны знать:

· назначение тэга <IMG> и его параметров;

· значения параметров SRC, WIDTH, HEIGHT, ALT, BORDER, HSPACE, VSPACE, ALIGN входящих в состав тэга <IMG>.

Учащиеся должны уметь:

· встраивать изображения в HTML-документ;

· выравнивать изображения в тексте;

· отделять изображение отступами, рамками.

Тема 5. Таблицы

Создание HTML-страниц. Форматирование данных внутри таблицы. Задание цвета рамок таблицы. Задание фонового рисунка для таблицы.

Учащиеся должны знать:

· назначение тэгов <TABLE>, <TR>, <TD>;

· параметры, используемые в составе перечисленных тэгов, и их возможные значения.

Учащиеся должны уметь:

· создавать таблицы с определённой структурой;

· использовать таблицы для задания структуры страницы;

· выравнивать содержимое ячеек таблицы;

· оформлять таблицы, используя фоновое изображение, цветовое выделение.

Тема 6. Маркированные и нумерованные списки

Маркированный список. Маркеры списка. Нумерованный список. Список определений.

Учащиеся должны знать:

· назначение тэгов <OL>, <UL>, <LI>,<DL>,<DD>,<DT>

· значения параметров TYPE, START, VALUE при использовании их в составе перечисленных тэгов.

Учащиеся должны уметь:

· создавать различные виды списков;

· использовать разные способы нумерации, типы маркеров.

Тема 7. Гиперссылки

Ссылки на другие документы и файлы. Внутренние ссылки. Организация ссылок. Правила записи ссылок.

Учащиеся должны знать:

· назначение контейнера <A>…</A>;

· назначение параметров HREF, NAME, TITLE в составе тэга <A>;

· правила записи ссылок;

· назначение параметров VLINK, ALINK, LINK.

Учащиеся должны уметь:

· создавать ссылки на другие документы;

· создавать внутренние ссылки;

· использовать текстовые и графические указатели.

Тема 8. Цвет и фон

Цветовое оформление HTML-документа. Фоновые изображения.

Учащиеся должны знать:

· принцип шестнадцатеричного кодирования цветов;

· назначение параметра BACKGROUND;

· особенности восприятия цвета и фона.

Учащиеся должны уметь:

· задавать фон страницы, ячейки таблицы;

· использовать таблицу цветов.

Тема 9. Фреймы

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

Учащиеся должны знать:

· назначение тэгов <FRAME>, <FRAMESET>;

· что определяют параметры COLS, ROWS, SRC, входящие в состав перечисленных тэгов;

· назначение параметров FRAMEBORDER, FRAMESPACING, NAME, NORESIZE, SCROLLING, MARGINWIDTH, MARGINHEIGHT;

· технологию создания фреймов;

· особенности навигации.

Учащиеся должны уметь:

· разбивать страницу на отдельные кадры;

· определять внешний вид фреймов;

· организовывать гипертекстовые переходы внутри и между фреймами.

Тема 10. Каскадные таблицы стилей

Встраивание таблиц стилей в документ. Применение таблиц стилей. Стилевые свойства цвета и фона, шрифта, текста.

Учащиеся должны знать:

· назначение стилевых таблиц, их достоинства;

· способы внедрения стилей в HTML-документы;

· правила построения стилевых таблиц.

Учащиеся должны уметь:

· определять стиль для отдельного тэга;

· определять стиль для отдельного HTML-документа;

· определять стиль для нескольких HTML-документов.

3.2 Методические рекомендации по использованию электронного обучающего средства

Успех в освоении учебного материала определяется следующими основными видами деятельности:

1. Изучение теоретического материала

2. Работа с демонстрационными примерами.

3. Выполнение обучающих тренировочных тестов.

4. Выполнение практических заданий.

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

Поурочное планирование

Занятие 1. Основные понятия, структура HTML-страницы

Цели занятия:

– Научить создавать простейшие HTML-документы, не содержащие форматирования;

– сохранять файлы в html-формате.

Ход занятия:

1. Постановка учащимся целей изучения данного курса, рассказ о достоинствах HTML-формата, демонстрация примеров HTML-документов, которые они смогут создавать после изучения курса. - (5 мин)

2. Сообщение об истории языка HTML (5 мин).

3. Знакомство со структурой электронного учебника, основными приёмами работы с ним: (5 мин)

– практические задания выполняются с помощью текстового редактора Блокнот;

– при выполнении практических работ, окно браузера не закрывается;

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

4. Самостоятельное изучение теоретического материала. Фронтальный опрос. (15 мин.). Вопросы:

– Что отображается в строке заголовка окна браузера при просмотре HTML-страницы?

– Что такое браузер?

– Назначение тэгов?

– Что такое гипертекст?

– Какова структура имени файла HTML-документа?

5. Выполнение теста и подведение итогов (5 мин.)

6. Практическое задание. Создание шаблона HTML-документа.(10 мин.).

7. Подведение итогов занятия.

Занятие 2. Абзацы. Заголовки

Цели занятия:

– Научить применять тэги <H*>, <P>, <BR>, <NOBR>для форматирования текста;

– использовать значения параметра ALIGN для выравнивания текста и заголовков.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Повторение изученного материала. Выполнение теста № 1. (5 мин.)

3. Самостоятельное изучение теоретического материала. Обратить внимание на работу с демонстрационными примерами. (15 мин.)

4. Фронтальный опрос. (5 мин.). Вопросы:

– Что необходимо сделать, чтобы разбить текст на абзацы?

– Какие различия в действии тэгов <P> и <BR>?

– Для чего предназначен параметр ALIGN?

– Какие он может принимать значения?

– Какова структура имени файла HTML-документа?

5. Выполнение теста и подведение итогов (5 мин.)

6. Практическое задание Применение заголовков. Выравнивание текста.(15 мин.)

7. Подведение итогов занятия.

Занятие 3. Изменение параметров шрифта

Цели занятия:

– Научить применять параметры тэга <FONT> для управления типом, цветом и размером шрифта;

– использовать контейнеры, управляющие начертанием шрифта.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Повторение изученного материала. (5 мин.)

– по виду HTML-документа в окне браузера определить возможные значения параметра AIIGN (можно использовать результаты практических заданий предыдущего занятия);

– выполнение теста № 2.

3. Изучение теоретического материала. При рассмотрении Примера 4 обратить внимание на результат использования вложенных контейнеров, управляющих начертанием шрифта. (15 мин.)

4. Фронтальный опрос. (5 мин.). Вопросы:

– Какие контейнеры используются для выделения фрагментов текста курсивом, подчёркиванием, жирным шрифтом?

– Какие различия в отображении текста заключённого в контейнеры <B><I>…</I></B> и <I><B>…</B><I>?

– Для чего предназначены параметры FACE, SIZE, COLOR?

– Какие они могут принимать значения?

5. Выполнение теста № 3 и подведение итогов (5 мин.)

6. Практическое задание. Выделение фрагментов текста.(15 мин.)

7. Подведение итогов занятия.

Занятие 4. Иллюстрации

Цели занятия:

– Научить встраивать изображения в HTML-документы;

– использовать параметры тэга <IMG> SRC, WIDTH, HEIGHT, ALT, BORDER, HSPACE, VSPACE, ALIGN.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Повторение изученного материала. (5 мин.)

– выполнение теста № 3.

3. Изучение теоретического материала. (10 мин.) После изучения Примеров 6, 7 необходимо сделать выводы:

– желательно, чтобы значения параметров WIDTH и HEIGHT совпадали с реальными размерами рисунков;

– для лучшего восприятия изображение нужно отделить от текста с помощью параметров HSPACE, VSPACE;

– значение параметра BORDER не должно быть слишком большим.

4. Фронтальный опрос. (5 мин.). Вопросы:

– Назовите обязательный параметр тэга <IMG>?

– Какие параметры определяют размер иллюстрации?

– Какие значения они могут принимать?

– Назовите параметры, определяющие взаимное расположение иллюстрации и текста?

5. Выполнение теста № 4 и подведение итогов (5 мин.)

6. Практическое задание Встраивание иллюстраций в HTML-документ. (15 мин.)

7. Подведение итогов занятия.

Занятие 5. Таблицы

Цели занятия:

– Научить создавать таблицы с определённой структурой;

– использовать таблицы для задания структуры страницы;

– выравнивать содержимое ячеек таблицы;

– оформлять таблицы, используя фоновое изображение, цветовое выделение.

Ход занятия:

Сообщение учащимся целей занятия.

1. Повторение изученного материала. (5 мин.)

– выполнение теста № 4.

2. Изучение теоретического материала. (10 мин.)

– после изучения Примера 9 обратить внимание на возможность использования таблиц с нулевой границей для более сложного размещения текста и графики

– при работе с Примером 10 сделать вывод о взаимодействии одних и тех же параметров в тэгах <TABLE>, <TR>, <TD>, указав на общую закономерность.

3. Фронтальный опрос. (5 мин.). Вопросы:

– Укажите значение контейнеров <TABLE>, <TR>, <TD>?

– Перечислите параметры тэга <TABLE>, объясните их назначение?

– Перечислите параметры тэга <TR>, объясните их назначение?

– Перечислите параметры тэга <TD>, объясните их назначение?

4. Выполнение теста № 5 и подведение итогов (5 мин.)

5. Практическое задание. Отображение данных в виде простой таблицы. (15 мин.)

6. Подведение итогов занятия.

Занятие 6. Практическая работа

Цели занятия:

– проверить усвоение материала предыдущих занятий

Ход занятия:

1. Учащимся предлагается распечатка HTML-документа (файл task6.html), для которого они должны будут записать соответствующий код. Исходные материалы: текст (task6.txt), иллюстрации (monitor.jpg, scaner.jpg, printer.jpg, mouse.jpg, acust.jpg, klava.jpg)

2. Проводится обсуждение основных этапов работы, определяются необходимые тэги, их параметры. (10 мин.)

3. Выполнение работы (30 мин.)

4. Подведение итогов занятия.

Занятие 7. Списки

Цели занятия:

– Научить использовать тэги <OL>, <UL>, <LI>, <DL>, <DD>, <DT> для создания различных видов списков;

– использовать параметры TYPE, START, VALUE в составе перечисленных тэгов.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Анализ результатов выполнения практической работы. (5 мин.)

3. Изучение теоретического материала. (10 мин.) При изучении Примеров 11, 12 необходимо обратить внимание на возможность:

– изменения вида маркеров для отдельных элементов списка;

– изменения порядка следования номеров;

4. Фронтальный опрос. (5 мин.). Вопросы:

– Назовите тэги, задающие маркированный список, нумерованный список, список определений?

– Какие параметры определяют вид маркера, номера?

– Какие значения они могут принимать?

5. Выполнение теста № 6 и подведение итогов (5 мин.)

6. Практическое задание. Создание списков различных типов. (15 мин.)

7. Подведение итогов занятия.

Занятие 8. Гиперссылки

Цели занятия:

– Научить создавать ссылки на другие документы;

– создавать внутренние ссылки;

– использовать текстовые и графические указатели.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Повторение изученного на предыдущем уроке. Тест №6 (5 мин.)

3. Изучение теоретического материала. (10 мин.) При рассмотрении правил организации внутренних ссылок просмотреть код страницы занятия.

4. Фронтальный опрос. (5 мин.). Вопросы:

– Объясните значение параметров HREF, TITLE в составе тэга <A>?

– Как организовать ссылку с графическим указателем?

– Для чего и как используются внутренние ссылки?

5. Выполнение теста № 7 и подведение итогов (5 мин.)

6. Практическое задание

1. Создать страничку, следующего содержания

– заголовок: Задание 7.

– текст страницы: Нумерованный список выполненных заданий (с указанием темы), каждый элемент - гиперссылка на соответствующий файл.

1. Сохранить файл в личной папке под именем 7.html

7. Подведение итогов занятия.

Занятие 9. Практическая работа

Цели занятия:

– проверить усвоение материала предыдущих занятий

Ход занятия:

1. Учащимся предлагается задание: Дополнить страничку «Периферийные устройства компьютера» (work1.html), более подробной информацией о каждом устройстве. Организовать внутренние ссылки, использовать как текстовые, так и графические указатели. После каждой статьи предусмотреть возврат на начало страницы. Статьи:

· о мониторах monitor.txt

· о сканерах scaner.txt

· о принтерах printer.txt

· о "мышках" mouse.txt

· об акустических системах acust.txt

· о клавиатурах klava.txt

Работу сохранить под именем work2.html

2. Обсуждение хода выполнения работы (10 мин).

3. Выполнение работы (30 мин.).

4. Подведение итогов занятия.

Занятие 10. Цвет и фон

Цели занятия:

– Научить задавать фон страницы, ячейки таблицы;

– использовать таблицу цветов;

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Анализ результатов выполнения практической работы № 2 (5 мин).

3. Изучение теоретического материала. (10 мин.)

4. Фронтальный опрос. (5 мин.). Вопросы:

– Объясните принцип кодирования цвета?

– Какие сочетания цветов предпочтительнее использовать для оформления документов?

– Каким образом формируется фоновое изображение страницы?

5. Выполнение теста № 8 и подведение итогов (5 мин.)

6. Практическое задание.

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

– В документе 7.html изменить цветовое оформление гиперссылок.

7. Подведение итогов занятия.

Занятие 11. Фреймы

Цели занятия:

– Научить разбивать страницу на отдельные кадры;

– определять внешний вид фреймов;

– организовывать гипертекстовые переходы внутри и между фреймами.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Повторение материала, изученного на предыдущем уроке. Выполнение теста № 8 (5 мин)

3. Изучение теоретического материала. (15 мин.)

4. Фронтальный опрос. (5 мин.). Вопросы:

– В каких случаях используется фреймовая структура?

– Объясните назначение контейнера <FRAMESET>...</FRAMESET>

– Какие параметры, с какой целью используются в составе тэга <FRAMESET>

– Объясните назначение параметров тэга <FRAME>.?

5. Выполнение теста № 9 и подведение итогов (5 мин.)

6. Практическое задание (15 мин.).

– создать страницы с заданной фреймовой структурой, содержимое фреймов страницы 4.html, 2.html, 3.html;

– сохранить с именем 9.html.

7. Подведение итогов занятия.

Занятие 12. Практическая работа

Цели занятия:

– проверить усвоение материала предыдущих занятий

Ход занятия:

1. Повторение материала, изученного на предыдущем занятии. Выполнение теста № 9 (5 мин.).

2. Учащимся предлагается задание: Создать страницу со следующей структурой фреймов:

фрейм 1
фрейм 2	фрейм 3

– фрейм 1: тема страницы «Периферийные устройства компьютера»;

– фрейм 2: маркированный список наименований устройств компьютера, каждый элемент списка - гиперссылка на соответствующую страницу, загружаемую во фрейм 3;

– фрейм 3: статьи об устройствах компьютера.

Страницу сохранить под именем work3.html.

3. Обсуждение хода выполнения работы (10 мин).

4. Выполнение работы (30 мин.).

5. Подведение итогов занятия.

Занятие 13. Каскадные таблицы стилей

Цели занятия:

– Научить определять стиль для отдельного тэга;

– определять стиль для отдельного HTML-документа;

– определять стиль для нескольких HTML-документов.

Ход занятия:

1. Сообщение учащимся целей занятия.

2. Анализ результатов выполнения практической работы № 3 (5 мин).

3. Изучение теоретического материала. (15 мин.)

4. Фронтальный опрос. (5 мин.). Вопросы: