{"draftJsState":{"blocks":[{"data":{"image":{"id":"6ad227b2bb6d5f5601bc3565"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dbisd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждая страница в интернете — от блогов до маркетплейсов — это просто текстовые файлы с кодом. Никакой магии: браузер читает эти файлы и рисует то, что мы видим на экране. В этой статье разберём два языка, из которых складывается любая веб-страница, и соберём свою простую страницу целиком — даже если вы никогда не писали код.","type":"unstyled","key":"b59jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Что такое HTML: скелет страницы","type":"header-two","key":"filk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — язык разметки, который описывает структуру страницы: где заголовок, где абзац, где картинка. И сразу важная оговорка: HTML — это не программирование. Здесь нет условий, вычислений и логики. Это способ расставить «метки»: вот заголовок, вот текст, вот кнопка.","type":"unstyled","key":"fcdeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошая аналогия — каркас дома. Пока стены голые, дом уже стоит: понятно, где вход, где комнаты. HTML делает то же самое с текстом.","type":"unstyled","key":"aftt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выглядело это так: любой текст обёрнут в теги — специальные пометки в угловых скобках. Тег

означает «здесь начинается абзац», закрывающий тег

— «здесь заканчивается». Так браузер понимает, что чем является.","type":"unstyled","key":"hb52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Что такое CSS: одежда страницы","type":"header-two","key":"95uii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS — язык оформления. Он отвечает, какого цвета заголовок, какой шрифт у текста, какие отступы между блоками. Если HTML — скелет, то CSS — ремонт и обстановка: обои, цвет стен, мебель.","type":"unstyled","key":"39pr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило CSS читается почти как английское предложение. Запись p { color: red; } означает: «для всех абзацев (p) сделать цвет (color) красным (red)». Слева — что оформляем, в фигурных скобках — как именно.","type":"unstyled","key":"4j956"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Структура и оформление — это разные вещи","type":"header-two","key":"ffo8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно привыкнуть разделять эти две вещи, потому что на этом строится вся вёрстка. Структура — это «что на странице»: заголовок, три абзаца, кнопка. Оформление — «как это выглядит»: синий, крупный, по центру.","type":"unstyled","key":"eo3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практическая польза огромная: поменяв один файл CSS, можно полностью сменить дизайн сайта, не трогая ни строчки HTML. Именно так работают готовые темы для сайтов — код тот же, одежда другая.","type":"unstyled","key":"4o17f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Четыре слова, которые нужно понять сразу","type":"header-two","key":"ek22v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"Тег — метка внутри угловых скобок:

, . Открывающий тег начинает элемент, закрывающий (со слешем) заканчивает.","type":"unstyled","key":"csf56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Атрибут — дополнительная информация внутри открывающего тега. Например, у картинки атрибут src говорит, откуда брать файл.","type":"unstyled","key":"ad6r3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Класс — это «имя-метка», которое мы придумываем элементу сами:
. По классам CSS находит нужные элементы.","type":"unstyled","key":"ls2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Селектор — «адрес», по которому CSS ищет элементы. Селектор p — все абзацы, селектор .intro — все элементы с классом intro. Точка перед словом означает именно класс.","type":"unstyled","key":"3so1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Как браузер превращает код в страницу","type":"header-two","key":"9mbu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер скачивает HTML-файл, читает его сверху вниз и строит страницу: встретил заголовок — нарисовал заголовок, встретил картинку — загрузил и вставил её. Параллельно он находит правила CSS и красит получившиеся элементы. Если в коде ошибка, страница не «ломается» с аварийным окном — браузер просто догадывается, что имелось в виду, и рисует дальше. Поэтому новичок не может «сломать интернет»: худшее, что случится, — страница отобразится кривовато.","type":"unstyled","key":"v459"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Собираем первую страницу целиком","type":"unstyled","key":"7eo66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот полная, рабочая страница: заголовок, абзац текста, картинка и кнопка. Скопируйте её как есть — она откроется в любом браузере:","type":"unstyled","key":"82suq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b4h7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f2nur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1ut6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"99hu7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"e5rnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Моя первая страница","type":"blockquote","key":"553ck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1mqku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"acv71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dkomt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"6r81a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Привет, мир!
","type":"blockquote","key":"2dof0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Это моя первая веб-страница. Она сделана руками, без конструкторов.
","type":"blockquote","key":"2k4df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Пример$ ","type":"blockquote","key":"1n10s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fp5l4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"assk7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dagse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ffl3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Единственное, что нужно для картинки: положите рядом с файлом страницы фотографию и назовите её photo.jpg. Остальное заработает сразу.","type":"unstyled","key":"c27jg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь объяснение по частям. Первая строка сообщает браузеру: это современная страница, не надо включать режим совместимости со стариной. Дальше тег обнимает весь документ.","type":"unstyled","key":"8509d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блок — «служебная комната», её содержимое на странице не видно. разрешает русские буквы — без неё вместо текста будут кракозябры. говорит телефону: показывай страницу в реальном размере, а не как уменьшенный компьютерный сайт. — это название на вкладке браузера.","type":"unstyled","key":"6qe9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутрь <style> мы вложили CSS-правила. Селектор body оформляет всю страницу: шрифт и светло-серый фон. Класс .card делает белую карточку по центру: max-width ограничивает ширину, margin: 40px auto — отступ сверху и центрирование, border-radius — скруглённые углы. Селектор h1 красит заголовок, .intro — абзац, .btn — кнопку, а img — все картинки: правило max-width: 100% не даёт фотографии вылезти за пределы карточки.","type":"unstyled","key":"b0h4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, <body> — то, что реально видно. <div class=\"card\"> — это контейнер, коробка, в которую сложено всё содержимое. <h1> — главный заголовок, <p class=\"intro\"> — абзац с классом, который мы оформили выше. У картинки два атрибута: src — путь к файлу, alt — текст вместо картинки, если она не загрузится (его читают и поисковики, и специальные программы для незрячих). У кнопки атрибут onclick — маленькая проверка жизни: при нажатии выскочит окно «Работает!».","type":"unstyled","key":"1nldp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Где писать HTML и CSS новичку","type":"header-two","key":"ek1ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ — обычный Блокнот Windows: создайте файл index.html, вставьте код выше, сохраните и откройте файл двойным щелчком — он откроется в браузере. Второй способ — онлайн-редактор CodePen (codepen.io): слева пишете код, справа сразу видите результат, ничего скачивать не нужно. Третий — бесплатная программа Visual Studio Code: она подсвечивает код, подсказывает теги и сама показывает ошибки. Начните с Блокнота или CodePen, а VS Code установите, когда затянет.","type":"unstyled","key":"4e5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Ошибки, которые встречаются чаще всего","type":"header-two","key":"bsjq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Забытый закрывающий тег. Написали <p> и забыли </p> — браузер додумает сам, но иногда не так, как хотелось.","type":"unordered-list-item","key":"dkmp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кавычки вокруг атрибутов. src=photo.jpg без кавычек иногда работает, но это лотерея — ставьте кавычки всегда.","type":"unordered-list-item","key":"7dths"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS не применяется. Чаще всего забыли точку перед классом: intro — это тег, а .intro — класс.","type":"unordered-list-item","key":"73nq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Русские буквы превратились в кракозябры. Значит, нет строки <meta charset=\"utf-8\"> или файл сохранён не в UTF-8.","type":"unordered-list-item","key":"2jm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Картинка не показывается. Проверьте имя файла: photo.jpg и Photo.jpg для компьютера — разные файлы.","type":"unordered-list-item","key":"7ct9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"Почему сайт должен хорошо выглядеть на телефоне","type":"header-two","key":"d8gln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Больше половины визитов в интернете происходит со смартфонов. Если страница на телефоне выглядит как уменьшенная копия компьютерной — с микроскопическим текстом и горизонтальной прокруткой, — читатель просто уходит. Отсюда три вещи из нашего примера: строка viewport в <head>, правило max-width: 100% для картинок и ограничение ширины контента через max-width вместо фиксированной. Продвинутая версия адаптивности — медиазапросы: правила вида «на экранах уже 600 пикселей делай шрифт крупнее». Но и базовых трёх вещей уже достаточно, чтобы страница не выглядела чужой на телефоне.","type":"unstyled","key":"4jhq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Что изучать после первых шагов","type":"header-two","key":"1rl72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Порядок такой: сначала укрепить HTML — формы, таблицы, списки. Затем CSS глубже: раскладка элементов рядом (это называется flexbox), сетки, медиазапросы. Дальше — немного JavaScript, чтобы кнопки научились реально реагировать: открывать меню, проверять формы. После этого — как выложить сайт в интернет: это дешевле, чем кажется, а видеть свою страницу по адресу в сети — лучший мотиватор.","type":"unstyled","key":"64r0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Как самостоятельно тренироваться","type":"header-two","key":"ffooe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переделайте страницу из этой статьи: смените цвета, шрифт, тексты, добавьте второй абзац и свою фотографию.","type":"unordered-list-item","key":"91fll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выберите простой кусок любого сайта — карточку товара или форму подписки — и повторите его по памяти в CodePen.","type":"unordered-list-item","key":"8sja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раз в день делайте мини-задачу: одна страница — одна фишка, например кнопка или список.","type":"unordered-list-item","key":"c4r6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пройдите бесплатный курс freeCodeCamp по адаптивной вёрстке: упражнения интерактивные, прямо в браузере.","type":"unordered-list-item","key":"cajb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сломайте страницу нарочно: удалите закрывающий тег, уберите точку у класса — и посмотрите, что изменится. Так ошибки перестают пугать.","type":"unordered-list-item","key":"f4k41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Вместо вывода","type":"header-two","key":"a6cq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML и CSS — самые дружелюбные языки для входа в программирование: результат виден сразу, а «сломать» что-то по-настоящему невозможно. Одна вечерняя практика со страницей из этой статьи даст больше, чем месяц чтения. Скопируйте код, измените его под себя — и первая страница в интернете уже ваша.","type":"unstyled","key":"735mh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"nvjjOTVpzy5tcSV8J0oQ"}],"entityMap":{}},"mentions":[]}</article></body></html>