Создание сайта. Часть 4: как работает интернет

версия для печати

Продолжение серии статей, посвященной сайтострою. Полное содержание - в конце статьи.

Из заголовка понято, разбираемся, как устроен инет :) На данный момент у вас уже есть несколько html-страниц, оформленных в едином дизайне. Свое творение вы гордо называете сайтом и пора его представить миру :)

Сеть

Объясняю совсем упрощенно, провожу аналогию с городом. Сеть – это город. У компа, подключенного к сети есть адрес (как адрес дома в городе). На таком компьютере открыто несколько портов. Порт - это условное деление, дополнительный "адрес" (как квартира в доме).

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

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

Запрос данных сайта

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

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

Браузер клиента отправляет пакет с запросом данныx c вашего сайта. Web-сервер принимает запрос, собирает ответ и отправляет клиенту. Этот ответ состоит из файлов сайта, т.е. тех самых картинок, css-файлов и html-страницы, которые вы сделали и разложили по каталогам. Отправляется конечно не весь сайт, только то, что просил браузер. Получив ответ, браузер разбирает полученные файлы и рисует пользователю ответ.

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

Хостинг

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

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

Сборка страниц через SSI

По идее этот раздел должен был идти сразу за HTML/CSS. Но не зная, как работает интернет, вы с трудом поймете сказанное здесь.

Предположим, вы создали сайт-визитку из трех страниц (сейчас вы уже это можете). Все оформлено в едином дизайне, т.е. на каждой странице одинаковая шапка, меню и подвал, только контент разный. Чтобы при каких-то изменениях, например в шапке, не приходилось переписывать все три файла, такие страницы делят на части: шапку в отдельный файл, меню – в другой и т.д. Вот для этого каталог [..\inc], там будут части вашего сайта. Куски контента можно оставить в корневом каталоге.

Раскидали страницы на части, а как собрать их в ответе браузеру? Есть как минимум два способа, один из них – использование SSI. Второй – через PHP. Если доберетесь в своем самообразовании до него, то узнаете, как это делается.

SSI - Server Side Includes. Перевести можно, как "включения на стороне сервера". Подробнее читайте об этом в Википедии. Чтобы сборка на языке SSI работала, в Apache должен быть включен модуль mod_include. Включен он или нет, вам нужно заранее выяснить у потенциального хостера, до того, как заключить с ним договор и залить сайт на сервер.

Сейчас ваш сайт должен выглядеть примерно так:

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

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

То, что осталось от главной страницы, назовите index.shtm (внимание на расширение). Учтите так же, что у хостера серваки работают под управлением Linux, а следовательно нужно следить за регистром имен файлов. Т.е. записи типа head.HTM и head.htm - разные!

В корневом каталоге сайта создайте файл ".htaccess". Прям как написано в кавычках, так и называйте (в начале - точка). Это файл настроек Apache, в реальности – обычный текстовый файл. В настройках пропишите:

# Указываем веб-серверу, какой файл считать индексным (главным) в каталоге
DirectoryIndex index.shtm

# Связываем MIME-тип с расширением и вешаем на расширение парсер
AddType text/html .shtm
AddHandler server-parsed .shtm

#Разрешаем включения на стороне сервера (SSI) посредством mod_include
Options Includes

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

Еще момент. Я не уверен, но возможно для Apache важно окончание строк в файле настроек. Т.к. он работает под Linux, то и окончания строк должны быть линуксовые. Если ваш .htaccess не будет работать на хостинге, попробуйте изменить окончания строк. В Notepad++ исправляется через меню Правка > Конверсия Конца Строки.

Теперь в index.shtm добавьте подключения нужных файлов в нужных местах. Выглядеть это может так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--#include file='inc/head.htm'-->
<body>
<!--#include file='inc/menu.htm'-->
<h4>Введение</h4>
<p> я не дам вам готовых рецептов, не научу вас программировать или хотя бы в какой-то мере создавать сайты. Весь путь становления вебмастера, каким бы длинным он для вас не оказался, придется пройти самостоятельно.</p>
<!--#include file='inc/footer.htm'-->
</body>
</html>

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

Это все. Если вы собираетесь остановиться на таком варианте организации сайта, тогда читайте по теме SSI, все что найдете. Я в своем обучении пошел дальше.

[1oo%, EoF]
Остальные статьи серии:
1. Идея
2. Работаем над дизайном
3. HTML, CSS
4. Как работает интернет
5. Apache
6. JavaScript
7. PHP
8. MySQL
9. cookie и сессии
10. mod_rewrite

Похожие материалы: О доменах и сайтах. Виртуальный хостинг

Понравилась статья? Расскажите о ней друзьям:


Комментарии
Для работы модуля комментариев включите javaScript


Показать/скрыть правила
Имя
[i] [b] [u] [s] [url]
:-) ;-) :D *lol* 8-) :-* :-| :-( *cry* :o :-? *unsure* *oops* :-x *shocked* *zzz* :P *evil*

Осталось 1000 символов.
Код защиты от спама Обновить код
Каждый комментарий проходит ручную модерацию. 100% фильтрация спама.
Продвижение
Время
Метки