GFStudio.su
 

НАВИГАЦИЯ

 

РЕКЛАМА

 

ПАРТНЕРЫ

 
 

Как работает сайт

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

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

Все начинается с текстового документа. Обратите внимание на то, что под словом текстовый документ подразумевается файл с расширением .txt, который обычно создается при помощи программы Блокнот.

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

Но HTML документ это еще не сайт. Для того чтобы сделать его сайтом, необходимо дать другим людям к нему доступ из интернет. Теоретически вы можете открыть доступ прямо со своего компьютера. Но практически это достаточно сложно, да и вряд ли вы захотите, чтобы кто угодно имел доступ к вашему компьютеру. По этой причине существуют специальные организации, которые позволят вам разместить свой html документ на их сервере и позаботятся о том, чтобы представить к нему доступ. Такие организации называются хостинг провайдерами, а их сервера, куда вы закачиваете свои сайты, называются просто хостингом.

Теперь если пользователь в строке браузера введет ip адрес вашего сервера (вернее сервера вашего хостинг провайдера), то он сможет открыть ваш html документ. А документ, таким образом, превращается в веб-страничку.

Однако почти никто не набирает в строке браузера ip адрес. Вместо этого мы привыкли к адресам вида mysite.com. Такой адрес называется доменным именем вашего сайта или иногда просто доменом. Для того чтобы приобрести доменное имя, вам необходимо обратится к регистратору доменных имен. Не пугайтесь, ехать никуда не надо. Просто заходим на сайт регистратора, подбираем не занятое имя и за небольшую плату регистрируем это имя на себя. Затем на том же сайте регистратора в панели управления доменом прописываем для вашего имени адрес вашего хостинга. И через некоторое время (примерно 24 часа) для того чтобы попасть на ваш сайт, достаточно будет ввести его имя в строке браузера.

Вот только сайт у вас пока еще состоит из одной только странички. Как исправить ситуацию? Самое простое на первый взгляд решение сделать много html документов и закачать их на сервер хостинга. Можно и так. Создаем, например 3 файла index.html, about.html и contact.html.

Теперь, набрав в строке адреса mysite.com/about.html, можно будет прочесть соответствующий html документ about.html. А, набрав mysite.com/index.html, соответственно index.html. Кстати чтобы открыть index.html достаточно просто набрать mysite.com. Почему? Потому что так принято, документ с именем index всегда (почти) считается главной страницей.

Вот мы и сделали простейший сайт. Причем заметьте, ничего сложного нам пока не встречалось. Научиться делать такие сайты можно за несколько дней. Но, к сожалению, такие сайты мало кому нужны, так как они очень просты и мало функциональны. Для устранения этого недостатка нам придется применить языки программирования.

Допустим на вашем сайте необходимо реализовать калькулятор (например, для расчета процентов по кредиту). HTML - это просто язык разметки, он может указать, что кнопка с цифрой "2" находится тут, а вот тут кнопка со знаком "+". Но написать что-то вроде: «если пользователь нажал последовательно на кнопки "2" "+" "2" "=", нужно вывести цифру 4» на нем нельзя. Это уже задача языка программирования. И тут нам на помощь приходит JavaScript. Работает это так: Прямо в том же текстовом теперь уже html документе вы пишите небольшие программы (скрипты). Эти программы в зависимости от действий пользователя или других факторов меняют HTML разметку или содержание самого документа. Допустим, вы при помощи HTML разместили где-нибудь на странице картинку с летящей мухой. HTML позволяет вам жестко задать местоположение этой картинки. При помощи JavaScript можно написать небольшой скрипт, который будет менять местоположение картинки по какому либо закону. Например, заставить ее перемещаться вслед за указателем мыши.

Таким образом, JavaScript позволяет значительно расширить возможности html документа. Однако у него есть недостаток. Программа, написанная на JavaScript, выполняется на стороне клиента, т.е. в вашем браузере. Допустим на сайте есть форма для ввода имени. Вы вводите туда свое имя, например Андрей, нажимаете ОК, и JavaScript может, например, после этого отобразить вам надпись: “Здравствуйте Андрей”. Теперь представим, что на сайт вошел другой человек, которому необходимо знать, есть ли на сайте Андрей. При помощи JavaScript реализовать такую возможность не получится. Т.к. про Андрея знает только его браузер и больше никто. Максимум что может JavaScript это отправить информацию на сервер о том, что Андрей на сайте. Но для того чтобы эту информацию принять и отобразить другим посетителям, на сервере должна быть специальная программа, а не просто html файл.

Такую, программу можно написать, но уже на другом языке программирования, например на PHP. Отличие серверного языка программирования от JavaScript в том, что он выполняется на сервере (хостинге). Этот язык позволяет сохранять на сервере какие либо данные введенные пользователями и в зависимости от этого менять содержимое сайта. Например, вы можете оставить комментарий к какой либо статье на сайте. Для этого вы вводите текст в специальной форме и нажимаете отправить. Текст отправляется на сервер. PHP программа обрабатывает этот текст и включает его в HTML код той статьи, которую вы комментировали. Теперь любой, кто зайдет на этот сайт сможет увидеть ваш комментарий.

На сайте, написанном на PHP, может вовсе не быть HTML документов. Весь HTML код будет генерироваться PHP скриптом. Теперь в строке адреса будет не mysite.com/about.html а mysite.com/about.php, где about.php - это файл с программой, отвечающей за вывод HTML кода.

В отличие от HTML, PHP - это язык программирования, и изучить его на порядок тяжелее. Более того, даже изучив его, у вас может уйти очень много времени на создание собственного сайта, особенно если он достаточно сложен. Зайдите, например, на любой форум и попробуйте представить себе, сколько нужно времени для его разработки. На это могут уйти годы :- (. Не тратить же столько времени на разработку каждого форума. И тут нам на помощь приходят CMS (Content Management System).

Content Management System - это уже готовая программа, предназначенная для создания сайта определенного типа. Вы, наверное, обратили внимание, что некоторые форумы похожи как две капли воды. Нет, дизайн у них разный, но структура и принципы работы одни и те же. Происходит это потому, что никто не пишет собственную программу для реализации работы того же форума. Существуют уже разработанные программы, которые достаточно просто установить на хостинг, настроить, установить собственный дизайн и сайт готов. Причем вам даже не нужно знать язык программирования, на котором написана CMS. Более того разработчики таких программ утверждают, что вам не нужно знать и HTML. Добавление страниц на сайт осуществляется через удобный визуальный редактор похожий, например, на MSWord, а внешний вид сайта (шаблон) можно скачать с интернета уже готовый. Тут же вынужден вас огорчить: на счет HTML - наглая ложь. Нет, сайт, конечно, вы создадите и без HTML, но качество, полезность и внешний вид такого сайта будет явно не на высоте. Поэтому прямо сейчас, не откладывая, приступаем к изучению языка разметки HTML.



 

НАШЛИ ОШИБКУ?

Система Orphus
 

XHTML и CSS

Введение
Теги
Элементы
Атрибуты и комментарии
Форматирование текста
- Физические Элементы
- Элементы логического форматирования
Параграфы
Заголовки
Стили
- Выравнивание
- Шрифты
- Управление цветом
- К чему применять стили
Списки
Ссылки
Картинки
Карты ссылок
Таблицы
- Ширина и высота таблицы
- Объединение ячеек таблицы
Формы
- Текстовые поля
- Переключатели
- Флажки
- Списки
- Области для ввода текста
- Кнопки
Структура документа
Кодировка символов
Символьные подстановки
Фреймы
- Айфрейм
CSS
Таблицы стилей на уровне документа
Внешние таблицы стилей
Селекторы
- Селектор элемента
- Контекстные селекторы
- Стилевые классы
- ID классы
- Псевдоклассы
Приоритеты и наследование стилей
Стилевые свойства
- Фон и цвет
- Текст
- Свойства контейнеров
- - Рамка
- - Отступы (padding)
- - Поля (margin)
- - Свойство visibility
- - Свойство overflow
- - Свойство position
- Классификационные свойства
Отличия XHTML от HTML

 

РЕКЛАМА

Как заработать на сайте
 

СЧЕТЧИКИ

Valid XHTML 1.0 Transitional