{"draftJsState":{"blocks":[{"data":{"image":{"id":"5dcd8421089979742c12d122"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8t1cg"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":0}],"inlineStyleRanges":[],"text":"В прошлый раз мы с Вами познакомимся с HTML тегами, атрибутами и их значениями. В этот раз изучим теги текста и теги декораций. Поехали!","type":"unstyled","key":"1275l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Теги текста ","type":"header-three","key":"3b9f2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":11,"offset":0,"style":"ITALIC"}],"text":"

...

- заголовок первого уровня. На каждой странице должен быть только один. Всего 6 уровней заголовков","type":"unstyled","key":"1rssp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":54,"style":"BOLD"}],"text":"Создадим по одному заголовку каждого уровня с классом title и текстом внутри: Заголовок, заголовочек и посмотрим, что по этому поводу думает браузер:","type":"unstyled","key":"17d62"},{"data":{"image":{"id":"5dcd852bf2b9ae76f74d9b47"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4h8l8"},{"data":{"image":{"id":"5dcd85382fb64b4381e2d121"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"98u14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовки разных уровней отличаются размером и значением на веб-странице. Хочу заметить, что заголовок первого уровня на странице может быть только 1, не больше.","type":"unstyled","key":"ag5c7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иначе браузер съедет с катушек.","type":"unstyled","key":"c5q7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":10,"offset":0,"style":"ITALIC"}],"text":"
...
- тег текстового параграфа. Внутри находится многострочный текст. ","type":"unstyled","key":"87fo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Покажу на примере: напишем в этот тег любой текст:","type":"unstyled","key":"4n2eo"},{"data":{"image":{"id":"5dcd85520e31153f81c15fa0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"602mm"},{"data":{"image":{"id":"5dcd85620aae9d3a459ab1ea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"69uik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Красота! Идем дальше.","type":"unstyled","key":"724df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":16,"offset":0,"style":"ITALIC"}],"text":"... - тег текстового фрагмента. Обычно в него заключается фрагмент текста, состоящий из двух-трех слов, для придания определенных отличных от всего текста стилей. ","type":"unstyled","key":"1620k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим в нашем текст один такой тег, в файлах стилей обратимся к нему напрямую без класса и сделаем текст синего цвета:","type":"unstyled","key":"bl68l"},{"data":{"image":{"id":"5dcd857ff3cd8870191c7980"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2glfe"},{"data":{"image":{"id":"5dcd8590f2b9ae76f74d9b4b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1ja8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текст поменял свой цвет ровно там, где мы вставили этот тег","type":"unstyled","key":"c5trc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":18,"offset":0,"style":"ITALIC"}],"text":"... - тег ссылки. В качестве адреса перехода задаётся либо другая страница, либо id блока, чтобы перейти на него, либо заглушка(@#@), которая никуда вести не будет. ","type":"unstyled","key":"7f750"},{"data":{"image":{"id":"5dcd85cd012fbd6197674048"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7no77"},{"data":{"image":{"id":"5dcd85dc0d78616983a87429"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e7cec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"},{"length":26,"offset":0,"style":"ITALIC"}],"text":"
...
,
...
- теги ненумерованного и нумерованного списков. ","type":"unstyled","key":"3flhc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":12,"offset":0,"style":"ITALIC"}],"text":"
...
- тег элемента списка","type":"unstyled","key":"53lui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим один нумерованный и один ненумерованный список и добавим туда по 5 элементов и посмотрим на это дело в браузере:","type":"unstyled","key":"5ht0s"},{"data":{"image":{"id":"5dcd85f823b893073e44d44e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"brc7o"},{"data":{"image":{"id":"5dcd86040d78616983a8742c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7sg5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мне всё нравится, а вам?","type":"unstyled","key":"cti67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":4,"offset":0,"style":"ITALIC"}],"text":"
- тег переноса строки ","type":"unstyled","key":"4t2bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут надеюсь всё понятно - есть текст, вставить этот текст между словами и будет перенос - как enter в ворде на компутере","type":"unstyled","key":"eorrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Теги декораций","type":"unstyled","key":"3tait"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":12,"offset":0,"style":"ITALIC"}],"text":" - тег добавления картинки на сайт. src атрибут задаёт адрес картинки. ","type":"unstyled","key":"e6dau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Покажу как это работает на примере одной миледи. Для удобство стоит закинуть картинку в ту же папку, где лежат файлы разметки и стилей, что мы, собственно и сделаем:","type":"unstyled","key":"cji14"},{"data":{"image":{"id":"5dcd861eeec9e2085b078e4b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"485ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Картиночка в папке, теперь подключим ее в разметке и посмотрим на реакцию браузера:","type":"unstyled","key":"74h12"},{"data":{"image":{"id":"5dcd8635c3cd3c2757f67362"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"78c7g"},{"data":{"image":{"id":"5dcd863e1877c954d6c7a63f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"13u7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изумительно! Подпишись на канал, так как в следующий раз мы разберем теги контейнеры и теги формы.","type":"unstyled","key":"2mg07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Другие материалы от автора:","type":"unstyled","key":"9aad"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":25,"offset":0}],"inlineStyleRanges":[],"text":"Учим HTML вместе! Часть 1","type":"unstyled","key":"2ihtg"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":25,"offset":0}],"inlineStyleRanges":[],"text":"Учим HTML вместе! Часть 2","type":"unstyled","key":"ddlcr"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":44,"offset":0}],"inlineStyleRanges":[],"text":"Что такое Flat Design и как его использовать","type":"unstyled","key":"a8geo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"Понравилась статья? Поддержи автора: подпишись на канал и поставь лайк!","type":"unstyled","key":"cduan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"IKjNNzBRPJLZjYSNjeXN"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/uchim-html-vmeste-chast-2-5dcc0461eec9e2085b07801e"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/uchim-html-vmeste-chast-1-5dca902d1322b67386d18e4a"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/uchim-html-vmeste-chast-2-5dcc0461eec9e2085b07801e"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/chto-takoe-flat-design-i-kak-ego-ispolzovat-5dcbd57df91fc7585e531785"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}