Как создать простую веб страницу с помощью HTML
На чтение
21 мин.
Просмотров
51
Дата обновления
10.03.2025
Начните с базового скелета. Для любой веб-страницы необходимы три ключевых элемента: тег , , и . Убедитесь, что все эти теги корректно вложены друг в друга.
В теге укажите название страницы (тег .
В теге содержится вся видимая часть страницы. Здесь размещаются заголовки ( - ), абзацы (), ссылки (), изображения (
Заголовок – это важно. Используйте теги для основного заголовка, для подзаголовков и так далее. Структурируйте контент для удобства чтения и понимания.
Добавление текста: Отредактируйте и внесите нужный текст внутри тега .
Подчеркивание важности тегов: Запомните, что правильная вложенность тегов – залог корректного отображения страницы. Правильный HTML улучшает SEO и доступность страницы.
Как создать простую веб-страницу с помощью HTML
Создайте текстовый файл и сохраните его с расширением .html (например, index.html).
Вставьте следующий код:
Моя первая страница
Привет, мир!
Это моя первая веб-страница.
Откройте этот файл в браузере. Вы увидите заголовок «Привет, мир!» и абзац «Это моя первая веб-страница». Замените эти фразы своими.
Для добавления изображений, используйте тег (например,
). Укажите корректный путь.
Для создания списков используйте
- (неупорядоченный список) или
- Элемент 1
- Элемент 2
</code> устанавливает название страницы, которое видно в закладке браузера..</li> <li>Текст, содержащийся внутри <code><body></code> показывается пользователю. Добавляйте туда заголовки, текст, изображения, ссылки, списки!</li> <li>Каждый элемент HTML должен иметь открывающий и закрывающий теги.</li> </ul> <h2>Добавление заголовков, текста и элементов форматирования</h2> Для создания заголовков используйте теги <h1>-<h6>. Начните с <h1> для главного заголовка, используйте <h2>, <h3>, и т.д. для подзаголовков. Например: <h2>Подзаголовок</h2> <h3>Еще один подзаголовок</h3> <p>Для обычного текста используйте тег . Например:</p> <p>Этот текст отобразится как обычный абзац.</p> <p>Для выделения важных слов или фраз используйте тег <strong>. Например:</p> <p><strong>Ключевые</strong> слова выделяются жирным шрифтом.</p> <p>Для выделения слов или фраз с особым смыслом, но не для акцента, используйте тег <em>. Например:</p> <p><em>Важная</em> информация выделяется курсивом.</p> <p>Для форматирования, например, создания списка, нужно использовать специальные теги, а не просто изменять шрифт.</p> <h2>Создание списков и ссылок</h2> <p>Для создания списков используйте теги <strong><ul></strong> (неупорядоченный список) и <strong><ol></strong> (упорядоченный список). Внутри этих тегов помещаются элементы списка <strong><li></strong>.</p> <p><strong>Пример неупорядоченного списка:</strong></p> <pre> <ul> <li>Яблоко</li> <li>Банан</li> <li>Груша</li> </ul> </pre> <p><strong>Пример упорядоченного списка:</strong></p> <pre> <ol> <li>Шаг 1</li> <li>Шаг 2</li> <li>Шаг 3</li> </ol> </pre> <p>Для создания ссылок используйте тег <strong><a></strong>. Атрибут <strong>href</strong> указывает адрес ссылки:</p> <pre> <a href="https://www.example.com">Перейти на пример сайта</a> </pre> <p>Для улучшения юзабилити, укажите текст ссылки, ссылаясь на контент:</p> <pre> <a href="https://www.example.com">Перейти на сайт с подробной информацией</a> </pre> <p><strong>Важно!</strong> Не забудьте использовать корректные URL-адреса в атрибуте <strong>href</strong>.</p> <h2>Добавление изображений и медиа-контента</h2> <p>Для добавления изображений используйте тег <code><img></code>. Он принимает атрибут <code>src</code>, указывающий путь к изображению.</p> <p><b>Пример:</b></p> <pre><code><img src="image.jpg" alt="Описание изображения"> </code></pre> <p>Атрибут <code>alt</code> необходим для описания изображения. Он важен для доступности и для поисковых систем.</p> <p><b>Важные моменты:</b></p> <ul> <li>Путь к изображению должен быть корректным. Изображение должно находиться в той же директории, что и ваш HTML-файл, или указывать на правильный путь.</li> <li>Форматы изображений: JPG, PNG, GIF.</li> <li>Размеры изображений необходимо оптимизировать.</li> </ul> <p><b>Добавление видео</b></p> <p>Видео вставляется с помощью тега <code><video></code>:</p> <pre><code><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Ваше устройство не поддерживает воспроизведение этого видео. </video> </code></pre> <ul> <li><code>width</code> и <code>height</code> – ширина и высота видео.</li> <li><code>controls</code> – отображает стандартные элементы управления (воспроизведение, пауза etc.).</li> <li><code>source</code> специфицирует разные форматы, чтобы подстроиться под разные устройства.</li> <li>Список <code>source</code> – альтернативный вариант видео, если браузер не понимает формат.</li> </ul> <p><b>Добавление аудио</b></p> <p>Для аудио используйте тег <code><audio></code>:</p> <pre><code><audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Ваш браузер не поддерживает воспроизведение аудио. </audio> </code></pre> <p>Эта структура аналогична видео, но использует тип <code>audio</code>.</p> <p><strong>Важно учесть оптимизацию файлов медиа для скорости загрузки страницы.</strong> Используйте сжимающие инструменты для изображений и оптимизированные варианты файлов.</p> <h2>Проверка и публикация страницы</h2> <p>Для проверки созданной страницы используйте браузер (Chrome, Firefox, Safari). Откройте файл HTML, написанный вами, двойным кликом.</p> <ul> <li><b>Проверяйте отображение</b>: Все ли элементы расположены как задумывалось? Совпадают ли стили (цвет, шрифт) с тем, что вы задали в коде?</li> <li><b>Проверьте функционал</b>: Все ли ссылки работают? Поддерживает ли страница форму или другое взаимодействие, как планировалось? </li> <li><b>Проверка в разных браузерах</b>: Откройте страницу в двух-трех разных браузерах. Возможно, некоторые стили или элементы будут отображаться по-разному.</li> <li><b>Важная проверка:</b> Проверьте все ссылки на внешние ресурсы (к другим файлам, страницам, изображениям). Работают ли все они?</li> </ul> <p>После проверки, страница готова к публикации.</p> <ol> <li><b>Выберите хостинг</b>: Для размещения страницы понадобится хостинг-сервис. Есть бесплатные варианты, особенно для небольших проектов.</li> <li><b>Загрузите файлы</b>: Скопируйте созданный файл HTML и любые связанные с ним файлы (CSS, JS и изображения) на выбранный хостинг. Следуйте инструкциям хостинга для загрузки.</li> <li><b>Настройте URL</b>: Проверьте, что отображается правильный адрес страницы. Важно правильно указать путь к файлу страницы.</li> <li><b>Тестирование на разных устройствах</b>: Проверьте отображение и работу страницы на различных устройствах (компьютер, планшет, мобильный). Откройте страницу на десктопах и мониторах с разными разрешениями, чтобы проверить масштабирование.</li> <li><b>Предоставьте доступ</b>: Убедитесь, что страница доступна по указанному URL всем пользователям.</li> </ol> <h2>Вопрос-ответ:</h2> <h4>Что мне нужно, чтобы начать создавать простые веб-страницы с помощью HTML?</h4> <p>Для создания простых веб-страниц с помощью HTML вам понадобится лишь текстовый редактор (например, Блокнот, Notepad++, Sublime Text) и немного терпения. Никаких специальных программ или платформ покупать не надо. Вы можете создавать и редактировать HTML-код прямо в этих текстовых редакторах. Самое главное – это понимание основ языка, а инструменты для редактирования – это просто помощь, которую можно выбрать по своему усмотрению.</p> <h4>Как правильно структурировать страницу, чтобы она выглядела аккуратно и была удобной для пользователя?</h4> <p>Структура веб-страницы определяется тегами. Начинайте с тега `<html>`. Внутри него размещается `<head>` (заголовок, метаданные) и `<body>` (собственно, содержимое страницы). В `<head>` указывается заголовок страницы (`<title>`), CSS-стили (если используете), и другую информацию о документе. В `<body>` размещаются все видимые элементы: заголовки (`<h1>`-`<h6>`), абзацы (`<p>`), списки (`<ul>`, `<ol>`), изображения (`<img>`), ссылки (`<a>`). Важно соблюдать структуру вложенности тегов, чтобы страница отображалась корректно.</p> <h4>Какие основные теги HTML нужно знать для создания простых страниц?</h4> <p>Для создания базовых страниц, Вам понадобятся теги для создания заголовков (<h1>-<h6>), абзацев (<p>), списков (<ul>, <ol>), ссылок (<a>), изображений (<img>), блоков текста (<div>) и разделов страницы. Знание основных тегов, таких как `<p>`, `<h1>`, `<h2>`, `<img>` и `<a>`, позволит создавать страницы с основными элементами. Не забудьте о тегах `<head>` и `<body>`, определяющих фундамент структуры.</p> <h4>Как добавить изображения на страницу, чтобы они отображались правильно?</h4> <p>Для добавления изображений используется тег `<img>`. Внутри тега нужно указать путь к изображению используя атрибут `src`. Например: `<img src="путь_к_изображению.jpg">`. Важно, чтобы этот файл находился в той же папке, что и ваш HTML-файл, или задайте корректный относительный или абсолютный путь, в зависимости от расположения файла на вашем компьютере. Также можно указать альтернативный текст для изображения (`alt`), который будет отображаться, если изображение не загрузится или если у пользователя включены средства чтения.</p> </div> <div class="article-footer"> <div class="tags"> <a href="/blog/veb-razrabotka/">Веб-разработка</a> </div> <div class="blog-share"> <span>Поделиться:</span> <div class="ya-share2" data-curtain data-shape="round" data-services="vkontakte,telegram,viber,whatsapp"> <div class="ya-share2__container ya-share2__container_size_m ya-share2__container_color-scheme_normal ya-share2__container_shape_round"> <ul class="ya-share2__list ya-share2__list_direction_horizontal"> <li class="ya-share2__item ya-share2__item_service_vkontakte"> <a class="ya-share2__link" href="https://vk.com/share.php?url=https://kimgid.ru/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/&title=Как создать простую веб страницу с помощью HTML&utm_source=share2" rel="nofollow noopener" target="_blank" title="ВКонтакте"> <span class="ya-share2__badge"> <span class="ya-share2__icon"></span> </span> <span class="ya-share2__title">ВКонтакте</span> </a> </li> <li class="ya-share2__item ya-share2__item_service_telegram"> <a class="ya-share2__link" href="https://t.me/share/url?url=https://kimgid.ru/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/&text=Как создать простую веб страницу с помощью HTML&utm_source=share2" target="_blank" rel="nofollow noopener"> <span class="ya-share2__badge"> <span class="ya-share2__icon"></span> </span> <span class="ya-share2__title">Telegram</span> </a> </li> <li class="ya-share2__item ya-share2__item_service_viber"> <a class="ya-share2__link" href="viber://forward?text=Блог kimgid https://kimgid.ru/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/&utm_source=share2" rel="nofollow" target="_blank" title="Viber"> <span class="ya-share2__badge"> <span class="ya-share2__icon"></span> </span> <span class="ya-share2__title">Viber</span> </a> </li> <li class="ya-share2__item ya-share2__item_service_whatsapp"> <a class="ya-share2__link" href="https://api.whatsapp.com/send?text=Как создать простую веб страницу с помощью HTML https://kimgid.ru/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/&utm_source=share2" rel="nofollow noopener" target="_blank" title="WhatsApp"> <span class="ya-share2__badge"> <span class="ya-share2__icon"></span> </span> <span class="ya-share2__title">WhatsApp</span> </a> </li> </ul> </div> </div> </div> </div> </div> <meta property="og:type" content="website"> <meta property="og:site_name" content="salon-nikol.su"> <meta property="og:type" content="article" /> <meta name="author" content="" /> <meta property="article:published_time" content="18.02.2025 12:02:30" /> <meta property="article:modified_time" content="10.03.2025 04:03:58" /> <meta property="og:url" content="https://salon-nikol.su/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/"> <meta property="og:locale" content="ru"> <meta property="og:title" content="Блог \ Как создать простую веб страницу с помощью HTML | salon-nikol.su"> <meta property="og:description" content=""> <meta property="og:image" content="https://salon-nikol.su/upload/iblock/925/09d652lt3ep44sibxcgp49i3or55nxwi/kak_podklyuchit_css_k_html_3_sposoba.png"> <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/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/"><img src="/upload/iblock/925/09d652lt3ep44sibxcgp49i3or55nxwi/kak_podklyuchit_css_k_html_3_sposoba.png" alt="Как создать простую веб страницу с помощью HTML"></a></div> <div class="post-preview-title"><a href="/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/">Как создать простую веб страницу с помощью HTML</a></div> <span>11/22/2024</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/kak-sozdat-sajt-s-nulya-samostoyatelno-poshagovaya-instruktsiya/"><img src="/upload/iblock/4ae/hqeor11qej5is7fqs91rfuvjcw1ucdc3/brauzer_chto_eto_zachem_nuzhen_vozmozhnosti_i_razlichiya.png" alt="Как создать сайт с нуля самостоятельно — пошаговая инструкция"></a></div> <div class="post-preview-title"><a href="/blog/kak-sozdat-sajt-s-nulya-samostoyatelno-poshagovaya-instruktsiya/">Как создать сайт с нуля самостоятельно — пошаговая инструкция</a></div> <span>11/20/2024</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/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/"><img src="/upload/iblock/16f/o2slc8rovr5teo8xe738nes15wjtg8m1/kak_skachat_video_s_lyubogo_sayta_besplatno_13_sposobov.png" alt="Как создать сайт с нуля при помощи HTML"></a></div> <div class="post-preview-title"><a href="/blog/kak-sozdat-sajt-s-nulya-pri-pomoshi-html/">Как создать сайт с нуля при помощи HTML</a></div> <span>11/21/2024</span> </div> </div> </div> </div> <div class="pane pe-0 ps-0"> <div class="decored-title">0 Комментариев</div> <div class="comm-list"> </div> </div> <div class="pane"> <div>Комментариев на модерации: 0</div> <div class="decored-title">Оставьте комментарий</div> <div class="comm-form"> <form method="post" enctype="multipart/form-data" class="comment form"> <div class="row"> <div class="col-lg-12 mb-3"> <div class="rate-block"> <label>Ваша оценка</label> <div class="rating"> <div class="votes_block with-text"> <div class="ratings"> <div class="item-rating" data-message="Очень плохо"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Плохо"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Нормально"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Хорошо"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> <div class="item-rating" data-message="Отлично"><i class="svg inline svg-inline-star" aria-hidden="true"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_172_19507)"> <path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path> <path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path> <path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path> </g> <defs> <clipPath id="clip0_172_19507"> <rect width="25" height="24" fill="white"></rect> </clipPath> </defs> </svg> </i></div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="">Ваше имя</label> <div class="input-box" required> <i class="far fa-user"></i> <input type="text" class="form-control" required name="name"> </div> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="">Ваша почта</label> <div class="input-box" required> <i class="far fa-envelope"></i> <input type="email" class="form-control" required name="email"> </div> </div> </div> </div> <div class="form-group"> <div class="input-box"> <i class="far fa-comment-alt"></i> <textarea name="comment" id="" class="form-control"></textarea> </div> </div> <input type="hidden" name="article" value="69838"> <input type="hidden" name="rating" value="5" class="rating_form"> <input type="hidden" name="link" value="https://salon-nikol.su/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/"> <input type="hidden" name="ip" value="18.217.148.255"> <input type="hidden" name="sid" value="33"> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label for="">Прикрепите фото</label> <input type="file" class="form-control" name="file"> </div> <div class="form-check mb-4"> <input class="form-check-input" type="checkbox" id="agree2" name="agreement" checked> <label class="form-check-label" for="agree2"> Я соглашаюсь на <a href="#">обработку персональных данных</a> </label> </div> </div> </div> <div class="row mb-3"> <div class="col-lg-4"> <button type="submit" class="btn btn-full">Отправить</button> </div> </div> </form> <div class="modal-content inline_success"> <div class="modal-body"> <div class="thank-ico"> <img src="/local/templates/kimgid/img/check.svg" width="93" alt=""> </div> <p>Ваш комментарий добавлен! <br>Он будет размещен после модерации</p> </div> </div> </div> </div> </div> <div class="sidebar"> <div class="widget"> <h3>Популярные статьи</h3> <div class="wiget-grp"> </div> </div> <div class="widget"> <h3>Categories</h3> <ul class="cat-nav"> <li><a href="/blog/agile/">Agile</a></li> <li><a href="/blog/blender-i-3d-grafika/">Blender и 3D-графика</a></li> <li><a href="/blog/crm-sistemy/">CRM-системы</a></li> <li><a href="/blog/digital-marketing/">Digital-маркетинг</a></li> <li><a href="/blog/django-i-veb-razrabotka/">Django и веб-разработка</a></li> <li><a href="/blog/edtech/">EdTech</a></li> <li><a href="/blog/google-sheets/">Google Sheets</a></li> <li><a href="/blog/growth-hacking/">Growth Hacking</a></li> <li><a href="/blog/it/">IT</a></li> <li><a href="/blog/microsoft-excel/">Microsoft Excel</a></li> <li><a href="/blog/python-i-programmirovanie/">Python и программирование</a></li> <li><a href="/blog/soft-skills/">Soft Skills</a></li> <li><a href="/blog/avtomatizatsiya-protsessov/">Автоматизация процессов</a></li> <li><a href="/blog/akademicheskaya-deyatelnost/">Академическая деятельность</a></li> <li><a href="/blog/analitika/">Аналитика</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/grafika-i-3d-modelirovanie/">Графика и 3D-моделирование</a></li> <li><a href="/blog/dizayn-prezentatsiy/">Дизайн презентаций</a></li> <li><a href="/blog/diplomnye-raboty/">Дипломные работы</a></li> <li><a href="/blog/iskusstvennyy-intellekt/">Искусственный интеллект</a></li> <li><a href="/blog/istoriya-igr-i-studiy/">История игр и студий</a></li> <li><a href="/blog/kulturnye-issledovaniya/">Культурные исследования</a></li> <li><a href="/blog/marketing/">Маркетинг</a></li> <li><a href="/blog/mediagramotnost/">Медиаграмотность</a></li> <li><a href="/blog/nalogi/">Налоги</a></li> <li><a href="/blog/neyroseti/">Нейросети</a></li> <li><a href="/blog/obrazovanie/">Образование</a></li> <li><a href="/blog/obrazovatelnye-issledovaniya/">Образовательные исследования</a></li> <li><a href="/blog/ostalnoe/">Остальное</a></li> <li><a href="/blog/oformlenie-nauchnykh-rabot/">Оформление научных работ</a></li> <li><a href="/blog/postuplenie-v-vuzy/">Поступление в вузы</a></li> <li><a href="/blog/prikladnye-distsipliny/">Прикладные дисциплины</a></li> <li><a href="/blog/prodazhi/">Продажи</a></li> <li><a href="/blog/psikhologiya/">Психология</a></li> <li><a href="/blog/publichnye-vystupleniya/">Публичные выступления</a></li> <li><a href="/blog/testirovanie-i-optimizatsiya-igr/">Тестирование и оптимизация игр</a></li> <li><a href="/blog/upravlenie-personalom/">Управление персоналом</a></li> <li><a href="/blog/upravlenie-produktami/">Управление продуктами</a></li> <li><a href="/blog/upravlenie-proektami/">Управление проектами</a></li> <li><a href="/blog/finansy/">Финансы</a></li> <li><a href="/" class="selected">Главная</a></li> <li><a href="/schools/">Школы</a></li> <li><a href="/podborki/">Подборки курсов</a></li> </ul> </div> </div> </div> </div> </main> <!-- Modal 1 --> <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 type="button" class="btn-close" 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 method="post" enctype="multipart/form-data" class="help"> <div class="form-group"> <input type="text" placeholder="Имя" class="form-control" name="name"> </div> <div class="form-group"> <input type="text" placeholder="Телефон" class="form-control" name="tel"> </div> <div class="form-group"> <input type="text" placeholder="Email" class="form-control" name="email"> </div> <div class="form-group"> <input type="hidden" placeholder="Статья" class="form-control" name="article" value="69838"> <input type="hidden" name="link" value="https://salon-nikol.su/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/"> <input type="hidden" name="ip" value="18.217.148.255"> <input type="hidden" name="sid" value="33"> </div> <div class="form-check mb-4"> <input class="form-check-input" type="checkbox" id="agree" name="agreement" checked> <label class="form-check-label" for="agree"> Я соглашаюсь на <a href="#">обработку персональных данных</a> </label> </div> <button type="submit" class="btn btn-primary btn-full">Оставить заявку</button> </form> <div class="modal-content inline_success"> <div class="modal-body"> <div class="thank-ico"> <img src="/local/templates/kimgid/img/check.svg" width="93" alt=""> </div> <p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p> </div> </div> </div> </div> </div> </div> </div> <!-- Modal 2 --> <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 type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-title">Узнайте какая профессия вам подходит</div> <p class="text-center">Пройдите тест - это займет не больше 10 минут</p> <form method="post" enctype="multipart/form-data" class="profession"> <div class="form-group"> <input type="text" placeholder="Имя" class="form-control" name="name"> </div> <div class="form-group"> <input type="email" placeholder="Email" class="form-control" name="email"> </div> <div class="form-group"> <input type="hidden" placeholder="Статья" class="form-control" name="article" value="69838"> <input type="hidden" name="link" value="https://salon-nikol.su/blog/kak-sozdat-prostuyu-veb-stranitsu-s-pomoshyu-html/"> <input type="hidden" name="ip" value="18.217.148.255"> <input type="hidden" name="sid" value="33"> </div> <div class="form-check mb-4"> <input class="form-check-input" type="checkbox" id="agree1" name="agreement" checked> <label class="form-check-label" for="agree1"> Я соглашаюсь на <a href="#">обработку персональных данных</a> </label> </div> <button type="submit" class="btn btn-primary btn-full">Пройти тест</button> </form> <div class="modal-content inline_success"> <div class="modal-body"> <div class="thank-ico"> <img src="/local/templates/kimgid/img/check.svg" width="93" alt=""> </div> <p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p> </div> </div> </div> </div> </div><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 href="/" class="logo-brand"> <span><img src="/favicon.ico" alt=""></span> Nikol Studio </a> </div> <div class="col-6 col-sm-4 col-md-4 col-xl-4"> </div> <div class="col-6 col-sm-4 col-md-4 col-xl-4"> </div> </div> </div> </div> <div class="footer-btm"> <div class="container"> <span>© 2024</span> <span>Edtech Seo</span> <!-- Yandex.Metrika counter --> <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(99956833, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/99956833" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div> </div> </footer> <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"/> </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"/> </symbol> </svg> </body> </html>
- (упорядоченный список). Например:
Не забудьте сохранить изменения файла после редактирования.
Установка необходимых инструментов
Для создания веб-страницы вам понадобится текстовый редактор и браузер. Никаких сложных программ не нужно.
| Инструмент | Описание | Рекомендация |
|---|---|---|
| Текстовый редактор | Для написания кода HTML. | Блокнот (Windows),TextEdit (macOS), Sublime Text, Atom – любой простой текстовый редактор подойдет. |
| Браузер | Для просмотра созданной страницы. | Google Chrome, Mozilla Firefox, Safari – любой современный браузер покажет результат вашего кода. |
Скачать и установить дополнительный софт не требуется.
Структура базовой HTML страницы
Любая HTML страница состоит из строго определённых элементов. Главное: открывающий и закрывающий тег.
Главный элемент - это . Он охватывает весь контент страницы.
Внутри находится и . содержит метаинформацию (название страницы, кодировку и пр.). содержит видимую часть страницы.
Пример:
Это текст моей страницы.
Важные замечания: