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

 текст 

Аналогичные функции выполняет пара команд: текст

Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном формате с помощью команд и .

Ниже приводится формат команд:

текст .

Здесь N - количество столбцов, M - расстояние между столбцами.

«Браузеры», не поддерживающие вывод текста в несколько столбцов, обеспечат вывод текста нормально, в 1 столбец.

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

Для выделения отдельных частей текста можно воспользоваться следующими стилями:

B - жирный (Bold);

I - курсив (Italic);

U - с подчеркиванием (Underline);

S - с перечеркиванием (Strike);

Ниже представлена таблица команд выделения текста.

Отображаемый текст

Запись в формате HTML

Выделение текста жирным шрифтом

Выделение текста жирным шрифтом

Выделение текста курсивом

Выделение текста курсивом

Выделение текста подчеркиванием

Выделение текста подчеркиванием

Выделение текста перечеркиванием

Выделение текста перечеркиванием

Тег <font>…font>- позволяет задать желаемый для отображения шрифт и его параметры. Основными атрибутами тега являются:

• Face - определяет список разделенных запятыми шрифтов, поиск которых браузер должен выполнить в порядке приоритета;

• Color - устанавливает цвет текста. Возможные значения- имена цветов или их 16-ричные коды;

• Size -устанавливает размер шрифта. Возможные значения атрибута:

• Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, представление которого зависит от браузера. Не все браузеры могут представлять все 7 размеров;

• Относительное изменение размера шрифта. Значение «+1» означает «на один размер больше». Значение «-3» означает шрифт на 3 размера меньше. Все размеры относятся к шкале от 1 до 7.

Кроме того, можно увеличить или уменьшить высоту шрифта с помощью команд <Big> и <Small>. Эти команды используются в паре с командами ig> и mall>.

Еще две пары команд:

ub> и ub> - подстрочный индекс, например: H₂SO₄.

up> и up> - надстрочный индекс, например: (a² - b²) = (a - b)(a + b)

Все вышеприведенные команды определяют физическое форматирование символов. Задается конкретное изменение характеристик символов.

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

Цитата

Особо важный текст

Сильное выделение текста

Текст, введенный пользователем

Листинг программы

Последовательность литералов

Имя переменной

Использование специальных символов

В языке HTML символ "<" используется как первый символ каждой команды.

Этот символ не может быть использован для обозначения отношения "меньше". Для отображения на экране символа "<" («меньше») и некоторых других символов в HTML приняты специальные обозначения:

Отображаемый текст

Запись в формате HTML

<

&lt

>

&gt

&

&amp

«

&quot

Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте. Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела: ¹⁰.

Например, в следующей записи исходного текста: (A B) в отображаемом тексте между символами A и B будет 3 пробела.

Таблицы - основной инструмент Web-дизайнера.

В HTML таблицы служат не только для удобного представления данных, но и являются одним из основных средств форматирования и структурирования Web-страницы¹¹.

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

Причин этому две:

• Изменение пользователем размеров окна или шрифтов может исказить внешний вид таблицы или привести к появлению «лишних» полос прокрутки;

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

Тем не менее, таблицы - это единственный сложный элемен HTML, который более или менее одинаково поддерживается всеми браузерами, и зачастую только они показываются единственным приемлемым вариантом оформления страницы¹².

Таблица создается с помощью тега able> … able>.

Команда able> может иметь следующие атрибуты:

• Width= «размер» - задает рекомендуемую ширину таблицы в пикселях или в процентах от ширины окна браузера. Если атрибут не указан, ширина таблицы вычисляется браузером;

• Height= «размер» - задает рекомендуемую высоту отображения таблицы. Если атрибут не указан, высота таблицы вычисляется браузером;

• Border= «пиксели» - задает ширину рамки таблицы в пикселях. Значение по умолчанию равно нулю, т.е. таблица выводится без рамки;

• Cellspacing= «размер» - задает расстояние между ячейками таблицы. Применяется ко всем четырем сторонам ячейки. Значение по умолчанию зависит от браузера;

• Cell; line-height: 150%">Frame - указывает какие части внешней рамки таблицы должны быть видны. Возможные значения:

Void - не показывается ( принято по умолчанию, если border=0);

Above - только верхняя граница;

Below - только нижняя граница;

Lhs - только левая граница;

Rhs - только правая граница;

Hsides - только левая и правая границы;

Vsides - только верхняя и нижняя границы;

Box или border - показывает внешнюю рамку полностью ( по умолчанию, если border>0).

• Rules - указывает, какие части внутренней рамки таблицы должны быть видны. Возможные значения:

None - не показывать внутреннюю рамку(принято по умолчанию, если border=0);

Groups - показывает только границы между группами строк и столбцов;

Rows - показывает только границы между строками;

Cols - показывает только границы между столбцами;

All - показывать внутреннюю рамку полностью(принято по умолчанию, если border>0).

• Align - задает выравнивание всей таблицы относительно содержимого документа

• Dgcolor= «цвет» - задает фоновый цвет всей таблицы;

• Bordercolor= «цвет» - задает цвет рамки таблицы¹³.

Тег <caption> определяет заголовок таблицы. Он должен употребляться только как первый элемент внутри тега <table>. Его содержимым могут быть исключительно текстовые элементы. Единственный атрибут этого тега - align, принимающий значения top(заголовок находится над таблицей) и botton(заголовок под таблицей).

Второй важнейший табличный тег - <tr>…tr> - определяет одну строку таблицы. Его содержимое - один или несколько тегов <th> и <td>. Тег может иметь атрибуты, все они необязательны:

• Align - горизонтальное выравнивание содержимого ячеек строки. Возможные значения:

Left - выравнивание влево;

Center - выравнивание по центру ячеек;

Right - выравнивание вправо;

Justify - выравнивание по левому и правому краю ячеек.

• Valign - Вертикальное выравнивание содержимого ячеек строки. Возможны значения:

Top - выравнивание по верхней части ячеек;

Middle - выравнивание по центру ячеек;

Bottom - выравнивание по нижней части ячеек;

Baseline - выравнивание всей строки по общей базовой линии.

• Bgcollor= «цвет» - задает фоновый цвет строки таблицы.

Тег <td>…td> определяет ячейку данных таблицы. Его содержимым могут быть как блочные, так и текстовые элементы. Очень похож на него тег <th>…th>, определяющий ячейку заголовка таблицы.

Гиперссылки - основа Web.

Как устроена ссылка.

Гиперссылками называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети¹⁴.

Ссылка состоит из «внутренней » части, т.е. URL-адреса документа, на который она указывает, и «внешней», видимой на экране и называемой якорем ссылки (anchor). Якорь может представлять собой слово или группу слов, картинку или ее часть¹⁵.

Для создания гиперссылки служит тег вида

адрес" tange="окно">…,

содержимое которого - текстовый или графический якорь. Атрибут href обязателен, tanget может быть опущен, тогда документ открывается в текущем окне браузера, или указан в виде target="_blank", тогда документ открывается в новом окне. Текст ссылки внутри тега может быть любым.

Средствами HTML нельзя проверить корректность ссылок, ответственность за нее лежит на Web-мастере. Браузер прореагирует на неправильную ссылку лишь тем, что после безуспешной попытки открыть ее выдаст сообщение «Страница не найдена». Якорем ссылки может быть что угодно, и надежным способом узнать, куда ведет ссылка, на самом деле, только два:

• Прочитать URL ссылки в нижней части окна браузера, а именно в строке состояния его окна;

• Щелкнуть правой кнопкой мыши на ссылке, в появившемся меню найти команду копировать ярлык ( или копировать ссылку), а затем в удобной для вас программе выполнить команду вставить.

Оба способа могут быть «отменены» WEB-мастерами. Например, с помощью события onmouseover легко заставить браузер показывать в строке состояния не URL активной ссылки, а все что угодно¹⁶.

Абсолютные и относительные ссылки.

Ссылка, в которой указан URL документа, называется абсолютной.

Относительная ссылка адресует документ, опуская общую адресную часть. Например, если из документа index.html нужно сослаться на документ test.html, находящийся в той же папке, это можно сделать ссылкой вида

<a href="test.html">документ test.html>.

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

Внешние и внутренние ссылки.

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

Внутренние ссылки предназначены для навигации в пределах документа. Они имеют вид <a href="#закладка"> якорь ссылкиa>.

Для создания закладки служит тег вида:

<a name="закладка">якорь закладкиa>.

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

Например, если первое слово документа заключается в тег <a name="start">…a>, то в нижней части можно разместить ссылку вида <a href="#start">к началу страницы…a>, щелчок по которой позволит быстро перейти к началу документа.

Внутренние ссылки удобны и для организации оглавления документа.

Все ссылки, не относящиеся к внутренним, являются внешними. Внешняя ссылка также может содержать адрес закладки в документе. Например, для перехода из текущего документа к закладке с именем x1 документа work.html, находящегося в этой же папке, достаточно записать тег вида <a href="work.html#x1">…a>.

Ссылки на различные виды ресурсов.

Адресовать можно и различные виды ресурсов Интернета. С точки зрения пользователя они отличаются между собой используемым протоколом прикладного уровня. Поскольку протокол указывается в URL гиперссылки, легко сослаться на адрес электронной почты, файловый архив FTP¹⁷.

Самыми распространенными видами ресурсов являются:

HTTP- основной протокол, обеспечивающий доступ к Web-страницам (http://).

FTP- протокол передачи файлов FTP, позволяющий обмениваться файлами с удаленным компьютером(ftp://).

MAILTO- доступ к электронной почте. Вслед за mailto: указывается адрес электронной почты, имеющий общий вид имя@домен (mailto:).

FILE- указывается в качестве протокола при обращении к Web-странице, расположенной на локальной машине (file://).

Управление цветом

Основным способом задания произвольного цвета служит указание его RGB-кода. Этот код строится в виде последовательности трех чисел, задающих интенсивность красного, зеленого и синего цветов. Каждое из чисел может принимать значения от 0 до 255 включительно. Понять, почему у интенсивности цвета 256 значений, очень легко. Дело в том, что с помощью одного байта, содержащего 8 битов, можно закодировать именно столько различных чисел, соответствующих возможным интенсивностям из диапазона 0-255¹⁸.

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

RGB-код записывается в виде #RRGGBB, где RR, GG, BB - указанные в форме шестнадцатеричных чисел интенсивности красного, зеленого, и синего компонентов соответственно. Спецификация языка требует добавления перед кодом символа "#". Так, белому цвету соответствует код #FFFFFF(все интенсивности имеют максимальные значения), черному- #000000 (все интенсивности выключены), красному- #FF0000(полностью вклучена только интенсивность красного компонента), зеленому- #00FF00, синему- #0000FF¹⁹.

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

Цвет:

Название в HTML :

Код:

Черный

Black

#000000

Светло-серый

Silver

#C0C0C0

Серый

Gray

#808080

Белый

White

#FFFFFF

Темно-бордовый

Maroon

#800000

Красный

Red

#FF0000

Пурпурный

Purple

#800080

Фиолетовый (фуксия)

Fuchsia

#FF00FF

Темно-зеленый

Green

#008000

Зеленый

Lime

#00FF00

Оливковый

Olive

#808000

Желтый

Yellow

#FFFF00

Темно-синый

Navy

#000080

Синий

Blue

#0000FF

Темно-циановый

Tean

#008080

Сине-зеленый (циан)

Aqua

#00FFFF

Выбор именно этих цветов в качестве стандартных не случаен. Как легко видеть из таблицы интенсивность их RGB-компонентов принимают только фиксированные значения 00, 80 и FF, т.е. 0, 128 и 255 в десятичной системе счисления(кроме цвета silver). Это гарантирует, что даже устройство с невысоким качеством цветопередачи сможет отобразить такие цвета без значительных искажений²⁰.

Основной цветовой набор HTML-документа указывается через атрибуты тега <body>:

Bgcolor= "цвет" - фоновый цвет страницы;

Text= "цвет" - цвет основного текста страницы;

Link= "цвет" - цвет не посещенных ссылок;

Alink= "цвет" - цвет активной (нажатой в данный момент) ссылки;

Vlink= "цвет" - цвет посещенных пользователем ссылок.

Указывая атрибут color= "цвет" тега <font>, мы можем изменять цвет произвольной части текста.

HTML позволяет изменять фоновый цвет всей таблицы, а также ее отдельной строки или ячейки. Для этого достаточно в теге <table>, <tr>, <th> или <td> bgcolor= "цвет".

Вывод изображения на экран.

Тег <img> связывает с документом HTML графический образ, находящийся во внешним файле. Он может содержаться в любых текстовых и блочных элементах, кроме <pre>. В простейшем случае, тег имеет вид:

<img src= "URL">

Здесь обязательный атрибут src указывает абсолютный или относительный URL-адрес файла, в котором хранится изображение. Этот фаил должен быть в одном из трех форматов, поддерживаемых браузероми (gif, jpeg или phg). Если рисунок не найден или не загружен из-за ошибок связи, на его месте выведется пустая рамка²¹.

Поскольку тег <img> просто определяет место вставки рисунка в документ, закрывающая часть ему не нужна и даже запрещена спецификацией.

Все остальные атрибуты формально не обязательны, но указание атрибутов alt, width и height настоятельно рекомендуется для всех рисунков, кроме «декоративных» или служащих фоном. Атрибут alt задает альтернативный текст, который выводится браузером вместо рисунка, если вывод графических изображений отключен или не поддерживается.

Атрибуты width= "размер" и height= "размер" задают размер рисунка на экране по горизонтали и вертикали соответственно. Эти атрибуты наиболее полезны, когда они указывают точные размеры рисунка в пикселах. Их задание позволяет браузеру в процессе загрузки документа сразу же зарезервировать на странице место для рисунка, что несколько ускорит его отображение и позволяет избежать некрасивых «скачков» содержимого при загрузке.

Так же при работе с рисунком можно использовать атрибут align. Он определяет выравниванием образа относительно окружающего его содержимого документа. Возможные значения атрибута:

Align= "left" - рисунок прикрепляется к текущему левому полю документа. Последующий текст обтекает изображение справа;

Align= "right" - рисунок прикрепляется к текущему правому полю документа. Последующий текст обтекает изображение слева;

Align= "bottom" - нижняя граница изображения выравнивается по базовой линии текущей строки. Это значение установлено по умолчанию;

Align= "middle" - середина изображения выравнивается по базовой линии текущей строки;

Align= "top" - верх изображения выравнивается по самому высокому элементу текущей строки;

Align= "texttop" - верх изображения выравнивается по самому высокому текстовому элементу текущей строки;

Align= "absmiddle" - середина изображения выравнивается по середине текущей строки;

Align= "absbottom" - нижняя граница изображения выравнивается по самым нижним элементам букв текущей строки;

Align= "baseline" - используется некоторыми браузерами как bottom.

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

Атрибут border устанавливает обрамление рисунка. Его цвет соответствует цвету текстовых ссылок. Если атрибут не указан, браузер может автоматически добавлять обрамление рисунка, вставленного в тег ссылки. Запретить обрамлять рисунок можно указанием значения атрибута border = "0".

Для вставки фонового рисунка на Web-страницу существует только один путь - атрибут background= "URL" тега <body>.

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

Рисунки можно использовать в качестве ссылок. Изображение в этом случае достаточно разместить в теге <a href=URL>…a>:

.

Атрибут href тега <a> задает относительный или абсолютный путь к документу, на который указывает ссылка, а атрибут scr тега <img> - путь к графическому файлу²².

Формы

Web-страница является интерактивной по самой своей природе, связанной с использованием гиперссылок. Но это пассивная интерактивность. Подлинная интерактивность, позволяющая получать от посетителей Web-страницы произвольные данные, достигается путем использования форм.

Форма - это средство, позволяющее организовать в домашней странице диалог с ее пользователем²³.

Разработчик домашней страницы создает eё с помощью специальных элементов:

- кнопки,

- списки,

- текстовые строки,

- текстовые поля.

Формы передают информацию программе обработки в виде пар:

Имя поля - Значение поля.

Форма начинается командой <form> и заканчивается командой form>.

Данная команда имеет 2 основных параметра: action и method.

Параметр action является обязательным. Он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода).

Параметр method не является обязательным. Он принимает одно из двух значений: get или post, связанных с методом протокола передачи информации из анкеты.

По умолчанию, method = get .

Пример команды form :

< form action = «sakhalin.ru» method = post >

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

Произвольный текст» >

где:

Input - команда создания управляющего элемента.

Type - параметр, определяющий управляющий элемент.

Submit - значение этого параметра (в данном случае управляющая кнопка).

Name - параметр, задающий имя переменной.

Botton1 - имя переменной.

Value - параметр, задающий текст, отображаемый на управляющем элементе.

Произвольный текст - значение текста на управляющем элементе.

Ниже приводятся основные типы управляющих элементов Input²⁴.

1. Текстовая строка: Type=text определяет окно для ввода одной строки текста.

Параметр Size задает размер окна в символах.

Пример:
<Input type = text Name= «text1» Size = 30 Value= «Введите текст» >
В полученное окно, в котором будет изображаться текст: Введите текст, вы можете ввести любой текст или оставить записанный начальный текст «Введите текст» без изменений.
При нажатии кнопки submit в программу обработки будет передано:
text1=Введите текст (или другой, измененный текст).
При необходимости ограничить длину текста n , применяйте дополнительный параметр: Maxlength= n.

2. Окно для ввода пароля: Type=password ,аналогичен типу text , но при вводе каждый символ заменяется символом " * ".

Пример:

Надо ввести пароль длиной не более 5 символов.
<Input type=password Name= pass Size= 10 Maxlength= 5 >

3. Текстовое окно: Textarea.

Задается в следующем виде:

<Textarea Name= text3 Cols= 30 Rows= 5 Wrap=Virtual> Первоначально заданный текст Textarea>

Параметр Cols задает количество символов в строке, параметр Rows задает количество строк в окне, необязательный параметр Wrap=Virtual задает линейку прокрутки.

4. Радиокнопка: Type=radio.

Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением параметра Name), но они будут взаимоисключающими: может быть нажата (Checked) только одна из них.

Пример:

Красная» checked> Красная

Синяя» > Синяя

Зеленая» > Зеленая

Мы получили 3 кнопки, из них отмечена Красная. При нажатии на другую кнопку предыдущая освобождается. Допустим, мы нажали Синюю кнопку, тогда при нажатии на кнопку submit в программу обработки будет введено:color=Синяя

5. Помеченный квадрат: Type=checkbox.

В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами.

6. Скрытый текст: Type=hidden.

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

7. Меню: Select.

Пусть Вам представилась возможность выбрать одну из путевок в соответствии со следующим списком:

Путевка в Сочи

Путевка в Париж

<Option Value = «tour3» > Путевка на Колыму

Если Вы выбрали Путевку в Париж, то при нажатии на кнопку submit в программу обработки будет введено: script = tour2

Команда Select может содержать атрибут Multiple, при котором можно выбрать несколько элементов меню одновременно. Высоту окна можно задать атрибутом Size=n. Если в строке Option задан атрибут checked, то данный элемент задается по умолчанию.

8. Кнопка ввода: Type=submit

Это и есть та самая кнопка, о которой мы так часто вспоминали.

Ввод данных» >

9. Кнопка отмены: Type = reset

Кнопка выполняет инициализацию начальными значениями всех полей.

<Input type=reset Value= «Очистить поля» >

Метатеги и их назначение

Метатеги предназначены для описания свойств документа в целом.

Каждый тег <meta> содержит пару атрибутов: название свойства в атрибуте name и его значение в атрибуте content, например, следующий распространенный метатег задает имя автора документа:

<meta name= "Author" content= "А.С. Пушкин" lang= "ru">.

Атрибут lang указывает здесь язык, на котором описано значение свойства.

Многие поисковые системы используют свойства description (описание документа) и keywords(ключевые слова) для извлечения дополнительной информации. При этом описание должно быть кратким (до 180 - 200 символов), а список ключевых слов следует разделять запятыми:

<meta name= "description" content= "Изучение основных возможностей языка HTML">

учебник">²⁵

Достаточно часто поддерживается свойство robots, содержащее указания для поисковых машин. Значение свойства robots - это список директив, разделенных запятыми:

• Index - страница должна быть проиндексирована поисковой машиной;

• Noindex - страница не должна быть проиндексирована;

• Follow - следовать по гиперссылкам на странице;

• Nofollow - не следовать по гиперссылкам на странице;

• All - то же, что"index, follow" (принято по умолчанию);

• None - то же, что "noindex, nofollow".

Вместо атрибута name метатег может содержать http-equiv, указывающий, что в атрибуте content указана информация прикладного протокола HTTP. Таким способом задается ряд важных свойств документа.

2 глава. Методика изучения раздела в школьном курсе информатики

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

Общеобразовательные цели:

• освоение знаний о структуре Web-документа, основных элементах языка разметки гипертекста, основах Web-дизайна;

• овладение умениями применять на практике полученные теоретические знания, работать в среде редакторов HTML

• освоение технологий проектирования с опорой на виды информационной деятельности;

Воспитывающие цели:

• формирование целостного восприятия окружающего мира;

• воспитание бережного отношения к результатам информационной деятельности человека;

• воспитание эстетического восприятия.

Развивающие цели:

• формирование и развитие приемов умственного труда;

• развитие логических приемов: анализа, синтеза, абстрагирования, обобщения.

По окончанию изучения темы «Основы языка гипертекстовой разметки документов» учащиеся должны:

Знать:

• понятия гипертекст, web-сайт, web-страница;

• назначение языка HTML;

• основные теги;

• технологию оформления web-документов.

Уметь:

• применять теги языка HTML;

• работать в среде редакторов HTML;

• включать графическую иллюстрацию в web-документов;

• помещать гиперссылку в web-документ;

• выбирать тему проекта и описывать проблему;

• составлять план работы над проектом;

• подбирать и систематизировать материал в соответствии с выбранной темой проекта;

• подбирать программный инструментарий для создания проекта;

• создать проект, используя освоенные в курсе программные среды и технологию работы в них;

• защитить проект.

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

С разделом «Основы языка гипертекстовой разметки документов» учащиеся знакомятся еще в 9 классе, но подробнее изучение отводится на старшую школу.

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

Умение представлять информацию в виде, удобном для восприятия и использования другими людьми, - одно из условий образовательной компетентности ученика технологического профиля. Web-сайт - наиболее популярное и доступное старшеклассникам средство представления текстовой, графической, и иной информации в сети Интернет.

Для изучения всех тонкостей при создании Web-страничек в старшей школе можно ввести элективные курсы:

• «Создаем школьный сайт в интернете» М.Ю Монахов, А.А. Воронин;

• «Технология создания сайтов» А. В. Хуторской, А.П. Орешко.

2.3 Анализ учебной и методической литературы

Методика обучения основам языка гипертекстовой разметки документов представлена в рамках курсов широко известных авторских коллективов:

• «Информатика и информационные технологии», Гейн А.Г., 8-9классы.

• «Информатика. Базовый курс», Угринович Н.Д., 8-9 классы.

• «Информатика и ИКТ. Базовый уровень», Угринович Н.Д., 10-11 классы.

• «Информатика и ИКТ. Профильный уровень», Угринович Н.Д.,
  10-11 классы.

Рассмотрим подробнее курсы этих авторов.

• «Информатика и информационные технологии», Гейн А.Г.,8-9 классы.
  Тема представлена в учебнике за 9-й класс главе 3 «Хранение и поиск информации».

В §25 «HTML- язык описания электронных документов» дается определение языка разметки гипертекста, объясняется структура html-документа и рассматриваются теги форматирования текста.

В §26 «Первое знакомство с «отмеченными объектами».» показываются теги создания гиперссылок и вставки картинок.

В §27 «Как оформить HTML-страницу» показывается прием оформления web-страниц, который основывается на работе с тегами создания таблицы.

• «Информатика. Базовый курс», Угринович Н.Д., 8-9 классы.

В данном курсе раздел «Основы языка гипертекстовой разметки документов» изучается в 9-ом классе в Главе 5 «Коммуникационные технологии» пункте 5.7 «Разработка Web-сайтов с использованием языка разметки гипертекста HTML».

Учащиеся знакомятся:

• со структурой HTML документа;

• с тегами форматирования текста на web-странице;

• с тегом вставки изображения ну web-страницу;

• со способом создания гиперссылок в web-документе;

• с тегами создания списков;

• с интерактивными формами на web-страницах (дополнительно).

При изучении данного курса учащиеся смогут объяснить структуру документов сети интернет, воспользоваться основными конструкциями языка разметки гипертекста при создании простейших web-сайтов.

• «Информатика и ИКТ. Базовый уровень», Угринович Н.Д., 10-11 классы.

В старшей школе на базовом уровне тема «Основы языка гипертекстовой разметки документов» изучается в учебнике за 10-й класс в Глава 2 «Коммуникационные технологии». Теория представлена в пункте 2.13 «Основы языка разметки гипертекста».При изучения этого пункта учащиеся вспоминают теорию изученную в 9-ом классе. Также в учебнике представлена практическая работа 2.11 «Разработка сайта с использованием web-редактора.». При выполнении которой учащиеся создают web-страницы «Рост интернета» с помощью web-редактора «Компановщик».

• «Информатика и ИКТ. Профильный уровень», Угринович Н.Д.,
  10-11 классы.

В старшей школе на профильном уровне изучение темы начинается в
11-ом классе в Главе 5 «Коммуникационные технологии» пункте 5.2 «Интерактивные формы на Web-страницах». В подпункте 5.2.1 «Структура HTML-кода Web-страницы» актуализируются знания, полученные по этой теме в основной школе. В подпункте 5.2.2 «Создание интерактивных Web-страниц» рассказывается о тегах, с помощью которых создаются элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д.

В практической работе 5.3 «Разработка интерактивной Web-страницы с использованием Web-редакторов» учащиеся изучают Web-редакторы:

• Microsoft Office FrontPage 2003;

• Microsoft Office SharePoint Designer 2007;

• Macromedia Dreamweaver 8;

• Microsoft Visuals Web Developer 2005 Express Edition.

• «Информатика и ИКТ» Быкадоров Ю.А. 8 класс.

Тема раскрывается совсем кратко в Главе 7 «Информационные ресурсы Интернета».

В §55 «Всемирная паутина» даются определения Web-службы, Web-страницы, Web-адреса страницы, гиперссылки, гипертекста, сайта.

В §59 «Подготовка публикаций в Интернете с помощью текстового редактора Word» говорится о понятии языка HTML, структуре тега и рассматривается создание Web-страницы с помощью текстового редактора Word.

Тема не рассматривается в рамках курсов авторских коллективов:

• «Информатика и ИКТ», под ред. Макаровой Н. В., 8-9 класс;

• «Информатика и информационно-коммуникационные технологии». Базовый курс. Семакин И.Г. , 8-9 класс.

Также при изучении данного раздела преподаватель может воспользоваться статьёй «Создание Web-страниц с помощью HTML» Е.Н. Новоселова, И.Р. Кадырова из журнала «Информатика и образование». Статья разделена на части, которые находятся в нескольких номерах журнала.

В №11 за 2004г. рассматриваются вопросы:

• Планирование сайта в целом;

• Планирование отдельных страниц;

• Инструментарий для создания Web-страниц(обычные текстовые редакторы, HTML-редакторы, WYSIWYN-редакторы);

• Навигация по сайту;

• Публикация сайта;

• Работа с поисковыми сервисами. Метатеги;

• Что такое HTML;

• Структура документа;

• Создание заголовков разных уровней;

• Оформление горизонтальных и вертикальных линий.

Даются советы для начинающих сайтостроителей,

В №12 за 2004г. разбираются вопросы:

• Шестнадцатеричные коды цветов;

• Web-цвета;

• Кодирование спецсимволов;

• Фон Web-страницы;

• Фиксированный фон;

• Оформление текста (абзац, разрыв строки, выравнивание текста в абзаце, теги форматирования абзацев, задание шрифта, контейнеры увеличения и уменьшения размера шрифта, контейнеры для шрифтового выделения).

В №1 за 2005г. освещены вопросы:

• нумерованные списки;

• маркированные списки;

• многоуровневые списки).

В №2 за 2005г. рассматриваются вопросы:

• создание таблиц;

• выравнивание данных в ячейке;

• объединение ячеек таблицы;

• общие параметры таблицы.

В №3 за 2005г. разбираются вопросы:

• вставка иллюстраций;

• задание размеров иллюстрации;

• задание рамки вокруг рисунков;

• альтернативный текст;

• совместная верстка рисунка и текста с помощью таблицы;

• обтекание изображения текстом;

• задание отступов по краям рисунка;

• использование таблиц при обтекании изображения текстом.

Рассмотрим подробнее элективные курсы по изучению данного раздела:

• «Создаем школьный сайт в интернете» М. Ю. Монахов, А.А. Воронин

Данный элективный курс предназначен для учащихся 10-11 классов информационно-технологичекого, физико-математического, естественно-научного и гуманитарного профилей.

УМК содержит:

• Учебное пособие:

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

• CD-ROM:

Содержит следующие папки:

• В папках Chapter <номер главы> - файлы, используемые для иллюстрирования отдельных вопросов в главах книги.

• В папке HTML40r - спецификация языка HTML 4.0 .

Можно выделить следующие цели курса:

• Получить профессиональные навыки создания сайтов в Интернете.

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

Задачами данного курса являются:

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

• Модульность построения учебного материала, уровневый подход к формированию системы заданий;

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

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

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

• Проведение теоретических и практических занятий по тематике курса;

• Выбора различных заданий для самостоятельной работы;

• Углубленного изучения тематики посредством подготовки рефератов;

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

Упор в освоении курса сделан на практические занятия, доля которых составляет 85 % от объема всего курса.

В элективном курсе рассматривается следующий теоретический материал:

• История развития, возможности, типовые инструменты и средства глобальной сети Интернет;

• Основные этапы и задачи проектирования модели Web-сайта как системы;

• Основные способы создания Web-страниц;

• Основные конструкции языка гипертекстовой разметки документов HTML;

• Основные способы защиты информации в Интернете.

После изучения курса учащиеся должны научиться:

• Выполнять поиск необходимой информации в Интернете;

• Выполнять системное проектирование модели Web-сайта, выделяя и реализуя элементы, связи, функции;

• Создавать Web-страницы, собирать и устанавливать Web-сайт, принимать меры по защите информации;

• Работать в команде над одним проектом, выполняя разные роли.

Курс рассчитан на одно полугодие. Занятия проводятся по два часа в неделю. В рамках курса общим объемом 35 ч предполагается развитие пользовательских навыков работы с ПЭВМ, применение готовых программных продуктов, облегчающих и автоматизирующих создание веб-сайта и его управление.

Рассмотрим подробнее каждую главу:

• Глава 1. Осваиваем интернет.

Содержит:

• Структура сети интернет;

• Виды доступа к интернету;

• Принципы функционирования сети;

• Сервисы Интернета;

• Программы просмотра (браузеры);

• Глава 2. Создаем среду сайта.

Состоит:

• Функции Web-сервера;

• HTTP-сервер Apache. Установка и настройка.

• Глава 3. Определяем функции сайта.

Состоит:

• Виды сайтов;

• Функции сайта.

• Глава 4. Проектируем внешний вид сайта.

Состоит:

• Создание стартовой страницы;

• Прочие страницы сайта: дизайн и навигация;
  (приводится пример разработки эскиза веб-страницы).

• Глава 5. Проектируем карту сайта.

Содержит:

• Карта сайта;

• Виды карт сайта;

• Файловая структура сайта;

• Глава 6. Создаем свою первую веб-страницу.

Состоит:

• Автоматизированный способ создания веб-страниц;

• Режим теговой разметки;

• Глава 7. Подключаем графические объекты.

Содержит:

• Использование редактора MS WORD;

• Создание прозрачного фона в редакторе Adobe PhotoPhop;

• Теговое включение графики;

• Глава 8. Выполняем верстку страницы.

Содержит:

• Визуальное создание таблиц в редакторе MS Word;

• Теговое создание таблиц;

• Создание фреймовой структуры;

• Глава 9. Собираем и публикуем сайт на веб-сервере

Содержит:

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

MS Word;

• Теговое создание гиперссылок;

• Управление фреймами;

• Копирование сайта на сервер;

• Тестирование сайта;

• Глава 10. Оживляем сайт.

Содержит:

• Создание анимированного изображения;

• Оптимизация анимации;

• Глава 11. Защищаем сайт.

Содержит:

• Основные правила обеспечения безопасности сервера;

• Основные параметры защиты HTTP-сервера Apache;

• «Технология создания сайтов» А. В. Хуторской, А.П. Орешко.

Элективный курс «Технология создания сайтов» является предметом по выбору для учащихся 10 или11 классов старшей профильной школы. Курс рассчитан на 70 часов, которые проводятся в течение учебного года по 1 часу в неделю. Возможно, и более сжатое по времени изучение курса с использованием проектного метода обучения или технологии «погружения».

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

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

В УМК входит:

• учебное пособием для учеников;

• методические рекомендации для учителя.

Цели курса:

• Научить учащихся ориентироваться и продуктивно действовать в информационном Интернет-пространстве, используя для достижения своих целей создаваемые Web -ресурсы;

• Сформировать у них целостное представление об информационной картине мира средствами «Всемирной паутины». Научить способам представления информации в сети Интернета;

• Познакомить со способами научно-технического мышления и деятельности, направленными на самостоятельное творческое познание и исследование информационной части сетевого пространства;

• Реализовать коммуникативные, технические и эвристические способности учащихся в ходе проектирования и конструирования сайтов;

• Сформировать элементы информационной и телекоммуникационной компетентности по отношению к знаниям, умениям и опыту конструирования Web -сайтов.

Задачи курса:

• Познакомить с видами Web -сайтов, их функциональными, структурными и технологическими особенностями;

• Сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения Web -сайта;

• Дать первичные навыки программирования на языках HTML, Dynamic HTML, CSS; познакомить с основами Web -дизайна;

• Научить основам работы с программами Dreamweaver и Flash(или аналогичными);

• Сформировать навыки работы в коллективе с комплексными Web-проектами;

• Создать и разместить в сети Интернета собственный Web -сайт по выбранной тематике.

Основной тип занятий - практикум. Большинство заданий курса выполняется с помощью персонального компьютера и необходимых программных средств. Доступ в Интернет желателен, но не обязателен. Многие работы ученики могут осуществлять без подключения к сети.

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

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

• знают принципы и структуру устройства «Всемирной паутины», фор­мы представления и управления информацией в сети Интернета;

• умеют найти, сохранить и систематизировать необходимую ин­формацию из сети с помощью имеющихся технологий и программного обеспечения; владеют браузерами IE, NN, Opera;

• умеют спроектировать, изготовить и разместить в сети Web-сайт объемом 5-10 страниц на заданную тему;

• умеют программировать на языках HTML, Dynamic HTML, CSS на уровне создания не менее 3-5 соответствующих элементов сайта;

• владеют способами работы с изученными программами (редакто­ры сайтов, Flash, FTP и др.);

• умеют передавать информацию в сеть Интернета с помощью протокола FTP, специальных программ, Web-форм;

• знают и умеют применять при создании Web-страницы основные принципы Web-дизайна;

• владеют необходимыми способами проектирования, создания, размещения и обновления Web-сайта;

• знают виды Web-сайтов, способны произвести анализ и сформули­ровать собственную позицию по отношению к их структуре, содержа­нию, дизайну и функциональности;

• владеют приемами организации и самоорганизации работы по изготовлению сайта;

• имеют положительный опыт коллективного сотрудничества при конструировании сложных Web-сайтов;

• имеют опыт коллективной разработки и публичной защиты со­зданного сайта;

• способны осуществлять рефлексивную деятельность, оценивать свои результаты, корректировать дальнейшую деятельность по сайтостроительству.

Содержание курса

Глава I. Моя Web-страничка (6 ч)

Основные понятия: гипертекст, HTML, тег, браузер, Web-страница, разметка, структура документа, заголовок, тело.

Глава II. Графика (4 ч)

Основные понятия: растровый формат, векторный формат, метафай­лы, рамка изображения, выравнивание, обтекание.

Глава III. Гипертекстовый документ (6 ч)

Основные понятия: организация информации, гипертекстовые ссыл­ки, внутренние ссылки, активные ссылки, посещенные ссылки, абсолют­ные адреса, относительные адреса.

Глава IV. Виды сайтов (4 ч)

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

Глава V. Основы HTML (8 ч)

Основные понятия: списки, таблицы, фреймы, формы, метатеги, интерактивность.

Глава VI. Редакторы сайтов (8 ч)

Основные понятия: редактор Web-страниц, активные элементы, дина­мический язык, сценарий, баннер, сервер, администрирование.

Глава VII. Дополнительные возможности создания Web-страниц (6 ч)

Основные понятия: каскадные таблицы стилей, CSS, селектор, Flash, символ, клип, кнопка, анимация движения, анимация формы, Dynamic HTML, интерактивность, сценарии, статические и динамические страни­цы, активные элементы.

Глава VIII. Основы Web-дизайна (8 ч)

Основные понятия: дизайн, векторная и растровая графика, графи­ческий редактор, инструменты, фильтры, графические примитивы, па­литра цветов, формат графического файла, заголовки, текст, разделы, ссылки, термины, эффективность рекламы.

Глава IX. Размещение, «раскрутка» и поддержка сайта в сети (4 ч)

Основные понятия: Интернет, IP-адрес, домен, провайдер, хостинг, трафик, доступ по коммутируемым каналам, выделенная линия, модем, скорость передачи информации, администрирование сайта, протоколы FTP, TCP/IP, HTTP, релевантность запросов, скорость загрузки, критичность размеров файлов изображений и Web-страниц, электронная почта, реклама, снам, статистика, посещаемость страниц сайта, счетчик, поис­ковые системы, поисковые роботы, рейтинг ресурса, баннер, метатеги, ключевые слова, содержание, заголовки страниц, эффекты дизайна, инте­рактивность, баннерный обмен, обмен страницами.

Глава X. Проектирование сайта (4 ч)

Основные понятия: концепция сайта, цели сайта, структура сайта, пользователи, навигация.

Глава XI. Зачетная работа (10 ч)

Основные понятия: тема и структура Web-сайта, проектирование, изготовление, размещение, тестирование сайта, экспертная оценка.

Глава XII. Олимпиада по Web-дизайну (2 ч)

Основные понятия: логотип, фирменный стиль, баннер, макет, гра­фика, дизайн.

2.4 Тематическое планирование по разделу. Различные варианты

9 класс

(УМК Угриновича Н.Д.)

№

Тема

3ч.

1

Разработка Web-сайтов с использованием языка разметки гипертекста (HTML - HyperText Markup Language).

1

2

Форматирование текста. Вставка графики и звука. Гиперссылки

1

3

Практическая работа №35 «Разработка простого Web-сайта»

1

11 класс

Физико-математический профиль

Объем - 2 часа в неделю (140 часов в год)

(УМК Угриновича Н.Д.)

№ урока

Разработка Web-сайтов

8ч.

1

Web-сайты и Web-страницы. Форматирование текста и размещение графики

1ч.

2

Практическая работа №28 «Web-сайты и Web-страницы. Форматирование текста и размещение графики»

1ч.

3

Гиперссылки на Web-страницах

1ч.

4

Практическая работа №29 «Гиперссылки на Web-страницах»

1ч.

5

Формы на Web-страницах

1ч.

6

Практическая работа №30 «Формы на Web-страницах»

1ч.

7

Инструментальные средства создания Web-стран

1ч.

8

Контроль знаний и умений: защита проекта

1ч.

11 класс

Информационно-технологический профиль.

Объем - 4 часа в неделю (280 часов в год)

(УМК Угриновича Н.Д.)

Данное тематическое планирование составлено на основе авторского планирования курса информатики профильного уровня Угриновича Н.Д. (Угринович Н.Д. Преподавание курса «Информатика и ИКТ» в основной и старшей школе: Методическое пособие для учителей. - М.: БИНОМ, 2004. - 139 с. - С.67-79.). Тематическое планирование включает в себя тематику теоретических и практических занятий с отведенным на их изучение количеством часов, перечень необходимого программного обеспечения. В планировании отдельно выделен минимальный перечень практических работ на ПК, которые необходимы для реализации практической составляющей курса информатики. Так же в планировании отведено время для проведения контрольных работ.

11 класс

Информационно-технологический профиль.

Объем - 4 часа в неделю (280 часов в год)

(УМК Угриновича Н.Д.)

№ урока

Название темы

Кол-во часов

1-2

Разработка Web-сайтов с использованием языка разметки гипертекста (HTML - HyperText Markup Language). Форматирование текста. Вставка графики и звука. Гиперссылки.

2

3-4

Формы на Web-страницах.

2

5-6

Разработка Web-сайтов

2

7-8

Разработка Web-сайтов

2

9-10

Инструментальные средства создания Web-страниц. Тестирование и публикация Web-сайта.

2

11-12

Тестирование, выполнение зачетной практической работы

2

2.5 Разработка планов проведения занятий

1.План-конспект урока из раздела " Основы языка гипертекстовой разметки документов"

Учебник: Угринович Н.Д "Информатика и ИКТ" 9 кл.

Тема:" Как создать Web-сайт?" (для 9 класса)

Цели:

Образовательные:

• Сформулировать основные принципы создания web-страниц;

• Познакомить учеников со структурой web-документа;

• Формировать навыки и умения создания простейших web-страниц.

Развивающие:

• Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

Воспитательные:

• Воспитывать аккуратность, внимательность, вежливость и дисциплинированность.

Тип урока: урок изучения нового материала

План урока:

1. Организационный момент.(2 мин.)

2. Актуализация опорных знаний.(2 мин.)

3. Изложение нового материала.(20 мин.)

4. Закрепление изученного материала (работа на компьютере).(20 мин)

5. Итоги урока, домашнее задание.(1 мин.)

Оборудование: мультимедийная система, слайды, компьютеры.

Ход урока:

1. Организационный момент

Приветствие. Проверка присутствующих.

2. Актуализация опорных знаний

• Как вы можете определить понятие «Интернет»?

• Что такое служба WWW?

• Как называются документы, которые мы можем просматривать в программе-браузере?

3. Изложение нового материала (лекция с элементами беседы).

• Многие из вас задавали вопрос: "А как создать web-страницу?". С сегодняшнего урока мы с вами начнем отвечать на этот вопрос.

• Создание Web-сайта это проектная деятельность. Какой шаг вы будете делать первым при разработке проекта? (Определим цели и задачи проекта)

• Значит первый шаг в создании Web-сайта: постановка целей и задач. Но любой web-сайт рассчитан на определенную аудиторию, тогда в этот же пункт можно отнести и определение целевой аудитории.
  На слайде 2 презентации появляется 1 этап (приложение 1).

• Web-страница тоже является текстовым документом. Для любого документа вы отбираете информацию, которая более полно отражает цели проекта . Для создания Web-сайта эта процедура также проделывается. Отобранный материал называется контентом сайта.
  На слайде 2 презентации появляется 2 этап (приложение 1).

• Следующий этап - это создание Web-страничек.
  На слайде 2 презентации появляется 3 этап (приложение 1).

• После того как вы создали сайт, для того чтобы его могли просматривать различные пользователи его необходимо разместить в интернете. Эта процедура имеет специальное название - хостинг.
  На слайде 2 презентации появляется 4 этап (приложение 1).

• Для того что бы ваш сайт стал популярным необходимо заняться раскруткой проекта, а также не забывать об обновлении информации на сайте.
  На слайде 2 презентации появляется 5 этап (приложение 1).

• Первые два этапа для нас привычны и понятны. А вот третий этап остается загадкой. Давайте попробуем ее разгадать.
  Для этого зайдем на любой сайт интернета. Например:
  слайд 3 презентации (приложение 1)

• В браузере существует команда просмотреть код страницы. После её выполнения мы видим текс т, в котором содержится как обычный текст, так и текстовые команды разметки.
  слайд 4 презентации (приложение 1)

• Эти текстовые команды разметки, называемые тегами языка HTML.
  HTML "язык разметки гипертекста" - основной "язык Интернета", на котором написано и пишется большинство имеющихся в Сети страниц.
  Слайд 5 презентации (приложение 1)

• HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве. Поначалу HTML создавался как язык для обмена научной и технической документацией, пригодный для людей, не являющихся специалистами в области верстки.
  Текущий стандарт HTML 4.01 существует с 1999 г. В настоящее время опубликован проект пятого стандарта языка. Новая версия обещает дополнить язык многочисленными расширениями и обеспечить более простую, логичную и удобную систему правил. Разумеется, новый стандарт при этом не будет противоречить старому, полностью сохраняя обратную совместимость с уже написанными миллионами документов.

• HTML - основной, но не единственный язык разметки документов. Существуют как более общие, так и узко специализированные решения.
  слайд 6 презентации (приложение 1)

• Теперь зная о существовании языка HTML мы можем дать следующие определения:
  на слайде 7 презентации (приложение 1) даются определения: WEB-документа, WEB-страницы, WEB-сайта и WEB-дизайна.

• HTML документа имеет определённую структуру. Давайте подробно разберем её.
  слайд 8 презентации (приложение 1)

• Документ HTML имеет три структурных типа содержимого:
  Теги
  Комментарии
  Текст

• Мультимедийные элементы - картинки, звук, видео - не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.
  слайд 9 презентации (приложение 1)

• HTML-документ состоит из 3 основных частей:

• Строка декларации типа документа(необязательно);

• Заголовок документа (Head);

• Тело документа (Body).

Посмотрим пример небольшой странички
слайд 10 презентации (приложение 1)

• Разберем 3 основные части подробнее

• Заголовок документа тег <Head>
  Он может содержать теги: <Title> ,<meta>, <link>, <style>, <script>.
  слайд 11 презентации (приложение 1)

• Тело документа тег <Body>
  Все, что находится между<body> и body>, называется содержимым тела документа.
  слайд12 презентации (приложение 1)

• На слайде 13 презентации (приложение 1) представлены параметры тега<body>.

• А теперь запишем алгоритм создания web-страницы в блокноте.
  слайд 14 презентации (приложение 1)

4. Закрепление изученного материала.

На этом этапе создается проблемная ситуация ситуация, которая будет разбираться на следующем уроке.

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

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

(Далее выбираются 3 докладчика, после урока преподаватель объясняет, что каждому из них нужно найти).

5. Итоги урока. Выставление оценок.

Домашнее задание: Пункт 5.7.1 , 5.7.2 и конспект.

2. План-конспект урока из раздела " Основы языка гипертекстовой разметки документов"

Учебник: Угринович Н.Д "Информатика и ИКТ" 9 кл.

Тема:"Оформление текста Web-страницы" (для 9 класса)

Цели:

Образовательные:

• Познакомить учеников с тегами форматирования текста;

• Формировать навыки и умения создания простейших web-страниц.

Развивающие:

• развитие способности к анализу и обобщению;

• развитие информационной культуры.

Воспитательные:

• развитие познавательного интереса;

• воспитание информационной культуры.

Тип урока: семинарское занятие.

План урока:

1. Организационный момент.(2 мин.)

2. Актуализация опорных знаний.(6 мин.)

3. Изложение нового материала.(35 мин.)

4. Итоги урока, домашнее задание.(2 мин.)

Оборудование: мультимедийная система, слайды, компьютеры.

Ход урока:

1. Организационный момент.

Приветствие. Проверка присутствующих.

2. Актуализация опорных знаний.

• На предыдущем уроке мы с вами начали знакомится с языком разметки гипертекста.

• Так из каких частей состоит Web-страница?

( Строка декларации типа документа(необязательно), заголовок документа (Head), Тело документа (Body))

• Что заключает в себе тег <Head>…Head> ?

(теги заголовка)

• Как называется все, что находится между<body> и body>?

( содержимым тела документа)

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

3. Изложение нового материала.

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

Далее по очереди выходят докладчики.

Первый докладчик рассказывает о создании заголовков и списков.

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

Третий докладчик рассказывает о форматировании символов и использовании специальных символов.

(В приложении 2 приведен пример презентации.)

4. Итоги урока. Выставление оценок.

5. Домашнее задание: Пункт 5.7.3 и конспект.

3.План-конспект урока из раздела " Основы языка гипертекстовой разметки документов"

Учебник: Угринович Н.Д "Информатика и ИКТ" Профильный уровень 11кл.

Тема:"Практическая работа «Добавление гиперссылок и списков на Web-страницы» " (для 11 класса)

Цели:

Образовательные:

• Формировать навыки и умения работы с тегами языка HTML и создания простейших web-страниц.

Развивающие:

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

Воспитательные:

• Воспитывать аккуратность, внимательность, вежливость и дисциплинированность.

Тип урока: практическое занятие.

План урока

1. Организационный момент. Техника безопасности при работе с компьютером.(5мин.)

2. Разъяснение хода практической работы.(5мин.)

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

4. Оценивание выполнения работы.(4 мин.)

5. Итоги урока.(1 мин)

Ход урока:

1. Приветствие. Проверка присутствующих. Техника безопасности при работе с компьютером.

2. Разъяснение хода практической работы.

Раздаются листы с заданиями.

Преподаватель вместе с учениками читает каждое задание .

Отвечает на вопросы учеников.

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

Текст работы:

Язык разметки гипертекста HTML

Практическая работа

«Добавление гиперссылок и списков на Web-страницы» "

Для 11 класса

Задание 1 : Создать WEB-странички по образцу с указанными списками:

a

1.html.

b.

с.

Задание 2. Создать еще одну WEB-страничку index.html, на которой должны быть гиперссылки на 1.html, 2.html, 3.html. На этих страничках нужно сделать переход на главную (index.html)

4. Оценивание выполнения работы.

5. Итоги урока.

4.План-конспект урока из раздела " Основы языка гипертекстовой разметки документов"

Учебник: Угринович Н.Д "Информатика и ИКТ" Профильный уровень 11кл.

Тема:" Как хорошо я изучил HTML" (для 11 класса)

Цели:

Образовательные:

• Выявить степень усвоения учащимися основ языка гипертекстовой разметки.

Развивающие:

• Развивать навыки выступлении на публике, умение делать выводы, высказывать свою мысль.

Воспитательные:

• Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, уважение к одноклассникам.

Тип урока: аттестационный

План урока:

1. Организационный момент.(2 мин.)

2. Выполнение тестирования(10 мин.).

3. Защита проектов.(25 мин.)

4. Итоги урока, выставление оценок.(8 мин.)

Оборудование: мультимедийная система, компьютеры с браузером.

Ход урока:

1. Организационный момент
   Приветствие. Проверка присутствующих.

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

2. Выполнение тестирования.

Всего вопросов: 11 вопросов

1-4, 8,11 - выбрать из 3х вариантов ответа;

5-7, 9, 10 - выбрать из 4х вариантов ответа;

Критерий оценивания:

"5"- 11 правильных ответов

"4"- 9-10 правильных ответов

"3"- 7-8 правильных ответов

"2"- менее 7

3. Защита проектов.

Учащиеся показывают созданные Web-сайты.

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

Баллы

2
полностью

1
частично

0
нет

Структура сайта

Отражены цели, ход, результаты исследования

Сформулированы выводы

Описаны использованные информационные ресурсы

Содержание представленной информации

Представленная информация является ценной и интересной

Стилистически текст построен грамотно

Орфографические ошибки отсутствуют

Текст написан понятным языком

Дизайн сайта

Дизайн соответствует тематике сайта

Текст на выбранном фоне хорошо читается

Иллюстрации хорошего качества

Навигация по сайту

Представлен широкий спектр средств навигации

Все гиперссылки работают корректно

Всегда можно вернутся на исходную страницу

Итого баллов:

4. Подведение уроков и выставление оценок

Заключение

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

В данной работе были обобщен и систематизирован теоретический, методический материал по теме «Основы языка гипертекстовой разметки документов». Приведены тематические планирования раздела по учебникам различных авторов, конспекты уроков различных типов, варианты тестирования.

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

Библиографический список:

1. Симонович С.В. Информатика. Базовый курс. 2-е издание / Под ред. С.В. Симоновича - СПб.: Питер, 2004.-640с.

2. Романова Ю.Д. Информатика и информационные технологии : учебное пособие / Ю.Д. Романова, И.Г. Лесничая, В.И Шестаков, И.В. Миссинг, П.А. Музычкин; под ред. Ю.Д. Романовой. - 3-е издю, перераб. И доп. - М.: Эксмо, 2008. - 592 с.

3. Быкадоров Ю.А. Информатика и ИКТ. Учебник для 8 класса / Ю.А. Быкадоров. , М.:Дрофа- 286с.

4. Семакин И.Г. Информатика и информационно-коммуникуционные технологии. Базовый курс: Учебник для 8 класса / И.Г. Семакин, Л.А. Залогова, С.В. Русаков, Л.В. Шестакова. - М.:БИНОМ. Лаборатория знаний. 2005. - 176 с.

5. Семакин И.Г. Информатика и информационно-коммуникуционные технологии. Базовый курс: Учебник для 9 класса / И.Г. Семакин, Л.А. Залогова, С.В. Русаков, Л.В. Шестакова. - М.:БИНОМ. Лаборатория знаний. 2005. - 371 с.

6. Макарова Н. В. Информатика и ИКТ. Учебник 8-9 класс / под ред. Проф. Н.В.Макаровой. - СПб.: Питер, 2009.- 416с.

7. Гейн А.Г., Сенокосов А.И. Информатика и информационные технологии : учеб. Для 9 кл. общеобразоват. Учереждений / А.Г. Гейн, А.И. Сенокосов. : Просвещение, 2006. - 301с.

8. Угринович Н.Д. Информатика и ИКТ. Базовый курс: учебник для 8 класса / Н.Д. Угринович. - 3-е изд., испр. - М.: БИНОМ. Лаборатория знаний, 2005. - 205с.

9. Угринович Н.Д. Информатика и ИКТ. Базовый курс: учебник для 9 класса / Н.Д. Угринович. - 4-е изд. - М.: БИНОМ. Лаборатория знаний, 2006. - 320с.

10. Угринович Н.Д. Информатика и ИКТ. Базовый уровень : учебник для 10 класса / Н.Д. Угринович. - 5-е изд. - М.: БИНОМ. Лаборатория знаний, 2009. - 212с.

11. Угринович Н.Д. Информатика и ИКТ. Профильный уровень : учебник для 10 класса / Н.Д. Угринович. - 3-е изд., испр. - М.:БИНОМ. Лаборатория знаний, 2008. - 387с.

12. Угринович Н.Д. Информатика и ИКТ. Профильный уровень : учебник для 11 класса / Н.Д. Угринович. - 2-е изд., испр.и доп. - М.:БИНОМ. Лаборатория знаний, 2009. - 308 с.

13. Угринович Н.Д. Преподавание курса «Информатика и ИКТ» в основной и старшей школе: Методическое пособие для учителей. / Н.Д. Угринович - М.: БИНОМ. Лаборатория знаний, 2004. - 139с.

14. Каспаржак А.Г. Элективные курсы в профильном обучении: Образователь­ная область «Информатика»/Министерство образования РФ/ общая редакция сборника осуществлена А.Г. Каспржаком - Национальный фонд подготовки кадров. - М.: Вита-Пресс, 2004. - 112 с.

15. Статья «Создание Web-страниц с помощью HTML» Е.Н. Новоселова, И.Р. Кадырова из журнала «Информатика и образование» - №11, 12 - 2004, №1,2,3 - 2005.

16. Монахов М.Ю. Создаем школьный сайт в Интернете. Элективный курс: Учебное пособие / М.Ю. Монахов, А.А. Воронин. - М.: БИНОМ. Лаборатория знаний, 2005. - 128с.

17. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.-352с.

18. Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом "Вильяме", 2003. - 320с.

19. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.-256с.

20. Гилярова М.Г. Информатика. 10 класс Проектная деятельность/ Сост. М.Г. Гилярова. - Волгоград: ИТД «Корифей». - 128с.

1 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

2 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

3 Практическое руководство по HTML, 2005. - wholemir.com

4 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

5 Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом "Вильяме", 2003.

6 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

7 Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.

8 Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.

9 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

10 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

11 Практическое руководство по HTML, 2005. - wholemir.com

12 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

13 Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.

14 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

15 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

16 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

17 Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.

18 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

19 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

20 Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. - СПб.:БХФ-Петербург, 2008.

21 Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.

22 Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом "Вильяме", 2003.

23 Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик -СПб.:Питер, 2008.

24 Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом "Вильяме", 2003.

25