{"draftJsState":{"blocks":[{"data":{"image":{"id":"68057d79737b352f51ffe1b5"},"contents":{"68057d79737b352f51ffe1b5":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fjfer"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML, CSS и JavaScript — это основные технологии, лежащие в основе любой веб-страницы. Для новичков может быть неочевидно, какую роль играет каждый из них и как они взаимодействуют друг с другом.","type":"unstyled","key":"a0kq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":325,"style":"BOLD"}],"text":"В этой статье мы не будем глубоко уходить в синтаксис или особенности использования каждого языка. Вместо этого сосредоточимся на их ключевых задачах и покажем, как они вместе формируют поведение веб-приложения — на простом примере: странице со счётчиком, увеличивающим значение при клике. В конце статья я также оставил вам блок бесплатных материалов для обучения разработке.","type":"unstyled","key":"9hc39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"HTML: структура страницы","type":"header-two","key":"2h9m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На любом сайте вы видите веб-страницу, которая состоит из блоков текста, картинок, кнопок и других элементов. Все эти элементы называются разметкой и описываются с помощью языка HTML — Hyper Text Markup Language, что переводится как “язык гипертекстовой разметки”.","type":"unstyled","key":"5q1gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он представляет собой набор тегов, которые объявляют и описывают каждый элемент на странице. Браузеры интерпретируют HTML-код и отображают его в виде веб-страницы. Теги могут содержать в себе другие теги, формируя таким образом структуру страницы.","type":"unstyled","key":"80j8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":4,"style":"BOLD"},{"length":6,"offset":136,"style":"BOLD"},{"length":6,"offset":282,"style":"BOLD"},{"length":10,"offset":373,"style":"BOLD"}],"text":"Тег является контейнером, который заключает в себе все содержимое веб-страницы. Внутри него находятся еще два обязательных тега: , который содержит метаданные страницы (описание, название, ссылки на стили CSS, скрипты и др), которые не отображаются на самой странице и в котором описывается видимое содержимое страницы. Создадим новый файл с названием \"index.html\", после чего заполним его базовыми тегами. Код “пустой” страницы выглядит так:","type":"unstyled","key":"fnuha"},{"data":{"image":{"id":"68057d4eef2134556809e945"},"contents":{"68057d4eef2134556809e945":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6rr96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас наша страница пуста и что бы ее наполнить, познакомимся с несколькими HTML-тегами:","type":"unstyled","key":"e5k8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"

— универсальный блочный контейнер, который используется для группировки и структурирования других элементов на веб-странице.","type":"unordered-list-item","key":"3r15h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":4,"offset":181,"style":"BOLD"},{"length":4,"offset":189,"style":"BOLD"}],"text":"

— заголовок верхнего уровня на веб-странице. Он обычно используется для наиболее важных заголовков и имеет наибольший размер шрифта среди всех доступных уровней заголовков (от

до

).","type":"unordered-list-item","key":"3qvgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"
— используется для отображения отдельного параграфа текста на веб-странице. Он представляет блок текста, который обычно разделен на абзацы.","type":"unordered-list-item","key":"2898a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"

до

Счетчик кликов