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

 

Для создания сайта могут быть использованы языки программирования DHTML и PHP, а также различные «конструкторы» сайтов. Рассмотрим их подробнее.

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

Язык программирования PHP ­ - скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. Ныне поддерживается подавляющим большинством представителей хостингов. Входит в LAMP - «стандартный» набор для создания вебсайтов.

Программы PHP могут выполняться двумя способами: как Web-приложение HTTP-сервером или как консольные программы. Поскольку, нашей задачей является программирование web-приложений, мы преимущественно будем рассматривать первый способ.

Дело в том, что PHP, как правило, используется сугубо для программирования приложений, связанных с Интернетом. Однако, PHP можно еще использовать в качестве интерпретатора командной строки, в основном в *nix-системах. Последнее возможно при помощи CORBA и COM интерфейсов, а также при помощи расширения PHP-GTK. При таком использовании PHP возможно решение следующих задач:

-  создание приложений интерактивной командной строки;

-  создание кросс-платформенных GUI приложений при помощи библиотек PHP-GTK, PHP-Qt или WinBinder;

-  автоматизация некоторых задач под Windows и Linux.

Язык программирования Javascript - объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

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

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989-1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов - дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическомо формлении.

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг.

Завершающий тэг выглядит так же, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. Тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

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

Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML.

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа.

Большинство WEB-браузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов. Заголовок документа не появляется при отображении самого документа в окне.

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

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

Комментарии могут встречаться в документе где угодно и в любом количестве.

Основные тэги, присутствующие в исходном коде сайта:

-  тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа

-  уровни заголовков <Hx>

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

-  тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац

-  центрирование элементов документа

Можно центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <CENTER>

-  разрыв строки <BR>

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

-  формы <FORM>

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

-  горизонтальные линии <HR>

Тэг вставляет в текст горизонтальную разделительную линию.

-  CSS-стили

Любой элемент HTML может иметь CSS селектор. Селектор определяет стиль элемента, для которого он создан.

Псевдокласс состоит из элементов одного типа, отвечающему определенному критерию. Псевдоклассы и псевдоэлементы при определении отделяются знаком «:».

Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа.

В настоящее время все чаще Web-программисты используют Dynamic HTML или DHTML.- это способ создания интерактивного веб-сайта, используя сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа). Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности формам. Также он может служить как инструмент для создания основанных на браузере видеоигр.

DHTML - это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками - тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег. Язык DHTML не чувствителен к регистру букв, поэтому все тэги можно задавать как прописными, так и строчными буквами. Броузер будет их однозначно интерпретировать в любом написании. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства. Атрибуты указываются в открывающем теге.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) - «специальные символы». Сущности начинаются с символа амперсанда и имеют вид & имя; или &# NNNN;, где NNNN - код символа в Юникоде в десятеричной системе счисления.

Для написания сайта на языке DHTML, были использованы теги и свойства:

- <HEAD> - определяет заголовок HTML-документа. В заголовке описываются общие правила интерпретации HTML-документа в целом и содержится вспомогательная информация о документе, указывается информация для браузера;

-  <TITLE> - задает название страницы, отображаемое в заголовке окна браузера;

-  <BODY> содержит HTML-элементы и теги, задающие свойства документа и отвечающие за то, что мы видим на экране монитора;

-  абзац задается тегами <P> и </P>, между которыми помещается текст. Фактически работа тега <P> сводится к выводу пустой строки перед текстовым фрагментом, поэтому парный тег </P> можно не использовать;

-  теги физического форматирования задают вид отображения выделенных участков текста в окне браузера (<B>...</B> - жирный, <I>...</I> - курсив, <U>…</U> - подчеркивание);

-  <marquee> - служит для создания бегущей строки;

-  <A>…</A> - гипертекст - это способ структурирования документов путем размещения ссылок внутри одного документа или между документами. В отличие от обыкновенного текста гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Гипертекстовые ссылки среди других элементов текста обычно выделяются другим цветом и подчеркиванием. Причем может различаться цвет активной ссылки, не просмотренной ссылки и неактивной ссылки. Цвет просмотренной ссылки, цвет активной ссылки и цвет не просмотренной ссылки можно задать в качестве атрибутов тега <BODY>: Link - задает цвет не просмотренной ссылки, Alink - задает цвет активной ссылки, Vlink - задает цвет просмотренной ссылки.

Для создания таблицы используется тэг <TABLE>…</TABLE>. Внутри этих тэгов задаются строки командами <TR>... </TR>. Наконец, внутри строк задаются клетки (ячейки) командами <TD>... </TD>.

Атрибуты команды TABLE:

- align - left, right - выравнивание таблицы по горизонтали;

-  width - число или процент - ширина таблицы по отношению к окну браузера;

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

-  cellpadding - число - расстояние между содержимым ячейки и рамкой;

-  cellspacing - число - расстояние между ячейками таблицы;

-  bgcolor - цвет - цвет фона таблицы;

-  background - файл - фоновая картинка;

-  border - число - ширина линий рамки;

-  bordercolor - цвет - цвет линий рамки;

-  bordercolordark - цвет - цвет рамки (снизу и справа);

-  bordercolorlight - цвет - светлый цвет рамки (сверху и слева).

Для создания формы в html-документе, используется тег FOR. Его атрибуты:

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

-  method - определяет способ отправки;

-  post - применяется в тех случаях, когда полученные из формы данные необходимо сначала обработать (например, проверить правильность заполнения формы), при этом содержимое формы при отправке кодируется);

-  name - определяет имя формы. Используется при наличии нескольких форм;

-  enctype - определяет способ кодировки содержимого формы при отправке.

Практически любой элемент интерфейса формы можно создать с помощью тега INPUT. Этот тег не имеет закрывающего. Атрибуты тега: name - определяет идентификационное имя, используемое при передаче содержания данной формы на сервер; type - определяет тип управляющего элемента.

Если необходимо предоставить пользователю возможность вводить в форму достаточно объемную текстовую информацию, то лучше использовать многострочное текстовое поле, которое создается тегом TEXAREA. Этот тег имеет парный. Используются следующие атрибуты данного тэга: name - задаёт название области; cols - задаёт ширину области в количестве печатных символов; rows - задаёт количество видимых строк текстового поля.

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

- document - содержит ссылку к объекту документа, в котором содержится элемент;

-  id - присваивает уникальное имя определенному элементу, что впоследствие помогает к нему обратиться;

-  style - определяет конкретный стиль для конкретного элемента.

Специальная часть

Описание алгоритма

 

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

Чтобы запустить данный программный продукт нужно выполнить следующие шаги:

1. запустить Главную страницу (index.html);

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

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