{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-теги","type":"header-two","key":"dsgkc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML – это разметка для определенной веб-страницы. Поэтому необходимо, чтобы весь контент (текст, картинки или другие объекты страницы) появлялся конкретным образом в определенном порядке – у всех сайтов ведь разный дизайн. Например, вам может быть нужно, чтобы определенная часть текста была меньше, другая — больше, какая-то — жирной, курсивом или вообще в кавычках, оформленная как цитата. В HTML есть специальные «теги», благодаря которым можно сделать это в несколько кликов.","type":"unstyled","key":"9p3je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":16,"style":"BOLD"},{"length":10,"offset":73,"style":"BOLD"}],"text":"Теги могут быть парными (в них присутствует открывающий и закрывающий) и одиночными (используется самостоятельно).","type":"unstyled","key":"6vl7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже, на картинке, представлены несколько тегов.","type":"unstyled","key":"bjprm"},{"data":{"image":{"id":"63ce1891d54bf059eeebc789"},"images":[{"id":"63ce1891d54bf059eeebc789"}],"contents":{}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"title - тоже тег, но о нем позже. Обратите внимание на подписанные теги","type":"atomic:image","key":"46rl9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-элементы","type":"header-two","key":"9coch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент – это единица HTML-документа. Он состоит из открывающего тега, контента внутри и закрывающего тега. Некоторые элементы могут быть пустыми – это абсолютно нормально, это не ошибка. Это значит, что они не имеют закрывающего тега, но вместо него используют внутри себя ссылку на содержимое, которое нужно поместить на сайт/страницу.","type":"unstyled","key":"9e1q0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примером такого элемента может послужить , который мы используем для помещения картинки на сайт/страницу.","type":"unstyled","key":"fdv3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-элементы часто путают с тегами, и они в принципе могут заменить друг друга. Но все же между ними есть небольшое расхождение, о котором стоит знать. Элемент – это комбинация тегов (открывающего и закрывающего), в которой находится контент – то есть, содержимое используется внутри открывающего тега. А у тегов контент располагается между открывающим и закрывающим.","type":"unstyled","key":"ahv34"},{"data":{"image":{"id":"63ce15e14f09cf41b39c0771"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body - тег, img - элемент","type":"atomic:image","key":"5nm4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-атрибуты","type":"header-two","key":"6vi1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-теги также имеют атрибуты – вспомогательные команды. Они помещаются внутрь открывающего тега и могут отвечать за стиль, класс, значение и многое другое. Стоит отметить, что один элемент не может содержать внутри два и более атрибута с одинаковым именем. Благодаря им можно передавать необходимые данные об элементе, производить определенные действия. Например, выполнять стилизацию элементов или манипулировать движениями с помощью языка JavaScript.","type":"unstyled","key":"d5r94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Структура базовой HTML-страницы:","type":"unstyled","key":"e6tag"},{"data":{"image":{"id":"63ce178446766a73d2867f43"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ekm56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте подробнее рассмотрим кусочки кода по-отдельности:","type":"unstyled","key":"6rgkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":" – показывает, что нами в коде используется HTML5, а не какая-то другая версия. До введения в пользование HTML5 нужно было каждый раз прописывать, какую версию HTML использовали (кодировали). Например, HTML3.3, 3.2, 2.1 и т.д. Но теперь, к счастью, делать это нам больше не нужно. Когда в коде написано «html» и прописан основной тег, браузер автоматически определяет, что кодироваться будет HTML5.","type":"unstyled","key":"4garg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":" – его можно называть по-разному, и оба варианта правильны. Корневой элемент или элемент верхнего уровня – он пишется в каждом HTML-документе, без него не получится создать даже начальную структуру. Каждый следующий элемент должен быть внутри него, иначе он не прочитается и не будет замечен.","type":"unstyled","key":"al80m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":" – так называемая «голова» страницы. Это, определенно, одна из основных частей всего документа в целом. Потому что роботы, видя страницу, всегда заглядывают внутрь данного тега, чтобы получить необходимые для них данные о документе. Внутри находится различная информация – общий заголовок страницы, стили, метаданные для SEO и многое другое.","type":"unstyled","key":"3aq9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":" – это пустой элемент, не отображающийся в браузере, однако он не менее важен для разработчиков. Он передает метаинформацию (структурные данные) о странице. Он тоже может содержать внутри разное. Например, автора, тип кодировки (почти всегда все используют UTF-8, она была принята повсеместно), описания, сущности и многое другое. Также как и в , поисковые боты всегда ищут и проверяют метатег, чтобы получить всю нужную информацию. Впоследствии эти данные необходимы будут для оптимизации страницы в поиске.","type":"unstyled","key":"f33cs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":" – это заголовок веб-страницы. Он всегда отображается в самом верху, во вкладке браузера.","type":"unstyled","key":"f27pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":" – это «тело». Оно несет в себе абсолютно все содержимое документа. Вся информация и контент, который попадает на страницу, должен быть внутри данного тега, иначе он не прочитается браузером. Важное замечание – на всей странице может быть только один тег .","type":"unstyled","key":"bbbso"},{"data":{"image":{"id":"63ce18d1b93d2b437e8e226b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2947s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы легко сможете повторить то же самое, что написано у меня в коде.","type":"unstyled","key":"64anq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"vUTtrktkBB6kOvn7LfXN"}],"entityMap":{}},"mentions":[]}