Начало работы
Для начала работы с веб-проектами необходимо настроить среду разработки.
Какие инструменты составляют среду разработки?
Во-первых, для веб-разработки можно использовать браузер Google Chrome.
Браузер Google Chrome уже поставляется с инструментами CDT, Chrome Developer Tools.
Далее нам нужен редактор кода.
И в качестве редактора кода можно использовать редактор Sublime Text 3.
Sublime чрезвычайно быстр и очень хорошо поддерживается с точки зрения сторонних плагинов.
Для установки редактора Sublime в интернете можно найти дитрибутив в том числе и портативной версии.
Нам также понадобится Git.
Git – это система управления версиями, с помощью которой можно хранить информацию о всех изменениях в вашем коде в репозитории.
Репозиторий Git – это место, где хранится ваш код и вся информация о его изменениях.
Репозитории могут находиться локально у вас на компьютере или на удалённом компьютере.
Для установки Git скачаем и запустим дистрибутив, и далее будем следовать инструкциям.
Также мы можем использовать инструмент под названием Browser Sync.
Browsersync – это модуль Node.js.
Node.js – это среда выполнения приложений JavaScript, которая выполняет код JavaScript вне веб-браузера.
И Browsersync обеспечивает синхронизированное тестирование веб приложений в браузере.
Browsersync создает сервер по адресу http://localhost:3000/ и наблюдает за изменениями файлов веб приложения. И когда файлы изменяются, Browsersync автоматически перезагружает браузер и мгновенно показывает эти изменения.
Таким образом экономится наше время на обновление браузера во время разработки веб приложения.
И чтобы установить Browser Sync, нам нужно установить Node.js.
Для этого скачаем и запустим дистрибутив Node.js, и далее будем следовать инструкциям.
Далее установим Browsersync.
Если вы хотите запускать Browsersync из командной строки в любом каталоге, его можно установить глобально с помощью выше показанной команды в терминале командной строки.
Здесь NPM (Node Package Manager) – это менеджер пакетов Node.js. И NPM устанавливается вместе с Node.js.
Теперь можно запускать файлы проекта веб-приложения с помощью Browsersync.
Для этого нужно открыть терминал и ввести выше показанную команду.
Эта команда запускает локальный сервер по адресу http://localhost:3000, открывает и проверяет изменения файла index.html.
Можно также запустить сервер Browsersync для каталога приложения, отслеживая все его файлы.
Введение в HTML
Итак, что же такое HTML? Что вообще означает термин HTML и как он связан с Интернетом?
HTML – это язык гипертекстовой разметки. И давайте рассмотрим каждое из этих слов и выясним, что именно они означают.
Во-первых, гипертекст. И гипертекст – это текст, который содержит ссылки на другие тексты, и так, по сути, устроена вся сеть Интернет. Один документ указывает на другой документ, который указывает на кучу других документов, и так далее.
Следующий термин – разметка. И разметка означает пометить что-то, аннотировать, т.е. добавить аннотацию.
Например, если у вас есть какой-то контент, например, если у вас есть HTML документ, и вы хотите аннотировать его, чтобы сообщить браузеру, что это за контент и что делает этот HTML документ, вы обертываете этот контент в язык разметки, состоящий из тегов.
Например, тег title, заголовок, сообщает нам и другому программному обеспечению, что это название этого документа.
Таким образом, теги описывают структуру документа.
И последнее слово – это язык, а язык подразумевает, что у него есть собственный синтаксис, означающий, что есть правильный и неправильный способ кодирования.
Так, например, в этом примере закрывающий тег div появляется после закрывающего тега h1, что является синтаксической ошибкой.
Теперь, на самом деле Интернет основывается на трех базовых технологиях HTML, CSS, и JavaScript.
HTML, как мы уже выяснили, описывает структуру документа.
Например, документ может иметь один заголовок, два абзаца и нижний колонтитул.
И обратите внимание, что это ничего не говорит о том, как эти компоненты визуально расположены, как они выглядят, какого они цвета и какой при этом размер шрифта.
Цвет и стиль – это роль CSS.
Язык Cascading Style Sheets (CSS) определяет цвет, макет, стиль шрифта, размер шрифта, другими словами стиль документа.
И кроме HTML и CSS, есть еще язык JavaScript, работа которого заключается в обеспечении поведения или функциональности документа.
JavaScript добавляет функциональность странице, например, что происходит, когда пользователь нажимает на заголовок документа.
Теперь, как появился HTML?
До 1997 года не существовало никаких стандартов Интернета, и браузеры делали все, что хотели. Они изобретали новые теги и по-разному реализовывали одни и те же теги.
И вы могли зайти на веб-сайт и получить сообщение о том, что ваш браузер несовместим с этим веб-сайтом, поэтому вам нужно перейти на другой браузер.
И примерно в 1997 году Консорциум World Wide Web, W3C, придумал первый стандарт для браузеров, это был HTML4, и они очень быстро обновили его до HTML4.01.
Этот стандарт был довольно свободным, и у браузеров было слишком много свободы действий внутри этого стандарта в отношении того, как его реализовывать и как отображать страницы.
Поэтому, примерно в 2000 году W3C предложил другую спецификацию под названием XHTML 1.0, и эта спецификация была основана на языке разметки XML. И W3C хотели продолжить работу, создав XHTML 2.0.
Но проблема была в том, что поставщики браузеров решили, что работа W3C продвигается слишком медленно, и, кроме того, они считали, что спецификации W3C движутся в неправильном направлении.
Поэтому, производители браузеров объединились и создали еще одну группу разработки спецификаций, которая называлась WHATWG, группа технологий веб-гипертекстовых приложений.
И эта группа была гораздо менее демократична, чем W3C, так как там есть один главный редактор, который принимает окончательные решения, поэтому все представители поставщиков браузеров могут спорить сколько угодно, но в конце концов назначенный редактор принимает окончательные решения.
И в течение долгого времени эти две организации не сходились во взглядах и не работали вместе, так что они действительно шли в двух разных направлениях. Но в конце концов, примерно в 2007, 2009 годах, WHATWG и W3C начали совместную работу, и создали то, что мы имеем сейчас, стандарт HTML5.
Теперь, W3C отвечает за стандарты, а WHATWG отвечает за реализацию стандартов браузерами.
И чтобы узнать, будет ли ваш HTML работать в браузерах, вы можете использовать валидатор, который есть на веб-сайте W3.org.
Здесь вы можете проверить свой код HTML, является ли он действительным и будет ли он хорошо работать в браузере.