{"draftJsState":{"blocks":[{"data":{"image":{"id":"682dac0f7299977a8bd29e0b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как создать HTML с нуля","type":"atomic:image","key":"450jv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":34,"style":"BOLD"},{"length":13,"offset":91,"style":"BOLD"},{"length":17,"offset":214,"style":"BOLD"},{"length":8,"offset":248,"style":"BOLD"},{"length":12,"offset":330,"style":"BOLD"}],"text":"Многие новички задаются вопросом, как создать HTML и с чего начать разработку своей первой HTML-страницы. На самом деле всё гораздо проще, чем кажется. Даже если у вас нет опыта в программировании, вы можете легко создать HTML-файл прямо в обычном блокноте, сохранить его с нужным расширением и открыть в браузере как полноценную веб-страницу.","type":"unstyled","key":"8fjhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье вы узнаете:","type":"unstyled","key":"24dg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":4,"style":"BOLD"}],"text":"как создать HTML-документ с нуля;","type":"unordered-list-item","key":"d4fsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":14,"style":"BOLD"}],"text":"как правильно оформить структуру HTML-страницы;","type":"unordered-list-item","key":"553sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":4,"style":"BOLD"}],"text":"как создать HTML-файл в блокноте и сохранить его;","type":"unordered-list-item","key":"347dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"как добавить текст и заголовки на свою первую веб-страницу.","type":"unordered-list-item","key":"4l9md"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":73,"style":"BOLD"}],"text":"Статья подойдёт всем, кто хочет быстро и просто научиться основам HTML — без лишних сложностей и специального ПО.","type":"unstyled","key":"9db56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое HTML и зачем он нужен","type":"header-three","key":"c2msp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":24,"style":"BOLD"},{"length":32,"offset":71,"style":"BOLD"}],"text":"Прежде чем разбираться, как создать HTML, важно понять, что это такое.\nHTML (HyperText Markup Language)\n — это язык разметки, который используется для создания и отображения \nвеб-страниц в браузере. Благодаря HTML мы видим тексты, изображения, \nссылки и таблицы на сайтах.","type":"unstyled","key":"3ggn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":51,"style":"BOLD"}],"text":"Можно сказать, что HTML — это основа любого сайта. Разработчики создают HTML-документы с помощью\n специальных редакторов или даже обычного блокнота. С помощью HTML можно\n задать структуру страницы: где будет заголовок, где текст, где \nизображение и так далее.","type":"unstyled","key":"clfkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кстати, подписи в электронных письмах тоже делаются через HTML, \nпоэтому иногда очень полезно знать как быстро вручную поправить код, \nесли нет возможности сделать это в почтовом клиенте напрямую.","type":"unstyled","key":"4qumc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":46,"style":"BOLD"},{"length":22,"offset":183,"style":"BOLD"}],"text":"Важное замечание: некоторые новички ищут, как создать HTML-программу, но надо понимать, что HTML — это не программа, а именно разметка. Она не «запускается», как обычные программы, а открывается в браузере, который “читает” HTML и отображает результат.","type":"unstyled","key":"anurh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как создать HTML-файл с нуля","type":"header-three","key":"4953s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":42,"style":"BOLD"}],"text":"Чтобы начать работу с HTML, нужно понять, как создать HTML-файл правильно. HTML-файлы — это обычные текстовые файлы, но с расширением .html, которое говорит браузеру, что перед ним веб-страница.","type":"unstyled","key":"q48n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если например изменить расширение файла с кодом HTML на .txt, то он \nоткроется уже не в браузере, а в обычном блокноте, потому что компьютер \nбудет считать что перед нами простой текстовый файл. Более того, вы \nлегко увидите всё, что есть в этом файле, ведь это просто текст. Но всё \nменяется, когда у файла расширение html. Вот тогда уже браузер знает, \nчто пришло его время!","type":"unstyled","key":"ecn6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как создать файл с расширением .html","type":"header-three","key":"8cvns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"},{"length":7,"offset":63,"style":"BOLD"},{"length":7,"offset":135,"style":"BOLD"},{"length":9,"offset":144,"style":"BOLD"},{"length":12,"offset":158,"style":"BOLD"}],"text":"Откройте текстовый редактор.\nДля новичков подойдёт стандартный Блокнот в Windows. Более продвинутым пользователям удобнее использовать VS Code, Notepad++ или Sublime Text.","type":"unordered-list-item","key":"br9ta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Напишите или вставьте код HTML.\nНапример:","type":"unordered-list-item","key":"f1acq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n Моя первая страница\n \n \n

Привет, HTML!

\n \n","type":"unstyled","key":"ac3c4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Сохраните файл.\nВ Блокноте выберите «Файл» → «Сохранить как…». Введите имя файла, например: index.html.\n Важно: в поле «Тип файла» выберите «Все файлы», а кодировку — UTF-8.","type":"unordered-list-item","key":"2gh16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":21,"style":"BOLD"}],"text":"Вот так и происходит создание простейшего HTML-файла, который можно открыть в любом браузере — просто дважды кликните по нему, и он отобразится как полноценная веб-страница.","type":"unstyled","key":"cfpqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем первую HTML-страницу: пошаговая инструкция","type":"header-three","key":"4rk6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":68,"style":"BOLD"},{"length":25,"offset":118,"style":"BOLD"}],"text":"Теперь, когда вы знаете, как создать HTML-файл, давайте разберёмся, как создать HTML-страницу с нуля. Мы покажем, как создать HTML-код страницы, прописать её структуру и добавить простой текст, чтобы вы могли увидеть результат в браузере.","type":"unstyled","key":"e3k8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1: Задаём структуру HTML-документа","type":"header-three","key":"bspqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":317,"style":"BOLD"}],"text":"Любая HTML-страница начинается с базового шаблона. Обратите внимание \nна то что у нас появились дополнительные теги. Если HTML файл может иметь вообще только текст внутри, главное, чтобы у него было расширение html, то страницей может называться только документ, созданный по четким правилам. Здесь мы видим основную структуру HTML-документа:","type":"unstyled","key":"2nbul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n \n Моя первая HTML-страница\n \n \n

Привет, мир!

Это моя первая веб-страница.

\n \n","type":"unstyled","key":"n840"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробнее об этих важных тегах:","type":"unstyled","key":"3otr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — сообщает браузеру, что используется HTML5;","type":"unordered-list-item","key":"btrtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — корневой тег HTML-документа;","type":"unordered-list-item","key":"3jcou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — раздел для метаинформации (название, кодировка);","type":"unordered-list-item","key":"52riq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — заголовок страницы во вкладке браузера;","type":"unordered-list-item","key":"81mp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<body> — основное содержимое страницы (то, что видит пользователь).","type":"unordered-list-item","key":"1teqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2: Добавляем текст на страницу","type":"header-three","key":"8lt9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":6,"style":"BOLD"}],"text":"Чтобы создать HTML-страницу с текстом, используйте теги формата <h1> для заголовков и <p> для абзацев (на будущее – заголовки имеют разный уровень, как в любом тексте. h1, h2, h3 и т.д.). Например:","type":"unstyled","key":"72kse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h1>Добро пожаловать!</h1>\n<p>Эта страница создана вручную в HTML.</p>","type":"unstyled","key":"37k4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Найдите этот фрагмент в коде выше. Замените текст на любой, который вам хочется.","type":"unstyled","key":"9rgp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":14,"style":"BOLD"}],"text":"Вы только что создали первую HTML-страницу — простую, понятную и полностью рабочую. Сохраните её с расширением .html, откройте в браузере и наслаждайтесь результатом!","type":"unstyled","key":"ershf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Некоторые выводы","type":"header-two","key":"7ot1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вообще, большой разницы между понятием файл и страница, если речь \nпро документы HTML, нет. Просто когда мы создаем отдельный файл, \nнапример который для каких-то целей нужен нам для открытия в браузере, \nмы говорим “файл”. Например часто отдельным файлом идет бланк заказа из \nинтернет-магазина. Если же мы говорим “страница”, скорее всего мы \nобсуждаем многостраничный сайт, на котором уже есть множество файлов, \nкаждый из которых как раз и является – страницей.","type":"ordered-list-item","key":"bg3e9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создавать HTML файлы в Блокноте не очень удобно. Именно поэтому \nпридумали специальные программы, который мы упоминали выше. В таких \nпрограммах цветом выделяются теги, добавлены разные удобные инструменты,\n которые делают создание и чтение кода удобным и быстрым.","type":"ordered-list-item","key":"dn4us"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"5tkrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":18,"style":"BOLD"},{"length":20,"offset":50,"style":"BOLD"},{"length":8,"offset":101,"style":"BOLD"},{"length":27,"offset":157,"style":"BOLD"}],"text":"Теперь вы знаете, как создать HTML-файл, оформить первую HTML-страницу, и даже сделать это в обычном Блокноте. Вы прошли путь от пустого окна до полноценной веб-страницы на HTML с нуля, которая открывается в браузере.","type":"unstyled","key":"251ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это отличное начало, но на этом развитие не заканчивается. Чтобы двигаться дальше, рекомендуем:","type":"unstyled","key":"3vl9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":15,"style":"BOLD"}],"text":"Изучить основы CSS — он отвечает за внешний вид страницы: цвета, шрифты, расположение блоков.","type":"unordered-list-item","key":"ed2lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":16,"style":"BOLD"}],"text":"Познакомиться с JavaScript — язык, который добавляет интерактивность: кнопки, формы, анимации.","type":"unordered-list-item","key":"3miuk"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":18,"offset":51}],"inlineStyleRanges":[{"length":14,"offset":25,"style":"BOLD"}],"text":"Освоить профессиональные редакторы кода, такие как Visual Studio Code — они облегчают написание и отладку HTML, CSS и JS.","type":"unordered-list-item","key":"do3kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":38,"style":"BOLD"}],"text":"С этими знаниями вы сможете не только создавать сайты, но и развиваться как веб-разработчик.","type":"unstyled","key":"5a0rc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удачи в кодинге!","type":"unstyled","key":"8qfiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":27,"style":"BOLD"}],"text":"Если статья была полезна — поставьте пожалуйста ей лайк!\nТогда статью увидит больше читателей, а мне будет приятнее готовить для вас ещё больше полезных материалов.","type":"blockquote","key":"76psl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"8oJZ2hL1mKHKX9k9LDY1"}],"entityMap":{"0":{"data":{"url":"https://code.visualstudio.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>