На чём написан сайт?

Дата публикации: 23.05.2016

na-chyom-napisan-sajtВсем привет! 🙂

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

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

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

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

Более подробно о каждом этапе вы можете прочитать в статье под названием «Создание сайта на CMS«.

Всё это кажется настолько простым, что у начинающих сайтостроителей возникает вопрос «В чём подвох?» 🙂

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

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

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

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

Поэтому данная статья будет посвящена ответу на вопрос большинства начинающих вебмастеров «На чём написан сайт?», чтобы было понятно в каком направлении копать при внесении различного рода правок.

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

Впрочем, что-то я изрядно отвлекся… Начинаем! 🙂

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

Перед тем, как рассказать вам о том, на чём написан сайт, я решил для большего понимания освежить в вашей памяти знания о том, что же такое сайт и что он из себя представляет.

Сайт — это совокупность веб-страниц, которые связаны между собой некой логической связью. Вся эта совокупность объединена доменным именем (у каждой страницы есть свой адрес, который формируется относительно имени сайта) и принадлежит всё это одному владельцу, который может быть как физическим, так и юридическим лицом.

Как-то так 🙂

Какие веб-страницы бывают?

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

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

На этом основная часть теории подходит к концу, и мы начинаем потихоньку отвечать на основной вопрос сегодняшней статьи «На чём написан сайт?».

http://cccp-blog.com/wp-includes/images/banners/templatemonster/banner_content.jpg

Что такое HTML и где его искать на сайте?

na-chyom-napisan-sajt-htmlВеб-страницы сайта, независимо от типа, в конечном итоге представляют собой текстовые документы в формате HTML.

HTML — это язык гипертекстовой разметки. Именно разметки, а не программирования! Во время моей учёбы в университете меня однажды буквально высмеял преподаватель, когда я назвал HTML языком программирования 🙂 Так что не повторяйте моей ошибки и не выглядите глупо в глазах окружающих.

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

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

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

html-kod-stranicy-sajta-v-brauzere

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

<div>, <p>, <a> — всё это HTML-тэги. Некоторые из них работают только в паре с закрывающими тэгами.

Таким образом, текст элемента должен располагаться между открывающим и закрывающим тэгами. Например:


<div>Мой первый блок</div>

У них могут быть атрибуты и свойства, которые прописываются перед закрывающей угловой скобкой в формате:


атрибут="значение"

С помощью атрибутов можно менять вид элементов, заключённых в тэги, и добавлять им всевозможные дополнительные функции. Например, запись вида <div title=»Подсказка»>Мой первый блок</div> будет добавлять всплывающую подсказку при наведении на элемент.

Все HTML-документы имеют одинаковую структуру:


<head>

...

</head>

<body>

...

</body>

Все видимые в браузере элементы расположены в теле документа, которое ограничено тэгами body. В заголовке документа (текст между тэгами head) располагается заголовок документа, различная справочная информация и подключаются другие документы (JavaScript, CSS и др.).

Язык HTML также поддерживает различные спецсимволы (как правило, непечатные, т.е. они отсутствуют на ваших клавиатурах), которые записываются в формате &символ;

Например, символ пробела будет выглядеть так:


&nbsp;

С полным списком HTML-тэгов и спецсимволов вы можете познакомиться в официальной документации по адресу w3schools.com. Также могу вам посоветовать хороший русскоязычный проект с документацией по базовым конструкциям HTML и CSS, а также форумом и живыми обсуждениями — htmlbook.ru.

Если хотите получить об html больше информации прямо сейчас, то рекомендую посмотреть данное видео:

Следующий язык, элементы которого можно часто встретить в коде сайта, — это CSS.

Что такое CSS и зачем он нужен?

na-chyom-napisan-sajt-cssАббревиатура CSS расшифровывается как Cascading Style Sheets и на русском обозначает каскадные таблицы стилей. Более простым языком — это язык описания внешнего вида веб-документа, оформленного с помощью языков разметки, в том числе и для HTML-документов.

http://cccp-blog.com/wp-includes/images/banners/partner_web_studio/banner_728x90.gif

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

Элементами языка CSS являются правила, которые состоят из селектора и описания, которое содержит набор CSS-свойств и их значений.

Записывается это всё в следующем виде:


селектор { CSS-свойство1 : значение; CSS-свойство2 : значение }

CSS-селекторы могут быть либо наименованиями HTML-тэгов, либо CSS-классами, идентификаторами или их комбинациями.

Классу CSS соответствует следующий селектор:


.название_класса

Например, чтобы задать элементу с классом «myclass» зеленый цвет текста, нужно прописать следующее правило:


.myclass { color: #f00; }

Идентификатору элементов (значение HTML-атрибута “id”) соответствует следующий селектор:


#идентификатор

В качестве примера зададим элементу с идентификатором «myid» размер шрифта 20 пикселей.


#myid { font-size: 20px; }

Соответственно, чтобы задать последнее свойство для HTML-тэга <p>, нужно следующее правило:


p { font-size: 20px; }

Свойства CSS могут быть применены к элементам веб-документов тремя основными способами:

1. В виде правил, прописанных в отдельных CSS-файлах, которые подключаются в HTML-документах с помощью директивы <link rel=»stylesheet» href=»style.css»>, которая прописывается обычно в заголовке документа между тегами <head></head>

2. В виде CSS-правил, прописанных в заголовке HTML-документа явно в следующем виде:


<style>

...

правила CSS

...

</style>

3. CSS-свойства, прописанные у HTML-элементов явно с помощью атрибута «style». К примеру, для того, чтобы сделать определённый div залитым синим цветом данным способом, нужно прописать следующее:


<div style="background: #00f;"></div>

Пожалуй, на этом мы окончим знакомство с CSS. Основы я вам рассказал. Более подробно о свойствах, вариантах селекторов и иерархии объявления свойств вы можете прочитать в тех же источниках, что и об HTML — w3schools.com и htmlbook.ru, а также на всевозможных тематических форумах.

Если хотите узнать о CSS больше, не отвлекаясь от данной статьи, рекомендую вам посмотреть видео с основами данного языка оформления сайта и примерами его использования:

Следующее, на чём написан сайт — это JavaScript.

Зачем нужен JavaScript на сайте?

na-chyom-napisan-sajt-javascriptЯзык программирования JavaScript (да, именно программирования, а не разметки и её оформления, как предыдущие) служит для придания интерфейсу сайта динамики и интерактивности.

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

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

Файлы JavaScript имеют расширение .js, по которому можно обнаружить их использование в коде страниц или их наличие среди файлов веб-проекта.

Поскольку JavaScript является языком программирования, то изложить его основы в двух словах, как я это сделал для CSS и HTML, не получится, т.к. придётся вводить множество понятий вроде «переменная, «функция», «массив» и т.д.

Если вы захотите изучить JavaScript более глубоко, напишите об этом в комментариях под этой статьёй – я постараюсь вам помочь, подготовив цикл соответствующих статей. Только не забудьте сразу подписаться на обновления проекта, чтобы быть в курсе их выхода.

Поэтому вместо описания различных языковых конструкций я ограничусь обзором способов подключения JavaScript-скриптов на сайт. Тем более, что эта процедура довольно распространена при расширении функционала готового сайта за счет различных JS-библиотек.

Забегая наперёд скажу, что они аналогичны интеграции CSS-правил в веб-документ.

1. Подключение отдельных JavaScript-файлов с помощью следующей конструкции:


<script type="text/javascript" src="script.js"></script>

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

Если вы выбрали данный способ интеграции JS в свой проект, то вместо script.js вам нужно будет указать корректный путь к подключаемому файлу.

После подключения вызов функций из файла происходит по схожей схеме.

Например, у нас есть файл script.js со следующим содержимым:


function func_alert()

{

alert('Привет!');

}

Как видите, файл содержит простенькую функцию, которая при вызове будет выводить на экран всплывающее сообщение с текстом «Привет!».

После того, как мы подключим js-файл в нашем веб-документе, для вызова функции из неё на необходимо дополнительно прописать следующее:


<script type="text/JavaScript">func_alert();</script>

После данных действий при перезагрузке страницы сайта с вызовом функции вы увидете ожидаемое сообщение. Всё работает 🙂

Если после данных манипуляций вызов конструкций из файла не происходит — ещё раз проверьте введенный вами путь к файлу, его наличие по указанному пути и права на чтение.

2. Описание js-конструкций прямо в HTML-файле. В этом случае описание функции из предыдущего примера будет выглядеть так:


<script type="text/JavaScript">

function func_alert()

{

alert('Привет!');

}

</script>

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

Эти события соответствуют различным реальным действиям пользователей. Например, событие onclick соответствует клику мышкой, onmouseover — наведению курсора мыши на элемент.

Соответственно, при наступлении данных событий активируется действие, которое указано в данном виде:


<div onclick="func_alert();"></div>

Данный пример предполагает наличие объявленной функции func_alert.  либо в специальном блоке в HTML-документе или в отдельном файле. Также тело функции (её описание) может быть сразу в описании события, но об этом мы поговорим далее.

3. Описание js-конструкций в действиях при определённых событиях отдельных HTML-элементов.

Этот способ интеграции js-скриптов аналогичен CSS-свойствам, описанным в атрибуте style HTML-элементов.

Приводимый нами ранее пример будет выглядеть так:


<div onclick="alert('Привет!');"></div>

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

С основами всё. Более подробно о синтаксисе JavaScript, событиях и JS-фреймворках читайте в официальной документации по адресу w3schools.com или на русскоязычном проекте javascript.ru, где доступным языком описаны все синтаксические конструкции и особенности данного языка.

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

Что такое бэкэнд и фронтэнд?

Рассмотренные нами ранее языки относятся к языкам фронтэнда. Для тех, кто не знает, что это такое, сделаю небольшое пояснение.

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

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

Также эти скрипты могут запускаться автоматически или под действием каких-либо внешних событий.

Самая главная черта бэкэнд-скриптов — это то, что пользователь их не видит, для него заметны только результаты их выполнения  в браузере.

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

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

Итак, поговорим о языках бэкэнда более подробно.

Особенности языков бэкэнда

na-chyom-napisan-sajt-phpНесомненно, самым распространённым среди них является всем известный PHP.

Причин его востребованности довольно много: новичков в области программирования привлекает его относительно невысокий порог входа и большое количество фрейворков, CMS и прочих инструментов, профессионалам по душе его хорошие возможности, множество инструментов, плагинов и прочих плюшек для расширения его возможностей.

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

Из того, что может заинтересовать нас, как разработчиков, это порядок его установки.

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

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

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

В качестве небольшого экскурса сделаем простенький скрипт, который будет выводить на экран монитора приветственное сообщение.

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

Открываем его любым текстовым редактором (подойдёт даже стандартный «Блокнот», но если вы планируете заниматься разработкой и в дальнейшем, то вам лучше установить специализированные программы для создания сайтов).

В чистом документе прописываем <?php?>, чтобы указать компилятору php, что этот документ следует обрабатывать в соответствии с синтаксисом этого языка.

Также можно использовать вариант сокращённого тэга <??>. Код мы будем размещать между вопросительными знаками или между словом php и закрывающим вопросительным знаком.

Для вывода приветственного сообщения пишем следующую конструкцию:


<? echo 'Привет!'; ?>

Сохраняем документ и в Интернет-браузере запускаем наш скрипт, прописав его адрес в формате:

http://доменное_имя_сайта/testphp.php

После этого в окне браузера у вас должна появиться надпись «Привет!».

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

Более подробно о PHP и его основных семантических конструкциях вы можете прочитать в официальной документации на сайте php.net.

Также существует русский проект по адресу php.su, который во многом дублирует официальный сайт. Так что если вы что-то не поймёте в описании на php.net, вы всегда можете обратиться к данному альтернативному источнику.

В завершение нашего краткого разговора о языках бэкэнда скажу, что PHP, несмотря на его распространенность и популярность не является догмой. Сейчас на сайтах помимо него можно также встретить скрипты на Ruby, C#, Java и прочих языках.

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

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

На этом всё. Всем удачи в ваших начинаниях! 🙂

Понравилась статья? Поделись с друзьями:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
15 голосов, в среднем: 4.5 из 5

Похожие темы

Комментариев пока нет... Будьте первым! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *