{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7r9tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":121,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCA1 Если ты когда-то задумывался, как создаются сайты, то сегодня разберем два главных «кирпича» веб-разработки — HTML и CSS.","type":"unstyled","key":"b41f4"},{"data":{"image":{"id":"67c09c159ca6b67da950dc70"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9kdov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"HTML — это скелет сайта","type":"header-two","key":"3tauu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":151,"style":"BOLD"}],"text":"Представь, что ты строишь дом. У него есть стены, окна, двери — это основа. Без них дом просто не существует. В мире веб-разработки эту роль выполняет HTML (HyperText Markup Language) — язык разметки гипертекста.","type":"unstyled","key":"1gl9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":26,"style":"BOLD"}],"text":"HTML не программирует, он описывает структуру страницы. Например, если ты хочешь сделать заголовок, абзац текста или вставить картинку, ты используешь специальные теги.","type":"unstyled","key":"8edm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDD39 Пример HTML-кода:","type":"unstyled","key":"e0o12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f70bb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f20a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"o492"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мой первый сайт","type":"blockquote","key":"8e9e0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5q1fj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6ha9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Привет, мир!

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

Я учусь делать сайты! \uD83C\uDF89

","type":"blockquote","key":"7s3cf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"c1rca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"74jij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":2,"style":"BOLD"}],"text":"\uD83E\uDDD0 Что тут происходит?","type":"unstyled","key":"7eqov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — главный тег, говорит, что это HTML-страница.","type":"unordered-list-item","key":"djn3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — содержит информацию о странице (название, стили).","type":"unordered-list-item","key":"98lfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — заголовок страницы во вкладке браузера.","type":"unordered-list-item","key":"9ijq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<body> — всё, что видит пользователь на сайте.","type":"unordered-list-item","key":"5tlmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h1> — заголовок (самый крупный).","type":"unordered-list-item","key":"8r782"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<p> — абзац текста.","type":"unordered-list-item","key":"7vqtf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":79,"style":"BOLD"},{"length":23,"offset":104,"style":"BOLD"}],"text":"Теперь, если ты откроешь этот код в браузере, ты увидишь страницу с заголовком «Привет, мир!» и текстом «Я учусь делать сайты!».","type":"unstyled","key":"1tebr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"CSS — это стиль и красота","type":"header-two","key":"4p86f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":168,"style":"BOLD"}],"text":"Теперь представь, что наш дом построен, но он пока серый и некрасивый. Чтобы сделать его красивым, мы красим стены, добавляем мебель и украшаем. В вебе за это отвечает CSS (Cascading Style Sheets) — каскадные таблицы стилей.","type":"unstyled","key":"2mpkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDD39 Пример CSS-кода:","type":"unstyled","key":"72egu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 {","type":"blockquote","key":"27seu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: blue;","type":"blockquote","key":"7vtrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 30px;","type":"blockquote","key":"5ovqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"9uim7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p {","type":"blockquote","key":"3nc5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: green;","type":"blockquote","key":"lu57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 20px;","type":"blockquote","key":"7stok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"2qo2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCCC Как это работает?","type":"unstyled","key":"bifo1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 { color: blue; } — делает заголовок синим.","type":"unordered-list-item","key":"c63a4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p { color: green; } — текст абзаца станет зеленым.","type":"unordered-list-item","key":"5dtcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Как подключить CSS к HTML?","type":"header-three","key":"638tr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем <style> в <head> или создаем отдельный CSS-файл.","type":"unstyled","key":"7rhb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDD39 Пример подключения стилей прямо в HTML:","type":"unstyled","key":"6h72o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<head>","type":"blockquote","key":"4vfus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<style>","type":"blockquote","key":"74qv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 { color: red; }","type":"blockquote","key":"7rb1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p { font-size: 18px; }","type":"blockquote","key":"7lbm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</style>","type":"blockquote","key":"79rq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</head>","type":"blockquote","key":"a5fgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь заголовок будет красным, а текст — чуть крупнее.","type":"unstyled","key":"6umpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Итог: что нужно запомнить?","type":"header-two","key":"2em6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"},{"length":3,"offset":32,"style":"BOLD"}],"text":"✅ HTML — это каркас страницы.\n✅ CSS — это её стиль и оформление.\n✅ Вместе они создают сайт, который можно увидеть в браузере.","type":"unstyled","key":"fkono"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDE4C В следующей статье мы создадим свой первый сайт с нуля! Подписывайся, чтобы не пропустить.","type":"unstyled","key":"584pp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"nyb22V7PJrJdvuLFuw2p"}],"entityMap":{}},"mentions":[]}</article></body></html>