Document

{"draftJsState":{"blocks":[{"data":{"image":{"id":"5fa2451efeef0b1a810afc45"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cohtg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем читателям привет, это DevNoob.","type":"unstyled","key":"b15s2"},{"data":{"image":{"id":"5fa245035dfc942ad7c87097"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":85,"offset":0,"style":"ITALIC"}],"text":"Сегодня мы разберём основы основ вёрстки, а именно язык гипертекстовой разметки HTML.","type":"unstyled","key":"eutrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержание:","type":"blockquote","key":"d2ia0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Базовая разметка и редактор кода.","type":"blockquote","key":"9m7sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Что такое одиночные и парные теги.","type":"blockquote","key":"8i2sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Как добавить информацию на страницу.","type":"blockquote","key":"8lgad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. ДЗ.","type":"blockquote","key":"bn63c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Бонусные материалы.","type":"blockquote","key":"fp4tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6ach4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рекомендации","type":"header-two","key":"h20l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед началом этого урока я настоятельно рекомендую во время чтения переходить в редактор кода и повторять мои действия.","type":"unstyled","key":"3nni7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"btdb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":"Базовая разметка и редактор кода.","type":"header-two","key":"6jcjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала нужно разобраться в какой программе писать код.","type":"unstyled","key":"5nvge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как по мне есть 3 варианта:","type":"unstyled","key":"53k41"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":14,"offset":0}],"inlineStyleRanges":[],"text":"Sublime text 3","type":"ordered-list-item","key":"4o01"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":18,"offset":0}],"inlineStyleRanges":[],"text":"Visual studio code","type":"ordered-list-item","key":"7fcg9"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Brackets","type":"ordered-list-item","key":"83koa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" В моём случае писать код я буду в программе sublime text 3.","type":"unstyled","key":"9mkf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"UNDERLINE"}],"text":"Редактор кода - это место где мы будем писать и редактировать наш код.","type":"unstyled","key":"48l9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Sublime text 3 устанавливается как обычная программа, поэтому показывать процесс установки я не буду.","type":"unstyled","key":"9ptpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"30srd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы установили редактор кода, запускаем его.","type":"unstyled","key":"40i09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только программа откроется, нас будет ждать пустое окно ","type":"unstyled","key":"f674d"},{"data":{"image":{"id":"5fa24ce9feef0b1a8113cdf0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стартовое окно сублайм текст 3","type":"atomic:image","key":"fmm98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":59,"style":"ITALIC"}],"text":"Чтобы начать писать код на HTML нужно создать пустой файл (ctrl + n) и сохранить его (ctrl + s).","type":"unstyled","key":"7dc64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Называем наш файл index и выбираем ему расширение .html.","type":"unstyled","key":"jrfj"},{"data":{"image":{"id":"5fa24da45dfc942ad7d23fb5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так должно выглядеть сохранение файла","type":"atomic:image","key":"5fgcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В дальнейшем мы будем создавать файлы именно так.","type":"unstyled","key":"1o3sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы сделали всё правильно, то внизу должна отображаться надпись HTML - это означает что редактор кода понимает. что в дальнейшем весь код будет писаться на HTML.","type":"unstyled","key":"btvfm"},{"data":{"image":{"id":"5fa24e3a585202096786894e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5gaf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично, приступим к разметке. Разметка - это то, без чего не будет работать веб страница. Стартовая разметка HTML выглядит так:","type":"unstyled","key":"8vhma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"33jos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"2p1ju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"uvbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"\t","type":"unstyled","key":"7i8kc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"}],"text":"\tDocument","type":"unstyled","key":"clv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"394p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"8pg1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"44is3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"7dopq"},{"data":{"image":{"id":"5fa25099f278637dd487e58e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разметка HTML-5","type":"atomic:image","key":"dcir4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ahcks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":62,"style":"ITALIC"}],"text":"Давайте разберём ее подробнее. Вся разметка начинается с тега , этот тег говорит браузеру что весь код ниже написан на новейшей версии HTML - 5. Про теги поговорим чуть позже.","type":"unstyled","key":"dvjsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее идёт тег в котором и будет находится весь код веб-страницы.","type":"unstyled","key":"fl1ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В теге находится информация, которая нужна браузеру, но мы её не видим. Далее идёт тег , который хранит в себе кодировку UTF-8.","type":"unstyled","key":"3dli2"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":55,"offset":0}],"inlineStyleRanges":[],"text":"Что это такое и как оно работает можно прочитать здесь.","type":"unstyled","key":"72oi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег хранит в себе название вкладки, к примеру если написать в нём: Мой первый сайт, то при открытии вашего сайта название вкладки будет \"Мой первый сайт\".","type":"unstyled","key":"adqgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее идёт тег <body> - в нём хранится вся информация которую мы видим на сайте: картинки, текст, и так далее.","type":"unstyled","key":"82m4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое одиночные и парные теги","type":"header-two","key":"clk0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы наверняка заметили, что в разметки есть странные теги со слешем -","type":"unstyled","key":"aj679"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"к примеру </body>. Это называется закрывающим тегом и эта конструкция относиться к парным тегам. Проще говоря: парные теги это конструкция из открывающего и закрывающего тега. В нашем случае теги <html>, <head>, <title> и <body> - парные.","type":"unstyled","key":"63pi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одиночные теги не содержат закрывающего тега со слешем.","type":"unstyled","key":"bfhh1"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":6,"offset":45}],"inlineStyleRanges":[],"text":"Подробнее про одиночные теги можно прочитать здесь,","type":"unstyled","key":"edfn8"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":5,"offset":11}],"inlineStyleRanges":[],"text":"про парные здесь.","type":"unstyled","key":"b19l5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как добавить информацию на страницу","type":"header-two","key":"7ur5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы разберём несколько основных тегов для создания материала.","type":"unstyled","key":"cf2qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Теги заголовков.","type":"unstyled","key":"6nbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги заголовков - <h1> - <h6> являются парными тегами, внутрь которых нужно поместить текст заголовка.","type":"unstyled","key":"9vgq6"},{"data":{"image":{"id":"5fa253e2f278637dd48c20c7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конструкция парного тега <h1>","type":"atomic:image","key":"720pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы посмотреть страницу, нужно открыть созданный нами файл в браузере.","type":"unstyled","key":"8mku"},{"data":{"image":{"id":"5fa2544cfeef0b1a811d49ef"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так выглядит наша страница","type":"atomic:image","key":"d3q22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовки бывают разных размеров от самого большого (h1), до самого маленького (h6).","type":"unstyled","key":"en3fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":131,"offset":0,"style":"BOLD"}],"text":"ВНИМАНИЕ - заголовок h1 должен быть только один, если таких заголовков будет много, то он будет реже появляться в поисковой строке!","type":"unstyled","key":"7vclk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4q2fh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Тег <p>","type":"unstyled","key":"b55n3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег <p> или тег параграфа содержит в себе весь текст, который находится на веб-странице. Он является парным.","type":"unstyled","key":"aigaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eeulq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Тег <img>","type":"unstyled","key":"cevc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В тег <img> мы помещаем изображение, а также он является одиночным.","type":"unstyled","key":"ei2j5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы добавить картинку, мы должны переместить её в директорию вместе с нашим файлом html. Лучше создать для них отдельную папку img.","type":"unstyled","key":"egrg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее мы обращаемся к нашей директории внутри тега img, указывая расширение картинки.","type":"unstyled","key":"ojjk"},{"data":{"image":{"id":"5fa2566bfeef0b1a81204586"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис тега <p> и <img>","type":"atomic:image","key":"adl59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Комментарии","type":"unstyled","key":"8opb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии нужны для того чтобы не запутаться в своём коде через время или для других людей.","type":"unstyled","key":"fujaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делаются они вот так - , обратите внимание, что sublime text не подсвечивает наш комментарий, потому что он не влияет на саму страницу.","type":"unstyled","key":"4619g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ДЗ","type":"header-two","key":"4d4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо, что прочитали мою статью, ваша домашняя работа: сверстать вот такую простую страницу:","type":"unstyled","key":"dso1e"},{"data":{"image":{"id":"5fa257f85dc59845dd26e7fe"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3qe71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве изображения выбирайте своё, в странице используются теги","type":"unstyled","key":"ftsrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h1>, <h2>, <p> и <img>","type":"unstyled","key":"48m9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"БОНУС","type":"header-two","key":"12u96"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":40,"offset":0}],"inlineStyleRanges":[],"text":"Установка плагинов для ускорения работы.","type":"unstyled","key":"fro8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Особое внимание уделите плагину Emmet, который ускоряет вашу разработку в несколько раз.","type":"unstyled","key":"8fq70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7jmir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bg020"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6jnjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8nj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3neu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2o8bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ce141"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"86dph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5vsvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f21ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"MDsp9J0hKlTOxIpbSzx3"}],"entityMap":{"0":{"data":{"url":"https://www.sublimetext.com/3"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://code.visualstudio.com/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"http://brackets.io/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://habr.com/ru/post/138173/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"http://htmlbook.ru/samhtml/tegi"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"http://htmlbook.ru/samhtml/tegi/parnye-tegi"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://webdesign-master.ru/blog/tools/2017-03-13-sublime-text-3-setup.html"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>