{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":23,"offset":229}],"inlineStyleRanges":[{"length":252,"offset":0,"style":"ITALIC"}],"text":"Всем привет! Это вторая часть про основные теги, необходимые для создания своего сайта с нуля. Здесь мы разберём ещё несколько тегов для написания своего сайта. Если вы не читали первую часть, то рекомендую сначала прочитать её, кликнув по этой ссылке.","type":"unstyled","key":"38ltv"},{"data":{"image":{"id":"63f32f104b6b9a282c02837d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"buo2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление подписи к изображению.","type":"header-two","key":"389b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В первой части мы научились добавлять изображению на ВЕБ-страницу. Чаще всего к изображениям добавляется подпись, некое краткое описание картинки, которое будет видно читателю.","type":"unstyled","key":"5eo1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":40,"style":"BOLD"},{"length":17,"offset":224,"style":"BOLD"}],"text":"Чтобы сделать подпись, используется тег

, внутри которого и будет подпись. Данный тег идёт после , и уже получившаяся конструкция из и

оборачивается парным тегом

. Это как бы объединит всё в единую часть.","type":"unstyled","key":"eknfc"},{"data":{"image":{"id":"63b86dcd5ba1321f071a16c9"},"images":[{"id":"63b86dcd5ba1321f071a16c9"},{"id":"63b86bb49bd13619e23c0cdc"}],"contents":{"63b86bb49bd13619e23c0cdc":"height – высота изображения, число 800 подразумевает значение в пикселях","63b86dcd5ba1321f071a16c9":"Красным обведена подпись к картинке","imageId":"height – высота изображения, число 800 подразумевает значение в пикселях"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Красным обведена подпись к картинке","type":"atomic:image","key":"a0793"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблица на HTML.","type":"header-two","key":"1akuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Немаловажной составляющей сайта является таблица. В ней удобно разместить определённую информацию, провести какое-либо сравнение и тому подобное.","type":"unstyled","key":"3o10t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":40,"style":"BOLD"},{"length":19,"offset":211,"style":"BOLD"}],"text":"Чтобы сделать таблицу, используется тег

. Это и будет главным контейнеров для ячеек. Как и у изображений, к таблице можно добавить подпись. Для этого после открывающего нужно написать тег .","type":"unstyled","key":"cub5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ячейки таблицы образуются с помощью следующих тегов:","type":"unstyled","key":"45lve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":" – строка таблицы","type":"unordered-list-item","key":"6ruok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":" – ячейка с заголовком, по умолчанию текст в такой ячейке выделен жирным и выравнен по центру","type":"unordered-list-item","key":"fo076"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":" – ячейка с информацией","type":"unordered-list-item","key":"3e6o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":97,"style":"BOLD"},{"length":14,"offset":200,"style":"BOLD"},{"length":14,"offset":273,"style":"BOLD"}],"text":"Изначально у таблицы нет рамок, точнее они невидимы. Границы таблицы задаются с помощью атрибута border=\"\" (в кавычках пишется число, в примере ниже указано 5, то есть 5 пикселей). Далее идёт атрибут cellspacing=\"\". Он нужен для того, чтобы рамка была одинарной. А атрибут cellpadding=\"\" отвечает за отступы внутри ячейки. ","type":"unstyled","key":"4b242"},{"data":{"image":{"id":"63b9c4927fc57c5d5d604913"},"images":[{"id":"63b9c4927fc57c5d5d604913"},{"id":"63b9c49a51ee5b461fda8e21"}],"contents":{"63b9c49a51ee5b461fda8e21":"Пример кода HTML-таблицы","63b9c4927fc57c5d5d604913":"Таблица с подписью","imageId":"Пример кода HTML-таблицы"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблица с подписью","type":"atomic:image","key":"uoak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также ячейки таблиц можно объединять. Это будет разобрано в отдельной статье.","type":"unstyled","key":"2q14q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Универсальные контейнеры. Тег

и тег .","type":"header-two","key":"a2oo1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":4,"style":"BOLD"}],"text":"Тег

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

использовался для деления сайта на фрагменты (шапка, подвал, сайдбар).","type":"unstyled","key":"e2i5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас же появились новые семантические теги, которые также будут разобраны в отдельной статье. Но это не значит, что тег стал бесполезным. Он по-прежнему активно используется для вёрстки декоративных элементов сайта, контейнеров с контентом и вообще там, где не подходят семантические теги.","type":"unstyled","key":"d1gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":8,"style":"BOLD"}],"text":"С тегом всё почти также как и с

. Только – это строчный тег. Он подойдёт, допустим, для выделения или стилизации части текста.","type":"unstyled","key":"fnonm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и, разумеется, пример. Поместим внутрь

бессмысленный текст, часть которого обернём тегом . А для наглядности придётся задействовать пару CSS-стилей. Всё, что написано в кавычках атрибута style=\"\" является этими стилями.","type":"unstyled","key":"9q2ca"},{"data":{"image":{"id":"63bc624dd0e0b420fa483ef2"},"images":[{"id":"63bc624dd0e0b420fa483ef2"},{"id":"63bc6258287eb857066754f5"}],"contents":{"63bc6258287eb857066754f5":"Пример кода с использованием

и ","63bc624dd0e0b420fa483ef2":"

и на вашем сайте","imageId":"Пример кода с использованием

и "}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

и на вашем сайте","type":"atomic:image","key":"2kcsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Редактирование текста на HTML.","type":"header-two","key":"bri2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ещё в языке HTML существует несколько тегов для редактирования текста. Под редактированием стоит понимать, что текст можно сделать жирным, курсивом, подчёркнутым или зачёркнутым. Ниже приведены эти теги.","type":"unstyled","key":"80ec2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" – жирный текст","type":"unordered-list-item","key":"8a4k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" – курсив","type":"unordered-list-item","key":"2bmib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" – подчёркнутый текст","type":"unordered-list-item","key":"6n73d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" – зачёркнутый текст","type":"unordered-list-item","key":"ak3ob"},{"data":{"image":{"id":"63bc6c682a01843af8b92491"},"images":[{"id":"63bc6c682a01843af8b92491"},{"id":"63bc6c71bfe09b7a5841f77c"}],"contents":{"63bc6c71bfe09b7a5841f77c":"Пример кода","63bc6c682a01843af8b92491":"HTML-теги для текста","imageId":"Пример кода"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-теги для текста","type":"atomic:image","key":"49cm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":77,"style":"BOLD"}],"text":"Тут ещё есть горизонтальные линии. Их можно сделать с помощью непарного тега

.","type":"unstyled","key":"2b0l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⤵","type":"unstyled","key":"3rc7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом стоит закончить вторую часть разбора тегов, необходимых для создания своего сайта \uD83C\uDF10","type":"unstyled","key":"7ni89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если есть вопросы, задавайте их в комментариях, постараюсь ответить \uD83D\uDCAC","type":"unstyled","key":"d038p"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":39,"offset":21}],"inlineStyleRanges":[],"text":"Материалы из статьи: https://disk.yandex.ru/d/0RrjfZ1bZpYxDw\uD83D\uDCCE","type":"unstyled","key":"b8p6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"d80i8"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"62acd38bdda22178b46908ed","originalUrl":"https://dzen.ru/media/id/621b7e1c70df981201bcba28/kakie-htmltegi-neobhodimy-dlia-sozdaniia-saita-chast-1-62acd38bdda22178b46908ed?from_embed=true","publisherId":"621b7e1c70df981201bcba28","publisherName":"HTML'щик","title":"Какие HTML-теги необходимы для создания сайта? Часть 1","publishTime":1655976778349,"isPublisherVerified":false,"image":{"id":"62b427e8ffe61d7b23a19ec4","groupId":1895194,"imageName":"pub_62acd38bdda22178b46908ed_62b427e8ffe61d7b23a19ec4","namespace":"zen_doc","meta":{"mainColor":"#303840","origFormat":"PNG"},"sizes":{"orig":{"width":1762,"height":1627},"scale_360":{"width":360,"height":332},"scale_540":{"width":540,"height":499},"scale_600":{"width":600,"height":554},"scale_720":{"width":720,"height":665},"scale_1200":{"width":1200,"height":1108},"scale_2400":{"width":1762,"height":1627}}},"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"40k1l"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"63f3281269bdcf194407a818","originalUrl":"https://dzen.ru/a/Y_MoEmm9zxlEB6gY","publisherId":"621b7e1c70df981201bcba28","publisherName":"HTML'щик","title":"Объединение ячеек таблицы в HTML","publishTime":1676920991522,"isPublisherVerified":false,"image":{"id":"63f330184b6b9a282c05fa68","groupId":4909844,"imageName":"pub_63f3281269bdcf194407a818_63f330184b6b9a282c05fa68","namespace":"zen_doc","meta":{"mainColor":"#303840","origFormat":"PNG"},"sizes":{"orig":{"width":1920,"height":1080},"scale_360":{"width":360,"height":203},"scale_540":{"width":540,"height":304},"scale_600":{"width":600,"height":338},"scale_720":{"width":720,"height":405},"scale_1200":{"width":1200,"height":675},"scale_2400":{"width":1920,"height":1080}}},"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"1jspo"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"63f5118681458436f1aee21e","originalUrl":"https://dzen.ru/a/Y_URhoFFhDbxruIe?from_embed=true","publisherId":"621b7e1c70df981201bcba28","publisherName":"HTML'щик","title":"Какие HTML-теги необходимы для создания сайта? Часть 3","publishTime":1678633107818,"isPublisherVerified":false,"image":{"id":"640b7a796c70be0028167eaa","groupId":9369849,"imageName":"pub_63f5118681458436f1aee21e_640b7a796c70be0028167eaa","namespace":"zen_doc","meta":{"mainColor":"#303840","origFormat":"PNG"},"sizes":{"orig":{"width":1920,"height":1080},"scale_360":{"width":360,"height":203},"scale_540":{"width":540,"height":304},"scale_600":{"width":600,"height":338},"scale_720":{"width":720,"height":405},"scale_1200":{"width":1200,"height":675},"scale_2400":{"width":1920,"height":1080}}},"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"568t4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bvdtf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"jbjOJDaV2pKqLM1LzQJd"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/YqzTi92iIXi0aQjt"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://disk.yandex.ru/d/0RrjfZ1bZpYxDw"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}