Блог \ Как создать сайт в блокноте HTML — пример и инструкция

24.02.2025

Как создать сайт в блокноте HTML — пример и инструкция

На чтение

7 мин

Дата обновления

10.03.2025

#COURSE##INNER#

Создайте простейший HTML-файл в блокноте, используя следующий шаблон:

Мой первый сайт Привет, мир!

Сохраните этот файл с расширением .html (например, мой_сайт.html). Затем, откройте его в браузере. Вы увидите текст "Привет, мир!".

Этот простой шаблон демонстрирует структуру HTML-документа. Он включает в себя обязательные теги , и . Тег </em> задаёт заголовок страницы, который виден в закладке браузера.</p> <p><strong>Продолжая</strong>, вы можете добавлять элементы, такие как заголовки (<h1> - <h6>), абзацы (<p>), списки (<ul>, <ol>) и другие элементы, используя соответствующие теги.</p> <h2>Установка и подготовка среды</h2> <p>Для создания сайта в блокноте требуется только текстовый редактор. Откройте блокнот (или любой другой текстовый редактор). Сохраните файл с расширением <b>.html</b> (например, <code>index.html</code>).</p> <p>Это всё, что нужно для начала. Никаких дополнительных программ не требуется.</p> <p>В файле <code>index.html</code> вы будете писать код. Не забудьте стандартный тег <code><!DOCTYPE html></code> в первой строке.</p> <p>Также необходимо указать, что это HTML-документ, с помощью тега <code><html> </html></code>.</p> <h2>Написание основного кода HTML</h2> <p>Начните с базовой структуры документа. Она состоит из тегов <code><html></code>, <code><head></code> и <code><body></code>. Пример:</p> <pre><code> <html> <head> <title>Мой сайт

В теге </code> укажите название страницы. Этот текст отображается в заголовке браузера. В <code><body></code> размещайте все видимое содержимое сайта: текст, изображения, ссылки, таблицы, и т.д.</p> <p><b>Заголовки:</b> Используйте теги <code><h1></code> (самый большой), <code><h2></code>, <code><h3></code> и т. д. для выделения заголовков различного уровня.</p> <pre><code> <h1>Главная страница</h1> <h2>О нас</h2> </code></pre> <p><b>Текст:</b> Используйте тег <code><p></code> для параграфов. Для списка используйте <code><ul></code> (несвязный) или <code><ol></code> (упорядоченный).</p> <ul> <li><code><ul></code> (unordered list):</li> </ul> <pre><code> <ul> <li>Определение</li> <li>Цель</li> </ul> </code></pre> <ul> <li><code><ol></code> (ordered list):</li> </ul> <pre><code> <ol> <li>Позиция</li> <li>Шаг</li> </ol> </code></pre> <p><b>Ссылки:</b> Для создания ссылок используйте тег <code><a></code>. Атрибут <code>href</code> определяет URL целевого адреса. Пример:</p> <pre><code> <a href="https://example.com">Перейти на пример</a> </code></pre> <p><b>Изображения:</b> Для включения изображений используйте тег <code><img></code>. Не забудьте указать путь к картинке и её альтернативное описание в атрибуте <code>alt</code>.</p> <pre><code> <img src="image.jpg" alt="Описание изображения"> </code></pre> <p>Важно указывать корректные названия тегов, атрибутов и правильно закрывать теги.</p> <h2>Форматирование текста с помощью тегов</h2> <p>Для форматирования текста в HTML используйте специальные теги. Ниже таблица с основными тегами и их назначением:</p> <table> <tr> <th>Тег</th> <th>Эффект</th> </tr> <tr> <td><code><b></code></td> <td>Жирный текст</td> </tr> <tr> <td><code><i></code></td> <td>Курсивный текст</td> </tr> <tr> <td><code><u></code></td> <td>Подчеркнутый текст</td> </tr> <tr> <td><code><strong></code></td> <td>Жирный текст с смысловой важностью</td> </tr> <tr> <td><code><em></code></td> <td>Курсивный текст с смысловой важностью</td> </tr> <tr> <td><code><mark></code></td> <td>Выделенный текст цветом (обычно жёлтым)</td> </tr> <tr> <td><code><small></code></td> <td>Мелкий текст</td> </tr> <tr> <td><code><del></code></td> <td>Зачеркнутый текст</td> </tr> <tr> <td><code><ins></code></td> <td>Вставленный текст (подчеркнутый)</td> </tr> <tr> <td><code><sup></code></td> <td>Текст в верхнем индексе</td> </tr> <tr> <td><code><sub></code></td> <td>Текст в нижнем индексе</td> </tr> </table> <p>Пример использования:</p> <p><code><b>Жирный текст</b> <i>Курсивный текст</i> <u>Подчеркнутый текст</u></code></p> <p>Результат отображения: <b>Жирный текст</b> <i>Курсивный текст</i> <u>Подчеркнутый текст</u></p> <p>Важно: Закрывающий тег (</тег>) необходим для корректной работы каждого тега форматирования.</p> <h2>Добавление изображений и ссылок</h2> <p>Для добавления изображения используйте тег <code><img></code>. В атрибуте <code>src</code> укажите путь к файлу изображения. Пример:</p> <p><code><img src="путь/к/изображению.jpg" alt="Описание изображения"></code></p> <p>Атрибут <code>alt</code> необходим для описания изображения для пользователей с проблемами восприятия. Без него поисковые системы не смогут правильно его распознать.</p> <p>Для добавления ссылки используйте тег <code><a></code>. В атрибуте <code>href</code> укажите адрес ссылки. Пример:</p> <p><code><a href="адрес_страницы.html">Перейти к странице</a></code></p> <p>Для визуального оформления можно использовать атрибут <code>title</code>, который будет отображаться при наведении на ссылку. Пример:</p> <p><code><a href="адрес_страницы.html" title="Название страницы">Перейти к странице</a></code></p> <p>Пути к изображениям и ссылкам должны быть корректными.</p> <h2>Сохранение и открытие файла</h2> <p><strong>Сохраните</strong> файл с расширением <strong>.html</strong>. Например, <code>мой_сайт.html</code>.</p> <p><strong>Выберите</strong> папку для сохранения на вашем компьютере. Важно, чтобы это была папка, к которой у вас есть доступ для дальнейшей работы.</p> <p><strong>Откройте</strong> сохранённый файл в браузере. Например, в Google Chrome, Firefox или Opera. Для этого просто дважды кликните по файлу.</p> <p><strong>Адрес</strong> файла в строке браузера укажет на сохранённый вами документ. Убедитесь, что браузер отобразил содержимое HTML-файла, а не просто сам файл.</p> <h2>Проверка верстки и исправления ошибок</h2> <p>Используйте браузерные инструменты для проверки кода. Консоль браузера (обычно Ctrl+Shift+I или команда "Инструменты разработчика" в меню) покажет ошибки и предупреждения. Обращайте внимание на сообщения об ошибках синтаксиса (например, не закрытые теги) и предупреждения, связанных с атрибутами. Проверьте, правильно ли указан путь к ресурсам (изображения, стили) в ваших ссылках. Если ошибка не очевидна, осмотрите кодовые фрагменты, где она расположена, и проверяйте каждый тег, атрибут и значение. Проверьте работу всех ссылок на внешние ресурсы.</p> <p>Используйте валидатор HTML. Сервисы валидации (например, validator.w3.org) помогут выявить проблемы со структурой HTML. Они дадут точные указания относительно ошибок синтаксиса, которые затрудняют работу браузеру. Обращайте внимание на предложения валидатора по улучшению. Используйте предоставленные ссылки, чтобы исправить ошибки.</p> <p>Проверьте отображение сайта в разных браузерах. Один браузер может отображать ошибку по-другому в другом.</p> <h2>Вопрос-ответ:</h2> <h4>Можно ли создать простой сайт, используя только блокнот и HTML? Без каких-либо дополнительных программ?</h4> <p>Да, вполне возможно. HTML — это язык разметки гипертекста, который описывает структуру веб-страницы. Блокнот (или любой другой текстовый редактор) может использоваться для написания кода. После сохранения файла с расширением .html вы сможете открыть его в браузере и увидеть результат. Конечно, для сложных сайтов с множеством элементов потребуется более продвинутое ПО, но для создания базовых страниц — блокнот вполне хватает. Важно понимать структуру HTML, чтобы писать корректный код.</p> <h4></h4> <p></p> <h4>Будет ли страница отображаться корректно, если я не буду использовать строго заданный порядок тегов, описанный в статье?</h4> <p>Конечно же, структура тегов важна для правильного отображения страницы браузером. Хотя браузеры довольно толерантные к некоторым нарушениям порядка тегов, неправильная структура может привести к неожиданным результатам. Например, неверный порядок тегов может помешать корректной верстке, отображению заголовков, или вставке изображений. Необходимо учитывать структуру и порядок вложенности тегов для корректного отображения элементов.</p> <h4>Как сделать так, чтобы созданная веб-страница была видна не только мне, но и другим пользователям в интернете?</h4> <p>Страница, разработанная вами локально в блокноте, будет видима только вам, пока она находится на вашем компьютере. Для того, чтобы она была доступна и другим пользователям, её необходимо разместить на веб-сервере. Это может быть ваш личный хостинг или сервер. Существуют бесплатные хостинги, которые могут помочь с этим. Они предоставляют место для хранения файлов вашего сайта и обеспечивают доступ к нему через Интернет.</p><div class="article-footer"><div class="tags"><a href="/blog/veb-razrabotka/">Веб-разработка</a></div><div class="blog-share"><span>Поделиться:</span><a href="https://vk.com/share.php?url=https%3A%2F%2Farenaseo.ru%2Fblog%2Fveb-razrabotka%2Fkak-sozdat-sajt-v-bloknote-html-primer-i-instruktsiya%2F&title=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D1%81%D0%B0%D0%B9%D1%82%20%D0%B2%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82%D0%B5%20HTML%20%E2%80%94%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%20%D0%B8%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F&utm_source=share2" rel="nofollow noopener" target="_blank"><i class="fab fa-vk"></i></a><a href="https://t.me/share/url?url=https%3A%2F%2Farenaseo.ru%2Fblog%2Fveb-razrabotka%2Fkak-sozdat-sajt-v-bloknote-html-primer-i-instruktsiya%2F&text=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D1%81%D0%B0%D0%B9%D1%82%20%D0%B2%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82%D0%B5%20HTML%20%E2%80%94%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%20%D0%B8%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F&utm_source=share2" rel="nofollow noopener" target="_blank"><i class="fab fa-telegram"></i></a><a href="viber://forward?text=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D1%81%D0%B0%D0%B9%D1%82%20%D0%B2%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82%D0%B5%20HTML%20%E2%80%94%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%20%D0%B8%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F%20https%3A%2F%2Farenaseo.ru%2Fblog%2Fveb-razrabotka%2Fkak-sozdat-sajt-v-bloknote-html-primer-i-instruktsiya%2F&utm_source=share2" rel="nofollow" target="_blank"><i class="fab fa-viber"></i></a><a href="https://api.whatsapp.com/send?text=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C%20%D1%81%D0%B0%D0%B9%D1%82%20%D0%B2%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82%D0%B5%20HTML%20%E2%80%94%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%20%D0%B8%20%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D1%8F%20https%3A%2F%2Farenaseo.ru%2Fblog%2Fveb-razrabotka%2Fkak-sozdat-sajt-v-bloknote-html-primer-i-instruktsiya%2F&utm_source=share2" rel="nofollow noopener" target="_blank"><i class="fab fa-whatsapp"></i></a></div></div></div></div><div class="pane related-posts"><h4 class="decored-title">Похожие статьи</h4><div class="row"><div class="col-lg-4 mb-4 mb-lg-0"><div class="post-preview"><div class="post-preview-cover"><a href="/blog/veb-razrabotka/veb-razrabotchik-eto-chem-on-zanimaetsya-i-skolko-poluchaet/"><img src="/upload/iblock/07b/9h0o0ujvwhr43xm3ldnr27jtrels1rfi/veb_razrabotchik_eto_chem_on_zanimaetsya_i_skolko_poluchaet.png"></a></div><div class="post-preview-title"><a href="/blog/veb-razrabotka/veb-razrabotchik-eto-chem-on-zanimaetsya-i-skolko-poluchaet/">Как создать сайт в блокноте HTML — пример и инструкция</a></div><span>24.02.2025</span></div></div><div class="col-lg-4 mb-4 mb-lg-0"><div class="post-preview"><div class="post-preview-cover"><a href="/blog/veb-razrabotka/veb-sajt-eto-chto-takoe-veb-sajt-i-dlya-chego-on-nuzhen/"><img src="/upload/iblock/b1f/0vp1b31ll4v5hj40headzp2b4h9j6uvv/stante_vostrebovannym_internet_marketologom.png"></a></div><div class="post-preview-title"><a href="/blog/veb-razrabotka/veb-sajt-eto-chto-takoe-veb-sajt-i-dlya-chego-on-nuzhen/">Как создать сайт в блокноте HTML — пример и инструкция</a></div><span>24.02.2025</span></div></div><div class="col-lg-4 mb-4 mb-lg-0"><div class="post-preview"><div class="post-preview-cover"><a href="/blog/veb-razrabotka/dobavlenie-stilej-na-veb-stranitsu-uroki-webreference/"><img src="/upload/iblock/041/29m6pqt2uvmdmi6pbdjjwrqugv9fos9q/dobavlenie_stiley_na_veb_stranicu_uroki_webreference.png"></a></div><div class="post-preview-title"><a href="/blog/veb-razrabotka/dobavlenie-stilej-na-veb-stranitsu-uroki-webreference/">Как создать сайт в блокноте HTML — пример и инструкция</a></div><span>24.02.2025</span></div></div></div></div></div><div class="sidebar"><div class="widget"><h3>Популярные статьи</h3><div class="wiget-grp"><div class="post-tmb"><div class="post-tmb-img"><img src="/upload/iblock/817/donzdf0a33q97ubnx0hzqi6hg25q3cut/yung_ne_vret_razbiraemsya_v_arhetipah_personazhey.png"/></div><div class="post-tmb-cnt"><div class="post-tmb-title"><a href="/blog/geymdev/yung-ne-vret-razbiraemsya-v-arkhetipakh-personazhey/">Юнг не врет - разбираемся в архетипах персонажей</a></div><div class="post-tmb-title">21 июня 2025 г.</div></div></div><div class="post-tmb"><div class="post-tmb-img"><img src="/upload/iblock/d01/8aaol98e28txacb98vlwq04bqyeesy6e/evristiki_chto_eto_i_kak_ih_ispolzovat.png"/></div><div class="post-tmb-cnt"><div class="post-tmb-title"><a href="/blog/samorazvitie/evristiki-chto-eto-i-kak-ikh-ispolzovat/">Эвристики - что это и как их использовать</a></div><div class="post-tmb-title">21 июня 2025 г.</div></div></div></div></div><div class="widget"><h3>Категории</h3><ul class="cat-nav"><li><a href="/blog/avtomatizatsiya-protsessov/">Автоматизация процессов</a></li><li><a href="/blog/akademicheskie-issledovaniya/">Академические исследования</a></li><li><a href="/blog/analitika/">Аналитика</a></li><li><a href="/blog/auditor/">Аудитор</a></li><li><a href="/blog/biznes/">Бизнес</a></li><li><a href="/blog/biznes-analitika/">Бизнес-аналитика</a></li><li><a href="/blog/bukhgalterskiy-uchet/">Бухгалтерский учет</a></li><li><a href="/blog/veb-razrabotka/">Веб-разработка</a></li><li><a href="/blog/vostrebovannye-professii/">Востребованные профессии</a></li><li><a href="/blog/vstupitelnye-ekzameny/">Вступительные экзамены</a></li><li><a href="/blog/vysshee-obrazovanie/">Высшее образование</a></li><li><a href="/blog/geymdev/">Геймдев</a></li><li><a href="/blog/gost/">ГОСТ</a></li><li><a href="/blog/grafika-i-3d-modelirovanie/">Графика и 3D-моделирование</a></li><li><a href="/blog/dizayn-i-tvorchestvo/">Дизайн и творчество</a></li><li><a href="/blog/dizayn-interera/">Дизайн интерьера</a></li><li><a href="/blog/dizayn-prezentatsiy/">Дизайн презентаций</a></li><li><a href="/blog/dolzhnostnye-instruktsii/">Должностные инструкции</a></li><li><a href="/blog/eda-i-kulinariya/">Еда и кулинария</a></li><li><a href="/blog/zdorove-i-meditsina/">Здоровье и медицина</a></li><li><a href="/blog/igrovye-metodiki-v-obuchenii/">Игровые методики в обучении</a></li><li><a href="/blog/inzhener-pto/">инженер ПТО</a></li><li><a href="/blog/iskusstvennyy-intellekt/">Искусственный интеллект</a></li><li><a href="/blog/iskusstvo-i-kultura/">Искусство и культура</a></li><li><a href="/blog/karernoe-razvitie/">Карьерное развитие</a></li><li><a href="/blog/konvertor-izobrazheniy/">Конвертор изображений</a></li><li><a href="/blog/korporativnoe-obuchenie/">Корпоративное обучение</a></li><li><a href="/blog/korporativnyy-trening/">Корпоративный тренинг</a></li><li><a href="/blog/krasota-i-ukhod/">Красота и уход</a></li><li><a href="/blog/kulturnye-issledovaniya/">Культурные исследования</a></li><li><a href="/blog/lichnoe-razvitie-i-psikhologiya/">Личное развитие и психология</a></li><li><a href="/blog/logistika-i-biznes/">Логистика и бизнес</a></li><li><a href="/blog/logistika-i-upravlenie/">Логистика и управление</a></li><li><a href="/blog/marketing/">Маркетинг</a></li><li><a href="/blog/massazh-i-kosmetologiya/">Массаж и косметология</a></li><li><a href="/blog/mediagramotnost/">Медиаграмотность</a></li><li><a href="/blog/meditsina-i-zdorove/">Медицина и здоровье</a></li><li><a href="/blog/menedzhment/">Менеджмент</a></li><li><a href="/blog/metodologiya-obucheniya/">Методология обучения</a></li><li><a href="/blog/metody-obucheniya/">Методы обучения</a></li><li><a href="/blog/motivatsiya-studentov/">Мотивация студентов</a></li><li><a href="/blog/nalogi/">Налоги</a></li><li><a href="/blog/ne-opredeleno/">Не определено</a></li><li><a href="/blog/neyroseti/">Нейросети</a></li><li><a href="/blog/obrazovanie/">Образование</a></li><li><a href="/blog/obrazovanie-i-kursy/">Образование и курсы</a></li><li><a href="/blog/obrazovanie-i-obuchenie/">Образование и обучение</a></li><li><a href="/blog/obuchenie/">Обучение</a></li><li><a href="/blog/obuchenie-sotrudnikov/">Обучение сотрудников</a></li><li><a href="/blog/onlayn-kursy/">Онлайн-курсы</a></li><li><a href="/blog/oshibka-nekorrektnyy-otvet-ot-ii/">ОШИБКА Некорректный ответ от ИИ</a></li><li><a href="/blog/pedagogika/">Педагогика</a></li><li><a href="/blog/postuplenie-v-vuzy/">Поступление в вузы</a></li><li><a href="/blog/programmirovanie/">Программирование</a></li><li><a href="/blog/prodazhi/">Продажи</a></li><li><a href="/blog/produktovyy-menedzhment/">Продуктовый менеджмент</a></li><li><a href="/blog/professii-i-karera/">Профессии и карьера</a></li><li><a href="/blog/professionalnye-navyki/">Профессиональные навыки</a></li><li><a href="/blog/professionalnye-navyki-i-kvalifikatsii/">Профессиональные навыки и квалификации</a></li><li><a href="/blog/psikhologiya/">Психология</a></li><li><a href="/blog/publichnye-vystupleniya/">Публичные выступления</a></li><li><a href="/blog/razrabotka-igr/">Разработка игр</a></li><li><a href="/blog/rukovodstva-i-gaydy/">Руководства и гайды</a></li><li><a href="/blog/samorazvitie/">Саморазвитие</a></li><li><a href="/blog/saund-dizayn-i-muzyka-v-igrakh/">Саунд-дизайн и музыка в играх</a></li><li><a href="/blog/sdelki-s-nedvizhimostyu/">Сделки с недвижимостью</a></li><li><a href="/blog/sotsialnye-aspekty-obrazovaniya/">Социальные аспекты образования</a></li><li><a href="/blog/spetsialnosti/">Специальности</a></li><li><a href="/blog/testirovanie-i-optimizatsiya-igr/">Тестирование и оптимизация игр</a></li><li><a href="/blog/tekhnicheskie-distsipliny/">Технические дисциплины</a></li><li><a href="/blog/tekhnolog/">Технолог</a></li><li><a href="/blog/tekhnologii-i-instrumenty/">Технологии и инструменты</a></li><li><a href="/blog/trudovoe-zakonodatelstvo-i-pravo/">Трудовое законодательство и право</a></li><li><a href="/blog/universitetskie-programmy/">Университетские программы</a></li><li><a href="/blog/upravlenie-personalom/">Управление персоналом</a></li><li><a href="/blog/upravlenie-proektami/">Управление проектами</a></li><li><a href="/blog/finansovye-aspekty-igrovoy-industrii/">Финансовые аспекты игровой индустрии</a></li><li><a href="/blog/finansy/">Финансы</a></li><li><a href="/blog/fotografiya-i-redaktirovanie-foto/">Фотография и редактирование фото</a></li><li><a href="/blog/frilans/">Фриланс</a></li><li><a href="/blog/tsifrovye-navyki/">Цифровые навыки</a></li><li><a href="/blog/tsifrovye-tekhnologii/">Цифровые технологии</a></li><li><a href="/blog/shakhmaty-i-nastolnye-igry/">Шахматы и настольные игры</a></li><li><a href="/blog/elektronnye-knigi/">Электронные книги</a></li><li><a href="/blog/adobe-illustrator/">Adobe Illustrator</a></li><li><a href="/blog/autocad/">AutoCad</a></li><li><a href="/blog/blender-i-3d-grafika/">Blender и 3D-графика</a></li><li><a href="/blog/ceo/">CEO</a></li><li><a href="/blog/chief-technical-officer/">Chief Technical Officer</a></li><li><a href="/blog/crm-sistemy/">CRM-системы</a></li><li><a href="/blog/digital-marketing/">Digital-маркетинг</a></li><li><a href="/blog/digital-prodvizhenie/">Digital-продвижение</a></li><li><a href="/blog/erp/">ERP</a></li><li><a href="/blog/figma/">Figma</a></li><li><a href="/blog/google-sheets/">Google Sheets</a></li><li><a href="/blog/it/">IT</a></li><li><a href="/blog/microsoft-excel/">Microsoft Excel</a></li><li><a href="/blog/microsoft-powerpoint/">Microsoft Powerpoint</a></li><li><a href="/blog/microsoft-word/">Microsoft Word</a></li><li><a href="/blog/pdf-redaktor/">PDF редактор</a></li><li><a href="/blog/pr-menedzher/">PR-менеджер</a></li><li><a href="/blog/python-i-programmirovanie/">Python и программирование</a></li><li><a href="/blog/seo/">SEO</a></li><li><a href="/blog/smm/">SMM</a></li><li><a href="/blog/soft-skills/">Soft Skills</a></li><li><a href="/blog/unity-i-igrovye-dvizhki/">Unity и игровые движки</a></li><li><a href="/blog/vr-i-metavselennye/">VR и метавселенные</a></li></ul></div></div></div></div></main><footer class="footer"><div class="footer-top"><div class="container"><div class="row"><div class="col-12 col-sm-4 col-md-4 col-xl-4"><a class="logo-brand" href="/"><span></span>Arena SEO</a></div><div class="col-6 col-sm-4 col-md-4 col-xl-4"><div class="foot-item"><div class="foot-title">Контакты</div><p>E-mail: <span></span></p></div></div><div class="col-6 col-sm-4 col-md-4 col-xl-4"><div class="foot-item"><div class="foot-title">Общее</div><p></p></div></div></div></div></div><div class="footer-btm"><div class="container"><span>© 2025</span><script type="text/javascript">(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(100042202, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });</script><noscript> <div><img src="https://mc.yandex.ru/watch/100042202" style="position:absolute; left:-9999px;" alt="alt"/></div></noscript></div></div></footer><div class="modal modal-wide fade" id="modal-1" tabindex="-1" aria-labelledby="modal-1Label" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-help"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button><div class="modal-help-lft"><span>Поможем подобрать курс</span>чтобы вы получили повышение<br>или новую профессию.</div><div class="modal-help-rht"><div class="modal-form-title">Оставьте заявку, и мы перезвоним</div><form action><div class="form-group"><input class="form-control" type="text" placeholder="Имя"></div><div class="form-group"><input class="form-control" type="tel" placeholder="Телефон"></div><div class="form-group"><input class="form-control" type="email" placeholder="Email"></div><div class="form-check mb-4"><input class="form-check-input" id="agree" type="checkbox"><label class="form-check-label" for="agree">Я соглашаюсь на <a href="#">обработку персональных данных</a></label></div><button class="btn btn-primary btn-full" type="button">Оставить заявку</button></form></div></div></div></div></div><div class="modal modal-simple fade" id="modal-2" tabindex="-1" aria-labelledby="modal-2Label" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button><div class="modal-title">Узнайте какая профессия вам подходит</div><p class="text-center">Пройдите тест - это займет не больше 10 минут</p><form action><div class="form-group"><input class="form-control" type="text" placeholder="Имя"></div><div class="form-group"><input class="form-control" type="email" placeholder="Email"></div><div class="form-check mb-4"><input class="form-check-input" id="agree1" type="checkbox"><label class="form-check-label" for="agree1">Я соглашаюсь на <a href="#">обработку персональных данных</a></label></div><button class="btn btn-primary btn-full" type="button">Пройти тест</button></form></div></div></div><svg width="0" height="0" style="display: none;"><symbol id="prev" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></symbol><symbol id="next" viewBox="0 0 24 24" fill="none"><path d="M9 6L15 12L9 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></symbol></svg><script src="/js/jquery.min.js"></script><script src="/js/bootstrap.bundle.min.js"></script><script src="/js/slick.min.js"></script><script src="/js/init.js"></script></body></html>