. Назовём нашу страничку, допустим «Самый лучший блог». Сразу сделаю оговорку: <title>требует закрывающего дескриптора. Ну чтож, делаем заголовок для нашей страницы:","type":"unstyled","key":"1qj1r"},{"data":{"image":{"id":"624afaf62b977c6c113a5d89"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 3 – Делаем название вкладки","type":"atomic:image","key":"bh3s0"},{"data":{"image":{"id":"624afb0ccdf6b456ab17d6c1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 4 – Название вкладки","type":"atomic:image","key":"3j4qf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":173,"style":"BOLD"},{"length":6,"offset":234,"style":"BOLD"},{"length":7,"offset":241,"style":"BOLD"},{"length":4,"offset":368,"style":"BOLD"},{"length":16,"offset":387,"style":"BOLD"},{"length":7,"offset":494,"style":"BOLD"}],"text":"Отлично: мы сделали название для вкладки. Но наша страница по-прежнему пуста. Давайте добавим фон. Всё, что нам понадобится для описания нашей странички вносим в дескриптор <style> </style>. «Тело» кода страницы пишется в дескрипторе <body> </body>. Код включает в себя дескрипторные конструкции и теги, а также значения тегов. Для того, чтобы добавить фон страницы в body указываем тег background-color. Делаем это как бы в общем описании дескриптора, то есть в фигурных скобках в дескрипторе <style>. Пусть фон у нас будет синего цвета:","type":"unstyled","key":"7agtt"},{"data":{"image":{"id":"624afb3dae566229145c5dd9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 5 – Делаем фон страницы","type":"atomic:image","key":"42giu"},{"data":{"image":{"id":"624afb4f42b6d465f4cb5a0b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 6 – Наша страница с фоном","type":"atomic:image","key":"22k9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы создали страницу, назвали её, сделали фон. Давайте добавим на нашу страницу какой-нибудь текст. А теперь запоминайте: текст можно вносить разными способами, например применяя дескриптор <p> </p> мы получим последовательность строчек:","type":"unstyled","key":"et5vn"},{"data":{"image":{"id":"624afb7030812b75f5685df5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 7 – Добавляем текст на страницу","type":"atomic:image","key":"50ge7"},{"data":{"image":{"id":"624afb8a8301151d9b569653"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 8 – Текст на странице","type":"atomic:image","key":"bib2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":224,"style":"BOLD"},{"length":4,"offset":375,"style":"BOLD"},{"length":5,"offset":401,"style":"BOLD"}],"text":"Текст на страницу добавился, но он мало воспринимается, так как он не табулирован, слишком маленького размера и не контрастирующего с фоном цвета. Давайте это исправим. За размер, цвет и прочие параметры шрифта отвечает тег font. У этого тега много атрибутов, но в данное время нас интересуют только те, которые устанавливают размер и цвет шрифта. За размер отвечает атрибут size, а за цвет – атрибут color. Установим размер нашего текста 32 кегль, а цвет, пусть будет белый:","type":"unstyled","key":"9a7sq"},{"data":{"image":{"id":"624afbc98301151d9b5726d8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 9 – Устанавливаем размер и цвет текста","type":"atomic:image","key":"5kq6k"},{"data":{"image":{"id":"624afbdd8a8f0269de013196"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 10 – Наша страничка ","type":"atomic:image","key":"e3f1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":81,"style":"BOLD"}],"text":"Уже лучше. Давайте сделаем ориентацию текста по центру. Для этого существует тег <center> </center>. Попробуем?","type":"unstyled","key":"7t35v"},{"data":{"image":{"id":"624afc0330812b75f56a28a4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 11 – Применяем дескриптор center","type":"atomic:image","key":"1210p"},{"data":{"image":{"id":"624afc18457d271e767dd1e4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 12 – Наша страничка с выравненным по ширине текстом","type":"atomic:image","key":"7a1oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":124,"style":"BOLD"},{"length":7,"offset":132,"style":"BOLD"},{"length":28,"offset":202,"style":"BOLD"}],"text":"Чего-то не хватает… Давайте добавим нашу эмблему. Самым простым образом картинка добавляется на страницу с помощью атрибута srcтега <img>. В этой статье мы разберем тот случай, когда файлы для страницы все лежат в одной директории (в одной папке).","type":"unstyled","key":"dmv6n"},{"data":{"image":{"id":"624afc5335b7a25737d3572e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 13 – Добавляем изображение из директории","type":"atomic:image","key":"2on7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не пугайтесь того названия, которое у меня записано в качестве значения атрибута src – это всего лишь замена кириллицы на машинную абракадабру (запомните: называйте файлы латиницей, хотя, как по мне, так лучше создавать и развивать русскоязычные ЯП). Итак, файл лежит в той же директории, что и страница, поэтому мы указали только название рисунка. Что же у нас получилось?","type":"unstyled","key":"28pqv"},{"data":{"image":{"id":"624afc74ff33745d7aba02bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 14 – Наша страничка с логотипом канала","type":"atomic:image","key":"1qajs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":126,"style":"BOLD"},{"length":8,"offset":139,"style":"BOLD"},{"length":5,"offset":194,"style":"BOLD"}],"text":"Давайте и логотип расположим по центру. Для этого можно применять различные атрибуты, а можно поступить проще: вносим наш тег <img>под тег <center>. Также, думаю Вы уже заметили, что дескриптор <img>не требует закрывающего тега.","type":"unstyled","key":"3diia"},{"data":{"image":{"id":"624afc98a99428371d9c5a6f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 15 – Располагаем изображение по центру","type":"atomic:image","key":"6javs"},{"data":{"image":{"id":"624afcaeae5662291460ab38"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 16 – Наша страничка с изображением по центру","type":"atomic:image","key":"3hs80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":253,"style":"BOLD"}],"text":"Молодцы! Теперь сделаем последний штрих: добавим ссылку на наш канал. Сделать это очень просто (даже проще очень простого). Используем тег <a> </a>. В первом теге указываем адрес странички, на которую указывает ссылка. Для этого воспользуемся атрибутом href.","type":"unstyled","key":"6pj28"},{"data":{"image":{"id":"624afcd32664b56b3183b2b6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 17 – Делаем ссылку на наш канал в Дзене","type":"atomic:image","key":"oqa2"},{"data":{"image":{"id":"624afce82664b56b3183e5cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 18 – Наша первая страничка","type":"atomic:image","key":"v5u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверим? Жмём ссылку:","type":"unstyled","key":"2gf84"},{"data":{"image":{"id":"624afd0de391da4c0004e0bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 19 – Мы перешли на наш канал","type":"atomic:image","key":"di5on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сегодня, пожалуй, хватит. В следующих статьях мы разберемся со всеми деталями более подробно. Сегодняшняя статья – вводная, но в ней мы с Вами сумели сделать небольшую страничку и, к тому же проработали основные аспекты по работе с html. Если эта статья была вам полезна и интересна, то поставьте палец вверх, я пойму, что работаю не зря) Спасибо, что читаете, удачи!","type":"unstyled","key":"8pauc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ZF6Kb85C9bcxuhm3lvHp"}],"entityMap":{}},"mentions":[]}</article></body></html>

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здравствуйте, Дорогие друзья! Сегодня мы с Вами поговорим о программировании. Стереотипы, которые сложились в народе о том, что программировать могут только избранные в корне неверны. Я полагаю, что для Вас проще будет начать изучение ЯП (языков программирования) с самого простого, на мой взгляд языка: html. Думаю, многие из Вас видели тип .html при загрузке странички какого-либо сайта в адресной строке. Всё верно: сегодня мы будем писать небольшую страницу для большого сайта.","type":"unstyled","key":"2bmpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":180,"style":"BOLD"},{"length":7,"offset":372,"style":"BOLD"},{"length":6,"offset":715,"style":"BOLD"},{"length":7,"offset":967,"style":"BOLD"}],"text":"Команды или ключевые слова в HTML называются дескрипторами (это просто для справки, можно не запоминать). А теперь то, что запомнить нужно. Любой html-файл начинается дескриптором . Видя этот дескриптор, браузер начинает читать и прорабатывать Ваш код. Большинство дескрипторов требуют завершающий, аналогичный себе дескриптор, содержащий наклонную черту, например: . Код html можно писать где угодно, даже в Блокноте или в NotePad, но наиболее удобно пользоваться специальными приложениями наподобие Brackets (ПО распространяется бесплатно и не занимает много места на диске). Но, вернемся к нашим баранам, точнее дескрипторам. Следующий дескриптор, без которого наш код корректно не отработает – это . Этот дескриптор содержит «служебную» информацию о нашей странице, в том числе название странички и фавикон (фавикон – та самая маленькая картинка в углу вкладки, если кто не знал). Этот дескриптор также требует наличие закрывающего дескриптора . Итак, мы создали страницу, назвали её и указали информацию о ней, но она совершенно пустая:","type":"unstyled","key":"euufj"},{"data":{"image":{"id":"624afac0ff33745d7ab62e0c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 1 – Написанный код","type":"atomic:image","key":"5l5hn"},{"data":{"image":{"id":"624afad38301151d9b54ff92"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 2 – Реакция браузера на наш код","type":"atomic:image","key":"b2hjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":106,"style":"BOLD"},{"length":6,"offset":156,"style":"BOLD"},{"length":7,"offset":252,"style":"BOLD"},{"length":7,"offset":338,"style":"BOLD"}],"text":"Вы видите, что по умолчанию вкладке присвоилось название файла. Это произошло потому, что мы не указали в никакой информации. Давайте это исправим: в вводим название, которое будут отображаться на вкладке. Для этого используется дескриптор . Назовём нашу страничку, допустим «Самый лучший блог». Сразу сделаю оговорку: <title>требует закрывающего дескриптора. Ну чтож, делаем заголовок для нашей страницы:","type":"unstyled","key":"1qj1r"},{"data":{"image":{"id":"624afaf62b977c6c113a5d89"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 3 – Делаем название вкладки","type":"atomic:image","key":"bh3s0"},{"data":{"image":{"id":"624afb0ccdf6b456ab17d6c1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 4 – Название вкладки","type":"atomic:image","key":"3j4qf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":173,"style":"BOLD"},{"length":6,"offset":234,"style":"BOLD"},{"length":7,"offset":241,"style":"BOLD"},{"length":4,"offset":368,"style":"BOLD"},{"length":16,"offset":387,"style":"BOLD"},{"length":7,"offset":494,"style":"BOLD"}],"text":"Отлично: мы сделали название для вкладки. Но наша страница по-прежнему пуста. Давайте добавим фон. Всё, что нам понадобится для описания нашей странички вносим в дескриптор <style> </style>. «Тело» кода страницы пишется в дескрипторе <body> </body>. Код включает в себя дескрипторные конструкции и теги, а также значения тегов. Для того, чтобы добавить фон страницы в body указываем тег background-color. Делаем это как бы в общем описании дескриптора, то есть в фигурных скобках в дескрипторе <style>. Пусть фон у нас будет синего цвета:","type":"unstyled","key":"7agtt"},{"data":{"image":{"id":"624afb3dae566229145c5dd9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 5 – Делаем фон страницы","type":"atomic:image","key":"42giu"},{"data":{"image":{"id":"624afb4f42b6d465f4cb5a0b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 6 – Наша страница с фоном","type":"atomic:image","key":"22k9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы создали страницу, назвали её, сделали фон. Давайте добавим на нашу страницу какой-нибудь текст. А теперь запоминайте: текст можно вносить разными способами, например применяя дескриптор <p> </p> мы получим последовательность строчек:","type":"unstyled","key":"et5vn"},{"data":{"image":{"id":"624afb7030812b75f5685df5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 7 – Добавляем текст на страницу","type":"atomic:image","key":"50ge7"},{"data":{"image":{"id":"624afb8a8301151d9b569653"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 8 – Текст на странице","type":"atomic:image","key":"bib2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":224,"style":"BOLD"},{"length":4,"offset":375,"style":"BOLD"},{"length":5,"offset":401,"style":"BOLD"}],"text":"Текст на страницу добавился, но он мало воспринимается, так как он не табулирован, слишком маленького размера и не контрастирующего с фоном цвета. Давайте это исправим. За размер, цвет и прочие параметры шрифта отвечает тег font. У этого тега много атрибутов, но в данное время нас интересуют только те, которые устанавливают размер и цвет шрифта. За размер отвечает атрибут size, а за цвет – атрибут color. Установим размер нашего текста 32 кегль, а цвет, пусть будет белый:","type":"unstyled","key":"9a7sq"},{"data":{"image":{"id":"624afbc98301151d9b5726d8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 9 – Устанавливаем размер и цвет текста","type":"atomic:image","key":"5kq6k"},{"data":{"image":{"id":"624afbdd8a8f0269de013196"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 10 – Наша страничка ","type":"atomic:image","key":"e3f1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":81,"style":"BOLD"}],"text":"Уже лучше. Давайте сделаем ориентацию текста по центру. Для этого существует тег <center> </center>. Попробуем?","type":"unstyled","key":"7t35v"},{"data":{"image":{"id":"624afc0330812b75f56a28a4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 11 – Применяем дескриптор center","type":"atomic:image","key":"1210p"},{"data":{"image":{"id":"624afc18457d271e767dd1e4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 12 – Наша страничка с выравненным по ширине текстом","type":"atomic:image","key":"7a1oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":124,"style":"BOLD"},{"length":7,"offset":132,"style":"BOLD"},{"length":28,"offset":202,"style":"BOLD"}],"text":"Чего-то не хватает… Давайте добавим нашу эмблему. Самым простым образом картинка добавляется на страницу с помощью атрибута srcтега <img>. В этой статье мы разберем тот случай, когда файлы для страницы все лежат в одной директории (в одной папке).","type":"unstyled","key":"dmv6n"},{"data":{"image":{"id":"624afc5335b7a25737d3572e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 13 – Добавляем изображение из директории","type":"atomic:image","key":"2on7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не пугайтесь того названия, которое у меня записано в качестве значения атрибута src – это всего лишь замена кириллицы на машинную абракадабру (запомните: называйте файлы латиницей, хотя, как по мне, так лучше создавать и развивать русскоязычные ЯП). Итак, файл лежит в той же директории, что и страница, поэтому мы указали только название рисунка. Что же у нас получилось?","type":"unstyled","key":"28pqv"},{"data":{"image":{"id":"624afc74ff33745d7aba02bc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 14 – Наша страничка с логотипом канала","type":"atomic:image","key":"1qajs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":126,"style":"BOLD"},{"length":8,"offset":139,"style":"BOLD"},{"length":5,"offset":194,"style":"BOLD"}],"text":"Давайте и логотип расположим по центру. Для этого можно применять различные атрибуты, а можно поступить проще: вносим наш тег <img>под тег <center>. Также, думаю Вы уже заметили, что дескриптор <img>не требует закрывающего тега.","type":"unstyled","key":"3diia"},{"data":{"image":{"id":"624afc98a99428371d9c5a6f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 15 – Располагаем изображение по центру","type":"atomic:image","key":"6javs"},{"data":{"image":{"id":"624afcaeae5662291460ab38"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 16 – Наша страничка с изображением по центру","type":"atomic:image","key":"3hs80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":253,"style":"BOLD"}],"text":"Молодцы! Теперь сделаем последний штрих: добавим ссылку на наш канал. Сделать это очень просто (даже проще очень простого). Используем тег <a> </a>. В первом теге указываем адрес странички, на которую указывает ссылка. Для этого воспользуемся атрибутом href.","type":"unstyled","key":"6pj28"},{"data":{"image":{"id":"624afcd32664b56b3183b2b6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 17 – Делаем ссылку на наш канал в Дзене","type":"atomic:image","key":"oqa2"},{"data":{"image":{"id":"624afce82664b56b3183e5cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 18 – Наша первая страничка","type":"atomic:image","key":"v5u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверим? Жмём ссылку:","type":"unstyled","key":"2gf84"},{"data":{"image":{"id":"624afd0de391da4c0004e0bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисунок 19 – Мы перешли на наш канал","type":"atomic:image","key":"di5on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сегодня, пожалуй, хватит. В следующих статьях мы разберемся со всеми деталями более подробно. Сегодняшняя статья – вводная, но в ней мы с Вами сумели сделать небольшую страничку и, к тому же проработали основные аспекты по работе с html. Если эта статья была вам полезна и интересна, то поставьте палец вверх, я пойму, что работаю не зря) Спасибо, что читаете, удачи!","type":"unstyled","key":"8pauc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ZF6Kb85C9bcxuhm3lvHp"}],"entityMap":{}},"mentions":[]}</article></body></html>