Я тут на досуге подумала, что будет неплохо рассказать о том, чем я зарабатываю на жизнь. Если вы хотите научиться создавать несложные сайты, но ваши знания о вебе стремятся к нулю, я помогу вам небольшим циклом статей. В них я по порядку расскажу о дизайне странички, ее верстке, как ее разместить в интернете и кому она вообще нужна :)
Итак, фундамент, без которого будет сложно: вы должны понимать английский язык, хотя бы с помощью онлайн-переводчика. Синтаксис подавляющего большинства языков программирования построен на английском языке. Про Brainfuck я вам рассказывать не буду (я его и не пыталась понять), его программы выглядят примерно так :)
++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++
.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.
------.--------.>+.>.
Ах да, английский язык очень сильно пригодится, когда вы не сможете понять, как сделать какую-нибудь хитрую штуку. Подсказываю лучшее место, где есть ответы на все вопросы, которые у вас могут возникнуть: StackOverflow.com. Это сайт на английском языке, есть и русская версия, но она сильно отстает от оригинальной. В общем, все вопросы, которые вы хотели бы задать, уже заданы и подробно отвечены на этом сайте :)
Сайт - это программа с архитектурой "клиент-сервер". Это значит, что программа состоит из двух частей: одна часть (клиент) находится непосредственно на вашем компьютере, принимает, отображает и отправляет данные на вторую часть - сервер, который обрабатывает данные и отправляет клиенту ответ. В качестве "клиента" у нас обычно выступает браузер, а в качестве "сервера" - веб-сервер, находящийся где-то на планете Земля, и это может быть даже ваш личный компьютер. Между собой они связываются с помощью интернета, и данные передаются особым способом - по протоколу HTTP, а если данные нужно защитить, то HTTPS.
Чтобы отличать один сайт от другого, им дают имена, например, site.ru. Это имя называется полным доменным именем. В этом примере "ru" - домен верхнего уровня, нередко это называется "доменной зоной". "Site" - домен второго уровня. Вся система именования сайтов называется DNS.
Для создания самых простых сайтов используются следующие технологии: HTML (разметка страницы), CSS (стили элементов), JavaScript (сокращенно JS, взаимодействие с пользователем). Все эти технологии используются непосредственно на клиентской части, то есть в браузере у вас на компьютере. Именно о них я и буду рассказывать в следующих статьях :)
Самая простая программа-сайт - это файл HTML, даже без стилей и скриптов. В качестве сервера может выступить ваш компьютер. Все просто - вы создаете папку, в ней создаете текстовый файл, меняете его расширение с .txt на .html, и затем открываете этот файл в браузере. Готово, ваша страничка работает! Но она пока пустая :)
HTML разработан на основе формата XML. Все элементы представляются в виде тегов. Тег - это такая конструкция, которая имеет свое название, назначение, атрибуты и содержимое. Пример:
<button class="close-button" disabled>Закрыть</button>
Здесь button - имя тега, class и disabled - атрибуты, close-button - значение атрибута class, "Закрыть" - содержимое тега. Назначение тега button - кнопка, то есть элемент, на который можно нажать, чтобы выполнить какое-то действие. Каждый тег всегда открывается и всегда закрывается, иначе у вас вся страница может сломаться. Есть и несколько исключений - <img>, <br>, <hr>, <link>, <meta>, <input>, их не надо закрывать.
Вообще, между нами, почти любой другой тег можно оформить в виде кнопки с помощью CSS. Но это будет нарушением семантики! Все теги нужно использовать по назначению, особенно на этом настаивает последний стандарт - HTML5. Зачем нужно? Страницы читают не только люди, это делают также и роботы поисковых систем, а еще специальные программы - screen readers. Эти программы читают вслух тексты на страницах, ими пользуются незрячие люди, им ведь тоже нужен интернет. И чтобы программа-читалка могла ориентироваться на странице, нужно помогать ей с помощью правильных тегов - кнопок, заголовков, текстовых блоков, картинок, форм ввода данных. Ну и что касается поисковых роботов - чем лучше и быстрее робот поймет вашу страницу, тем лучше для SEO-продвижения.
Структура HTML-страницы включает обязательные теги <html>, <head> и <body>. Поделюсь с вами шаблоном, с которого начинаю каждую новую страницу:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body></body>
</html>
Элемент doctype не является тегом и всегда располагается в самом начале, он указывает на тип документа и сообщает, какой здесь используется стандарт HTML или XML. Doctype в моем примере указывает на HTML5, а другого нам и не надо :)
Затем начинается сам документ: он находится внутри тега <html>. В теле документа две обязательные части: <head> и <body>. Внутри <head> находится некоторая управляющая информация (заголовок, кодировка utf-8) и подключаются ресурсы (файлы CSS и JS). В моем примере еще указан мета-тег viewport - он передает браузеру информацию о том, как отображать содержимое страницы на экранах разной ширины. Затем идет тег <body> - внутри него будет располагаться все то, что мы видим на вкладке браузера: тексты, картинки, формы, etc.
JavaScript - это язык программирования, встроенный в браузер и используемый для придания страницам интерактивности. Например, вы нажимаете на кнопку, и всплывает форма обратной связи, - это происходит благодаря яваскрипту. На основе этого языке написано множество библиотек, призванных облегчить решение различных задач. Одной из самых распространенных является библиотека JQuery. В следующих статьях я буду ее использовать :)
CSS - это правила отображения html-элементов. К примеру, если я хочу изобразить на странице красный квадрат, я должна буду указать, что у элемента красный фон, отображение в виде блока, шириной и высотой по 100 пикселей. Чтобы отнести набор стилей к нужному элементу, нужно однозначно его обозначить с помощью селектора: можно использовать название самого тега, можно использовать некоторые атрибуты - class, id. Селекторов великое множество, эти самые простые :)
Еще кое-что по поводу CSS и JS. Их необязательно выносить в отдельные файлы, если их мало. Можно разместить стили и скрипты прямо в HTML - внутри тегов <style> и <script> соответственно.
Еще пару слов о кодировке. Лучшим выбором является UTF-8, так как он поддерживается всеми браузерами, серверами и поисковиками. Чтобы сайт корректно отображался, лучше всего задать кодировку везде, где только можно: мета-тегом в теге <head>, на сервере в файле .htaccess, а также сохранить сам файл .html в нужной кодировке. В обычном блокноте в Windows это сделать проблематично, но есть более продвинутые блокноты, например, Notepad++, PSPad и другие. Я предпочитаю первый :)
Закончу это вступление в мир веба напоминанием о том, что современные люди просматривают сайты со множества разных устройств. Ваш сайт должен идти в ногу со временем, потому что на смартфоны сейчас приходится буквально половина трафика. Очень важно, чтобы сайт с телефона был удобным, это оценят не только люди, но и роботы-поисковики. По статистике HotLog, самыми популярными устройствами являются смартфоны, ноутбуки и компьютеры с большими мониторами 1920х1080 пикселей. Придать нормальный вид сайту на всех экранах помогут особые правила CSS, о них я расскажу в будущем :)