Вы находитесь на странице: 1из 96

Содержание

Введение...............................................................................................................................................5
Тема 1. Структура и принципы Веб...................................................................................................5
О роли стандартизации в Интернет..............................................................................................6
Стек протоколов TCP/IP................................................................................................................8
Система доменных имен DNS.......................................................................................................9
Структура и принципы WWW....................................................................................................11
Протоколы Интернет прикладного уровня................................................................................12
Тема 2. Введение в клиент-серверные технологии Веб.................................................................13
Двухзвенная архитектура............................................................................................................14
Трехзвенная архитектура.............................................................................................................16
Тема 3. Протокол HTTP....................................................................................................................19
Тема 5. Разработка структуры и этапы построения веб-сайта......................................................32
Логическая и физическая структура сайта................................................................................32
Модели организации сайта..........................................................................................................34
Этапы разработки сайта...............................................................................................................38
Тема 6. Язык разметки гипертекста HTML......................................................................................43
Форматирование текста.................................................................................................................44
Списки............................................................................................................................................46
Гиперссылки.................................................................................................................................46
Таблицы.........................................................................................................................................46
Рисунки..........................................................................................................................................47
Формы............................................................................................................................................48
Тема 7. Технология CSS....................................................................................................................50
Синтаксис CSS..............................................................................................................................51
Селекторы......................................................................................................................................51
Включение CSS в HTML...............................................................................................................52
CSS-свойства: цвет, фон, шрифты, текст...................................................................................53
Блоки в CSS...................................................................................................................................58
Таблицы.........................................................................................................................................61
Тема 8. JavaScript. Программное взаимодействие с HTML-документами на основе DOM API.
..............................................................................................................................................................64
Включение скриптов JavaScript в HTML-страницу..................................................................64
Ввод и вывод информации..........................................................................................................65
Операторы языка JavaScript.........................................................................................................66
Арифметические операторы......................................................................................................66
Операторы присваивания........................................................................................................66
Операторы сравнения................................................................................................................67
Логические операторы..............................................................................................................67
Операторы условного перехода.................................................................................................67
Оператор if.................................................................................................................................67
Оператор switch........................................................................................................................67
Операторы цикла......................................................................................................................68
Функции.........................................................................................................................................69
Встроенные объекты....................................................................................................................70
Обработка событий........................................................................................................................76
Объектная модель DOM................................................................................................................76
Тема 9. Разработка сценариев на PHP............................................................................................80
Объединение с HTML..................................................................................................................82
Выражения....................................................................................................................................83
Введение в типы данных.............................................................................................................85
Строки............................................................................................................................................88
Массивы........................................................................................................................................91
HTML формы (методы GET и POST).........................................................................................94
Функции для работы с переменными.........................................................................................96
Функции для работы с числами..................................................................................................96
Функции для работы со строками...............................................................................................96
Функции для работы с сессиями.................................................................................................99
Введение

Предметом данного курса являются технологии глобальной сети World Wide Web
(сокращенно WWW или просто Web). На русском языке распространенным вариантом
является название "Веб".

В частности, в рамках курса будут рассмотрены такие вопросы как:

1. Структура и принципы Веб (базовые понятия, архитектура, стандарты и протоколы).


2. Технологии сети Веб (языки разметки и программирования веб-страниц, инструменты
разработки и управления веб-контента и приложений для Веб, средства интеграции
веб-контента и приложений в Веб).

Сеть Веб представляет собой глобальное информационное пространство, основанное на


физической инфраструктуре Интернета и протоколе передачи данных HTTP. Зачастую,
говоря об Интернете, подразумевают именно сеть Веб.

Тема 1. Структура и принципы Веб.

Поскольку физической основой сети Веб является Интернет, то для более глубокого
понимания многих вопросов данного курса потребуется кратко ознакомиться со структурой
и протоколами Интернета.

Что же такое Интернет?

По сути, это самая большая в мире сеть, не имеющая единого центра управления, но
работающая по единым правилам и предоставляющая своим пользователям единый набор
услуг. Интернет можно рассматривать как "сеть сетей", каждая из которых управляется
независимым оператором – поставщиком услуг Интернета (ISP, Internet Service Provider).

С точки зрения пользователей Интернет представляет собой набор информационных


ресурсов, рассредоточенных по различным сетям, включая ISP-сети, корпоративные сети,
сети и отдельные компьютеры домашних пользователей. Каждый отдельный компьютер в
данной сети называется хостом (от английского термина host).

Сегодняшний Интернет обязан своему появлению объединенной сети ARPANET, которая


начиналась как скромный эксперимент в новой тогда технологии коммутации пакетов
(табл.1.1). Сеть ARPANET была развернута в 1969 г. и состояла поначалу всего из четырех
узлов с коммутацией пакетов, используемых для взаимодействия горстки хостов и
терминалов. Первые линии связи, соединявшие узлы, работали на скорости всего 50 Кбит/с.
Сеть ARPANET финансировалась управлением перспективного планирования научно-
исследовательских работ ARPA (Advanced Research Projects Agency) министерства обороны
США и предназначалась для изучения технологии и протоколов коммутации пакетов,
которые могли бы использоваться для кооперативных распределенных вычислений.

Возможно ли централизованное управление в такой глобальной сети? Ответ на данный


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

То есть Интернет является децентрализованной сетью, что имеет свои достоинства и


недостатки.

1. Достоинства:
o Легкость наращивания Интернета путем заключения соглашения между двумя ISP.
2. Недостатки:

 Сложность модернизации технологий и услуг Интернета, поскольку требуются


согласованные усилия всех поставщиков услуг.
 Невысокая надежность услуг Интернета.
 Ответственность за работоспособность отдельных сегментов этой сети возлагается на
поставщиков услуг Интернета.

Существуют различные типы поставщиков услуг Интернета:

 просто поставщик услуг Интернета выполняет транспортную функцию для конечных


пользователей – передачу их трафика в сети других поставщиков услуг Интернета;
 поставщик интернет-контента имеет собственные информационно-справочные
ресурсы, предоставляя их содержание в виде веб-сайтов;
 поставщик услуг хостинга предоставляет свои помещения, каналы связи и серверы
для размещения внешнего контента;
 поставщик услуг по доставке контента занимается только доставкой контента в
многочисленные точки доступа с целью повышения скорости доступа пользователей
к информации;
 поставщик услуг по поддержке приложений предоставляет клиентам доступ к
крупным универсальным программным продуктам, например SAP R3;
 поставщик биллинговых услуг обеспечивает оплату счетов по Интернету;

О роли стандартизации в Интернет

Как следует из всего вышеизложенного, Интернет является очень сложной сетью, и


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

Специфика многоуровневого представления сетевого взаимодействия состоит в том, что в


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

В начале 80-х годов международные организации по стандартизации ISO (International


Organization for Standardization), ITU (International Telecommunications Union) и другие
разработали стандартную модель взаимодействия открытых систем OSI (Open System
Interconnection). Назначение данной модели состоит в обобщенном представлении средств
сетевого взаимодействия. Ее также можно рассматривать в качестве универсального языка
сетевых специалистов (справочной модели).

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


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

Спецификация представляет собой формализованное описание аппаратных (программных)


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

Если две сети построены с соблюдением принципов открытости, это дает следующие
преимущества:

 Возможность построения сети из аппаратных и программных средств различных


производителей, придерживающихся стандарта;
 Безболезненная замена отдельных компонентов сети другими, более совершенными;
 Легкость сопряжения одной сети с другой.

В рамках модели OSI средства взаимодействия делятся на семь уровней: прикладной,


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

Сеть Интернет строилась в полном соответствии с принципами открытых систем. В


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

RFC (англ. Request for Comments) — документ из серии пронумерованных информационных


документов Интернета, содержащих технические спецификации и Стандарты, широко
применяемые во Всемирной сети. В настоящее время первичной публикацией документов
RFC занимается IETF под эгидой открытой организации Общество Интернета (ISOC).
Правами на RFC обладает именно Общество Интернет. Формат RFC появился в 1969 г. при
обсуждении проекта ARPANET. Первые RFC распространялись в печатном виде на бумаге в
виде обычных писем, но уже с декабря 1969 г., когда заработали первые сегменты
ARPANET, документы начали распространяться в электронном виде.
Основным организационным подразделением, координирующим работу по стандартизации
Интернет, является ISOC (Internet Society), объединяющее порядка 100 тысяч участников,
которые занимаются различными аспектами развития данной сети. ISOC курирует работу
IAB (Internet Architecture Board), включающую две группы:

 IRTF (Internet Research Task Force). Координирует долгосрочные исследовательские


проекты, относящиеся к TCP/IP;
 IETF (Internet Engineering Task Force). Инженерная группа, определяющая
спецификации для последующих стандартов Интернет.

Разработкой стандартов для сети Веб, начиная с 1994 года, занимается Консорциум W3C
(World Wide Web Consortium), основанный и до сих пор возглавляемый Тимом Бернерсом-
Ли.

Консорциум W3C — организация, разрабатывающая и внедряющая технологические


стандарты для Интернета и WWW. Миссия W3C формулируется следующим образом:
"Полностью раскрыть потенциал Всемирной паутины путем создания протоколов и
принципов, гарантирующих долгосрочное развитие Сети". Две другие важнейшие задачи
Консорциума — обеспечить полную "интернационализацию Сети" и сделать ее доступной
для людей с ограниченными возможностями.

W3C разрабатывает для WWW единые принципы и стандарты, называемые


"Рекомендациями", которые затем внедряются разработчиками программ и оборудования.
Благодаря Рекомендациям достигается совместимость между программными продуктами и
оборудованием различных компаний, что делает сеть WWW более совершенной,
универсальной и удобной в использовании.

Все Рекомендации W3C открыты, то есть, не защищены патентами и могут внедряться


любым человеком без каких-либо финансовых отчислений Консорциуму.

Для удобства пользователей Консорциумом созданы специальные программы-валидаторы


(англ. Online Validation Service), которые доступны по сети и могут за несколько секунд
проверить документы на соответствие популярным Рекомендациям W3C. Консорциумом
также созданы многие другие утилиты для облегчения работы веб-мастеров и
программистов. Большинство утилит — это программы с открытым исходным кодом, все
они бесплатные. В последнее время, повинуясь мировым тенденциям, Консорциум, в целом,
гораздо больше внимания уделяет проектам с открытым исходным кодом.

Прежде чем перейти к описанию структуры, принципов работы и основных протоколов сети
Веб, рассмотрим основной стек протоколов сети Интернет - стек TCP/IP.

Стек протоколов TCP/IP

Эти протоколы изначально ориентированы на глобальные сети, в которых качество


соединительных каналов не идеально. Он позволяет создавать глобальные сети, компьютеры
в которых соединены друг с другом самыми разными способами от высокоскоростных
оптоволоконных кабелей и спутниковых каналов до коммутируемых телефонных линий.
TCP/IP соответствует модели OSI достаточно условно и содержит 4 уровня. Прикладной
уровень стека соответствует трем верхним уровням модели OSI: прикладному,
представления и сеансовому.
В сети данные всегда передаются блоками относительно небольшого размера. Каждый блок
имеет префиксную часть (заголовок), описывающую содержимое блока, и суффиксную,
содержащую, например, информацию для контроля целостности передаваемого блока
данных.

Название стека протоколов TCP/IP состоит из названий двух разных протоколов. Протокол
IP (Internet Protocol) представляет собой протокол нижнего (сетевого) уровня и отвечает за
передачу пакетов данных в сети. Он относится к так называемым протоколам датаграмм и
работает без подтверждений. Последнее означает, что при его использовании доставка
пакетов данных не гарантируется и не подтверждается. Не гарантируется также и то, что
пакеты достигнут пункта назначения в той последовательности, в которой они были
отправлены.

К протоколам сетевого уровня относится также протокол межсетевых управляющих


сообщений ICMP (Internet Control Message Protocol), предназначенный для передачи
маршрутизатором источнику информации об ошибках при передаче пакета.

Очевидно, что намного удобнее передавать данные по каналу, который работает корректно,
доставляя все пакеты по порядку. Поэтому над протоколом IP работает протокол передачи
данных более высокого (транспортного) уровня — TCP (Transmission Control Protocol).
Посылая и принимая пакеты через протокол IP, протокол TCP гарантирует доставку всех
переданных пакетов данных в правильной последовательности.

Следует отметить, что при использовании протокола IP обеспечивается более быстрая


передача данных, так как не тратится время на подтверждение приема каждого пакета. Есть
и другие преимущества. Одно из них заключается в том, что он позволяет рассылать пакеты
данных в широковещательном режиме, при котором они достигают всех компьютеров
физической сети. Что же касается протокола TCP, то для передачи данных с его помощью
необходимо создать канал связи между компьютерами. Он и создается с использованием
протокола IP.

Для идентификации сетевых интерфейсов используются 3 типа адресов:

 аппаратные адреса (или MAC-адреса);


 сетевые адреса (IP-адреса);
 символьные (доменные) имена.

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


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

Система доменных имен DNS

Несмотря на то, что аппаратное и программное обеспечение в рамках TCP/IP сетей для
идентификации узлов использует IP-адреса, пользователи предпочитают символьные имена
(доменные имена).

Первоначально в локальных сетях из небольшого числа компьютеров применялись плоские


имена, состоящие из последовательности символов без разделения их на отдельные части,
например MYCOMP. Для установления соответствия между символьными именами и
числовыми адресами использовались широковещательные запросы. Однако для больших
территориально распределенных сетей, работающих на основе протокола TCP/IP, такой
способ оказался неэффективным. Поэтому для установления соответствия между доменным
именем и IP-адресом используется специальная система доменных имен (DNS, Domain Name
System), которая основана на создаваемых администраторами сети таблиц соответствия.

В сетях TCP/IP используется доменная система имен, имеющая иерархическую (в виде


дерева) структуру. Данная структура имен напоминает иерархию имен, используемую во
многих файловых системах. Запись доменного имени начинается с самой младшей
составляющей, затем после точки следует следующая по старшинству символьная часть
имени и так далее. Последовательность заканчивается корневым именем, например:
company.yandex.ru.

Построенная таким образом система имен позволяет разделять административную


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

Совокупность имен, у которых несколько старших составных частей совпадают, образуют


домен имен.

Корневой домен управляется центральными органами Интернета: IANA и Internic.

Домены верхнего уровня назначаются для каждой страны, а также для различных типов
организаций. Имена этих доменов должны следовать международному стандарту ISO 3166.
Для обозначения стран используются двухбуквенные аббревиатуры, например ru
(Российская Федерация), us (США), it (Италия), fr (Франция).

Для различных типов организаций используются трехбуквенные аббревиатуры:

 net – сетевые организации;


 org – некоммерческие организации;
 com - коммерческие организации;
 edu – образовательные организации;
 gov – правительственные организации.

Администрирование каждого домена возлагается на отдельную организацию, которая


делегирует администрирование поддоменов другим организациям.

Для получения доменного имени необходимо зарегистрироваться в соответствующей


организации, которой организция InterNIC делегировала свои полномочия по распределению
доменных имен.

В TCP/IP сетях соответствие между доменными именами и IP-адресами может


устанавливаться как локальными средствами, так и централизованными службами.
Первоначально соответствие задавалось с помощью создаваемого вручную на хосте файла
hosts.txt, состоящего из строк, содержащих пару вида "доменное имя – IP-адрес". Однако с
активным ростом Интернета такое решение оказалось немасштабируемым.

Альтернативное решение – централизованная служба DNS, использующая распределенную


базу отображений "доменное имя – IP-адрес". Сервер домена хранит только имена, которые
заканчиваются на следующем ниже по дереву уровне. Это позволяет распределять более
равномерно нагрузку по разрешению имен между всеми DNS-серверами. Каждый DNS-
сервер помимо таблицы отображения имен содержит ссылки на DNS-серверы своих
поддоменов.

Структура и принципы WWW

Сеть WWW образуют миллионы веб-серверов, расположенных по всему миру. Веб-сервер


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

Для идентификации ресурсов (зачастую файлов или их частей) в WWW используются


идентификаторы ресурсов URI (Uniform Resource Identifier). Для определения
местонахождения ресурсов в этой сети используются локаторы ресурсов URL (Uniform
Resource Locator). Такие URL-локаторы представляют собой комбинацию URI и системы
DNS.

Доменное имя (или IP-адрес) входит в состав URL для обозначения компьютера (его
сетевого интерфейса), на котором работает программа веб-сервер.

На клиентском компьютере для просмотра информации, полученной от веб-сервера,


применяется специальная программа — веб-браузер. Основная функция веб-браузера -
отображение гипертекстовых страниц (веб-страниц). Для создания гипертекстовых страниц в
WWW изначально использовался язык HTML. Множество веб-страниц образуют веб-сайт.

Прокси-серверы

Прокси-сервер (proxy-server) — служба в компьютерных сетях, позволяющая клиентам


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

Сначала клиент подключается к прокси-серверу и запрашивает какой-либо ресурс,


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

Чаще всего прокси-серверы применяются для следующих целей:

 обеспечение доступа с компьютеров локальной сети в Интернет;


 кеширование данных: если часто происходят обращения к одним и тем же внешним
ресурсам, то можно держать их копию на прокси-сервере и выдавать по запросу,
снижая тем самым нагрузку на канал во внешнюю сеть и ускоряя получение клиентом
запрошенной информации.
 сжатие данных: прокси-сервер загружает информацию из Интернета и передает
информацию конечному пользователю в сжатом виде.
 защита локальной сети от внешнего доступа: например, можно настроить прокси-
сервер так, что локальные компьютеры будут обращаться к внешним ресурсам только
через него, а внешние компьютеры не смогут обращаться к локальным вообще (они
"видят" только прокси-сервер).
 ограничение доступа из локальной сети к внешней: например, можно запретить
доступ к определенным веб-сайтам, ограничить использование интернета каким-то
локальным пользователям, устанавливать квоты на трафик или полосу пропускания,
фильтровать рекламу и вирусы.
 анонимизация доступа к различным ресурсам. Прокси-сервер может скрывать
сведения об источнике запроса или пользователе. В таком случае целевой сервер
видит лишь информацию о прокси-сервере, например, IP-адрес, но не имеет
возможности определить истинный источник запроса. Существуют также
искажающие прокси-серверы, которые передают целевому серверу ложную
информацию об истинном пользователе.

Протоколы Интернет прикладного уровня

Самый верхний уровень в иерархии протоколов Интернет занимают следующие протоколы


прикладного уровня:

 DNS - распределенная система доменных имен, которая по запросу, содержащему


доменное имя хоста сообщает IP адрес;
 HTTP - протокол передачи гипертекста в Интернет;
 HTTPS - расширение протокола HTTP, поддерживающее шифрование;
 FTP (File Transfer Protocol - RFC 959) - протокол, предназначенный для передачи
файлов в компьютерных сетях;
 Telnet (TELecommunication NETwork - RFC 854) - сетевой протокол для реализации
текстового интерфейса по сети;
 SSH (Secure Shell - RFC 4251) - протокол прикладного, позволяющий производить
удаленное управление операционной системой и передачу файлов. В отличие от
Telnet шифрует весь трафик;
 POP3 – протокол почтового клиента, который используется почтовым клиентом для
получения сообщений электронной почты с сервера;
 IMAP - протокол доступа к электронной почте в Интернет;
 SMTP – протокол, который используется для отправки почты от пользователей к
серверам и между серверами для дальнейшей пересылки к получателю;
 LDAP - протокол для доступа к службе каталогов X.500, является широко
используемым стандартом доступа к службам каталогов;
 XMPP (Jabber) - основанный на XML расширяемый протокол для мгновенного обмена
сообщениями в почти реальном времени;
 SNMP - базовый протокол управления сети Internet.

Рассмотрим более подробно некоторые из этих протоколов.

1. FTP

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


загружать файлы с сервера или на сервер; кроме того, возможен режим передачи
файлов между серверам; FTP позволяет обмениваться файлами и выполнять операции
над ними через TCP-сети. Данный протокол работает независимо от операционных
систем. Исторически протокол FTP предложил открытую функциональность,
обеспечивая прозрачный перенос файлов с одного компьютера на другой по сети. Это
не так тривиально, как может показаться, так как у разнотипных компьютеров могут
различаться размеры слов, биты в словах могут храниться в неодинаковом порядке
или использоваться разные форматы слов.

2. Telnet

Название "telnet" имеют также некоторые утилиты, реализующие клиентскую часть


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

3. SSH

Сходен по функциональности с протоколами telnet и rlogin, но, в отличие от них,


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

4. Почтовые протоколы.

Хотя telnet и FTP были (и остаются) полезными, первым приложением, совершившим


переворот в сознании пользователей компьютеров сети ARPANET, стала электронная
почта. До сети ARPANET существовали системы электронной почты, но все они были
однокомпьютерными системами. В 1972 г. Рэй Томлинсон (Ray Tomlinson) из
компании BBN написал первый пакет, предоставляющий распределенные почтовые
услуги в компьютерной сети из нескольких компьютеров. Уже к 1973 г. исследования
управления ARPA показали, что три четверти всего трафика сети ARPANET
составляла электронная почта. Польза электронной почты оказалась столь велика, что
все больше пользователей стремилось подключиться к сети ARPANET, в результате
чего возрастала потребность в добавлении новых узлов и использовании
высокоскоростных линий. Таким образом, появилась тенденция, сохраняющаяся и по
сей день.

o POP3 (Post Office Protocol Version 3 - RFC 1939) — протокол, который


используется почтовым клиентом для получения сообщений электронной
почты с почтового сервера;
o IMAP (Internet Message Access Protocol - RFC 3501) — протокол доступа к
электронной почте. Аналогичен POP3, однако предоставляет пользователю
богатые возможности для работы с почтовыми ящиками, находящимися на
центральном сервере. Электронными письмами можно манипулировать с
компьютера пользователя (клиента) без необходимости постоянной пересылки
с сервера и обратно файлов с полным содержанием писем.
o SMTP (Simple Mail Transfer Protocol — RFC 2821) — протокол,
предназначенный для передачи электронной почты. Используется для
отправки почты от пользователей к серверам и между серверами для
дальнейшей пересылки к получателю. Для приема почты почтовый клиент
должен использовать протоколы POP3 или IMAP.

Тема 2. Введение в клиент-серверные технологии Веб.

Как правило, компьютеры и программы, входящие в состав информационной системы, не


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

В рамках многоуровневого представления вычислительных систем можно выделить три


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

Рис.1. Компоненты сетевого приложения

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


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

Автономная система (компьютер, не подключенный к сети) представляет все эти


компоненты как на различных уровнях (ОС, служебное ПО и утилиты, прикладное ПО), так
и на уровне приложений (не характерно для современных программ). Так же и сеть — она
представляет все эти компоненты, но, в общем случае, распределенные между узлами.
Задача сводится к обеспечению сетевого взаимодействия между этими компонентами.

Архитектура «клиент-сервер» определяет общие принципы организации взаимодействия в


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

Практические реализации такой архитектуры называются клиент-серверными технологиями.


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

Двухзвенная архитектура

В любой сети (даже одноранговой), построенной на современных сетевых технологиях,


присутствуют элементы клиент-серверного взаимодействия, чаще всего на основе
двухзвенной архитектуры. Двухзвенной (two-tier, 2-tier) она называется из-за необходимости
распределения трех базовых компонентов между двумя узлами (клиентом и сервером).
Рис.2. Двухзвенная клиент-серверная архитектура

Двухзвенная архитектура используется в клиент-серверных системах, где сервер отвечает на


клиентские запросы напрямую и в полном объеме, при этом используя только собственные
ресурсы. Т.е. сервер не вызывает сторонние сетевые приложения и не обращается к
сторонним ресурсам для выполнения какой-либо части запроса (рис. 2)

Расположение компонентов на стороне клиента или сервера определяет следующие


основные модели их взаимодействия в рамках двухзвенной архитектуры:
сервер терминалов — распределенное представление данных;
файл-сервер — доступ к удаленной базе данных и файловым ресурсам;
сервер БД — удаленное представление данных;
сервер приложений — удаленное приложение.

Перечисленные модели с вариациями представлены на рис. 3.

Рис.3. Модели клиент-серверного взаимодействия

Исторически первой появилась модель распределенного представления данных (модель


сервер терминалов). Она реализовывалась на универсальной ЭВМ (мэйнфрейме),
выступавшей в роли сервера, с подключенными к ней алфавитно-цифровыми терминалами.
Пользователи выполняли ввод данных с клавиатуры терминала, которые затем передавались
на мэйнфрейм и там выполнялась их обработка, включая формирование «картинки» с
результатами. Эта «картинка» и возвращалась пользователю на экран терминала.

С появлением персональных компьютеров и локальных сетей, была реализована модель


файлового сервера, представлявшего доступ файловым ресурсам, в т.ч и к удаленной базе
данных. В этом случае выделенный узел сети является файловым сервером, на котором
размещены файлы базы данных. На клиентах выполняются приложения, в которых
совмещены компонент представления и прикладной компонент (СУБД и прикладная
программма), использующие подключенную удаленную базу как локальный файл.
Протоколы обмена при этом представляют набор низкоуровневых вызовов операций
файловой системы.
Такая модель показала свою неэффективность ввиду того, что при активной работе с
таблицами БД возникает большая нагрузка на сеть. Частичным решением является
поддержка тиражирования (репликации) таблиц и запросов. В этом случае, например при
изменении данных, обновляется не вся таблица, а только модифицированная ее часть.

С появлением специализированных СУБД появилась возможность реализации другой


модели доступа к удаленной базе данных — модели сервера баз данных. В этом случае ядро
СУБД функционирует на сервере, прикладная программа на клиенте, а протокол обмена
обеспечивается с помощью языка SQL. Такой подход по сравнению с файловым сервером
ведет к уменьшению загрузки сети и унификации интерфейса «клиент-сервер». Однако,
сетевой трафик остается достаточно высоким, кроме того, по прежнему невозможно
удовлетворительное администрирование приложений, поскольку в одной программе
совмещаются различные функции.

С разработкой и внедрением на уровне серверов баз данных механизма хранимых процедур


появилась концепция активного сервера БД. В этом случае часть функций прикладного
компонента реализованы в виде хранимых процедур, выполняемых на стороне сервера.
Остальная прикладная логика выполняется на клиентской стороне. Протокол
взаимодействия — соответствующий диалект языка SQL.

Преимущества такого подхода очевидны:


возможно централизованное администрирование прикладных функций;
снижение стоимости владения системой (TOC, total cost of ownership) за счет аренды сервера,
а не его покупки;
значительное снижение сетевого трафика (т.к. передаются не SQL-запросы, а вызовы
хранимых процедур).

Основной недостаток — ограниченность средств разработки хранимых процедур по


сравнению с языками высокого уровня.

Реализация прикладного компонента на стороне сервера представляет следующую модель —


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

В настоящее время намечается тенденция возврата к тому, с чего начиналась клиент-


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

Трехзвенная архитектура
Рис.4. Трехзвенная клиент-серверная архитектура

Еще одна тенденция в клиент-серверных технологиях связана со все большим


использованием распределенных вычислений. Они реализуются на основе модели сервера
приложений, где сетевое приложение разделено на две и более частей, каждая из которых
может выполняться на отдельном компьютере. Выделенные части приложения
взаимодействуют друг с другом, обмениваясь сообщениями в заранее согласованном
формате. В этом случае двухзвенная клиент-серверная архитектура становится трехзвенной
(three-tier, 3-tier).

Как правило, третьим звеном в трехзвенной архитектуре становится сервер приложений, т.е.
компоненты распределяются следующим образом (рис. 4):
Представление данных — на стороне клиента.
Прикладной компонент — на выделенном сервере приложений (как вариант, выполняющем
функции промежуточного ПО).
Управление ресурсами — на сервере БД, который и представляет запрашиваемые данные.

Рис.5. Многозвенная (N-tier) клиент-серверная архитектура

Трехзвенная архитектура может быть расширена до многозвенной (N-tier, Multi-tier) путем


выделения дополнительных серверов, каждый из которых будет представлять собственные
сервисы и пользоваться услугами прочих серверов разного уровня. Абстрактный пример
многозвенной модели приведен на рис. 5.
Сравнение архитектур

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

Клиент-серверные технологии
Архитектура клиент-сервер применяется в большом числе сетевых технологий,
используемых для доступа к различным сетевым сервисам. Кратко рассмотрим некоторые
типы таких сервисов (и серверов).
Web-серверы
Изначально представляли доступ к гипертекстовым документам по протоколу HTTP (Huper
Text Transfer Protocol). Сейчас поддерживают расширенные возможности, в частности
работу с бинарными файлами (изображения, мультимедиа и т.п.).
Серверы приложений
Предназначены для централизованного решения прикладных задач в некоторой предметной
области. Для этого пользователи имеют право запускать серверные программы на
исполнение. Использование серверов приложений позволяет снизить требования к
конфигурации клиентов и упрощает общее управление сетью.
Серверы баз данных
Серверы баз данных используются для обработки пользовательских запросов на языке SQL.
При этом СУБД находится на сервере, к которому и подключаются клиентские приложения.
Файл-серверы
Файл-сервер хранит информацию в виде файлов и представляет пользователям доступ к ней.
Как правило файл-сервер обеспечивает и определенный уровень защиты от
несакционированного доступа.
Прокси-сервер
Во-первых, действует как посредник, помогая пользователям получить информацию из
Интернета и при этом обеспечивая защиту сети.
Во-вторых, сохраняет часто запрашиваемую информацию в кэш-памяти на локальном диске,
быстро доставляя ее пользователям без повторного обращения к Интернету.
Файрволы (брандмауэры)
Межсетевые экраны, анализирующие и фильтрующие проходящий сетевой трафик, с целью
обеспечения безопасности сети.
Почтовые серверы
Представляют услуги по отправке и получению электронных почтовых сообщений.
Серверы удаленного доступа (RAS)
Эти системы обеспечивают связь с сетью по коммутируемым линиям. Удаленный сотрудник
может использовать ресурсы корпоративной ЛВС, подключившись к ней с помощью
обычного модема.

Это лишь несколько типов из всего многообразия клиент-серверных технологий,


используемых как в локальных, так и в глобальных сетях.

Для доступа к тем или иным сетевам сервисам используются клиенты, возможности которых
характеризуются понятием «толщины». Оно определяет конфигурацию оборудования и
программное обеспечение, имеющиеся у клиента. Рассмотрим возможные граничные
значения:
«Тонкий» клиент
Этот термин определяет клиента, вычислительных ресурсов которого достаточно лишь для
запуска необходимого сетевого приложения через web-интерфейс. Пользовательский
интерфейс такого приложения формируется средствами статического HTML (выполнение
JavaScript не предусматривается), вся прикладная логика выполняется на сервере.
Для работы тонкого клиента достаточно лишь обеспечить возможность запуска web-
браузера, в окне которого и осуществляются все действия. По этой причине web-браузер
часто называют "универсальным клиентом".
«Толстый» клиент
Таковым является рабочая станция или персональный компьютер, работающие под
управлением собственной дисковой операционной системы и имеющие необходимый набор
программного обеспечения. К сетевым серверам «толстые» клиенты обращаются в основном
за дополнительными услугами (например, доступ к web-серверу или корпоративной базе
данных).
Так же под «толстым» клиентом подразумевается и клиентское сетевое приложение,
запущенное под управлением локальной ОС. Такое приложение совмещает компонент
представления данных (графический пользовательский интерфейс ОС) и прикладной
компонент (вычислительные мощности клиентского компьютера).

В последнее время все чаще используется еще один термин: «rich»-client. «Rich«-клиент
своего рода компромисс между «толстым» и «тонким» клиентом. Как и «тонкий» клиент,
«rich»-клиент также представляет графический интерфейс, описываемый уже средствами
XML и включающий некоторую функциональность толстых клиентов (например интерфейс
drag-and-drop, вкладки, множественные окна, выпадающие меню и т.п.)

Прикладная логика «rich»-клиента также реализована на сервере. Данные отправляются в


стандартном формате обмена, на основе того же XML (протоколы SOAP, XML-RPC) и
интерпретируются клиентом.

Некоторые основные протоколы «rich»-клиентов на базе XML приведены ниже:


XAML (eXtensible Application Markup Language) — разработан Microsoft, используется в
приложениях на платформе .NET;
XUL (XML User Interface Language) — стандарт, разработанный в рамках проекта Mozilla,
используется, например, в почтовом клиенте Mozilla Thunderbird или браузере Mozilla
Firefox;
Flex — мультимедийная технология на основе XML, разработанная Macromedia/Adobe.
Заключение

Итак, основная идея архитектуры «клиент-сервер» состоит в разделении сетевого


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

Тема 3. Протокол HTTP.

Базовым протоколом сети гипертекстовых ресурсов Веб является протокол HTTP. В его
основу положено взаимодействие "клиент-сервер", то есть предполагается, что:

1. Потребитель-клиент инициировав соединение с поставщиком-сервером посылает ему


запрос;
2. Поставщик-сервер, получив запрос, производит необходимые действия и возвращает
обратно клиенту ответ с результатом.

При этом возможны два способа организации работы компьютера-клиента:


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

Прежде чем перейти к конкретным клиент-серверным веб-технологиям, рассмотрим


основные принципы и структуру базового протокола HTTP.

HTTP (HyperText Transfer Protocol - RFC 1945, RFC 2616) - протокол прикладного уровня для
передачи гипертекста.

Центральным объектом в HTTP является ресурс, на который указывает URI в запросе


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

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

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

 Серверы - поставщики услуг хранения и обработки информации (обработка запросов).


 Клиенты - конечные потребители услуг сервера (отправка запросов).
 Прокси-серверы для поддержки работы транспортных служб.

Основными клиентами являются браузеры например: Internet Explorer, Opera, Mozilla Firefox,
Netscape Navigator и другие. Наиболее популярными реализациями веб-серверов являются:
Internet Information Services (IIS), Apache, lighttpd, nginx. Наиболее известные реализации
прокси-серверов: Squid, UserGate, Multiproxy, Naviscope.

"Классическая" схема HTTP-сеанса выглядит так.

1. Установление TCP-соединения.
2. Запрос клиента.
3. Ответ сервера.
4. Разрыв TCP-соединения.
Таким образом, клиент посылает серверу запрос, получает от него ответ, после чего
взаимодействие прекращается. Обычно запрос клиента представляет собой требование
передать HTML-документ или какой-нибудь другой ресурс, а ответ сервера содержит код
этого ресурса.

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

 Строка состояния (иногда для ее обозначения используют также термины строка-


статус, или строка запроса).
 Поля заголовка.
 Пустая строка.
 Тело запроса.

Строку состояния вместе с полями заголовка иногда называют также заголовком запроса.

Рис. 2.1.  Структура запроса клиента.

Строка состояния имеет следующий формат:

метод_запроса URL_pecypca версия_протокола_НТТР

Рассмотрим компоненты строки состояния, при этом особое внимание уделим методам
запроса.

Метод, указанный в строке состояния, определяет способ воздействия на ресурс, URL


которого задан в той же строке. Метод может принимать значения GET, POST, HEAD, PUT,
DELETE и т.д. Несмотря на обилие методов, для веб-программиста по-настоящему важны
лишь два из них: GET и POST.

 GET. Согласно формальному определению, метод GET предназначается для


получения ресурса с указанным URL. Получив запрос GET, сервер должен прочитать
указанный ресурс и включить код ресурса в состав ответа клиенту. Ресурс, URL
которого передается в составе запроса, не обязательно должен представлять собой
HTML-страницу, файл с изображением или другие данные. URL ресурса может
указывать на исполняемый код программы, который, при соблюдении определенных
условий, должен быть запущен на сервере. В этом случае клиенту возвращается не
код программы, а данные, сгенерированные в процессе ее выполнения. Несмотря на
то что, по определению, метод GET предназначен для получения информации, он
может применяться и в других целях. Метод GET вполне подходит для передачи
небольших фрагментов данных на сервер.
 POST. Согласно тому же формальному определению, основное назначение метода
POST - передача данных на сервер. Однако, подобно методу GET, метод POST может
применяться по-разному и нередко используется для получения информации с
сервера. Как и в случае с методом GET, URL, заданный в строке состояния, указывает
на конкретный ресурс. Метод POST также может использоваться для запуска
процесса.
 Методы HEAD и PUT являются модификациями методов GET и POST.

Версия протокола HTTP, как правило, задается в следующем формате:

HTTP/версия.модификация

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


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

Имя_поля: Значение

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

Имена некоторых наиболее часто встречающихся в запросе клиента полей заголовка и их


назначение приведены в таблице 2.1.

Таблица 2.1. Поля заголовка запроса HTTP.


Поля
заголовка Значение
HTTP-запроса
Host Доменное имя или IP-адрес узла, к которому обращается клиент
Referer URL документа, который ссылается на ресурс, указанный в строке состояния
From Адрес электронной почты пользователя, работающего с клиентом
Accept MIME-типы данных, обрабатываемых клиентом. Это поле может иметь
несколько значений, отделяемых одно от другого запятыми. Часто поле
заголовка Accept используется для того, чтобы сообщить серверу о том,
какие типы графических файлов поддерживает клиент
Accept- Набор двухсимвольных идентификаторов, разделенных запятыми, которые
Language обозначают языки, поддерживаемые клиентом
Accept-Charset Перечень поддерживаемых наборов символов
Content-Type MIME-тип данных, содержащихся в теле запроса (если запрос не состоит из
одного заголовка)
Content-Length Число символов, содержащихся в теле запроса (если запрос не состоит из
одного заголовка)
Range Присутствует в том случае, если клиент запрашивает не весь документ, а
лишь его часть
Connection Используется для управления TCP-соединением. Если в поле содержится
Close, это означает, что после обработки запроса сервер должен закрыть
соединение. Значение Keep-Alive предлагает не закрывать TCP-соединение,
чтобы оно могло быть использовано для последующих запросов
User-Agent Информация о клиенте

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

Ниже представлен пример HTML-запроса, сгенерированного браузером

GET http://oak.oakland.edu/ HTTP/1.0


Connection: Keep-Alive
User-Agent: Mozilla/4.04 [en] (Win95; I)
Host: oak.oakland.edu
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*
Accept-Language: en
Accept-Charset: iso-8859-l,*,utf-8

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

Подобно запросу клиента, ответ сервера также состоит из четырех перечисленных ниже
компонентов.
 Строка состояния.
 Поля заголовка.
 Пустая строка.
 Тело ответа.

Ответ сервера клиенту начинается со строки состояния, которая имеет следующий формат:

Версия_протокола Код_ответа Пояснительное_сообщение


 Версия_протокола задается в том же формате, что и в запросе клиента, и имеет тот
же смысл.
 Код_ответа - это трехзначное десятичное число, представляющее в закодированном
виде результат обслуживания запроса сервером.
 Пояснительное_сообщение дублирует код ответа в символьном виде. Это строка
символов, которая не обрабатывается клиентом. Она предназначена для системного
администратора или оператора, занимающегося обслуживанием системы, и является
расшифровкой кода ответа.

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

HТТР/1.0 200 ОК

Как видно, за версией протокола HTTP 1.0 следует код 200. В этом коде символ 2 означает
успешную обработку запроса клиента, а остальные две цифры (00) — номер данного
сообщения.

В используемых в настоящее время реализациях протокола HTTP первая цифра не может


быть больше 5 и определяет следующие классы ответов.

 1 - специальный класс сообщений, называемых информационными. Код ответа,


начинающийся с 1, означает, что сервер продолжает обработку запроса. При обмене
данными между HTTP-клиентом и HTTP-сервером сообщения этого класса
используются достаточно редко.
 2 - успешная обработка запроса клиента.
 3 - перенаправление запроса. Чтобы запрос был обслужен, необходимо предпринять
дополнительные действия.
 4 - ошибка клиента. Как правило, код ответа, начинающийся с цифры 4, возвращается
в том случае, если в запросе клиента встретилась синтаксическая ошибка.
 5 - ошибка сервера. По тем или иным причинам сервер не в состоянии выполнить
запрос.

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

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

Ниже представлен пример ответа сервера на запрос, приведенный в предыдущем разделе. В


теле ответа содержится исходный текст HTML-документа.

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
X-Powered-By: ASP.NET
Date: Mon, 20 OCT 2008 11:25:56 GMT
Content-Type: text/html
Accept-Ranges: bytes
Last-Modified: Sat, 18 Oct 2008 15:05:44 GMT
ETag: "b66a667f948c92:8a5"
Content-Length: 426

<html>
<body>
<form action='http://localhost/Scripts/test.pl'>
<p>Operand1: <input type='text' name='A'></p>
<p>Operand2: <input type='text' name='B'></p>
<p>Operation:<br>
<select name='op'>
<option value='+'>+</option>
<option value='-'>-</option>
<option value='*'>*</option>
<option value='/'>/</option>
<select></p>
<input type='submit' value='Calculate!'>
</from>
</body>
</html>

Поля заголовка и тело сообщения могут отсутствовать, но строка состояния является


обязательным элементом, так как указывает на тип запроса/ответа.

Поле с именем Content-type может встречаться как в запросе клиента, так и в ответе сервера.
В качестве значения этого поля указывается MIME-тип содержимого запроса или ответа.
MIME-тип также передается в поле заголовка Accept, присутствующего в запросе.
Спецификация MIME (Multipurpose Internet Mail Extension — многоцелевое почтовое
расширение Internet) первоначально была разработана для того, чтобы обеспечить передачу
различных форматов данных в составе электронных писем. Однако применение MIME не
исчерпывается электронной почтой. Средства MIME успешно используются в WWW и, по
сути, стали неотъемлемой частью этой системы.

Стандарт MIME разработан как расширяемая спецификация, в которой подразумевается, что


число типов данных будет расти по мере развития форм представления данных. Каждый
новый тип в обязательном порядке должен быть зарегистрирован в IANA (Internet Assigned
Numbers Authority).

До появления MIME компьютеры, взаимодействующие по протоколу HTTP, обменивались


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

В соответствии со спецификацией MIME, для описания формата данных используются тип и


подтип. Тип определяет, к какому классу относится формат содержимого HTTP-запроса или
HTTP-ответа. Подтип уточняет формат. Тип и подтип отделяются друг от друга косой
чертой:

тип/подтип

Поскольку в подавляющем большинстве случаев в ответ на запрос клиента сервер


возвращает исходный текст HTML-документа, то в поле Content-type ответа обычно
содержится значение text/html. Здесь идентификатор text описывает тип, сообщая, что
клиенту передается символьная информация, а идентификатор html описывает подтип, т.е.
указывает на то, что последовательность символов, содержащаяся в теле ответа,
представляет собой описание документа на языке HTML.

Для однозначной идентификации ресурсов в сети Веб используются уникальные


идентификаторы URL.

Единообразный идентификатор ресурса URI (Uniform Resource Identifier) представляет собой


короткую последовательность символов, идентифицирующую абстрактный или физический
ресурс. URI не указывает на то, как получить ресурс, а только идентифицирует его. Это дает
возможность описывать с помощью RDF (Resource Description Framework) ресурсы, которые
не могут быть получены через Интернет (имена, названия и т.п.). Самые известные примеры
URI - это URL и URN.

 URL (Uniform Resource Locator) - это URI, который, помимо идентификации ресурса,
предоставляет еще и информацию о местонахождении этого ресурса.
 URN (Uniform Resource Name) - это URI, который идентифицирует ресурс в
определенном пространстве имен, но, в отличие от URL, URN не указывает на
местонахождение этого ресурса.

URL имеет следующую структуру:

<схема>://<логин>:<пароль>@<хост>:<порт>/<URL-путь>

где:

 схема - схема обращения к ресурсу (обычно сетевой протокол);


 логин - имя пользователя, используемое для доступа к ресурсу;
 пароль - пароль, ассоциированный с указанным именем пользователя;
 хост - полностью прописанное доменное имя хоста в системе DNS или IP-адрес хоста;
 порт - порт хоста для подключения;
 URL-путь - уточняющая информация о месте нахождения ресурса.

Общепринятые схемы (протоколы) URL включают протоколы: ftp, http, https, telnet, а также:

 gopher — протокол Gopher;


 mailto — адрес электронной почты;
 news — новости Usenet;
 nntp — новости Usenet через протокол NNTP;
 irc — протокол IRC;
 prospero — служба каталогов Prospero Directory Service;
 wais — база данных системы WAIS;
 xmpp — протокол XMPP (часть Jabber);
 file — имя локального файла;
 data — непосредственные данные (Data: URL);

Обеспечение безопасности передачи данных HTTP

Поскольку протокол HTTP предназначен для передачи символьных данных в открытом


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

Самым простейшим является расширение HTTPS, при котором данные, передаваемые по


протоколу HTTP, "упаковываются" в криптографический протокол SSL или TLS, тем самым
обеспечивая защиту этих данных. В отличие от HTTP, для HTTPS по умолчанию
используется TCP-порт 443. Чтобы подготовить веб-сервер для обработки HTTPS
соединений, администратор должен получить и установить в систему сертификат для этого
веб-сервера.

SSL (Secure Sockets Layer) - криптографический протокол, обеспечивающий безопасную


передачу данных по сети Интернет. При его использовании создается защищенное
соединение между клиентом и сервером. SSL изначально разработан компанией Netscape
Communications. Впоследствии на основании протокола SSL 3.0 был разработан и принят
стандарт RFC, получивший название TLS. Этот протокол использует шифрование с
открытым ключом для подтверждения подлинности передатчика и получателя.
Поддерживает надежность передачи данных за счет использования корректирующих кодов и
безопасных хэш-функций. На нижнем уровне многоуровневого транспортного протокола
(например, TCP) он является протоколом записи и используется для инкапсуляции
различных протоколов (POP3, IMAP, SMTP или HTTP). Для каждого инкапсулированного
протокола он обеспечивает условия, при которых сервер и клиент могут подтверждать друг
другу свою подлинность, выполнять алгоритмы шифрования и производить обмен
криптографическими ключами, прежде чем протокол прикладной программы начнет
передавать и получать данные.

Для доступа к веб-страницам, защищенным протоколом SSL, в URL вместо схемы http, как
правило, подставляется схема https, указывающая на то, что будет использоваться SSL-
соединение. Стандартный TCP-порт для соединения по протоколу https — 443. Для работы
SSL требуется, чтобы на сервере имелся SSL-сертификат.

В сети Веб поддерживаются 3 типа аутентификации при клиент-серверных взаимодействиях:

 Basic - базовая аутентификация, при которой имя пользователя и пароль передаются в


заголовках http-пакетов. Пароль при этом не шифруется и присутствует в чистом виде
в кодировке base64. Для данного типа аутентификации использование SSL является
обязательным.
 Digest - дайджест-аутентификация, при которой пароль пользователя передается в
хешированном виде. По уровню конфиденциальности паролей этот тип мало чем
отличается от предыдущего, так как атакующему все равно, действительно ли это
настоящий пароль или только хеш от него: перехватив удостоверение, он все равно
получает доступ к конечной точке. Для данного типа аутентификации использование
SSL является обязательным.
 Integrated - интегрированная аутентификация, при которой клиент и сервер
обмениваются сообщениями для выяснения подлинности друг друга с помощью
протоколов NTLM или Kerberos. Этот тип аутентификации защищен от перехвата
удостоверений пользователей, поэтому для него не требуется протокол SSL. Только
при использовании данного типа аутентификации можно работать по схеме http, во
всех остальных случаях необходимо использовать схему https.

Cookie

Поскольку HTTP-сервер не помнит предыстории запросов клиентов, то каждый запрос


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

Если сервер будет проверять TCP-соединения и запоминать IP-адреса компьютеров-


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

Тем не менее, если вы когда-нибудь пользовались почтовым ящиком на mail.ru или на


другом сервере, предоставляющем почтовые услуги пользователям Веб, вспомните, как вел
себя клиент после того, как вы создали для себя почтовый ящик на сервере. Когда вы в
следующий раз обратились с того же компьютера к mail.ru, вы, вероятно, заметили, что
после загрузки веб-страницы ваше регистрационное имя уже отображалось в
соответствующем поле ввода.

Такие сведения позволяет получить дополнительное средство под названием cookie.


Механизм cookie позволяет серверу хранить информацию на компьютере клиента и
извлекать ее оттуда.

Инициатором записи cookie выступает сервер. Если в ответе сервера присутствует поле
заголовка Set-cookie, клиент воспринимает это как команду на запись cookie. В дальнейшем,
если клиент обращается к серверу, от которого он ранее принял поле заголовка Set-cookie,
помимо прочей информации он передает серверу данные cookie. Для передачи указанной
информации серверу используется поле заголовка Cookie.
Для того чтобы в общих чертах представить себе, как происходит обмен данными cookie,
рассмотрим следующий пример. Предположим, что клиент передает запросы на серверы А,
В и С. Предположим также, что сервер В, в отличие от А и С, передает клиенту команду
записать cookie. Последовательность запросов клиента серверу и ответов на них будет
выглядеть приблизительно следующим образом.

1. Передача запроса серверу А.


2. Получение ответа от сервера А.
3. Передача запроса серверу В.
4. Получение ответа от сервера В. В состав ответа входит поле заголовка SetCookie.
Получив его, клиент записывает cookie на диск.
5. Передача запроса серверу С. Несмотря на то что на диске хранится запись cookie,
клиент не предпринимает никаких специальных действий, так как значение cookie
было записано по инициативе другого сервера.
6. Получение ответа от сервера С.
7. Передача запроса серверу А. В этом случае клиент также никак не реагирует на тот
факт, что на диске хранится cookie.
8. Получение ответа от сервера А.
9. Передача запроса серверу В. Перед тем как сформировать запрос, клиент определяет,
что на диске хранится запись cookie, созданная после получения ответа от сервера В.
Клиент проверяет, удовлетворяет ли данный запрос некоторым требованиям, и, если
проверка дает положительный результат, включает в заголовок запроса поле Cookie.

Таким образом, процедуру записи и получения cookie можно представить себе как
своеобразный "запрос" сервера, инкапсулированный в его ответе клиенту. Соответственно
получение cookie также можно представить себе как ответ клиента, инкапсулированный в
составе запроса тому же серверу.

Рассмотрим подробнее, какие данные передаются в поле заголовка Set-cookie и как они
влияют на поведение клиента.

Поле Set-cookie имеет следующий формат:

Set-cookie: имя = значение; expires = дата; path = путь; domain = имя_домена,


secure

где

 Пара имя = значение – именованные данные, сохраняемые с помощью механизма


cookie. Эти данные должны храниться на клиент-машине и передаваться серверу в
составе очередного запроса клиента.
 Дата, являющаяся значением параметра expires, определяет время, по истечении
которого информация cookie теряет свою актуальность. Если ключевое слово expires
отсутствует, данные cookie удаляются по окончании текущего сеанса работы
браузера.
 Значение параметра domain определяет домен, с которым связываются данные cookie.
Чтобы узнать, следует ли передавать в составе запроса данные cookie, браузер
сравнивает доменное имя сервера, к которому он собирается обратиться, с доменами,
которые связаны с записями cookie, хранящимися на клиент-машине. Результат
проверки будет считаться положительным, если сервер, которому направляется
запрос, принадлежит домену, связанному с cookie. Если соответствие не обнаружено,
данные cookie не передаются.
 Путь, указанный в качестве значения параметра path, позволяет выполнить
дальнейшую проверку и принять окончательное решение о том, следует ли передавать
данные cookie в составе запроса. Помимо домена с записью cookie связывается путь.
Если браузер обнаружил соответствие имени домена значению параметра domain, он
проверяет, соответствует ли путь к ресурсу пути, связанному с cookie. Сравнение
считается успешным, если ресурс содержится в каталоге, указанном посредством
ключевого слова path, или в одном из его подкаталогов. Если и эта проверка дает
положительный результат, данные cookie передаются серверу. Если параметр path в
поле Set-Cookie отсутствует, то считается, что запись cookie связана с URL
конкретного ресурса, передаваемого сервером клиенту.
 Последний параметр, secure, указывает на то, что данные cookie должны передаваться
по защищенному каналу.

Для передачи данных cookie серверу используется поле заголовка Cookie. Формат этого поля
достаточно простой:

Cookie: имя=значение; имя=значение; ...

C помощью поля Cookie передается одна или несколько пар имя = значение. Каждая из этих
пар принадлежит записи cookie, для которой URL запрашиваемого ресурса соответствуют
имени домена и пути, указанным ранее в поле Set-cookie.

Тема 4. Классификация сайтов и методы их создания

В настоящее время в глобальной сети интернет существует бесчисленное множество сайтов.


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

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

Состоят из скриптов, шаблонов, информации и т.п. объектов в виде отдельных файлов.


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

Технология флэш позволяет создавать эффектные интерактивные сайты со звуком и


анимацией. Флэш сайты в общем понимании представляют собой совокупность сменяющих
друг друга кадров в определенный промежуток времени.
Основной задачей флэш-сайта является произвести сильное впечатление на пользователя,
поразить яркой «живой» анимацией, привлечь максимальной интерактивностью,
возможностью менять элементы оформления. Один из серьезных недостатков флэш-сайта –
это долгая загрузка из-за значительного «веса». Кроме того, флэш-анимация достаточно
сложная и дорогая в изготовлении, испытывает сложности взаимодействия с поисковыми
системами, практически отсутствует индексация. Хотя флэш-анимация и способна лучше
других реализовывать самые яркие и нестандартные интернет-проекты, тем не менее, в
настоящее время от нее все чаще отказываются в пользу других технологий.
Мобильные устройства, которые приобретают все большую популярность, в ближайшее
время полностью откажутся от использования флэша.
По видам доступа:
На сайтах может быть установлено разграничение по доступности сервисов.
- Открытые сайты.

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

Для доступа к сервисам необходимо пройти процедуру регистрации на сайте. Процесс


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

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

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


Огромное количество сайтов предоставляют широкий спектр разнообразных сервисов.

- Сайт-визитка.

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

Интерактивный сайт с каталогом продукции, рекламирующий товары или услуги. С его


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

Программно-аппаратный комплекс, оказывающий помощь пользователю в поиске


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

Предоставление услуг по отправке и получению электронных сообщений между


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

Также называемый интернет-журнал, онлайн-дневник. Представляет собой регулярно


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

Многопользовательский интерактивный сайт, содержимое которого в основном формируется


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

Крупный информационный ресурс, объединяющий различные сервисы. Портал


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

МЕТОДЫ СОЗДАНИЯ САЙТОВ

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

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

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


использование «связки» HTML и CSS, с возможным включением Javascript. Для создания же
динамического сайта не обойтись без серверных скриптов, таких как PHP, ASP.NET и т.д.

Создавать и редактировать вручную файлы .php можно даже в обычном «Блокноте»,


поставляемом с ОС Windows. Для работы с ASP.NET придется дополнительно установить
программный продукт Microsoft Visual Studio, который приобретается отдельно.

При использовании «ручных» методов создания сайта дизайн сайта (графическое


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

Вторая группа методов создания сайтов включает в себя методы автоматизированного


создания сайтов: при помощи специальных конструкторов сайтов или же систем управления
контентом (СМS).
Конструкторы сайтов – это, как правило, онлайн-системы, позволяющие из готового
типового набора модулей и компонентов «собрать» сайт и сразу же разместить его в web.
Одни из наиболее популярных конструкторов сайтов – это системы ucoz.ru, sites.google.com.

Популярные блог-сервисы, такие как LiveJournal или LiveInternet, также являются


своеобразными конструкторами сайтов-блогов. Однако возможности этих конструкторов
довольно ограничены.

Методы создания сайтов с использованием CMS (например, Joomla, WordPress) – одни из


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

Автоматизированные методы создания сайтов предусматривают разделение структуры сайта


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

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

Создание сайтов на основе бесплатных онлайн-конструкторов удобно для начинающих веб-


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

Широкие возможности по созданию сайтов любой сложности предоставляют CMS. Именно


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

Тема 5. Разработка структуры и этапы построения веб-сайта.

Логическая и физическая структура сайта

Каждый ресурс Интернета, от любительской домашней странички до большого


информационного портала, содержит несколько тематических рубрик, соединенных между
собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их
содержимого приводится на первой, так называемой стартовой странице, которой
присваивается имя index.htm (.html). Если тематические рубрики содержат собственные
подразделы, каждая из них также имеет свою стартовую страницу, называющуюся
index.html. Такое имя файла рекомендуется присваивать всем стартовым документам сайта,
поскольку в противном случае при обращении к какому-либо разделу посредством
сокращенного URL без указания названия стартовой страницы (например,
http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) браузер
отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов.
Подобный набор тематических рубрик с распределенными по соответствующим разделам
документами и заранее спроектированными гиперсвязями между всеми страницами ресурса
и называется логической структурой сайта. Физическая структура, напротив, подразумевает
алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован
ваш сайт. Пример сравнения логической и физической структур одного и того же ресурса
Интернета показан на рис. 6.

Рисунок 6 - Сравнение логической и физической структуры сайта

Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем


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

Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в


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

Назначайте имена директорий, имена и расширения документов HTML и графических


файлов с использованием символов только латинского алфавита и только в строчном
регистре. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по
длине восьми символов.

При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена
были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение
какой-либо web-страницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm,
3.htm и т. д.

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

Модели организации сайта

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

Строго линейная структура сайта используется достаточно редко, поскольку позволяет


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

Поэтому на практике линейная структура сайта применяется с некоторыми


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

Применяется линейная структура сайта для различных онлайн-презентаций, описания


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

Линейная структура сайта не подходит для сайтов с большим объемом информации. Для
более удобного представления больших объемов информации используются другие модели
логической структуры, например, «решетка».

Логическая структура сайта "решетка" нередко встречается при организации интернет-


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

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


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

Логическая структура сайта "дерево" - это наиболее часто встречающаяся модель


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

В то же время, слишком широкое «дерево», основываясь на очень большом количестве


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

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

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

Общая структура сайта

При планировании структуры сайта необходимо продумать несколько основных вещей:


структуру каталогов, структуру навигации.

Структура каталогов

С самого начала следует упорядочить содержимое вашего проекта. Все картинки


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

 линейная - страницы располагаются в определенном порядке. Переход с одной


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

 иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура


наиболее удобна.
 произвольная - страницы расположены в свободном порядке. Такая структура
оправдана только для небольших сайтов.

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

Структура навигации

Это очень важная часть планирования ресурса. Способ доступа к информации на сайте
должен быть простым и понятным. Пользователь в любую минуту должен знать ответы на
следующие вопросы:
1. Где я нахожусь?
2. Куда могу пойти?
3. Как туда добраться?
4. Как вернуться назад?

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

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

 Текстовая система навигации - самый распространенный вид. Надо сказать, что


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

Различают горизонтальное и вертикальное меню. Вертикальное располагается справа


или слева каждой страницы. Горизонтальное меню располагается, как правило, сразу
под шапкой сайта. Для повышения удобства рекомендуется дублировать
горизонтальное меню внизу каждой страницы (только не оформлять его также
пышно, как верхнее).
 Навигационные карты. При таком подходе берется изображение и к различным его
областям привязываются ссылки. Самым распространенным примером являются
туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на
страницу, посвященную этой стране. Карты обязательно надо дублировать хотя бы
скромным горизонтальным меню внизу страницы. Иначе, при малейшем сбое
пользователь вообще никуда не сможет перейти.

Главная страница сайта

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

 Главная страница должна отражать тематику сайта.


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

Остальные страницы сайта

Внешний вид всех страниц сайта должен быть выдержан в едином стиле. На них должна
быть обязательная ссылка на главную страницу. В остальном каждая страница должна быть
уникальна, т.е. иметь свое содержание. Причем, следует учесть несколько моментов:
1. Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.
2. Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и
подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.
3. Снабжайте текст картинками и графиками, но не переусердствуйте. Все должно быть
обоснованно.

Компоновка веб-страниц

Существуют следующие наиболее распространенные компоновки веб-страниц (рис. 7).


а) б) в)
1 - "Шапка" страницы. Здесь располагаются название фирмы, название раздела,
эмблема, логотип и другая наиболее важная информация.
2, 5 - Здесь размещаются гиперссылки или панель навигации по сайту
4 - Область размещения текста
3 - Нижняя часть страницы (здесь содержится контактная информация и т.п.)

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

Рисунок 7 – Виды компоновок веб-страниц

Этапы разработки веб-сайта

Разработка сайта — это процесс, состоящий из нескольких последовательных этапов.

1. Проектирование

На этом этапе определяется тематика будущего сайта, выясняются цели и задачи,


определяется целевая аудитория. Разрабатывается структура сайта - эскиз сайта на бумаге.
Создается список будущих тематических разделов. Затем составляется техническое задание
(ТЗ).
Цель проектной работы - спрогнозировать или задать поведение пользователя на сайте.
Понятная структура страниц, доступность основного и вспомогательного меню позволяют
удерживать пользователей на сайте. Поэтому важно учесть все детали до разработки дизайна
и программирования.

В ТЗ прорабатываются следующие общие требования к сайту:

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

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

2. Разработка дизайна

Если на этапе проектирования определяется поведение пользователей, то здесь оформляются


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

3. Вёрстка

Верстка представляет собой процесс интеграции текстового содержания, графики и


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

4. Программирование

На данном этапе происходит разработка и подключение программных компонентов сайта,


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

5. Информационное наполнение сайта

Эффективность работы любого сайта неразрывно связана с понятием контента, то есть


текстовой и графической информации, размещенной на нем.
На этом этапе осуществляется: подготовка текстовых материалов; подготовка графических
материалов в растровом формате, оптимизация картинок; заполнение страниц.
6. Тестирование

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


особое внимание. На этом этапе проверяется все — удобство навигации, целостность
данных, корректность ссылок и орфография.

7. Публикация

Публикация — это обеспечение хостинга веб-сайта и «привязка» сайта к предварительно


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

8. Продвижение (раскрутка)

Готовый, наполненный информацией сайт еще не гарантирует вам приток новых клиентов.
Главная причина этого — пользователи Интернет могут не встретить ваш сайт в сети. По
статистике большинство пользователей находят информацию и приходят на сайты через
поисковые системы. Именно поэтому популярность ресурса зачастую зависит от его позиции
по результатам поиска. Чтобы ваш сайт занимал лидирующие позиции в поисковых
системах, необходимо провести ряд мероприятий по его продвижению в сети.
Продвижение — это своего рода «рекламная кампания» по узнаванию сайта и повышению
его посещаемости. Сюда входит регистрация сайта в поисковых системах, обмен ссылками,
баннерная реклама и др.

9. Поддержка

Еще на этапе проектирования необходимо задаться вопросом, каким образом будут


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

Еще более важной является постоянная актуализация информации на сайте. Вы не должны


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

Команда разработчиков веб-сайта

Разработкой качественных сайтов обычно занимается группа специалистов (верстальщики,


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

Дизайнер
Разработка графического дизайна. Веб-дизайнеры занимаются разработкой графического
макета сайта, то есть пользовательского интерфейса. Макет сайта включает в себя
графические элементы, шрифты, создаваемые дизайнером в графических редакторах
Photoshop, CorelDraw, Flash и тому подобное. После создания макета сайта, его
согласовывают с заказчиком, после чего макет отправляется на верстку.

Верстальщик

Верстка. Верстальщик на основании графического макета создает один или несколько


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

Программист

Программирование. Задачей программиста является создание из шаблонов страниц


целостной системы сайта, наполнение ее функциональными элементами: интеграция с
системой управления контентом CMS, удобная административная страница, поиск по сайту,
форма обратной связи, авторизация и тому подобное. После подготовки программной
основы сайта следует его наполнение контентом.

Контент-менеджер

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


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

Оптимизатор

SEO-оптимизация (Search Engines Optimization). Мероприятия, которые повышают


популярность сайта, плодотворное сотрудничество с поисковыми системами. Задачей SEO-
оптимизаторов является подготовка и корректировка готового контента сайта,
популяризация и реклама в Интернете. Стратегия продвижения сайта разрабатывается в
зависимости от содержания сайта и требований заказчика. Это достаточно емкий по времени
процесс и часто зависит от бюджета, выделенного на SEO кампанию.
Тема 6. Язык разметки гипертекста HTML

WWW - это гипертекстовая информационно-поисковая система в Интернете. Блоки данных WWW


(страницы) размещаются на отдельных компьютерах, называемых WWW-серверами (или Web-
серверами) и принадлежащих отдельным организациям или частным лицам. С помощью
гипертекстовых ссылок, встроенных в документы WWW, пользователь может быстро переходить от
одного документа к другому, от сайта к сайту, от сервера к серверу.
В основе WWW лежит протокол передачи гипертекстовых сообщений HTTP (Hypertext Transfer
Protocol), а сами страницы формируются с помощью специального гипертекстового языка описания
документов HTML (Hypertext Markup Language). В основе распределенной базы данных WWW лежит
гипертекстовая технология.
Язык HTML (от англ. HyperText Markup Language – «язык разметки гипертекста») служит для
создания веб-страниц. Большинство сайтов созданы именно с помощью HTML.
HTML — компьютерный язык, поэтому имеет определенный синтаксис. Синтаксис — это правила,
по которым строятся выражения на этом языке.

<HTML> </HTML>
Обозначение документа на языке HTML.
<HEAD> </HEAD>
Область заголовка Web-страницы.
<TITLE> </TITLE>
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого
элемента, отображается не в документе, а в заголовке окна браузера.
<STYLE> </STYLE>
Описание стиля некоторых элементов Web-страницы.
<МЕТА>
Этот элемент содержит служебную информацию, которая не отражается при просмотре
Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного
тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых
определяет тип данных, а второй - содержание. Вот несколько примеров meta-данных.
• Дата, обозначающая «срок годности» документа: name="Expires"
content="Дата"
• Адрес электронной почты:
name="Reply-to" content="Имя@Адрес" Имя автора
Web-страницы:
паше ="Author" content="Имя автора" Набор
ключевых слов для поиска:
name="Keywords" content="cлово1, слово2, словоЗ ..."
• Краткое описание содержания Web-страницы: name="Description"
content="Содержание страницы"
• Описание типа и характеристик Web-страницы:
name= "Content-Type" content=” Описание страницы"
• Указание приложения, в котором была создана Web-страница:
name="Generator" content="Название HTML-редактора"
<BODY></BODY>
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу.
Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих
установки для всей страницы целиком.
Один из самых полезных для дизайна - атрибут, определяющий фон страницы.
background="Путь к файлу фона"
Более простое оформление фона сводится к заданию его цвета:
bgcolor="#RRGGBB"
Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать
соответствующий цвет текста. Для этого имеется следующий атрибут
text=" ##RRGGBB"
Для задания цвета текста гиперссылок используется следующий атрибут:
link="##RRGGBB"
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink=" ##RRGGBB"
<!-- Комментарий-->
Признаком комментария служит восклицательный знак, а текст комментария должен
обрамляться двойными дефисом. Например:
<!-- Начало вывода таблицы -->
<H1></H1>
Элемент заголовка. Существует шесть уровней заголовков, которые обозначаются Н1...Н6.
Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для
заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:
align="left", align="center", align="right"
<HR>
Горизонтальная линия (horizontal rule) - очень часто используемый элемент. С его
помощью очень удобно делить страницу на части.
Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по
центру, вправо, по ширине:
align="left"
align="center"
align="right"
align="justify"
Можно задавать толщину линии:
size=толщина в пикселах
Можно управлять длиной линии:
width=длина в пикселах
width=длина в процентах %
Можно выбрать цвет:
со1ог="цвет"
Использование спецсимволов
В HTML и, соответственно, в браузерах реализована возможность прорисовки символов по их
кодам. Символы могут быть общепринятыми, вводимыми с клавиатуры, нестандартными и
используемыми в HTML в качестве служебных. Все их будем называть спецсимволами. Первый
способ ввода спецсимвола заключается в указании его кода. Например, латинскую букву А
можно задать так: &#65. Для некоторых символов предусмотрена мнемоническая кодировка.
Для отделения кода символа от последующего текста надо вводить точку с запятой.
Управление цветом
Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами.
Существует несколько атрибутов, значениями которых являются параметры цвета. Самый
простой способ определить цвет - написать название цвета на английском языке. Так, например,
задается красный цвет шрифта в элементе FONT:
color="red"
Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается
двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют
диапазону от 0 до 255.

Форматирование текста
Для форматирования текста существует большое количество элементов.

<Р> </Р>
Элемент абзаца (paragraph).
Вместе с элементом абзаца можно использовать атрибут выравнивания align:
• align="left" - выравнивание по левому краю;
• align="center" - выравнивание по центру;
• align=" right" - выравнивание по правому краю.
Для центрирования абзаца следует использовать такую конструкцию:
<Р align="center"> Текст абзаца
<BR>
Элемент, обеспечивающий принудительный переход на новую строку.
<CENTER>/CENTER>
Элемент для центрирования текста, а точнее - любого содержимого. Этот элемент не является
общеупотребительным. В тех случаях, когда это возможно, вместо него в элементах текста
используют атрибут align="center.
<B> </B>
Выделение текста полужирным шрифтом. Очень популярный элемент. Использование
полужирного шрифта - прием, позаимствованный из текстовых редакторов.
<I> </I>
Выделение текста курсивом.
<U> </U>
Подчеркнутое начертание текста.
<FONT> </FONT>
Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи
соответствующих атрибутов. Абсолютный размер шрифта задается атрибутом size (размер):
size=абсолютный размер шрифта
Этот атрибут может принимать значения от 1 до 7.
Размер шрифта может также задаваться относительно базового:
size=+число
size=- число
При назначении величины для этого атрибута надо учитывать величину базового размера. В
сумме эти две величины должны соответствовать одному из абсолютных размеров. Так, для
базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4.
Если величина выходит за допустимый предел, то используется либо шрифт размера 7, либо
шрифт размера 1.
Для элемента FONT можно использовать атрибут цвета:
соlоr="цвет"
Атрибут face (вид) позволяет задавать определенный шрифт или несколько шрифтов
(через точку с запятой), например:
face="Arial; Verdana; Tahoma"

Элементы содержания
Существует большая группа элементов, которые используются не столько для форматирования
текста, сколько для выделения смысла абзацев и слов.
<ЕМ> </ЕM> и <DFN> </DFN>
Элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение
чего-либо (definition). Оба элемента аналогичны по своему действию элементу I, то есть в
большинстве случаев позволяют выделить текст курсивом.
<CITE> </CITE>
Предполагается, что этот элемент может быть использован для форматирования цитат и ссылок
в обычном понимании этого слова. Текст, расположенный внутри этого элемента, печатается
по умолчанию курсивом.
<STRONG> </STRONG>
Элемент, отвечающий за выделение текста. Обычно его применение равносильно
использованию элемента В для выделения текста полужирным начертанием. Если следует
подчеркнуть значение слова, рекомендовано использовать этот тег.

Списки

Существует несколько разновидностей списков.


<UL> <LI> </UL>
Самым простым является ненумерованный список (unordered list). Его шаблон представлен
ниже:
<UL>
<LI>Пункт 1 списка
<LI>Пункт 2 списка
<LI>Пункт 3 списка
</ UL >
Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список
от другого. Элемент LI обозначает каждый из пунктов.
Вид маркера задается при помощи атрибута type. Возможные варианты:
disc (черный круг – по умолчанию),
square (квадрат),
circle (белый круг).

<OL> <LI> </OL>


Структура нумерованного списка (ordered list) похожа на предыдущую:
<OL type="I">
<LI>Пункт 1
<LI>Пункт 2
<LI>Пункт 3
<LI>Пункт 4
</Оl>
Способ нумерации задается при помощи атрибута type.

Гиперссылки
<A> </A>
Элемент, обеспечивающий создание гиперссылок.
Чаще используется такой шаблон:
<А href="Адрес ссылки"> текст для щелчка </A>
Или такой:
<А href= "Адрес ссылки"> <IMG src="Ссылка на рисунок"> </А>
В том случае, когда используются переходы внутри текущей страницы, на ней должны быть
расставлены метки:
<А name="Метка"> </а>
Для перехода к метке используется ссылка по такому шаблону:
<А href="#Метка"> Текст для щелчка </А>

Таблицы
Таблицы являются очень удобным средством форматирования данных на Web-странице.
<TABLE> </TABLE>
Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет
структуру таблицы от остальной части Web-страницы.
Таблицу можно выровнять по горизонтали при помощи атрибута align:
• align="left" - влево;
• align="center - по центру;
• align=" right" - вправо.
Ширину таблицы можно задать точно в пикселах или в процентном отношении к ширине
страницы в окне броузера. Например:
width=400
width=50%
Атрибут border — задает толщину рамки вокруг элемента в пикселях.
<table border=2>
Атрибут cellspacing — задает расстояние между внешними границами ячеек таблицы.

cellspacing=5
Атрибут cellpadding - для всех ячеек таблицы можно задать размер пустого пространства,
окружающего данные в ячейках:
cellpadding=число-пикселов
или
cellpadding="15%"
Для всей таблицы может быть задан цвет фона:
bgcolor="Цвет"
bgcolor=#RRGGBB
Вместо цвета допускается использовать рисунок:
background="Файл"
Атрибуты bgcolor и background можно указывать и с другими элементами таблицы, кроме
элемента CAPTION.
<CAPTION> </CAPTION>
Элемент для задания заголовка таблицы. Несмотря на то что этот элемент располагается внутри
элемента TABLE, заголовок выводится на экране вне рамки таблицы. Положением заголовка
можно управлять:
• align=" top" - заголовок над таблицей;
• align=" bottom" - заголовок под таблицей;
• align="left" - заголовок вверху и выровнен влево;
• align=" right " - заголовок вверху и выровнен вправо.
Другие атрибуты: id, class, lang, dir, title, style, атрибуты событий.

<TR>
Элемент, создающий строку таблицы. Содержимое ячеек можно выравнивать по вертикали:
• valign="top" - по верхнему краю;
• valign=''center" - по центру;
• valign="bottom- - по нижнему краю.
<TH>
Элемент ячейки, которая является заголовком столбца или строки таблицы.
<TD>
Этот элемент определяет обычную ячейку таблицы.

Рисунки

<IMG>
Элемент для создания ссылки на графический файл (image). Необходимым атрибутом является
s r c - указатель на файл графики: src="Ссылка на файл". Ссылка на файл представляет собой
URL.
Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны
располагаться рисунки.

Формы
Предполагается, что форма должна содержать определенное число элементов управления: поля
ввода, переключатели, кнопки, флажки и т. д. Каждый элемент управления создается при
помощи одного из элементов HTML. Для таких элементов предусмотрены атрибуты, влияющие
на работу формы.
Большинство элементов формы может принимать определенные значения. Например, для поля
ввода это может быть текст, а для переключателя - номер элемента, который выбран
пользователем. Для доступа к этим значениям со стороны программы необходимо
использование атрибута name.
В момент активизации формы часть элементов может иметь значения. В текстовое поле может
быть введена строка, переключатели могут иметь подписи и т. д. Для задания этих значений
используется атрибут value.
Атрибут
tabindex=номep
позволяет определить, в какой последовательности курсор переходит с поля на поле при
нажатии клавиши Tab. На элемент с атрибутом tabindex=1 устанавливается курсор в момент
открытия окна броузера.
В элементах управления, содержащих подписи (например, в меню), часто используются
сочетания клавиш, позволяющие перевести фокус на определенный элемент. Обычно командой
служит комбинация клавиши Alt и символа, подчеркнутого в названии команды. В формах
HTML тоже можно использовать этот прием при помощи атрибута accesskey. Например:
accesskey="R"
Атрибут disabled позволяет сделать элемент формы недоступным. Вид элемента при этом не
изменяется, но цвет текста становится более бледным. Недоступный элемент нельзя выбрать
или изменить его значение.
Существуют атрибуты событий, которые непосредственно связаны с формами:
• onfocus - элемент получает фокус (выбирается);
• onchange - информация элемента изменена;
• onblur - элемент теряет фокус.

Элементы форм

<FORM> </FORM>
Этот элемент необходим для построения достаточно сложных форм. После заполнения формы и
подтверждения ввода со стороны пользователя, введенная информация пересылается на сервер
и обрабатывается при помощи CGI-программы, связанной с формой. Атрибут action должен
указывать на имя программы, например:
<F0RM action="http://www.название.домен/имя программы" method="post">
Элементы формы
</FORM>
С помощью атрибута method можно задать протокол для пересылки данных на сервер.
Протокол GET используется по умолчанию, но в большинстве случаев он не удовлетворяет
разработчиков, поэтому чаще используется протокол POST.
Атрибут enctype позволяет указать способ кодирования содержимого формы.
Большинство форм снабжаются кнопками, которые позволяют очистить (reset) форму или
подтвердить (submit) правильность ее заполнения и отослать данные. Чтобы определить
программы-сценарии, которые должны выполняться после указанных действий пользователя,
существуют два атрибута событий onsubmit и onreset.

<INPUT>
Этот элемент позволяет создавать различные части формы, такие как флажки, переключатели,
поля ввода. Элемент не имеет конечного тега, так как все параметры задаются при помощи
атрибутов. Вид элемента определяет атрибут type:
 type="text" - создание поля ввода, в котором можно автоматически разместить произвольный
текст, используя атрибут value;
 type="password" - создание поля для ввода пароля, причем введенная информация
отображается звездочками;
 type="checkbox" - создание флажка;
 type="radio" - определение одного переключателя. Для создания группы переключателей
необходимо использовать несколько элементов INPUT. Вот пример группы из трех
переключателей:
<НЗ> Переключатели </H3>
<INPUT type="radio" name="S001" value="Первый">
<INPUT type="radio" name="S001" value ="Второй">
<INPUT type="radio" name="S001" value ="Третий" checked>
Атрибут checked определяет, какой из переключателей должен быть выбран по
умолчанию.
• type="button" - создание кнопки произвольного назначения;
• type = "submit" - создание кнопки, щелчок на которой подтверждает ввод информации в
форму. Атрибут value используется для определения надписи на кнопке;
• type="reset" - тоже кнопка, но для отмены ввода данных в форму;
• type="image" - создание кнопки с рисунком. Для указания графического файла используется
атрибут src. Атрибут align предназначен для позиционирования кнопки с рисунком. Значения
атрибута уже неоднократно упоминались: bottom,left,middle, right, top. Пользоваться этим
атрибутом в данном случае я не рекомендую, так как не все броузеры его поддерживают;
• type="file" - средство выбора файла для присоединения к форме. Пользователю предлагается
записать имя файла в поле ввода. Кроме того, броузер автоматически создает рядом с полем
ввода кнопку Обзор, которая позволяет запустить стандартный (для операционной системы)
диалог выбора файлов;
• type=" hidden" - скрытый от пользователя элемент. Такие элементы используются для того,
чтобы включить в набор данных формы некую фиксированную информацию. По сути, это
определение имени переменной и ее значения.
Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения и сброса.
Значение этого атрибута определяет имя поля формы. Программа сервера по этому имени может
выделить необходимые данные.
Значение атрибута value задает значение по умолчанию для поля ввода или определяет надпись на
кнопке.
Атрибут size позволяет задать длину поля ввода.

<SELECT> <OPTION> </SELECT>


Элемент SELECT предназначен для создания списка или меню на гипертекстовой странице, а
элемент OPTION - для создания пункта списка. Пояснить действие этих элементов поможет
простой фрагмент, приведенный ниже:
<SELECT>
<OPTION value =а>Первый
<OPTION value=b>Bтopoй
<OPTION value=c>Tpeтий
<OPTION value=d>Четвертый
</SELECT>
Атрибуты элемента SELECT могут быть следующими. Атрибут name определяет имя. При помощи
атрибута multiple (который не имеет значений) пользователю разрешается выбрать сразу несколько
пунктов списка. Атрибут size определяет количество видимых на экране пунктов списка.
Элемент OPTION имеет другие атрибуты. Selected определяет, какой из пунктов списка должен быть
выбран по умолчанию, то есть при загрузке страницы. Атрибут value необходим для обработки данных
на стороне сервера. Выбранный в списке пункт характеризуется значениями возвращенных атрибу-
тов name и value.

<TEXTAREA> </TEXTAREA>
При помощи этого элемента создается область для ввода или просмотра текста.
Пример такой области, созданный при помощи следующей конструкции:
<Н2>Элемент TEXTAREA
<TEXTAREA name="text001" rows=5 cols=30>
Область для ввода текста
</textarea>
</H2>
Размеры области задаются атрибутами rows (количество строк) и cols (количество столбцов).
Назначение атрибута name такое же, как и в предыдущих случаях.
Подобно элементу INPUT, элемент TEXTAREA может иметь атрибут readonly. Это позволяет создать
элемент, недоступный для редактирования.

Тема 7. Технология CSS.

Язык HTML в своем развитии ушел далеко от простого языка разметки. Постепенно в него
добавлялись элементы и атрибуты, отвечающие за представление информации в окне браузера.
Примеров можно привести множество: это элементы FONT, B, I, и, атрибуты bgcolor, align и
многие им подобные. Разработчики четко сознали несостоятельность такого подхода и в
последней версии HTML пометили такие элементы и атрибуты как нежелательные для исполь-
зования.
Вскоре была найдена другая технология, позволяющая описывать внешний вид элементов,
создаваемых языком разметки — CSS (Cascading Style Sheets, Каскадные таблицы стилей).
Разметка выполняется средствами HTML, а визуальное оформление элементам придается при
помощи CSS.
Что же такое каскадные таблицы стилей? Стиль— это набор параметров, задающий
внешнее представление некоторого объекта в той или иной среде. Например, если у нас есть
параграф текста и мы хотим поместить его на Web-страницу, то нужно подумать о том, как он
должен выглядеть: какой гарнитурой и размером шрифта должен быть набран, как выровнен на
странице, какого цвета должны быть буквы и т.д. Если этот же параграф нужно воспроизвести
через какое-либо аудиоустройство или голосовой браузер, то тут уже шрифт и цвет роли не
играют. Важнее — интонация, тембр, громкость, женский или мужской голос и т.д. Параграф
при этом все тот же, а вот стиль его представления меняется.
Так как в одном документе встречается множество различных элементов, каждый из
которых может иметь свой стиль оформления, набор стилей для всех элементов одного
документа называют таблицей стилей.
Таким образом, любой документ можно разметить при помощи некоторого языка разметки,
а затем дополнительно к этому создать несколько таблиц стилей для представления этого
документа на любом воспроизводящем устройстве: визуальном или голосовом браузере, на
экране карманного компьютера или мобильного телефона. В результате мы получаем
универсальный документ, который можно будет "просмотреть" на любом устройстве, для
которого создана соответствующая таблица стилей.
Каскадными таблицы стилей называют из-за особых правил, согласно которым каждому
стилю придается вес и значимость. Каскадирование применяется в том случае, если для одного
элемента разными способами задано несколько разных стилей. Принципы каскадирования
определяют приоритеты применения стилей и тем самым решают конфликтные ситуации.
Если говорить о CSS и HTML, то вместе они предоставляют Web-дизайнерам особенные
возможности. Каскадные таблицы стилей позволяют задавать такие параметры представления
объекта, которые совершенно невозможно организовать средствами HTML, — например, убрать
подчеркивание у ссылок.
CSS – технология управления внешним видом элементов веб-страницы. CSS предоставляет гораздо
больше возможностей по оформлению страницы, чем HTML. Например, с помощью стилей CSS
можно убрать у ссылок подчеркивание, сделать у таблицы пунктирные границы. Сейчас CSS
используется практически на всех сайтах Всемирной паутины.

Синтаксис CSS
Рассмотрим синтаксис CSS. Таблицы стилей состоят из правил, каждое из которых описывает
внешний вид одного или группы элементов HTML. Правило состоит из селектора и блока объявления
стилей, который заключается в фигурные скобки и следует за селектором. Каждое объявление состоит
из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к
элементу.
Селектор {
свойство1: значение1;
свойство2: значение2;
свойство3: значение3 значение4;
}
Язык CSS, так же как и HTML, игнорирует лишние пробелы и переводы строк. Можно
добавлять комментарии, заключая их между /* и */.

Селекторы
Селектор определяет, к каким элементам (тегам) страницы будут применяться правила. В
качестве селектора можно использовать:
■ Имя элемента - тогда стиль применится ко всем таким элементам.
Пример:
A {font-size: 12pt; text-decoration: none}
TABLE {border: black solid 1px}

■ Несколько элементов через запятую - тогда стиль применится для всех


перечисленных тегов.
Пример:
H1, H2, H3, H4, H5, H6 {color: red}

■ Контекстный селектор.
Пример:
TABLE A {font-size: 120%}

■ ID элемента. В стилях уникальный идентификатор указывается после знака # - правила


применятся к тегу с атрибутом id="идентификатор".
Пример:
Правило CSS
#sprav_lit{font-size: 200%}
Фрагмент HTML-документа
<P id="sprav_lit">Справочник HTML и CSS</P>

■ Символ * - правила применятся ко всем элементам документа.


■ Классы.
Пример:
Правило CSS
P.blue{ color: blue}

Фрагмент HTML-документа
<Р class=”blue”>Цвет этого абзаца и всех других абзацев этого класса будет
синим</Р>

Можно создать унифицированный класс, который можно будет использовать в любых


элементах HTML. Например, создадим класс красных объектов. Для этого в таблице стилей нужно
написать такое правило:
.red{color: red}

Перед именем класса можно не указывать название элемента. Далее в HTML-документе можно
написать такой код:
<Н1 с1аss="red">Красный заголовок</H1>
<Р class="red">Teкст абзаца тоже будет красным</Р>

В результате цвет любого элемента, внутри открывающего тега которого будет стоять атрибут
class=" red", будет красным.

Псевдоклассы
Мы рассмотрели способы привязки правил оформления CSS к элементам документа HTML:
по названию тега, по имени класса, по ID и т.п. В CSS также существует несколько псевдоклассов. С
помощью псевдоклассов можно задать стиль в зависимости от состояния элемента или его положения
в документе.
Для ссылок определено 4 псевдокласса:
link – ссылки, которые не посещались пользователем;
visited – посещенные ссылки;
active – активная (нажатая) ссылка;
hover – ссылка, на которую наведен курсор.

Псевдоэлементы

Псевдоэлемент first-line задает форматирование первой строки текста. Псевдоэлемент first-


letter – позволяет задать форматирование первой буквы текста.
Пример:
P:first-line {text-decoration: underline}
P:first-letter {
color: red;
font-size: 200%;
}
Включение CSS в HTML
Стили CSS могут включаться в HTML-документ тремя разными способами.

Внутренние таблицы стилей


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

Встроенные таблицы стилей


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

Хранятся в отдельном файле с расширением .css. Подключаются тегом


<LINK rel="stylesheet" type="text/css" href="адрес_стиля">
Основное преимущество: один стиль может использоваться сразу в нескольких документах
HTML. Во внешних файлах нужно хранить стили, общие для всего сайта, они влияют сразу на
множество тегов во множестве документов. Это становится очень удобным, если сайт содержит много
страниц. Например, мы хотим поменять на всех страницах сайта цвет фона и размер шрифта. Если все
страницы подключают один и тот же внешний стиль CSS, достаточно в нем задать новый цвет фона и
размер шрифта.
Обратите внимание: с помощью CSS можно отключить у ссылок подчеркивание.
Средствами HTML это сделать невозможно. CSS значительно расширяет возможности
оформления страницы.
Второй важный момент: использование CSS позволяет разделить оформление и
содержимое документа. Такое разделение существенно упрощает редактирование сайта в
дальнейшем.

CSS-свойства: цвет, фон, шрифты, текст


Единицы длины
Все единицы длины делятся на два больших класса: относительные и абсолютные.
Относительные устанавливают размер относительно какой-то другой единицы,
например, точки на экране монитора. Относительных единиц всего три:
1. em - 1 em равен размеру (высоте) шрифта, используемого в данном элементе;
2. px – 1 px равен одной точке на экране монитора, которую обычно называют пикселем;
3. ex - 1 ex равен высоте строчной буквы “x” в шрифте.
Абсолютные единицы измерения имеют фиксированный размер, не зависящий от других
величин, их в CSS поддерживается всего пять:
1. in – 1 in равен одному дюйму, т.е. 2,54 см;
2. pt – 1 pt равен 1/72 дюйма; эта величина называется типографским пунктом;
3. pc – 1 pc равен 12 pt или 1/6 дюйма; эта величина называется пикой;
4. mm – 1 mm равен одному миллиметру;
5. cm – 1 cm равен одному сантиметру.
Единица измерения записывается сразу за значением без пробела: TABLE {font-size:
12pt}. Кроме того, в CSS можно пользоваться процентами от какой-либо величины.

Цвет
Свойство color задает цвет текста внутри элемента. В качестве значения свойства
указывается цвет в одной из доступных форм:
• по ключевому слову (red, yellow, silver и т.д.);
• шестнадцатеричным кодом цвета в полной форме (#00FFCC, #EEDDAA) или
сокращенно (#0FC, #EDA);
• десятичным кодом цвета в модели RGB (color: rgb(25, 205, 172)).
Например:
A.content{color: black}
A.menu{color: #3300AA}
H1, H2, H3, H4, H5, H6{color: #ff0000}

Фон
Как и в языке HTML, в CSS фоном служит заливка цветом или изображение. Фоновое
изображение может быть повторяющимся.
Свойство background-color устанавливает цвет фона элемента:
TD.HEAD{background-color: #ffff00}

Свойство background-image устанавливает в качестве фона изображение:


BODY {background-image: url(IMAGES/bg.jpg)}

Свойство background-attachment задает поведение фонового изображения при прокрутке.


По умолчанию задается значение scroll – фон прокручивается вместе с содержимым. Значение
fixed делает фон неподвижным.
Свойство background-position задает начальное положение фонового изображения.
Для выравнивания изображения по вертикали используются ключевые слова:
• top — верх изображения выравнивается по верхнему краю страницы или блока;
• center — центр изображения выравнивается по центру страницы или блока;
• bottom — низ изображения выравнивается по нижнему краю страницы или блока.
Для выравнивания по горизонтали используются следующие ключевые слова:
• left — левый край изображения выравнивается по левому краю страницы или блока;
• center — центр изображения выравнивается по центру страницы или блока;
• right — правый край изображения выравнивается по правому краю страницы или
блока.
BODY {
background-image:url(picture.gif);
background-position: top center;
}

Координаты точки могут задаваться при помощи любых допустимых в CSS абсолютных
единиц измерения длины: пикселях, сантиметрах и т.д. Допускается задание отрицательных значений, в
этом случае фоновое изображение как бы смещается за пределы экрана или блока.
BODY {
background-image:url(picture.gif);
background-position: -20px 1cm;
}

Позиционирование фонового изображения можно задавать и при помощи задания значений в


процентах:
BODY {
background-image:url(picture.gif);
background-position: 0% 0%;
}

Свойство background-repeat определяет, будет ли повторяться фоновое изображение по


горизонтали и вертикали. Допустимы следующие значения:
repeat – по горизонтали и вертикали (по умолчанию);
repeat-x – только по горизонтали;
repeat-y – только по вертикали;
no-repeat – изображение не повторяется, остается одна копия изображения.

Свойство background
Рассмотрим полный пример задания фона для страницы:
BODY {
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50 % 50%;
}
Фоновое изображение теперь будет закреплено по центру экрана, не будет повторяться ни в
одном из направлений и не будет прокручиваться вместе с текстом страницы.
В CSS существует понятие стенографического свойства, позволяющего упрощенно записывать
правила, относящиеся к заданию стилей для одного элемента, в данном случае для фонового
изображения. Свойство background является стенографическим свойством для задания значений
свойств: background-image, background-repeat, background-attachment и background-position.
Таким образом, показанный выше пример можно переписать так:
BODY {
background: url(images/bg.gif) no-repeat fixed 50% 50%
}
В сокращенной форме записи background значения всех свойств разделяются пробелами, а
порядок указания значений произвольный. Это же правило можно записать и так:
BODY {
background: no-repeat url(images/bg.gif) 50% 50% fixed
}
Шрифты
Все шрифты (гарнитура – синоним понятия “шрифт”) делятся на несколько групп:
serif – шрифты с засечками, например: Times New Roman, Georgia;
sans-serif – рубленые шрифты, без засечек, например Arial, Tahoma, Verdana;
cursive – курсивные шрифты: Comic Sans Ms, Calisto MT;
fantasy – декоративные шрифты, например: Curlz MT;
monospace – моноширинные шрифты (с одинаковым расстоянием между символами). Примеры:
Courier New, Lucida Console.
Использование шрифтов с засечками облегчает чтение текста с бумаги, поэтому такие шрифты
обычно используют для набора основного текста в книгах. Для web-сайтов основной текст чаще
набирают шрифтом без засечек: Arial, Tahoma, Verdana.
Свойство font-family задает гарнитуру шрифта. Можно указать несколько значений через
запятую. Браузер проверит первый шрифт из списка: если шрифт установлен на компьютере
пользователя, то браузер применит его, если нет – перейдет ко второму шрифту и т.д. Последним в
списке обычно указывается общий тип шрифта serif, sans-serif, cursive, fantasy или monospace.
P {
font-family: Arial, sans-serif
}

Свойство font-size позволяет указать размер шрифта. Делать это можно несколькими
способами.
Первый способ указать размер шрифта – по ключевым словам: xx-small,x-
small,small, medium,large,x-large,xx-large.
Второй способ - используются ключевые слова, позволяющие задавать относительные
размеры: smaller (шрифт уменьшается на один размер) и larger (шрифт увеличивается на
один размер относительно родительского элемента).
Относительный размер шрифта можно задавать и в процентах или в единицах измерения
em.
CITE{
font-size:120%
}

Тогда размер шрифта цитат будет на 20% больше, чем у элемента-предка.


То же самое можно сделать, указав размер шрифта в единицах измерения em:
CITE{
font-size:1.2em
}

Третий способ – задать размер шрифта в любых единицах длины: пикселях, пунктах,
сантиметрах или миллиметрах.
P{
font-size:12px
}

Свойство font-style задает стиль шрифта: normal (обычный), italic (курсивный) или
oblique (наклонный).

P.first{
font-style:italic
}

Свойство font-weight определяет насыщенность шрифта. В качестве значений допускаются


числа: 100, 200, 300, 400, 500, 600, 700, 800, 900. Обычному шрифту соответствует ключевое слово
normal, его числовой эквивалент – 400. Полужирному соответствует ключевое слово bold, его
числовой эквивалент – 700. Кроме этого, ключевые слова lighter и bolder могут делать
шрифт менее насыщенным или более жирным по отношению к базовому шрифту.
Например, для текста абзаца можно установить полужирную насыщенность шрифта, а для цитат
внутри абзацев текст сделать менее насыщенным, используя контекстный селектор:
P{
font-weight: bold
}
Р CITE {
font-style:normal;
font-weight: lighter;
}

Свойство font-variant позволяет указать вариант написания букв: обычный (normal)


или малые прописные буквы (small-caps).

Свойство font
Стенографическое свойство font позволяет в краткой форме записать все возможные свойства
шрифта.
Например, правило
Р{
font-family: Arial, sans-serif;
font-style: italic;
font-variant: small-caps;
font-size: 12pt;
}

можно записать короче следующим образом:


Р{
font: italic small-caps 12pt Arial, sans-serif;
}

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


• первой идет запись группы свойств font-style, font-variant и font-weight, любое из
которых может быть пропущено;
• затем обязательно указывается размер шрифта, т.е. значение свойства font-size, и через
слеш ("/") за ним можно указать высоту строки (высота строки задается свойством line-
height, но мы его пока еще не рассматривали);
• последней обязательно указывается гарнитура шрифта, т.е. значение свойства
font-family.
Из этого следует, что в краткой записи обязательно должны присутствовать два значения:
размер шрифта и используемая гарнитура.

Текст и его свойства


Свойство text-decoration задает оформление текста. Допустимые значения: line-through
(перечеркнутый), overline (линия над текстом), underline (подчеркивание), blink (мигающий
текст), none (отключение эффектов).
Чаще всего свойство text-decoration используется для того, чтобы убрать подчеркивание
у ссылок. Для этого пишут такое правило:

A:link, A:visited, A:active {


text-decoration: none;
}

Свойство text-align задает выравнивание текста в блоке: left (по левому краю), center (по
центру), right (по правому краю) или justify (по ширине).
P {
text-align:justify;
}

Свойство text-indent задает отступ первой строки. Длина отступа может задаваться в
процентах (%) от ширины текстового блока, пикселях (px), пунктах (pt) и др.
P {
text-indent: 2em;
}

Свойство text-transform позволяет изменять регистр букв в тексте. Возможные значения:


• capitalize — меняет регистр первых букв каждого слова на прописные;
• uppercase — меняет регистр всех букв на прописные;
• lowercase — меняет регистр всех букв на строчные;
• none— не производит смены регистра.
Приведем пример заголовка в стиле, где первые буквы всех слов будут заглавными.
H3{
text-transform: capitalize;
}

Интервалы
Свойство line-height – межстрочный интервал, указывает расстояние между строками текста.
В качестве значений можно использовать только положительные величины, заданные в процентах или
единицах длины. Можно также указывать в качестве значений безразмерные единицы, которые, так
же как и проценты, будут служить коэффициентом, на который умножается стандартная высота
строки.
P{
font-size:12pt;
line-height:150%;
}

Свойство word-spacing позволяет задать расстояние между словами. В качестве значения


допускаются любые единицы длины, как с положительными значениями, так и с
отрицательными.
P{
word-spacing: 2em;}

Свойство letter-spacing задает расстояние между буквами внутри слова. Задается в любых
единицах длины. Допускается задание отрицательных значений, при которых буквы могут
слишком плотно примыкать друг к другу или даже налегать друг на друга.
H1 {
letter-spacing: 0.3ex;
}

Блоки в CSS
Модель представления документов в CSS использует понятие блоков. В CSS каждый
элемент располагается в блоке, которому можно задать значения полей (margin), отступов (padding) и
границы (border).
Ширина полей и отступов задается следующими CSS свойствами.
Свойства margin-top, margin-right, margin-bottom, margin-left определяют ширину
полей: верхнего, правого, нижнего, левого. Значения могут задаваться в любых единицах
длины, а также в процентах.
Свойство margin стенографического типа задает значение сразу для всех сторон.
Пример:
P {margin: 10px;}

аналогично записи
P {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Если для margin указать два значения через пробел, то первое из них будет задавать ширину
верхнего и нижнего поля, а второе – левого и правого. Если указать три значения, то первое будет
присваиваться верхнему полю, второе – левому и правому, а третье – нижнему. Наконец, при указании
четырех значений, они поочередно будут указывать верхнее, правое, нижнее и левое поля.
Свойства padding-top, padding-right, padding-bottom, padding-left устанавливают
ширину отступов сверху, справа, снизу и слева от содержимого соответственно. Значения
свойств могут задаваться в произвольных единицах длины или в процентах.
Свойство padding стенографического типа устанавливает значения сразу для всех
сторон.
Свойство padding может иметь одно, два, три или четыре значения. Значения присваиваются
так же, как для полей.
P{
padding:0.5em 1em;
}

В стиле для элемента P указано, что размеры отступов по 0,5 em сверху и снизу и по 1 em слева
и справа.
Для свойств margin и padding можно задавать значение auto. В этом случае браузер сам
автоматически рассчитает величину полей и отступов.
Границы блоков, так же как отступы и поля, делятся на четыре сегмента: верхний, правый,
нижний и левый. Каждый отдельный сегмент границы блока может иметь свои характеристики: цвет,
толщину, тип линий.
Свойства border-top-width, border-right-width, border-bottom-width, border-left-width
определяют толщину границ блоков для верхнего, правого, нижнего и левого сегментов.
Возможные значения: thin – тонкая граница, medium – граница средней толщины, thick –
толстая граница. Толщину границы можно указать и в произвольных единицах измерения длины:
пикселях, пунктах, сантиметрах, миллиметрах и т.д.
Свойство border-width стенографического типа задает значения свойств border-top-
width, border-right-width, border-bottom-width, border-left-width. Свойство border-width может
иметь одно, два, три или четыре значения.
P{
border-width: 1px;
}

Свойство border-color стенографического типа задает цвет границы блока. Если требуется
задать различные цвета для четырех составляющих границ, то можно пользоваться индивидуальными
свойствами:
• border- top-color — цвет верхнего сегмента границы;
• border-right-color — цвет правого сегмента границы;
• border-bottom-color — цвет нижнего сегмента границы;
• border-left-color — цвет левого сегмента границы.
Значением свойств может быть значение цвета, указанное любым доступным в CSS
способом.
Свойство border-style стенографического типа задает тип линий, которыми будут
отображаться границы блока. Если требуется задать различные типы линий для четырех
составляющих границ, то можно пользоваться индивидуальными свойствами:
• border-top-style — тип линии верхней границы;
• border-right-style —тип линии правой границы:
• border-bottom-style — тип линии нижней границы;
• border-left-style —тип линии левой границы.
Значением свойств может быть тип линии границы, определяемый одним из
приведенных ниже ключевых слов:
• none — граница отсутствует; это значение используется по умолчанию;
• dotted — граница отображается линией, составленной из точек;
• dashed — граница отображается пунктирной линией;
• solid — граница отображается сплошной линией;
• double — граница отображается двойной сплошной линией;
• groove — граница отображается "вдавленной" линией с имитацией объема;
• ridge — противоположно значению groove. Граница отображается "выпуклой" линией с
имитацией объема;
• inset — граница отображается так, что весь блок выглядит как бы вдавленным (похоже на
нажатую кнопку);
• outset — противоположно значению inset. Весь блок выглядит выпуклым.

Стенографическое свойство border-style по аналогии с border-width позволяет


сокращенно записать значения стилей для всех четырех сегментов границы. Оно допускает задание
одного, двух, трех или четырех значений. Применение этих значений аналогично свойству border-
width.
P {
border-style: solid dotted;
}

Стиль верхней и нижней границы вокруг абзаца будет solid, а для левой и правой —
dotted.
Свойство border является стенографическим и используется для одновременного задания
параметров всех четырех сегментов границы: ширины, цвета и стиля. В отличие от стенографических
свойств margin и padding, свойство border не может устанавливать различные значения для
отдельных сегментов границы. Чтобы это сделать, необходимо использовать другие свойства
границы, а именно border-top, border-right, border-bottom и border-left.
P {
border: 1px solid red;
}

Можно задавать стили отдельно для верхней, правой, нижней и левой границы, но это редко
используется на практике.

Списки
Свойство list-style-type задает вид маркера элемента списка.
Для определения видов маркеров маркированных списков используются ключевые слова:
• disk — в виде закрашенного круга;
• circle — в виде незакрашенного круга;
• square — в виде закрашенного квадрата;
• none - маркер не используется.
Для нумерованных списков допустимые значения:
• decimal — десятичные числа, начиная с 1;
• lower-roman — римские цифры, представленные строчными буквами латинского алфавита
(i, ii, iii, iv, v и т.д.);
• upper-roman — римские цифры, представленные прописными буквами латинского
алфавита (I, II, III, IV, V и т.д.);
• lower-alpha — строчные буквы в коде ASCII (a, b, с, ..., z).
Свойство list-style-image позволяет в качестве маркера списка указать произвольное
изображение.
Допустим, мы имеем некоторое изображение маркера и хотим, чтобы при создании списка оно
использовалось в качестве маркера. Тогда следует написать такое правило:
UL {
list-style-image: url{marker.gif);
}

Свойство list-style-position позволяет указать положение маркера. Допустимые значения:


•outside — за пределами основного блока элемента списка;
•inside — внутри основного блока списка.

Свойство list-style - стенографическое свойство, позволяющее в сокращенной форме


задать значения свойств list-style-type, list-style-image и list-style-position. Приведем примеры.
Правило
UL {
list-style-type: circle;
list-style-image: url(images/marker2.gif);
list-style-position: inside;
}
можно записать в сокращенном виде:
UL {
list-style: circle url(images/marker2.gif) inside;
}

Таблицы
Свойства CSS могут применяться к таблицам, их строкам и ячейкам для задания свойств
текста и шрифта, управления фоном, полями, границами, размерами и т.п.

Разрешение конфликтов границ


Для различных ячеек, строк или даже групп строк или столбцов таблицы с помощью свойств
CSS могут быть описаны различные границы. Границы смежных ячеек при этом могут различаться по
толщине, стилю и цвету.
Понятно, что вы не станете расцвечивать границы таблиц во все цвета радуги и будете
придерживаться какого-то определенного стиля оформления, единого для всей таблицы. Но тем не
менее нельзя исключить возможности возникновения конфликта. Если он все же возник, можно
использовать два различных механизма его устранения: режим разрешения конфликтов и разделение
границ. Используемый механизм определяется свойством border-collapse, которое допускает два
значения:
• collapse — включается режим разрешения конфликтов;
• separate — между ячейками таблицы добавляется расстояние, чтобы каждая граница
отобразилась отдельно от соседней, в результате чего конфликт просто не возникает.
Механизм разрешения конфликтов представляет собой правило обработки конфликтных
ситуаций с границами. Правило, согласно которому границы отображаются на практике, гласит
следующее: для каждой границы ячейки выбирается тот стиль оформления, который более других
"бросается в глаза", за исключением тех случаев, когда используется тип hidden, который отключает
границу в любом случае.

Элементы DIV и SPAN


До сих пор мы применяли стили CSS к тегам, уже имеющим заранее заданную функцию:
таблицам, заголовкам, параграфам и т.д. Но иногда нужно применить стили к фрагменту
содержимого, не включенного в отдельный тег. Например, выделить фоном несколько слов в тексте.
Теги <DIV>…</DIV> и <SPAN>…</SPAN> используются там, где не подходит никакой
другой тег. Сами по себе они не определяют никакого форматирования, но удобны для привязки к ним
стилей. При этом DIV является блочным элементом, а SPAN – строчным.
Основное различие между блочными и строчными элементами заключается в следующем:
строчные элементы идут друг за другом в строке текста, а блочные – располагаются один под другим. К
строчным элементам относятся такие теги, как <A>, <IMG>, <INPUT>, <SELECT>, <SPAN>,
<SUB>, <SUP> и др. К блочным: <DIV>, <FORM>, <H1>…<H6>, <OL>, <P>, <TABLE>, <UL> и
некоторые другие. Рассмотрим различие на примере. Для тега <SPAN> указано стилевое правило,
задающее цвет фона.
HTML-код:
<SPAN style="background-color: #eeeeee">Строчные элементы</SPAN>
<SUB>располагаются</SUB>в строке<SUP>и идут друг за другом.</SUP>

Виды блоков — свойство display


Поведение каждого блока зависит от его типа, который задается свойством display. Все блоки
можно разделить на структурные и строчные. Свойство display позволяет задать четыре значения:
none, inline, block и list-item.
Значение none отключает отображение блока в окне браузера.
Значение block определяет некий элемент как структурный блок. Многие элементы HTML
по умолчанию определяются именно так — например, заголовки, абзацы, таблицы и др. Однако с
помощью этого объявления можно и любой другой элемент сделать структурным блоком, вопрос
только в том, когда в этом есть необходимость?
Первый случай - это восстановление видимости блока, объявленного как display: none. Второй
случай, когда это может пригодиться, — создание оригинального навигационного меню из ссылок,
каждая из которых будет отдельным структурным блоком.

CSS-свойства: позиционирование. Установка координат элемента

С помощью CSS можно точно задать положение элемента на странице. Режимом


позиционирования управляет свойство position.
Свойство position устанавливает, каким образом вычисляется положение элемента в
плоскости экрана. Существует четыре режима.
position: static – режим по умолчанию, элементы отображаются как обычно – в порядке
следования в коде по правилам HTML.
position: relative – задает относительное позиционирование.
Смещение задается с помощью следующих свойств:
 left — смещение левого края блока от левого края контейнера;
 right — смещение правого края блока относительно правого края контейнера;
 top — смещение верхнего края блока относительно верхнего края контейнера;
 bottom — смещение нижнего края блока относительно нижнего края контейнера.
Значения задаются в единицах длины или процентах относительно высоты (для top и bottom)
или ширины (для left и right) контейнера.
position: absolute – задает абсолютное позиционирование.
Положение блока задается при помощи свойств:
 left — смещение левого края блока относительно левого края контейнера;
 right — смещение правого края блока относительно правого края контейнера;
 top — смещение верхнего края блока относительно верхнего края контейнера;
 bottom — смещение нижнего края блока относительно нижнего края контейнера.
В комбинации со свойством position:absolute эти свойства будут задавать смещение
абсолютно позиционированного блока относительно его контейнера. Контейнером для него может
служить только абсолютно или относительно позиционированный блок, а также само окно браузера.
position: fixed – фиксирует элемент относительно окна. Элемент остается на месте даже при
прокрутке страницы. К сожалению, режим fixed не работает в браузере Internet Explorer версии 6 и
ниже, поэтому пока применять его не рекомендуется.
Любые позиционированные элементы на веб-странице могут накладываться друг на
друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное
экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-
страницы, их размещением по z-оси управляет свойство z-index. Это свойство работает только
для элементов, у которых значение position задано как absolute, fixed или relative.
Элементы с большим z-index накладываются сверху элементов с меньшим z-index. Чтобы в
предыдущем примере первый блок оказался выше второго, необходимо для первого блока задать z-
index, к примеру, равным двум, а для второго – единице.
Плавающие блоки

Ранее мы узнали, что по умолчанию блочные элементы идут строго друг под другом.
Изменить этот порядок можно, сделав элементы «плавающими». Для этого служит CSS свойство
float.
Свойство может принимать следующие значения:
 left — блок перемещается влево. Остальное содержимое документа будет выводиться
вдоль правой стороны блока, начиная с самого верха.
 right — блок перемешается вправо. Остальное содержимое документа выводится
вдоль левой стороны блока, начиная с самого верха.
 none — блок не перемещается (значение по умолчанию).
Говоря о плавающих блоках, необходимо упомянуть также о свойстве clear - свойстве,
позволяющем определенным образом позиционировать плавающие блоки. Допустимые
значения:
 left - блок должен размещаться ниже всех левосторонних плавающих блоков.
 right - блок должен размещаться ниже всех правосторонних плавающих блоков.
 both - блок должен размещаться ниже всех плавающих блоков.
 none - никаких ограничений на положение блока относительно перемещаемых объектов
не накладывается.

При создании сайтов плавающие элементы, свойства float и clear часто используются для
создания “каркаса” страниц сайта.

Основы верстки. Табличная верстка.


Под версткой веб-страницы понимают процесс ее создания путем компоновки текстовых и
графических элементов. При создании дизайна сайта дизайнер разрабатывает макет в
графическом редакторе. Макет является обычным изображением. Поэтому, чтобы
использовать дизайн на сайте, верстальщик «превращает» макет в веб-страницу, где
расположение элементов задается с использованием HTML и CSS.
Как правило, веб-страница представляется как набор прямоугольных блоков.
Наиболее популярными являются трехколоночная и двухколоночная верстки. Разумеется,
существуют и другие варианты компоновки элементов, например в одну колонку.

Фиксированная и нефиксированная верстка


Помимо способа компоновки блоков важнейшей характеристикой страницы является способ
задания ее ширины. Существует два основных подхода:
1. Задание строго фиксированной ширины страницы. В этом случае, если ширина сайта
превышает ширину окна браузера, появится горизонтальная полоса прокрутки. Если же
ширина сайта будет меньше ширины окна, то появится пустое пространство с края страницы.
2. Привязка ширины страницы к ширине экрана. В этом случае размер блоков страницы
пропорционально зависит от размеров экрана. Если окно сужается, то сужаются и блоки. Если
окно растягивается, блоки расширяются. Такая верстка часто называется «резиновой».
Между специалистами ведутся споры, какой из подходов предпочтительнее.
«Растягивающаяся» верстка может адаптироваться под разные разрешения экранов, но, с
другой стороны, на небольшом мониторе блоки страницы могут слишком сузиться, а на
широкоформатном экране – стать слишком широкими. В таких условиях пользователю будет
неудобно читать текст на сайте. Чтобы этого избежать, необходимо задавать минимальную и
максимальную ширину «резиновой» страницы. Поэтому такой способ верстки является
технически более сложным, чем фиксированный.

Совместимость с браузерами
В процессе верстки необходимо добиться корректного отображения сайта в наиболее
популярных браузерах при различных разрешениях экрана. К сожалению, браузеры реализуют
не полностью или неправильно некоторые возможности CSS. Из-за этого разработчикам
сайтов приходится использовать различные приемы, позволяющие создать сайт, одинаково
отображающийся во всех браузерах. Необходимо просматривать страницы в браузерах Internet
Explorer версий 6-8, Mozilla FireFox 3, Opera версии 9 и выше.
Также необходимо предусмотреть работу сайта при различных разрешениях экрана. В
настоящее время практически все пользователи (98%) работают с разрешением экрана
1024×768 и выше. Поэтому максимальная ширина сайта не должна превышать примерно 990
пикселей, т.к. необходимо оставить запас для полосы прокрутки и рамки окна браузера. В
противном случае у пользователя с небольшим экраном появится горизонтальная полоса
прокрутки, что сильно затруднит чтение сайта.
Основными способами верстки является использование таблиц и использование блоков.

Табличная верстка
Наиболее простым способом является верстка таблицами. Идея заключается в том, что все
элементы страницы размещаются в таблице с невидимыми границами.
Основными преимуществами табличной верстки по сравнению с блочной являются простота и
удобство реализации, отсутствие проблем отображения в большинстве браузеров. В качестве
недостатков отмечают увеличение объема HTML кода и более медленную загрузку элементов
страницы. К тому же таблицы изначально создавались для отображения табличных данных, а
не для компоновки страницы. Поэтому при верстке таблицы используются совершенно не по
прямому назначению.

Спецификация CSS предлагает другой инструмент: построение страниц из блочных элементов


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

Блочная верстка
Верстка с помощью блоков является более современной технологией, чем табличная
верстка. Основной идеей блочной верстки является использование элементов DIV и CSS-
стилей.

Тема 8. JavaScript. Программное взаимодействие с HTML-документами на


основе DOM API.

JavaScript – это язык для написания сценариев, разработанный компанией Netscape. При
помощи языка JavaScript мы можем создавать интерактивные Web-страницы наиболее удобным
и эффективным способом. Чтобы запустить программу-скрипт, написанный на JavaScript,
необходим интернет-браузер с активированной способностью распознавать JavaScript.
Сценарий (скрипт, script) – программа, которая расширяет возможности языка HTML. Скрипты
обрабатываются (интерпретируются) браузером одновременно с кодом HTML.

Включение скриптов JavaScript в HTML-страницу


Текст программы на языке JavaScript вставляется непосредственно в файл HTML-страницы
между тегами <SCRIPT> и </SCRIPT>.
Тег <SCRIPT> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут
type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать, но с точки
зрения стандарта его следует указать.
Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом:
<script src="script.js"></script>
При этом файл script.js содержит javascript-код, который иначе мог бы находиться внутри тега
<script>. Это очень удобно, потому что один и тот же файл со скриптами можно подключать
на разных страницах.
Чтобы подключить несколько скриптов - используйте несколько таких тегов:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
Создание переменных
Создать переменную в программе можно несколькими способами:
• С помощью оператора присваивания значений в формате:
имя_переменной = значение
• С помощью ключевого слова var (от variable - переменная) в формате:
var имя_переменной
• С помощью ключевого слова var и оператора присваивания в формате:
var имя_переменной = значение

Строка кода программы с ключевым словом var задает так называемую инициализацию
переменной и для каждой переменной используется один раз. Тип переменной определяется
типом значения, которое она имеет. В отличие от многих других языков программирования, при
инициализации переменной не нужно описывать ее тип. Переменная может иметь значения
различных типов и неоднократно их изменять.
Одно ключевое слово var можно использовать для инициализации сразу нескольких
переменных, как с оператором присваивания, так и без него. При этом переменные и
выражения с операторами присваивания разделяются запятыми, например:
var name = "Вася", address, x = 3.14

Ввод и вывод информации

Вывод информации
Язык JavaScript предоставляет два способа вывода информации.

Метод alert

 С помощью него можно отображать на экране клиентского браузера небольшие по размеру


сообщения - эти сообщения появляются в диалоговой панели, содержащей кнопку Ok. Нажатие
этой кнопки приводит к закрытию диалоговой панели. Мы будем называть такую диалоговую
панель панелью сообщений.
Диалоговое окно, выведенное на экран методом alert(), можно убрать, щелкнув на кнопке ОК.
До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Окна,
обладающие свойством останавливать все последующие действия пользователя и программ,
называются модальными. Таким образом, окно, создаваемое посредством alert(), является
модальным.

Метод write

Данный метод представляется объектом document. Более подробно с объектом document мы


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

Для ввода информации можно воспользоваться двумя стандартными методами - confirm и


prompt. Как и метод alert, рассмотренный выше, эти методы обеспечиваются объектом window,
входящим, как и упоминавшийся здесь объект document, в состав объектной модели браузера.
Но в отличие от методов объекта  document при вызове методов alert, confirm и prompt не
требуется указания имени самого объекта window. 
 
Метод confirm

Метод confirm отображает диалоговую панель, содержащую сообщение и две кнопки - Ok и


Cancel. Нажатие кнопки Ok возвращает значение true, Cancel - false.   Данный метод может
использоваться для получения подтверждений от пользователей либо другой информации,
которая может быть представлена булевым значением true/false. 
 
Метод prompt

Данный метод выводит диалоговую панель, содержащую текст, строку для ввода текста и
кнопки Ok и Cancel. При нажатии кнопки Ok метод prompt возвращает содержимое строки
ввода, при нажатии кнопки Cancel - значение null. Метод prompt имеет два параметра. Первый
задает текст, поясняющий тип информации, которую необходимо ввести, второй - значение по
умолчанию. Второй параметр может быть и пустой строкой - " ". 

Операторы языка JavaScript

Комментарии
Начнем с операторов комментария. Они позволяют выделить фрагмент программы, который не
выполняется интерпретатором, а служит лишь для пояснений содержания программы.
В JavaScript допустимы два вида операторов комментария:
// - одна строка символов, расположенная справа от этого оператора, считается комментарием;
/*...*/ все, что заключено между /* и */, считается комментарием; с помощью этого
оператора можно выделить несколько строк в качестве комментария.
Арифметические операторы
Арифметические операторы в JavaScript могут применяться к данным любых типов:
+ Сложение
- Вычитание
* Умножение
/ Деление
% Деление по модулю
++ Увеличение на 1
-- Уменьшение на 1

Операторы присваивания

Для изменения значения переменной используется оператор присваивания. Оператор


присваивания определяется знаком присваивания (=), слева от которого располагается любая
переменная, а справа - некоторое выражение.
Кроме обычного оператора присваивания «=» имеются еще пять дополнительных операторов,
сочетающих в себе действия обычного оператора присваивания и арифметических операторов:
+-, -=, *=, /=, %=.
Операторы сравнения
В программах часто приходится проверять, выполняются ли какие-либо условия. Проверяемые
условия формируются на основе операторов сравнения, таких как «равно», «меньше»,
«больше» и т. п. Результатом вычисления элементарного выражения, содержащего оператор
сравнения и операнды (сравниваемые данные), является логическое значение, то есть true или
false. Операторы сравнения: = = , !=, >, <, >=, <=.
Сравнивать можно числа, строки и логические значения. Сравнение чисел происходит по
правилам арифметики, а строк - путем сравнения ASCII-кодов символов начиная с левого
конца строк. Логические значения сравниваются так же, как и числа 1 и 0 (true соответствует 1,
a false – 0.
Операторы сравнения могут быть применены и к разнотипным данным. Если сравниваются
строка и число, то интерпретатор приводит операнды к числовому типу. То же самое
происходит при сравнении логических данных и числа.
Логические операторы
Логические данные, обычно получаемые с помощью элементарных выражений, содержащих
операторы сравнения, можно объединять в более сложные выражения. Для этого используются
логические (булевские) операторы - И и ИЛИ, а также оператор отрицания НЕ. Выражения с
логическими операторами возвращают значение true или false.
Логические операторы:
! Отрицание (НЕ)
&& И
|| ИЛИ

Операторы условного перехода


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

Оператор if

Синтаксис оператора if следующий:


if (условие)
{код,который выполняется,если условие выполнено}
else
{код,который выполняется,если условие не выполнено}

В фигурных скобках располагается блок кода - несколько выражений. Если в блоке


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

if (условие)
{код,который выполняется,если условие выполнено}

Оператор switch 

Чтобы избавить Вас от многократного введения операторов if, в JavaScript добавлен оператор
switch.  Он особенно удобен, если требуется проверить несколько условий, которые не
являются взаимоисключающими.
Синтаксис оператора switch выглядит следующим образом:
switch(выражение){
case вариант1: выполнение оператора 1, если выражение равно вариант1
[break]
case вариант2: выполнение оператора 2, если выражение равно вариант2
[break]
. . .
[default: выполнение оператора n, если выражение не соответствует ни одному из
вариантов]
}
Параметр выражение оператора switch может принимать строковые, числовые и логические
значения. Разумеется, в случае логического выражения возможны только два варианта.
Ключевые слова (операторы) break и default не являются обязательными, что отражено с
помощью прямоугольных скобок. Здесь они являются элементами описания синтаксиса, и при
написании операторов их указывать не нужно. Если оператор break указан, то проверка
остальных условий не производится. Если указан оператор default, то следующий за ним код
выполняется, если значение выражения не соответствует ни одному из вариантов. Если все
варианты возможных значений предусмотрены в операторе switch, то оператор default можно не
использовать.
Оператор switch работает следующим образом. Сначала вычисляется выражение, указанное в
круглых скобках сразу за ключевым словом switch. Полученное значение сравнивается с тем,
которое указано в первом варианте. Если они не совпадают, то код этого варианта не
выполняется и происходит переход к следующему варианту. Если же значения совпали, то
выполняется код, соответствующий этому варианту. При этом, если не указан оператор break,
то выполняются коды и остальных вариантов, пока не встретится оператор break. Это же
правило действует и для остальных вариантов.

Операторы цикла

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


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

Оператор for

Структура цикла с параметром:  

for (i=1; i<10; i++){


<тело цикла>
}
Первый параметр (i=1) определяет счетчик и указывает его начальное значение. Второй
параметр (i<10) - это условие, которое должно быть истинным, чтобы цикл выполнялся, как
только условие цикла становится ложным, работа цикла завершается. Третий параметр (i++) -
это оператор, который выполняется при каждом последовательном прохождении цикла. Он
называется выражением инкремента, поскольку в нем задается приращение счетчика
(приращение счетчика в данном случае равно единице). 
 Все операторы, введенные в скобках и составляющие тело цикла, выполняются при каждом
прохождении цикла.
  Замечание: если в теле цикла Вы используете только один оператор, то фигурные скобки
можно не использовать.
Для принудительного выхода из цикла используется оператор break. Если этот оператор
встречается в теле оператора цикла, то цикл сразу же завершается без выполнения
последующих выражений кода в теле и даже выражения обновления. Обычно оператор break
применяется при проверке некоторого дополнительного условия, выполнение которого требует
завершения цикла, несмотря на то, что условие в заголовке цикла еще не выполнено.
Для управления вычислениями в операторе цикла можно также использовать оператор continue.
Так же, как и break, этот оператор применяется в теле оператора цикла вместе с оператором
условного перехода. Однако, в отличие от break, оператор continue прекращает выполнение
последующего кода, выполняет выражение обновления и возвращает вычислительный процесс
в начало оператора цикла, где производится проверка условия, указанного в заголовке.
Цикл с предусловием

Рассмотрим  цикл с предусловием. Данный цикл реализуется оператором while. 


В JavaScript цикл while имеет следующую структуру:

while (логическое выражение){


<тело цикла>
}
Пока значение логического выражения - true (истинно), выполняется тело цикла. Тело цикла
может быть представлено простым или составным оператором. 

Цикл с постусловием
 
JavaScript содержит еще один тип циклов: do . . . while. Цикл  do . . . while - это цикл с
постусловием. Условие в цикле do . . . while располагается после тела цикла.
В JavaScript цикл do . . . while имеет следующую структуру:
do {
<тело цикла>
}
while (логическое выражение)

Так как условие цикла располагается после тела цикла, то цикл будет выполнен по меньшей
мере один раз в отличие от цикла с предусловием (напомним, что цикл с предусловием может
ни разу не выполниться).
Рассмотрим более подробно работу цикла do . . . while.  Сначала выполняется тело цикла, затем
проверяется условие цикла. Если условие истинно, опять выполняется тело цикла. Если условие
цикла ложно, то цикл завершает свою работу. 

Функции

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


обратившись к ней по имени. Взаимодействие функции с внешней программой, из которой она
была вызвана, происходит путем передачи функции параметров и приема от нее результата
вычислений. Впрочем, функция в JavaScript может и не требовать параметров, а также ничего
не возвращать.
В JavaScript есть встроенные функции, которые можно использовать в программах, но код
которых нельзя редактировать или посмотреть. Все, что мы можем узнать о них, - это описание
их действия, параметров и возвращаемого значения.
Кроме использования встроенных функций вы можете создать свои собственные, так
называемые пользовательские функции. Часто используемые фрагменты программного кода
целесообразно оформлять в виде функций. Такой фрагмент кода заключается в фигурные
скобки, а перед ним пишется ключевое слово function, имя функции, за которым следуют
круглые скобки, обрамляющие список параметров.
Чтобы вызвать функцию в программе, следует написать выражение в следующем формате:
имя_функции (параметры)
Если требуются параметры, то они указываются в круглых скобках через запятую. Функция
может и не иметь параметров. В этом случае в круглых скобках ничего не указывается.

 Возвращаемое значение функции

Наряду с функциями, которые, например, отображают на экране сообщения, существуют


функции, возвращающие  в сценарий определенные значения.  Это позволяет использовать
функцию для проведения вычислений.
Функция начинается с ключевого слова function, далее идет название функции и параметры. 
Для того, чтобы возвратить результат в сценарий, содержащий функцию, используется
ключевое слово return.

Встроенные функции

В JavaScript имеются встроенные функции. Рассмотрим некоторые из них.


parseInt(строка, основание) - преобразует указанную строку в целое число в системе счисления
по указанному основанию (8, 10 или 16); если основание не указано, то предполагается 10, то
есть десятичная система счисления.
parseFloat(строка, основание) - преобразует указанную строку в число с плавающей точкой в
системе счисления по указанному основанию (8,10 или 16); если основание не указано, то
предполагается 10, то есть десятичная система счисления.
isNaN(значение) - возвращает true, если указанное в параметре значение не является числом,
иначе - false.
eval(строка) - вычисляет выражение в указанной строке; выражение должно быть написано на
языке JavaScript (не содержит тегов HTML).

Встроенные объекты

Объекты представляют собой программные единицы, обладающие некоторыми свойствами. Об


объекте мы можем судить по значениям его свойств и описанию того, как он функционирует.
Программный код встроенных в JavaScript объектов нам недоступен. Главное для нас сейчас -
усвоить, как пользоваться объектами. Управление веб-страницами с помощью сценариев,
написанных на JavaScript, заключается в использовании и изменении свойств объектов HTML-
документа и самого браузера.
Встроенные объекты имеют фиксированные названия и свойства. Все свойства этих объектов
разделяют на два вида: просто свойства и методы. Свойства аналогичны обычным переменным.
Они имеют имена и значения. Некоторые свойства объектов доступны только для чтения. Это
означает, что их значения нельзя изменять. Другие свойства доступны и для записи - их
значения можно изменять с помощью оператора присваивания. Методы аналогичны функциям,
они могут иметь параметры или не иметь их.
Чтобы узнать значение свойства объекта, необходимо указать имя этого объекта и имя
свойства, отделив их друг от друга точкой: имя_объекта.свойство. Заметим, что объект может и
не иметь свойств.
Мы можем заставить объект выполнить тот или иной присущий ему метод. В этом случае также
говорят о применении метода к объекту. Синтаксис соответствующего выражения такой:
имя_объекта.метод(параметры). Заметим, что объект может не иметь методов.
В свете изложенного выше объект можно понимать как некоторый контейнер, содержащий
переменные-свойства и функции-методы. Разумеется, в этом контейнере есть еще что-то, но
оно скрыто от нас. Мы можем воздействовать на объект только с помощью свойств и методов.
В JavaScript математические вычисления, сложная обработка строк и дат, а также создание
массивов производятся с помощью соответствующих встроенных объектов. Для разработчиков
веб-сайтов особенно важны объекты String (обработка строк), Array (массивы), Math
(математические формулы и константы) и Date (работа с датами). Обратите на них особое
внимание.
Встроенные объекты, как уже отмечалось, имеют фиксированные названия. Объекты с
именами, совпадающими с их фиксированными названиями, называются статическими. Однако
вы можете создать экземпляры (копии) статических объектов, присвоив им свои собственные
имена. Экземпляры статических объектов являются объектами в вашей программе, которые
наследуют от первых все их свойства и методы. Экземпляры объектов - это некоторые частные
воплощения в программе соответствующих статических объектов. Вместе с тем вы можете
использовать и статические объекты в чистом виде, не создавая никаких их копий. Например,
для формульных вычислений используется статический объект Math, а в случае массивов
создаются экземпляры статического объекта Array, содержащие конкретные данные, к которым
применимы все общие методы и свойства статического объекта Array.

Объект String

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

Создание объектов String

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

имя_переменной = new Strin g ( "строковое_значение")

Здесь имя_переменной выполняет роль ссылки на строковый объект. Например, выражение


mystring = new Strin g ("Привет!") создает строковый объект mystring со значением
"Привет!".
Однако можно создать строковый объект и с помощью обычного оператора присваивания:
имя_переменной = "строковое_значение"
или
var имя_переменной = "строковое_значение"
Доступ к свойствам и методам строкового объекта обеспечивается такими выражениями:
строка.свойство
String .свойство
строка.метод([параметры])
String.метод([параметры])

Некоторые методы могут и не иметь параметров, что указано с помощью квадратных скобок.
Здесь строка может быть ссылкой на строковый объект, строковой переменной, выражением,
возвращающим строку, а также просто строковым значением.
Когда используется ключевое слово String в качестве имени объекта, это означает, что нас
интересуют свойства и методы статического строкового объекта, то есть общие свойства и
методы, не связанные, вообще говоря, с конкретными свойствами и методами конкретного
строкового объекта (экземпляра объекта String).

Объединение строк
Для объединения двух и более строк используется оператор конкатенации «+».
Свойства String
Свойство length - определение длины строки (количества символов в строке).

Методы String обработки строк

Метод toLowerCase() переводит строку в нижний регистр (строчные буквы).


Метод toUpperCase() переводит строку в верхний регистр (прописные буквы).
Метод charAt(индекс) возвращает символ, занимающий в строке указанную позицию.
Синтаксис: строка.charAt(индекс)
Возвращает односимвольную или пустую строку.
Индекс первого символа равен 0.
Метод concat(строка) - конкатенация (склейка) строк.
Синтаксис: строка1.concat(строка2)
Возвращает строку.
Этот метод действует так же, как и оператор «+» сложения для строк: к строке строка1
приписывается справа строка2.
Метод charCodeAt([индекс]) преобразует символ в указанной позиции строки в его
числовой эквивалент (код).
Синтаксис: строка.charCodeAt([индекс])
Возвращает число.
Метод fromCharCode(номep1 [, номер2 [, ... номерN]]) возвращает строку символов,
числовые коды которой указаны в качестве параметров.
Синтаксис: String.fromCharCode(номep1 [, номер2 [, ... номерN]])
Возвращает строку.
Метод index0f(строка_поиска [, индекс]) производит поиск строки, указанной параметром, и
возвращает индекс ее первого вхождения.
Синтаксис: строка.index0f(строка_поиска [, индекс])
Возвращает число.
Метод производит поиск позиции первого вхождения строка_поиска в строку.
Возвращаемое число (индекс вхождения) отсчитывается от 0. Если поиск не удачен, то
возвращается -1. Поиск в пустой строке всегда возвращает -1. Поиск пустой строки
всегда возвращает 0.
Второй параметр, не являющийся обязательным, указывает индекс, с которого следует
начать поиск.
Метод lastIndexOf(строка_поиска [, индекс]) - производит поиск строки, указанной
параметром, и возвращает индекс ее первого вхождения; при этом поиск начинается с конца
исходной строки, но возвращаемый индекс отсчитывается от ее
начала, то есть от 0.
Синтаксис: строка.lastIndexOf(строка_поиска [, индекс])
Возвращает число. Метод аналогичен рассмотренному выше index0f() и отличается лишь
направлением поиска.
Метод substring(индекс1, индекс2) возвращает подстроку исходной строки, начальный и
конечный индексы которой указываются параметрами.
Синтаксис: строка. substring (индекс1, индекс2)
Порядок индексов не важен: наименьший из них считается начальным. Отсчет позиций
начинается с начала строки. Первый символ строки имеет индекс 0. Символ, соответствующий
конечному индексу, не включается в возвращаемую строку.
Метод slice(индекс1 [, индекс2]) возвращает подстроку исходной строки, начальный
и конечный индексы которой указываются параметрами, за исключением последнего
символа.
Синтаксис: строка.slice(индекс1 [, индекс2])
Если второй параметр не указан, то возвращается подстрока с начальной позицией индекс1 и
до конца строки. Отсчет позиций начинается с начала строки. Первый символ строки имеет
индекс 0. Если второй параметр указан, то возвращается подстрока исходной строки,
начиная с позиции индекс1 и до позиции индекс2, исключая последний символ. Если второй
параметр отрицателен, то отсчет конечного индекса производится от конца строки.
Метод substr(индекс [, длина]) возвращает подстроку исходной строки, начальный индекс и
длина которой указываются параметрами.
Синтаксис: строка.substr(индекс [, длина])
Если второй параметр не указан, то возвращается подстрока с начальной позицией индекс1
и до конца строки. Отсчет позиций начинается с начала строки. Первый символ строки
имеет индекс 0. Если второй параметр указан, то возвращается подстрока исходной строки,
начиная с позиции индекс 1 и с общим количеством символов, равным длина.
Метод split(разделитель [, ограничитель]) возвращает массив элементов, полученных из
исходной строки.
Синтаксис: строка.split(разделитель [, ограничитель]) Возвращает
массив.
Первый параметр является строкой символов, используемой в качестве разделителя строки
на элементы. Второй необязательный параметр - число, указывающее, сколько элементов
строки, полученной при разделении, следует включить в возвращаемый массив.

Объект Array

Массив - это упорядоченный набор данных. Значениями элементов массива могут быть данные
любого типа, в том числе и массивы. В последнем случае можно говорить о многомерных
массивах (то есть о массивах массивов). Количество элементов в массиве называется длиной
массива. К элементам массива можно обращаться в программе по их порядковому номеру
(индексу). Нумерация элементов массива начинается с нуля, так что первый элемент имеет
индекс 0, а последний - на единицу меньший, чем длина массива.

Cоздание массива

Существует несколько способов создания массива. В любом случае прежде всего


создается новый объект массива с использованием ключевого слова new:
имя_массива = new A r r a y ( [длина_массива])

Если длина массива не указана, то создается пустой массив, не содержащий ни одного


элемента. В противном случае создается массив с указанным количеством элементов,
однако все они имеют значение null (то есть не имеют значений).
Вы можете сначала создать пустой массив, а затем добавить к нему нужное количество
элементов с помощью оператора присваивания. Заметим, что выражение с ключевыми
словами new Array создает экземпляр (копию) объекта Array.
У объекта Array имеется свойство length, значением которого является длина массива.
Чтобы получить значение этого свойства, необходимо использовать выражение
имя_массива.length.
Создав массив, можно присвоить значения его элементам, используя для этого оператор
присваивания.
Другой способ создания массива заключается в непосредственном определении элементов
в круглых скобках за ключевым словом Array.
earth = new Array ("Планета", "24 часа", 6378, 365.25)
JavaScript автоматически создает индексы для элементов массива, так что к элементам массива,
созданного таким способом, также можно обращаться по индексам.
Третий способ создания массива - присвоить имя каждому элементу, подобно имени свойства
объекта.
earth = new А r r а y ( ) // пустой массив
e ar th . xtype = "Планета"
earth. xday = "24 часа"
earth.radius = 6378
earth.period = 365.25
В этом случае обращение к элементу происходит как к свойству объекта, например earth.radius.
Возможен и такой вариант: earth["radius"]. Однако по индексу к элементам в таком массиве
обращаться нельзя.

Свойство length

Свойство length – его значением является длина массива.


Синтаксис: имя_массива.length
Поскольку индексация элементов массива начинается с нуля, индекс последнего элемента на
единицу меньше длины массива.

Методы Array

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


массива.
concat(массив) - конкатенация массивов, объединяет два массива в третий массив.
Синтаксис: имя_массива1.concat (массив2)
Возвращает массив.
join(разделитель) - создает строку из элементов массива с указанным разделителем между ними
(по умолчанию используется символ ","); является строкой символов (возможно, пустой).
Синтаксис: имя_массива.join(строка)
Возвращает строку символов.
рор() - удаляет последний элемент массива и возвращает его значение.
Синтаксис: имя_массива.рор()
Возвращает значение удаленного элемента массива.
Данный метод изменяет исходный массив.
push(значение|объект) - добавляет к массиву указанное значение в качестве
последнего элемента и возвращает новую длину массива.
Синтаксис: имя_массива1.push(значение|объект)
Возвращает число. Данный метод изменяет исходный массив.
shift() - удаляет первый элемент массива и возвращает его значение.
Синтаксис: имя_массива.shift()
Возвращает значение удаленного элемента массива. Данный метод изменяет исходный
массив.
unshift(значение|объект) - добавляет к массиву указанное значение в качестве
первого элемента.
Синтаксис: имя_массива.unshift(значение|объект)
Возвращает: ничего. Данный метод изменяет исходный массив.
reverse() - изменяет порядок следования элементов массива на противоположный.
Синтаксис: имя_массива.reverse ()
Возвращает массив. Данный метод изменяет исходный массив.
slise(индекс1 [, индекс2]) - создает массив из элементов исходного массива
с индексами указанного диапазона.
Синтаксис: имя_массива.slise(индекс1 [, индекс2])
Возвращает массив. Данный метод не изменяет исходный массив.
Второй параметр (конечный индекс) не является обязательным, о чем свидетельствуют
квадратные скобки в описании синтаксиса. Если он не указан, то создаваемый массив
содержит элементы исходного массива, начиная с индекса индекс1 и до конца. В
противном случае создаваемый массив содержит элементы исходного массива начиная
с индекса индекс1 и до индекса индекс2, за исключением последнего. При этом
исходный массив остается без изменений.
sort([функция_сортировки]) - сортирует (упорядочивает) элементы массива с помощью
функции сравнения.
Синтаксис: имя_массива. sort([функция_сравнения])
Возвращает массив. Данный метод изменяет исходный массив. Параметр не обязателен.
Если параметр не указан, то сортировка производится на основе сравнения ASCII-кодов
символов значений. Это удобно для сравнения символьных строк, но не совсем подходит
для сравнения чисел. Так, число 357 при сортировке считается меньшим, чем 85, поскольку
сначала сравниваются первые символы и только в случае их равенства сравниваются
следующие, и т. д. Таким образом, метод sort() без параметра подходит для простой
сортировки массива со строковыми элементами.

Объект Math

Объект Math предназначен для хранения некоторых математических констант (например, число
) и выполнения преобразований чисел с помощью типичных математических функций. Доступ
к свойствам и методам объекта Math обеспечивается следующими выражениями:
Math.свойство
Math.метод(параметры)

Свойства Math

Свойства объекта Math имеют в качестве своих значений математические константы.


F Постоянная Эйлера
LN10 Значение натурального логарифма числа 10
LN2 Значение натурального логарифма числа 2
LOG10E Значение десятичного логарифма экспоненты (числа в)
LOG2E Значение двоичного логарифма экспоненты
PI Значение постоянной 
SQRT1_2 Значение квадратного корня из 1/2
SQRT2 Значение квадратного корня из 2
Для вычисления длины окружности при известном радиусе требуется число , которое можно
взять как свойство объекта Math.
var R = 10 // радиус окружности
circus = 2*R*Math.PI // длина окружности

Методы Math

• abs(число) - возвращает модуль (абсолютное значение) числа;


• асоs(число) - возвращает арккосинус числа;
• аsin(число) - возвращает арксинус числа;
• аtаn(число) - возвращает арктангенс числа;
• atan2(x, у) - возвращает угол в полярных координатах точки;
• сеil(число) - округляет число вверх до ближайшего целого;
• соs(число) - возвращает косинус числа;
• ехр(число) - возвращает число е в степени число;
• flооr(число) - округляет число вниз до ближайшего целого;
• 1оg(число) - возвращает натуральный логарифм числа;
• mах(число1,число2) - возвращает большее из чисел число1, число2;
• min(число1,число2) - возвращает меньшее из чисел число1, число2;
• рow(число1,число2) - возвращает число1 в степени число2;
• random() - возвращает случайное число между 0 и 1;
• rоund(число) - округляет число до ближайшего целого;
• sin(число) - возвращает синус числа;
• sqrt(число) - возвращает квадратный корень из числа;
• tan(число) - возвращает тангенс числа.

Объект Date  

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

z=new Date()
z=new Date("Месяц дд, гггг чч:мм:сс")
z=new Date("Месяц дд, гггг")
z=new Date (гг,мм, дд, чч, мм,сс)
z=new Date(гг, мм, дд)
z=new Date (миллисекунды)

Месяц указывается в виде полного его английского названия (аббревиатуры не допускаются).


Для чтения и изменения информации о дате и времени, хранящейся в объекте даты, служат
методы объекта Date. 
Для установки значения элементов объекта Date используется набор методов set:
 setDate() - устанавливает день месяца 
 setMonth() - устанавливает месяц, месяц определяется числом в диапазоне от 0 до 11
 setYear() - устанавливает год
 setTime() - устанавливает время (и дату), отсчитанное в миллисекундах от начала
первого января 1970 года  
 setHours(), setMinutes(), setSeconds() - устанавливает время
Метод get используется для получения значений, сохраненных в объекте Date:
 getDate() - возвращает день месяца
 getMonth() - возвращает месяц
 getYear() - возвращает год
 getTime() – возвращает время, отсчитанное в миллисекундах от начала первого января
1970 года
 getHours(), getMinutes(), getSeconds() - возвращает время

Обработка событий

Одним из главных назначений сценариев в HTML-документе является обработка событий,


таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на
элемент, перемещение указателя с элемента, нажатие клавиши и т.п. Большинство тегов HTML
имеют специальные атрибуты, определяющие события, на которые могут отреагировать
соответствующие элементы. События называются довольно просто, например, щелчок левой
кнопкой мыши - onclick; изменение в поле ввода данных - onchange; событие onmouseover
происходит, когда указатель мыши помещается на элемент HTML-документа. Значением таких
атрибутов-событий в тегах HTML является строка, содержащая сценарий, выполняющий роль
обработчика события.
Рассмотрим пример, в котором мы опишем форму, в которой имеется кнопка.
Инструкция onClick=”alert(‘Выполняется сценарий JavaScript’)” определяет то действие,
которое будет выполнено при щелчке на кнопке. Если происходит событие Click, то компьютер
выполняет инструкцию alert(‘Выполняется сценарий JavaScript’).
<form>
<input type=”button” value=”щелкни здесь” onClick=”alert('Выполняется
сценарий JavaScript ')”>
</form>

Для одного и того же элемента можно определить несколько событий, на которые он будет
реагировать. Итак, значением атрибута-события, как уже отмечалось, является код сценария,
заключенный в кавычки. Этот сценарий называют также обработчиком события. Если
обработчик события содержит несколько выражений, то они разделяются точкой с запятой.
Обычно обработчики событий оформляются в виде функций, определения которых помещают в
контейнерный тег <SCRIPT>.
Если сценарий обработки события небольшой и используется в HTML-документе один раз, то
целесообразно оформлять его непосредственно в виде значения атрибута-события. В других
случаях предпочтителен вариант оформления обработчика в виде функции.

Объектная модель DOM

HTML-документ отображается в окне браузера. Окну браузера соответствует объект window, a


HTML-документу, загруженному в окно, соответствует объект document. Эти объекты содержат
в своем составе другие объекты. В частности, объект document входит в состав объекта window.
Элементам HTML-документа соответствуют объекты, которые входят в состав объекта
document. Все множество объектов имеет иерархическую структуру, называемую объектной
моделью документа (DOM).
Напомним, что объект представляет собой своего рода контейнер для хранения информации.
Он характеризуется свойствами, методами, а также событиями, на которые может реагировать.
Доступ к свойствам и методам объекта осуществляется с помощью выражений вида:
объект.свойство
объект.метод()
Объект, содержащий в себе другой объект, называют родительским. Объект, который содер-
жится в каком-нибудь объекте, называют дочерним по отношению к нему. Таким образом,
устанавливается иерархия. Чтобы указать конкретный объект, требуется перечислить все
содержащие его объекты, начиная с объекта самого верхнего иерархического уровня, подобно
тому, как указывается полный путь к файлу на диске:
объект1.объект2. . . . объектN
В объектной модели документа объекты сгруппированы в так называемые коллекции.
Коллекция является массивом объектов, отсортированных в порядке упоминания соответству-
ющих им элементов в HTML-документе. Индексация объектов в коллекции начинается с нуля.
Синтаксис обращения к элементам коллекции такой же, как к элементам массива. Коллекция
имеет свойство length - количество всех ее элементов. Так, например, коллекция всех объектов
графических изображений в документе называется images, коллекция всех форм - forms,
коллекция всех ссылок - links. Это примеры так называемых частных или тематических
коллекций. Кроме них имеется коллекция всех объектов документа, которая называется all.
Рассмотрим способы обращения к свойствам объектов документа. Общее правило заключается
в том, что в ссылке должно быть упомянуто название коллекции. Далее, если речь идет о
документе, загруженном в текущее окно, то объект window можно не упоминать, а сразу
начинать с ключевого слова document. Возможны несколько способов обращения к объектам
документа:
 document.коллекция.id_объекта;
 document.коллекция["id_объекта"];
 document.коллекция[индекс_объекта].

Здесь id_oбъектa - значение атрибута ID (идентификатора) в теге, который определяет


соответствующий элемент в HTML-документе. Этот атрибут принимает любые строковые
значения, которые играют роль индивидуальных имен элементов в их объектном
представлении. Величина индекс_объекта - целое число, указывающее порядковый номер
объекта в коллекции. Первый объект в коллекции имеет индекс 0.
 Коллекция all  может использоваться, например, для получения полного списка тегов,
составляющих данный документ.

Формы
Формы считаются одними из самых используемых элементов Web - страниц. Формы - это
бланки, в которых предусмотрены поля для ввода пользователями необходимой информации.
Информация, вводимая посредством форм, как правило, отсылается на сервер для обработки
или посылается по электронной почте. Напомним немного о формах: для создания формы
используется тег <FORM> и парный ему тег </FORM>, а также ряд тегов <INPUT>. Каждый
элемент, позволяющий вводить данные, имеет атрибут VALUE, в котором хранятся данные,
введенные пользователем.

Использование объекта form

Каждая форма на странице HTML представляется отдельным объектом form. Для задания
формы можно использовать массив forms. Этот массив содержит столько элементов, сколько их
есть в форме. Все элементы проиндексированы, начиная со значения 0. Например, к  первой
форме документа, имеющей название form1, можно обратиться одним из двух способов:
  document.form1
  document.forms[0]

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


 action - соответствует атрибуту формы ACTION или программе, в которую
отправляются данные, введенные в форму;
 length - указывает количество элементов в форме;
 method - определяет метод, используемый для отправки данных - GET или POST;
 target - определяет  окно, в котором будут отображаться результаты обработки 
введенных в форму данных.

Управление текстом в формах

 focus() - определяет расположение курсора в поле и выделяет текущее поле


 blur() - удаляет курсор из поля
 select() - выделяет поле подобно тому, как это делает пользователь мышью. Выделяет
текст в поле. Не позволяет выделить часть текста
Обработчики событий:
 onFocus - это событие происходит при определении расположения курсора в поле
 onChange - происходит при изменении пользователем значения в поле
 onSelect - происходит при выделении пользователем части или всего текста в
текстовом поле
Объект Window

Загрузка в браузер HTML-документа приводит к тому, что в браузере создается иерархическая


объектная модель этого документа, на самом верхнем уровне которой находится объект
window. Доступ к свойствам и методам данного объекта имеет уже знакомый вам синтаксис:
window.свойство
window.метод([параметры])
У объекта window имеется синоним self, используемый при обращении к окну, содержащему
текущий документ. Иначе говоря, идентификатор self применяется в многооконных системах,
когда требуется указать окно с документом, в котором находится данный сценарий. Его
рекомендуется вставлять, чтобы не запутаться. При запуске сценария в ссылках на объекты
только текущего документа идентификаторы window и self можно опускать.
У объекта window есть ряд подобъектов. Объект location, содержит информацию, полезную для
работы в сети. Кроме этого, свойство href объекта location используется для загрузки документа
в текущее окно:
window.location.href = "URL-адрес документа"

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

Создание новых окон: одно из назначений объекта окна - это создание нового окна. Новое
окно браузера создается с помощью метода window.open(). Метод window.open() имеет ряд
дополнительных аргументов, которые позволяют задать местоположение окна, его размер и
тип, а также указывают, должно ли окно иметь полосы прокрутки, полосу команд и т. п.
Помимо этого можно задавать и имя окна.
В общем виде данный метод можно представить следующим образом:
nw=window.open('URL', 'NAME', 'PARAMETR')
Рассмотрим подробнее:
 Переменная nw сохраняет данные нового объекта window. Ее имя можно использовать с
методами и свойствами созданного объекта window. 
 Первый параметр метода window.open() - это URL  документа, загружаемого в окне. Если
его не заполнить, то окно останется пустым. 
 Второй параметр определяет имя окна (NAME). Это имя используется в качестве
значения параметра TARGET у тегов <FORM> и <A>.
 Третий параметр представляет список необязательных опций, разделенных запятой. С их
помощью Вы определяете вид нового окна: наличие в нем панелей инструментов, строки
состояния и других элементов.
 
Временные задержки

JavaScript содержит специальные функции, позволяющие задать временную задержку. Для


этого используется метод window.setTimeout(). Данный метод определяет временную задержку
перед выполнением указанной команды.
Временная задержка не вызывает прекращение выполнения сценария. Во время ожидания
наступления момента выполнения необходимой команды браузер продолжает совершать
другие действия, для которых временная задержка не определена. 
Временная задержка начинает работу при вызове метода setTimeout(). Он имеет два параметра:
первый - это оператор JavaScript (или группа операторов), заключенный в скобки. Второй
параметр - это время задержки в миллисекундах (тысячных долях секунды). Приведем пример :
z=window.setTimeout("alert('Ваше время истекло')", 5000) В данном примере задана
команда отображения предупреждения с задержкой в 5 секунд.
Замечание: подобно обработчикам событий, операторы временной задержки используют
кавычки для выделения выполняемых операций. Поэтому, при введении текстовых значений в
этих операторах используйте одинарные кавычки (апострофы).
 
Для выполнения действий, повторяющихся с определенным интервалом времени, используется
метод window.setInterval(). 
Методы window.clearTimeout() и window.clearInterval() отменяют действия методов
window.setTimeout() и window.setInterval()

Отображение диалоговых панелей

Объект window использует три метода отображения сообщений. Данные методы мы с Вами уже
рассматривали:
  метод alert()
  метод confirm()
  метод prompt()

Модальные диалоговые панели

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


window.showModalDialog() В общем виде данный метод выглядит следующим образом:
  d=window.showModalDialog('URL','ARG','PARAMETR')
где
 URL - адрес диалоговой панели. Указание пустой строки (' ') недопустимо;
 ARG - необязательный список аргументов любого типа;
 PARAMETR - необязательный список параметров.

Объект document

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


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

Свойство Описание
bgColor цвет фона документа
fgColor цвет текста документа
linkColor цвет гиперссылки
alinkColor цвет активной гиперссылки
vlinkColor цвет ранее посещавшейся гиперссылки
 
Методы объекта document

Коллекция all

Объект document имеет ряд методов, которые можно разделить на две категории - методы
общего назначения и командные методы. Мы рассмотрим методы общего назначения. 
Методы общего назначения:

Метод Описание
open()  открывает поток вывода или новое окно браузера
write()  выводит указанный текст в окно браузера
 выводит указанный текст в окно браузера; в конце выводится
writeln()
символ "возврат каретки"
close()  закрывает поток вывода
clear()  очищает содержимое выбранной области
 
С методом write() мы уже неоднократно сталкивались. Метод writeln() отличается от write()
только тем, что вывод с его помощью завершается символом "возврата каретки". 
 Коллекция all  - это коллекция всех тегов и элементов, расположенных в теле документа. Она
может использоваться несколькими способами. Например, для получения полного списка тегов,
составляющих данный документ.

Тема 9. Разработка сценариев на PHP.

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

PHP отличается от других подобных языков, типа клиентского JavaScript, тем, что код
выполняется на сервере. Таким образом клиент получит результат работы PHP-скрипта, не имея
возможности определить, каков был исходный код. Вы также можете сконфигурировать ваш
web-сервер таким образом, чтобы он обрабатывал все ваши HTML-файлы с помощью PHP, и
реально пользователь не будет иметь способа определить, что у вас "в рукаве".
PHP в основном сориентирован на серверный скриптинг, поэтому может делать всё то, что
делают CGI-программы: сбор данных форм, динамическую генерацию содержимого страницы
или приём и отправку cookies. Но PHP может намного больше.

Скрипты PHP применяются в трёх основных сферах.

o Серверный скриптинг. Это наиболее традиционная и главная сфера применения PHP.


Для выполнения этой работы вам нужны три вещи. Разборщик кода PHP (CGI или серверный
модуль), web-сервер и web-браузер. Сервер должен быть запущен и должен иметь соединение с
инсталированным PHP. Вы можете получить вывод PHP-программы в web-браузер,
просматривая PHP-страницу на сервере.
o Скриптинг командной строки. Вы можете создать и запустить PHP-скрипт на
выполнение без сервера или браузера. Для этого необходим только разборщик PHP. Этот тип
использования идеально подходит для регулярного выполнения скрипта с помощью cron (в
Unix или Linux) или Task Scheduler (в Windows). Эти скрипты можно использовать также для
задач простейшего текстового процессинга/обработки.
o Клиентские GUI-приложения. PHP, возможно, не самый лучший язык для написания
оконных приложений, но, если вы знаете PHP очень хорошо и хотели бы использовать
некоторые продвинутые возможности PHP в клиентских приложениях, вы можете также
использовать PHP-GTK для создания таких программ. У вас имеется также возможность
создавать межплатформенные приложения. PHP-GTK является расширением PHP,
отсутствующим в основном дистрибутиве.

PHP может использоваться на всех крупных операционных системах (ОС), включая Linux,
многие варианты Unix (HP-UX, Solaris и OpenBSD), Microsoft Windows, Mac OS X, RISC OS и,
возможно, другие. PHP имеет поддержку для большинства существующих web-серверов. Это
Apache, Microsoft Internet Information Server, Personal Web Server, Netscape и iPlanet-серверы,
Oreilly Website Pro, Caudium, Xitami, OmniHTTPd и многие другие. Для большинства этих
серверов PHP имеет модули. В других, поддерживающих стандарт CGI, PHP может работать
как CGI-процессор.

В PHP вы не имеете ограничений в выводе HTML. PHP может выводить изображения, PDF-
файлы и даже клипы Flash (используя libswf и Ming), генерируемые на лету. Вы также легко
можете выводить любой текст, включая XHTML, и любой другой XML-файл. PHP может
автоматически генерировать эти файлы и сохранять их в файловой системе, вместо их
распечатки, формируя серверный кэш для вашего динамического содержимого.

Одна из наиболее сильных и привлекательных черт PHP - поддержка им большого количества


баз данных (БД). Создать web-страницу, работающую с БД, невероятно легко. В настоящее
время поддерживаются следующие БД:

Oracle (OCI7 и
Adabas D Ingres
OCI8)

dBase InterBase Ovrimos

Empress FrontBase PostgreSQL

FilePro (read-
mSQL Solid
only)
Direct MS-
Hyperwave Sybase
SQL

IBM DB2 MySQL Velocis

Informix ODBC Unix dbm

PHP поддерживает взаимодействие с другими службами по таким протоколам, как LDAP,


IMAP, SNMP, NNTP, POP3, HTTP, COM (под Windows) и множество других. Вы можете также
открыть обычный сетевой сокет и взаимодействовать с использованием любого другого
протокола.

PHP имеет предельно удобные возможности для работы с текстом, от POSIX Extended или
регулярных выражений Perl до разбора документов XML. Для разбора и доступа к XML-
документам мы поддерживаем стандарты SAX и DOM. Вы можете использовать наше XSLT-
расширения для трансформации XML-документов.

При использовании PHP в области электронной коммерции вы можете использовать функции


Cybercash-платежей, CyberMUT, VeriSign Payflow Pro и CCVS для ваших online-программ
платежей.

Объединение с HTML

Когда интерпретатор PHP анализирует код страницы, он игнорирует текст файла до тех пор,
пока он не встретит один из специальных тегов, которые указывают следующие за ними
инструкции воспринимать как PHP код. Эти инструкции он будет исполнять до тех пор, пока не
встретится закрывающий тег, сигнализирующий о завершении инструкций PHP. Этот механизм
позволяет внедрять PHP-код в HTML: всё за пределами тэгов PHP остаётся без изменений, а
внутри тэгов - разбирается как код.

Существует четыре способа пометить блок PHP команд. Но только два (<?php ?> и <SCRIPT
language="php"></SCRIPT>) могут применяться всегда; два других могут запрещаться в файле
настроек php.ini. Хотя остальные способы могут быть более удобны при написании, они менее
переносимы, чем эти два. Также, если вам необходима совместимость с XML или XHTML, вам
придется использовать форму ввода для того, чтобы документ XML был верным.

Вот список способов, которыми можно PHP код в HTML документ:

1.<?php
echo("Для XHTML и XML документов используйте эту форму\n");
?>
2.<?
echo ("Это самый простой способ\n");
?> или
<?= выражение ?> сокращение от "<? Echo выражение ?>"
3.<script language="php">
echo ("Еще одна форма ввода");
</script>
4. <% 
echo ("Можно использовать теги в стиле ASP");
%>
    <%= $variable; # Сокращение от "<% echo . . . %>"
Способ номер 1 самый предпочтительный, так как он будет работать в любых интерпретаторах
и только его можно использовать в XML и XHTML.
Способом номер 2 не всегда можно воспользоваться, так как он работает только если значение
параметра short_open_tag в файле php.ini равен on или интерпретатор скомпилирован с
командой --enable-short-tags. Однако, даже если эта форма и разрешена, ее использование
нежелательно.
Способ номер 4 будет работать, если значение переменной настроек asp_tags равна on.
Поддержка asp тегов появилась в PHP 3.0.4.
Примечание: использование сокращённых тэгов должно быть исключено при разработке
приложений или библиотек, предназначенных для распространения или при публикации на
PHP-серверы, которые вами не контролируются, поскольку сокращённые тэги могут не
поддерживаться на целевом сервере. Для обеспечения переносимости и распространения кода
не используйте сокращённые тэги.
Разделение инструкций
Инструкции разделяются так же, как в Си или в Перле - завершая каждую инструкцию точкой с
запятой. Закрывающий тег автоматически вставляет точку с запятой, поэтому следующие
фрагменты идентичны:
<?php
echo "This is a test";
?>
<?php echo "This is a test" ?>

Комментарии
PHP поддерживает комментарии, используемые в Си, Си++, а также комментарии, командной
оболочки Юникс:
<?php
  echo "Это тест"; 
// Это строковый комментарий в стиле c++
/* Это многостроковый комментарий
  еще одна строка */
# Комментарий командной оболочки Юникс
?>
Однострочные комментарии действуют либо до конца строки, либо до конца блока инструкций
PHP:
Следите, чтобы многострочные комментарии не были вложены:
<?php
/*
echo "Это тест";
/* Вложенный комментарий вызовет неприятности */
*/
?>

Выражения

Выражения - самые важные строительные камни PHP. Практически все, что вы пишете в ваших
скриптах - выражения. Пожалуй, наиболее точным определением выражения будет «все, что
может принимать какое-нибудь значение».
Самая основная форма выражений - переменные и константы. Если выпишете "$a = 5", вы
присваиваете переменной $a значение '5'. Здесь у '5', очевидно, значение 5; или, другими
словами, '5' - выражение со значением 5 (в данном случае это целочисленная константа).
После этого присваивания значением $a будет тоже 5, а если вы напишете $b = $a, то результат
будет такой же, как если бы вы написали $b = 5. Другими словами, $a - выражение со
значением 5. Если код написан правильно, то все будет работать именно так.
Несколько более сложные примеры для функций. Например, разберем такую функцию:
<?php
  function foo()
 {
    return 5;
  }
?>
Если вы предположите, что написать $c = foo() будет то же самое, что и написать $c = 5, то вы
будете правы. Функция - это выражение, значение которого равно возвращаемому функцией
значению. Таким образом, в данном случае значение выражения 'foo()' будет рано 5. Как
правило, функции не только возвращают значение, но и подсчитывают что-то.
Конечно, значения в PHP могут быть не только целочисленными, и очень часто это не так. PHP
поддерживает три типа скалярных значений: целочисленные значения (integer), числа с
плавающей запятой (float) и строковые значения (string). Скалярные значения - это значения,
которые нельзя разделить на более мелкие части, как, например, массивы. PHP поддерживает
два нескалярных (составных) типа значений: массивы и объекты. Значение любого из типов
может быть присвоено переменной или возвращено функцией.
PHP выражения могут гораздо больше, как во многих других языках. PHP - ориентированный
на выражения язык, так как практически все в нем - выражения. Возьмем приведенный выше
пример, '$a = 5'. Здесь легко увидеть два значения, значение целочисленной константы '5' и
значение переменной $a. Но есть и еще одно значение - это само значение присвоения.
Присвоение вычисляется в зависимости от присеваемого значения. На практике это означает,
что '$a = 5' - выражение со значением 5. Таким образом, выражение '$b = ($a = 5)' - то же самое,
что и '$a=5; $b=5' (точка с запятой означает конец инструкции). Так как присвоение происходит
справа налево, можно вполне написать '$b = $a = 5'.
Еще одной хорошей иллюстрацией к порядку выполнения выражений является пред- и пост-
инкрементные и декрементные выражения. Пользователи PHP и многих других языков уже
знакомы с конструкциями переменная++ и переменная--. Это и есть операторы инкремента и
декремента. В PHP инструкция '$a++' не имеет значения (то есть не является выражением), то
есть вы не можете присваивать или использовать каким-либо образом. В PHP расширены
возможности инструкций инкрементов-декрементов - теперь они являются выражениями, как в
C. В PHP есть два типа инкремента - прединкремент и пост инкремент. Оба увеличивают
значение переменной на единицу - для переменной разницы между ними нет. Отличаются они
значением выражения (а не переменной). Значение выражения прединкремент (++$var)
равняется значению переменной (переменная увеличивается перед тем, как берется ее значение,
поэтому инструкция называется прединкремент). Постинкремент (записывается $var++)
вычисляется по значению переменной до того, как она была увеличена.
Очень распространенный тип выражений - инструкции сравнения. Эти выражения вычисляются
до 0 или 1 (что означает FALSE и TRUE соответственно). PHP поддерживает > (больше чем),
>= (больше или равно), == (равно), != (не равно), < (меньше) и <= (меньше или равно). Больше
всего эти выражения встречаются внутри условных блоков инструкций (таких как инструкция
if).
Последним примером выражений, который мы приведем здесь, будут комбинированные
выражения оператор-присвоение. Вы уже знаете, что если вы хотите увеличить значение
переменной на единицу, то можно просто написать '$a++' или '++$aa'. А что если вы хотите
прибавить больше, чем 1, например, 3? Можно написать '$a++' три раза, но это не будет ни
эффективным, ни удобным. Чаще пишут '$a = $a + 3'. Здесь вычисляется значение переменной
$a, увеличивается на 3 и результат выражения присвоется переменной $a. Это же выражение
можно написать короче: '$a += 3' (к текущему значению переменной $a добавить 3). В точности
происходят такие операции: берется текущее значение переменной, прибавляется значение, а
потом полученный результат присваивается той же переменной. Такая запись короче и
понятнее, и к тому же вычисляется быстрее. Такую запись, как и любое другое выражение,
можно присваивать. Обратите внимание, что это НЕ число 3, а комбинированное значение
'$a+3'. Любой оператор с двумя операндами может быть использован в комбинации оператор-
присвоение, например '$a -= 5' (уменьшить значение переменной $a на 5), '$b *= 7' (увеличить
значение переменной $b в 7 раз) и так далее.

Введение в типы данных

PHP поддерживает четыре простых типа переменных...:

 Булевы (boolean);
 Целочисленные (integer);
 Численные с плавающей точкой (float);
 Строки (string);

...два составных типа...:

 Массивы (array);
 Объекты (object);

...и, наконец, два специальных:

 Указатели на ресурс (resource);


 Ноль (NULL);

В руководстве часто встречается тип данных mixed. Этот псевдо-тип означает, что вместо него
могут применяться несколько типов данных.
Программист обычно не указывает тип переменных, так как интерпретатор определяет его во
время выполнения кода, исходя из контекста.
Если вы хотите определить тип и значение определенного выражения, используйте функцию
Var_Dump(). Если вы хотите более удобное представление кода, используйте функцию
GetType(). Для проверки принадлежности выражения к какому-либо определенному типу
данных, используйте семейство функций Is_Type().
Если вы хотите изменить тип переменной, используйте явное преобразование типов или
функцию SetType().
Булевы переменные

Синтаксис
Самый простой тип. Может принимать значения только «Истина» (True) или «Ложь» (False).
Появился в PHP 4.
Для того, чтобы определить булеву переменную, используйте ключевые слова True или False,
оба нечувствительны к регистру:

<?php
  $foo = True; 
?>

Чаще всего этот тип применяется в операторах, которые возвращают булево значение и затем
передают его значение управляющим структурам:

   // А так делать необязательно...


  if ($show_separators == TRUE) 
    echo "<hr>\n";
    // ...потому что проще так:
  if ($show_separators) 
    echo "<hr>\n";

Преобразование к булеву типу


Для явного преобразования к булеву типу можно использовать выражения (bool) и (boolean).
Однако, в большинстве случаев это не понадобится, так как значение будет автоматически
преобразовано, если оператор, функция или управляющая структура требует булево значение.
Во время преобразования к булеву типу Ложью будут считаться следующие значения:

 Булево значение False;


 Целочисленный ноль (0);
 Ноль с плавающей запятой (0.0);
 Пустая строка или строка «0»;
 Массив с нулевым количеством элементов;
 Объект с нулевым количеством элементов;
 NULL (в том числе непроинициализированные переменные).

Остальные значения будут считаться Истиной.


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

Синтаксис
Тип integer может быть представлен в десятичной (decimal, 10-based), шестнадцатеричной
(hexadecimal, 16-based) или восьмеричной (octal, 8-based) системах счисления, с
необязательным знаком впереди.
Если вы хотите представить число в восьмеричной системе счисления, поставьте перед этим
числом 0, а в случае шестнадцатеричной системы счисления - 0x.

<?php
  $a = 1234; # десятичное число
  $a = -123; # отрицательное число
  $a = 0123; # восьмеричное число (десятичное 83)
  $a = 0x1A; # шестнадцатеричное число (десятичное 26)
?>

Границы принимаемых значений зависят от платформы, обычно это чуть больше 2 миллиардов
(2147483647, т.е. 32 бита, из которых один отводится на знак числа, беззнаковые integer не
поддерживаются ).
Переполнение integer
Если переменная типа integer выходит за границы типа, то эта переменная будет
рассматриваться как float, так же, как и результат операций.
Преобразование к типу integer
Для явного преобразования к типу integer используйте операторы (int) или (integer). В
большинстве случаев число будет автоматически преобразовано автоматически, если оператор,
функция или управляющая структура требуют в качестве аргумента значение типа integer.
Из типа boolean:
FALSE превратится в 0, а TRUE - в 1.
Из типа float:
Дробная часть значения float игнорируется. Если значение float выходит за границы значений
типа integer (обычно ±2.15e+9 = 2^31), результат будет неопределенным, так как тип float не
имеет нужной точности для того, чтобы выдать верный результат. И никакого предупреждения
или замечания выдано не будет!
Никогда не приводите заранее неизвестную дробь к типу integer, так как иногда это может
привести к неожиданным результатам:
<?php
echo (int) ( (0.1+0.7) * 10 ); // выведет 7!
?>

Из типа string
Преобразование из прочих типов данных в integer неопределено. Сейчас переменные
преобразуются так же, как если бы их сначала преобразовывали к типу boolean. Но, в любом
случае, не полагайтесь на это, так как никаких сообщений о возможных заменах не будет.
Числа с плавающей запятой

Синтаксис
Числа с плавающей запятой (также известны как floats, doubles, real numbers) могут
определяться любым из следующих вариантов:

<?php
  $a = 1.234;
  $b = 1.2e3;
  $c = 7E-10;
?>

Размер типа float зависит от конкретной платформы, обычно же максимум составляет ≈1.8e308
с точностью 14 десятичных цифр (64 битный формат IEEE).
Точность переменных типа float
Часто при преобразовании в integer даже простых чисел типа float нельзя обойтись без
некоторой потери точности. Результаты могут быть весьма удручающими, например
floor((0.1+0.7)*10) обычно возвращает 7 вместо ожидаемых 8, так как внутреннее
представление результата до округления будет примерно 7.9999999999...
Это связано с тем фактом, что невозможно представить некоторые дроби в десятичном виде
конечным числом цифр. Например, 1/3 в десятичном представлении будет 0.333333333333...
Поэтому никогда не доверяйте дробным числам в результате и никогда не сравнивайте
переменные типа float на эквивалентность. Если нужна высокая точность, используйте
математические функции произвольной точности или функции gpm.

Строки

Синтаксис
Строка - последовательность символов. В PHP символ - то же самое, что и байт, то есть 256
разных символов. Это означает, что встроенной поддержки Unicode в PHP нет.
Никаких проблем не возникнет, если размер строки будет очень большой. PHP его никак не
ограничивает, так что беспокоиться нет причины.
Строка может быть определена тремя способами:

 В одинарных кавычках
 В двойных кавычках
 Во встроенном документе (here-document)

Строка в одинарных кавычках


Самый простой способ определить строковую переменную - заключить ее в одинарные кавычки
(символ ').
Для того, чтобы поместить в строку одинарную кавычку, надо перед ней вставить обратный
слеш (символ \). А если в строке понадобится обратный слеш, просто продублируйте его. Если
после обратного слеша следует другой символ, то напечатаются оба! Так что чаще всего
дублировать обратный слеш не приходится. В PHP 3 в подобных случаях будет выдано
предупреждение на уровне E_NOTICE.
В одинарных кавычках переменные не будут интерполироваться (то есть подставляться их
значение на место их имени). Для подобных целей используйте другие способы определения
строк.
<?php
echo 'this is a simple string';
echo 'Текст можно размещать
на нескольких строках';
echo 'Arnold said: "I\'ll be back"'; // "I'll be back"
echo 'Are you sure you want to delete C:\\*.*?'; // delete C:\*.*?
echo 'Are you sure you want to delete C:\*.*?'; // delete C:\*.*?
echo 'I am trying to include at this point: \n a newline';
// this point: \n a newline
?>
Строка в двойных кавычках
Первое отличие от строки в одинарных кавычках - это то, что в ней могут встречаться больше
управляющих символов.
Управляющий символ Значение
\n Новая строка (LF, 0x0A (10) ASCII)
\r Возврат каретки (CR, 0x0D (13) ASCII)
\t Символ табуляции (HT, 0x09 (9) ASCII)
\\ Обратный слеш
\$ Знак доллара
\" Двойная кавычка
\[0-7]{1,3} Номер совпадения в регулярном выражении в восьмеричном представлении
Номер совпадения в регулярном выражении в шестнадцатеричном
\x[0-9A-Fa-f]{1,2}
представлении
Если после обратного слеша встретится любой другой символ, то напечатаются оба.
Второе отличие строки в двойных кавычках - интерполяция переменных. Если в строке
встретится какая-нибудь переменная, то вместо ее имени будет подставлено ее значение.
Посимвольный доступ в строке
Получить любой символ в строке можно указав смещение в фигурных скобках после строки.
Смещение начинается с 0.
Можно использовать и квадратные скобки для совместимости. Но в PHP 4 это не
рекомендуется.
<?php
    // Первый символ  строки
  $str = 'This is a test.';
  $first = $str{0};
    // Последний символ строки
  $str = 'This is still a test.';
  $last = $str{strlen($str)-1}; 
?>

Преобразование в строку
Преобразование можно провести оператором (string) или функцией StrVal(). Преобразование
происходит автоматически в той области выражения, где нужна строка. Например, такое
происходит при использовании функции echo() или при сравнении со строкой значения
переменной.
Булево значение True преобразуется в строку "1", а False - в пустую строку "". Обратное
преобразование происходит точно так же.
Преобразование из integer или из float происходит просто заменой чисел на их строковое
представление (включая экспоненциальную часть для float).
Массивы заменяются строкой "Array", поэтому вы не сможете просмотреть их содержимое
функциями echo() или print().
Объекты заменяются строкой "Object".
Указатели на ресурсы всегда преобразуются в строку со структурой "Resource id #n", где n -
уникальный номер ресурса назначенный PHP во время выполнения. Чтобы узнать тип ресурса,
используйте функцию Get_Resource_Type().
NULL всегда преобразуется в пустую строку.
Для просмотра значений массивов, объектов и ресурсов используйте функции Print_R или
Var_Dump().
Преобразование строк в числа
Когда строка рассматривается как числовое значение, результат и тип определяется так:
Число принимается за float, если в нем содержится любой из симолов: 'e', 'E' или '.'. В других
случаях это будет тип integer.
Значение определяется начальной частью строки. Если строка начинается с подходящего для
числа значения, то оно и будет использовано. В остальных случаях значение числа будет 0.
Правильное значение для числа считается: необязательный знак, затем одна и более чисел
(возможно с десятичной точкой), затем необязательная экспонентациальная часть.
Экспонентациальная часть - это 'e' или 'E', за которыми следует одно или несколько чисел.

<?php
  $foo = 1 + "10.5"; // float (11.5)
  $foo = 1 + "-1.3e3";     // float (-1299)
  $foo = 1 + "bob-1.3e3"; // integer (1)
  $foo = 1 + "bob3";    // integer (1)
  $foo = 1 + "10 Small Pigs";    // integer (11)
  $foo = 4 + "10.2 Little Piggies";    // float (14.2)
  $foo = "10.0 pigs " + 1; // float (11)
  $foo = "10.0 pigs " + 1.0; // float (11)
?>
Не ждите, что вы получите значения кодов для букв при переводе из строки в
число, как, например, в C. Для подобных преобразований в PHP есть функции
Ord() и Chr().
Массивы

В PHP массивы - фактически являются упорядоченными соответствиями между ключем


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

Синтаксис
Инициализация с помощью Array()
Массив может был задан при помощи языковой конструкции Array(). Аргументами служат
определенное количество пар ключ => значение.

<?php
  array( 
    [ключ =>] значение,
    ...
  )
// Ключ - это либо строка, либо неотрицательное integer
// Значением может быть что угодно
?>
<?php
 array("foo" => "bar", 12 => true);
?>

<?php
 array("somearray" => array(6 => 5, 13 => 9, "a" => 43));
?>

Если ключ не указан, то среди всех численных индексов будет найдено наибольшее число, а
новый ключ будет равен этому максимуму, увеличенному на 1. Числа в ключе могут быть
отрицательными, например, если наибольшее значение числового ключа равно -6, то новый
элемент массива будет в индексе -5. Если же числовых индексов в массиве нет, то первый ключ
будет равен 0. Если вы определите индекс, который уже существует в массиве, то его значение
будет перезаписано новым значением.

<?php
    // Этот массив индентичен ...
  array(5 => 43, 32, 56, "b" => 12);
    // ...этому
  array(5 => 43, 6 => 32, 7 => 56, "b" => 12);
?>

Нельзя использовать в качестве индексов массивы или объекты. В таких случаях


будет выдано предупреждение: Illegal offset type.
Создание и изменение элементов массива с помощью квадратных скобок
Вы можете изменять элементы массива, просто явно указывая новые значения для ключа. Ключ
можно не указывать, тогда новое имя индекса будет назначено автоматически.

<?php
  $arr[key] = value;
  $arr[] = value;
?>

Если массив с указанным именем не существует, то он будет создан, поэтому это другой способ
проинициализировать массив. Для изменения элемента массива нужно всего лишь указать его
новое значение, а для того, чтобы удалить пару ключ/значение, используйте функцию UnSet().
функция unset() позволяет отменить установку ключа массива. Не забудьте, что при этом
массив НЕ реиндексируется
<?php
$arr = array(5 => 1, 12 => 2);
$arr[] = 56;     // Аналогично $arr[13] = 56;
$arr["x"] = 42; 
  // Добавляет новый элемент массива в индексом "x"
unset($arr[5]); 
  // Удаляет элемент из массива
unset($arr);  
  // Удаляет массив целиком
?>

NULL

Специальное значение NULL обозначает, что у переменной нет значения. Это


единственное возможное значение в типе данных NULL.

Тип данных NULL появился в PHP 4.


Переменная содержит значение NULL в следующих случаях:

 Ей присвоено значение NULL;


 Ей еще не присвоено никакое значение;
 Она была удалена функцией UnSet().

Синтаксис
Есть только одно значение для типа NULL, и это регистронезависимая строка
NULL.

<?php
  $var = NULL;
?>

Основы синтаксиса

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

Требования к именам переменных такие же, как и к другим меткам. Первый символ в
переменной должен быть буквой или знаком подчеркивания, за которым следуют буквы, цифры
или знаки подчеркивания. В шаблоне регулярного выражения это выглядит так: [a-zA-
Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*.

В данном случае буквы - это символы a-z, A-Z, а ASCII символы - знаки с 127 по 255 (0x7F-
0xFF).

<?php
  $var = "Bob";
  $Var = "Joe";
  echo "$var, $Var";
    // "Bob, Joe"
  $4site = 'not yet';
    // Неверно: начинается с цифры
  $_4site = 'not yet';
    // Верно, символ подчеркивания
  $t&auml;yte = 'mansikka';
    // Верно, ASCII 228.
?>

PHP 4 предлагает другой способ присваивания значений переменным: присваивание по ссылке.


Это значит, что новая переменная просто ссылается (становится псевдонимом, указывает) на
исходную переменную. Изменение новой переменной влияет на значение переменной-
первоисточника и наоборот. Также это означает, что копирования не происходит, поэтому
присвоение занимает меньше времени. Хотя, вероятнее всего, выигрыш в скорости будет
наиболее заметен в больших циклах или в присвоениях огромных массивах и объектах.
Для присвоения по ссылке просто поставьте амперсанд (&) перед переменной, на которую
будет ссылаться новая переменная. Например, следующий пример дважды напечатает фразу
'My name is Bob':

<?php
  $foo = 'Bob';
  $bar = &$foo;
    // Ссылка на $foo
  $bar = "My name is $bar";
    // Изменяем $bar
    // и $foo
  echo $bar;
  echo $foo;
    // My name is BobMy name is Bob
?>

  $bar = &test();
    // Неверно
?>

Переменные «снаружи» PHP

HTML формы (методы GET и POST)

Когда данные отправляются из формы PHP скрипту, они становятся автоматически доступны
PHP скрипту. Есть несколько способов получить доступ к этой информации, зависящих от
версии интерпретатора и настроек. Пусть, например, мы отправляем данные из следующей
формы:

<form action="foo.php" method="post">


    Name:  <input type="text" name="username"><br>
    Email: <input type="text" name="email"><br>
    <input type="submit" name="submit" value="Нажми меня!">
</form>

Тогда данные можно получать так:

<?php

// Доступно с PHP 4.1.0


   print $_POST['username'];
   print $_REQUEST['username'];
   import_request_variables('p', 'p_');
   print $p_username;

// Для PHP 3.
   print $HTTP_POST_VARS['username'];

// Доступно при переменной register_globals равной on.


// В PHP 4.2.0 переменная register_globals равна off.
// Использование этого метода не рекомендуется
   print $username;
?>

Использование метода GET похоже, за исключением того, что используются предопределенные


переменные семейства GET. GET относится к данным QUERY_STRING. Например, адрес
http://www.example.com/test.php?id=3 содержит данные метода GET, которые доступны в
переменной $_GET['id'].
Как упоминалось выше, до PHP 4.2.0 значение переменной конфигурации register_globals по
умолчанию было on, как и в PHP 3. Сообщество PHP советует не доверять этой директиве и не
включать данную переменную, а также писать программный код в рассчете на register_globals =
off.
Переменная настройки magic_quotes_gpc влияет на значение переменных GET, POST и
COOKIE. Если она включена, то строка It's PHP автоматически станет It\'s \"PHP!\". Такие
преобразования нужны для работы с базами данных.
PHP понимает массивы в контексте переменных форм. Вы можете, например, сгруппировать
похожие переменные или использовать эту возможность для получения нескольких вариантов
выбора из тега SELECT multiple.
Константы
Константа - это идентификатор (имя) для какого-либо значения. Как показывает название, это
значение не может меняться во время выполнения скрипта (кроме "волшебных констант",
которые фактически константами не являются. По умолчанию константы чувствительны к
регистру, но по соглашению они должны писаться заглавными буквами.
Имя константе назначается согласно тем же правилам, что и любым другим меткам в PHP - оно
должно начинаться с буквы или символа подчеркивания, а затем любое количество букв, цифр
или знаков подчеркивания. В регулярном выражении это правило выглядит так: [a-zA-
Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*

Буквой в руководстве считаются диапазоны a-z и A-Z, а также ASCII символы со 127 по 255 (0x7f-
0xff).

Область видимости константы - глобальная, вы можете использовать ее в любой части вашего


скрипта.
Синтаксис
Константа определяется функцией define(). Один раз определив константу, вы не можете ее
переопределить или удалить.
Константа может содержать только скалярное значение (boolean, integer, float или string).
Получить значение константы можно просто указав ее имя. В отличие от переменных,
указывать знак $ в начале идентификатора не надо. Если вы хотите использовать имя
константы динамически, используйте функцию constant(). Для того, чтобы получить список
всех всех оперделенных констант, используйте функцию get_defined_constants().

Константы и переменные (в том числе и глобальные) находятся в разных пространствах имен.


Например, TRUE и $TRUE - различаются между собой.

Когда метка, которая не определена, PHP решает, что имеется ввиду имя константы и выдаст
сообщение. Если вы хотите узнать, была ли определена константа, используйте функцию
defined().
Отличия между константами и переменными:

 У констант нет знака доллара в начале имени;


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

<?php
  define("CONSTANT", "Hello world.");
  echo CONSTANT; // выведет "Hello world."
  echo Constant; // выведет "Constant" и выдаст замечание
?>

Функции для работы с переменными

isSet()
Возвращает TRUE если переменная var существует, FALSE если нет.
Это языкрвая конструкция.
Если переменная была удалена припомощи функции UnSet(), то isSet() вернет FALSE. Также
она вернет FALSE, если переменной было привоено значение NULL. При этом учитывайте, что
нуль-байт ("\0") отличается от константы PHP NULL.
Функция работает только на переменных и на элементах массива, в других случаях произойдет
ошибка интерпретирования. Для констант используйте функцию defined().

Функции для работы с числами

Round()
Возвращает округленное число val с точностью precision (число знаков после запятой).
Precision может быть также нулем (по умолчанию) или меньше нуля.

<?php

  echo round(3.4);         // 3
  echo round(3.5);         // 4
  echo round(3.6);         // 4
  echo round(3.6, 0);      // 4
  echo round(1.95583, 2);  // 1.96
  echo round(1241757, -3); // 1242000

?>

Аргумент precision доступен начиная с PHP 4.

Функции для работы со строками

Explode()
array explode(string separator, string string [, int limit])

Разбивает строку string на несколько по образцу строки separator

Возвращает массив строк, каждая из которых - подстрока, которая в исходной строке string
граничила со разделителем separator. Если указан аргумент limit, то возвращаемый массив
будет содержать не более limit элементов.
Если параметр separator содержит пустую строку, то функция вернет FALSE, если в строке не
встретится подстрока separator, то функция вернет массив, состоящий из одного элемента,
который будет содержать исходную строку string.
Аргумент limit добавлен в PHP 4.0.1
Примеры использования функции:
<?php

  $pizza = "piece1 piece2 piece3 piece4 piece5 piece6";


  $pieces = explode(" ", $pizza);

?>

Implode()
string implode(string glue, array pieces)

Объединяет элементы массива pieces в строку

Возвращает строку, которая содержит элементы массива, между которыми расположена строка
glue.
<?php

  $array = array('lastname', 'email', 'phone');
  $comma_separated = implode(",", $array);

  print $comma_separated; // lastname,email,phone

?>

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


Однако, такой порядок весьма запутывает, поэтому рекомендуется официальный порядок
аргументов.
StrLen()
int strlen(string str)

Определяет длину строки str

Возвращает длину строки.


StrPos()
int strpos(string haystack, string needle [, int offset])

Находит позицию символов needle в строке haystack, где они встречается в первый раз

Возвращает номер позиции первого вхождения в строку символов needle. В отличии от


StrRPos(), этот параметр может быть не только символом, но и строкой, причем искаться будет
строка целиком.
Если символов в строке нет, то возвращается FALSE.
Очень легко ошибиться когда символ не найден или когда он найден в позиции 0. Вот как этой
ошибки можно избежать:
StrToUpper()
string strtoupper(string str)

Преобразует строку str в верхний регистр

Возвращает получившуюся строку. Для национальных символов правила преобразования


диктуются настройками локали, которые можно изменить для PHP скрипта с помощью
функции SetLocale().

<?php

  $str = "Mary Had A Little Lamb and She LOVED It So";


  $str = strtoupper($str);
  print $str; # MARY HAD A LITTLE LAMB AND SHE LOVED IT SO

?>

SubStr()
string substr(string string, int start [, int length])

Возвращает часть строки string длиной length, начиная с позиции start

Start считает позиции, начиная с нуля. Если аргумент start отрицателен, то позиция будет
отсчитываться назад, начиная с последнего символа строки. Если аргумент положителен и
больше, чем блина строки, то функция вернет FALSE.
Если аргумент length указан и он больше нуля, то возвращаемая строка будет максимум length
символов длиной. Если аргумент length указан и он отрицателен, то в результате length
символов с конца строки будут пропущены. Если позиция, на которую указывает аргумент start
больше, чем позиция, на которую указывает аргумент length, то возвращается пустая строка.

<?php

  echo substr("abcdef", 1);    // "bcdef"
  substr("abcdef", 1, 3); // "bcd"
  substr("abcdef", 0, 4); // "abcd"
  substr("abcdef", 0, 8); // "abcdef"

  $string = 'abcdef';
  echo $string{0}; // a
  echo $string{3}; // d

  echo substr("abcdef", -1); // "f"
  echo substr("abcdef", -2); // "ef"
  echo substr("abcdef", -3, 1); // "d"

  echo substr("abcdef", 0, -1); // "abcde"
  echo substr("abcdef", 2, -1); // "cde"
  echo substr("abcdef", 4, -4); // ""
  echo substr("abcdef", -3, -1); // "de"

?>

Trim()
string trim(string str [, string charlist])

Вырезает пробельные символы с начала и конца строки str

Die()
void die([string status]) void die(int status)

Выводит сообщение или код выхода и завершает программу

Функция является синонимом Exit().


Echo()
echo(string arg1 [, string argn...])

Отображает одну и более строк

Echo() на самом не не является функцией (это языковая конструкция), поэтому при ее


употреблении круглые скобки не обязательны. На самом деле, если вы хотите передать более,
чем один параметр функции, их можно не заключать в круглые скобки. Echo() не будет
работать в контексте функций с переменными именами (variable function context, см. раздел
«Functions | Variable functions» англоязычной документации), но можно вместо Echo()
использовать функцию Print().
Print()
print(string arg)

Отображает строку

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

Функции для работы с сессиями

Session_Destroy()
bool session_destroy(void)

Уничтожает все данные, относящиеся к текущей сессии

Уничтожаются все данные, которые относятся к текущей сессии, причем переменные, которые
относятся к ней НЕ уничтожаются, НЕ удаляются также и кукисы, в которые записаны данные
о сессии.
Функция возвращает TRUE, если данные успешно удаляются и FALSE, если удаление
невозможно.

<?php

    // Начинаем сессию


  session_start();
    // Освобождаем все переменные сессии
  session_unset();
    // Уничтожаем саму сессию
  session_destroy();

?>

Session_Register()
bool session_register(mixed name [, mixed ...])

Регистрирует одну и более переменных в пределах текущей сессии

Функция допускает переменное число аргументов, любой из которых может быть либо строкой,
содержащей имя переменной, либо массивом, содержащим имена переменных или имена
других массивов. Для каждого имени функция зарегистрирует глобальную переменную с этим
именем, действующую в пределах сессии.
Функция не будет работать при отключенной настройке register_globals. Если вы хотите, чтобы
ваш скрипт работал независимо от переменной настроек register_globals, используйте массив
$_SESSION. Все его элементы регистрируются автоматически.
Зарегестрированные переменные - глобальные. Если вы хотите зарегистрировать сессионную
переменную из функции, то нужно позаботиться о том, чтобы эта переменная была глобальной.
Можно воспользоваться ключевым словом global или массивом $GLOBALS, или использовать
специальные массивы сессии, как это показано ниже.
Если вы используете массив $_SESSION (или $HTTP_SESSION_VARS), то не используйте
функции session_register(), session_is_registered() или session_unregister().
Функция возвращает TRUE, если все переменные успешно зарегистрированы в сессии.
Если до вызова функции не была вызвана session_start(), то эта функция будет вызвана неявно
без параметров. Массив $_SESSION требует явного вызова session_start() перед
использованием.
Переменные сессии можно также регистрировать просто присваивая значение элементам
массива $_SESSION ($HTTP_SESSION_VARS до PHP 4.1.0).

<?php

  $barney = "A big purple dinosaur.";


  session_register("barney");

  $_SESSION["zim"] = "An invader from another planet.";

    # PHP < 4.1.0


  $HTTP_SESSION_VARS["spongebob"] = "He's got square pants.";

?>

В настоящее время нельзя регистрировать в сессионных переменных тип resource (ресурсы).


Например, вы не можете соединиться с СУБД и хранить в переменных сессии идентификатор
соединения, а потом надеяться, что ваше соединение будет активным после восстановления
переменной.
Session_Start()
bool session_start(void)

Инициализирует данные сессии

Начинает новую сессию или продолжает начатую ранее, определяя номер сессии по
переменной $PHPSESSID (это имя по умолчанию, но оно может быть изменено), которая
берется либо из данных метода GET, либо из куков браузера.
Если вы хотите использовать именованные сессии, вызовите функцию session_name() перед
вызовом session_start().
Функция всегда возвращает TRUE. Если вы используете сессии, основанные на хранении
данных в куках, то функция session_start() должна вызываться перед любым выводом в браузер.