1. Лабораторная работа №1. Создание простых WEB-страниц с фреймовой структурой 2
1.1. Введение 2
1.2. Структура HTML-документа 2
1.3. Фреймы 3
1.4. Ссылки 4
1.5. Текст 5
1.5.1. Текстовые блоки 5
1.5.2. Форматирование текста 5
1.5.3. Списки 6
1.5.4. Таблицы 7
1.6. Изображения 7
1.7. Задание на лабораторную работу 8
1.8. Варианты заданий 8
1.9. Справочники и руководства 10
2. Лабораторная работа №2. Использование каскадных таблиц стилей CSS 10
2.1. Назначение CSS 10
2.2. Включение CSS в документ HTML 11
2.2.1. Внешние стили (external style sheets) 11
2.2.2. Таблицы стилей документа (document style sheets) 11
2.2.3. Стили, встроенные в элемент (inline styles) 11
2.3. Синтаксис CSS 12
2.3.1. Виды селекторов 12
2.3.2. Селекторы, зависящие от контекста 14
2.4. Лабораторное задание 14
2.5. Справочники и руководства 14
3. Лабораторная работа №3. HTML-формы 14
3.1. Элементы HTML для создания форм 14
3.1.1. Элемент FORM 14
3.1.2. Элемент TEXTAREA 15
3.1.3. Элемент INPUT 15
3.1.4. Элемент SELECT .. OPTION 17
3.2. Пример реализации формы 17
3.3. Обработка данных форм на JavaScript 19
3.4. Лабораторное задание 22
3.5. Справочники и руководства 23
4. Лабораторная работа №4. Java Script. Работа с HTML-страницей при помощи объектной модели документа DOM 23
4.1. Введение 23
4.2. Структура программы JavaScript 23
4.2.1. Включение сценария в HTML-файл 23
4.2.2. Выполнение сценариев и отображение страницы 24
4.2.3. Операторы и комментарии 24
4.3. DOM: работа с HTML-страницей 24
4.3.1. Глобальная структура объектов браузера 24
4.3.2. Дерево DOM-объектов 25
4.3.3. Доступ к элементам DOM и навигация 26
4.3.4. Свойства элементов DOM 26
4.3.5. Атрибуты элементов DOM 28
4.3.6. Добавление и удаление элементов DOM 28
4.3.7. Работа с таблицами в DOM 31
4.4. Работа со стилями при помощи JavaScript 33
4.4.1. Работа с классом элемента 33
4.4.2. Работа с CSS-свойствами 33
4.5. Задание на лабораторную работу 35
5. Лабораторная работа 5. Сценарии PHP. Обработка форм на стороне сервера 35
5.2. Лабораторное задание 36
1.Лабораторная работа №1. Создание простых web-страниц с фреймовой структурой
1.1.Введение
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме. Следует отметить, что конечный вид HTML-документа после будет зависеть от средства воспроизведения, т.е. одни и те же документы могут по-разному выглядеть в разных браузерах, однако логическая структура документов при этом сохраняется.
1.2.Структура html-документа
Любой документ HTML состоит из трех частей:
1. Строки, содержащей информацию о версии HTML (элемент <!DOCTYPE>).
2. Блока заголовка документа (элемент <HEAD>).
3. Тела документа, либо содержащего непосредственно отображаемую информацию, либо определяющего набор фреймов (элемент BODY).
Вторая и третья части должны быть вложены в контейнер <HTML></HTML>. Все перечисленные элементы являются опциональными. Для всех остальных элементов HTML открывающий тег обязателен.
В заголовке документ может иметь элемент <TITLE>. Этот элемент используется для определения содержания документа. Большинство браузеров отображают строку, размещенную внутри элемента <TITLE> в качестве заголовка окна.
Также заголовок может содержать некоторое количество элементов <META>. Элемент <МЕТА> используется для включения различной информации о документе, а также предоставляет возможность сообщать дополнительные инструкции как клиентской части (браузеру), так и серверной. Элемент <META> может определять свойства с произвольными именами и присваивать им произвольные значения. Вместе с тем ряд свойств являются общепринятыми:
Author – автор документа.
Copyright – информация об авторском праве.
Description – описание документа (для поисковых машин).
Generator – название программы, с помощью которой создавался документ.
Keywords – ключевые слова (для поисковых машин).
Пример простейшего HTML-документа:
1.3.Фреймы
Помимо обычных HTML-документов, существуют также и фреймсодержащие. В отличие от обычных документов они не содержат никакой информации для предоставления пользователю, а служат для разделения рабочей области браузера на несколько отдельных окон, в которые и загружаются несущие информацию документы.
Фреймсодержащий документ не может нести в себе часть BODY, она заменяется элементом FRAMESET. При этом в окно браузера выводятся документы, указанные в элементах FRAME из набора FRAMESET.
Элемент FRAMESET определяет набор создаваемых фреймов и их расположение в окне браузера. Каждому конкретному фрейму соответствует элемент FRAME, располагаемый между открывающим и закрывающим тэгами FRAMESET. Расположение фреймов указывается при помощи атрибутов COLS и ROWS. Значения атрибутов указываются в пикселях, процентах либо в относительных указателях. Значения перечисляются через запятую.
Следующий документ формирует страницу с тремя фреймами, как показано на рисунке:
1.4.Ссылки
Ссылки – один из самых часто используемых элементов, лежащий в основе концепции гипертекста. Ссылки задаются при помощи элемента (тэга) <a>. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.
Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. Синтаксис задания якоря:
<a name="link1">Первая закладка</a>
В качестве значения атрибута href используется идентификатор ресурса, или URI – Universal (или Uniform) Resource Identifier, универсальный идентификатор ресурса. Адрес ссылки может быть абсолютным и относительным.
Абсолютный адрес состоит из адреса хоста сетевого ресурса, или URL (Uniform Resource Locator) и адреса ресурса (файла) в локальном пространстве имен, или URN (Uniform Resource Name). Абсолютные ссылки позволяют указать на любой ресурс или файл в пределах всей сети Интернет из любого места. Пример абсолютной ссылки:
<a href=«http://htmlbook.ru/html/a/href»>Абсолютная ссылка</a>.
Абсолютные ссылки могут указывать только на сетевые ресурсы, т.е. ресурсы, доступные по сетевому протоколу HTTP или FTP.
Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Они представляют собой аналог пути к файлу в локальной файловой системе и имеют сходный синтаксис. Пример относительной ссылки:
<a href=«../html/a/href»>Относительная ссылка</a>.
Относительные ссылки используют для перехода между разными документами сайта. Это позволяет размещать сайт на хосте с произвольным именем, при этом относительные ссылки всегда будут работать правильно.
При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри страницы. Имя якоря добавляется в конце абсолютной или относительной ссылки после символа «#»:
<a href=«http://htmlbook.ru/html/a/href#link1»>Ссылка на якорь</a>
При использовании фреймов бывает необходимо сделать так, чтобы объект, на который указывает ссылка из одного фрейма, был открыт в другом фрейме. Для этого в элементе <a> используется атрибут target=”имя_фрейма”, например:
<a href=«http://htmlbook.ru/html/a/href» target=”frame_name” >Открыть в другом фрейме</a>
Элемент BASE позволяет указать базовый URI, который будет использоваться как старшая часть всех относительных ссылок в документе:
<BASE href = "http://www.host.ru/mydir">
Элемент BASE также позволяет указать имя фрейма, в котором будут открываться ссылки данного документа:
<BASE target = "frame_name">
Если в документе явно отсутствует элемент BASE, то браузер автоматически назначает для него атрибут HREF, равный URI данного документа, и атрибут TARGET, равный _self.