Размещено на http://allbest.ru

Самаркандский филиал ташкентского университета информационных технологий имени Мухаммада Ал-Хоразмий

Факультет «телекоммуникационные технологии и профессиональное образование»

Кафедра «информационно-образовательные технологии»

МЕТОДИЧЕСКОЕ ПОСОБИЕ

для выполнения практических работ по предмету

«Разработка WEB-приложений»

Ахмеджанова З.И.

Рецензент: Каршиев А.Б.

доц. кафедры “Программный инжиниринг” ТУИТ СФ

Рецензент: Зайналов Н.Р.

доц. кафедры “Информационные технологии СамИСИ.

САМАРКАНД - 2018



Введение

Создание web-приложений сегодня считается одним из перспективных направлений деятельности для многих компаний, занятых в сфере высокотехнологичных цифровых и компьютерных технологий. Отказ от традиционного программного обеспечения и перенос бизнес-инструментов на веб -- это тренд, который нельзя упускать. Но многие клиенты, да и сами программисты-консерваторы не хотят выходить из тени прошлого. Именно поэтому они всегда будут отставать от тех, кто не боится реализовывать креативные идеи, искать новые подходы, разрабатывать приложения, которые уже нужны будут «завтра». Тот, кто владеет объективной информацией и грамотно реализует свои идеи, разрабатывая современные бизнес-модели, будет всегда добиваться успеха.

Разработка web-приложений стало актуальной темой для многих специализированных компаний, и одновременно доступной для простых пользователей. Однако сегодня, с развитием интернет-технологий, работа в этой сфере существенно усложнилась, и одиночкам уже не справиться с поставленными задачами. Постепенно эта сфера деятельности переходит в руки небольших, но профессиональных компаний. Для них разработка web-приложений становится одним из основных занятий, и все усилия направляются на совершенствование прежних разработок или создания новых.

Наша команда относится к числу немногих, имеющих возможность осуществлять различные виды деятельности в этой сфере на высоком качественном уровне. Для этого у нас есть все, и, прежде всего, -- молодые, но уже опытные специалисты с кучей свежих идей и полным пониманием того, как их воплотить в реальность. Создание и тестирование web-приложений осуществляют все наши ребята, имеющие за своими плечами большой багаж теоретических знаний: креативщики, продюсеры, программисты, дизайнеры, тестеры и многие-многие другие, -даже наши специалисты по клинингу косвенно причастны к успеху всей команды, создавая уют в офисе, а это залог эффективной работы!

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

Данное методическое пособие по предмету «Разработка веб-приложений» был рарзаботан для учащихся 3 курса.



Практическое занятие №1

Тема: Основы технологии html. Работа с тегами

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

Указания к работе: спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или большей) по объему с УНИРС.

Разработать эскиз оформления веб-сайта (использовать любой графический редактор).

1. Выполнить верстку макета страницы с блочной структурой по разработанному эскизу.

Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов.

Типовая структура парного тега:

<тег [атрибут="значение" [атрибут="значение" [...]]]>содержимое</тег>

Типовая структура непарного (одиночного) тега:

<тег [атрибут="значение" [атрибут="значение" [...]]] />

Подавляющее большинство тегов HTML - парные, т.е. требуют наличия закрывающего тега.

Теги могут быть вложенными, при этом важно соблюдать порядок соответствия открывающих и закрывающих тегов.

· Теги HTML не чувствительны к регистру.

· Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.

· Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.

Структура веб-страницы

Список основных тегов HTML

<html>		Контейнер HTML-документа.
<head>		Блок мета-данных HTML-документа
<title>		Название HTML-документа, выводится в заголовке окна программы-браузера.
<meta>	См.подробное описание мета-тегов	Предоставляет дополнительную информацию о документе.
<body>		Начальный и конечный тег тела документа.
<p>		Параграф, основной текстовый контейнер, закрывающий тег обязателен </p>. После закрывающего тега браузер выполняет перенос строки и абзацный отступ.
<div>		Контейнер, основное предназначение -- размещение блоков содержимого на странице
<br> (в XHTML/HTML 5 - <br />)		Принудительный перенос строки, закрывающий тег не требуется
<pre>		Заключенный в теги <pre></pre> текст будет отображаться так, как он был отформатирован: с точным соблюдением переносов строки интервалов.
<ul>		Неупорядоченный (маркированный) список, элементы списка выводятся тегом <li>
<ol>		Упорядоченный (нумерованный) список, элементы списка выводятся тегом <li>
<a>	href = "URI"	Создает в документе гиперссылку, обязательный атрибут href указывает на ресурс или его местонахождение
<i>		Заключенный в теги <i></i> текст будет отображаться курсивом.
<b>		Заключенный в теги <b><b> текст будет отображаться жирным шрифтом.
<tt>		Заключенный в теги <tt></tt> текст будет отображаться моноширинный шрифтом.
<h1>...<h6>		Заголовки разделов. Возможные значения -- от h1 до h6. Семантически правильная структура заголовков веб-страницы влияет на ее ранжирование в поисковом индексе.
<sub>		Заключенный в теги <sub></sub> текст будет смещен вниз (нижний индекс)

Мета-теги

Основное предназначение мета-тегов (<meta ... />), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

Вся информация, находящаяся в мета-тегах ориентирована на серверы, браузеры и поисковых роботов. Для посетителя веб-страницы информация, которую несут в себе мета-теги, будет не видна.

В документе может находится любое количество тегов <meta>. Все они размещаются в блоке <head>...</head>.

Рассмотрим некоторые, часто используемые мета-теги:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Используется для того, чтобы браузер мог правильно определить тип и содержимого и кодировку веб-страницы.

<meta http-equiv="Refresh" content="N; url=http://example.org/">

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .



<meta name="author" content="Имя автора страницы">

Используется для указания имени автора. Поисковые системы могут найти нужную информацию по имени автора.

<meta name="keywords" content="список, ключевых, слов">

В мета-теге keywords указываются ключевые слова и их синонимы, присутствующие в документе. Этот тег изначально был ориентирован на поисковые машины, но был скомпрометирован веб-мастерами, ипользовавшими его для поискового спама.

<meta name="description" content="Сюда вписывается краткое описание страницы">

Этот тег задает фразу, по которой пользователь определяет суть вашей страницы и решает, посещать ли ее.

Вписанные выражения в данный meta-тег играют важную роль в рейтинге страницы.

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

<meta name="robots" content="index,all">

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано "noindex").



Специальные символы

В таблице приведены некоторые специальные символы HTML, имеющие особое назначение и собственный способ представления в виде мнемонического или числового кода.

Символ	Мнемокод	Числовой код	Описание
	 	 	неразрывный пробел
ў	¢	¢	цент
Ј	£	£	фунт стерлингов
Ґ	¥	¥	иена или юань
§	§	§	параграф
©	©	©	знак copyright
«	«	«	левая двойная угловая скобка
	­	­	место возможного переноса
®	®	®	знак зарегистрированной торговой марки
°	°	°	градус
І	²	²	верхний индекс два (xІ)
і	³	³	верхний индекс три (xі)
·	·	·	точка по середине
»	»	»	правая двойная угловая скобка
Ѕ	½	½	дробь - одна вторая
Ч	×	×	знак умножения
ч	÷	÷	знак деления
у	Σ	Σ	греческая заглавная буква сигма
л	λ	λ	греческая строчная буква лямбда
м	μ	μ	греческая строчная буква мю
*	•	•	маркер списка
…	…	…	многоточие ...
€	€	€	валюта евро

Общее форматирование

<!-- Это комментарий -->

<h1>Заголовок</h1>

<p align="center">Абзац по центру</p>

<p align="right">Абзац по правому краю</p>

<p>Обычный текст -- <b>полужирный текст</b></p>

<p><span style="font-size: 10em; color: red;">Ooops!</span> -- использование CSS</p>

Структура макета веб-страницы

Возможности HTML и CSS позволяют создавать гипертекстовые страницы как с линейной, так и с нелинейной структурой. Линейные структуры (где текст отображается последовательно, элемент за элементом) сейчас используются не часто. Пример веб-страницы с линейной структурой приведен влистинге 1 (обратите внимание на исходный код веб-страницы).

Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:

1. С использованием фреймов.

2. С использованием табличной верстки.

3. С использованием блочных элементов.

Пусть требуется создать документ, логически разделенный на три блока): «head» -- верхний блок, «menu» -- левый блок, «content» -- правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.

Листинг 2. Фреймовая структура

Содержимое блоков хранится в файлах top.html, left.html, content.html

Сборка выполнена в файле index.html, имеющем следующий вид:

<html>

<head>

<title>Фреймы</title>

</head>

<frameset rows="10%,*">

<frame name="top" src="top.html">

<frameset cols="10%,*">

<frame name="left" src="left.html">

<frame name="cont" src="content.html">

</frameset>

<noframes>Это для браузеров, не поддерживающих фреймы.</noframes>

</frameset>

</html>

Листинг 3. Табличная структура

<html>

<head>

<title>Таблицы</title>

</head>

<body>

<table style="width: 100%; height: 100%; border: solid 1px black;"><tr>

<td colspan=2 height="10%">HEAD</td></tr><tr>

<td width="10%">LEFT</td>

<td>CONTENT</td></tr> </table>

<body>

</html>

Листинг 4. Блочная структура

<html>

<head>

<title>Блоки (div)</title><style> <!-- см. внедренные стили -->

body{margin: 10px;}

div{border: solid 1px black;}

.top{position: relative; height: 100px; width: 100%;}

.left{position: absolute; top: 114px; left: 10px; width: 200px; }

.main{position: absolute; top: 114px; left: 214px; margin-right:8px;}

</style>

</head>

<body>

<div class="top">TOP</div>

<div class="left">LEFT</div>

<div class="main">CONTENT</div>

</body></html>

Задания к работе

1. Создание простейших файлов HTML.

2. Управление расположением текста на экране.

3. Некоторые специальные команды форматирования.

4. Выделение фрагментов текста.

5. Использование стилей заголовка.

6. Установка размера текущего шрифта.

7. Установка гарнитуры и цвета шрифта.

8. Выравнивание текста по горизонтали.

9. Задание цвета фона и текста.

10. Размещение графики на Web-странице.

11. Установка атрибутов изображения.

12. Установка фонового изображения на Web-странице.



Практическое занятие № 2-3

Тема: Таблицы CSS. Использование стилей CSS

Цель работы: Изучить способы использования стилевой разметки. Научиться создавать и применять таблицы стилей для управления представлением содержимого веб-страниц.

Указания к работе: Создать внешние таблицы стилей (раздельные для устройств screen, print и handheld) для вашего сайта (см. задание к практике №1).

1. Подключить созданные таблицы к макету страницы.

2. Проверить правильность отображения веб-страниц в различных браузерах.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) -- это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.

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

Таблица стилей -- это совокупность стилей, применимых к гипертекстовому документу.

Каскадирование -- это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили.

Другой аспект каскадирования -- наследование (inheritance), -- означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа.

Например, если вы примените определенный цвет текста в теге <div>, то все теги внутри блока будут отображаться этим же цветом.

Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей. Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресу http://www.w3.org/Style/CSS/

Общий синтаксис CSS

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать.

Таблицы стилей составляются из определенных частей (рис. 1):

Рис. 1. Синтаксис описания стиля CSS

· Селектор (Selector). Селектор -- это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа.

· Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д.

· Значение (Value). Значения -- это фактические числовые или строковые константы, определяющие свойство селектора.

· Описание (Declaration). Совокупность свойств и их значений. Создание простейших файлов HTML.

· Правило (Rule). Полное описание стиля (селектор + описание).

Таким образом, таблица стилей -- это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:

селектор[, селектор[, ...]] {свойство: значение;}

Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован.

Правила CSS

Итак, каскадная таблица стилей -- это набор правил форматирования тегов HTML.

Приведем несколько примеров написания таких правил:

1. Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) -- Serif, кегль (размер шрифта) -- 14px:

2. p {

3. text-align: justify;

4. text-indent: 30px;

5. font-family: Serif;

6. font-size: 14px;

7. }

Это правило будет применено ко всем тегам <p>.

8. Синий цвет для заголовков с первого по третий уровень:

9. h1, h2, h3 {

10. color: blue; /* тоже самое, что и #0000FF */

11. }

12. Таблицы и изображения выводить без обрамления:

table, img {border: none;}

13. Ссылки в элементах списков показывать без подчеркивания:

li a {text-decoration: none;}

14. Внутренние отступы слева и справа для блоков (<div>), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:

15. div, th, td {

16. padding-left: 10px;

17. padding-right: 10px;

18. background-color: yellow;

19. }

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

21. a {color: black; font-weight: bold;}

22. p a, li a {font-weight: normal; text-decoration: none;}

23. p a:hover*, li a:hover {

24. color: #00FF00; text-decoration: underline;

25. }

* -- в описании правила использован псевдоэлемент (a:hover) -- элемент, который не является частью структуры дерева тегов, но имеет свои методы и свойства

Стилевые классы

Стандарт CSS представляет возможности создания именованных стилей -- стилевых классов.

Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору?

Предположим, что в документе вам нужны два различных вида основного текста -- один без отступа, второй -- с левым отступом и шрифтом красного цвета.

Для этого нужно создать правила для каждого из них, например так:

p {margin-left: 0;}

p.warn {margin-left: 40px; color: #FF00;}

Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:

<p class=”warn”>Красный текст с отступом слева</p>

Общий синтаксис описания класса:

селектор.имя_класса {описание}

При создании класса селектор можно не указывать, тогда это правило можно применять к любому селектору, поддерживающему тот же набор свойств.

Вот несколько примеров:

Правило:

.solid_blue {color: blue;}

Использование:

<p class=”solid_blue”>Синий текст абзаца</p>

<li class=”solid_blue”>Синий текст элемента списка</li>

Правило:

h1.bigsans {font-family: Sans; font-size: 1.5em;}

h1.smallserif {font-family: Serif; font-size: .84em;}

Использование:

<h1 class=”bigsans”>Большой, но рубленый</h1>

<h1 class=”smallserif”>Маленький, но с засечками</h1>

Идентификаторы

В качестве селектора может выступать идентификатор элемента гипертекста, указанный в атрибуте id. Для назначения стилей таким элементам используется синтаксис, аналогичный описанию классов, но вместо точки ставится знак # (“решетка”). Например:

div#content {

position: absolute;

top: 10px;

left: 10%;

right: 10%;

border: solid 1px silver;

}

...

<div id="content">Текст</div>

Следует помнить, что идентификаторы элементов должны быть уникальны в пределах документа.

Группировка свойств

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

div {

margin-left: 10px;

margin-top: 5px;

margin-right: 40px;

margin-bottom: 15px;

}

Это же правило можно переписать с группировкой в следующем виде:

div {margin: 5px 40px 15px 10px;} /*порядок: top right bottom left*/

Оба стиля будут отображаться одинаково.

Группировка может применяться для таких свойств, как margin, padding, font, border, background и еще некоторых (см. документацию CSS)

Подключение стилей

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

· Встраивание (Inline). Этот метод позволяет применить стиль к заданному тегу HTML.

· Внедрение (Embedded). Внедрение позволяет управлять стилями страницы целиком.

· Связывание (Linked или External). Связанная таблица стилей позволяет вынести описание стилей во внешний файл, ссылаясь на который можно контролировать отображение всех страниц сайта.



Встроенные стили

Встраивание стилей предоставляет максимальный контроль над всеми элементами веб-страницы.

Встроенный стиль применяется к любому тегу HTML с помощью атрибута styleследующим образом:

<p style="font: 12pt Courier">Это текст с кеглем 12 точек и гарнитурой Courier</P>

Пример:

<div style="font-family: Garamond; font-size: 18 pt;>"

Весь текст в этом разделе имеет размер 18 точек и шрифт Garamond.

<span style="color:#ff3300;">

А этот фрагмент еще и выделен красным цветом.</span>

</div>

Встроенные стили полезны, когда необходима тонкая настройка отображения некоторого элемента страницы или небольшой веб-страницы.

Внедренные стили

Внедренные стили используют тег <style>, который размещают в заголовке HTML-документа (<head>...</head>):

<html>

<head>

...

<style>

правила CSS

</style>

...

</head>

<body>

...

Пример использования внедренных стилей из ЛР №1.

Связанные таблицы стилей

Связанные (linked), или внешние (external) таблицы стилей -- наиболее удобное решение, когда речь идет об оформлении целого сайта. Описание правил помещается в отдельный файл (обычно, но не обязательно, с расширением .css). С помощью тега <link> выполняется связывание этой таблицы стилей с каждой страницей, где ее необходимо применить, например так:

<link rel=stylesheet href="sample.css" type="text/css">

Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле sample.css. Следует отметить, что файл со стилями физически может находиться на другом веб-сервере, тогда в href нужно указать абсолютный путь к нему.

И снова каскадирование

Если вам нужна сотня-другая-третья страниц HTML -- используйте внешнюю, глобальную, таблицу стилей.

Если некоторые из этих страниц требуют корректировки общего оформления -- используйте внедренный стиль. А если на странице нужно явно изменить оформление одного-двух элементов, то применяйте встроенные стили.

Именно в таком порядке происходит перекрытие стилей при каскадировании, схематично это можно представить так: связанные стили -> внедренные стили -> встроенные стили

Проблемы с браузерами

Обязательно просматривайте страницы с таблицами стилей в различных браузерах. Это связано с тем, что разные браузеры могут по разному интерпретировать одно и то же правило, а некоторые свойства и/или значения и вовсе не поддерживать. Следует также тестировать страницы с отключенными стилями (например, в текстовых браузерах), чтобы убедиться, что страница читабельна.

Аппаратно-зависимые стили

Таблицы стилей могут применяться для управления отображением содержимого в зависимости от используемого устройства вывода (монитор, проектор, устройство печати, звуковой синтезатор и т.п.). Для этого в описание стилей включить тип устройства, например так:

@media print {/* печатающее устройство */

BODY { font-size: 10pt; }

}

@media screen { /* монитор */

BODY { font-size: 12pt; }

}

@media screen, print {

BODY { line-height: 1.2; }

}

@media all {

BODY { margin: 1pt; }

}

Как видно из примера, вся таблица разбивается на секции, каждая из которых начинается со слова @media, за которым следует название класса устройств и далее, в фигурных скобках, непосредственно описание стилей.

Можно разделить таблицы стилей иначе, указав тип устройства в теге <link>:

<link rel=stylesheet href="sample.css" type="text/css" media=”screen”>

Свойства CSS

В табл.1 перечислены некоторые часто используемые свойства CSS и их назначение. Полная спецификация CSS текущей версии -- http://www.w3.org/Style/CSS

Таблица 1. Свойства элементов CSS

Имя	Значения	Описание
background	[background-color || background-image || background-repeat || background-attachment || background-position] | inherit	Управление фоном элемента
background-color	<color> | transparent | inherit	Цвет фона
background-image	<uri> | none | inherit	Фоновое изображение
background-position	[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit	Положение фоновой картинки
background-repeat	repeat | repeat-x | repeat-y | no-repeat | inherit	Повторение фоновой картинки
border	[ border-width || border-style || <color> ] | inherit	Границы элемента
border-collapse	collapse | separate | inherit	Объединение/разделение смежных границ
border-color	<color>{1,4} | transparent | inherit	Цвет границы
border-style	<border-style>{1,4} | inherit	Стиль линии границы
border-top border-right border-bottom border-left	[ border-top-width || border-style || <color> ] | inherit	Управление стилем заданной границы
border-width	<border-width>{1,4} | inherit	Толщина линии границы
bottom	<length> | <percentage> | auto | inherit	Низ элемента
clear	none | left | right | both | inherit	Запрет заполнения свободного пространства рядом с элементом
clip	<shape> | auto | inherit	Обрезка содержимого элемента
color	<color> | inherit	Цвет содержимого
cursor	[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit	Форма курсора
display	inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit	Способ отображения элемента
empty-cells	show | hide | inherit	Отображение пустых ячеек таблицы
float	left | right | none | inherit	Свободное размещение элемента
font	[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit	Управление шрифтом
font-family	[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit	Гарнитура
font-size	<absolute-size> | <relative-size> | <length> | <percentage> | inherit	Кегль
font-style	normal | italic | oblique | inherit	Стиль шрифта
font-variant	normal | small-caps | inherit	Варианты отображения шрифта
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit	Толщина шрифта
height	<length> | <percentage> | auto | inherit	Ширина элемента
left	<length> | <percentage> | auto | inherit	Положение левой границы элемента
line-height	normal | <number> | <length> | <percentage> | inherit	Высота строки
list-style	[ list-style-type || list-style-position || list-style-image ] | inherit	Стиль списка
margin	<margin-width>{1,4} | inherit	Внешний отступ
margin-top margin-right margin-bottom margin-left	<margin-width> | inherit	Внешний отступ по заданной стороне
padding	<padding-width>{1,4} | inherit	Внутренний отступ
padding-top padding-right padding-bottom padding-left	<padding-width> | inherit	Внутренний отступ по заданной стороне
position	static | relative | absolute | fixed | inherit	Позиционирование элемента
right	<length> | <percentage> | auto | inherit	Положение правой границы
text-align	left | right | center | justify | <string> | inherit	Выравнивание текстового блока
text-decoration	none | [ underline || overline || line-through || blink ] | inherit	Текстовые эффекты
text-indent	<length> | <percentage> | inherit	Абзацный отступ
text-transform	capitalize | uppercase | lowercase | none | inherit	Начертание текста
top	<length> | <percentage> | auto | inherit	Положение верхней границы элемента
vertical-align	baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit	Вертикальное выравнивание в пределах блока
visibility	visible | hidden | collapse | inherit	Управление видимостью элемента
white-space	normal | pre | nowrap | inherit	Управление пробелами между словами
width	<length> | <percentage> | auto | inherit	Ширина элемента
z-index	auto | <integer> | inherit	Порядок перехода по клавише Tab



Позиционирование элементов

Рассмотрим пример, приведенный в листинге 4 из лабораторной работы №1. В этом примере фрагменты содержимого размещены в блочных элементах <div>, для которых переопределены стили свойств, определяющих положение на странице. Если отключить эти стили, то вид страницы сильно изменится (рис. 2).

Рис. 2. Вид страницы с отключенными стилями

Такое влияние на внешний вид оказывает свойство position. Это свойство в сочетании со свойствами left, top, right, bottom, display, clear и ряда других позволяет управлять положением элементов на странице и порядком их вывода. Свойство position может принимать такие значения:

static -- нормальное положение

Данный блок является обычным блоком, он отображается согласно общим правилам. Свойства 'left' и 'top' не применяются.

relative -- относительное позиционирование

Положение блока рассчитывается в соответствии с нормальным потоком вывода. Затем блок смещается относительно своего нормального (static) положения.

absolute -- абсолютное позиционирование

Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих элементов того же уровня.

fixed -- фиксированное положение

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

Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано в примере:

@media screen { H1#first { position: fixed; } }

@media print { H1#first { position: static; } }

Управляя позиционированием, можно различным образом размещать блоки информации на странице, вплоть до создания эффектов наложения, перетекания, градиента и т.п.

Задания к работе

1. Создание простейших таблиц.

2. Создание ссылки на другой HTML-документ.

3. Создание web-сервера

4. Создание гипертекстовых связей.

5. Создание каскадных таблиц стилей CSS.

6. Задание свойств шрифта с помощью CSS.

7. Создание динамического HTML и каскадных таблиц стилей.

8. Создание статического HTML и каскадных таблиц стилей.

9. Создание и использование идентификтаора в качестве селектора стиля.

10. Построение группировки элементов разметки при определении единого стиля.

11. Создание таблиц для работы с различными редакторами.

12. Создание таблиц с применением различных фоных цветов и цветовых рамок.



Практическое занятие №4

Тема: Основы программирования со стороны клиента. (Java script)

Цель работы: закрепить и расширить практические знания по программированию на языке javascript, получить представление об практическом использовании объектной модели веб-документа (DOM) и использовании веб-форм.

Указания к работе: написать скрипт, проверяющий код защиты от автоматического постинга и вырезающий ссылки из формы ввода комментария (на странице отзывов и комментариев)

Пояснение: В ходе выполнения задания требуется написать клиентсткую программу на javascript, которая генерирует арифметический пример, ответ на который должен дать пользователь. Другой вариант -- генерация произвольной строки, которую должен воспроизвести пользователь. После того, как пользователь ввел ответ программа должна проверить его правильность. Смысл этого задания не столько в разработке эффективного теста Тьюринга, сколько в освоении javascript.

· Элементы управления

· Объект document

· События

· Объект RegExp

· Примеры скриптов

CAPTCHA (от англ. «Completely Automated Public Turing test to tell Computers and Humans Apart», рус., сленг. - КАПЧА) -- полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей) компьютерный тест, используемый для того, чтобы определить, кем является пользователь системы: человеком или компьютером. Основная идея теста: предложить пользователю такую задачу, которую может решить человек, но которую несоизмеримо сложно предоставить для решения компьютеру.

В основном это задачи на распознавание символов. CAPTCHA чаще всего используется при необходимости предотвратить использование интернет-сервисов ботами, в частности, для предотвращения автоматических отправок сообщений, регистрации, скачивания файлов, массовых рассылок и т. п.

Элементы управления

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

Элемент input

Тэг <input> представляет различные элементы, в зависимости от значения атрибута type (табл.1).

Таблица 1. Типы элементов управления (атрибут type)

Значение type	Описание
text	Однострочное поле ввода. Используйте атрибуты maxlength и size для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).
password	То же самое, что и атрибут text, но вводимое пользователем значение скрыто замещающими символами (звездочки, точки и т.п.).
checkbox	Флажок (маркер множественного выбора). Используется для отметки выбранных вариантов.
hidden	Скрытое поле. Не отображается браузером и не дает пользователю изменять присвоенные данному полю значение. Это можно сделать только программным путем (или изменением значения поля при передаче данных через адресную строку или в теле запроса).
image	Кнопка-картинка. Позволяет использовать графический рисунок в качестве кнопки. Все значения атрибута value игнорируются. Само описание картинки осуществляется через атрибут src и по синтаксису совпадает с тегом <img>.
radio	Радиокнопка. Позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом type="radio" с разными значениями атрибута value, но с одинаковыми значениями атрибута name. При выборе одного из полей ввода типа radio все остальные поля данного типа с тем же именем (атрибут name) автоматически станут невыбранными на экране.
button	Пользовательская кнопка. Должна быть запрограммирована на обработку нажатий. Атрибут value содержит текст надписи на кнопке.
submit	Кнопка отправки данных. При ее нажатии будет будет вызван обработчик, описанный в заголовке формы (form action="scriptname", подробнее о теге form - в лабораторной работе №8 ) и ему будут переданы значения всех элементов, описанных в теге form. Атрибут value содержит текст надписи на кнопке.
reset	Кнопка сброса. При нажатии ее все поля формы примут значения, заданные по умолчанию.

Атрибуты элемента input

· type -- определяет тип поля ввода. По умолчанию равно text.

· name -- имя поля ввода. Используется как идентификатор переменной при передаче данных на сервер и для программного обращения к элементу из скрипта javascript.

· id -- идентификатор элемента. Должен быть уникальным в пределах веб-документа.

· checked -- означает, что checkbox или radio будет выбран.

· maxlength -- определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов броузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести.

· size -- определяет визуальный размер поля ввода на экране в символах.

· src -- URL, указывающий на картинку (используется совместно со значением type="image").

· value -- значение по умолчанию или установленное значение.

Элемент textarea. Тэг <textarea> используется для того, чтобы позволить пользователю вводить более одной строки информации (многострочный текст). При передаче значения из textarea сохраняются все символы форматирования (табуляция, перевод строки, возврат каретки).

Атрибуты, используемые с тегом <textarea> задают его размеры (в символах и строках):

· rows -- высота поля ввода в символах

· cols -- ширина поля ввода в строках

Пример использования тега <textarea>:

<textarea rows=10 cols=50>Москва, Дмитровское шоссе, д.9Б, офис 448</textarea>

Элемент select. Элемент select отображает на странице список выбора, который может быть представлен следующими способами:

· select -- выпадающий список.

· select single -- развернутый список.

· select multiple -- список с множественным выбором.

Примеры описания элемента select:

<select name="group">

<option>понедельник, среда, пятница</option>

<option> вторник, четверг, суббота</option>

<option> воскресенье</option>

</select>

<select single name="group" size="3">

<option>зима</option>

<option>весна</option>

<option>лето</option>

<option>осень</option>

</select>



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

Рис. 1. Интерфейсы объекта document

Свойства объекта Document

Начнем со свойств, общих для всех браузеров. Большинство их доступны как для чтения, так и для изменения. Все значения свойств -- строковые.

· title -- текст заголовка документа (содержимое элемента title);

· fgColor и bgColor -- цвет текста и цвет фона документа;

· linkColor, vLinkColor, aLinkColor -- цвета непосещенных, посещенных и активных гиперссылок;

· lastModified (только для чтения) -- дата изменения документа;

· referrer (только для чтения) -- адрес источника перехода;

· URL, location -- собственный адрес документа.

Более интересны и полезны для разработчика свойства-массивы объекта Document. Все они, естественно, имеют свойство length (количество элементов в массиве).

Большинство свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с атрибутами соответствующих элементов HTML (список неполный):

· объект Anchor (якорь) имеет единственное свойство name;

· объект Link (ссылка) имеет свойства href, target;

· объект Image (изображение) имеет свойства src, width, height.

К объектам документа, хранящимся в массивах images, controls и прочим, а также к элементам форм можно обращаться по имени (свойство name) или идентификатору (свойство id).

Пусть, например, в документе имеется описание <img src="images/cat.jpg" id="cat_id" name="cat_name"> и оно является n-ым изображением, встречающимся в документе. К этому элементу img можно обратиться по крайней мере следующими способами:

1. Как к элементу массива images по индексу (индексация начинается с 0): window.document.images[n-1]

2. Как к элементу хэш-массива images по ключу (значение name как ключ массива): window.document.images["cat_name"]

3. Используя значение атрибута name как свойство объекта: window.document.cat_name

4. Используя значение атрибута id и свойство getElementById: window.document.getElementById("cat_id")

Методы объекта Document

· open() -- открывает новый документ; при этом все его содержимое удаляется.

· close() -- закрывает ранее открытый документ.

· write() -- записывает в документ заданную в качестве аргумента строку.

· writeln() -- аналогичен предыдущему, но выведенная в документ строка заканчивается символом перевода строки.

Методы write() и writeln() весьма полезны и часто используются для динамического формирования содержимого документа.

Вот как, например, можно включить в документ дату его последнего изменения:

<script>document.write(document.lastModified);</script>

События

Для всех элементов документа имеется возможность отслеживать различные события (загрузка, перемещение мыши, мышеклики и проч.) и вызывать функции обработки таких событий.

В таблице 2 приведено краткое описание событий, доступных для использования в программах на javascript:

Таблица 2. События веб-документа

Событие	Описание
OnLoad	Броузер заканчивает открытие документа HTML
OnUnload	Броузер выгружает документ HTML
OnClick	Пользователь щелкнул мышью по элементу
OnDblClick	Пользователь дважды щелкнул мышью по элементу
OnMouseDown	Пользователь нажимает кнопку мыши
OnMouseOver	Пользователь перемещает мышь поверх элемента
OnMouseMove	Пользователь перемещает мышь поверх элемента
OnMouseOut	Пользователь перемещает мышь, выходя из элемента
OnFocus	Элемент получает фокус ввода
OnBlur	Элемент теряет фокус ввода
OnKeyPress	Пользователь нажимает и отпускает клавишу
OnKeyDown	Пользователь нажимает клавишу над элементом
OnKeyUp	Пользователь отпускает клавишу над элементом
OnSubmit	Данные из формы переданы Web-серверу
OnReset	Форма очищена
OnSelect	Пользователь выбирает текст в текстовом поле
OnChange	Потеря фокуса ввода элементом после изменения его значения

Назначение обработчика события выполняется путем указания имени события в виде атрибута тега, например так:

<a name="test" onClick="alert('Hello, world!');">say "Hello"</a>

При использовании событий, следует понимать, что не каждый элемент может породить определенное событие. Например в следующем примере вызов функции resetAll не произойдет, поскольку элемент <a>, никогда не породит событие onReset;

...

<script>

function resetAll() {

// do something

}

</script>

...

<a href="clear.htm" onReset="resetAll();">Сброс</a>

...

Объект RegExp

При работе с веб-страницами часто возникает необходимость выполнить сложную обработку текста. В javascript для этого имеется встроенный объект RegExp, который позволяет работать с регулярными выражениями.

Работа с объектном RegExp в javascript мало отличается от работы с любыми другими объектами, но сам синтаксис регулярных выражений требует понимания и практики. Хорошая статья по этой теме написана М.С.Выскорко, она приводится здесь в качестве руководства по регулярным выражениям в javascript.

Примеры скриптов

В листингах 1-6 приведены примеры простых скриптов, иллюстрирующими базовые возможности javascript при работе с объектами веб-документа. При выполнении заданий используйте предлагаемые примеры в качестве образцов.

WARNING: Имейте ввиду, что различные браузеры могут по разному выполнять код javascript (или даже не выполнять его совсем).

Листинг 1. Ограничение количества символов

<html>

<head>

<title>Ограничение количества вводимых символов</title>

<script type="text/javascript">

var maxLen = 25;

function checkMaxinput(form) {

if (form.message.value.length > maxLen)

form.message.value = form.message.value.substring(0, maxLen);

else

form.remLen.value = maxLen --

form.message.value.length;

}

</script>

</head>

<body>

<form name=myform action="somehandler.cgi">

<h1>Ограничение количества вводимых символов<h1>

<textarea name=message cols=28 rows=4 onKeyDown="checkMaxinput(this.form)"

onKeyUp="checkMaxinput(this.form)"></textarea>

<p>Осталось <input readonly type=text name=remLen size=3 value="25"> символов</p>

</form>

</body>

</html>

Листинг 2. Проверка ввода

<html>

<head>

<title>Проверка ввода

</title>

<SCRIPT type="text/javascript">

function checkIt(){

var t0=document.getElementById('first').value;

var t1=document.getElementById('second').value;

if (t0 == "" || t0 == "Имя") {

alert("Вы не указали свое имя!"); return false;

}

if (t1 == "") {

alert("Вы не ввели необходимую информацию!");

return false;

}

return true;

</SCRIPT>

</head>

<body>

<form method='get' action='somescript.php'>

<input id="first" type="text" size=60px value='Имя'>

<br>

<textarea id="second" rows=4 cols=60></textarea>

<br>

<input type='submit' onClick="if (!checkIt()){return false;}" value="ОК">

</form>

</body>

</html>

Листинг 3. Управление окнами (используется объект window)

<html>

<head>

<title>Открытие/закрытие нового окна</title>

</head>

<body>

<p><a name="demoOpen" onClick="mywindow = window.open('window.htm','mywin','height=120, width=300, left=100, top=30');">Открыть</a>

<a name="demoClose" onClick="mywindow.window.close();">Закрыть</a>

</body>

</html>

Листинг 4. Изменение оформления

<html>

<HEAD>

<TITLE>Изменение цвета объекта по щелчку мыши</TITLE>

</head>

<BODY>

<p onClick="fgColor='#3CB094';bgColor='#FFFF00';">CLICK 4 REDRAW</p>

</BODY>

</HTML>

Листинг 5. Текущее время (использован встроенный объект Date)

<html>

<HEAD>

<TITLE>Часы, отображающие текущее время</TITLE>

<script type="text/javascript">

function fulltime() {

var time=new Date();

document.clock.full.value=time.toLocaleString(); // 1-ый вариант

document.getElementById("jsclock").innerHTML=time.toLocaleString(); // 2-ой вариант

setTimeout('fulltime()',500) }

</script></head><body>

<form name=clock>

<input type=text size=20 name=full><!-- 1-ый вариант -->

<span id="jsclock"></span><!-- 2-ой вариант -->

</form>

<script type="text/javascript"> fulltime(); </script>

</BODY>

</HTML>



Листинг 6. Определение браузера (использован объект navigator)

<HTML>

<HEAD>

<TITLE>Сведения о браузере</TITLE>

</HEAD>

<BODY>

<h1>Для навигации в Web вы используете:</h1>

<ul>

<SCRIPT type="text/javascript">

document.write("<li>Имя программы:<b>"+navigator.appName+"</b>");

document.write("<li>Версия:<b>"+navigator.appVersion+"</b>");

document.write("<li>Пользовательский агент:<b>"+navigator.userAgent+"</b>");

document.write("<li>Платформа: <b>"+navigator.platform+"</b>");

</SCRIPT>

</ul>

</BODY>

</HTML>

Задания к работе

1. Напишите функцию создания генератора sequence(start, step).

2. Напишите функцию map(fn, array), которая принимает на вход функцию и массив, и обрабатывает каждый элемент массива этой функцией, возвращая новый массив.

3. Напишите функцию создания генератора take(gen, x).

4. Напишите функцию fmap(a, gen), которая принимает на вход 2 функции.

5. Напишите функцию создания генератора (partial application)

6. Напишите функцию pluck, которая берет массив объектов и возвращает массив значений определенного поля

7. Напишите функцию filter, которая принимает функцию-предикат и массив. Возвращает она массив значений, для которых предикат вернет true

8. Напишите функцию, считающую число свойств в объекте

9. дан список вида «страна, город, население»: Можете взять оттуда первые 5-10 городов и перенести в код. Города в списке могут идти в произвольном порядке. Напишите программу, которая отберет и выведет N самых населенных городов по убыванию числа жителей.

10. Напишите функцию, считающую число свойств в объекте.

11. Напиши функцию fmap(a, gen), которая принимает на вход 2 функции.

12. Напишите функцию pluck, которая берет массив объектов и возвращает массив значений определенного поля.



Практическое занятие №5

Тема: Первые основные понятия PHP

Цель работы: изучить основы языка PHP. Разработать простое серверное приложение на языке PHP.

Указание к работе: написать скрипт, учитывающий количество кликов по ссылкам на скачивание файлов, записывающий эти данные в файл, а затем выполняющий редирект на скачиваемый файл.

Серверные приложения

Препроцессная обработка на стороне сервера подразумевает вызов программы-интерпретатора, которая обрабатывает запрашиваемый файл скрипта, исполняет его команды. Результат работы интерпретатора передается веб-серверу, который, в свою очередь, возвращает их клиенту (рис. 1)

Рис. 1. Препроцессинг HTML на сервере



Основы PHP

PHP (рекурсивный акроним для "PHP: Hypertext Preprocessor") это широко распространённый язык сценариев, который создан специально для Веб и который можно внедрять в HTML.

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

PHP предельно прост для новичка в программировании, но предлагает много продвинутых возможностей для программиста-профессионала. Возможности PHP весьма широки, но освоить основные из них несложно за пару часов (конечно же, имея понятие о программировании в целом). Листинг 1 иллюстрирует применение PHP для формирования веб-страницы с текстом «Hello, World!» (курсивом выделен исходный код PHP).

Листинг 1 Простая программа на PHP

<?php

$site_title = "A first PHP program";

$hello = "Hello, World!";

?>

<html>

<head>

<title><?PHP echo $site_title; ?></title>

</head>

<body>

<?PHP

//Вывести текст с меткой времени