Как сделать сайт?

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

Что такое сайт?

Сайт - это набор файлов. Эти файлы хранятся на сервере (это особый компьютер). Как только вы открываете браузер (Chrome, Firefox, Safari и т.п.) и переходите по ссылке, то вы скачиваете html файл с сервера. Затем браузер обрабатывает этот файл и показывает вам страницу сайта.

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

Вы прямо сейчас можете посмотреть HTML код этой страницы, если нажмёте правой кнопкой мыши на пустое пространство сайта и выберите пункт "исходный код":

Меню правой кнопки мыши в браузере FireFox

Вы увидите HTML код, в котором будут вперемешку русские и английские слова, на подобии этого:

- это html код. Большая его часть не выводится на экран, а формирует страницу (дизайн).

Но об содержании html файлов поговорим в следующих статьях. Сейчас же обсудим как эти файлы хранятся и какими бывают. А хранятся они на серверах, которые принадлежат хостинговым компаниям.

Что такое хостинг?

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

Серверы хостинга имеют бесперебойное электропитание (с дизельными генераторами на улице на всякий случай) и несколько интернет провайдеров. Дублирующие меры необходимы для бесперебойного доступа к сайту даже в случае чрезвычайного происшествия. Для размещения своего сайта можно использовать и свой домашний компьютер, но он должен быть включен 24/7 и иметь постоянный доступ к интернету, чтобы сайт работал без перебоев. Но выгоднее заплатить хостинговой компании. Для начинающих могу предложить виртуальный хостинг, на котором легко будет тренироваться - MouseDC.ru:

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

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

Что такое домен?

Домен - это имя сайта. К примеру, «site.ru» или «vk.com». Чтобы логически соединить сервер, на котором хранятся данные сайта и доменное имя, надо в настройках домена написать ip адрес сервера. Не переживайте насчёт этого действия. Часто хостинговые компании предлагают купить домен вместе с хостингом. И привязку домена к серверу они делают автоматически. А если что-то пошло не так, то сотрудники техподдержки помогут советом и делом. Не бойтесь писать им.

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

Какие сайты бывают?

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

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

Внутренности таких сайтов выгладят как файлы, разложенные по папкам. К примеру, вот структура сайта будет у сайта с двумя страницами: титульной (главной) страницей и страницей «о компании»:

- здесь:
site.ru - это так называемая «корневая» папка сайта
about.html — это файл страницы «о компании»
index.html — это файл титульной страница сайта

Сначала разберёмся со страницей «о компании»

Если захотите увидеть страницу сайта «о компании», то надо открыть страницу «site.ru/about.html». Обратите внимание не слеш «/», он ставится по логике файлов и папок. Если бы страница «about.html» находилась в какой-то подпапке, то путь был бы длиннее. К примеру:

- в таком случае, чтобы открыть страницу about.html, надо набрать в адресной строке браузера «site.ru/folder/about.html».

Посмотрим та титульную страницу сайта, на index.html

В интернете принято называть титульную страницу как index.html. Эта страница так часто используется, что принято по умолчанию проверять а не запрашивается ли она. К примеру, если вы перейдёте по ссылке «site.ru», то скачаете и откроете именно файл index.html. Эта же страница будет ещё и по адресу «site.ru/index.html». Поэтому прибавлять к адресу «/index.html» нет необходимости.

Как загрузить html файлы на сервер?

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

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

Динамичные сайты

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

Программирование

Существуют языки программирования, которые позволяют модифицировать страницу «на лету», во время запроса. Это сильно упрощает жизнь сайтостроителям. Представьте, что на сервере вместо index.html лежит файл index.php. Расширение «.php» означает, что этот файл может быть обработан языком программирования. И в зависимости от переданных параметров выдать страницы с разным содержанием.

Таким параметром для динамичных сайтов является строка запроса. К примеру, если зайдёте на новостной сайт через запрос:

site.ru/index.php?novost=1

или

site.ru/index.php?novost=2

То страница сайта выдаст новость под номером 1 или 2, потому что в запросе указан параметр novost. Всё, что находится после знака вопроса «?» в строке запроса, является параметром (параметров может быть несколько).

Обратите внимание, что в двух примерах запрос идёт на один и тот же файл site.ru/index.php. Именно в этом состоит сила динамичных сайтов: один файл может выдавать совершенно разный результат в зависимости от передаваемых параметров и от того, как запрограммировать его.

База данных

Как вы уже заметили из предыдущего параграфа, новость под номером 1 и новость под номером 2 должны откуда-то браться. Для хранения подобных вещей люди придумали «базы данных». Если утрировать, то общение с базой происходит примерно так:

Страница сайта: Эй, база данных, дай мне новость с номером 2!
База данных: Вот тебе весь текст новости, которая сохранёна под номером 2.

Это упрощённый пример работы базы данных и взаимодействия. Глубже рассказывать не буду, потому что это тема для большой статьи.

Система управления контентом

Чтобы не учить язык программирования PHP и не программировать взаимодействие с базой данных, а просто сделать свой сайт, люди начали разрабатывать CMS (Content Management System - системы управления контентом).

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

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

С чего начать создание сайта?

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

После покупки хостинга и домена должно пройти несколько дней, чтобы настройки домена окончательно прописались и вели на сервер с файлами сайта. После чего можно начать эксперименты.

P.S.

Это первая статья из цикла создания сайта. По мере написания статей буду добавлять ссылки на них в эту статью.

Пожалуйста, напишите в комментариях любые вопросы по теме создания сайтов. Что именно стоит рассказать? Где есть вопросы?