Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий

Алексей Гладкий

Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Введение

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

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

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

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

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

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

Итак – начинаем!

Глава 1.

С чего начать

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

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

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

Баннер – статичное или динамичное изображение стандартного размера (как правило – 468х60 пикселей или 100x100 пикселей), предназначенное для размещения рекламы.

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

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

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

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

Доменное имя

Интернет-обозреватель (браузер)

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

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

Контент – информационное наполнение сайта: текст, изображения, таблицы и иные элементы, упорядоченные в соответствии с заранее разработанной структурой сайта при помощи тэгов. Иначе говоря, контент – это то, что вы видите на сайте.

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

Посещаемость сайта

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

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

Трафик – объем принятой и переданной информации. Обычно единицей измерения трафика является один мегабайт.

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

Фреймы

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

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

Что представляет собой современный веб-сайт?

Итак, что же представляет собой современный веб-сайт? На этот вопрос мы попытаемся ответить в данном разделе.

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

Давно прошло время, когда сайтом называлась средней привлекательности страничка в Интернете, на которой содержалась статичная информация вроде

«наша фирма открылась тогда-то, мы продаем бананы и ананасы, наш адрес такой-то, а телефон – такой-то»

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

Кроме этого, практически каждый сайт содержит такие страницы, как

Ссылки

Форум

Контакты

На странице

Ссылки

Страница

Форум

Страница

Контакты

Контакты

• Имя

• 

E-mail

Электронный адрес

•

Тема сообщения

•

Текст сообщения

•

Защитный код

•

Отправить

Отослать

Send

Submit

Пример формы для отправки сообщения представлен на рис. 1.1.

Рис. 1.1.

На многих сайтах имеется также страница

Гостевая книга

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

Обо мне

Мой фотоальбом

Мои друзья

Мои увлечения

Моя семья

Некоторые сайты имеют страницу, которая называется

Карта сайта

Карта сайта

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

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

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

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

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

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

Разработка концепции сайта

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

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