{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем привет, на связи с вами канал WEB MANIA,","type":"unstyled","key":"9m7de"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Любое создание веб-приложения или веб-сайта начинается с интерфейса, сначала рисуется макет, по макету создается тоже самое, но на веб-странице с помощью HTML и CSS поэтому всегда считается это за один навык HTML/CSS нельзя знать одно и не знать другое","type":"unstyled","key":"alpmf"},{"data":{"image":{"id":"6085943ed77cf03803168856"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"n2o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML","type":"unstyled","key":"c8dr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML это язык гипертекстовой разметки, основа языка теги","type":"unstyled","key":"10e6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dl613"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"можно сказать что каждый элемент, блок, кнопка,заголовок, изображение,видео, параграф соответствует свой тег поэтому их много и запоминать нет смысла","type":"unstyled","key":"2f6fa"},{"data":{"image":{"id":"6084bd7dc17d7f239e55648d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1f308"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых как вы видите есть парные теги ","type":"unstyled","key":"395bq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"есть одиночные теги ","type":"unstyled","key":"8ga4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Парные теги это теги внутри которых можно вставлять другие теги, а одиночные это теги которые выполняют какую-то функцию, например тег указывает браузеру на то, как нужно отображать контент.","type":"unstyled","key":"dijma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите документ состоит из двух частей, тег (голова) и (тело), в голове пишутся теги для браузера, как отображать контент, подключаются дополнительные файлы. В теле пишется сама разметка. Давайте напишем небольшой контент","type":"unstyled","key":"1k6go"},{"data":{"image":{"id":"608588ec09024b3e2c9ea208"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ec9fh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и результат","type":"unstyled","key":"ed2vf"},{"data":{"image":{"id":"60858921d77cf03803f164af"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"285ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"как видите результат не очень красивый и не видно блока

в котором есть текст. Теги одиночные теги потому что они только выводят изображение по ссылке. Но помимо у каждого тега есть атрибуты это слова которые указываются после название тега и отвечают за определённое свойство и их много, есть универсальные для всех тегов, а есть уникальные у каждого тега, например у тега есть атрибут src это путь к изображению, атрибут class присваивается класс и так далее.","type":"unstyled","key":"2l0tt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS","type":"header-two","key":"8mo1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS- язык стилей, служит что бы при придать красивый вид элементам, у них есть собственные синтаксис","type":"unstyled","key":"e5geo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селектор {","type":"unstyled","key":"b9dp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" свойство: значение; ","type":"unstyled","key":"4ml54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" свойство: значение;","type":"unstyled","key":"dn9dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" свойство: значение;","type":"unstyled","key":"4k6nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" свойство: значение;","type":"unstyled","key":"3ifcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4vj21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чаще всего это отдельный файл с расширением .css, перед фигурными скобками пишется имя тега или класса или id то к чему применяются стили, дальше в фигурных скобках пишутся сами стили например","type":"unstyled","key":"1tk8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: red","type":"unstyled","key":"2ocg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 20px","type":"unstyled","key":"43ti7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"как догадались свойств много, ","type":"unstyled","key":"fji48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте к нашему контенту применим стили , присвоим к некоторым элементам класс и надо подключить наш файл со стилями","type":"unstyled","key":"e3192"},{"data":{"image":{"id":"6085916809024b3e2cbccc5f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bop4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"через тег ","type":"unstyled","key":"amtf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"и прописываем стили в файле style.css","type":"unstyled","key":"cr84r"},{"data":{"image":{"id":"608591923b735b52f866209a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cmvam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"результат","type":"unstyled","key":"c2agr"},{"data":{"image":{"id":"608591bed77cf038030e4c28"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bn50e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь стало покрасивее. В CSS найдётся свойство на любой стиль, тени, расположение, градиент и так далее.","type":"unstyled","key":"e09hg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом всё вот так собственно и пишется интерфейс","type":"unstyled","key":"df8la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Подписывайтесь если статья была полезно и интересной\uD83D\uDE09","type":"unstyled","key":"bhjbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Всем пока\uD83D\uDE03","type":"unstyled","key":"cgs11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4up6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9qg4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2p17u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2c742"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2vrfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eqj1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4enq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Emr2EsDvqYKlLdSDywF8"}],"entityMap":{}},"mentions":[]}