
- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
Тип элемента password
Type= PASSWORD
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*).
Задание 4.5: В первой строке определяется поле для ввода текста с именем. Во второй строке определяется окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_5 пароль</title>
</head>
<body>
<p >
<form>
Введите имя:
<input type=text size=20 name=user > <br>
Введите пароль:
<input type=password name=pw size=20 maxlength=10>
</form>
</p>
</body>
</html>
Сохраните документ с именем пример4_5.htm, откройте в браузере, должно появиться следующее отображение:
После заполнения пользователем:
Тип элемента reset
Type = RESET
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name.
Задание 4.6: На экране формируется два поля для ввода текстовой информации и определяется кнопка Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_6 кнопка очистить форму</title>
</head>
<body>
<form>
код: <input name="cod"> <br>
телефон: <input name-"phone" size="6" maxlength="6" ><br>
<input type=reset value="очистить поля формы">
</form>
</body>
</html>
Сохраните документ с именем пример4_6.htm, откройте в браузере, должно появиться следующее отображение, где пользователем введены некоторые значения:
После нажатия на кнопку:
Тип элемента submit
Type = SUBMIT
Браузер выводит данный элемент, как кнопку, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>. Данный элемент используется при окончании ввода пользователем данных.
Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:
NAME- наименование кнопки SUBMIT
VALUE - значение переменной поля в вашей форме
Задание 4.7: На экране формируется кнопка, при нажатии на которую происходит переход на файл с изображением.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_7 создание кнопки</title>
</head>
<form action="безмятежность.jpg">
<input type=submit value="Спокойствие, и только спокойствие...">
</form>
</body>
</html>
Сохраните документ с именем пример4_7.htm, откройте в браузере, должно появиться следующее отображение:
Тип элемента image
Type= IMAGE
В зависимости от содержимого формы может оказаться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для организации этого используется атрибут IMAGE.
После щелчка пользователя по изображению браузер сохраняет координаты соответствующей точки экрана и принимает всю форму.
Вместе с атрибутом IMAGE должны использоваться следующие атрибуты:
ALIGN – необязательный атрибут. указывает на положение изображения на экране
NAME – наименование поля ввода формы
SRC - URI файла- источника изображения
Задание 4.8
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>пример 4_8 рисунок</title>
</head>
<body>
<p >
Выберите точку на изображении
<form action="безмятежность.jpg">
<input type="image" name="point" src= "волк.jpg" ><br>
</p>
</body>
</html>
Сохраните документ с именем пример4_8.htm, откройте в браузере. :