Записаться на курс
Основы технической грамотности

HTML, CSS, JS и как это связано с NoCode

Основано на статье: https://blog.hubspot.com/marketing/web-design-html-css-javascript

При создании проектов на NoCode платформах вам по большому счёту не интересно, как это устроено изнутри и как работает. Но для глубокого понимания и просто развития знать это всё таки нужно. 

В этой короткой статье мы поговорим про визуальную часть проектов.

Когда вы открываете любой сайт или веб-приложение, то вы видите красочный интерфейс: заголовки, анимации, описания, карточки товаров и т.д. Всё выглядит как волшебство и вряд ли это подвластно простому "смертному". Но никакого волшебства, конечно, нет;)

Каждая страница в Интернете, которую вы посещаете, строится на выполнении отдельных инструкций шаг за шагом. Ваш браузер играет колоссальную роль в отображении кода и тем, что мы можем видеть на наших экранах и даже взаимодействовать. Помните, что код без браузера - это просто текстовый файл - это когда вы помещаете этот текстовый файл в браузер, что происходит волшебство. Когда вы открываете веб-страницу, браузер отображает HTML и другие языки программирования в максимально понятном для вас формате.
HTML и CSS на самом деле всего лишь структура страницы и информация о стиле. Прежде чем перейти к JavaScript и другим языкам программирования, необходимо знать основы HTML и CSS, поскольку они находятся на передней части каждой веб-страницы и приложения.
В самом начале 1990-х годов HTML был единственным языком, доступным в Интернете. С тех пор многое изменилось и теперь одним из самых распространенных языков программирования является JavaScript.

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

Как работает HTML?
HTML отображает язык разметки гипертекста. «Язык разметки» означает, что HTML использует теги для идентификации различных типов контента и целей, которые каждый преследует на веб-странице.

Взгляните на статью ниже. Если бы мы попросили вас структурировать текст, вы, вероятно, легко бы справились: наверху находится заголовок, затем подзаголовок, основной текст и изображения внизу.
Для разметки используются HTML-теги, также известные как «элементы». Они имеют довольно интуитивные типы: заголовки, теги абзацев, теги изображений и т. д.
Каждая веб-страница состоит из нескольких тегов HTML, обозначающих определенный тип контента на странице. Каждый тип содержимого на странице «обернут», т. е. окружен тегами.
Например, слова, которые вы сейчас читаете, являются частью абзаца. Если кодировать эту страницу с нуля, этот абзац начался бы с тега абзаца открытия: <p>. Часть «тега» обозначается открытыми скобками, а буква «p» сообщает компьютеру, что мы открываем абзац вместо какого-либо другого типа содержимого.
После того, как тег был открыт, все следующее содержимое считается частью этого тега, пока вы не закроете его. Когда абзац заканчивается, нужно ставить тег заключительного абзаца: </ p>. Обратите внимание, что закрывающие теги выглядят точно так же, как открывающие теги, за исключением того, что после левой угловой скобки есть косая черта. Вот пример:
<p> Это абзац. </ p>

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

CSS
CSS - это каскадные таблицы стилей. Этот язык разметки определяет, как HTML-элементы веб-сайта должны отображаться на интерфейсе страницы.

Если HTML - это гипсокартон, CSS - это краска.
В то время как HTML является основной структурой вашего сайта, CSS - это то, что дает всему вашему сайту стиль. Цвета, интересные шрифты и фоновые изображения – все это заслуга CSS. Этот язык влияет на все настроение веб-страницы, что делает его невероятно мощным инструментом и важным навыком для веб-разработчиков. Он также позволяет веб-сайтам адаптироваться к различным размерам экрана и типам устройств.

Чтобы показать вам, что CSS делает для веб-сайта, просмотрите следующие два изображения.

Пример HTML (без CSS)

Пример HTML без CSS, приводящий к неформатированному сообщению блога HubSpot
Обратите внимание, что все содержимое не изменилось, но визуально все выглядит иначе. Это то, что вы увидите, если таблица стилей по какой-либо причине не прогрузится на сайт. Теперь, вот как выглядит одна и та же веб-страница с добавлением CSS.

Пример HTML + CSS
Пример HTML + CSS, используемый для форматирования сообщения блога HubSpot

Разницу видно, не так ли?
Видите ли, HTML, разработанный еще в 1990 году, на самом деле не предназначен для отображения информации о физическом форматировании. Первоначально он создан для определения структурного содержания документа, например заголовков и абзацев. HTML вывел эти новые конструктивные особенности, а CSS был изобретен и выпущен в 1996 году: все форматирование может быть удалено из документов HTML и сохранено в отдельных файлах CSS (.css).

Итак, что же такое CSS? Он обозначает каскадные таблицы стилей - и «таблицу стилей» самого документа. Любой браузер имеет таблицу стилей по умолчанию, поэтому на каждой веб-странице отражается хотя бы одна таблица стилей, в зависимости от того, какой браузер посетитель использует, независимо от дизайна страницы. К примеру, допустим стиль шрифта нашего браузера по умолчанию - Times New Roman, размер 12, если разработчик не применил собственную таблицу стилей, то посетитель увидит веб-страницу в Times New Roman размером 12.

Разумеется, в большинстве случаев используется пользовательский CSS. Именно здесь вступает в игру слово «каскадирование» - подобно водопаду, вода падает вниз и поражает все на пути, однако скалы внизу влияют на то, где она будет течь. Точно так же последняя определенная таблица стилей сообщает моему браузеру, какие инструкции имеют приоритет.

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

Для чего используется JavaScript?
JavaScript - это логический язык программирования, который можно использовать для изменения содержимого веб-сайта и заставить его вести себя по-разному в ответ на действия пользователя. Общее использование JavaScript включает в себя окна подтверждения, призывы к действию и добавление новых идентификаторов к существующей информации.
Короче говоря, JavaScript - это язык программирования, который позволяет веб-разработчикам создавать интерактивные сайты с динамичными элементами.

Всплывающие окна
Одним из примеров JavaScript в действии являются окна, которые появляются на вашем экране. Подумайте, как в последний раз, когда вы ввели свою информацию в онлайн-форму, и появилось окно с подтверждением, попросив вас нажать «ОК» или «Отменить», чтобы продолжить. Это стало возможным благодаря JavaScript - в коде вы найдете инструкцию if else, которая говорит компьютеру делать что-то одно, если пользователь нажимает «ОК», и другое дело, если пользователь нажимает «Отмена».

Призыв к действию
Другим примером JavaScript является призыв к действию (CTA), подобно тем, которые помещаются в сообщения в блоге, которые появляются в нижней правой части экрана.

Сохранение новой информации
JavaScript особенно полезен для назначения новых идентификаторов существующим элементам веб-сайта в соответствии с решениями, которые пользователь делает во время посещения страницы. Предположим, вы создаете целевую страницу с формой, которую хотите генерировать, путем сбора информации о посетителе сайта. Возможно, у вас есть «строка» JavaScript, предназначенная для имени пользователя. Эта строка может выглядеть примерно так:
function updateFirstname() {
let firstname = prompt('First Name');
}
Затем, после того как посетитель веб-сайта вводит свое имя и любую другую информацию, требуемую на целевой странице и представляет форму, это действие обновляет идентификацию первоначально неопределенного элемента «firstname» в вашем коде.
Вот как вы могли бы поблагодарить своего посетителя сайта по имени в JavaScript:
para.textContent = 'Спасибо, ' + firstname + "! Теперь Вы можете скачать свою книгу."
В приведенной выше строке JavaScript элементу «Имя» было присвоено первое имя посетителя веб-сайта, и поэтому он будет генерировать фактическое имя на интерфейсе веб-страницы. Пользователю по имени Кевин предложение будет выглядеть так:
Спасибо, Кевин! Теперь вы можете скачать свою книгу.

Безопасность, игры и спецэффекты
Другие варианты использования JavaScript: создание паролей безопасности, формы проверки, интерактивные игры, анимации и спецэффекты. Он также используется для создания мобильных приложений и создания серверных приложений. Вы можете добавить JavaScript в HTML-документ, добавив эти «скрипты» или фрагменты кода JavaScript в заголовок или тело вашего документа.

Причём здесь NoCode?

Создавая продукты в NoCode инструментах вам не нужно задумываться о том, что за что отвечает. Вы просто перетаскиваете готовые блоки или элементы на страницу и получается красота. 

Но каждый инструмент имеет в себе все эти 3 языка и генерирует их на лету.

Просто знайте, что когда вы добавили новую кнопку на страницу - вы добавили новый атрибут в HTML этой страницы. Изменили цвет и размер кнопку - внесли изменение в CSS-файл, установили действие открытие всплывающего окна при клике на кнопку - обновили Javascript файл. Не написав ни единой строчки кода. 

Можно, конечно, не знать и не задумываться над этим. Но чем более технически подкованным вы будете, тем более конкурентноспособными вы можете быть на рынке