{"draftJsState":{"blocks":[{"data":{"image":{"id":"5ea00ce456d6260bcedae21e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"4duvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":87,"style":"ITALIC"}],"text":"Как вы заметили из названия, HTML не является языком программирования как таковым, это язык разметки. В этой статье я постараюсь максимально понятно и доступно ознакомить вас с азами синтаксиса HTML. Я не буду расписывать здесь долгую и нудную теорию, поэтому давайте перейдем к практике. ","type":"unstyled","key":"74j0c"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":12,"offset":88}],"inlineStyleRanges":[],"text":"Для начала подготовим среду для написания кода. Лично мне удобно использовать программу Sublime Text. Но вы можете просто использовать блокнот. Сейчас я покажу последовательность действий.","type":"unstyled","key":"bfgvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"1.Создайте текстовый документ","type":"unstyled","key":"bg96i"},{"data":{"image":{"id":"5ea00ad82517bd2ed0b42d83"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e6o2h"},{"data":{"error":"ru.yandex.zen.common.noMoreNode.error.exceptions.InputValidationException"},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ПКМ на рабочий стол – создать – Текстовый документ","type":"unstyled","key":"elbbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"BOLD"}],"text":"2.Сохраните файл в нужном расширении (ваш_файл.html)","type":"unstyled","key":"e56ll"},{"data":{"image":{"id":"5ea00afb603e850f1fe85155"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8itee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываете текстовый документ-файл-сохранить как.","type":"unstyled","key":"ejc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"3.Приступаете к написанию кода.","type":"unstyled","key":"e58p3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура кода.","type":"unstyled","key":"7q7d3"},{"data":{"image":{"id":"5ea00b112bf35767fbb200ee"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f5t71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":5,"offset":11,"style":"BOLD"}],"text":" - это так сказать пережитки прошлого. Этот элемент предназначен для указания типа текущего документа. Чтобы браузер понимал, согласно какому стандарту отображать веб-страницу (современный HTML5 или устаревшие HTML4 и XHTML. Это пока все что на первом этапе необходимо знать об этом элементе.","type":"unstyled","key":"a3qnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как возможно вы знаете, HTML состоит преимущественно из тегов (открывающих и закрывающих. Давайте пройдемся по основным.","type":"unstyled","key":"6go63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":8,"offset":95,"style":"BOLD"},{"length":6,"offset":113,"style":"BOLD"}],"text":" - открывающий тег определяет начало HTML документа. Внутри него находится “голова” и “тело” .","type":"unstyled","key":"7brdt"},{"data":{"image":{"id":"5ea00b432bf35767fbb200f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"37a81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":7,"offset":6,"style":"BOLD"},{"length":10,"offset":14,"style":"BOLD"},{"length":7,"offset":35,"style":"BOLD"}],"text":" - элемент добавляет целый класс возможностей. В данном случае мы определяем кодировку страницы, иначе браузер может отображать русские слова непонятными символами: ","type":"unstyled","key":"2qjrd"},{"data":{"image":{"id":"5ea00b2b175b6f71c45af650"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"drikm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":81,"style":"BOLD"}],"text":"Как вы, наверное, уже поняли, теги как открываются, так и закрываются. Например, обозначает то, что мы закончили оформление “головы” документа.","type":"unstyled","key":"34rlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к самому интересному.","type":"unstyled","key":"c3bcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":4,"style":"BOLD"}],"text":"Тег - тело документа. Предназначено для размещения элементов, контента, содержимого страницы.","type":"unstyled","key":"bchkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Заголовки HTML. Для создания заголовках в HTML используются теги

…

","type":"unstyled","key":"3mc04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":29,"style":"BOLD"}],"text":"

Заголовок первого уровня

","type":"unstyled","key":"8l3k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":29,"style":"BOLD"}],"text":"

Заголовок второго уровня

","type":"unstyled","key":"7tpft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":30,"style":"BOLD"}],"text":"

Заголовок третьего уровня

","type":"unstyled","key":"32f35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":32,"style":"BOLD"}],"text":"

Заголовок четвертого уровня

","type":"unstyled","key":"9sj0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":28,"style":"BOLD"}],"text":"

Заголовок пятого уровня

","type":"unstyled","key":"5oke5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":29,"style":"BOLD"}],"text":"

Заголовок шестого уровня

","type":"unstyled","key":"a9k4e"},{"data":{"image":{"id":"5ea00b6e947b27102f9ef5e4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6vljm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Параграфы HTML. Для обозначения параграфов в HTML используется тег

. Если вы хотите отделить одну часть текста от другой, тег

поможет в этом.","type":"unstyled","key":"85j83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":4,"offset":18,"style":"BOLD"}],"text":"

Абзац номер 1

","type":"unstyled","key":"7rug5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В конце страницы всегда идут закрывающие теги и .","type":"unstyled","key":"a0b12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"Как же посмотреть созданную мной веб-страницу? Очень просто.","type":"unstyled","key":"dth8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажмите 2 раза на созданный вами файл (обязательно .html) и откройте с помощью любого браузера.","type":"unstyled","key":"c0vej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Готовый код:","type":"unstyled","key":"1b1hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"","type":"unstyled","key":"419g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"dir45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"9aulu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"e2qnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":" Моя первая страница","type":"unstyled","key":"4r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"3unj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"eo19v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"

Заголовок страницы

","type":"unstyled","key":"97io4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"

Параграф

","type":"unstyled","key":"ed749"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"28u6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":" ","type":"unstyled","key":"6gblj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":143,"offset":0,"style":"BOLD"},{"length":41,"offset":144,"style":"BOLD"}],"text":"P.S: отступы делать необязательно, но когда код будет длиннее и будет больше тегов, с отступами будет намного удобнее. Так же для изучения HTML и не только советую приложение SoloLearn.","type":"unstyled","key":"5gia6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"HmRZyYmSY4lbOESrBPbt"}],"entityMap":{"0":{"data":{"url":"https://www.sublimetext.com/3"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}