Задание 2

1. Создайте страницу с помощью которой можно "зарегистрировать" себя: - новичком - среднем пользователем - опытным пользователем Оформите регистрацию применив формы (radio или select). Данные должны отправляться на вторую страницу методом GET.

2. На второй странице сделайте вставку переменной и её значения в тег <META> для установки cookie.

3. Сделайте, на этой странице, обработку посылаемых cookies с помощью директивы IF (из SSI) так, что бы страница выдавала, кто зашел на сайт (новичок, средний или опытный пользователь).

4. Проверьте работоспособность на сервере.

5. Укажите, в виде комментариев, для чего предназначена каждая SSI команда.

Задание 3

1. Создайте страницу с помощью, которой можно "обнулить" ваши cookies, т.е. при запросе этой страницы передавались ваши cookies с просроченной датой.

2. Ссылку на эту страницу оформите с помощью кнопки "submit" применив формы.

3. Проверьте работоспособность на сервере.

К сдаче лабораторной предоставляются: работающие страницы на сервере.

Цель работы: формирование умений создания HTML-документов с применением каскадных таблиц стилей.

Литература

• Каскадные таблицы стилей CSS2 (RUS)

• Основы CSS

• CSS - Cascading Style Sheets

• История про CSS (часть I)

• История про CSS (часть II)

• Конспект по CSS

• Конспект по DHTML

Поясняющая информация

Для чего нужны таблицы стилей?

Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).

Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:

• Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее: - Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице). - Нельзя задать фиксированные координаты положения блока на странице. - Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.

• Вторая проблема заключалась в том, что приходилось каждый раз задавать на страницах размер и цвет шрифта, свойства ячеек таблицы и т.д. Это сильно увеличивало размеры страницы, а значит, она медленнее загружается. В случае если вам захотелось изменить цвет или размер шрифта, вам пришлось бы редактировать все страницы.

• Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.

С помощью CSS эти проблемы можно решить.

Способы применения css

Существует три способа применения таблиц стилей:

• Внутренние таблицы стилей (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги. Пример HTML: <font color="blue" size="3" face="Arial"> Пример </font> Пример CSS: <font style="color:blue; font-size:12pt; font-family:Arial"> Пример </font> Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль. При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.

• Глобальные таблицы стилей (Global Style Sheets) - определяют стиль элементов во всем документе. Для этого используется тег <STYLE type="text/css">. Он размещается в заголовке документа <head> . Пример: <html> <head> <STYLE type="text/css"> h1 { color:red; font-style:italic; font-size:32px} - переопределение стандартного тега. .blue { color:blue} - определение нового класса </STYLE> </head> <body> Теперь эти стили можно применять в любом месте html-кода. Для этого используются следующие конструкции: <h1> Этот заголовок написан крупным красным курсивом </h1> Вот <font class="blue"> это </font> слово - синие. </body> </html> В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими.

• Связанные таблицы стилей (Linked Style Sheets) - могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.

Пример внешнего файла: Файл main.css body {background:black; font-size:9pt; color:red; font-family:Arial Black} .base{color:blue; font-style:italic} h1 {color:white} #bold {font-weight:bold}

В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла"> Пример: Файл Index.html <html> <head> <LINK rel="stylesheet" type="text/css" href="main.css"> </head> <body> Содержание Документа </body> </html>

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