Введение в веб-разработку с HTML, CSS, JavaScript. Тимур Машнин

ользовать редактор 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 года не существовало никаких стандартов Интернета,