Лабораторная работа №2. Создание динамического html-документа Задание



Скачать 228.24 Kb.
Дата02.07.2018
Размер228.24 Kb.
#36993
ТипЛабораторная работа

Лабораторная работа №2. Создание динамического HTML-документа

Задание:

Создать HTML-документ, который должен содержать скрипт в соответствии с вариантом (при форматировании HTML-документа использовать каскадные таблицы стилей CSS):



Вариант 1

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


Вариант 2

Калькулятор цвета. Отобразить таблицу, фоны ячеек которой окрашены в web-безопасные цвета. По щелчку левой кнопки мыши на образце цвета изменяется цвет текста документа, по щелчку правой кнопки мыши – цвет фона документа. Также появляется окно с шестнадцатеричным кодом цвета. Предусмотреть три поля для задания цветовых составляющих и отображения цвета, в отдельном, например, окне. Запомнить в cookie цвет текста и цвет фона и восстановить их при повторном посещении.


Вариант 3

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


Вариант 4

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


Вариант 5

За указателем мыши перемещаются часы и дата (предусмотреть возможность установки часов и календаря). Запомнить в cookie последний выбор и восстановить его при повторном посещении.


Вариант 6

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


Вариант 7

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


Вариант 8

Калькулятор на четыре действия (с нажимающимися кнопками) и переводом из десятичной системы счисления в двоичную, восьмеричную и шестнадцатеричную. Запомнить в cookie результат последнего действия и отображать это значение на индикаторе калькулятора при повторном посещении.


Вариант 9

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


Вариант 10

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


Вариант 11

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

Например:


Содержание отчета (отчет в электронном виде,
имя файла с отчетом – АМ-000 Иванов И.И.):


  • титульный лист (один для всех лабораторных работ);

  • задание на лабораторную работу №2;

  • исходный код разметки документа, исходный код скрипта;

  • выводы по работе.

Методические указания:

Язык разметки гипертекста HTML (HyperText Markup Language)

HTML (HyperText Markup Language) - язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML - это не язык программирования, а описательный язык разметки.

HTML-документ состоит из текста, который представляет собой содержимое документа, и тегов, которые определяют структуру и внешний вид документа при его отображении броузером. Структура HTML-документа проста:





HTML-документ





Internet



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

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

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

Регистр символов в именах тегов и атрибутов не учитывается.

Как правило, теги состоят из начального и конечного элементов, между которыми размещаются текст и другие элементы документа. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (…).

Конечные теги никогда не содержат атрибутов.

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

Некоторые теги не имеют конечного элемента.

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

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


Тег

Описание



начало и конец всего документа



начало и конец заголовка документа



заголовок документа



начало и конец тела документа



отображение текста курсивом



отображение текста жирным шрифтом

n=1…6


заголовок уровня n



установка шрифта, его цвета и размера



таблица



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



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

...

бегущая строка

...

вставка изображения

...

гиперссылка

...


форма

...



оформление абзаца




перевод строки


...

горизонтальная линия

Каскадные таблицы стилей (CSS – Cascading Style Sheets)

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

Стили можно реализовать тремя способами:


  • связанные таблицы стилей (Linked Style Sheets) – таблица стилей определяется в отдельном текстовом файле с расширением .css и ее стиль связывается с одной или несколькими страницами. Связанные стили воздействуют на отдельный Web-узел;

  • внедренные таблицы стилей (Global Style Sheets) – стили можно внедрить непосредственно в текст на HTML. Внедренные стили воздействуют на отдельную страницу;

  • встроенные таблицы стилей (Inline Style Sheets) – встроенные стили создаются с помощью атрибута style. Встроенные стили воздействуют на отдельный тег.

Пример связанной таблицы стилей:

Таблица стилей (в файле lss.css)

h1 {font-size:10; color:red}

p {color:#0000ff; font-style:italic}

HTML-документ









Заголовок нового стиля


Абзац нового стиля




Заголовок нового стиля






























onMouseOver="document.btn1.src='back_down.gif'"

onMouseOut="document.btn1.src='back_up.gif'">

back

onMouseOver="document.btn2.src='forward_down.gif'"



onMouseOut="document.btn2.src='forward_up.gif'">

forward

Скачать 228.24 Kb.

Поделитесь с Вашими друзьями:




База данных защищена авторским правом ©vossta.ru 2022
обратиться к администрации

    Главная страница