- •Задание 1
- •Задание 2
- •Пример Web-страницы с двумя вертикальными фреймами
- •Пример таблицы
- •"Шапка" документа и мета-данные
- •Задание 1
- •Способы применения css
- •Задание 2
- •Задание 3
- •Для чего нужны таблицы стилей?
- •Почему каскадные?
- •Наследование
- •Синтаксис css
- •Некоторые параметры css
- •Единицы измерения в css
- •Примеры. Управление переполнением и видимостью.
- •Субд MySql и программа phpMyAdmin
- •Скрипт обработки поискового запроса.
- •Скрипт для удаления данных.
- •Скрипт редактирования данных.
- •Скрипт для загрузки отредактированых данных.
- •Обработка множественного выбора
- •Объектная модель браузера
- •Идущие часы
- •Задание
- •Система новостей Nucleus
- •Задание
- •Задание
Задание 1
Исправьте или дополните все свои страницы МЕТА-информацией. обязательно примените следующие данные: <META HTTP-EQUIV="Content-Language" CONTENT=""> <META NAME="Description" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Author" CONTENT=""> <TITLE> </TITLE>
Сделайте автоматическое обновление первой страницы каждую минуту.
Создайте новую страницу, и сделайте автоматическое перенаправление на www.kstu.ru , с временем ожидания 10 секунд, на странице напишите "Через 10 секунд вы будите автоматически перенаправлены на сайт www.kstu.ru ".
Сделайте ссылки со всех на свою главную страницу с помощью тега <LINK>.
В исходнике главной страницы укажите, в виде комментариев, для чего предназначены используемые мета-данные.
Задание 2
Создйте новую страницу. Внутри страницы организуйте переход на метки, основные разделы текста, а именно: • Расширенный поиск. Яндекс. • Поиск по регионам. Яндекс. • Что такое "Индекс цитирования". Яндекс. • Что такое "НИНИ-индекс". Яндекс. • Что такое "Политический НИНИ-индекс". Яндекс. должны быть в начале страницы в виде гиперссылок на определенную позицию в тексте.
В исходнике страницы укажите, в виде комментариев, для чего предназначены, используемые для меток и ссылок на них, теги и их свойства (атрибуты).
Задание 3
С помощью готового рисунка создать карту изображений, в которой при щелчке по картографической отметке города загружался бы соответствующий WWW-сервер. Рисунок можно взять здесь. Ссылки для серверов: www.moskva.ru - Москва www.kazan.ru - Казань www.spb.ru – С. – Петербург www.novosibirsk.ru - Новосибирск www.norilsk.ru - Норильск www.omsk.ru - Омск www.magadan.ru - Магадан
В исходнике страницы укажите, в виде комментариев, для чего предназначены используемые для карт изображений теги и их свойства (атрибуты).
К сдаче лабораторной предоставляются: работающие страницы на сервере с комментариями указанных тегов и их свойств в исходнике.
Цель работы: формирование умений использования SSI.
Литература
SSI
SSI в примерах
Учебник по SSI
Подробнее о технологии SSI
SSI - что, когда, как?
Поясняющая информация
Server Side Include
SSI расшифровывается как Server Side Include. SSI - это набор команд, включенных в страницу HTML, команды выполняются на сервере перед отсылкой запрошенной страницы клиенту.
При получении запроса на документ, содержащий SSI-директивы, HTTP-сервер обрабатывает документ, выполняет все SSI-директивы, а получившийся в результате документ возвращает клиенту. HTTP-сервер не проверяет автоматически все документы на наличие SSI-директив, а только те, которые относятся к типу, указанному в настройках сервера ( в нашем случае все файлы с расширением .shtml).
SSI-директивы включаются в html-код в виде комментариев определенного формата: <!--#SSI_директива="параметры" -->
echo var
Используется для вывода значения переменной окружения. <!--#echo var="Переменная"--> например: <!--#echo var="REMOTE_ADDR"--> Некоторые переменные: REMOTE_ADDR - ваш IP адрес REMOTE_PORT - номер вашего порта HTTP_USER_AGENT - ваш браузер SERVER_NAME - имя сервера SERVER_PORT - номер порта сервера SERVER_SOFTWARE - какой HTTP сервер установлен SERVER_PROTOCOL - протокол который поддерживает сервер SERVER_ADMIN - администратор сервера HTTP_REFERER - с какой страницы вы пришли DOCUMENT_URI - URI документа DOCUMENT_NAME - название файла текущего документа QUERY_STRING - строка запроса методом GET LAST_MODIFIED - время последней модификации файла include file include virtual
Включает содержимое указанного файла в html-файл в месте, где идет вызов данной команды. Отличие include file от include virtual : include file - путь к файлу, относительно текущей директории. (То есть не может быть абсолютным путем к файлу (начинаться с / или содержать ../). include virtual - виртуальный путь к документу на сервере. Он может начинатся с /, но должен быть на том же сервере. Пример: <!--#include file="docext.html"--> <!--#include virtual="/counters/spylog.txt"--> <!--#include virtual="/cgi-bin/counter.pl" -->
Если с помощью include file или include virtual включается cgi-скрипт, то в содержимое страницы попадет вывод cgi-скрипта, а не его содержание.
С помощью этих директив вы можете сделать автоматическую сборку страниц. Если ваша страница состоит из блоков, и некоторые блоки одинаковые на всех страницах, то эти блоки можно вынести в отдельные файлы, а на страницах вставить эти директивы. Благодаря этому вы сможете внести изменения в одном файле, и информация на всех страницах изменится.
fsize file
Вставляет размер указанного файла. Например: <!--#fsize file="karta.shtml"--> flastmod file
Вставляет время последней модификации указанного файла. Например: <!--#flastmod file="karta.shtml"-->
printenv Выводит все переменные окружения. Параметров не имеет. Вы можете вывести весь список переменных, которые вам доступны. Список переменных окружения: <!--#printenv -->
set var
Устанавливает значение переменной окружения. Формат такой set var="ИМЯ_ПЕРЕМЕННОЙ" value="ЗНАЧЕНИЕ". Значение переменной TITLE: <!--#set var="TITLE" value="Лабораторная работа 2" --> Значение переменной SERVER_NAME: <!--#echo var="TITLE" --> Последняя директива выведет "Лабораторная работа 2".
Если у вас "шапочка" (<head></head>) вынесена в отдельный файл, и в нем задан основной <title> сайта, то с помощью этой директивы вы сможете дополнить <title>. Пример: В отельном файле содержащим <head></head> (например, top.shtml), пишем: <title>Сервер Васи Пупкина: <!--#echo var="TITLE" --> </title>
В файле, куда предыдущий файл вставляется (до директивы вставки), пишем: <!--#set var="TITLE" value="Лабораторная работа 2" -->
В результате получаем: <title>Сервер Васи Пупкина: Лабораторная работа 2 </title>
if/else
Применяется для управления выводом страницы по условию. Синтаксис такой: <!--#if expr="УСЛОВИЕ1" --> HTML-код, который будет выводиться, если УСЛОВИЕ1 истинно <!--#elif expr="УСЛОВИЕ2" --> HTML-код, который будет выводиться, если УСЛОВИЕ1 ложно, а УСЛОВИЕ2 истинно <!--#else --> HTML-код, который будет выводиться, если все условия ложны <!--#endif -->
Условие - это либо строка, которая является истинной, если непустая, или набор операторов сравнения строк. Операторы могут быть =,!=,<,<=,> и >. Если вторая строка заключена в "/"(слэши), то условие истинно, если в первой строке встречается хоть одно вхождение второй строки. Можно объединять несколько операторов сравнения с помощью операторов &&(И) и ||(ИЛИ). Для группирования условий используются "()"(скобки).
Пример: string1 = string2 string1 != string2 string1 < string2 string1 <= string2 string1 > string2 string1 >= string2
Если string2 имеет форму /string/, то тогда она интерпретируется, как регулярное выражение.
Пример: <!--#if expr="$HTTP_COOKIE=/user\=old/" -->
Данным примером проверяем, содержится ли в cookies user=old.
goto
Команда goto оператор перехода на маетку label.
Формат команды: <!--#goto ="<label>"--> где <label> имя метки, определенное командой label. Пример. <!--#goto ="testlabel" --> Эта строка не будет видна <!--#label ="testlabel" --> Эта строка будет видна Замечание: Между символами <!--#goto и знаком = обязательно должен стоять пробел.
label
Команда label устанавливает метку в документе, которая используется командами goto или if..goto
Формат команды: <!--#label ="<label>"--> где <label> строка из не более чем 51 символа без пробелов, идентиифицирующая место в документе. Задание метки не влияет на форматирование документа. Замечание: Между символами <!--#label и знаком = обязательно должен стоять пробел.
break
Команда break останавливает вывод документа, как только встречается. Пример:
Эта строка будет видна <!--#break --> Эта строка не будет видна
Практические задания
Задание 1
Создайте каталог /ssi/, для хранения включаемых файлов.
Создайте в нем пустые файлы (например: top.shtml, botom.shtml, left.htm, right.htm).
Переделайте первую страницу, вынеся верхнею часть (включая верхнею таблицу и "шапку" (<head> </head>)) и нижнею (включая нижнею таблицу), а также левую и правую часть соответственно в файлы, которые вы создали. Незабудьте изменить расширение на .shtml.
Проверьте работоспособность на сервере.
Сделайте, чтобы <title> формировался динамически.
На первой странице, выведите следующею информацию: размер файла дата последней модификации файла ваш IP адрес номер вашего порта ваш браузер имя сервера номер порта сервера какой HTTP сервер установлен протокол, который поддерживает сервер с какой страницы вы пришли URI документа название файла текущего документа
В исходниках первой страницы и включаемых файлов укажите, в виде комментариев, для чего предназначена каждая SSI команда.
Задание 2
Создайте новую страницу. Выведите все переменные окружения.
Проверьте работоспособность на сервере.
Задание 3
Приведите все остальные страницы к общему виду с помощью SSI, т.е. верхняя и нижняя часть должны быть одинаковы для всех страниц (кроме фреймовых страниц).
Пропишите на каждой странице дополнение к <title>, соответствующее данному документу.
Проверьте работоспособность на сервере.
К сдаче лабораторной предоставляются: работающие страницы на сервере.
Цель работы: формирование умений использования Cookies.
Литература
Что такое Cookies и с чем их едят
Что такое cookies и как с ними работать
Формат и синтаксис Cookie
Поясняющая информация
Cookies
Cookie является решением одной из наследственных проблем HTTP спецификации. Эта проблема заключается в непостоянстве соединения между клиентом и сервером, как при FTP или Telnet сессии, т.е. для каждого документа (или файла) при передаче по HTTP протоколу посылается отдельный запрос. Включение cookie в HTTP протокол дало частичное решение этой проблемы и не только этой.
Передача
cookie сервером клиенту
Передача cookie клиентом серверу
Cookie это небольшая порция информации, которую сервер передает клиенту. Клиент (браузер) будет хранить эту информацию, и передавать ее серверу с каждым запросом как часть HTTP заголовка. Некоторые cookie хранятся только в течение одной сессии, они удаляются после закрытия браузера. Другие, установленные на некоторый период времени, записываются в файл. Эти файлы вы можете видеть у себя на компьютере в каталоге \Documents and Settings\Имя_пользователя\Cookies\.
Сами по себе cookies не могут делать ничего, это только лишь некоторая информация. Однако, сервер может реагировать на содержащуюся в cookies информацию. Например, в случае авторизованного доступа к чему-либо через WWW, в cookies можно сохраняется login и password в течение сессии, что позволяет не вводить их при запросе каждого запрошенного документа. Другой пример: cookies могут использоваться для построения персонализированных страниц. Чаще всего встречается такое - на некотором сервере вас просят ввести свое имя, и каждый раз, когда вы заходите на первую страницу этого сервера, вам пишут что-то типа "Здравствуй, Вася Пупкин!". На использовании cookies также часто строят функцию оформления заказа в онлайновых магазинах.
Cookie является частью HTTP заголовка. Полное описание поля Set-Cookie HTTP заголовка:
Set-Cookie: NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE
Минимальное описание поля Set-Cookie HTTP заголовка:
Set-Cookie: NAME=VALUE;
NAME=VALUE - NAME - переменная (имя cookie), VALUE - значение.
expires=DATE - время хранения cookie (формат записи "expires=Monday, DD-Mon-YYYY HH:MM:SS GMT"). Пример: expires=Friday,31-Dec-99 23:59:59 GMT; Если этот атрибут не указан, то cookie хранится в течение одного сеанса, до закрытия броузера.
domain=DOMAIN_NAME - домен, для которого значение cookie действительно. Например, "domain=ipm.kstu.ru". Если этот атрибут опущен, то по умолчанию используется доменное имя сервера, на котором было задано значение cookie.
path=PATH - этот атрибут устанавливает корневой путь к документам, для которых действительно значение cookie. Например, указание "path=/students/pupkin/" приведет к тому, что значение cookie будет действительно для всех документов Васи Пупкина в директории /students/pupkin/. Для того, чтобы cookie отсылались при запросе любого документа сервера, необходимо указать корневой каталог сервера ("path=/").
Если этот атрибут не указан, то значение cookie распространяется только на документы в той же директории, что и документ, в котором было установлено значение cookie.
secure - если стоит этот маркер, то информация cookie пересылается только через HTTPS (HTTP с использованием SSL - Secure Socket Level), в шифрованном виде. Если этот маркер не указан, то информация пересылается обычным способом.
Установка cookie с помощью HTML.
Простейший способ выставить cookie - использовать соответствующий META-тег в заголовке <HEAD> </HEAD> любого HTML документа. Это выглядит следующим образом: <META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE">
С помощью HTML можно устанавливать несколько cookie разом:
<META HTTP-EQUIV="Set-Cookie" CONTENT="NAME1=value1; EXPIRES=date1; DOMAIN=domain_name1; PATH=path1; SECURE"> <META HTTP-EQUIV="Set-Cookie" CONTENT="NAME2=value2; EXPIRES=date2; DOMAIN=domain_name2; PATH=path2; SECURE">
Синтаксис HTTP заголовка для поля Cookie при запросе документа с сервера.
Когда запрашивается документ с HTTP сервера, браузер проверяет свои cookie на предмет соответствия домену сервера (DOMAIN), пути к документу (PATH), если время хранения истекло, то он удаляется. В случае, если найдены удовлетворяющие всем условиям значения cookie, броузер посылает их серверу в виде пары имя/значение: Cookie: NAME1=STRING1; NAME2=STRING2 ...
Дополнительные сведения
В случае, если cookie принимает новое значение при имеющемся уже в браузере cookie с совпадающими параметрами NAME, domain и path, то старое значение заменяется новым. В остальных случаях новые значения cookie добавляются к старым.
Использование expires не гарантирует сохранность cookie в течение заданного периода времени, поскольку клиент (браузер) может удалить запись из-за нехватки выделенного места или каких-либо других причин.
Клиент (браузер) может иметь ограничения для cookies, например:
всего может храниться до 300 значений cookies
каждый cookie не может превышать 4Кбайт
с одного сервера или домена может храниться до 20 значений cookie
Если ограничение 300 или 20 превышается, то удаляется первая по времени запись. При превышении лимита объема в 4Кбайт корректность значения cookie страдает - отрезается кусок записи (с начала этой записи) равный превышению объема.
Получение и использование cookie сервером с помощью SSI.
При наличии SSI на сервере, директивой <!--#echo var="..."--> можно считать любые переменные окружения, в том числе и ранее заданные значения cookie (переменная HTTP_COOKIE).
Примеры: <!--#echo var="HTTP_COOKIE"-->
Вставка всех полученных cookies в документ. <!--#if expr="$HTTP_COOKIE=/user\=old/" -->
проверяем, содержится ли в cookies "user=old".
<META HTTP-EQUIV="Set-Cookie" CONTENT="<!--#echo var="QUERY_STRING"-->;">
вставляем строку запроса, посланную методом GET для установки cookie.
Практические задания
Задание 1
Сделайте, чтобы ваша первая страница узнавала посетителя (приветствовала что "вы снова зашли на сайт студента "Ваше ФИО", если первый раз на странице, то писала "я вас не знаю" "). Примените директиву if из SSI (посмотрите пояснение к лабораторной работе 6). Подробнее, что должно происходить: При первом открывании страницы, она должна послать клиенту cookie. При последующих запросах страницы, клиент должен посылать cookie серверу. Сервер, получив это cookie, должен выдавать приветствие, в противном случае сообщать, что вас не знает.
Проверьте работоспособность на сервере.
Укажите, в виде комментариев, для чего предназначена каждая SSI команда.
