На чем написан сайт
Сегодня мы с вами продолжаем отвлекаться от создания сайтов на базе различных CMS, о чём на страницах данного блога написана уже не одна статья.
Данный способ специально был разработан для пользователей без особых знаний в области программирования, чтобы они, не вникая во все премудрости разработки могли создать свой ресурс.
Тем более, что сделать это с помощью CMS очень быстро, удобно и малозатратно, т.к. разработка сайта заключается в установке самой CMS, комплектации её графическим шаблоном и набором модулей, а также перенос всей этой прелести на хостинг (если потребуется).
Всё это кажется настолько простым, что у начинающих сайтостроителей возникает вопрос «В чём подвох?»
Нюансов на самом деле хватает. И одним из них является необходимость доработки готового сайта, т.к. в большинстве случаев комплект установленных плагинов и шаблона не позволяет полностью удовлетворить все вкусовые предпочтения будущих владельцев и сделать продукт по-настоящему уникальным и выделяющимся среди остальных.
В данной ситуации у нас есть два пути: либо стать заказчиком и найти разработчика, чтобы он внёс правки на сайт за вас, либо стать разработчиком самому и произвести всё самостоятельно.
Многие думают, что первый путь избавляет от всех проблем. Но, уверяю вас как разработчик со стажем — это далеко не так Достаточно часто между заказчиками и программистами возникают различного рода недоразумения, которые стоят не только времени, но и денег, а также нервов с обеих сторон.
Я не буду вас учить правильно формулировать свои мысли, т.к. это не является целью данного проекта. Вместо этого я подскажу, как можно изменить сайт самостоятельно, тем более, что у данного метода есть масса преимуществ по сравнению с предыдущим.
Поэтому данная статья будет посвящена ответу на вопрос большинства начинающих вебмастеров «На чём написан сайт?», чтобы было понятно в каком направлении копать при внесении различного рода правок.
С этой публикации следовало бы начать раздел «Кодинг» нашего проекта, в котором уже имеется статья о сортировке массива php, но на момент старта описанная проблема представлялась мне более актуальной и заслуживающей внимания. Сегодня я решил исправиться и устранить данное упущение.
Впрочем, что-то я изрядно отвлекся… Начинаем!
Что такое сайт?
Перед тем, как рассказать вам о том, на чём написан сайт, я решил для большего понимания освежить в вашей памяти знания о том, что же такое сайт и что он из себя представляет.
Сайт — это совокупность веб-страниц, которые связаны между собой некой логической связью. Вся эта совокупность объединена доменным именем (у каждой страницы есть свой адрес, который формируется относительно имени сайта) и принадлежит всё это одному владельцу, который может быть как физическим, так и юридическим лицом.
Как-то так
Какие веб-страницы бывают?
Веб-страницы сайта могут быть как статическими, так и динамическими. Первые просто хранятся на сервере и загружаются браузерами (веб-клиентами) текущих пользователей сайта при обращении к ним.
Динамические же формируются браузерами «на лету». За их формирование отвечают скрипты сайта, расположенные на сервере, обращение к которым и происходит при переходе на страницу сайта пользователем у себя на компьютере.
На этом основная часть теории подходит к концу, и мы начинаем потихоньку отвечать на основной вопрос сегодняшней статьи «На чём написан сайт?».
Что такое HTML и где его искать на сайте?
Веб-страницы сайта, независимо от типа, в конечном итоге представляют собой текстовые документы в формате HTML.
HTML — это язык гипертекстовой разметки. Именно разметки, а не программирования! Во время моей учёбы в университете меня однажды буквально высмеял преподаватель, когда я назвал HTML языком программирования Так что не повторяйте моей ошибки и не выглядите глупо в глазах окружающих.
Документы с данным типом разметки представляют собой текст элементов управления и страниц ресурса вперемешку со специальными тегами, которые распознаются веб-браузерами клиентов и показывают текущему пользователю текст веб-страницы в отформатированном виде.
Чтобы в этом убедиться, зайдите в каталог своего сайта на сервере и откройте в любом текстовом редакторе какой-нибудь файл с расширением .html (для его поиска сделайте поиск по проекту).
Или можете просмотреть код какой-нибудь страницы сайта в веб-браузере. Для этого после загрузки сайта нажмите правой кнопкой мыши в любом свободном месте и выберите пункт «Просмотреть код страницы» (в разных браузерах названия этого пункта могут отличаться).
Перед вами откроется совокупность малопонятных обычному пользователю символов, среди которых вас должны интересовать заключённые в угловых скобки.
<div>, <p>, <a> — всё это HTML-тэги. Некоторые из них работают только в паре с закрывающими тэгами.
Таким образом, текст элемента должен располагаться между открывающим и закрывающим тэгами. Например:
<div>Мой первый блок</div>У них могут быть атрибуты и свойства, которые прописываются перед закрывающей угловой скобкой в формате:
атрибут="значение"С помощью атрибутов можно менять вид элементов, заключённых в тэги, и добавлять им всевозможные дополнительные функции. Например, запись вида <div title=»Подсказка»>Мой первый блок</div> будет добавлять всплывающую подсказку при наведении на элемент.
Все HTML-документы имеют одинаковую структуру:
<head>
...
</head>
<body>
...
</body>Все видимые в браузере элементы расположены в теле документа, которое ограничено тэгами body. В заголовке документа (текст между тэгами head) располагается заголовок документа, различная справочная информация и подключаются другие документы (JavaScript, CSS и др.).
Язык HTML также поддерживает различные спецсимволы (как правило, непечатные, т.е. они отсутствуют на ваших клавиатурах), которые записываются в формате &символ;
Например, символ пробела будет выглядеть так:
С полным списком HTML-тэгов и спецсимволов вы можете познакомиться в официальной документации по адресу w3schools.com. Также могу вам посоветовать хороший русскоязычный проект с документацией по базовым конструкциям HTML и CSS, а также форумом и живыми обсуждениями — htmlbook.ru.
Если хотите получить об html больше информации прямо сейчас, то рекомендую посмотреть данное видео:
Следующий язык, элементы которого можно часто встретить в коде сайта, — это CSS.
Что такое CSS и зачем он нужен?
Аббревиатура CSS расшифровывается как Cascading Style Sheets и на русском обозначает каскадные таблицы стилей. Более простым языком — это язык описания внешнего вида веб-документа, оформленного с помощью языков разметки, в том числе и для HTML-документов.
Несмотря на то, что 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 на сайте?
Язык программирования 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 я хочу предложить вашему вниманию обобщающее видео о данном языке и с примерами его использования в реальной жизни:
Что такое бэкэнд и фронтэнд?
Рассмотренные нами ранее языки относятся к языкам фронтэнда. Для тех, кто не знает, что это такое, сделаю небольшое пояснение.
Фронтэнд сайта — это то, что видит пользователь в своём браузере и с помощью чего он взаимодействует с ресурсом. Т.е. фронтэнд — это интерфейс сайта. И языки фронтэнда, соответственно, — это языки программирования, разметки текста и её оформления, с помощью которых создаётся интерфейс сайта, его видимая часть.
Бэкэнд сайта же, напротив, — это то, что не видит пользователь, то, что работает «в фоне». Это скрипты, которые запускаются пользователями с помощью различных действий в интерфейсе сайта.
Также эти скрипты могут запускаться автоматически или под действием каких-либо внешних событий.
Самая главная черта бэкэнд-скриптов — это то, что пользователь их не видит, для него заметны только результаты их выполнения в браузере.
Соответственно, языки бэкэнда — это языки программирования сайта (исключительно), с помощью которых создаются программные скрипты, призванные реагировать на действия пользователей и выдавать им результат в их веб-клиентах (интернет-браузерах).
Ещё одной особенностью бэкэнда является то, что скрипты хранятся и выполняются на сервере. В отличие от них, элементы фронтэнда загружаются и кэшируются браузерами пользователей.
Итак, поговорим о языках бэкэнда более подробно.
Особенности языков бэкэнда
Несомненно, самым распространённым среди них является всем известный 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 и прочих языках.
Вот, пожалуй, и всё, что я хотел вам рассказать о языках фронтэнда и бэкэнда сайта. Надеюсь, сегодняшняя статья помогла вам ответить на вопрос «На чём написан сайт?».
На этом всё. Всем удачи в ваших начинаниях!
