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

на главную - закладки

Жанры

Поделиться:

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

Шрифт:

Начало работы

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

Какие инструменты составляют среду разработки?

Во-первых, для веб-разработки можно использовать браузер Google Chrome.

Браузер Google Chrome уже поставляется с инструментами CDT, Chrome Developer Tools.

Далее нам нужен редактор кода.

И в качестве редактора кода можно использовать редактор Sublime Text 3.

< image l:href="#"/>

Sublime

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

Для установки редактора Sublime в интернете можно найти дитрибутив в том числе и портативной версии.

Нам также понадобится Git.

Git – это система управления версиями, с помощью которой можно хранить информацию о всех изменениях в вашем коде в репозитории.

Репозиторий Git – это место, где хранится ваш код и вся информация о его изменениях.

Репозитории могут находиться локально у вас на компьютере или на удалённом компьютере.

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

Также мы можем использовать инструмент под названием Browser Sync.

Browsersync – это модуль Node.js.

Node.js – это среда выполнения приложений JavaScript, которая выполняет код JavaScript вне веб-браузера.

И Browsersync обеспечивает синхронизированное тестирование веб приложений в браузере.

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

Таким образом экономится наше время на обновление браузера во время разработки веб приложения.

И чтобы установить Browser Sync, нам нужно установить Node.js.

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

Далее установим Browsersync.

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

Здесь NPM (Node Package Manager) – это менеджер пакетов Node.js. И NPM устанавливается вместе с Node.js.

Теперь

можно запускать файлы проекта веб-приложения с помощью Browsersync.

Для этого нужно открыть терминал и ввести выше показанную команду.

Эта команда запускает локальный сервер по адресуоткрывает и проверяет изменения файла index.html.

Можно также запустить сервер Browsersync для каталога приложения, отслеживая все его файлы.

Введение в HTML

Итак, что же такое HTML? Что вообще означает термин HTML и как он связан с Интернетом?

< image l:href="#"/>

HTML – это язык гипертекстовой разметки. И давайте рассмотрим каждое из этих слов и выясним, что именно они означают.

Во-первых, гипертекст. И гипертекст – это текст, который содержит ссылки на другие тексты, и так, по сути, устроена вся сеть Интернет. Один документ указывает на другой документ, который указывает на кучу других документов, и так далее.

Следующий термин – разметка. И разметка означает пометить что-то, аннотировать, т.е. добавить аннотацию.

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

Например, тег title, заголовок, сообщает нам и другому программному обеспечению, что это название этого документа.

Таким образом, теги описывают структуру документа.

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

Так, например, в этом примере закрывающий тег div появляется после закрывающего тега h1, что является синтаксической ошибкой.

Теперь, на самом деле Интернет основывается на трех базовых технологиях HTML, CSS, и JavaScript.

HTML, как мы уже выяснили, описывает структуру документа.

Например, документ может иметь один заголовок, два абзаца и нижний колонтитул.

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

Цвет и стиль – это роль CSS.

Язык Cascading Style Sheets (CSS) определяет цвет, макет, стиль шрифта, размер шрифта, другими словами стиль документа.

И кроме HTML и CSS, есть еще язык JavaScript, работа которого заключается в обеспечении поведения или функциональности документа.

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

Теперь, как появился HTML?

Комментарии:
Популярные книги

Княжий человек

Билик Дмитрий Александрович
3. Бедовый
Фантастика:
юмористическая фантастика
городское фэнтези
мистика
5.00
рейтинг книги
Княжий человек

Отмороженный 6.0

Гарцевич Евгений Александрович
6. Отмороженный
Фантастика:
боевая фантастика
постапокалипсис
рпг
5.00
рейтинг книги
Отмороженный 6.0

Жатва душ. Остров мертвых

Сугралинов Данияр
Фантастика:
боевая фантастика
рпг
5.20
рейтинг книги
Жатва душ. Остров мертвых

Имперец. Земли Итреи

Игнатов Михаил Павлович
11. Путь
Фантастика:
героическая фантастика
боевая фантастика
5.25
рейтинг книги
Имперец. Земли Итреи

Стражи душ

Кас Маркус
4. Артефактор
Фантастика:
городское фэнтези
попаданцы
аниме
5.00
рейтинг книги
Стражи душ

Тепла хватит на всех

Котов Сергей
1. Миры Пентакля
Фантастика:
боевая фантастика
космическая фантастика
5.00
рейтинг книги
Тепла хватит на всех

Возвращение демонического мастера. Книга 1

Findroid
1. Вселенная Вечности
Фантастика:
фэнтези
5.75
рейтинг книги
Возвращение демонического мастера. Книга 1

На границе империй. Том 4

INDIGO
4. Фортуна дама переменчивая
Фантастика:
космическая фантастика
6.00
рейтинг книги
На границе империй. Том 4

Кодекс Крови. Книга ХVI

Борзых М.
16. РОС: Кодекс Крови
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Кодекс Крови. Книга ХVI

Я сделаю это сама

Кальк Салма
1. Магический XVIII век
Любовные романы:
любовно-фантастические романы
5.00
рейтинг книги
Я сделаю это сама

Я граф. Книга XII

Дрейк Сириус
12. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я граф. Книга XII

Неудержимый. Книга VI

Боярский Андрей
6. Неудержимый
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Неудержимый. Книга VI

Как я строил магическую империю 3

Зубов Константин
3. Как я строил магическую империю
Фантастика:
попаданцы
постапокалипсис
аниме
фэнтези
5.00
рейтинг книги
Как я строил магическую империю 3

Девятый

Каменистый Артем
1. Девятый
Фантастика:
боевая фантастика
попаданцы
9.15
рейтинг книги
Девятый