|
|
@@ -0,0 +1,67 @@
|
|
|
+# **Фронтенд-разработка**
|
|
|
+
|
|
|
+Фронтенд веб-сайта — это все, что пользователь видит и с чем может взаимодействовать при помощи браузера. Создание этой визуальной части называется фронтенд-разработкой. Дизайнеров, создающих пользовательские интерфейсы, тоже можно в какой-то смысле назвать фронтенд-разработчиками, потому что они совместно работают над этой же частью проекта.
|
|
|
+
|
|
|
+Для разработки фронтенда в качестве базовых инструментов используются: HTML (для создания базовой структуры страниц и контента), CSS (для стилизации внешнего вида) и JavaScript (для добавления интерактивности). Однако этот набор может быть значительно расширен, включив в себя диспетчеры пакетов, CSS-препроцессоры, фреймворки и многое другое.
|
|
|
+
|
|
|
+## **HTML: ключевая фронтенд-технология**
|
|
|
+
|
|
|
+HTML — это язык гипертекстовой разметки, предназначенный для создания веб-сайтов, которые впоследствии могут просматриваться при помощи доступа к интернету. HTML обычно используется для структурирования веб-документа. Он определяет такие элементы, как заголовки или абзацы, и позволяет вставлять изображения, видео и другие медиафайлы.
|
|
|
+
|
|
|
+Как работает HTML. HTML-код представляет собой множество тегов и пишется в текстовом файле. Этот текстовый файл затем сохраняется в виде HTML-файла, который можно открыть и посмотреть в браузере. Браузер сканирует его, интерпретирует код в визуальную форму и в лучшем случае отображает страницу именно так, как задумал дизайнер.
|
|
|
+
|
|
|
+* Гипертекст — способ, с помощью которого мы путешествуем по интернету, переходя по гиперссылкам, которые ведут на другие страницы. «Гипер» отсылает к нелинейности, которая позволяет перемещаться в любое место, поскольку этот процесса не подразумевает предопределенного порядка.
|
|
|
+
|
|
|
+* Разметка определяет качества, которыми наделяется текст внутри HTML-тегов. Теги определяют, как браузеры форматируют и отображают содержимое страницы.
|
|
|
+
|
|
|
+* Будучи языком, он содержит кодовые слова и синтаксис, как и любой другой язык.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Парный тег <html> / </html> определяет границы веб-страницы, а текст между тегами <body> / </body> определяет видимое содержимое страницы.
|
|
|
+
|
|
|
+<!DOCTYPE html> в самом начале объявляет тип документа для HTML5. Если его не обозначить, разные браузеры будут отображать его по-своему.
|
|
|
+
|
|
|
+### HTML5
|
|
|
+
|
|
|
+С момента первого своего релиза в 1991 году HTML претерпел множество обновлений. HTML5 был выпущен в 2014 году. В него были добавлены такие функции, как поддержка оффлайн хранилищ мультимедийных данных, более точные элементы контента (например, хедер, футер, навигация) и поддержка встраивания аудио и видео.
|
|
|
+
|
|
|
+### CSS: стилизация
|
|
|
+
|
|
|
+CSS («каскадные таблицы стилей») — это язык, используемый для стилизации страниц. Он определяет то, как HTML-элементы будут выглядеть на веб-странице с точки зрения дизайна, макета на разных устройствах с разными размерами экрана. CSS управляет макетом множества различных веб-страниц одновременно.
|
|
|
+
|
|
|
+Как это работает. CSS взаимодействует с HTML-элементами, компонентами веб-страницы.
|
|
|
+
|
|
|
+* Для взаимодействия с HTML в CSS используются селекторы. Селектор — это часть CSS-кода, определяющая, на какую часть HTML будут воздействовать стили CSS.
|
|
|
+
|
|
|
+* **Объявление** содержит свойства и значения, используемые селектором.
|
|
|
+
|
|
|
+* **Свойства** определяют размер шрифта, цвет и отступы. Каждое свойство имеет значение или набор значений.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+где P (абзац) — это селектор, { font-size:24px; color:blue; } — это объявление, font-size: и color: — свойства, а 24px; и blue; — значения.
|
|
|
+
|
|
|
+CSS записывается в виде простого текста в текстовом редакторе. Есть три способа добавить CSS-код в HTML:
|
|
|
+
|
|
|
+* Вместо того, чтобы добавлять CSS-код к каждому HTML-элементу, который необходимо видоизменить, можно использовать внешнюю таблицу стилей (External style sheets) — текстовый файл, содержащий весь CSS-код. Внешняя таблица стилей подключается в .html файле в контейнере <head>.
|
|
|
+
|
|
|
+* При использовании внутренней таблицы стилей CSS-код размещается прямо в теле тега <head> конкретной .html-страницы.
|
|
|
+
|
|
|
+* Под встроенным стилем подразумевается прописывание CSS в html-коде непосредственно того элемента, который нужно стилизовать.
|
|
|
+
|
|
|
+#### **CSS-фреймворки**
|
|
|
+
|
|
|
+CSS-фреймворк — это набор дефолтных CSS- и HTML-файлов, который расширяет возможности по части дизайна. Помимо их пользы при создании адаптивного дизайна, CSS-фреймворки помогают создавать различные макеты, что избавляет разработчиков от необходимости писать код с нуля в каждом случае. Обычно они заметно помогают при разработке веб-приложений под разные платформы и размеры экрана. Благодаря общим компонентам пользовательского интерфейса, Grid **Layout** и многим другим функциям, CSS-фреймворки значительно ускоряют рабочий процесс разработки. Существуют различные виды фреймворков: Полнофункциональные (Bootstrap, Foundation, Semantic UI и др.), Ориентированные на материальный дизайн (Materialize and Material Design Lite), Легкие (Pure).
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+### DOM: структура веб-страницы
|
|
|
+
|
|
|
+Объектная модель документа (DOM, Document Object Model) — это программный интерфейс для документов HTML и XML. Он интерпретирует страницу, чтобы программы могли видоизменять структуру, стиль и содержимое документа. DOM отображает документ в виде узлов и объектов, позволяя языкам программирования подключаться к странице.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Как это работает. Будем считать, что веб-страница — это документ, который может быть представлен либо в окне браузера, либо в качестве исходного HTML-кода. DOM является представлением этого документа, поэтому его можно изменить. DOM — это объектно-ориентированное представление веб-страницы, которое можно изменить с помощью сценарного языка, например, JavaScript.
|
|
|
+
|
|
|
+DOM должен соответствовать стандартам спецификаций W3C и WHATWG, которые исполняются в большинстве современных браузеров. Современный DOM строится с использованием нескольких API, работающих вместе. DOM определяет объекты, которые полностью описывают документ и объекты в нем.
|
