- •1.Лабораторная работа №1. Создание простых web-страниц с фреймовой структурой
- •1.1.Введение
- •1.2.Структура html-документа
- •1.3.Фреймы
- •1.4.Ссылки
- •1.5.Текст
- •1.5.1.Текстовые блоки
- •1.5.2.Форматирование текста
- •1.5.3.Списки
- •1.5.4.Таблицы
- •1.6.Изображения
- •1.7.Задание на лабораторную работу
- •1.8.Варианты заданий
- •1.9.Справочники и руководства
- •2.Лабораторная работа №2. Использование каскадных таблиц стилей css
- •2.1.Назначение css
- •2.2. Включение css в документ html
- •2.2.1.Внешние стили (external style sheets)
- •2.2.2.Таблицы стилей документа (document style sheets)
- •2.2.3.Стили, встроенные в элемент (inline styles)
- •2.3.Синтаксис css
- •2.3.1.Виды селекторов html селекторы
- •Селекторы класса
- •Id селекторы (идентификаторы)
- •2.3.2.Селекторы, зависящие от контекста Селекторы потомков
- •Селекторы детей
- •3.1.2.Элемент textarea
- •3.1.3.Элемент input
- •3.1.4.Элемент select .. Option
- •3.2.Пример реализации формы
- •3.3.Обработка данных форм на JavaScript
- •3.4.Лабораторное задание
- •3.5.Справочники и руководства
- •4.Лабораторная работа №4. Java Script. Работа с html-страницей при помощи объектной модели документа dom
- •4.1.Введение
- •4.2.Структура программы JavaScript
- •4.2.1.Включение сценария в html-файл
- •4.2.2.Выполнение сценариев и отображение страницы
- •4.2.3.Операторы и комментарии
- •4.3.Dom: работа с html-страницей
- •4.3.1.Глобальная структура объектов браузера
- •4.3.2.Дерево dom-объектов
- •4.3.3.Доступ к элементам dom и навигация
- •4.3.4.Свойства элементов dom
- •4.3.5.Атрибуты элементов dom
- •4.3.6.Добавление и удаление элементов dom
- •4.3.7.Работа с таблицами в dom
- •4.4.Работа со стилями при помощи JavaScript
- •4.4.1.Работа с классом элемента
- •4.4.2.Работа с css-свойствами
- •4.5.Задание на лабораторную работу
- •5.Лабораторная работа 5. Сценарии php. Обработка форм на стороне сервера
- •5.2.Лабораторное задание
Селекторы детей
«Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки».
CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком «>».
Селекторы смежных элементов (Adjacent Sibling Selectors)
Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Для этого селекторы разделяются знаком «+»
2.4.Лабораторное задание
Самостоятельно изучить свойства CSS.
Создать три css-файла для html-документов c описанием ссылок на категории, категорий и объектов, разработанных в лабораторной работе 1.
Разработать стили с использованием HTML-селекторов, селекторов класса и ID-селекторов.
2.5.Справочники и руководства
http://html-color-codes.info/
http://www.computerhope.com/htmcolor.htm
3.Лабораторная работа №3. HTML-формы
Формы HTML – основной способ для создания интерактивных веб-страниц. Такие страницы позволяют пользователю вводить данные с последующей отправкой на веб-сервер или обработкой на стороне клиента (браузере). При помощи упраляющих элементов форм можно вызывать функции клиентских сценариев на JavaScript, которые позволяют получать доступ к любым элементам веб-страницы и стилей и изменять их.
3.1.Элементы HTML для создания форм
3.1.1.Элемент FORM
Элемент <form> устанавливает форму на веб-странице. Имеет следующие основные атрибуты:
name - определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.
action - обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы - путь к скрипту сервера, обслуживающему данную форму.
method - определяет способ отправки содержимого формы. Возможные значения get (по умолчанию) и post.
target - определяет имя окна (фрейма), в которое возвращается результат обработки отправленной формы. Возможные значения: _self, _parent,_top, _blank или явно указанное имя окна (фрейма). Имеет аналогичное значение, что и атрибут TARGET элемента A.
autocomplete - Включает автозаполнение полей формы.
Форма должна иметь закрывающий элемент </form>. Внутри формы могут располагаться элементы управления, которые описываются четырьмя видами тегов.
3.1.2.Элемент textarea
Элемент <textarea> создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Имеет следующие атрибуты:
name - обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненного поля сервером.
rows - определяет количество строк текста, видимых на экране.
cols - определяет ширину текстового поля - в печатных символах.
wrap - определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения: off - перенос слов не происходит (значение по умолчанию); virtual - перенос слов только отображается, на сервер же поступает неделимая строка; physical - перенос слов будет происходить во всех точках переноса.