Как делаются сайты?

24.11.2003

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

Что такое HTML?

HTML (Hypper Text Markup Language - Язык разметки гиппер текста) - это основополагающий язык Internet, на котором пишутся абсолютно все просматриваемые вами страницы. Возможно, Вы уже слышали про такие технологии как CGI, PHP, JSP ASP, и тд - так вот это всего-лишь способы создать HTML страницу, а не альтернативные по отношению к HTML языки. И даже Flash ролики, которым в свое время предвещали большое будущее - всего-лишь объекты, вставляемые в HTML.
 
Важное свойство HTML - его открытость. HTML страница представляет собой обычный текстовый файл, который можно прочитать и, главное, понять. Сделать это можно нажав View->Source (Вид->Просмотр HTML кода) в Internet Explorer. Перед Вами выскочит окошко Notepad, в котором Вы увидите текст со странными вставками типа . Эти вставки называются HTML тэгами и играют важнейшую роль в HTML документе. Умение кодить HTML - это и есть знание всех этих тэгов, которых на самом деле не так много как кажется.

Проблемы несовместимости

Огромнейшая проблема развития WWW - различия програмного и аппаратного обеспечения пользователей. Ваши страницы будут просматриваться с помощью самых разных браузеров, установленных под разными операционными системами на разных машинах. И сколько бы Вы не старались сделать свои страницы красивыми и привлекательными, многие пользователи могут увидеть их совсем в другом, иногда нечитабельном виде.
 
Создавать страницы, которые все пользователи увидят одинаково невозможно. Потому советую запомнить такой принцип: Страницы нужно делать такими, чтобы большенство пользователей увидело их так, как Вы задумали, а остальные немногие - чуть хуже, но в читабельном виде.
 
Первая часть проблемы - различия разрешений мониторов. Наиболее састо используются разрешения 800х600 и 1024х786. Реже - 640х480. Разброс давольно большой, и игнорировать эту проблему нельзя. Есть два пути ее решения. Первый - создавать страницы с фиксированной шириной, подходящей для большенства мониторов. Например, 620 пикселов. Или 750-780 если Вы все-таки решили принебречь пользователями с разрешением 640х480 (так часто поступают, поскольку их осталось совсем мало). Второй способ - создавать страницы с "резиновым" дизайном. Тоесть страницы, растягивающиеся по всей ширире окна. В таком случае надо проследить, как страница выглядит при разных разрешениях, и ни в коем случае не допускать появления горизонтальной прокрутки как минимум при разрешении 800х600.
 
Вторая часть проблемы несовместимости - различия браузеров. Дело в том, ни один браузер не соответствует стандарту HTML 4.0 в полной мере. Каждый производитель понимает этот стандарт по-своему, в результате чего одна и та же страница выглядит совершенно по-разному в разных браузерах.
 
Первое решение - использование стандарта HTML 3.0, тоесть полный отказ от JavaScript (тем более VBScript) и CSS. Если подумать, жертва небольшая, но HTML 3.0 понимается браузерами почти одинаково. Ну а можно не полностью отказываться от новых технологий, а просто не наделять их важными функциями. Пускай они будут всего-лишь украшениями, и страница будет нормально выглядеть и без них.
 
Второе решение - ориентироваться только на конкретный браузер. Хотя просмотреть страницу в остальных тоже надо. Самый популярный браузер в России и СНГ - Microsoft Internet Explorer. Он, пожалуй, меньше всех соответствует стандартам, но большенство дизайнеров создают свои сайты именно для него. Ведь им пользуются 95% юзеров. С такой цифрой не поспоришь - выходит стандарты диктует не Интернет Концорциум, а корпорация Microsoft (как это не печально). Остальные же 5% пользуются в основном Opera и Netscape, и составляют давольно специфическую группу, состоящую из Unix програмистов и веб-дизайнеров.

Визуальные редакторы

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

Севрерные скрипты

Если сайт состоит менее чем из 10 страниц, и на сайте не предусматриваются никакие интерактивные разделы (чат, гостевая книга, форум, форма обратной связи и тд), вполне хватит навыков создания статических HTML файлов. Они будут спокойненько лежать на сервере, и посылаться пользователю при каждом запросе. Для изменения информации на сайте Вам придется редактировать соответствующие HTML документы и заливать на сервер обновленную версию.
 
Ну а если Вам нужна, например, гостевая книга? Или Вы смотрите далеко вперед и считаете что Ваш сайт в скором времени разрастется и такой подход будет уже недопустим? В таком случае Вам придется изучить еще один-другой язык.
 
Речь идет о технологии CGI (Common Gateway Interface) и различных ее производных. (PHP, ASP, JSP и тд). Эти технологии позволяют принимать запрос пользователя и "на лету" создавать для него готовую страницу. Например, пользователь нажимает на ссылку http://www.sitename.zone/cgi-bin/index.pl?sec=links. На сервере запускается Perl скрипт index.pl, который принимает параметр sec равный "links". Скрипт понимает, что от него хотят каталог ссылок, и выдает пользователю страницу с ссылками, взятыми, например, из базы данных или из файла. Причем для добавления новой ссылки Вам больше не придется редактировать HTML документ. Достаточно просто вписать ее в таблицу базы данных или в файл.
 
Плюс к тому, CGI позволяет обрабатывать формы, заполненные пользователем. Он получит все введенные данные, проверит их, и сохранит куда-нибудь если все в порядке или выдаст сообщение об ошибке, если таковая была.
 
Наиболее распространенный язык для написания серверных скриптов - это PHP. На нем сделано огромное количество сайтов в интернете, в том числе и Мастеру.ru. Он создан спецально для этих целей и позволяет просто и эфективно выполнить почти любую задачу. Реже используется Perl (хотя в свое время с ним никто не мог конкурировать). Он создан совсем для других нужд, что делает его чуть-чуть неудобным. Но Perl намного универсальнее и мощнее PHP. Есть еще ASP - разработка ее величества Microsoft, но она редко используется, поскольку работает только под Windows, которая в свою очередь не может конкурировать в сети с операционными системами семейства Unix. Широко используется также SSI (Server-Side Includes) - технология, позволяющая выполнять только простые операции, чего зачастую бывает достаточно.

Новые и редкие технологии

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