Разработка макетов Web-страниц

Лабораторная работа №2. Разработка макетов Web-страниц

Цель работы: создание веб-страницы с определенным наполнением.

Время выполнения: 6 часов.

Задачи:

-        познакомиться со структурой HTML-страницы;

-        изучить основные правила написание HTML тегов;

-        реализовать простые примеры веб-страниц.

Указания к выполнению лабораторной работы:

На рабочем столе создайте папку ФИО_Группа. Сохраняйте все созданные вами файлы в данную папку. Названия файлов эквивалентны номерам заданий, например, Zadanie_1.html.

План выполнения:

1.        Выполнить предложенные задания.

2.        Защитить работу преподавателю.

3.        Оформить отчет (Название, цель, задание, результат).

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

Задание 1. Реализуйте таблицу, представленную на рисунке. Раскрасьте ячейки таблицы по своему усмотрению.

[pic 1]

Задание 2. Вам дан готовый код таблицы (файл Zadanie2.html). Добавьте таблице заголовок «Тарифы хостинга» и красную границу ко всей таблице и ячейкам.

[pic 2]

Задание 3. Напишите программу, которая выводит на экран следующие «хитрые» таблицы:

[pic 3]

Задание 4. Создать таблицу с учетом стилевого оформления

[pic 4]

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

[pic 5]

Тема 2. Формы

Задание 6. Создайте в корневой папке страницу page_music.html и разместите на ней данные аудиозаписи как показано на рисунке. Не забудьте предусмотреть указанные свойства для каждого аудио.

[pic 6]

Задание 7. Наберите код пустой html-страницы. В качестве базового адреса укажите http://localhost/test. Добавьте код простейшей формы для ввода имени и фамилии пользователя. Обязательно задайте имена полям ввода. Для связи полей формы с соответствующим текстом используйте элемент «label». В качестве обработчика формы укажите скрипт php/registration.php. Данные должны отправляться методом «POST». Не забудьте также задать имя форме. Кнопку отправки даных формы на сервер создайте при помощи элемента 'input'.