{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":131,"offset":0,"style":"BOLD"}],"text":"HTML (HyperText Markup Language) – это язык разметки гипертекста, который используется для создания и структурирования веб-страниц. Простыми словами, HTML позволяет определить, как элементы веб-страницы, такие как заголовки, параграфы, списки, ссылки и изображения, должны отображаться в браузере. HTML это такая же повседневная и широкая в применении технология, как стол, стул или шариковая ручка. Ты видишь её каждый день в своём телефоне, на экране ноутбука и во множестве других мест. HTML уже давно стал частью современного мира.","type":"unstyled","key":"fl18t"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":14,"offset":17}],"inlineStyleRanges":[],"text":"Как мы помним из прошлых статей, интернет представляет из себя набор текстовых страниц, соединенных между собой ссылками. Открывая какую-либо страницу, мы запрашиваем у конкретного сервера программный код этой страницы, после чего страница рисуется в нашем веб-браузере. Интернет в целом, и протокол HTTP в частности, являются технологиями передачи текста. В свою очередь, текст сайтов кодируется с помощью языка HTML. Мы смотрим на очередную красивую страницу сайта - а внутри неё находится ни что иное, как чистый HTML-код, написанный программистами и обработанный специальными программами.","type":"unstyled","key":"er2uc"},{"data":{"image":{"id":"64eb0e83139b665597c8f162"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Загадочный и непонятный, но в то же время простой и общедоступный - язык разметки веб-страниц HTML.","type":"atomic:image","key":"av4hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":165,"offset":0,"style":"BOLD"}],"text":"В классическом понимании, HTML не является языком программирования. Скорее, это язык для создания визуальной части веб-страницы - язык создания архитектуры страницы. Совокупность его элементов определяет каркас страницы, точно так же как кирпичи определяют стены и окна в доме. Ключевое отличие HTML от языков программирования - HTML всегда статичен, и нужен для создания структуры. HTML не позволяет анализировать или изменять данные, он нужен только для конструирования страниц сайта на этапе его разработки. Условный же язык программирования наоборот динамичен, и позволяет оперировать какими-то данными \"на лету\", анализируя и изменяя их.","type":"unstyled","key":"e4l22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Немного занятных формальностей про язык HTML \uD83D\uDC68‍\uD83D\uDCBB","type":"header-two","key":"550nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML был придуман в 1991 году. Автор первой версии языка - Тим Бернерс Ли, сотрудник ЦЕРН.","type":"ordered-list-item","key":"f0t6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«Язык» – это самая простая для понимания часть аббревиатуры. Как и любой язык, HTML имеет уникальный синтаксис и алфавит. То есть, имеет определенный набор правил, которые нужно соблюдать.","type":"ordered-list-item","key":"beh4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«Разметка» в HTML – это способ \"размечать\" страницу, чтобы браузер знал, как правильно ее отобразить. Эти разметки не видны на самой странице человеческому глазу, они используются для указания браузеру, как показывать страницу посетителям. То есть - разметка точно задает, где на странице будет картинка, а где форма для ввода логина и пароля.","type":"ordered-list-item","key":"d0cl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«Гипертекст» – это текст, в котором есть ссылки на другие веб-страницы. Ссылки, как ты наверное знаешь, называются гиперссылками. С помощью гиперссылок мы можем переходить к другим частям этой же страницы, к другим страницам на текущем веб-сайте или к совершенно новым веб-сайтам.","type":"ordered-list-item","key":"bi2vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Язык HTML использует 99% существующих сайтов в классическом понимании термина \"сайт\".","type":"ordered-list-item","key":"7m0dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наиболее часто используемые элементы HTML - это теги div, a, img, span. Самый частый тег - это div, представляющий из себя простой прямоугольник произвольного размера. Иными словами - большая часть сайтов сделана из прямоугольников, умело связанных друг с другом.","type":"ordered-list-item","key":"cph9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В какой момент рождается HTML код? \uD83E\uDDD9","type":"header-two","key":"77km6"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":5,"offset":515}],"inlineStyleRanges":[{"length":90,"offset":0,"style":"BOLD"}],"text":"HTML используется для создания веб-страниц - это его прямое и единственное предназначение. HTML это бесплатный и свободно-распространяемый, общеизвестный инструмент. Соблюдение и наличие общепризнанного стандарта помогает гарантировать правильное отображение текста, изображений и других элементов. Этот язык настолько важен и нужен, что без него не было бы интернет-сайтов в классическом понимании. Стандарты HTML описаны специальной организацией по стандартизации. Например, последний стандарт языка HTML5 описан здесь. Компании, которые производят веб-браузеры (Google Chrome, Яндекс.Браузер и другие), должны придерживаться этого стандарта при разработке своих браузеров.","type":"unstyled","key":"a99li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Программный код HTML создаётся веб-программистом в момент разработки сайта. Для каждой страницы сайта существует отдельный файл с соответствующим HTML-кодом. После этого, он отправляется в специальную папку на физическом сервере. С этого момента, такой HTML-код некоторой страницы становится общедоступным - и его можно посмотреть по некоторой ссылке в браузере. Создание страниц с помощью HTML-кода - это отчасти техническая наука, а отчасти чистое творчество, и немного отчасти - настоящая магия созидания.","type":"unstyled","key":"7907b"},{"data":{"image":{"id":"64eb11cca530e56682077ca5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML (язык гипертекстовой разметки) — это стандартный язык разметки, используемый для создания структуры и представления веб-страниц. Он позволяет определять элементы и макет веб-страницы, включая текст, изображения, ссылки, заголовки, абзацы, таблицы, формы и многое другое. ","type":"atomic:image","key":"1cpn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":177,"offset":0,"style":"BOLD"}],"text":"С помощью HTML ты можешь не только добавлять заголовки, абзацы, списки и другие элементы. Ты также можешь вставлять изображения, видео, аудио-файлы и другие мультимедиа-ресурсы. И ты можешь ссылаться на другие веб-страницы на том же веб-сайте или на другие сайты. Иначе говоря, HTML позволяет создавать практически какие-угодно веб-страницы, ограничивая тебя лишь рамками твоего творчества и запасом вдохновения.","type":"unstyled","key":"631tq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML используется не только для создания веб-страниц, но и для других вещей. Ты сможешь использовать его для:","type":"unstyled","key":"dicnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создания таблиц на организации данных.","type":"unordered-list-item","key":"e3gqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создания формы в целях сбора информации о пользователях, обработки транзакций, бронирования или размещения заказа.","type":"unordered-list-item","key":"ef7s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создания электронных писем с помощью HTML.","type":"unordered-list-item","key":"d3vfb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если ты хочешь создавать веб-страницы, таблицы, формы или электронные письма, тебе точно нужно знать, как писать HTML. На пути развития программиста - будь то FullStack-программист или веб-разработчик, знание языка HTML является обязательной частью.","type":"unstyled","key":"eflol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как писать на языке HTML? ✍️","type":"header-two","key":"2qh6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По сравнению с другими языками, HTML – лёгкий в чтении и понимании язык программирования (разметки). По сути, он похож на простой английский текст с дополнительными символами.","type":"unstyled","key":"5bekp"},{"data":{"image":{"id":"64ead76b9e6fc8695c5486bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы написать HTML, используй теги для структурирования и форматирования содержимого, например заголовков (от

до

), абзацев (
) и ссылок ().","type":"atomic:image","key":"7uv5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":107,"offset":0,"style":"BOLD"}],"text":"Основным строительным блоком языка HTML является \"элемент\". Иногда его ещё называют \"тегом\" или HTML-тегом. Такой элемент содержит информацию, которую веб-браузер должен отобразить пользователю.","type":"unstyled","key":"1r7k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элементы HTML вкладываются друг в друга - образуя целостный документ. Внутри HTML-элементов могут быть или другие элементы, или текст, или \"ничего\" - то есть пустота. В зависимости от типа элемента, они могут иметь определенные особенности, или иметь какое-то специальное поведение.","type":"unstyled","key":"76pvn"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":5,"offset":210}],"inlineStyleRanges":[],"text":"Как правило, перед написанием HTML-кода, программист или веб-дизайнер рисует примерный внешний вид страницы. Это может быть набросок от руки на листе бумаги А4, электронный скетч в специальном приложении вроде Figma, или любой другой концепт. Задача прототипирования перед фактическим написанием кода в том, чтобы программист получил какой-то ориентир внешнего вида, который ему нужно сделать.","type":"unstyled","key":"f0do"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как использовать язык HTML? \uD83D\uDE80","type":"header-two","key":"d6pvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":109,"offset":0,"style":"BOLD"}],"text":"Для начала работы с HTML тебе понадобится текстовый редактор – программа для написания и редактирования кода. Поскольку HTML-файл имеет простой стандартный текстовый формат, ты можешь использовать любой текстовый редактор. Например, самый обычный текстовый блокнот.","type":"unstyled","key":"8qijg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда ты откроешь текстовый редактор, ты, скорее всего, увидишь окно для ввода текста. Скопируй приведенный ниже HTML-код и вставь его внутрь редактора:","type":"unstyled","key":"5ivu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1dcmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5s0sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"evjmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Мой первый заголовок.

","type":"blockquote","key":"ej2h2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Мой первый параграф.

, затем напиши содержимое абзаца и оберни его тегами

. Это будут физические элементы, которые отобразятся внутри вкладки в веб-браузере.","type":"unstyled","key":"3lqg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ao28i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b19ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"5htbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Войти в IT","type":"blockquote","key":"7fm0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"fjvg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1qsjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это заголовок

","type":"blockquote","key":"fp1je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это параграф.

)","type":"header-three","key":"6139a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент абзаца HTML представляет собой абзац. Поместив теги

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

, а потом в теги типа

.","type":"unstyled","key":"cefqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это абзац.

","type":"blockquote","key":"cjhg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Вот еще один абзац на новой строке.