{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":177,"offset":0,"style":"ITALIC"}],"text":"Приветствую всех! В этой статье вы узнаете про основные теги, необходимые для создания своего сайта с нуля, а также сможете создать свою первую простейшую WEB-страницу. Поехали!","type":"unstyled","key":"appdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные понятия.","type":"header-two","key":"dussv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И так, начнём вообще с того, что такое HTML.","type":"unstyled","key":"c8rof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML – это не язык программирования, это язык гипертекстовой разметки, с помощью которого создается структура любого сайта. На данный момент пятая версия HTML, то есть HTML5.","type":"unstyled","key":"2h4o8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":43,"style":"BOLD"}],"text":"Язык HTML состоит из так называемых тегов. Тегами называются специальные слова, которые заключены в угловые скобочки <>. Каждое из таких слов имеет предназначение, например, создают заголовок, параграф, добавляют картинку.","type":"unstyled","key":"ebp1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":12,"style":"ITALIC"}],"text":"Теги бывают открывающими и закрывающими. Открывающий выглядит, например, так: <тег>, а перед закрывающим нужно поставить слеш: . Также эти теги могут называть парными и непарными. Парный состоит из открывающего и закрывающего тегов, а непарный только из открывающего. В целом это пишется в такой последовательности:","type":"unstyled","key":"e2ur9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":11,"offset":14,"style":"ITALIC"}],"text":"<тег> – парные теги","type":"unstyled","key":"454je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":12,"offset":8,"style":"ITALIC"}],"text":"<тег> – непарный тег","type":"unstyled","key":"3hm4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":46,"style":"ITALIC"}],"text":"Кроме этого, все теги делятся на две группы – блочные и строчные. Блочный тег занимает всю ширину окна браузера или родительского блока, а строчный – только ширину контента.","type":"unstyled","key":"7ad7v"},{"data":{"image":{"id":"62ad95de90520a3187db0acf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отличие между строчным и блочным тегами","type":"atomic:image","key":"219lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы изучили основную информацию, которая пригодится нам для дальнейшего изучения HTML. Теперь перейдём к самим тегам.","type":"unstyled","key":"serp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовая HTML-структура.","type":"header-three","key":"cop6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание сайта начинается с нескольких обязательных тегов, которые образуют базовую структуру. Взгляните на это изображение:","type":"unstyled","key":"216ju"},{"data":{"image":{"id":"62ad999745368f1078b4bed7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовая HTML-структура","type":"atomic:image","key":"7bfeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На скриншоте видны парные ( и т.п.) и непарные () теги. Сейчас разберём каждый элемент по порядку.","type":"unstyled","key":"194vg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":" – это выражение будет как бы „говорить“ браузеру, что веб-страница написана на HTML5;","type":"unordered-list-item","key":"86g1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":" является контейнером для всего содержимого сайта. Он помещается в начало и самый конец документа;","type":"unordered-list-item","key":"cnk7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":" предназначен для размещении в нём метатегов, которые помогают браузеру в обработке данных, а также скрипты, ссылки, стили и другое;","type":"unordered-list-item","key":"7ei6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":" – кодировка документа. Этот тег нужен для того, чтобы при написании сайта на русском языке у вас были именно русские буквы, а не разные иероглифы;","type":"unordered-list-item","key":"cm8sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":" задаёт заголовок документа. Браузер показывает тег как название вкладки. В заголовке должны быть ключевые слова, которые помогут найти поисковой системе ваш сайт;","type":"unordered-list-item","key":"7vt5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":2,"style":"BOLD"}],"text":"В <style></style> задаются CSS-стили, которые изменяют какие-либо элементы на сайте. Это могут быть параметры шрифта, фон, какие-либо элементы дизайна и многое другое. Но об этом мы узнаем в других статьях;","type":"unordered-list-item","key":"5eta0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":41,"style":"BOLD"}],"text":"Видимая часть сайта прописывается в теге <body></body>. Здесь уже создаются заголовки, подзаголовки, текст, ссылки, картинки и многое другое.","type":"unordered-list-item","key":"4c11u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перечисленные теги образуют начальную структуру сайта. Любой сайт начинается с этих строк, а затем каждый разработчик добавляет то, что ему хочется.","type":"unstyled","key":"fo8e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги для создания контента.","type":"header-two","key":"286it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь можно разобрать некоторые теги для создания видимой части сайта. Как уже говорилось выше, всё это будет прописываться внутри <body></body>.","type":"unstyled","key":"5gmrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":65,"offset":162,"style":"BOLD"}],"text":"На любом сайте есть какая-либо текстовая информация. И одна из таких информаций – это заголовки и подзаголовки. Чтобы их создать используются парные блочные теги <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> и <h6></h6>.","type":"unstyled","key":"ev3gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отличие этих тегов:","type":"unstyled","key":"3f12g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h1></h1> – главный заголовок сайта;","type":"unordered-list-item","key":"3mcff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h2></h2> – подзаголовок сайта;","type":"unordered-list-item","key":"asrtc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h3></h3>-<h6></h6> – подзаголовки 3, 4, 5 и 6 уровней соответственно.","type":"unordered-list-item","key":"1upm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так как <h1> является главным заголовком, то его следует использовать не более одного раза, а остальных подзаголовков может быть сколько угодно. Чаще всего достаточно тегов <h1>, <h2> и <h3>.","type":"unstyled","key":"nhmr"},{"data":{"image":{"id":"62b1d11628977c1210b8ec3b"},"images":[{"id":"62b1d11628977c1210b8ec3b"},{"id":"62b1d16ed4afeb56c345808f"}],"contents":{"62b1d16ed4afeb56c345808f":"Пример кода","62b1d11628977c1210b8ec3b":"Отображение заголовка и подзаголовков на сайте","imageId":"Пример кода"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отображение заголовка и подзаголовков на сайте","type":"atomic:image","key":"8b93a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":134,"style":"BOLD"}],"text":"Также после заголовков идёт какой-либо соответствующий текст или описание. Помещайте основной текст web-страницы в блочный парный тег <p></p>, который создает новый абзац/параграф.","type":"unstyled","key":"4kqnn"},{"data":{"image":{"id":"62b1cf84c37f592449e8d2f3"},"images":[{"id":"62b1cf84c37f592449e8d2f3"},{"id":"62b1cf0a20415000f4a112fd"}],"contents":{"62b1cf0a20415000f4a112fd":"Пример кода","62b1cf84c37f592449e8d2f3":"Отображение параграфов на сайте","imageId":"Пример кода"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отображение параграфов на сайте","type":"atomic:image","key":"np9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":33,"style":"BOLD"},{"length":4,"offset":104,"style":"ITALIC"}],"text":"С помощью парного строчного тега <a></a> создаются ссылки и якоря. Ссылка создается при помощи атрибута href, в значение которого указывается адрес какого-либо сайта или документа в Интернете. Якорь – это своеобразная закладка в любой части страницы, на которую можно быстро перейти, нажав по ссылке (так работает меню на сайтах). Весь текст или картинка, заключенные между этим тегом, будут являться ссылкой.","type":"unstyled","key":"b1u8o"},{"data":{"image":{"id":"62b1cdd1bbb9f63e553597d9"},"images":[{"id":"62b1cdd1bbb9f63e553597d9"},{"id":"62b1cdc8d4afeb56c33d5b87"}],"contents":{"62b1cdc8d4afeb56c33d5b87":"Пример кода","62b1cdd1bbb9f63e553597d9":"Ссылки на сайте","imageId":"Пример кода"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ссылки на сайте","type":"atomic:image","key":"df7tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":32,"style":"BOLD"}],"text":"В коде видно некий непарный тег <br>. Он предназначен для переноса текста в любом месте, либо строчных тегов на новую строку, сколько раз вы напишите <br>, на столько строк и перенесётся текст.","type":"unstyled","key":"8usu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":93,"style":"BOLD"},{"length":3,"offset":139,"style":"ITALIC"},{"length":3,"offset":210,"style":"ITALIC"}],"text":"Конечно же, на сайтах есть и изображения. Для их добавления существует строчный непарный тег <img>. У него есть два обязательных атрибута: src – путь к изображению (ссылка или путь к фото на вашем устройстве); alt – текст, который появится, если картинка по каким-то причинам не загрузится (значение можно оставить пустым). Общая запись будет выглядеть примерно так:","type":"unstyled","key":"5ad5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"ITALIC"}],"text":"<img src=\"путь к картинке\" alt=\"замещающий текст\">","type":"unstyled","key":"cusoi"},{"data":{"image":{"id":"62b1d69d28977c1210c4cd2d"},"images":[{"id":"62b1d69d28977c1210c4cd2d"},{"id":"62b1d69612aacc0e5f64714a"}],"contents":{"62b1d69612aacc0e5f64714a":"Пример кода","62b1d69d28977c1210c4cd2d":"Изображения на web-странице","imageId":"Пример кода"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображения на web-странице","type":"atomic:image","key":"56erf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И три последних тега в рамках этой статьи нужны для создания маркированного и нумерованного списков.","type":"unstyled","key":"bi7qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот они:","type":"unstyled","key":"9kidn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"<li></li> – элемент списка (каждая часть текста, помещенная в этот тег, будет отдельным элементом). Он помещается в два других тега – <ul> или <ol>, в зависимости от того, какой список вам нужен;","type":"unordered-list-item","key":"8e5gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"<ul></ul> – маркированный список;","type":"unordered-list-item","key":"b8nd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"<ol></ol> – нумерованный список.","type":"unordered-list-item","key":"asisi"},{"data":{"image":{"id":"62b1db25c4c0033e63125ff6"},"images":[{"id":"62b1db25c4c0033e63125ff6"},{"id":"62b1db1b0946b90eae96d6d4"}],"contents":{"62b1db1b0946b90eae96d6d4":"Пример кода","62b1db25c4c0033e63125ff6":"Маркированный и нумерованный списки на странице","imageId":"Пример кода"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Маркированный и нумерованный списки на странице","type":"atomic:image","key":"8l6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":96,"style":"ITALIC"}],"text":"Это еще не все, мы можем изменить маркер или цифру на что-нибудь другое с помощью HTML-атрибута type:","type":"unstyled","key":"eecg4"},{"data":{"image":{"id":"62b1dd6037703f1716913eb7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибуты для изменения типа маркеров и цифр","type":"atomic:image","key":"2cqoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":53,"style":"ITALIC"}],"text":"Также для тега <ol></ol> есть дополнительный атрибут start, позволяющий начать нумерацию с другой цифры или буквы. В качестве значения не зависимо от типа нумерации указывается цифра. Кстати, <ul> и <ol> можно вложить друг в друга, тогда получится вложенный список.","type":"unstyled","key":"vkud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваша первая WEB-страничка.","type":"header-two","key":"d2vt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь, исходя из полученной информации, можно создать простейший сайт.","type":"unstyled","key":"38kso"},{"data":{"image":{"id":"62b428caafc0212bbee01777"},"images":[{"id":"62b428caafc0212bbee01777"},{"id":"62b427e8ffe61d7b23a19ec4"}],"contents":{"62b427e8ffe61d7b23a19ec4":"HTML-код","62b428caafc0212bbee01777":"Ваш первый сайт","imageId":"HTML-код"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваш первый сайт","type":"atomic:image","key":"aarlj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём всё это поэтапно:","type":"unstyled","key":"2q8ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":139,"style":"ITALIC"}],"text":"сначала создаётся текстовый документ на вашем компьютере, а затем меняется его расширение на .html (обычно главную страницу сайта называют index.html). Полученный файл можно открыть либо с помощью блокнота, либо с помощью текстового редактора (я использую Sublime Text 3);","type":"ordered-list-item","key":"8rpj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"как и было сказано ранее, пишем начальную HTML-структуру. Название страницы в <title> вы можете придумать любое другое;","type":"ordered-list-item","key":"e6gln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":70,"style":"ITALIC"}],"text":"переходим к написанию видимой части сайта. Создадим главный заголовок

. Пусть заголовок будет таким: „Это моя первая WEB-страничка“;","type":"ordered-list-item","key":"7na9m"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":20,"offset":122}],"inlineStyleRanges":[],"text":"после заголовка идёт параграф с текстом (этот текст ничего не означает, существуют генераторы подобного текста, например, https://fish-text.ru, но вы можете написать и свой текст);","type":"ordered-list-item","key":"fpfsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":36,"style":"ITALIC"},{"length":7,"offset":60,"style":"ITALIC"}],"text":"далее были созданы два подзаголовка

с параграфами

;","type":"ordered-list-item","key":"4pn4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"для разнообразия ещё было добавлено изображение;","type":"ordered-list-item","key":"b4guo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":49,"style":"ITALIC"},{"length":13,"offset":134,"style":"ITALIC"}],"text":"третья подглава состоит из маркированного списка

, а в качестве маркера было решено сделать квадратик, для этого и добавлено type=\"square\";","type":"ordered-list-item","key":"7od1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":102,"style":"ITALIC"},{"length":4,"offset":115,"style":"ITALIC"}],"text":"страница заканчивается 3 ссылками. Для этого перенесём текст на несколько строк и создадим три ссылки , где href пишем любую ссылку.","type":"ordered-list-item","key":"2up9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fu46h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, я всё описал понятно и вам понравилась эта статья \uD83D\uDE04","type":"unstyled","key":"3pbtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если есть вопросы, задавайте их в комментариях, постараюсь ответить \uD83D\uDCAC","type":"unstyled","key":"bsvls"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":39,"offset":17}],"inlineStyleRanges":[],"text":"Файлы из статьи: https://disk.yandex.ru/d/Y78PSsH5ND5xMw \uD83D\uDCCE","type":"unstyled","key":"6hukf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b2gj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"jvop"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"63b85f84bc76f64645b6d5fd","originalUrl":"https://dzen.ru/a/Y7hfhLx29kZFttX9","publisherId":"621b7e1c70df981201bcba28","publisherName":"HTML'щик","title":"Какие HTML-теги необходимы для создания сайта? Часть 2","publishTime":1673294849323,"isPublisherVerified":false,"image":{"id":"63f32f104b6b9a282c02837d","groupId":3752452,"imageName":"pub_63b85f84bc76f64645b6d5fd_63f32f104b6b9a282c02837d","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":"63dj3"},{"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":"a143p"},{"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":"fm5ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9u82l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Ui9seniRask6R8x5QCj7"}],"entityMap":{"0":{"data":{"url":"https://fish-text.ru/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://disk.yandex.ru/d/Y78PSsH5ND5xMw"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}