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

А. А. Гладкий 

ВЕБ-САМОДЕЛКИН 

КАК САМОМУ СОЗДАТЬ САЙТ 
БЫСТРО И ПРОФЕССИОНАЛЬНО 

Москва 
Берлин 
2020 

УДК 004.738.5 
ББК 16.263.43  

Г52 

Гладкий, А. А.

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

профессионально / А. А. Гладкий. — Москва ; Берлин : Директ-
Медиа, 2020. — 264 с.

ISBN 978-5-4499-1220-6 

Разве это не замечательно — уметь собственноручно создать и сопро-

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

Прочитав эту книгу, вы узнаете, что представляет собой современный 

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

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

Легкий, доступный стиль изложения, а также большое количество 

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

Текст печатается в авторской редакции. 

УДК 004.738.5 
ББК 16.263.43  

ISBN 978-5-4499-1220-6
© Гладкий А. А., текст, 2020
© Издательство «Директ-Медиа», оформление, 2020

Введение 

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

Вначале мы поговорим о том, с чего начинается процесс создания 
сайта: разработка концепции, выбор хостинга и др. После этого мы расскажем 
о том, как создавать веб-страницы с помощью языка программирования 
HTML. Пусть вас не смущает слово «программирование», если вы 
ранее никогда и ничем подобным не занимались: изучив соответствующую 
главу, вы поймете, что писать программные коды на языке HTML — 
с технической точки зрения почти то же самое, что и набирать обычный 
текст в редакторе Word или в «Блокноте». 
Однако вручную сайты уже давно практически не создаются. Для этого 
предназначены специальные программные средства, с некоторыми из которых 
мы познакомимся в соответствующих главах книги. Вы увидите, что 
создание сайта с помощью таких программ — это несложный и увлекательный 
процесс, во многом напоминающий обычное конструирование. 
Если вы хотите, чтобы сайт был посещаемым (собственно, а иначе зачем 
его создавать?), то необходимо выполнить его продвижение и «рас-
крутку». Эти вопросы также подробно рассматриваются в данной книге. 
Итак — начинаем! 

Глава 1. С ЧЕГО НАЧАТЬ 

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

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

В среде веб-разработки используются перечисленные ниже поня-
тия, термины и определения.  
Баннер — статичное или динамичное изображение стандартного 
размера (как правило — 468×60 пикселей или 100×100 пикселей), 
предназначенное для размещения рекламы.  
Веб-сервер — мощный компьютер со специальным программ-
ным обеспечением, который обеспечивает доступ большого количе-
ства пользователей к хранящейся на нем информации. Именно на 
веб-серверах находятся сайты и веб-страницы.  
Веб-страница — логическая единица Всемирной паутины, одно-
значно определяемая адресом (URL) и представляющая собой файл 
HTML-формата. Веб-страница может включать в себя текст, графиче-
ские объекты, фотографии, аудио- и видеоматериалы и иные элемен-
ты. Все веб-страницы можно разделить на две категории: статиче-
ские (на них представлена постоянная информация) и динамические 
(наиболее характерный пример — страница со списком результатов, 
выданными поисковой системой). Для просмотра веб-страниц пред-
назначены 
специальные 
программы, 
называемые 
Интернет-
обозревателями, или браузерами. Совокупность логически связанных 
между собой веб-страниц образует сайт. 
Гиперссылка — слово или изображение на веб-странице (или в 
любом другом электронном документе), содержащее ссылку на дру-
гие страницы или файлы, Переход по гиперссылке осуществляется 
щелчком мыши.  
Главная страница — основная (титульная) страница сайта. Здесь 
представлена общая информация о сайте с кратким описанием того, 
что содержится во всех остальных его разделах. Обычно внешние 
ссылки делаются именно на главную страницу сайта, поэтому посе-
тителей на ней бывает значительно больше, чем на любых других 
страницах данного сайта. 
Доменное имя — последовательность из слов или символов, ко-
торую необходимо ввести в адресную строку Интернет-обозревателя 
для того, чтобы зайти на сайт. Иначе говоря, доменное имя — это ад-
рес веб-ресурса в Интернете. 

Интернет-обозреватель (браузер) — программа, предназначен-
ная для просмотра содержимого веб-страниц (самые известные — 
Internet Explorer, Opera и Mozilla Firefox).  
Клиент — компьютер, который использует ресурсы других ком-
пьютеров сети, в первую очередь — серверов. Кроме этого, клиентом 
называется программа, программа, которая вырабатывает запросы 
на доступ к удаленным ресурсам и передает их по сети на конкрет-
ный компьютер.  
Контекстное меню — перечень команд, открываемых нажатием 
правой кнопки мыши. Как правило, этот перечень зависит от текуще-
го режима работы и от того, в каком месте вызвано главное меню. 
Контент — информационное наполнение сайта: текст, изображе-
ния, таблицы и иные элементы, упорядоченные в соответствии с за-
ранее разработанной структурой сайта при помощи тэгов. Иначе го-
воря, контент — это то, что вы видите на сайте. 
Куки (Cookies) — элемент данных, с помощью которых удаленный 
сервер помечает конкретный Интернет-обозреватель при его посеще-
нии. В следующий раз сервер «узнает» этого пользователя, благодаря 
чему сможет либо предложить ему какие-то данные с учетом заявлен-
ных прежде пожеланий либо, наоборот, не показывать этому посети-
телю те данные, которые он уже видел (например, рекламу). Отметим, 
что куки (cookies) не умеют изучать содержимое жесткого диска ком-
пьютера пользователя. Некоторые их сведения хранятся лишь в тече-
ние текущего сеанса работы с сервером и автоматически удаляются 
сразу после закрытия интернет-обозревателя. Но есть и такая инфор-
мация, которая сохраняется в отдельном файле и записывается на 
жесткий диск в специально предназначенные папки. 
Посещаемость сайта — количество посетителей сайта за опре-
деленную единицу времени. Для ведения статистики посещений 
предназначены специальные счетчики, которые можно найти, 
например, на портале www.hotlog.ru. Посещаемость сайта является 
ключевой характеристикой для определения его рейтинга или для 
оценки того, насколько он интересен и полезен для кого-либо.  
Прокси-сервер — промежуточный веб-сервер, который исполь-
зуется в качестве посредника между компьютером пользователя 
(а точнее — Интернет-обозревателем) и конечным веб-сервером. Ис-
пользование прокси-сервера позволяет решить две важные задачи: 
экономия трафика с одновременным увеличением скорости доступа 
за счет кэширования данных на жестком диске компьютера, и защита 
локальной сети. Также работа через прокси-сервер позволяет эконо-
мить IP-адреса, поскольку в данной ситуации требуется лишь один 
общий IP-адрес. 

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

Хостинг — размещение сайта на внешнем сервере (т. е. когда 

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

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

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

Очень многое зависит от того, кто и с какой целью создал сайт, 

каково его информационное наполнение, выполнена ли оптимиза-

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

Как мы уже отмечали ранее, каждый сайт имеет свою главную 

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

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


Имя — здесь отправитель сообщения вводит свои имя в произ-
вольной форме (это может быть ФИО, название организации,
псевдоним, и др.).

E-mail (может называться Электронный адрес или т. п.) — в данном 
поле нужно ввести электронный адрес, на который отправитель 
сообщения желает получить ответ. Данный параметр следует за-
полнять внимательно, поскольку если указать электронный адрес с 
ошибкой — ответ на отправленное сообщение получен не будет.

Тема сообщения — в данном поле можно ввести тему сообщения.
Это делается по аналогии с тем, как заполняется данный пара-
метр в обычных электронных письмах.

Текст сообщения — данный параметр может называться по-
разному, а может и вообще не иметь названия, но суть от этого не
меняется: это поле предназначено для ввода текста сообщения.
Отметим, что на некоторых сайтах существует ограничение по
количеству символов, вводимых в данное поле (например, не бо-
лее 500 или 1000 символов).

Защитный код — в данном поле необходимо ввести код, указан-
ный рядом. Защитный код генерируется автоматически при каж-
дом открытии данной страницы, его ввод необходим для гаран-
тии того, что сообщение отправляется человеком, а не
программой или роботом.

Отправить — данная кнопка (она может называться по-
разному — Отослать, Send, Submit и т. д.) предназначена для от-
правки подготовленного сообщения.

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

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

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

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

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

рекламы. Правда, рекламодатели придут к вам только в том случае, 
если ваш сайт будет достаточно посещаем. Иначе говоря, если на ваш 
сайт заходят только ваши друзья и родственники — рассчитывать на 
приток рекламодателей не стоит. Поэтому, чтобы размещать плат-
ную рекламу, необходимо заранее подумать о раскрутке своего сайта, 
чтобы он был интересен большому числу пользователей. 
Еще один вариант зарабатывания денег с помощью сайта — раз-
мещение на нем платных материалов. Это могут быть, например, 
книги, статьи, мультимедийные файлы, энциклопедические сведения 
и т. д. Чтобы получить доступ к этим материалам, пользователь дол-
жен будет не только щелкнуть мышью на соответствующей ссылке, 
но и перевести определенную суму денег по указанным реквизитам. 
В подобных ситуациях для расчетов удобно использовать электрон-
ные системы интернет-платежей — например, WebMoney, Ян-
декс.Деньги и т. п. 
 
ПРИМЕЧАНИЕ 
Учтите, что легких денег таким способом вы не заработаете. 
В настоящее время в Интернете имеется великое множество самых 
разных материалов на любые темы, лежащих в открытом доступе. По-
этому пользователи очень не любят получать что-то за деньги, а если 
и платят — то лишь за действительно эксклюзивные, уникальные, и в 
то же время — необходимые и полезные материалы. 
 
Многие владельцы сайтов любят проводить на своих веб-
ресурсах опросы на разные темы. Кого-то интересует отношение 
клиентов к компании («Довольны ли вы сотрудничеством с нашей 
компанией?»), кого-то — мнение посетителей по злободневной теме 
(«Поддерживаете ли вы войну в Ираке?»), а кто-то советуется с посе-
тителями («Как вы считаете, в какой валюте лучше хранить сбереже-
ния — в долларах, евро или рублях?») и т. п. После вопроса предлага-
ется несколько вариантов ответов (например, «Да», «Нет», «Не знаю» 
и др.), и каждый пользователь может с помощью соответствующего 
переключателя выбрать какой-то один вариант. При этом во многих 
опросах исключается возможность повторного ответа со стороны 
одного и того же пользователя (читай — полученного с одного IP-
адреса) в течение определенного промежутка времени (как прави-
ло — сутки). 

Кроме этого, современный сайт может иметь целый ряд иных 

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