{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"f43s5"},{"data":{"image":{"id":"6728a321881e6e12e550aa4d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"29r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5rnd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Введение","type":"header-three","key":"f6rce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня создать сайт проще, чем когда-либо. Не нужно быть экспертом, чтобы создать свой первый сайт. В этой статье мы рассмотрим основы: от структуры HTML до базового дизайна с CSS. К концу вы сможете создать простой, но функциональный сайт и опубликовать его в интернете.","type":"unstyled","key":"ds0ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1: Подготовка Рабочей Среды","type":"header-three","key":"123hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для создания сайта вам понадобится текстовый редактор и браузер для просмотра изменений. Можно использовать:","type":"unstyled","key":"7ufpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Текстовый редактор: VS Code, Atom, Sublime Text.","type":"unordered-list-item","key":"9ii41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Браузер: Google Chrome, Firefox, Edge.","type":"unordered-list-item","key":"e69je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2: Основы HTML","type":"header-three","key":"f6ijp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"HTML (HyperText Markup Language) — это язык разметки, который создает структуру веб-страницы. Давайте создадим базовый HTML-файл.","type":"unstyled","key":"7tbik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте новую папку для проекта и в ней новый файл, назовите его index.html.","type":"ordered-list-item","key":"q29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте index.html в текстовом редакторе и добавьте базовую структуру HTML:","type":"ordered-list-item","key":"f8chb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"ordered-list-item","key":"5mqgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fhf3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b54e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2sd9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c3ena"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мой Первый Сайт","type":"unstyled","key":"6ii13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ae8ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9dnsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Добро пожаловать на мой сайт!

","type":"unstyled","key":"6k3ks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это мой первый сайт, и он пока простой, но я учусь!

","type":"unstyled","key":"ab3rq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"vnnr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6g6bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" — главный тег, который обозначает начало HTML-документа.","type":"unordered-list-item","key":"4fcrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" — содержит метаданные, такие как заголовок страницы и кодировку.","type":"unordered-list-item","key":"ddcod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" — основная часть страницы, где мы размещаем видимый текст и элементы.","type":"unordered-list-item","key":"916rr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3: Добавление Стилей с CSS","type":"header-three","key":"3m5fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"CSS (Cascading Style Sheets) отвечает за оформление сайта: цвета, шрифты, размеры и расположение элементов.","type":"unstyled","key":"4opr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте файл style.css в той же папке, что и index.html.","type":"ordered-list-item","key":"audjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свяжите файл стилей с HTML, добавив ссылку на CSS в :","type":"ordered-list-item","key":"eau3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"ordered-list-item","key":"4dls2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь добавим стиль в style.css:","type":"unstyled","key":"18enf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {","type":"unstyled","key":"tu54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-family: Arial, sans-serif;","type":"unstyled","key":"6ciro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: #f0f0f0;","type":"unstyled","key":"9ihfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: #333;","type":"unstyled","key":"61glt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 0;","type":"unstyled","key":"acemi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0;","type":"unstyled","key":"8jpia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"ehoan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 {","type":"unstyled","key":"e829j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: #2c3e50;","type":"unstyled","key":"1437g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text-align: center;","type":"unstyled","key":"ffrt6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-top: 50px;","type":"unstyled","key":"d2570"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"9vrkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p {","type":"unstyled","key":"9sk0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text-align: center;","type":"unstyled","key":"e68q1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 18px;","type":"unstyled","key":"bd59t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"1vtq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"body — стиль для всей страницы, задающий фон и цвет текста.","type":"unordered-list-item","key":"6u6jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"h1 и p — стиль для заголовка и абзаца, выравнивающий текст по центру и задающий цвет.","type":"unordered-list-item","key":"39ckv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4: Добавление Изображений и Ссылок","type":"header-three","key":"fmm2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим изображение и ссылку, чтобы сайт выглядел интереснее.","type":"unstyled","key":"6a2qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставьте изображение в HTML:","type":"ordered-list-item","key":"fokfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Фото\"$ ","type":"ordered-list-item","key":"2k4qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"src указывает путь к изображению (можно использовать локальный файл или URL).","type":"unordered-list-item","key":"6lvi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте ссылку на другой сайт:","type":"unordered-list-item","key":"2kjtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Посетите мой блог для большего контента!

","type":"unordered-list-item","key":"6luqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":15,"offset":23,"style":"BOLD"}],"text":"href — адрес ссылки, а target=\"_blank\" открывает её в новой вкладке.","type":"ordered-list-item","key":"vblj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 5: Опубликуйте Сайт на GitHub Pages","type":"header-three","key":"f1l25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"GitHub Pages — это простой способ опубликовать статический сайт.","type":"unstyled","key":"72dij"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":21}],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Зарегистрируйтесь на GitHub и создайте новый репозиторий.","type":"ordered-list-item","key":"m7jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Загрузите свои файлы (index.html и style.css) в этот репозиторий.","type":"ordered-list-item","key":"au8lp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":12,"style":"BOLD"},{"length":12,"offset":48,"style":"BOLD"}],"text":"Перейдите в Settings репозитория, прокрутите до GitHub Pages и выберите ветку для публикации (main или master).","type":"ordered-list-item","key":"9bj78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"GitHub предоставит ссылку на ваш сайт. Теперь он доступен онлайн!","type":"ordered-list-item","key":"eflh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"aoa98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляем, вы создали и опубликовали свой первый сайт! Этот простой сайт можно улучшить, добавив больше стилей, секций и интерактивности с помощью JavaScript. Сайт на GitHub Pages — это отличный способ продемонстрировать свои навыки и делиться контентом.","type":"unstyled","key":"5n6dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь у вас есть все инструменты, чтобы экспериментировать с дизайном, добавлять новые страницы и делать ваш сайт ещё лучше!","type":"unstyled","key":"5mbed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"2yHMDafH3qisD18VYmiO"}],"entityMap":{"0":{"data":{"href":"https://github.com","url":"https://github.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}