RSS-лента MyFirstSite.ru

Создание капчи (captcha) на PHP

Wed, 14 Dec 2011 03:37:06 +0400

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

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

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

Шаблонизация в веб-программировании. Создание шаблонизатора на PHP

Sat, 10 Dec 2011 17:26:53 +0400

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

Первые работы начинающего веб-программиста выглядят, как правило, примерно так:

echo '';
echo '' . $article['title'] . '';
echo '' . $article['date'] . ' • Категория: ' . $article['category'] . '';
echo $article['text'];
echo '
';

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

Выравнивание таблицы по центру

Mon, 07 Nov 2011 03:49:24 +0400

Если таблицу поместить в блок с CSS-стилем

text-align: center

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

Выровнять таблицу по центру можно, поместив ее в блок со следующим CSS-стилем:

...

Таким же образом можно отцентрировать и блок внутри блока.

Блок с закругленными углами на CSS3

Tue, 01 Nov 2011 16:11:10 +0400

Еще один полезный CSS-стиль третьей версии — border-radius, позволяющий закруглить углы у блока. Браузеры-лидеры последних версий поддерживают данный стиль, Internet Explorer потихоньку подтягивается и в 9 версии также научился закруглять углы.

Пример использования стиля border-radius:



  
    Page

Создание блока с тенью на CSS3

Sat, 29 Oct 2011 13:26:10 +0400

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

Пример использования стиля box-shadow:



  
    Page

Иконка для сайта

Sat, 22 Oct 2011 19:01:58 +0400

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

Как создать иконку для сайта? Очень просто. Иконка представляет собой изображение размером 16 на 16 пикселей в формате ico. Можно найти готовую иконку, сделать ее в одном из онлайн-сервисов или при помощи графической программы, например, Gimp. Полученному файлу присваиваем имя favicon.ico и помещаем в корневой каталог сайта.

Редирект на домен с www

Fri, 21 Oct 2011 12:54:24 +0400

Если ваш сайт доступен по адресу site.ru и www.site.ru, то это не очень правильно с точки зрения поисковой оптимизации. Определитесь, какой из доменов является основным для вашего сайта и настройте на него перенаправление с неосновного. Если основной домен с www, то настроить редирект можно следующим образом. Для Apache (прописывается в .htaccess или конфиг виртуального хоста):

RewriteEngine On

RewriteCond %{HTTP_HOST} ^site.ru$
RewriteRule (.*) http://www.site.ru/ [R=301,L]

Для Nginx:

server {
    listen          ip:port;
    server_name     site.ru;
    rewrite         ^ http://www.site.ru$request_uri? permanent;
}

Урок 12: Установка CMS Drupal

Wed, 12 Oct 2011 09:53:44 +0400

Сегодня мы познакомимся с CMS Drupal. Если честно, мне никогда не приходилось с ним работать, поэтому сейчас я вместе с вами буду устанавливать его впервые. Могу озвучить лишь распространенное в сети мнение, что Drupal наиболее сложен в конфигурировании по сравнению с Joomla и Wordpress.

Попробуем запустить Drupal под нашим локальным веб-сервером. Переходим на страницу загрузки Drupal и скачиваем архив последней версии Drupal. В моем случае это был Drupal 7.8 (версия от 31.08.2011), имя архива, соответственно, drupal-7.8.tar.gz. Этот архив нужно распаковать в корневую директорию одного из виртуальных хостов Apache. Я, допустим, выбрал C:\Program Files\Apache\htdocs\test-domain1\www (виртуальный хост test-domain1).

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

Основы безопасного веб-программирования на PHP

Sun, 18 Sep 2011 07:59:53 +0400

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

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

GET и POST-данные. Конечно же, данные передаваемые пользователем в виде GET и POST-параметров. Это самый распространенный источник внешних данных, соответственно, самая большая доля уязвимостей приходится на него;
Куки. Те же пользовательские данные, другой метод их передачи;
Данные из БД. Запрашиваемые скриптом данные из базы данных;
Внешний контент. Внешний контент, который скрипт загружает в процессе работы. Например, сторонняя RSS-лента новостей и тому подобное.

Урок 11: Установка CMS WordPress

Sun, 11 Sep 2011 07:09:15 +0400

WordPress — еще одна очень популярная CMS, используемая преимущественно для создания блогов. Сегодня попробуем ее установить на наш локальный веб-сервер. Напоминаю, что все эксперименты на этом ресурсе проделываются на соответствующим образом настроенной связке Apache + PHP + MySQL (все о ней можно найти здесь).

Итак, идем на сайт ru.wordpress.org и скачиваем zip-архив последней версии WordPress. В моем случае файл назывался wordpress-3.2.1-ru_RU.zip. Распаковываем архив в корневой каталог любого виртуального хоста Apache (предварительно очищенный). Я выбрал test-domain3, корневой каталог, соответственно, C:\Program Files\Apache\htdocs\test-domain3\www. Обратите внимание, что архив содержит папку wordpress, в которой уже находятся файлы CMS. Необходимо в корневом каталоге разместить именно эти файлы, а не папку wordpress.

Урок 10: Установка CMS Joomla

Sun, 04 Sep 2011 05:36:49 +0400

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

Традиционно, в качестве локального веб-сервера будем использовать связку Apache + PHP + MySQL, установленную и настроенную по этим материалам.

Урок 9: Создание базы данных MySQL в phpMyAdmin

Sat, 03 Sep 2011 15:48:57 +0400

С MySQL мы немного познакомились на уроке "Установка и настройка MySQL", а также установили его на свой компьютер. Как вы знаете, веб-сервер Apache позволяет на одном компьютере разместить множество веб-сайтов. В свою очередь, MySQL позволяет обслуживать множество баз данных. Обычно веб-мастера для каждого сайта создают отдельную базу данных, в каждой базе данных находятся таблицы с данными определенного сайта.

Помимо этого, в MySQL есть возможность создания дополнительных пользователей. После установки MySQL в вашем распоряжении имеется пользователь root, который имеет наивысшие права. Использовать его непосредственно для доступа к базе данных из-под, скажем, PHP весьма небезопасно. Самым оптимальным и правильным решением является создание для каждой базы данных своего пользователя, который имеет доступ только к этой базе данных. При такой схеме в случае взлома на вашем сервере одного из сайтов, данные в базах данных других сайтов останутся недоступными.

Урок 8: Установка phpMyAdmin

Sat, 20 Aug 2011 14:45:00 +0400

Добрый день! Сегодня я расскажу вам, как установить phpMyAdmin на свой локальный веб-сервер. phpMyAdmin — это излюбленное веб-мастерами средство администрирования баз данных MySQL. Реализован он, как видно из названия, на PHP и имеет веб-интерфейс.

Для, собственно, возможности установить этот полезный инструмент у вас должна иметься в наличии установленная и настроенная связка Apache + PHP + MySQL. Этому были посвящены целых три урока, ссылки на которые вы можете найти здесь.

Установка Apache + PHP + MySQL в Windows

Sat, 20 Aug 2011 11:03:00 +0400

Эта заметка объединяет в себя три материала по развертыванию у себя на компьютере локального веб-сервера:

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

Урок 7: Установка и настройка MySQL

Fri, 12 Aug 2011 19:12:00 +0400

Довольно типичным ядром веб-сервера является связка Apache + PHP + MySQL. Этот тандем позволяет обслуживать большинство готовых движков и CMS, таких как Joomla, Wordpress, Drupal и так далее. Данный урок поможет вам установить сервер баз данных MySQL и настроить PHP для работы с ним. Итак, я предполагаю, что у вас уже имеется в наличии настроенный соответствующим образом Apache и интерпретатор PHP, связанный с ним. Если это не так, то в путь:

Идем на страницу http://www.mysql.com/downloads/mysql/ и скачиваем соответствующую версию дистрибутива MySQL в виде MSI инсталлятора. В моем случае файл назывался mysql-5.5.15-win32.msi. Будет предложено ввести имя пользователя и пароль на сайте либо зарегистрироваться, но под формой можно заметить ссылку "No thanks, just take me to the downloads!", жмем ее.

RSS-лента на сайте

Sun, 31 Jul 2011 10:04:00 +0400

Рад сообщить о появлении на MyFirstSite.ru RSS-ленты. Теперь отслеживать появление нового материала гораздо проще. Вы можете добавить канал в распространенные читалки: добавить в Google Reader, добавить в Яндес.Ленту.

Форум закрыт

Mon, 04 Jul 2011 10:30:00 +0400

Закрыл форум по причине отсутствия интереса к нему со стороны посетителей. В последнее время на нем появлялись лишь спамеры.

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

Для чего сайту нужна база данных?

Mon, 04 Jul 2011 08:13:00 +0400

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

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

Механизм сессий в PHP

Sun, 26 Jun 2011 00:14:00 +0400

В предыдущей статье мы рассмотрели принцип работы с куки в PHP. Назначение сессий практически такое же — сохранение некоторых данных после завершения работы скрипта для последующего использования. Однако, у двух этих методов есть существенное различие. Куки хранятся на стороне клиента и поэтому пользователь может без труда прочитать и даже изменять их. Допустим, на нашем сайте существует форма авторизации. Войдя под администраторской учетной записью пользователь получает дополнительные привилегии на сайте, к примеру, доступ к администраторской панели. Чтобы после каждого перехода пользователю не вводить заново пароль, необходимо каким-то образом запомнить факт того, что данный пользователь авторизован с административными правами. Используя куки задача решается следующим образом: после удачной авторизации пользователю устанавливается некая куки admin=1. При серфинге по страницам сайта проверяемся, есть ли у пользователя данная куки. Если есть, то пользователь — администратор. С точки зрения безопасности такое решение является в корне неправильным, так как любой посетитель может самостоятельно добавить в своем браузере куки admin=1 и автоматически стать администратором на вашем сайте. Используя сессии такой номер не пройдет, потому что сессионные параметры хранятся на стороне веб-сервера.

Рассмотрим принцип работы сессий в PHP. Для инициализации новой или возобновления ранее созданной необходимо вызвать PHP-функцию session_start(). Данную функцию необходимо вызывать до вывода контента в коде. Сессионные параметры находятся в глобальном массиве $_SESSION. Рассмотрим пример:

session_start();
if ( ! isset($_SESSION['test']) )
{
    echo 'Сохраняем значение...
';
    $_SESSION['test'] = 'Hello, world';
}
echo $_SESSION['test'];

Выравнивание изображения по центру в XHTML

Sun, 12 Jun 2011 08:08:00 +0400

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

Инструменты веб-разработчика на сайте

Fri, 27 May 2011 12:16:00 +0400

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

Расположение HTML-элемента по центру экрана при помощи JavaScript

Fri, 27 May 2011 02:08:00 +0400

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

left = (ширина_рабочей_области_браузера / 2) - (ширина_блока / 2)
top = (высота_рабочей_области_браузера / 2) - (высота_блока / 2)

Взгляните на реализацию:



  
    Page
    
    
  
  
    
    
    Вызвать
    
    
      
        Закрыть

Обратите внимание на строки 7, 8, 18, 19. Во-первых, для того, чтобы принудительно отобразить вертикальную полосу прокрутки, задана высота body. Блоку задан стиль position со значением fixed. Его действие аналогично absolute, за исключением того, что положение элемента не зависит от прокрутки веб-страницы. Строки 18, 19 — реализация формул расчета положения блока. Java-Script функция parseInt в нашем случае отбросит из значений стилей "px", оставив лишь числовые составляющие, которые нам и нужны для выполнения математических действий.

Абсолютное позиционирование элемента внутри родительского

Sun, 15 May 2011 12:40:23 +0400

В статье "Абсолютное позиционирование элементов (HTML + CSS)" рассматривался аналогичный вопрос, но там говорилось о позиционировании относительно рабочей области браузера. Элементу можно задать положение и внутри родительского элемента, что бывает очень полезным.

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

#parent
{
  position: relative;
  background: lime;
  width: 200px;
  height: 200px;
}
#block
{
  position: absolute;
  background: blue;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
}


  Hello, world

Родительскому элементу задается CSS-стиль position со значением relative, это позволяет позиционировать дочерние элементы относительно родительского. Внутри блок прижимается к нижнему краю при помощи CSS-стилей left, right, bottom.

Блок с полосой прокрутки (HTML + CSS)

Thu, 12 May 2011 18:26:05 +0400

Существует три CSS-стиля: overflow, overflow-x и overflow-y для управления отображением содержимого блочного элемента. По-умолчанию значения у этих стилей установлены в visible, которые указывают раздвигать блок, если его содержимое не помещается в заданные размеры. Если стилю overflow задать значение auto, то при необходимости у блока появятся горизонтальная и вертикальная полоса прокрутки:

.scrollblock {overflow: auto; width: 200px; height: 50px;}

Существует три CSS-стиля: overflow, overflow-x и overflow-y для управления отображением содержимого блочного элемента.

Стили overflow-x и overflow-y позволяют настроить соответственно горизонтальную или вертикальную полосу прокрутки.

Избавляемся от назойливых "File does not exist" в error.log Apache

Mon, 02 May 2011 13:01:19 +0400

Часто в error.log веб-сервера Apache попадают подобные записи:

File does not exist: favicon.ico
File does not exist: robots.txt

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

RewriteEngine on

RewriteRule ^favicon.ico$ - [F,L]
RewriteRule ^robots.txt$ - [F,L]

Применение нескольких CSS-классов к одному HTML-элементу

Sun, 01 May 2011 02:06:00 +0400

Очень полезной является возможность применения нескольких CSS-классов к одному HTML-элементу. Для этого нужно перечислить все необходимые классы в атрибуте class элемента через пробел. Приведу небольшой примерчик:

.bolded {font-weight: bold;}
.centered {text-align: center;}

Я — жирный текст по центру!

Склонение существительных после числительных в PHP

Sat, 30 Apr 2011 13:34:28 +0400

Довольно распространенная задача. За примером далеко ходить не надо: на этом сайте под каждой публикацией есть ссылка "N комментариев".

Существительное после числительного в зависимости от последнего может иметь три формы: "1 рубль", "3 рубля", "5 рублей". Следующая PHP-функция реализует склонение:

function format_by_count($count, $form1, $form2, $form3)
{
    $count = abs($count) % 100;
    $lcount = $count % 10;
    if ($count >= 11 && $count <;= 19) return($form3);
    if ($lcount >= 2 && $lcount <;= 4) return($form2);
    if ($lcount == 1) return($form1);
    return $form3;
}

Используем функцию следующим образом:

$count = 7;
echo $count . ' ' . format_by_count($count, 'день', 'дня', 'дней');

Реорганизация сайта

Tue, 26 Apr 2011 08:11:34 +0400

Добрый день! Сайт подвергся глобальной реорганизации. Во-первых, он снят с CMS Joomla и создан на более легком и быстром самописном движке. В связи с этим изменен дизайн сайта. Сменился хостинг, сайт теперь работает на виртуальном выделенном сервере. Добавлен раздел "Заметки", который будет наполняться короткими полезными заметками по тематике сайта.

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

Запрещаем браузеру переносить текст на новую строку

Wed, 20 Apr 2011 08:57:52 +0400

Бывает необходимо запретить переносить текст по строкам если он не помещается по ширине. Это можно сделать с помощью тега nobr:

Этот текст гарантированно будет отображаться в одну строку

Этого же можно добиться при помощи CSS-стиля white-space, заданного текстовому элементу-контейнеру. Например:

Этот текст гарантированно будет отображаться в одну строку

Второй вариант более предпочтителен (тег nobr отсутствует в стандарте XHTML).

Убираем подчеркивание гиперссылок

Wed, 20 Apr 2011 08:48:59 +0400

Подчеркнутость гиперссылок задается CSS-стилем text-decoration:

text-decoration: underline;

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

a { text-decoration: none; }

Если вы не знаете, как использовать CSS-стили, обратитесь к статье "Каскадные таблицы стилей".

На сайте открыт форум

Mon, 07 Mar 2011 12:45:51 +0300

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

Работа с cookie в PHP

Wed, 02 Mar 2011 12:07:57 +0300

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

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

Для дальнейшего понимания функционирования механизма cookie в PHP вам необходимо ознакомиться со статьей "Интерпретатор PHP. Основы, принципы функционирования", в особенности, где затрагивается понятие так называемого "первого вывода". Итак, задействовать механизм можно на этапе формирования HTTP-ответа на запрос. Для того, чтобы указать веб-клиенту сохранить у себя какой-то параметр в HTTP-ответ добавляется заголовок Set-Cookie со значением вида name=value (имя параметра, значение параметра), например:

Set-Cookie: myname=john

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

Cookie: name=value

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

Обработка данных из HTML-форм при помощи PHP часть 2

Thu, 10 Feb 2011 12:57:00 +0300

С набором радиобаттонов (HTML-элементы input типа radio) все предельно просто. Из группы можно выбрать только один, поэтому и параметр передается один. Хотя, есть случай, когда ни один из элементов не отмечен. Сделаем обработку небольшой HTML-формы:

 0 )
  {
      if ( isset($_GET['color']) ) //--Проверяем, был ли передан параметр color
      {
          echo 'Вы выбрали: ';
          switch( $_GET['color'] )
          {
              case 'red': echo 'красный'; break;
              case 'green': echo 'зеленый'; break;
              case 'blue': echo 'синий'; break;
          }
      }
      else
      {
          echo 'Вы ничего не выбрали!';
      }
      exit;
  }
  
?>


   Красный 

   Зеленый 

   Синий

PHP-обработчик умеет определять выбранное пользователем значение, а также отсутствие выбора. Сделаем, чтобы выбор пользователя сохранялся после выполнения запроса (то есть, чтобы выбранный элемент оставался отмеченным). Элемент типа radio генерируется отмеченным, если он имеет атрибут checked со значением checked. Хранить варианты будем в массиве, а генерировать элементы формы динамически с помощью PHP.

Обработка данных из HTML-форм при помощи PHP

Mon, 31 Jan 2011 03:04:01 +0300

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

Итак, данные из HTML-форм отправляются при помощи GET или POST HTTP-запросов. В GET-запросе параметры находятся непосредственно в URL и видны в адресной строке браузера. В POST-запросе данные находятся в теле HTTP-пакета. Данные получает страница, указанная в атрибуте action тега HTML-формы form, например, PHP-скрипт.

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

С точки зрения PHP принципиального отличия между GET и POST-параметрами нет. GET-параметры размещаются в глобальном массиве $_GET, POST — в $_POST.

Рассмотрим такой пример:

Сразу обратите внимание, что значение атрибута action представляет собой PHP-вставку. Переменная $_SERVER['PHP_SELF'] содержит имя и путь текущего выполняемого PHP-скрипта относительно корневого каталога веб-сервера. Таким образом, action всегда будет указывать на самого себя, в независимости от расположения и имени файла.

HTML-формы

Mon, 17 Jan 2011 12:59:36 +0300

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

HTML-форма описывается с помощью парного тега form. Этот тег имеет два важнейших атрибута: method и action. В атрибуте method задается тип HTTP-запроса (get или post), в action — запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:

...

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

Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут value задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты name. Например:

GET и POST HTTP-запросы. Передача параметров в HTTP-запросах

Fri, 10 Dec 2010 13:23:18 +0300

Существует несколько видов HTTP-запросов. Тип запроса указывается в первой строке HTTP-пакета, которая имеет вид:

<ТИП ЗАПРОСА> <ЗАПРАШИВАЕМЫЙ ДОКУМЕНТ> <ВЕРСИЯ HTTP>

например:

GET /page.php HTTP/1.1

GET-запрос

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

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

Переменные окружения веб-сервера Apache

Sun, 05 Dec 2010 06:31:26 +0300

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

SERVER_NAME — содержит доменное имя сервера. Apache устанавливает конкретное имя или виртуальный хост, по которому обратился клиент;
SERVER_ADDR — IP-адрес сервера. Устанавливается адрес, по которому выполнил соединение клиент;
SERVER_PORT — порт сервера. Устанавливается порт, по которому выполнил соединение клиент (тот самый порт, который по умолчанию 80 для веб-серверов);
REMOTE_ADDR — IP-адрес клиента;
DOCUMENT_ROOT — корневой каталог веб-сервера (либо текущего виртуального хоста);
REQUEST_METHOD — тип HTTP-запроса;
REQUEST_URI — путь к запрашиваемому документу (то, что передается вторым параметром в первой строке HTTP-запроса);
QUERY_STRING — строка параметров запроса (об этом поподробнее поговорим в следующей статье);
HTTP_HOST — содержит значение заголовка Host HTTP-запроса. В большинстве случаев совпадает с SERVER_NAME;
HTTP_USER_AGENT — содержит значение заголовка User-Agent HTTP-запроса. В этом заголовке клиент передает информацию о себе: версию операционной системы, браузера, и т.д.;
HTTP_REFERER — содержит значение заголовка Referer HTTP-запроса (об этом скоро будет отдельная статья).

К переменным окружения Apache возможен доступ внутри PHP-скриптов. Все они находятся в глобальном PHP-массиве $_SERVER.

Урок 6: Установка и настройка интерпретатора PHP

Wed, 01 Dec 2010 13:29:30 +0300

Установить PHP не просто, а очень просто. Настраиваться PHP будет для совместной работы с веб-сервером Apache, установка которого описана в этом уроке.

Для начала необходимо скачать последнюю стабильную версию PHP. Для этого идем на официальную страницу загрузки http://windows.php.net/download/ и скачиваем редакцию "VC9 x86 Thread Safe" в виде ZIP-архива. В моем случае файл назывался php-5.3.4-Win32-VC9-x86.zip. Данная сборка интерпретатора не требует установки, ее лишь нужно распаковать в определенное место. Распакуйте архив в корень диска C, появившуюся папку (у меня она называлась php-5.3.4-Win32-VC9-x86) переименуйте в php. В итоге PHP у вас будет находиться в C:\php.

Для работы данной сборки PHP необходим пакет "Microsoft Visual C++ 2008 Redistributable" (во всяком случае, в Windows XP SP3 потребовался, если у вас более свежая версия Windows, попробуйте сначала данный пакет не устанавливать), его находим на официальном сайте Майкрософта, воспользовавшись поиском по имени пакета. Файл называется vcredist_x86.exe.

В папке C:\php есть два файла: php.ini-development и php.ini-production. Эти файлы — примеры конфигурационных файлов PHP. Сделайте копию файла php.ini-production под именем php.ini — это будет вашим основным конфигурационным файлом.

Интерпретатор PHP. Основы, принципы функционирования

Thu, 11 Nov 2010 12:21:43 +0300

Как вы знаете, HTML и CSS предназначены для разметки и оформления веб-страниц. Теперь взгляните внимательно на сайт, на котором вы сейчас находитесь. На главной странице располагаются краткие аннотации к публикациям (последние пять штук), под ними находится навигация по страницам, с помощью которой можно посмотреть следующие пять записей. Есть также разделы "Статьи" и "Уроки", в которых расположены только статьи и только уроки соответственно. Представьте порядок моих действий при, скажем, публикации новой статьи. Сначала краткую аннотацию я помещаю на главную страницу сайта и в раздел "Статьи". Затем, на каждой странице я удаляю последнюю пятую аннотацию, перенося ее на первое место следующей страницы. Добавляю ссылку на статью в блок "Свежее". Неоправданно трудоемко и муторно, не правда ли? А если я вдруг когда-то захочу, скажем, чтобы на странице было не пять, а десять публикаций?

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

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

Введение в JavaScript

Fri, 01 Oct 2010 13:05:00 +0400

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

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

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

HTML, CSS. Вопросы новичков

Wed, 15 Sep 2010 06:15:41 +0400

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

Q: Как убрать подчеркивание гиперссылок?

A: Подчеркнутость гиперссылок задается CSS-стилем text-decoration:

text-decoration: underline;

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

a { text-decoration: none; }

Если вы не знаете, как использовать CSS-стили, обратитесь к статье "Каскадные таблицы стилей".

Q: Как изменить цвет гиперссылок? Почему часть ссылок на странице синие, а часть фиолетовые?

A: Гиперссылка имеет три дополнительных состояния, в которые она переходит при определенных событиях. Состояние hover наступает, когда на ссылку навели курсор мыши, состояние active — в тот момент, когда на ссылку нажали, но еще не загрузился контент, на который она ссылает (например, если нажать и не отпускать левую кнопку мыши). Посещенные ранее ссылки принимают состояние visited. Для каждого состояния можно задать отдельные CSS-стили, то есть по-разному настроить вид ссылок. В большинстве браузеров по умолчанию стили для гиперссылок задают им синий цвет и подчеркивание, а для состояния visited цвет переопределяется на фиолетовый. Как задать CSS-стили как для гиперссылок в общем, так и для их отдельных состояний рассказывается в статье "Стилизация гиперссылок".

Q: Как сделать ссылку, открывающую страницу в новой вкладке (в новом окне)?

A: Для этого необходимо ссылке задать атрибут target со значением _blank:

Главная страница в новом окне

Абсолютное позиционирование элементов (HTML + CSS)

Sun, 29 Aug 2010 05:07:26 +0400

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

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

top: 200px; left: 300px;

то расстояние его верхнего края до верхней границы страницы равно 200 пикселей, а расстояние левого края до левой границы страницы — 300 пикселей:

Помимо стилей left и top, элементу необходимо также задать стиль position со значением absolute, указывая, что мы хотим применить абсолютное позиционирование. Есть еще один полезный стиль z-index, который позволяет настроить перекрытие элементов при наложении. Элемент с абсолютным позиционированием накрывает все элементы с относительным позиционированием. Если два элемента с абсолютным позиционированием наложены друг на друга, то на передний план выталкивается тот элемент, у которого больше значение стиля z-index.

Восстановлена работа комментариев

Sat, 21 Aug 2010 05:45:37 +0400

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

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

Стандарты XHTML

Wed, 26 May 2010 12:06:40 +0400

Затрагивая тему разметки веб-страниц ранее мы всегда применяли традиционный язык HTML, который в данный момент является скорее уже теоретической составляющей и на практике почти не применяется. Одним из наиболее распространенных языков разметки гипертекста в последнее время является XHTML. XHTML — это практически тот же HTML, но с небольшими различиями. Существует несколько версий (1.0, 1.1, 2.0 — в разработке) и типов (strict, transitional, frameset) XHTML. Для создания страниц я рекомендую использовать XHTML Transitional или Strict. XHTML Strict требует более строго соблюдения синтаксиса и накладывает ряд дополнительных ограничений. Если необходима страница с фреймами, то используйте XHTML Frameset.

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

HTML:

XHTML:

Урок 5: Просмотр HTTP-заголовков

Sat, 15 May 2010 09:21:26 +0400

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

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

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

В качестве инструмента для просмотра HTTP-заголовков я предлагаю использовать плагин к браузеру FireFox LiveHTTPHeaders. Установить его можно так: Инструменты — Дополнения — Поиск дополнений, ищем по слову "headers", устанавливаем LiveHTTPHeaders. После перезагрузки браузера появится новая функция: Инструменты — Просмотр HTTP-заголовков.

Предлагаю опробовать плагин на странице, созданной на предыдущем уроке. Открываем окно "Просмотр HTTP-заголовков", жмем "очистить", чтобы убрать появившиеся заголовки (при запросе домашней страницы браузера и т.п.). Далее делаем запрос страницы, например, http://test-domain2/. В окне заголовков появились заголовки от запросов браузера и от ответов веб-сервера:

Урок 4: Создание HTML-страниц 2

Sun, 02 May 2010 11:48:08 +0400

Замечание

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

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

Создайте в корневом каталоге одного из ваших виртуальных доменов файлы index.html и style.css. В первый будем помещать HTML-код, а во второй — CSS-стили страницы. Набросайте в index.html следующий код:

  
   
    Главная страница 
     
    
    
   
     
       
        Шапка 
       
       
        Меню 
       
       
        Левый контент 
        Основной контент 
        Правый контент 
       
       
        Подвал

в файл style.css:

* {font-family: verdana; font-size: 12px}
body {margin: 0; padding: 0}

.content {border-collapse: collapse}  
.content td {padding: 0}

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

Далее, рисуем шапку страницы в графическом редакторе. Я сделал следующий набросок в редакторе Gimp (исходник):

Урок 3: Создание информационного блока с тенью (HTML + CSS)

Wed, 21 Apr 2010 10:22:27 +0400

Замечание

Тень для блока можно создать при помощи CSS-стиля box-shadow (посмотреть пример), который в настоящее время поддерживается всеми адекватными популярными браузерами. Так что, старые добрые методы верстки теней постепенно уходят в небытие :)

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

Первый шаг при создании блока — его отрисовка в графическом редакторе. Рисуется он очень просто: прямоугольник средних размеров с примененным к нему эффектом тени. Я, например, нарисовал в редакторе Gimp (исходник):

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

Зеленый участок — вертикально-однородная тень, синий участок — горизонтально-однородная тень, красные участки — окончания/закругления тени, которые необходимо описывать отдельными изображениями. Тень должна быть полностью охвачена воображаемой синей и зеленой маской, допускается захват лишней белой полоски шириной 1-2 пикселя. Для моего изображения оказалось достаточной ширина в 10 пикселей. Красные участки, соответственно, оказались размером 10x10 пикселей.

Создание графических панелей (HTML + CSS)

Sat, 10 Apr 2010 11:28:32 +0400

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

или горизонтального меню:

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

Стилизация таблиц (HTML + CSS)

Sun, 04 Apr 2010 02:35:27 +0400

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

Код таблицы:

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

Стилизация гиперссылок (HTML + CSS)

Fri, 02 Apr 2010 08:04:29 +0400

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

:link

применяет стили для ссылок, которые еще не посещены

:hover

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

:active

применяет стили для ссылки при нажатии на нее

:visited

применяет стили для ссылок, которые уже посещены

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

a {color: black}
a:hover {color: red}

Поля и отступы (HTML + CSS)

Thu, 25 Mar 2010 12:28:30 +0300

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

Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:

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

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

Каскадные таблицы стилей (CSS)

Thu, 18 Mar 2010 14:07:58 +0300

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

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

Hello, world!!!

В контейнер span заключен текст "Hello, world!!!". span — это парный тег, который сам по себе никаких видимых изменений над своим содержимым не производит, однако позволяет применить определенные стили CSS, указанные в нем. Чаще всего его используют именно для этих целей. В нашем теге заданно два стиля CSS: стиль font-family со значением verdana и стиль font-size со значением 10px. Стиль font-family задает шрифт текста, а стиль font-size — его размер. Таким образом, текст "Hello, world!!!" будет отрисован шрифтом Verdana размером 10 пикселей.

Как и в случае с HTML ключом к успеху является знание наиболее полезных и распространенных стилей CSS. А в идеале — всех . Их достаточно много, некоторые являются общими для всех типов элементов, некоторые специфичны для определенного типа. Приведу несколько очень распространенных стилей, помимо font-family и font-size: background-color — фоновый цвет элемента, например, значение red или #ff0000 соответствует красному цвету (второй вариант записи — шестнадцатеричное значение цвета в HTML, может быть получено из таблицы HTML-цветов, либо с помощью специального калькулятора), color — цвет текста, text-align — горизонтальное выравнивание текста (left — по левому краю, center — по центру, right — по правому, justify — по ширине). Познакомиться с существующими стилями будет вашим домашним заданием :).

Урок 2: Создание HTML-страниц

Sat, 13 Mar 2010 11:14:27 +0300

Продолжаем разговор об HTML. Для создания HTML-страниц применяются специальные программы — HTML-редакторы. В принципе, можно пользоваться обычным текстовым редактором, однако у HTML-редакторов присутствует незаменимо полезная функция подсветки синтаксиса. Некоторые редакторы имеют функцию автозавершения кода, систему справки по языку и т.п. Из бесплатных редакторов, на мой взгляд, наиболее предпочтительными являются PHP Expert Editor:

Программу можно найти по адресу: http://www.ankord.com/ru/phpxedit.php. PHP Expert Editor является платной, однако жители бывшего СССР могут ее бесплатно зарегистрировать здесь.

Язык разметки гипертекста (HTML)

Wed, 03 Mar 2010 13:26:40 +0300

Основная часть контента сайта состоит из файлов. Уверен, каждый из вас когда-либо встречал файлы с расширением htm или html. Это текстовый файл, описывающий разметку страницы сайта, то есть расположение и форматирование текста, графики, ссылок и т.п. при помощи языка разметки HTML (HyperText Markup Language). Организовать полный курс по языку HTML я вряд ли смогу, так как тема очень обширная, поэтому в этой статье я расскажу о базовых понятиях, достаточных для понимания сути. Более полную информацию вам стоит искать в книгах или специализированных интернет-ресурсах по HTML, благо, таковых немало.

HTML-страница строится из кирпичиков — тегов, которые представляют собой текстовые сущности, заключенные в треугольные скобки ("<" и ">"), например:

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

текст

Урок 1: Установка и настройка веб-сервера Apache

Sat, 27 Feb 2010 14:39:29 +0300

Ну что ж, мы поговорили достаточно о веб-сервере, пришло время его нам установить и опробовать в деле. Существует сформировавшийся перечень наиболее распространенных веб-серверов, при выборе во внимание принимаются конкретные задачи, под которые он разворачивается. Остановим наш выбор на бесплатном веб-сервере Apache. Считаю его идеальным для сайтов начального и среднего уровня. Конечно, можно пойти легким путем — установить готовый комбайн Denwer, как это делает большинство новичков, но в нашем случае помимо результата важны также и теоретические знания. А после сегодняшнего урока ваш скилл повысится однозначно :)

Идем на страницу загрузки проекта — http://httpd.apache.org/download.cgi и качаем последнюю стабильную версию под Windows в виде MSI инсталлятора (в моем случае это был apache_2.2.14-win32-x86-no_ssl.msi). Начнем установку. Первый диалог, который может ввести нас в заблуждение — это диалог ввода информации о сервере:

Конфигурировать наш сервер мы будем после установки, а сейчас давайте не будем особо париться и впишем в поля "Network Domain" и "Server Name" localhost, а в поле "Administrator's Email Address" ваш адрес электронной почты (о том, что такое localhost, речь пойдет позже). Нижние переключатели не трогаем. Жмем "Next", соглашаемся с типичной установкой, еще раз "Next". Инсталлятор предложит выбрать директорию, в которую будет установлен веб-сервер:

Принципы функционирования веб-сервера

Thu, 25 Feb 2010 14:31:45 +0300

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

Помню, давно я думал, что Интернет сосредоточен в одном месте, представлял что-то типа лаборатории, где расположено большое количество аппаратуры, поддерживающей работу всего этого. Тогда я не мог оценить масштабы Глобальной сети и сложности ее структуры. В действительности же, Интернет — это абстрактное понятие, ресурсы Интернета разбросаны по оборудованию на всем земном шаре. Для связи этого оборудования между собой на огромных расстояниях придумали специальные алгоритмы и стандарты, в частности, протокол TCP/IP, на котором в настоящее время функционирует наш Интернет. Согласно этому стандарту, каждый компьютер, находящийся в Глобальной сети, имеет свой уникальный адрес — IP-адрес. IP-адрес представляет собой последовательность четырех чисел в диапазоне от 0 до 255, разделенных между собой точками (например, 92.166.31.18). Один компьютер может связаться с другим компьютером в сети, зная его IP-адрес. Но сказать "компьютер связался с компьютером" не совсем верно, так как связываются не сами компьютеры, а сетевые службы (программы, если хотите), выполняющиеся на них. Допустим, вы отправляете электронную почту дедушке, при этом ваша почтовая программа связывается с почтовым сервером для отправки письма.

На компьютере одновременно может работать несколько сетевых программ, поэтому помимо IP-адреса для связи протоколом TCP/IP предусмотрено дополнительно такое понятие как порт. Порт — это число в диапазоне от 1 до 65536. Таким образом, минимальным условием для связи одной сетевой программы с другой является наличие у первой IP-адреса и номера порта второй. Совокупность IP-адреса и порта принято записывать через двоеточие (например, 192.168.35.2:443).

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

Добро пожаловать!

Sun, 21 Feb 2010 06:12:51 +0300

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

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

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

В первой статье мы немного поговорим о теории: принципах функционировании веб-сервера.

Шапка
Меню
Левый контент	Основной контент	Правый контент
Подвал