Урок 5. Навигационные карты. Формы

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

Навигационные карты

Откройте Paint. Нарисуйте картинку (рис.1):

Рис.1. Рисунок в графическом редакторе

Сохраните файл с именем «karta. jpg». Закройте программу. Откройте Блокнот (Notepad ++, Dreamweaver). Наберите код, чтобы он соответствовал коду, который показан на рисунке 2:

Рис.2. html-код

Сохраните файл с именем: «karti. html». Тип файла выберите: «Все файлы». Откройте в браузере. Посмотрите, что получилось (рис.3):

Рис.3. Отображение файла в браузере

Создание своей карты

Задание:

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

Сделайте навигационную карту.

Формы

Откройте блокнот. Напишите следующий код (рис. 4):

Рис.4. html-код (форма: вход в систему)

Сохраните файл и откройте в браузере. Должно получиться как на рисунке 5:

Рис.5. Отображение формы в браузере

Снова откройте блокнот. Наберите следующий html-код (рис.6):

Рис.6. html-код (форма: комментарии на сайте)

Сохраните файл и откройте в браузере. Должно получиться следующее рис.7):

Рис.7. Отображение формы в браузере

Откройте блокнот. Наберите следующий код (рис.8):

Рис.8. html-код (форма: выпадающий список)

Сохраните файл и откройте в браузере. Получиться должно следующее (рис.9):

Рис.9. Отображение формы в браузере

Откройте блокнот. Добавьте в код недостающих элементов (рис.10):

Рис.10. html-код (форма: список с полосой прокрутки)

Сохраните файл. Откройте в браузере. Сравните полученный результат с рисунком 11:

Рис.11. Отображение формы в браузере

Откройте блокнот. Наберите следующий код (рис.12):

Рис.12. html-кнопки (форма: переключатели, кнопки)

Сохраните файл. Откройте в браузере. Сравните полученный результат с рисунком 13:

Рис.13. Отображение формы в браузере

Откройте блокнот. Наберите следующий html-код (рис.14):

Рис.14. html-код (форма: радиобутоны, прикрепить файл)

Сохраните файл. Откройте в браузере и сравните полученный результат с рисунком 15:

Рис.15. Отображение формы в браузере (с нажатием на кнопку «Обзор..»)

Откройте блокнот. Наберите следующий код (рис.16):

Рис.16. html-код (форма: fieldset)

Сохраните файл. Откройте в браузере. Должно получиться также, как показано на рисунке 17:

Рис.17. Отображение формы в браузере