Html страница пример: Простая html страница код пример

Проектирование страниц регистрации | Microsoft Learn

• Статья
• 10/25/2022
• Чтение занимает 8 мин

На страницах регистрации OEM представлено множество возможностей настройки. Рекомендации в этом разделе помогут вам реализовать эти возможности настройки, сохраняя при этом единообразный внешний вид и удобство работы в OOBE. Руководство включает рекомендации по стилю (цвета, шрифты, заголовки и т. д.) для HTML-файлов, связанных со страницами регистрации, и полный пример HTML.

В этом разделе описываются все элементы на каждой из двух страниц регистрации OEM, указывающие параметры настройки для каждого элемента. В этом разделе также приведены рекомендации по стилю и примеры кода, которые можно использовать для проектирования всплывающих элементов HTML.

Макет обеих страниц регистрации OEM заблокирован, поэтому сами элементы страницы не могут быть переупорядочены.

Примечание

Для отображения страниц регистрации требуется минимальный объем информации. Необходимо указать заголовок страницы, подзаголовок страницы, customerinfo элемент, хотя бы один дополнительный флажок или одну ссылку, а также открытый ключ для шифрования открытого или закрытого ключа.

Страница регистрации OEM на одной

Первая страница регистрации OEM содержит приведенные ниже элементы, некоторые из которых можно настроить.

• Заголовок страницы. Создайте заголовок, который подходит для использования страницы. Этот заголовок также отображается на двух страницах регистрации.
• Подзаголовок страницы. Добавьте подзаголовок, чтобы помочь клиентам понять задачи на странице или каким-либо другим способом, чтобы они могли завершить форму.
  Этот подзаголовок также отображается на двух страницах регистрации. Заголовок и подзаголовок страницы можно настроить с помощью registration элемента Oobe.xml.
• Поля сведений о клиенте. Эти поля не настраиваются. Сведения о клиенте состоят из четырех полей ввода: «Имя», «Фамилия», «Регион», «Электронная почта» и «Номер Телефон». Если поле «Электронная почта» заполнено, оно будет проверено как правильное, прежде чем позволить клиенту продолжить работу. Поле ввода «Страна или регион» — это раскрывающийся список. Связанное значение каждой страны или региона — это связанный двухбуквенный код страны или региона на основе ISO 3166-1 Alpha-2.
• Одна ссылка. Настройте заголовок и путь к HTML-файлу с помощью link1 элемента Oobe.xml. При использовании этой ссылки для зоны конфиденциальности убедитесь, что политика является текущей.
• Кнопка «Пропустить«. Кнопка Skip отображается по умолчанию, но можно настроить hideSkip элемент Oobe. xml , чтобы скрыть его. Если клиент выберет «Пропустить«, данные регистрации любого типа не предоставляются. Текст кнопки не настраивается.
• Кнопка «Далее«. Кнопка «Далее» перемещает клиента вперед в OOBE. Эта кнопка не настраивается.

Предварительно заполненные сведения о клиенте

Когда пользователь входит в систему или регистрируется для использования MSA в OOBE, он предоставляет некоторые сведения о клиенте, запрошенные на страницах регистрации OEM. Чтобы упростить процесс настройки для пользователей, Windows 11 предварительно заполняет некоторые поля сведений о клиенте на странице регистрации OEM, если клиент использовал MSA ранее в OOBE.

В зависимости от выпуска пользователь может настроить различные варианты учетных записей, которые повлияют на предварительно заполнение сведений об учетной записи.

Страница регистрации OEM на две

На второй странице регистрации изготовителя оборудования содержатся следующие элементы, некоторые из которых можно настроить.

• Заголовок страницы . Создайте заголовок, который подходит для использования страницы. Этот заголовок также отображается на странице регистрации.
• Подзаголовок страницы. Добавьте подзаголовок, чтобы помочь клиентам понять задачи на странице или каким-либо другим способом, чтобы они могли завершить форму. Этот подзаголовок также отображается на странице регистрации. Заголовок и подзаголовок страницы можно настроить с помощью registration элемента Oobe.xml.
• Четыре флажка. На странице регистрации можно установить до четырех флажков с метками. Вы можете задать описательные метки для флажков и их состояния по умолчанию, используя customerinfoэлементыOobe.xml, checkbox1checkbox2а также элементы , а checkbox3 также элементы .
• Две ссылки. Под флажком можно отобразить до двух ссылок. Метки ссылок и пути к файлам можно указать с помощью link2
  элементовOobe. xmllink3. Любой текст, связанный с этими ссылками, должен находиться в HTML-файлах, хранящихся локально в каталоге %systemroot%\system32\Oobe\Info .
• Кнопка «Далее«. Кнопка «Далее» перемещает клиента вперед в OOBE. Эта кнопка не настраивается.

Примечание

Вы не можете пропустить отображение ссылки на странице регистрации, предоставив только link2 элементы link3 в Oobe.xml. Отсутствие link1 приведет link2 к тому, что элемент появится на первой странице регистрации, а не на второй.

Когда клиент щелкает любую ссылку, добавленную на страницы регистрации, откроется HTML-файл, хранящийся в %systemroot%\system32\Oobe\Info папке на устройстве. Корпорация Майкрософт предоставляет полный пример HTML, который определяет цвет фона, цвет шрифта, размер шрифта, вес шрифта, заполнение, поля и заголовки (среди других элементов) для HTML-файлов. Мы настоятельно рекомендуем использовать этот пример практически без изменений элементов дизайна.

Windows OOBE имеет темно-синий фон с светлым текстом. Содержимое лицензионного соглашения (EULA) использует темно-синий фон и светлый текст. Всплывающее содержимое использует темный фон с светлым текстом. Чтобы согласовать структуру Windows OOBE и создать согласованный пользовательский интерфейс, используйте соглашения о разметке и стиле, изложенные в примере HTML ниже при создании HTML-файлов.

Примечание

Встроенный стили CSS необходим, чтобы элементы узла iFrame правильно отображались на страницах регистрации.

Цвета

Цвета текста и фона определяются в примере кода CSS.

• Цвет фона: #2b2b2b
• Цвет шрифта: #FFF

Используйте эти цвета, чтобы обеспечить согласованное взаимодействие с пользователем во время запуска при первом включении.

Шрифт

Стандартный шрифт, используемый в OOBE, — Segoe UI. Используйте webfont пользовательского интерфейса Segoe для HTML-документов, чтобы убедиться, что шрифт соответствует остальной части OOBE.

Размеры и интервалы

Используйте два разных стиля для заголовков и содержимого основного текста.

• Заголовки: должны отображаться с помощью тега <h5> .
• Основной текст: должен отображаться с помощью тега <p> .
• Полужирный текст: должен отображаться с помощью тега <b> .
• Иерархия сведений: отступные разделы или группы маркированных элементов могут отображаться с тегом <DIR> , необходимым для шаблона контента лицензионного соглашения, необязательно для всплывающих элементов.

Нам требуется, чтобы файлы для ссылок на месте были HTML. Эти файлы отображаются во всплывающем элементе. Документы во всплывающем элементе изолированы, поэтому ссылки на внешние и сетевые ресурсы не будут работать.

Важно!

Следующие теги запрещены и не должны быть включены в файлы:

• <script>
• <iframe>
• <input>
• <img>
• <a>

Пример кода CSS

Используйте следующий встроенный CSS в голове HTML-документов.

<style type="text/css">
        [dir='rtl'] dir {
            padding: 0 12px;
        }
        [dir='ltr'] dir {
            padding: 0 12px;
        }
        [dir='ltr'] [align=right] {
            text-align: right;
        }
        [dir='ltr'] [align=left] {
            text-align: left;
        }
        [dir='rtl'] [align=right] {
            text-align: left;
        }
        [dir='rtl'] [align=left] {
            text-align: right;
        }
        [dir='rtl'] body {
            padding: 0 12px;
        }
        [dir='ltr'] body {
            padding: 0 12px;
        }
        body {
            -ms-overflow-style: scrollbar;
            background: #2b2b2b;
            color: #FFF;
            font-family: "Segoe UI", "Segoe UI Webfont", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math", Selawik, Tahoma, Verdana, Arial, sans-serif;
            font-size: .
  9375rem;
            font-weight: 400;
            line-height: 1.25rem;
            margin: 0;
            max-width: 100%;
            overflow: auto;
            padding-bottom: 0;
            padding-top: 0;
        }
        body b * {
            font-weight: 700;
        }
        html {
            font-size: 100%;
        }
        p {
            font-size: .9375rem;
            font-weight: 400;
            line-height: 1.25rem;
            max-width: 100%;
            padding-bottom: .0141875rem;
            padding-top: .0141875rem;
        }
        h5 {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 100%;
            max-width: 100%;
            padding-top: 12px;
            margin: 0;
        }
    </style>

Полный пример HTML

Ниже приведен полный пример всплывающего меню HTML для страниц регистрации изготовителя оборудования. Используйте этот пример в качестве базового плана для страниц всплывающих элементов HTML, не изменяя элементы оформления.

> <!DOCTYPE html>
<html dir="ltr">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title></title>
    <style type="text/css">
        [dir='rtl'] dir {
            padding: 0 12px;
        }
        [dir='ltr'] dir {
            padding: 0 12px;
        }
        [dir='ltr'] [align=right] {
            text-align: right;
        }
        [dir='ltr'] [align=left] {
            text-align: left;
        }
        [dir='rtl'] [align=right] {
            text-align: left;
        }
        [dir='rtl'] [align=left] {
            text-align: right;
        }
        [dir='rtl'] body {
            padding: 0 12px;
        }
        [dir='ltr'] body {
            padding: 0 12px;
        }
        body {
            -ms-overflow-style: scrollbar;
            background: #2b2b2b;
            color: #FFF;
            font-family: "Segoe UI", "Segoe UI Webfont", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math", Selawik, Tahoma, Verdana, Arial, sans-serif;
            font-size: . 9375rem;
            font-weight: 400;
            line-height: 1.25rem;
            margin: 0;
            max-width: 100%;
            overflow: auto;
            padding-bottom: 0;
            padding-top: 0;
        }
        body b * {
            font-weight: 700;
        }
        html {
            font-size: 100%;
        }
        p {
            font-size: .9375rem;
            font-weight: 400;
            line-height: 1.25rem;
            max-width: 100%;
            padding-bottom: .0141875rem;
            padding-top: .0141875rem;
        }
        h5 {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 100%;
            max-width: 100%;
            padding-top: 12px;
            margin: 0;
        }
    </style>
</head>
<body>
<h5>Learn more about the sample</h5>
<P>Quisque efficitur lorem nec mauris semper consequat. Aliquam sollicitudin rhoncus sollicitudin. Integer ligula mauris, euismod ac lacus et, cursus pulvinar mauris.  Aliquam sollicitudin blandit vehicula. Morbi ac arcu vitae mi placerat facilisis eu sed enim. Ut ornare aliquet tincidunt. Maecenas posuere et nisi in tempor.</P>
<B><P>Donec malesuada bibendum nibh, in semper nunc efficitur sit amet. Vestibulum vehicula hendrerit elit et congue.</P>
  <DIR>
    <DIR>
      <P>1.&#9;Pellentesque mollis cursus ultrices.</P>
      <DIR>
        <P>a.&#9;Vivamus ut suscipit arcu.
</B> Donec viverra tortor lacus, eu aliquam dolor auctor quis. Praesent eget tincidunt metus, non pellentesque metus. </P>
<B><P>b.&#9;Nulla tincidunt urna et tortor gravida, id dictum ligula lacinia.</B> Vivamus libero mauris, fermentum et pharetra id, ultricies quis urna.</P>
<DIR>
  <DIR>
    <P>(i)&#9;Suspendisse porta vestibulum risus, et molestie est egestas ut.</P>
    <P>(ii)&#9; Nullam feugiat, odio vel convallis fringilla, libero nibh volutpat metus, a ultrices justo est id nisl. </P>
    <P>(iii)&#9;Nunc vulputate turpis at eleifend malesuada.</P>
    <P>(iv)&#9;Cras maximus mi porta arcu vehicula elementum.</P></DIR>
</DIR>
</DIR>
<B><P>2.&#9;Nullam ullamcorper placerat finibus.</B> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt quam, viverra vehicula urna. Sed sit amet volutpat ex, id egestas odio.
Aliquam at urna mollis, commodo ex sit amet, auctor erat. Proin elit neque, pretium ut lorem eget, cursus condimentum ante. Quisque placerat tempor nunc, a pulvinar augue interdum sit amet. Sed eget sem quis tellus rutrum rhoncus. Suspendisse potenti. Vestibulum sem ipsum, volutpat ac condimentum ut, porttitor ac nulla. Quisque rhoncus sapien eu dolor posuere, ac auctor mi dapibus. Aenean egestas mauris sed tellus dapibus, sed sagittis velit volutpat:</P>
<DIR>
  <DIR>
    <DIR>
      <P>·&#9;Sed mattis varius libero.</P>
      <P>·&#9;Maecenas eget ultrices risus. </P>
      <P>·&#9;Maecenas venenatis tellus id euismod venenatis.</P>
      <P>&#12288;</P></DIR>
  </DIR>
</DIR>
</DIR>
</DIR>
</body>
</html>

Знакомимся с языком разметки HTML — Джино • Журнал

Без него вы бы вряд ли смогли просматривать наш «Джино.Журнал» или любой другой сайт. HTML — специальный язык, который формирует «скелет» страниц большинства сайтов в интернете.

Да, HTML является языком, но не языком программирования, а языком разметки. Это значит, что с помощью него не получится выполнить логические операции, а его предназначение — размечать элементы на веб-странице. Другими словами, благодаря HTML браузерам становится понятно, где на странице сайта находится заголовок и подзаголовки, блоки текста, списки, картинки и другого рода содержимое.

Элементы страницы в HTML помечаются словами или буквами, заключёнными в угловые скобки — их называют дескриптерами или попросту тегами. При анализе веб-страницы браузер считывает все теги и представляет её нужным образом на экране пользователя. Однако HTML отвечает только за расположение элементов, а создание дизайна страницы в задачи этого языка уже не входит.

Рассмотрим простой пример кода HTML-документа:

<!DOCTYPE html>
<html>
<head>
<title>Пример веб-страницы</title>
</head>
<body>
<h4>Подзаголовок</h4>
<p>Абзац 1</p>
<p><strong>Абзац 2</strong></p>
</body>
</html>

Обязательными тегами для документов в HTML являются <!DOCTYPE html>, <html> / </html>, <head> / </head> и <body> / </body>, причём они всегда идут в том порядке, в каком показано здесь. Между дескриптерами <head> и </head> размещается информация, которая не показывается на самой странице, а между <body> и </body> — как раз то, что мы видим, открывая сайт. Поэтому на странице с таким кодом мы бы увидели это:

Подзаголовок

Абзац 1
Абзац 2

Вид содержимого обозначается другими разными тегами. К примеру, в этом случае мы оформили подзаголовок с помощью дескриптеров <h4> и </h4>, а вторую строчку в тексте выделили полужирным с помощью <strong> и </strong>. Как вы наверняка уже успели заметить, теги в HTML в основном являются двойными и окружают с двух сторон ту часть контента, к которой они должны быть применены.

Код выше можно оформить в отдельный файл с расширением .html и затем открыть его в любом браузере. А вставив внутри одного HTML-документа ссылки на другие такие же документы, можно создать прообраз сайта.

Кроме самих тегов, для оформления веб-страниц используются атрибуты, они же — аргументы. С помощью указания тех или иных значений атрибуты могут вносить изменения в тег. Например, с помощью них можно выровнять текст либо картинку по краю или по центру. Тег с артибутами выглядит так:

<link rel="icon" type="image/png" href="/favicon-32x32.png">

Создавать HTML-код можно в любом текстовом редакторе, однако это часто занимает много времени, особенно у тех, кто только начинает осваивать язык. Большой популярностью пользуются специальные HTML-редакторы, где процесс написания упрощается засчёт автоматических действий и других полезных функций. В качестве примера можно привести редакторы Notepad++ и Brackets, но есть несколько других бесплатных и платных альтернатив.

Для чего вам может пригодиться знание HTML?

• Это поможет в создании своего самописного сайта. Если вы решили отказаться от использования CMS, конструкторов и генераторов статических сайтов, то освоить HTML будет, безусловно, необходимо.

• Если вы администрируете сайт на CMS, то HTML вам тоже может пригодиться. Не все возможности можно реализовать с помощью плагинов и прочих готовых решений, поэтому в особых случаях придётся иметь дело с изменением самого кода сайта.

• HTML в целом пригождается там, где есть веб-интерфейс — и речь может идти о работе не только с сайтами, но и с приложениями.

• Составление текста писем в рассылках по электронной почте также зачастую требует знания HTML.

Базовая страница примера HTML

Пример статического HTML-файла — Проекты — Руководства

В этом приложении показан пример статического HTML-файла, который готов к загрузке в Squiz Matrix. Заполнители (например, HTML-комментарии и фиктивный контент) используются в дизайне, чтобы указать, где необходимо разместить теги дизайна Squiz Matrix.

  <голова> <мета-кодировка="utf-8"> <мета-имя="описание" содержание=""> <мета имя="автор" содержание=""> ico">  <тело> <дел> <заголовок> <навигация> <ул>
Главная
О нас
Контакты
Название сайта
 <ол>
Главная
Уровень 1
Уровень 2
  <дел>
Заголовок страницы