.","type":"unstyled","key":"bvh5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<title>Вкладка

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":8,"offset":101}],"inlineStyleRanges":[{"length":11,"offset":69,"style":"ITALIC"}],"text":"Обучение я начал с выбора траектории обучения, в этом не помог канал Pomazkov JS, который представил road-map изучения разработки сайта.","type":"unstyled","key":"ft7mt"},{"data":{"image":{"id":"64e1dcb62f5cf92aae5d68b9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Front-enf Roadmap 2023. Ссылка: https://miro.com/app/board/uXjVOv90G2k=/","type":"atomic:image","key":"8njb5"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":157}],"inlineStyleRanges":[{"length":4,"offset":193,"style":"ITALIC"},{"length":5,"offset":200,"style":"ITALIC"},{"length":4,"offset":307,"style":"ITALIC"},{"length":11,"offset":315,"style":"ITALIC"}],"text":"Естественно обучение я начал с изучения html. До этого я уже сталкивался с ним, но сейчас я решил изучить его полностью. В изучении базы html мне помог сайт HTMLАcademy с их курсом по обучению html и css. Начал я с основ html, структура кода, теги html, добавление тегов и семантическая верстка. Закончив с html на HTMLAcademy я начал самостоятельное изучение различных видов тэгов и семантической верстки. Ссылки на все изученные материалы будут представлены в конце статьи. Далее будет представлена основная информация по html, собранная воедино.","type":"unstyled","key":"d9obr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основы html","type":"header-two","key":"6obcq"},{"data":{"image":{"id":"64e1f8cfcfe46f6376932544"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что нужно изучить в html.","type":"atomic:image","key":"armdd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":67,"style":"ITALIC"},{"length":8,"offset":92,"style":"ITALIC"}],"text":"Начнем с основного, со структуры кода html. Начнем с синтаксиса. В html есть так называемые \"теги\". Любой тег обертывается в такие стрелки - <>. Существуют парные теги и одиночные.","type":"unstyled","key":"dmqgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bi05c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f6q56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7v9ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ar4qi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fkpvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы могли заметить, парный тег заканчивается тегом, с косой чертой перед названием, это второй, закрывающий тег.","type":"unstyled","key":"257o0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"ITALIC"}],"text":"Кстати, комментарии в html обозначаются, так: ","type":"unstyled","key":"88smb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Теперь, перейдем к изучению структуры документа.","type":"unstyled","key":"6c2ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все начинается с декларации типа документа:","type":"unstyled","key":"60tcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"db8j9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":42,"style":"ITALIC"}],"text":"Он помогает браузеру понять, какая версия html используется, чтобы он правильно отобразил страницу.","type":"unstyled","key":"1l00n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":24,"style":"ITALIC"},{"length":6,"offset":72,"style":"ITALIC"},{"length":6,"offset":83,"style":"ITALIC"}],"text":"Далее идет основной тег html, содержащий в себе все остальные, например или :","type":"unstyled","key":"6u9j2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2r1o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"e7kab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6v468"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":40,"style":"ITALIC"}],"text":"Обычно именно в него записывают атрибут lang.","type":"unstyled","key":"depr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"753mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":18,"style":"ITALIC"},{"length":4,"offset":30,"style":"ITALIC"},{"length":3,"offset":139,"style":"ITALIC"}],"text":"Значение атрибута lang равное ru, это значит, что язык сайта русский, аналогично если язык сайта будет английским, то значение будет равно en.","type":"unstyled","key":"8or4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":12,"style":"ITALIC"},{"length":6,"offset":42,"style":"ITALIC"},{"length":6,"offset":51,"style":"ITALIC"}],"text":"Внутри тега находятся два других - и .","type":"unstyled","key":"1adin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":7,"style":"ITALIC"},{"length":6,"offset":56,"style":"ITALIC"}],"text":"В теге хранится важная служебная информация, а в отображаемая часть сайта.","type":"unstyled","key":"cfl2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":49,"style":"ITALIC"}],"text":"Соберем сейчас все кусочки в одно целое и получим \"позвоночник\" сайта:","type":"unstyled","key":"6cjfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dqv0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7bggs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"fjmtj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"5g7k7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1g3nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"5mcb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1jpoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1ri8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"aha1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":12,"style":"ITALIC"}],"text":"Вот и готов \"позвоночник\" страницы, теперь разберем что должно находиться в тегах служебной информации и содержимого сайта.","type":"unstyled","key":"tcro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":87,"style":"ITALIC"}],"text":"В служебной информации указывается кодировка сайта, подключаемые стили, информация для SEO (описание и ключевые слова в выдаче поисковика).","type":"unstyled","key":"ftjna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":89,"style":"ITALIC"}],"text":"Также в этом теге можно указать название вкладки в браузере, делается это с помощью тега .","type":"unstyled","key":"bvh5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<title>Вкладка","type":"blockquote","key":"7t513"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":37,"style":"ITALIC"},{"length":9,"offset":55,"style":"ITALIC"}],"text":"Кодировка указывается с помощью тега и атрибута charset, находящегося внутри него.","type":"unstyled","key":"e3f8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"d97s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":9,"style":"ITALIC"}],"text":"Значение utf-8 говорит браузеру, что необходимо использовать кодировку utf-8, для стабильной работы сайта.","type":"unstyled","key":"59qmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":34,"style":"ITALIC"}],"text":"Стили подключаются с помощью тега ","type":"unstyled","key":"6t841"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dovqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":8,"style":"ITALIC"},{"length":9,"offset":116,"style":"ITALIC"},{"length":4,"offset":135,"style":"ITALIC"},{"length":10,"offset":173,"style":"ITALIC"},{"length":8,"offset":184,"style":"ITALIC"}],"text":"Атрибут href указывается для определения ссылки откуда будет браться информация, а в данном примере файл со стилями style.css. Атрибут rel указывает на тип ссылки, а именно stylesheet (стили).","type":"unstyled","key":"3o1ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":15,"style":"ITALIC"}],"text":"Про данные для SEO поговорим в другой статье.","type":"unstyled","key":"c0psb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":92,"style":"ITALIC"}],"text":"Теперь перейдем к содержимому сайту, в этой статье будут описаны самые основные теги внутри body:","type":"unstyled","key":"1fll7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"header;","type":"unordered-list-item","key":"8m5rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":"main;","type":"unordered-list-item","key":"311tf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"footer.","type":"unordered-list-item","key":"2jvf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":9,"style":"ITALIC"}],"text":"Начнем с header - это шапка сайта, самая верхняя часть страницы.","type":"unstyled","key":"11tj5"},{"data":{"image":{"id":"64e27f32e3af2966a5cf1e89"},"contents":{"64e27f32e3af2966a5cf1e89":"Шапка сайта "}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шапка сайта ","type":"atomic:image","key":"cdluj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Записывается этот тег так:","type":"unstyled","key":"9jg73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"9ua8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Содержимое шапки","type":"blockquote","key":"fqlq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2ii00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":12,"style":"ITALIC"}],"text":"Дальше идет main - основная часть сайта, там, где размещается контент.","type":"unstyled","key":"fvh6a"},{"data":{"image":{"id":"64e2808d341d621bd4ac9450"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контент, содержащийся в main","type":"atomic:image","key":"3vpp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Записывается он так:","type":"unstyled","key":"9tsjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"b6smg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" контент","type":"blockquote","key":"2uqt8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"47s79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":32,"style":"ITALIC"}],"text":"И в конце идет подвал сайта или \"футер\". Обычно там записывается контактная информация, а также имя разработчика сайта. Форма записи:","type":"unstyled","key":"3bohf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"487cb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":111,"style":"ITALIC"}],"text":"Итак, теперь соберем все изученные сегодня части и соберем воедино. Получается вот такой код, который является \"скелетом\" сайта.","type":"unstyled","key":"3dr66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код:","type":"unstyled","key":"8uhs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4hqm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bqhnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"8qgta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Первый сайт","type":"blockquote","key":"8uts3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"9rddv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"6opm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"bje5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4urhq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Шапка

","type":"blockquote","key":"8ghoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Контент

","type":"blockquote","key":"2pvq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4bbim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"5fg9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a12f0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":27,"style":"ITALIC"}],"text":"Теперь можете создать файл index.html, вставить этот код и открыть файл в браузере и вы увидите свою первую верстку, поздравляю!","type":"unstyled","key":"148d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В следующей статье я расскажу как я изучал различные другие теги и подробнее вам расскажу про них. На этом все, до встречи!","type":"unstyled","key":"c62d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"2NTZVn7JfrKK2XxMytYO"}],"entityMap":{"0":{"data":{"url":"https://miro.com/app/board/uXjVOv90G2k=/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://htmlacademy.ru/courses/297"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}