Практические работы по HTML Задание № 1. Создание простейшего файла HTML

Практические работы по HTML

Задание № 1. Создание простейшего файла HTML

Вид HTML файла 

 

Просмотр WEB-страницы

 

 

Лабораторная работа №2

Форматирование таблиц

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

Задание №1. Создайте таблицу

Вид HTML файла 

 

Просмотр WEB-страницы

 

Задание №2. Создайте таблицу

Вид HTML файла

 

Просмотр WEB-страницы

 

Задание №3. Создайте таблицу

Вид HTML файла

  

Просмотр WEB-страницы

 

Задание №4.  Создать бланк квитанции

Вид HTML файла

   

Просмотр WEB-страницы

 

 

Лабораторная работа №3

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

Цель: Способствовать формированию основных навыков по внедрению изображения на Web-cтранице и созданию карты изображения.

Задание №1. Создайте страницу

Вид HTML файла

 

Просмотр WEB-страницы

 

Задание №2. Создать карту-изображение

Вид HTML файла

 

Просмотр WEB-страницы

   

 

Лабораторная работа №4

Каскадные таблицы стилей

Цель: Способствовать формированию основных навыков использования каскадных таблиц стилей для задания внешнего вида Web-страниц.

Задание №1. 

Вид HTML файла 1

 

Просмотр WEB-страницы

 

Вид HTML файла 2

 

Просмотр WEB-страницы

 

Вид HTML файла 3

 

Просмотр WEB-страницы

 

Задание №2. 

Вид HTML файла

 

Просмотр WEB-страницы

 

 

Лабораторная работа №5

Работа с формами

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

Задание №1. Создать форму по вариантам

Вид HTML файла

 

Просмотр WEB-страницы

 

Задание №2. Создать форму

Вид HTML файла

 

Просмотр WEB-страницы

 

Задание № 3. Создать электронную форму квитанции

Вид HTML файла

  

Просмотр WEB-страницы

 

 

Лабораторная работа №6

Создание интерактивной страницы. Фильтры.

Цель: Способствовать формированию основных навыков применения фреймов и фильтров для создания интерактивных страниц.

Задание

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

Вид HTML файлов

 

                       

Вид HTML страницы главного файла index

 

Просмотр WEB-страницы

   

Вид HMTL страницы фильтры

 

Просмотр WEB-страницы

 

 

Лабораторная работа №7

Составление схем XML-документов

Цель: ознакомиться с XML, научиться разбирать структуру  XML-документа; ознакомиться с XSL,  с помощью XSL научиться выполнять преобразование XML-документа с одной структурой в XML-документ с другой структурой,  в частности, в HTML.

Задание №1. Язык разметки XML + CSS

1.Создайте файл XML

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №2. Преобразование XML с помощью XSL

 

 

Лабораторная работа №8

Связывание данных XML c HTML

Цель: с помощью XSL научиться выполнять преобразование XML-документа с одной структурой в XML-документ с другой структурой,  в частности, в HTML; сформировать навыки сортировки, фильтрации и выборки данных из документа XML.

Создание XML-файлов

Вид страницы

 

                               

 

Лабораторная работа №9

Методы и свойства объектов. События

Цель: Способствовать формированию основных навыков по созданию сценариев средствами javascript.Знакомство с организацией диалога с пользователем с помощью методов alert(), confirm() и prompt(). Составление программного кода с использованием  условного оператора if.

Задание №1. Сделайте так, чтобы диалоговая панель возникала не при наведении курсора мыши, а при выборе ссылки (событие onclick).

Вид HMTL страницы

 

 Просмотр WEB-страницы

 

Задание №2.Измените пример так, чтобы при наведении курсора мыши на ссылку, выполнялась бы процедура, выводящая в окно браузера фразу "Hello, word!".

Вид HMTL страницы

 

Просмотр WEB-страницы

  

Задание №3. Напишите скрипт, который сначала выводит на экран диалоговое окно, а затем, после нажатия кнопки "ОК", в окне браузера пишет фразу "Hello, world!".

Вид HMTL страницы

 

Просмотр WEB-страницы

   

Задание №4. Напишите скрипт, который запрашивает у пользователя информацию, а затем выводит ее в диалоговом окне.

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №5. Составьте документ так, чтобы диалоговое окно для ввода информации предлагалось только после наведения курсора мыши на ссылку, и введенная пользователем текстовая строка выводилась бы в виде диалогового окна, или в окно браузера.

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №6. Написать скрипт, реализующий сложение двух чисел по щелчку на кнопке (Используйте функцию eval)

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №7. Создать форму, которая будет иметь три элемента: поле ввода с просьбой ввести имя, при вводе которого в строке состояния должны появиться слова: «Впишите сюда свое имя»; два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад, которые должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя; кнопку отправки данных, при нажатии на которую должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.

Вид HMTL страницы

 

Просмотр WEB-страницы

   

Задание №8. Создать документ, в котором располагалась бы кнопка, при нажатии выводящая диалоговое окно, которое открывает второй документ при нажатии на кнопку "Ok" и закрывает данный документ при нажатии на "Cancel"

Вид HMTL страницы

 

Просмотр WEB-страницы

   

 

Лабораторная работа №10

Окна и динамически создаваемые документы

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

Задание №1. Написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя, вот твое окно!» Создайте кнопку, которая закроет это окно

Вид HMTL страницы

 

Просмотр WEB-страницы

 

 

Задание №2. Напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками: 

•Одна откроет новую страницу в главном окне. 

•Вторая откроет новую страницу в том же окне. 

•Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно

Вид HMTL страницы

 

Просмотр WEB-страницы

     

 

Лабораторная работа №11

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

Цель: Способствовать формированию навыков представления и обработки даты и времени с помощью внутреннего объекта javascript Date, формированию навыков применения методов других внутренних объектов.

Задание №1. Написать скрипт, содержащий текущее время и дату в текстовых полях время и дата

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №2. Сделайте на первой странице идущие часы (чч.мм.сс)

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №3. Найти максимальный элемент массива из 5 элементов. Результат вывести по щелчку на кнопке

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №4. Задан текст. Определить позицию первого символа "a" в тексте и вывести на экран строку, начиная с этого символа, длиной 3 символ

Вид HMTL страницы

 

Просмотр WEB-страницы

 

 

Лабораторная работа №12

Изображения на Web-странице.

Цель: Ознакомиться с объектом image. Способствовать формированию навыков использования свойств и методов объекта image для реализации смены изображений на странице, создания анимационных изображений

Задание №1. Создайте страницу HTML. В центре поместите заголовок, под ним рисунок. При наведении курсора мышки на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.

Вид HMTL страницы

 

Просмотр WEB-страницы

   

Задание №2. Создайте страницу HTML. В центре поместите заголовок, под ним рисунок. Пользователь,  щелкая мышкой по ссылке должен переходить к следующей картинке.

Вид HMTL страницы

 

Просмотр WEB-страницы

  

Задание №3. Создать с  помощью javascript анимационную картинку. Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера.

Вид HMTL страницы

 

Просмотр WEB-страницы

 

 

Лабораторная работа №13

Создание и обработка форм

Цель: способствовать формированию умений использования javascript для проверки правильности заполнения форм и создания окон диалога.

Задание №1. Написать НTML документ, создающий на экране компьютера  поля для ввода имени, адреса электронной почты, текста сообщения и кнопки «Отправить» и «Сброс». Документ должен содержать скрипт, проверяющий соответствующие поля на наличие и корректность введенных данных. В частности, корректность введенного адреса электронной почты. В качестве критерия правильности принять наличие в адресе символа "@” и символа ".” (точка). Если адрес правильный (есть указанные выше символы) после нажатия кнопки «Отправить» должно открыться окно с надписью «Письмо отправлено», если нет - окно с надписью «Введите правильно адрес».

Вид HMTL страницы

 

Просмотр WEB-страницы

 

Задание №2. Расположите на форме несколько кнопок (на кнопке прописан цвет), нажатие на которые приводит к изменению фона документа. Открываясь, страница запрашивает пользователя ввести имя. При выборе цвета должно всплывать окно со словами "Эй, (имя)! Вы выбрали (цвет)."

Вид HMTL страницы

 

Просмотр WEB-страницы

   

 

Лабораторная работа №14

Навигация и javascript

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

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

Вид HMTL страницы

 

Просмотр WEB-страницы

 

 

Лабораторная работа №15

Проект «Регистрация»

Цель: Способствовать формированию навыков и умений создания проектов регистрации пользователей. Изучить способы отправки данных на сервер и их обработку с помощью PHP. Рассмотреть механизм получения данных из HTML-форм и их обработки с помощью PHP

Задание. 

Создать форму для регистрации пользователей на сайте. Реализовать отправку "универсального письма" всем зарегистрировавшимся.

Вид HMTL страницы

 

Просмотр WEB-страницы

 

 

Лабораторная работа № 16

Проект «Форум»

(Гостевая книга)

Цель: формирование навыков и умений проектирования Web-приложений

Задание. Для создания гостевой книги понадобятся два файла. В первом (guest.php) необходимо разместить форму для ввода данных и сам скрипт гостевой книги, а во втором будут храниться результаты введенных данных  в специальном формате. После закачки на сервер этих двух файлов  на файл с результатами (guest.txt) нужно будет установить атрибуты, разрешающие запись в файл.

Вид HMTL страницы

 

Просмотр WEB-страницы

 

 

Лабораторная работа № 17

Проект «ЧАТ»

Цель: формирование навыков и умений проектирования Web-приложений

Задание. Для создания чата понадобится один файл *.php. Кроме того, вам дана база chat, папку с которой необходимо разместить по адресу C:\AppServ\MySQL\data.

Путь для размещения файлов вашего чата: C:\AppServ\www\chat

Вид PHP страницы

   

Вид HMTL страницы

 

Просмотр WEB-страницы