From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../how_to_build_custom_form_widgets/index.html | 792 ---------------- .../forms/how_to_structure_an_html_form/index.html | 320 ------- files/ru/learn/html/forms/index.html | 78 -- .../sending_forms_through_javascript/index.html | 391 -------- .../learn/html/forms/styling_html_forms/index.html | 381 -------- .../index.html" | 906 ------------------- .../index.html" | 305 ------- .../index.html" | 352 -------- .../index.html" | 690 -------------- .../author_fast-loading_html_pages/index.html | 204 +++++ files/ru/learn/html/howto/index.html | 153 ++++ .../html/howto/use_data_attributes/index.html | 129 +++ .../advanced_text_formatting/index.html | 679 ++++++++++++++ .../creating_hyperlinks/index.html | 435 +++++++++ .../introduction_to_html/debugging_html/index.html | 181 ++++ .../document_and_website_structure/index.html | 291 ++++++ .../getting_started/index.html | 772 ++++++++++++++++ .../html_text_fundamentals/index.html | 994 +++++++++++++++++++++ .../ru/learn/html/introduction_to_html/index.html | 67 ++ .../marking_up_a_letter/index.html | 101 +++ .../structuring_a_page_of_content/index.html | 101 +++ .../the_head_metadata_in_html/index.html | 300 +++++++ .../adding_vector_graphics_to_the_web/index.html | 351 ++++++++ .../images_in_html/index.html | 364 ++++++++ .../test_your_skills_colon__html_images/index.html | 74 ++ .../mozilla_splash_page/index.html | 106 +++ .../index.html" | 351 -------- .../index.html" | 106 --- .../index.html" | 364 -------- .../index.html" | 74 -- .../advanced_text_formatting/index.html" | 679 -------------- .../debugging_html/index.html" | 181 ---- .../html_text_fundamentals/index.html" | 994 --------------------- .../index.html" | 67 -- .../marking_up_a_letter/index.html" | 101 --- .../structuring_a_page_of_content/index.html" | 101 --- .../the_head_metadata_in_html/index.html" | 300 ------- .../index.html" | 772 ---------------- .../index.html" | 435 --------- .../index.html" | 291 ------ .../index.html" | 153 ---- 41 files changed, 5302 insertions(+), 9184 deletions(-) delete mode 100644 files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html delete mode 100644 files/ru/learn/html/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/ru/learn/html/forms/index.html delete mode 100644 files/ru/learn/html/forms/sending_forms_through_javascript/index.html delete mode 100644 files/ru/learn/html/forms/styling_html_forms/index.html delete mode 100644 "files/ru/learn/html/forms/\320\262\320\260\320\273\320\270\320\264\320\260\321\206\320\270\321\217_\321\204\320\276\321\200\320\274\321\213/index.html" delete mode 100644 "files/ru/learn/html/forms/\320\262\320\260\321\210\320\260_\320\277\320\265\321\200\320\262\320\260\321\217_html_\321\204\320\276\321\200\320\274\320\260/index.html" delete mode 100644 "files/ru/learn/html/forms/\320\276\321\202\320\277\321\200\320\260\320\262\320\272\320\260_\320\270_\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_\320\264\320\260\320\275\320\275\321\213\321\205_\321\204\320\276\321\200\320\274\321\213/index.html" delete mode 100644 "files/ru/learn/html/forms/\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\275\321\213\320\265_\320\262\320\270\320\264\320\266\320\265\321\202\321\213_\321\204\320\276\321\200\320\274/index.html" create mode 100644 files/ru/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/ru/learn/html/howto/index.html create mode 100644 files/ru/learn/html/howto/use_data_attributes/index.html create mode 100644 files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/ru/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/ru/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/ru/learn/html/introduction_to_html/index.html create mode 100644 files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html create mode 100644 files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html delete mode 100644 "files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html" delete mode 100644 "files/ru/learn/html/multimedia_and_embedding/\320\267\320\260\321\201\321\202\320\260\320\262\320\272\320\260_mozilla/index.html" delete mode 100644 "files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" delete mode 100644 "files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/advanced_text_formatting/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/debugging_html/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/html_text_fundamentals/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/marking_up_a_letter/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/the_head_metadata_in_html/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\320\275\320\260\321\207\320\260\320\273\320\276_\321\200\320\260\320\261\320\276\321\202\321\213/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\320\263\320\270\320\277\320\265\321\200\321\201\321\201\321\213\320\273\320\276\320\272/index.html" delete mode 100644 "files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\320\260_\320\270_\320\262\320\265\320\261-\321\201\320\260\320\271\321\202\320\260/index.html" delete mode 100644 "files/ru/learn/html/\321\200\320\265\321\206\320\265\320\277\321\202\321\213/index.html" (limited to 'files/ru/learn/html') diff --git a/files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html b/files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html deleted file mode 100644 index 8a4ca2d6b8..0000000000 --- a/files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html +++ /dev/null @@ -1,792 +0,0 @@ ---- -title: Как создавать пользовательские виджеты форм -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets -tags: - - HTML - - Web - - Пример - - Продвинутый - - Руководство - - Формы -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

Существует много случаев, когда возможностей стандартных виджетов HTML форм недостаточно. Если вы хотите придать лучший вид каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.

- -

В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмем пример: переделка элемента {{HTMLElement("select")}} .

- -
-

Замечание: Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код  универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.

-
- -

Дизайн, структура и семантика

- -

В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно четко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существущего виджета, состояния и реакции которго хорошо известны, так что вы сможете просто подражать им насколько это возможно.

- -

В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:

- -

The three states of a select box

- -

Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развернутое состояние (справа).

- -

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

- -
-
Виджет в нормальном состоянии когда:
-
-
    -
  • страница загружается
    • -
  • виджет был активным и пользователь кликает где-то вне виджета
    • -
  • виджет был активным и пользователь перемещает фокус на другой виджет при помощи клавиатуры
    • -
- -
-

Замечание: Перемещение фокуса по странице обычно осуществялется клавишей "tab", но не везде. Например в Safari циклический переход между ссылками на странице осуществляется по усмолчанию комбинацией Option+Tab.

-
-
-
Виджет в активном состоянии когда:
-
-
    -
  • пользователь кликает на него
    • -
  • пользователь нажимает клавишу Tab, и он получает фокус
    • -
  • виджет был в развернутом состоянии и позователь кликает на виджет.
    • -
-
-
Виджет в развернутом состоянии:
-
-
    -
  • виджет в любом другом состоянии и пользователь кликает на него
    • -
-
-
- -

Теперь, когда мы знаем, как изменяются состояния, важно определить, как изменить значение виджета:

- -
-
Значение изменяется когда:
-
-
    -
  • пользователь кликает на один-из-вариантов когда виджет в развернутом состоянии
    • -
  • пользователь нажимает клавиши стрелка вверх или вниз когда виджет в активном состоянии
    • -
-
-
- -

Наконец, давайте определим, как будут вести себя варианты виджета:

- - - -

Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдет если пользователь нажмет клавишу "tab" когда виджет в развернутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто опеределяет какими должны быть реакции виджета сами не реализуют их.

- -

Другой забавный пример: что произойдет, если пользователь нажмет клавишу вверх или вниз когда виджет находитися в развернутом состоянии? Это немного сложнее. Если вы предположите, что активное и развернутое состояние полностью различны, то ответом снова будет "ничего не произойдет" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развернутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развернутом состоянии (мы определили только то, что произойдет, когда виджет развернется, но ничего более).

- -

В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять ее, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет,  не стесняйтесь выполнять пользовательские тесты. Этот процесс называется UX Design (Дизайн взаимодействия с пользователем). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:

- - - -
-

Замечание:  Также, в большинстве систем, есть способ развернуть элемент {{HTMLElement("select")}} чтобы посмотреть все доступные варианты (это то-же что кликнуть мышью элемент {{HTMLElement("select")}} ).  Это возможно комбинацией Alt+Стрелка вниз для Windows и не реализовано в нашем примере —но это будет просто сделать, так как механизм уже реализован дл события click.

-
- -

Определение структуры и семантики HTML

- -

Теперь, когда основной функционал виджета определен, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:

- -
<!-- Это основной контейнер для нашего виджета.
-     Аттрибут tabindex позволяет пользователю переместить фокус на виджет.
-     Позже мы увидим, что лучше его установить через JavaScript. -->
-<div class="select" tabindex="0">
-
-  <!-- Этот контейнер послужит для отображения текущего значения виджета -->
-  <span class="value">Cherry</span>
-
-  <!-- Этот контейнер содержит все варинты. доступные для нашего виджета.
-       Так как это список, то есть смысл использовать элемент ul. -->
-  <ul class="optList">
-    <!-- Каждый вариант содержит то значение, которое будет отображено, позже мы увидим
-         как получить то значение, которое будет отппралено вместе с данными формы -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

Обратите внимание на использование имен классов: они описывают каждый соответствующий элемет независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придется жестко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.

- -

Создание внешнего вида с помощью CSS

- -

Теперь у нас есть структура и мы можем заняться дизайном нашего виджета. Весь смысл создания нашего собственного виджета в том, чтобы мы могли придать ему такой внешний вид, как мы захотим. Поэтому мы разделим нашу работу с CSS на две части: в первой части будут правила CSS абсолютно необходимые чтобы реакции нашего виджета были как у элемента {{HTMLElement("select")}} , а вторая чать будет состоять из красивеньких рюшечек, чтобы виджет выглядел так, как нам нравится.

- -

Обязательные стили

- -

Обязательные стили - это те, которые необходимы для обработки трех состояний нашего виджета..

- -
.select {
-  /* Это создаст контекст позиционирования для списка вариантов */
-  position: relative;
-
-  /* Это сделает наш виджет частью текстового потока и одновременно сделает его
-     изменяемого размера */
-  display : inline-block;
-}
- -

Еще нам нужен дополнительный класс active, чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль еще и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.

- -
.select .active,
-.select:focus {
-  outline: none;
-
-  /* Это свойство - box-shadow - необязательно, однако нам важно видеть активное состояние
-    т.к. мы используем его по умолчанию. Можете спокойно его переопределить. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Теперь давайте стилизуем список опций:

- -
/* Селектор .select здесь применен для удобства (синтаксический сахар), чтобы быть уверенными,
-   что определяемые классы находятся в нашем виджете. */
-.select .optList {
-/* Это позволит нам быть уверенными, что список вариантов будет показан ниже значения
-   и вне HTML потока */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

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

- -
.select .optList.hidden {
-  /* Это самый простой из доступных способов путь скрыть список,
-     а о доступности мы еще поговрим в конце */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Украшательства

- -

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

- -
.select {
-  /* Все размеры будут выражены в em по соображениям удобства
-     (чтобы быть уверенными, что виджет будет изменять размер если пользователь будет
-     использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчета что
-     1em == 16px что является умолчанием для большинства браузеров.
-     Если вы затрудняетесь с преобразованием px в em, попробуйте http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* это (10px) новый размер шрифта для нашего контекста для значения
-                            em в исходном контексте */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Нам нужно добавить дополнительное пространство для стрелки вниз */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* Первое объявление - для бразуеров не поддерживающих линейный градиент.
-     Второе объявление - потому что основанные на WebKit браузеры еще не избавились от префикса в нем.
-     Если вам нужна поддержка устаревших браузеров, попробуйте http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* Так как значение может быть шире, чем наш виджет, нужно быть уверенными, что оно не изменит
-     ширину виджета */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* И, если содержимое слишком длинное, лучше иметь красивенькие точечки. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

Нам не нужен дополнительный элемент, чтобы создать стрелку вниз; вместо этого мы используем псевдоэлемент {{cssxref(":after")}}. Также её можно создать при помощи простого фонового изображения в классе select.

- -
.select:after {
-  content : "▼"; /* Мы используем Unicode символ U+25BC; смотрите http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* Важно чтобы стрелка не перекрывала элементы списка */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

Далее стилизуем список вариантов:

- -
.select .optList {
-  z-index : 2; /* Мы явно сказали, что список вариантов всегда будет перекрывать стрелку вниз */
-
-  /* это сбросит значения стиля по умолчанию для элемента ul */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Это для того, чтобы убедиться что если значения будут короче виджета
-     то список вариантов останется таким же по размеру как и сам виджет */
-  min-width : 100%;
-
-  /* В случае, если список слишком длинный, его содержимое не будет помещаться по вертикали
-     (что автоматически добавит полосу прокрутки), но этого никогда не произойдет по горизонтали
-     (потому что мы не установили ширину и содержимое списка будет регулировать ее
-     автоматически. Если это будет невозможно - содержимое будет обрезано.) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

Для вариантов нам нужно добавить класс highlight чтобы сделать возможным индентифицировать значение которе пользователь выберет (или выбрал).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Итак, вот результат с нашими тремя состояниями:

- - - - - - - - - - - - - - - - - - - -
Основное состояниеАктивное состояниеРазвернутое состояние
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Посмотреть исходный код
- -

Оживи свой виджет с JavaScript

- -

Теперь, когда наш дизайн и структура готовы, мы можем написать код на JavaScript чтобы виджет действительно заработал.

- -
-

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

-
- -
-

Замечание: Создание многократно используемых виджетов может быть немного сложнее. W3C Web Component draft является одним из ответов на этот конкретный вопрос. The X-Tag project попытка реализовать эту спецификацию; пожалуйста, посмотрите этот проект.

-
- -

Почему он не работает?

- -

Прежде чем мы начнем, запомните одну важную вещь о JavaScript: в браузере это ненадежная технология. Когда вы создаете пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях  JavaScript невозможно запустить в браузере:

- - - -

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

- -

В нашем примере, если наш JavaScript код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.

- -

Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

Во-вторых нам нужно два новых класса, чтобы скрыть ненужные элементы (то есть  "настоящие" элементы {{HTMLElement("select")}}, если скрипт запустился, или наш пользовательский виджет, если скрипт не запустился). По умолчанию наш HTML код скрывает наш пользовательский виджет.

- -
.widget select,
-.no-widget .select {
-  /* Этот CSS селектор значит:
-     - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}}
-     - или мы не меняем класс body, тогда класс body остается в значении "no-widget",
-       и элементы, чей класс "select" будут скрыты */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Теперь нам нужен модуль JavaScript, чтобы определить, запущен скрипт или нет. Этот модуль очень простой: если наш скрипт запустится во время загрузки страницы, то он удалит класс класс no-widget и добавит класс widget, чем поменяет видимость элемента  {{HTMLElement("select")}} и нашего пользовательского виджета.

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Без JSС JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Посмотреть исходный код
- -
-

Замечание: Если вы действительно хотите сделать свой код универсальным и многоразовым, то вместо переключения классов гораздо лучше просто добавить класс элементам {{HTMLElement("select")}} чтобы их скрыть, и динамически добавлять дерево DOM представляющее пользовательский виджет после каждого элемента {{HTMLElement("select")}} на странице.

-
- -

Облегчение работы

- -

В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все еще есть нюансы с устраевшеними браузерами  (особенно со старым добрым Internet Explorer).

- -

Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как jQuery, $dom, prototype, Dojo, YUI, и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку yepnope).

- -

Мы планируем использовать следующие функции (от самых рискованных до самых безопасных):

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (This is not DOM but modern JavaScript)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Помимо доступности этих специфических функций, остается еще одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от Array. Это важно потому, что объекты  Array поддерживают функцию forEach, а {{domxref("NodeList")}} не поддерживает. Так как  {{domxref("NodeList")}} очень похож на Array и нам очень удобно использовать forEach, мы можем просто добавить forEach к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

Мы не шутили, когда сказали, что это легко сделать.

- -

Создание процедур обработки событий

- -

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

- -
// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован
-// Ей передается один параметр
-// select : DOM нода класса `select` который должен быть деактивирован
-function deactivateSelect(select) {
-
-  // Если виджет не активен, то и делать-то нечего
-  if (!select.classList.contains('active')) return;
-
-  // Получаем список опций для нашего виджета
-  var optList = select.querySelector('.optList');
-
-  // Закрываем список опций
-  optList.classList.add('hidden');
-
-  // и деактивируем сам виджет
-  select.classList.remove('active');
-}
-
-// Эта функция бедт вызываться какждый раз, когда пользователь захочет (де)активровать наш виджет
-// Ей передаются два параметра:
-// select : DOM нода класса `select` для активации
-// selectList : список всех DOM нод с классом `select`
-function activeSelect(select, selectList) {
-
-  // Если виджет активен, то и делать-то нечего
-  if (select.classList.contains('active')) return;
-
-  // Нам нужно отключить активное состояние всех наших виджетов
-  // Так как функция deactivateSelect соответствует всем требованиям
-  // функции forEach мы вызываем ее без использования промежуточной анонимной функции
-  selectList.forEach(deactivateSelect);
-
-  // А теперь мы возвращаем активное состояние нужного виджета
-  select.classList.add('active');
-}
-
-// Эта функция будет вызываться каждый раз, когда пользователь будет открывать/закрывать список вариантов
-// Ей передается один параметр:
-// select : DOM нода со списком для переключения состояния
-function toggleOptList(select) {
-
-  // Список хранится в виджете
-  var optList = select.querySelector('.optList');
-
-  // Мы меняем класс виджета чтобы показать/скрыть его
-  optList.classList.toggle('hidden');
-}
-
-// Эта функция будет вызываться каждый раз, когда нам нужно подсветить вариант
-// Ей передаются два параметра:
-// select : DOM нода класса `select` содержащая вариант для подсветки
-// option : DOM нода класса `option` для подсветки
-function highlightOption(select, option) {
-
-  // Мы получаем список всех вариантов доступных в нашем элементе
-  var optionList = select.querySelectorAll('.option');
-
-  // Мы удаляем подсветку всех вариантов
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // Подсвечиваем нужный вариант
-  option.classList.add('highlight');
-};
- -

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

- -

Далее мы связываем эти функции с соответствующими событиями:

- -
// Мы обрабатываем событие при загрузке документа.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Каждый наш собственный виджет должен быть проинициализирован
-  selectList.forEach(function (select) {
-
-    // также как и его элементы `option`
-    var optionList = select.querySelectorAll('.option');
-
-    // Когда пользователь проводит мышью над элементом `option`, мы подсвечиваем этот вариант
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Замечание: использование переменных `select` и `option`
-        // ограничено рамками нашей функции.
-        highlightOption(select, option);
-      });
-    });
-
-    // Когда позоватль кликает на наш виджет
-    select.addEventListener('click', function (event) {
-       // Замечание: использование переменной `select`
-       // ограничено рамками нашей функции.
-
-       // Мы переключаем видимость списка вариантов
-      toggleOptList(select);
-    });
-
-    // Когда виджет получает фокус
-    // Виджет получает фокус когда пользователь кликает на него
-    // или переходит на него клавишей табуляции
-    select.addEventListener('focus', function (event) {
-      // Замечание: использование переменных `select` и `selectList`
-      // ограничено рамками нашей функции.
-
-      // Мы активируем наш виджет
-      activeSelect(select, selectList);
-    });
-
-    // Когда виджет теряет фокус
-    select.addEventListener('blur', function (event) {
-      // Замечание: использование переменной `select`
-      // ограничено рамками нашей функции.
-
-      // Мы деактивируем виджет
-      deactivateSelect(select);
-    });
-  });
-});
- -

В этот момент наш виджет будет изменятт состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберемся дальше.

- - - - - - - - - - - - - - - -
Пример
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Посмотреть исходный код
- -

Обработка значения виджета

- -

Теперь, когда наш виджет работает, мы должны добавить код, чтобы обновить его значение в соответствии с выбором пользователя и сделать возможным отправку этого значения вместе с данными формы.

- -

Самый простой способ сделать это - использовать встроенный виджет который также есть в нашей форме. Такой виджет будет отслеживать значение со всеми встроенными элементами управления, предоставленными браузером, и значение будет отправлено, как обычно, при отправке формы. Нет смысла заново изобретать велосипед, когда все это уже сделано за нас.

- -

Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственнным виджетом:

- -
// Эта функция обновляет отображенное значение и синхронизирует его со стандартным виджетом
-// Ей передается два параметра:
-// select : DOM нода класса `select` содержащая значение которое будет обновлено
-// index  : индекс выбранного значения
-function updateValue(select, index) {
-  // Нам нужно получить стандартный виджет для данного пользовательского
-  // В нашем примере стандартный виджет является братом (sibling) пользовательского виджета
-  var nativeWidget = select.previousElementSibling;
-
-  // Нам также нужно получить значение заполнителя нашего пользовательского виджета
-  var value = select.querySelector('.value');
-
-  // И нам нужен весь список вариантов
-  var optionList = select.querySelectorAll('.option');
-
-  // Установим значение текущего номера выбранного элемента равным index
-  nativeWidget.selectedIndex = index;
-
-  // Соответственно установим значение заполнителя
-  value.innerHTML = optionList[index].innerHTML;
-
-  // И мы подсвечиваем соответствующий вариант нашего пользовательского виджета
-  highlightOption(select, optionList[index]);
-};
-
-// Эта функция возвращает текущий номер выбранного элемента в стандартном виджете
-// Ей передается один параметр:
-// select : DOM нода класса `select` соответствующая стандарному виджету
-function getIndex(select) {
-  // Нам нужно получить доступ к стандартному виджету соответствующему данному
-  // пользовательскому виджету
-  // В нашем примере стандартный виджет - брат (sibling) пользовательского виджета
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

Исползуя эти две функции мы можем связать стандартный виджет с пользовательским:

- -
// Мы обрабатываем привязку события при загрузке документа.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Каждый пользовательский виджет необходимсо инциализировать:
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // Мы делаем наш пользовательский виджет фокусируемым
-    select.tabIndex = 0;
-
-    // Мы делаем стандартный виджет более не фокусируемым
-    select.previousElementSibling.tabIndex = -1;
-
-    // Убеждаемся, что выбранное по умолчанию значение корректно отображено
-    updateValue(select, selectedIndex);
-
-    // Кажды раз когда пользователь кликает на вариант, мы соответсвенно обновляем значение
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Когда виджет находится в фокусе, с каждым нажатием на клаиатуре, мы соответственно
-    // обновляем  значение
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // Когда пользователь нажимает стрелку вниз, мы переходим на следующий вариант
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // Когда пользователь нажимает стрелку вверх, мы переходим на предыдущий вариант
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

В приведенном выше коде стоить отметить совйство tabIndex. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.

- -

С этим мы закончили! Вот результат:

- - - - - - - - - - - - - - - -
Пример
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Посмотреть исходный код
- -

Но секундочку, мы точно закончили?

- -

Делаем доступным

- -

Мы создали нечто работающее, и, хотя это далеко от полнофункционального селектбокса, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглыдит как селектбокс, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это селектбокс. Короче говоря, этот хорошенький селектбокс не является доступным для людей с ограниченными возможностями!

- -

К счастью существует решение, и оно называется ARIA. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой W3C спецификацию специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретенный элемент выглядит как будто он был тем стандартным, за которого он себя выдает. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.

- -

Аттрибут role

- -

Ключевой аттрибут используемый в ARIA - это role. Аттрибут role принимает значение, определяющее для чего используется элемент. Каждая роль определяет свои собственные требования и поведение. В нашем примере мы используем роль listbox. Это "составная роль" ("composite role"), т.е. элементы такой роли имеют потомков, у каждого из которых есть отдельная роль (в данном случае, как минимум один дочерний элемент с ролью option).

- -

Стоит также отметить что ARIA определяет роли, которые по умолчанию применяются к стандартной разметке HTML. Например, элемент {{HTMLElement("table")}} соответствует роли grid, а элемент {{HTMLElement("ul")}} соответствует роли list. Так как мы используем элемент {{HTMLElement("ul")}}, то нам необходимо убедиться что роль listbox нашего виджета заменит роль list элемента {{HTMLElement("ul")}}. С этой целью, мы будем использовать роль presentation. Эта роль разработана чтобы можно было отметить, что элемент не имеет особого значения, а используется исключительно чтобы представить информацию. Мы применим его к нашему элемету {{HTMLElement("ul")}}.

- -

Чтобы ввести роль listbox нам нужно просто внести следующие изменения в HTML:

- -
<!-- Мы добавили аттрибут role="listbox" в наш элемент верхнего уровня -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- Также мы добавили аттрибут role="presentation" в элемент ul -->
-  <ul class="optList" role="presentation">
-    <!-- И мы добавили аттрибут role="option" во все элементы li -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Замечание: Включение как атрибута role так и атрибута class необходимо только если вы хотите обеспечить поддержку устаревших браузеров, которые не поддерживают  селекторы атрибутов CSS.

-
- -

Атрибут aria-selected 

- -

Использовать только аттрибут role недостаточно. ARIA также предоставляет множество атрибутов состояний и свойств. Чем больше и уместнее вы их используете, тем ваш виджет будет более понятен для вспомогательных технологий. В нашем случае мы ограничимся использованием одного аттрибута: aria-selected.

- -

Атрибут aria-selected используется для отметки текущего выбранного варианта; это позволяет ассистивным технологиям информировать пользователя о текущем выборе. Мы будем используя JavaScript динамически отмечать выбранный вариант каждый раз, когда пользователь его выбирает. С этой целью нам нужно пересмотреть нашу функцию updateValue():

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // Мы уверены что все варианты не выбраны
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // Мы уверены что выбранный вариант отмечен
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Вот окончательный результат всех этих изменений (вы сможете это лучше прочувствовать если испробуете это со вспомогательными технологиями, такими как NVDA или VoiceOver):

- - - - - - - - - - - - - - - -
Пример
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Посмотреть исходный код
- -

Заключение

- -

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

- -

Вот несколько библиотек, которые вам стоит рассмотреть перед тем как создавать собственную:

- - - -

Если вы хотите двигаться далее, то код в этом примере нуждается в некоторм улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья соместимость с  Web стандартами  очень отличается. Повеселись!

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

В этом модуле

- - diff --git a/files/ru/learn/html/forms/how_to_structure_an_html_form/index.html b/files/ru/learn/html/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index 741d773dba..0000000000 --- a/files/ru/learn/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Как структурировать HTML-формы -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form -tags: - - HTML-форма - - Веб-форма - - Изучение - - Новичок - - Структурирование - - Форма -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}
- -

Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.

- - - - - - - - - - - - -
Уровень подготовки:Основы компьютерной грамотности, и базовые знания HTML.
Цель:Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.
- -

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

- -

Элемент <form>

- -

Элемент {{HTMLElement("form")}} формально определяет форму и атрибуты, которые определяют поведение этой формы. Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента {{HTMLElement("form")}}, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы {{HTMLElement("form")}} и реализовывать специальные хуки, чтобы их было проще использовать.

- -

Мы уже встречались с этим в предыдущей статье.

- -
-

Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера. 

-
- -

Стоит учесть, что всегда можно использовать элементы формы вне {{HTMLElement("form")}}. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью аттрибута form. В HTML5 был представлен аттрибут form для элементов HTML форм, который позволяет  явно связать элемент с формой, даже если он не заключён внутри {{ HTMLElement("form") }}.

- -

Элементы <fieldset> и <legend>

- -

Элемент {{HTMLElement("fieldset")}} - это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок {{HTMLElement("fieldset")}}, добавив элемент {{HTMLElement("legend")}} сразу после открывающего тега {{HTMLElement("fieldset")}}. Текст элемента {{HTMLElement("legend")}} формально описывает назначение содержимого {{HTMLElement("fieldset")}}.

- -

Различные вспомогательные технологии будут использовать {{HTMLElement("legend")}} как часть метки label всех элементов внутри {{HTMLElement("fieldset")}}. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы {{HTMLElement("legend")}} перед произношением названия меток элементов.

- -

Небольшой пример:

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -
-

Примечание: Вы можете найти этот пример в fieldset-legend.html (также посмотрите на результат).

-
- -

Читая эту форму, экранный диктор произнесёт "Fruit juice size small" для первого элемента, "Fruit juice size medium" - для второго, "Fruit juice size large" - для третьего.

- -

Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри {{HTMLElement("fieldset")}}. Также {{HTMLElement("fieldset")}} можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные {{HTMLElement("fieldset")}} может повысить удобство использования.

- -

Из-за своего влияния на вспомогательные технологии элемент {{HTMLElement("fieldset")}} является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как экранный диктор интерпретирует вашу форму. 

- -

Элемент <label>

- -

В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предущей статьи:

- -
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
- -

При правильно связанном элементе <label> с элементом <input> через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтет вслух что-то наподобие "Name, edit text".

- -

Если <label> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несет в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

- -

Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:

- -
<label for="name">
-  Name: <input type="text" id="name" name="user_name">
-</label>
- -

Однако даже в таких случаях лучшей всё равно указывать атрибут for, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.

- -

Лейблы тоже кликабельны!

- -

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

- -

Например:

- -
<form>
-  <p>
-    <label for="taste_1">I like cherry</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">I like banana</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
- -
-

Примечание: Вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).

-
- -

Несколько лейблов

- -

На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры. Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента {{htmlelement("label")}}. 

- -

Рассмотрим этот пример:

- -
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
-
-<!-- Тогда это: -->
-<div>
-  <label for="username">Name:</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!-- лучше сделать таким образом: -->
-<div>
-  <label for="username">
-    <span>Name:</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!-- Но этот вариант лучше всего: -->
-<div>
-  <label for="username">Name: <abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

{{EmbedLiveSample("Multiple_labels", 120, 120)}}

- -

Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдет требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.

- - - -
-

Примечение: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведет себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

-
- -
-

Примечание: Вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

-
- -

Частоиспользуемые с формами HTML-структуры

- -

Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.

- -

Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент {{HTMLElement("div")}} — это общепринятая практика. Элемент {{HTMLElement("p")}} также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).

- -

В добавок к элементу {{HTMLElement("fieldset")}} часто используют HTML-заголовки (например, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}) и секционирование (например, {{HTMLElement("section")}}) для стуктурирования сложных форм.

- -

Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.

- -

Каждый отдельный раздел функциональности содержится в элементах {{HTMLElement ("section")}} и {{HTMLElement ("fieldset")}}, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе {{HTMLElement ("section")}} с элементами {{HTMLElement ("fieldset")}}, содержащими переключатели.

- -

Активное обучение: построение структуры формы

- -

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами). А пока внимательно прочитайте описание, следуя приведенным ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

- -
    -
  1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
    2. -
  2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-елемента {{htmlelement("head")}}: - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}: - 
    <form>
-
-</form>
    -
    4. -
  4. Внутри тега <form>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения: - 
    <h1>Payment form</h1>
-<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент {{htmlelement("section")}}. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка ({{htmlelement("li")}}). Наконец, у нас есть два текстовых поля {{htmlelement("input")}} и связанные с ними элементы {{htmlelement("label")}}, которые находятся внутри элементов {{htmlelement("p")}}, а также поле для ввода пароля. Добавьте этот код в вашу форму: - 
    <section>
-    <h2>Contact information</h2>
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="M." >
-              Mister
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Ms.">
-              Miss
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Password: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. Сейчас мы перейдём к второму разделу <section> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types.
    -
    - Вставьте следующий код под предыдущим разделом: - 
    <section>
-    <h2>Payment information</h2>
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="number" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formatted as mm/yy</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент {{htmlelement("button")}} с типом submit, для отправки данных. Добавьте этот код в конец вашей формы: - 
    <p> <button type="submit">Validate the payment</button> </p>
    -
    8. -
- -

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

Протестируйте себя!

- -

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure.

- -

Заключение

- -

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

- -

Смотрите также

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}

- -

В этом разделе

- - - -

Дополнительные темы

- - diff --git a/files/ru/learn/html/forms/index.html b/files/ru/learn/html/forms/index.html deleted file mode 100644 index 02e36df560..0000000000 --- a/files/ru/learn/html/forms/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Руководство по HTML-формам -slug: Learn/HTML/Forms -tags: - - HTML - - Web - - Начинающие - - Руководство - - Формы -translation_of: Learn/Forms ---- -

{{LearnSidebar}}

- -

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

- -

Необходимые условия

- -

Перед началом этого модуля вам следует изучить хотя бы Введение в HTML. На данный момент у вас не должно возникнуть сложностей с пониманием Основных руководств и использованием нашего руководства по Стандартным виджетам форм.

- -

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

- -
-

Примечание:Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

-
- -

 Основные руководства

- -
-
Ваша первая HTML-форма
-
Первая статья в серии дает вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.
-
Как структурировать HTML-форму
-
Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.
-
- -

Какие виджеты форм доступны?

- -
-
Стандартные виджеты форм
-
Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.
-
- -

Валидация и подтверждение данных форм

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

 Продвинутые руководства

- -
-
Как создавать собственные виджеты форм
-
В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функционала. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье(с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.
-
Отправка форм при помощи JavaScript
-
В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).
-
HTML-формы в старых браузерах
-
Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)
-
- -

Руководства по стилизации форм

- -
-
Стилизация HTML-форм
-
Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.
-
Продвинутая стилизация HTML-форм
-
В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.
-
Таблица совместимости свойств для виджетов форм
-
Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.
-
- -

Смотри также

- - diff --git a/files/ru/learn/html/forms/sending_forms_through_javascript/index.html b/files/ru/learn/html/forms/sending_forms_through_javascript/index.html deleted file mode 100644 index d98ccea1ac..0000000000 --- a/files/ru/learn/html/forms/sending_forms_through_javascript/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Отправка форм при помощи JavaScript -slug: Learn/HTML/Forms/Sending_forms_through_JavaScript -translation_of: Learn/Forms/Sending_forms_through_JavaScript ---- -
{{LearnSidebar}}
- -

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

- -

Формы не всегда формы

- -

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

- -

Получение контроля над глобальным интерфейсом

- -

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

- -

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

- -

Асинхронная отправка произвольных данных обычно называется AJAX, что означает "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML).

- -

Чем он отличается?

- -

Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки XML в качестве формата обмена, который со временем был заменен на JSON. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (application/x-www-form-urlencoded) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в multipart/form-data.

- -
-

Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновленная версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидете в этой статье можно заменить на Fetch.

-
- -

Если вы управляете фронтендом (кодом, который выполняется в браузере) и бкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.

- -

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

- -

Так как нам следует отправлять подобные данные? Ниже обписаны различные необходимые вам техники.

- -

Отправка данных формы

- -

Есть три способа отправки данных формы:

- - - -

Давайте рассмотрим их подробнее:

- -

Создание  XMLHttpRequest вручную

- -

{{domxref("XMLHttpRequest")}} это самый безопасный и надежный способ создавать HTTPзапросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.

- -

Посмотрите на пример:

- -
<button>Click Me!</button>
- -

И на JavaScript:

- -
const btn = document.querySelector('button');
-
-function sendData( data ) {
-  console.log( 'Sending data' );
-
-  const XHR = new XMLHttpRequest();
-
-  let urlEncodedData = "",
-      urlEncodedDataPairs = [],
-      name;
-
-  // Turn the data object into an array of URL-encoded key/value pairs.
-  for( name in data ) {
-    urlEncodedDataPairs.push( encodeURIComponent( name ) + '=' + encodeURIComponent( data[name] ) );
-  }
-
-  // Combine the pairs into a single string and replace all %-encoded spaces to
-  // the '+' character; matches the behaviour of browser form submissions.
-  urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' );
-
-  // Define what happens on successful data submission
-  XHR.addEventListener( 'load', function(event) {
-    alert( 'Yeah! Data sent and response loaded.' );
-  } );
-
-  // Define what happens in case of error
-  XHR.addEventListener( 'error', function(event) {
-    alert( 'Oops! Something went wrong.' );
-  } );
-
-  // Set up our request
-  XHR.open( 'POST', 'https://example.com/cors.php' );
-
-  // Add the required HTTP header for form data POST requests
-  XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
-
-  // Finally, send our data.
-  XHR.send( urlEncodedData );
-}
-
-btn.addEventListener( 'click', function() {
-  sendData( {test:'ok'} );
-} )
-
- -

Это результат:

- -

{{EmbedLiveSample("Building_an_XMLHttpRequest_manually", "100%", 50)}}

- -
-

Note: This use of {{domxref("XMLHttpRequest")}} is subject to the {{glossary('same-origin policy')}} if you want to send data to a third party web site. For cross-origin requests, you'll need CORS and HTTP access control.

-
- -

Using XMLHttpRequest and the FormData object

- -

Building an HTTP request by hand can be overwhelming. Fortunately, the XMLHttpRequest specification provides a newer, simpler way to handle form data requests with the {{domxref("XMLHttpRequest/FormData","FormData")}} object.

- -

The {{domxref("XMLHttpRequest/FormData","FormData")}} object can be used to build form data for transmission, or to get the data within a form element to manage how it's sent. Note that {{domxref("XMLHttpRequest/FormData","FormData")}} objects are "write only", which means you can change them, but not retrieve their contents.

- -

Using this object is detailed in Using FormData Objects, but here are two examples:

- -

Using a standalone FormData object

- -
<button>Click Me!</button>
- -

You should be familiar with that HTML sample. Now for the JavaScript:

- -
const btn = document.querySelector('button');
-
-function sendData( data ) {
-  const XHR = new XMLHttpRequest(),
-        FD  = new FormData();
-
-  // Push our data into our FormData object
-  for( name in data ) {
-    FD.append( name, data[ name ] );
-  }
-
-  // Define what happens on successful data submission
-  XHR.addEventListener( 'load', function( event ) {
-    alert( 'Yeah! Data sent and response loaded.' );
-  } );
-
-  // Define what happens in case of error
-  XHR.addEventListener(' error', function( event ) {
-    alert( 'Oops! Something went wrong.' );
-  } );
-
-  // Set up our request
-  XHR.open( 'POST', 'https://example.com/cors.php' );
-
-  // Send our FormData object; HTTP headers are set automatically
-  XHR.send( FD );
-}
-
-btn.addEventListener( 'click', function()
-  { sendData( {test:'ok'} );
-} )
- -

Here's the live result:

- -

{{EmbedLiveSample("Using_a_standalone_FormData_object", "100%", 50)}}

- -

Using FormData bound to a form element

- -

You can also bind a FormData object to an {{HTMLElement("form")}} element. This creates a FormData object that represents the data contained in the form.

- -

The HTML is typical:

- -
<form id="myForm">
-  <label for="myName">Send me your name:</label>
-  <input id="myName" name="name" value="John">
-  <input type="submit" value="Send Me!">
-</form>
- -

But JavaScript takes over the form:

- -
window.addEventListener( "load", function () {
-  function sendData() {
-    const XHR = new XMLHttpRequest();
-
-    // Bind the FormData object and the form element
-    const FD = new FormData( form );
-
-    // Define what happens on successful data submission
-    XHR.addEventListener( "load", function(event) {
-      alert( event.target.responseText );
-    } );
-
-    // Define what happens in case of error
-    XHR.addEventListener( "error", function( event ) {
-      alert( 'Oops! Something went wrong.' );
-    } );
-
-    // Set up our request
-    XHR.open( "POST", "https://example.com/cors.php" );
-
-    // The data sent is what the user provided in the form
-    XHR.send( FD );
-  }
-
-  // Access the form element...
-  const form = document.getElementById( "myForm" );
-
-  // ...and take over its submit event.
-  form.addEventListener( "submit", function ( event ) {
-    event.preventDefault();
-
-    sendData();
-  } );
-} );
- -

Here's the live result:

- -

{{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}}

- -

You can even get more involved with the process by using the form's {{domxref("HTMLFormElement.elements", "elements")}} property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.

- -

Dealing with binary data

- -

If you use a {{domxref("XMLHttpRequest/FormData","FormData")}} object with a form that includes <input type="file"> widgets, the data will be processed automatically. But to send binary data by hand, there's extra work to do.

- -

There are many sources for binary data, including {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement","Canvas")}}, and WebRTC. Unfortunately, some legacy browsers can't access binary data or require complicated workarounds. To learn more about the FileReader API, see Using files from web applications.

- -

The least complicated way of sending binary data is by using {{domxref("XMLHttpRequest/FormData","FormData")}}'s append() method, demonstrated above. If you have to do it by hand, it's trickier.

- -

In the following example, we use the {{domxref("FileReader")}} API to access binary data and then build the multi-part form data request by hand:

- -
<form id="theForm">
-  <p>
-    <label for="theText">text data:</label>
-    <input id="theText" name="myText" value="Some text data" type="text">
-  </p>
-  <p>
-    <label for="theFile">file data:</label>
-    <input id="theFile" name="myFile" type="file">
-  </p>
-  <button>Send Me!</button>
-</form>
- -

As you see, the HTML is a standard <form>. There's nothing magical going on. The "magic" is in the JavaScript:

- -
// Because we want to access DOM nodes,
-// we initialize our script at page load.
-window.addEventListener( 'load', function () {
-
-  // These variables are used to store the form data
-  const text = document.getElementById( "theText" );
-  const file = {
-        dom    : document.getElementById( "theFile" ),
-        binary : null
-      };
-
-  // Use the FileReader API to access file content
-  const reader = new FileReader();
-
-  // Because FileReader is asynchronous, store its
-  // result when it finishes to read the file
-  reader.addEventListener( "load", function () {
-    file.binary = reader.result;
-  } );
-
-  // At page load, if a file is already selected, read it.
-  if( file.dom.files[0] ) {
-    reader.readAsBinaryString( file.dom.files[0] );
-  }
-
-  // If not, read the file once the user selects it.
-  file.dom.addEventListener( "change", function () {
-    if( reader.readyState === FileReader.LOADING ) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString( file.dom.files[0] );
-  } );
-
-  // sendData is our main function
-  function sendData() {
-    // If there is a selected file, wait it is read
-    // If there is not, delay the execution of the function
-    if( !file.binary && file.dom.files.length > 0 ) {
-      setTimeout( sendData, 10 );
-      return;
-    }
-
-    // To construct our multipart form data request,
-    // We need an XMLHttpRequest instance
-    const XHR = new XMLHttpRequest();
-
-    // We need a separator to define each part of the request
-    const boundary = "blob";
-
-    // Store our body request in a string.
-    let data = "";
-
-    // So, if the user has selected a file
-    if ( file.dom.files[0] ) {
-      // Start a new part in our body's request
-      data += "--" + boundary + "\r\n";
-
-      // Describe it as form data
-      data += 'content-disposition: form-data; '
-      // Define the name of the form data
-            + 'name="'         + file.dom.name          + '"; '
-      // Provide the real name of the file
-            + 'filename="'     + file.dom.files[0].name + '"\r\n';
-      // And the MIME type of the file
-      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
-
-      // There's a blank line between the metadata and the data
-      data += '\r\n';
-
-      // Append the binary data to our body's request
-      data += file.binary + '\r\n';
-    }
-
-    // Text data is simpler
-    // Start a new part in our body's request
-    data += "--" + boundary + "\r\n";
-
-    // Say it's form data, and name it
-    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
-    // There's a blank line between the metadata and the data
-    data += '\r\n';
-
-    // Append the text data to our body's request
-    data += text.value + "\r\n";
-
-    // Once we are done, "close" the body's request
-    data += "--" + boundary + "--";
-
-    // Define what happens on successful data submission
-    XHR.addEventListener( 'load', function( event ) {
-      alert( 'Yeah! Data sent and response loaded.' );
-    } );
-
-    // Define what happens in case of error
-    XHR.addEventListener( 'error', function( event ) {
-      alert( 'Oops! Something went wrong.' );
-    } );
-
-    // Set up our request
-    XHR.open( 'POST', 'https://example.com/cors.php' );
-
-    // Add the required HTTP header to handle a multipart form data POST request
-    XHR.setRequestHeader( 'Content-Type','multipart/form-data; boundary=' + boundary );
-
-    // And finally, send our data.
-    XHR.send( data );
-  }
-
-  // Access our form...
-  const form = document.getElementById( "theForm" );
-
-  // ...to take over the submit event
-  form.addEventListener( 'submit', function ( event ) {
-    event.preventDefault();
-    sendData();
-  } );
-} );
- -

Here's the live result:

- -

{{EmbedLiveSample("Dealing_with_binary_data", "100%", 150)}}

- -

Conclusion

- -

Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The {{domxref("XMLHttpRequest/FormData","FormData")}} object is generally the answer, and you can use a polyfill for it on legacy browsers.

- -

See also

- -

Learning path

- - - -

Advanced Topics

- - diff --git a/files/ru/learn/html/forms/styling_html_forms/index.html b/files/ru/learn/html/forms/styling_html_forms/index.html deleted file mode 100644 index f8cc1644dc..0000000000 --- a/files/ru/learn/html/forms/styling_html_forms/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Стили HTML форм -slug: Learn/HTML/Forms/Styling_HTML_forms -translation_of: Learn/Forms/Styling_web_forms ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

- -

В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!

- -

Почему так сложно стилизовать виджеты форм с помощью CSS?

- -

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

- -

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

- -

Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все еще чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.

- -

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

- -

Не все виджеты созданы равными, когда задействован CSS

- -

В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:

- -

Хорошая

- -

Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}}
    3. -
  3. {{HTMLElement("label")}}
    4. -
  4. {{HTMLElement("output")}}
    5. -
- -

Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.

- -

Плохая

- -

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

- -

Они включают в себя элемент {{HTMLElement ("legend")}}, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент {{htmlattrxref ("placeholder", "input")}} не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.

- -

Мы опишем, как обрабатывать эти более конкретные случаи, в статье «Расширенные стили для HTML-форм».

- -

The ugly

- -

Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}} elements. The file picker widget is also known not to be stylable at all. The new {{HTMLElement("progress")}} and {{HTMLElement("meter")}} elements also fall in this category.

- -

The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you'll be able to style. We explore how to do this in the article How to build custom form widgets.

- -

Basic styling

- -

To style elements that are easy to style with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.

- -

Search fields

- -

Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you'll have to tweak it with the -webkit-appearance proprietary property. We discuss this property further in the article: Advanced styling for HTML forms.

- -

Example

- -
<form>
-  <input type="search">
-</form>
-
- -
input[type=search] {
-  border: 1px dotted #999;
-  border-radius: 0;
-
-  -webkit-appearance: none;
-}
- -

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

- -

As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the -webkit-appearance property, whereas the second is rendered using -webkit-appearance:none. This difference is noticeable.

- -

Fonts and text

- -

CSS font and text features can be used easily with any widget (and yes, you can use {{cssxref("@font-face")}} with form widgets). However, browsers' behaviors are often inconsistent. By default, some widgets do not inherit {{cssxref("font-family")}} and {{cssxref("font-size")}} from their parents. Many browsers use the system default appearance instead. To make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet:

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform's default font style in use. On the right are the same elements, with our font harmonization style rules applied.

- -

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

- -

There's a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.

- -

Box model

- -

All text fields have complete support for every property related to the CSS box model ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and {{cssxref("border")}}). As before, however, browsers rely on the system default styles when displaying these widgets. It's up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size.

- -

This is because each widget has their own rules for border, padding and margin. So if you want to give the same size to several different widgets, you have to use the {{cssxref("box-sizing")}} property:

- -
input, textarea, select, button {
-  width : 150px;
-  margin: 0;
-
-  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
-          box-sizing: border-box;
-}
- -

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

- -

In the screenshot above, the left column is built without {{cssxref("box-sizing")}}, while the right column uses this property with the value border-box. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget.

- -

Positioning

- -

Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:

- -

legend

- -

The {{HTMLElement("legend")}} element is okay to style, except for positioning. In every browser, the {{HTMLElement("legend")}} element is positioned on top of the top border of its {{HTMLElement("fieldset")}} parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the {{cssxref("position")}} property. But otherwise it is part of the fieldset border.

- -

Because the {{HTMLElement("legend")}} element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it's quite often paired with a title, and then hidden in an accessible way. For example:

- -
HTML
- -
<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
- -
CSS
- -
legend {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
- -

textarea

- -

By default, all browsers consider the {{HTMLElement("textarea")}} element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from inline-block to block, it's pretty easy to use the {{cssxref("display")}} property. But if you want to use it inline, it's common to change the vertical alignment:

- -
textarea {
-  vertical-align: top;
-}
- -

Example

- -

Let's look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following "postcard" contact form:

- -

This is what we want to achieve with HTML and CSS

- -

If you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below instructions.

- -

The HTML

- -

The HTML is only slightly more involved than the example we used in the first article of this guide; it just has a few extra IDs and a title.

- -
<form>
-  <h1>to: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">from:</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">reply:</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Your message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
- -

Add the above code into the body of your HTML.

- -

Organizing your assets

- -

This is where the fun begins! Before we start coding, we need three additional assets:

- -
    -
  1. The postcard background — download this image and save it in the same directory as your working HTML file.
    2. -
  2. A typewriter font: The "Secret Typewriter" font from fontsquirrel.com — download the TTF file into the same directory as above.
    3. -
  3. A handdrawn font: The "Journal" font from fontsquirrel.com — download the TTF file into the same directory as above.
    4. -
- -

Your fonts need some more processing before you start:

- -
    -
  1. Go to the fontsquirrel Webfont Generator.
    2. -
  2. Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.
    3. -
  3. Unzip the provided zip file.
    4. -
  4. Inside the unzipped contents you will find two .woff files and two .woff2 files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our Web fonts article for a lot more information.
    5. -
- -

The CSS

- -

Now we can dig into the CSS for the example. Add all the code blocks shown below inside the {{htmlelement("style")}} element, one after another.

- -

First, we prepare the ground by defining our {{cssxref("@font-face")}} rules, all the basics on the {{HTMLElement("body")}} element, and the {{HTMLElement("form")}} element:

- -
@font-face {
-    font-family: 'handwriting';
-    src: url('fonts/journal-webfont.woff2') format('woff2'),
-         url('fonts/journal-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'typewriter';
-    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
-         url('fonts/veteran_typewriter-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-body {
-  font  : 21px sans-serif;
-
-  padding : 2em;
-  margin  : 0;
-
-  background : #222;
-}
-
-form {
-  position: relative;
-
-  width  : 740px;
-  height : 498px;
-  margin : 0 auto;
-
-  background: #FFF url(background.jpg);
-}
- -

Now we can position our elements, including the title and all the form elements:

- -
h1 {
-  position : absolute;
-  left : 415px;
-  top  : 185px;
-
-  font : 1em "typewriter", sans-serif;
-}
-
-#from {
-  position: absolute;
-  left : 398px;
-  top  : 235px;
-}
-
-#reply {
-  position: absolute;
-  left : 390px;
-  top  : 285px;
-}
-
-#message {
-  position: absolute;
-  left : 20px;
-  top  : 70px;
-}
- -

That's where we start working on the form elements themselves. First, let's ensure that the {{HTMLElement("label")}}s are given the right font:

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

The text fields require some common rules. Simply put, we remove their {{cssxref("border","borders")}} and {{cssxref("background","backgrounds")}}, and redefine their {{cssxref("padding")}} and {{cssxref("margin")}}:

- -
input, textarea {
-  font    : .9em/1.5em "handwriting", sans-serif;
-
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 240px;
-
-  background: none;
-}
- -

When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it's important to add the {{cssxref("outline")}} property, in order to remove the default focus highlight added by some browsers:

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-  outline      : none;
-}
- -

Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.

- -

The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:

- -
input {
-    height: 2.5em; /* for IE */
-    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
-}
- -

{{HTMLElement("textarea")}} elements default to being rendered as a block element. The two important things here are the {{cssxref("resize")}} and {{cssxref("overflow")}} properties. Because our design is a fixed-size design, we will use the resize property to prevent users from resizing our multi-line text field. The {{cssxref("overflow")}} property is used to make the field render more consistently across browsers. Some browsers default to the value auto, while some default to the value scroll. In our case, it's better to be sure every one will use auto:

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 340px;
-  height  : 360px;
-
-  resize  : none;
-  overflow: auto;
-}
- -

The {{HTMLElement("button")}} element is really convenient with CSS; you can do whatever you want, even using pseudo-elements:

- -
button {
-  position     : absolute;
-  left         : 440px;
-  top          : 360px;
-
-  padding      : 5px;
-
-  font         : bold .6em sans-serif;
-  border       : 2px solid #333;
-  border-radius: 5px;
-  background   : none;
-
-  cursor       : pointer;
-
--webkit-transform: rotate(-1.5deg);
-   -moz-transform: rotate(-1.5deg);
-    -ms-transform: rotate(-1.5deg);
-     -o-transform: rotate(-1.5deg);
-        transform: rotate(-1.5deg);
-}
-
-button:after {
-  content: " >>>";
-}
-
-button:hover,
-button:focus {
-  outline   : none;
-  background: #000;
-  color   : #FFF;
-}
- -

And voila!

- -
-

Note: If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it running live (also see the source code).

-
- -

Conclusion

- -

As you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of the normalize.css project.

- -

In the next article, we will see how to handle form widgets which fall in the "bad" and "ugly" categories.

- -

{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git "a/files/ru/learn/html/forms/\320\262\320\260\320\273\320\270\320\264\320\260\321\206\320\270\321\217_\321\204\320\276\321\200\320\274\321\213/index.html" "b/files/ru/learn/html/forms/\320\262\320\260\320\273\320\270\320\264\320\260\321\206\320\270\321\217_\321\204\320\276\321\200\320\274\321\213/index.html" deleted file mode 100644 index f2c5f362ac..0000000000 --- "a/files/ru/learn/html/forms/\320\262\320\260\320\273\320\270\320\264\320\260\321\206\320\270\321\217_\321\204\320\276\321\200\320\274\321\213/index.html" +++ /dev/null @@ -1,906 +0,0 @@ ---- -title: Проверка данных формы (проверка валидности формы на стороне клиента) -slug: Learn/HTML/Forms/Валидация_формы -translation_of: Learn/Forms/Form_validation ---- -

- -

- -
-
-
- -
-
- -
-
- -
-
-
<
- -
-
- -
<
-
-
-
- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}
- -

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

- - - - - - - - - - - - -
Предпосылки:Компьютерная грамотность, разумное понимание HTML, CSS, и JavaScript.
Задача:Понимать что такое проверка формы (валидация) формы, почему это важно и как это реализовать.
- -

Что такое валидация формы?

- -

Откройте любой популярный сайт с формой регистрации и вы заметите, что они дают вам обратную связь, когда вы вводите ваши данные не в том формате, который они ожидают от вас. Вы получите подобные сообщения:

- - - -

Это называется валидация формы — когда вы вводите данные,  веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет -  оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.

- -

Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:

- - - -

Различные типы валидации формы

- -

Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:

- - - -

В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.

- -

Использование встроенной проверки формы

- -

Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью атрибутов проверки элементов формы, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то еще, и шаблон, которому это должно соответствовать. Если введенные данные соответствуют всем этим правилам, данные считаются валидными; если нет -  невалидными.

- -

Когда элемент валидный, следующие утверждения верны:

- - - -

Когда элемент невалидный, следующие утверждения верны:

- - - -
-

Note: Вот несколько ошибок, которые не позволяют форме быть подтверждённой: {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} or {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, or a {{domxref('validityState.customError','customError')}}.

-
- -

Примеры встроенных форм валидации

- -

Ограничения проверки элементов input - простое начало

- -

В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки {{HTMLElement("input")}} элементов.

- -

Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub fruit-start.html,и живой пример ниже:

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like">
-  <button>Submit</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
-
- -

{{EmbedLiveSample("Simple_start_file", "100%", 80)}}

- -

Для начала сделаем копию fruit-start.htmlв новом каталоге на жестком диске.

- -

Требуемый атрибут (required)

- -

Простейшей функцией проверки HTML5 для использования является  {{htmlattrxref("required", "input")}} атрибут. Если вы хотите сделать ввод обязательным, вы можете пометить элемент, используя этот атрибут. Если этот атрибут установлен, форма не будет отправляться (и будет отображаться сообщение об ошибке), когда поле пустое (поле input также будет считаться невалидным).

- -

Добавьте атрибут required в ваш input, как показано ниже:

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Также обратите внимание на CSS, включенный в файл примера:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:required {
-  background-image: linear-gradient(to right, pink, lightgreen);
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая черная граница, когда он валидный. Попробуйте новое поведение в приведенном ниже примере:

- -

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

- -
-

Note: Вы можете найти этот пример на GitHub как fruit-validation.html (также смотрите source code.)

-
- -

Попробуйте эту форму без значения. Обратите внимание как невалидный ввод получает фокус, сообщение об ошибке ("Пожалуйста заполните поле") появляется, и форма не отправляется.

- -

Проверка с регулярными выражениями

- -

Другая полезная функция проверки - это pattern атрибут , который ожидает Regular Expression в качестве значения. Регулярное выражение (regex) - это шаблон который используется для проверки соответствия символов в текстовых строках, поэтому он идеально подходит для проверки формы, а также для многих других целей в JavaScript.

- -

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

- - - -

Вы также можете использовать числа и другие символы в этих выражениях, например:

- - - -

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

- - - -

В любом случае, давайте реализуем пример - обновим ваш HTML, чтобы добавить атрибут шаблона, например:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="banana|cherry">
-  <button>Submit</button>
-</form>
- - - -

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}

- -

В этом примере {{HTMLElement("input")}} элемент принимает одно из двух возможных значений: строку "banana" или строку "cherry".

- -

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

- -
-

Примечание: Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа email например, проверяет введенное значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделенных запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве еще одного примера, поле с типом url автоматически требует правильно сформированного URL.

-
- -
-

Примечание: Элемент {{HTMLElement("textarea")}} не поддерживает атрибут {{htmlattrxref("pattern","input")}}.

-
- -

Ограничение длины ваших записей

- -

Все текстовые поля, созданные с помощью элементов ({{HTMLElement("input")}} или  {{HTMLElement("textarea")}}) могут быть ограничены по размеру, используя атрибуты {{htmlattrxref("minlength","input")}} и{{htmlattrxref("maxlength","input")}}. Поле невалидно если его значение короче чем {{htmlattrxref("minlength","input")}} или значение длиннее значения {{htmlattrxref("maxlength","input")}}. Браузеры часто не позволяют пользователю вводить более длинное значение, чем ожидалось, в текстовые поля в любом случае, но полезно иметь этот мелкозернистый элемент управления.

- -

Для числовых полей (например <input type="number">), атрибуты {{htmlattrxref("min","input")}} и {{htmlattrxref("max","input")}} также обеспечивают ограничение валидации. Если значение поля меньше атрибута {{htmlattrxref("min","input")}} или больше атрибута {{htmlattrxref("max","input")}}, поле будет невалидным.

- -

Давайте посмотрим на другой пример. Создайте новую копию файла fruit-start.html.

- -

Теперь удалите содержимое элемента <body>, и замените его следующим:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

Вот живой пример:

- -

{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}

- -
-

Примечание: <input type="number"> (и другие типы, например range) могут также содержать атрибут {{htmlattrxref("step", "input")}} который указывает, какой инкремент будет увеличиваться или уменьшаться, когда используются элементы управления входом (например, номерные кнопки вверх и вниз)

-
- -

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

- -

Вот полный пример, чтобы показать использование встроенных функций проверки HTML:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* требуется для правильной формы формы
-    элементов в браузерах на основе WebKit*/
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  outline: none;
-}
- -

{{EmbedLiveSample("Full_example", "100%", 420)}}

- -

Индивидуальные сообщения об ошибках

- -

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

- -

Эти автоматизированные сообщения имеют два недостатка:

- - - - - - - - - - - - - - - - - - - - - - - - - -
Французская версия сообщений обратной связи на странице на английском языке
БраузерОтображение
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

Чтобы настроить внешний вид и текст этих сообщений, вы должны использовать JavaScript; нет способа сделать это, используя только HTML и CSS.

- -

HTML5 предоставляет API проверки ограничений (API - Application Programing interface, программный интерфейс приложения, англ.) для проверки и настройки состояния элемента формы. Помимо прочего, можно заменить текст сообщения об ошибке. Давайте посмотрим на небольшой пример:

- -
<form>
-  <label for="mail">I would like you to provide me an e-mail</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

В JavaScript вы вызываете метод setCustomValidity():

- -
var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I expect an e-mail, darling!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}

- -

Проверка форм с использованием JavaScript

- -

Если вы хотите контролировать внешний вид собственных сообщений об ошибках или работать с браузерами, которые не поддерживают встроенную проверку формы HTML, вы должны использовать JavaScript.

- -

API проверки валидности HTML5

- -

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

- -

Свойства API проверки валидности

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СвойствоОписание
validationMessageЛокализованное сообщение, описывающее ограничения валидности, которым элемент управления не соответствует (если есть), или пустая строка, если элемент управления не является кандидатом для проверки ограничений (willValidate is false), или значение элемента удовлетворяет его ограничениям.
validityобъект {{domxref("ValidityState")}} , описывающий состояние действительности элемента.
validity.customErrorВозвращает true если элемент содержит пользовательскую ошибку; false в противном случае.
validity.patternMismatchВозвращает true если значение элемента не соответствует предоставленному шаблону; false в противном случае.
-
- если возвращает true, элемент будет соответствовать CSS псевдо-классу {{cssxref(":invalid")}}.
validity.rangeOverflowВозвращает true если значение элемента выше заданного максимума; false в противном случае.
-
- Если возвращает true, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдо-классу. {{cssxref(":out-of-range")}}.
validity.rangeUnderflowВозвращаетtrue если значение элемента меньше заданного минимума; false в противном случае.
-
- Если возвращает true, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдо-классу {{cssxref(":out-of-range")}}.
validity.stepMismatchВозвращаетtrue, если значение элемента не соответствует правилам, предоставляемым атрибутом step; в противном случае false .
-
- Если возвращает true, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.
validity.tooLongВозвращает true если значение элемента больше заданной максимальной длины; иначе будет false
-
- Если возвращает true, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.
validity.typeMismatchВозвращает true если значение элемента не соответствует правильному синтаксису; в противном случае - false.
- Если возвращает true, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.
validity.validВозвращае true если значение элемента не имеет проблем с валидностью; в противном случае false.
-
- Если возвращает true, элемент будет соответствовать CSS псевдоклассу {{cssxref(":valid")}} ; CSS псевдоклассу {{cssxref(":invalid")}} в противном случае.
validity.valueMissingВозвращает true если элемент не имеет значения, но является обязательным полем; в противном случае false.
-
- Если возвращает true, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.
willValidateВозвращает true если элемент будет проверен при отправке формы; в противном случае false.
- -

Методы API проверки ограничений

- - - - - - - - - - - - - - - - - - -
МетодОписание
checkValidity()Возвращает true если значение элемента не имеет проблем с валидностью; иначе false. Если элемент невалидный, этот метод также вызывает событие {{event("invalid")}} в элементе .
setCustomValidity(message)Добавляет настраиваемое сообщение об ошибке в элемент; если вы установили собственное сообщение об ошибке, элемент считается невалидным, и отображается указанная ошибка. Это позволяет использовать код JavaScript для установления ошибки валидации, отличного от тех, которые предлагаются стандартным API ограничений валидности. Сообщение показывается пользователю при возникновении проблемы.
-
- Если аргументом является пустая строка, пользовательская ошибка очищается.
- -

Для устаревших браузеров можно использовать полифилл как Hyperform чтобы компенсировать отсутствие поддержки API ограничений валидности. Поскольку вы уже используете JavaScript, использование полифилла не является дополнительным бременем для вашего веб-сайта или дизайна или реализации веб-приложения.

- -

Пример использования API проверки ограничений

- -

Давайте посмотрим, как использовать этот API для создания настраиваемых сообщений об ошибках. Сначала HTML:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

Эта простая форма использует атрибут {{htmlattrxref("novalidate","form")}} для отключения автоматической валидации браузера, что позволяет нашему скрипту контролировать валидацию. Однако это не отключает поддержку API ограничений валидации или применения псевдоклассов CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} и {{cssxref(":out-of-range")}}. Это означает, что, хотя браузер не проверяет правильность формы перед отправкой своих данных, вы все равно можете сделать это самостоятельно и соответствующим образом сформировать форму.

- -

Атрибут aria-live гарантирует, что наше индивидуальное сообщение об ошибке будет доступно всем, включая тех, кто использует вспомогательные технологии, такие как скрин-ридеры.

- -
CSS
- -

Этот CSS задает стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.

- -
/* Это просто, чтобы сделать пример более приятным */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Наш стиль для невалидных полей */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* Это стиль для сообщений об ошибке */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

Следующий код JavaScript обрабатывает выборочную проверку ошибок.

- -
//Существует много способов выбрать DOM узел; здесь мы получаем форму и электронную почту
-//поле ввода, а также элемент span, в который мы поместим сообщение об ошибке.
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
- // Каждый раз, когда пользователь вводит что-либо, мы проверяем,
-  // является ли корректным поле электронной почты.
-  if (email.validity.valid) {
-    // В случае появления сообщения об ошибке, если поле
-    // является корректным, мы удаляем сообщение об ошибке.
-    error.innerHTML = ""; // Сбросить содержимое сообщения
-    error.className = "error"; // Сбросить визуальное состояние сообщения
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Каждый раз, когда пользователь пытается отправить данные, мы проверяем
-   // валидность поля электронной почты.
-  if (!email.validity.valid) {
-
-    // Если поле невалидно, отображается пользовательское
-    // сообщение об ошибке.
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-    // И мы предотвращаем отправку формы путем отмены события
-    event.preventDefault();
-  }
-}, false);
- -

Вот живой результат:

- -

{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}

- -

API ограничений валидации дает вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.

- -

Проверка форм без встроенного API

- -

Иногда, например, с устаревшими браузерами или пользовательскими виджетами, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все еще можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.

- -

Чтобы проверить форму, вы должны задать себе несколько вопросов:

- -
-
Какую проверку я должен выполнить?
-
Вам нужно определить, как проверить ваши данные: операции со строками, преобразование типов, регулярные выражения и т. д. Это зависит от вас. Просто помните, что данные формы всегда являются текстовыми и всегда предоставляются вашему скрипту как строки.
-
Что делать, если форма не проверяется?
-
Это явно вопрос интерфейса. Вы должны решить, как будет выглядеть форма: формально ли отправляет данные? Должны ли вы выделять поля, которые содержат ошибки? Должны отображаться сообщения об ошибках?
-
Как я могу помочь пользователю исправить невалидные данные?
-
Чтобы уменьшить разочарование пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь им в исправлении их исходных данных. Вы должны предлагать предварительные предложения, чтобы они знали, что ожидается, а также ясные сообщения об ошибках. Если вы хотите вникнуть в требования к пользовательскому интерфейсу проверки формы, есть некоторые полезные статьи, которые вы должны прочитать: - -
-
- -

Пример, который не использует API валидации ограничений

- -

Чтобы проиллюстрировать это, давайте перестроим предыдущий пример, чтобы он работал с устаревшими браузерами:

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

Как вы можете видеть, HTML почти такой же; мы просто удалили функции проверки HTML. Обратите внимание, что ARIA является независимой спецификацией, которая специально не связана с HTML5.

- -
CSS
- -

Аналогично, CSS не нужно сильно менять; мы просто переводим CSS-псевдокласс {{cssxref(":invalid")}} в настоящий класс и избегаем использования селектора атрибутов, который не работает в Internet Explorer 6.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

Большие изменения в коде JavaScript, которые должны сделать намного больше тяжелой работы.

- -
// Существует меньше способов выбрать узел DOM с устаревшими браузерами
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// Ниже приведен трюк для достижения следующего узла Element Element в DOM
-// Это опасно, потому что вы можете легко построить бесконечный цикл.
-// В современных браузерах вам следует использовать элемент element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Многие устаревшие браузеры не поддерживают метод addEventListener.
-// Вот простой способ справиться с этим; это далеко не единственный.
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // Обратный вызов, который возвращает `false`, останавливает цепочку обратного вызова
-     // и прерывает выполнение обратного вызова события.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Теперь мы можем перестроить наше ограничение валидации
-// Поскольку мы не полагаемся на псевдо-класс CSS, мы должны
-// явно установить допустимый / недопустимый класс в поле электронной почты
-addEvent(window, "load", function () {
-// Здесь мы проверяем, пусто ли поле (помните, что поле не требуется)
-   // Если это не так, мы проверяем, является ли его контент корректным адресом электронной почты.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// Это определяет, что происходит, когда пользователь вводит в поле
-addEvent(email, "input", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// Это определяет, что происходит, когда пользователь пытается отправить данные
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Некоторые устаревшие браузеры не поддерживают метод event.preventDefault ()
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

Результат выглядит следующим образом:

- -

{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}

- -

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

- - - -

Удаленная проверка

- -

В некоторых случаях может быть полезно выполнить некоторую удаленную проверку. Такая проверка необходима, когда данные, введенные пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.

- -

Выполнение такой проверки требует принятия нескольких мер предосторожности:

- - - -

Заключение

- -

Проверка формы не требует сложного JavaScript, но она требует тщательного изучения пользователя. Всегда помните, чтобы помочь вашему пользователю исправить данные, которые они предоставляют. Для этого обязательно выполните следующие действия:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/forms/\320\262\320\260\321\210\320\260_\320\277\320\265\321\200\320\262\320\260\321\217_html_\321\204\320\276\321\200\320\274\320\260/index.html" "b/files/ru/learn/html/forms/\320\262\320\260\321\210\320\260_\320\277\320\265\321\200\320\262\320\260\321\217_html_\321\204\320\276\321\200\320\274\320\260/index.html" deleted file mode 100644 index b68d433739..0000000000 --- "a/files/ru/learn/html/forms/\320\262\320\260\321\210\320\260_\320\277\320\265\321\200\320\262\320\260\321\217_html_\321\204\320\276\321\200\320\274\320\260/index.html" +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Ваша первая HTML форма -slug: Learn/HTML/Forms/Ваша_первая_HTML_форма -tags: - - HTML-форма - - Веб-форма - - Форма -translation_of: Learn/Forms/Your_first_form ---- -
{{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}
- -

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

- - - - - - - - - - - - -
Необходимые знания:Базовое представление о компьютерах и базовое понимание HTML.
Цель:Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.
- -

Что такое Веб-форма?

- -

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

- -

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радио-баттоны, большинство из которых создаются через html-элемент {{htmlelement("input")}}, однако есть и другие элементы, о которых тоже стоит узнать.

- -

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

- -

Проектирование формы

- -

Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.

- -

Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:

- - - -

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

- -

The form to build, roughly sketch

- -

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

- -

Активное обучение: Реализация HTML-формы

- -

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} и {{HTMLelement("button")}}.

- -

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

- -

Элемент {{HTMLelement("form")}}

- -

Создание форм начинается с элемента {{HTMLelement("form")}}:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы {{HTMLelement("div")}} или {{HTMLelement("p")}}, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

- - - -
-

Примечание: Мы детальнее разберём работу этих атрибутов далее в статье Отправка данных формы.

-
- -

Теперь добавьте указанный выше код с элементом {{htmlelement("form")}} внутрь тега {{htmlelement("body")}} в вашем HTML.

- -

Элементы {{HTMLelement("label")}}, {{HTMLelement("input")}} и {{HTMLelement("textarea")}}

- -

Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом {{HTMLelement("label")}}:

- - - -

В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:

- -
<form action="/my-handling-form-page" method="post">
-  <ul>
-    <li>
-      <label for="name">Name:</label>
-      <input type="text" id="name" name="user_name">
-    </li>
-    <li>
-      <label for="mail">E-mail:</label>
-      <input type="email" id="mail" name="user_mail">
-    </li>
-    <li>
-      <label for="msg">Message:</label>
-      <textarea id="msg" name="user_message"></textarea>
-    </li>
-  </ul>
-</form>
- -

Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.

- -

Здесь элементы {{HTMLelement("li")}} используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута for на каждом элементе {{HTMLelement("label")}}, который принимает в качестве значение id элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.

- -

Такой подход полезен тем, что позволяет пользователям с мышью, трекпадом и сенсорным устройством кликнуть на текст-подсказку для активации связанного с ним виджета формы, а также обеспечивает читабельное имя для пользователей скрин-ридеров. Вы найдёте более детальный разбор текстов-подсказок в статье Как структурировать HTML-форму.

- -

В HTML-элементе {{HTMLelement("input")}} самым важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента {{HTMLelement("input")}}. Вы найдёте больше информации об этом далее в статье Стандартные виджеты форм.

- - - -

Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге.  {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут value следующим образом:

- -
<input type="text" value="по умолчанию в этом элементе находится этот текст" />
- -

Если вы хотите определить значение по умолчанию для HTML-элемента {{HTMLElement("textarea")}}, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:

- -
<textarea>
-по умолчанию в этом элементе находится этот текст
-</textarea>
- -

Элемент {{HTMLelement("button")}}

- -

Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента {{HTMLelement("button")}}. Необходимо добавить следующий код перед закрывающим тегом </form>:

- -
<li class="button">
-  <button type="submit">Send your message</button>
-</li>
- -

HTML-элемент {{HTMLelement("button")}} также принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button.

- - - -
-

Примечание: Вы также можете использовать HTML-элемент {{HTMLElement("input")}} с соответствующим атрибутом type , чтобы создать кнопку:  <input type="submit">. Главным преимуществом HTML-элемента {{HTMLelement("button")}} в сравнении с элементом {{HTMLelement("input")}} заключается в том, что {{HTMLelement("input")}} может принимать в себя только простой текст, в то время как {{HTMLelement("button")}} позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.

-
- -

Базовая стилизация формы

- -

Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.

- -

- -
-

Примечание: Если вам кажется, что ваш HTML-код работает не правильно, попробуйте сравнить его с нашим примером — посмотрите first-form.html (также можно посмотреть код вживую).

-
- -

Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.

- -

Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега head в HTML. Это должно выглядить следущим образом:

- -
<style>
-
-</style>
- -

Внутри тега стилей добавьте следующий код:

- -
form {
-  /* Расположим форму по центру страницы */
-  margin: 0 auto;
-  width: 400px;
-  /* Определим контур формы */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-form li + li {
-  margin-top: 1em;
-}
-
-label {
-  /* Определим размер и выравнивание */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input,
-textarea {
-  /* Убедимся, что все поля имеют одинаковые настройки шрифта
-     По умолчанию в textarea используется моноширинный шрифт */
-  font: 1em sans-serif;
-
-  /* Определим размер полей */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* Стилизуем границы полей */
-  border: 1px solid #999;
-}
-
-input:focus,
-textarea:focus {
-  /* Дополнительная подсветка для элементов в фокусе */
-  border-color: #000;
-}
-
-textarea {
-  /* Выровним многострочные текстовые поля с их текстами-подсказками */
-  vertical-align: top;
-
-  /* Предоставим пространство для ввода текста */
-  height: 5em;
-}
-
-.button {
-  /* Выровним кнопки с их текстами-подсказками */
-  padding-left: 90px; /* same size as the label elements */
-}
-
-button {
-  /* Этот дополнительный внешний отступ примерно равен расстоянию
-     между текстами-подсказками и текстовыми полями */
-  margin-left: .5em;
-}
- -

Теперь наша форма выглядит намного лучше.

- -

- -
-

Примечание: Вы можете найти код на GitHub в first-form-styled.html (также можно посмотреть код вживую).

-
- -

Отправка данных на сервер

- -

Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент {{HTMLelement("form")}} определяет куда и каким способом отправить данные благодаря атрибутам action и method.

- -

Мы определяем имя name для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.

- -

Чтобы проименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:

- -
<form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="user_name" />
-  </div>
-  <div>
-    <label for="mail">E-mail:</label>
-    <input type="email" id="mail" name="user_email" />
-  </div>
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  ...
-
- -

В нашем примере форма отправит три куска данных с именами "user_name", "user_email" и "user_message". Эти данные будут отправлены на URL "/my-handling-form-page" через метод HTTP POST.

- -

На стороне сервера скрипт, расположенный на URL "/my-handling-form-page" получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье Отправка данных формы.

- -

Заключение

- -

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: 

- -

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}

- -

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

- -

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

- -

В этом разделе

- - - -

Дополнительные темы

- - diff --git "a/files/ru/learn/html/forms/\320\276\321\202\320\277\321\200\320\260\320\262\320\272\320\260_\320\270_\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_\320\264\320\260\320\275\320\275\321\213\321\205_\321\204\320\276\321\200\320\274\321\213/index.html" "b/files/ru/learn/html/forms/\320\276\321\202\320\277\321\200\320\260\320\262\320\272\320\260_\320\270_\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_\320\264\320\260\320\275\320\275\321\213\321\205_\321\204\320\276\321\200\320\274\321\213/index.html" deleted file mode 100644 index 9e7900f783..0000000000 --- "a/files/ru/learn/html/forms/\320\276\321\202\320\277\321\200\320\260\320\262\320\272\320\260_\320\270_\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_\320\264\320\260\320\275\320\275\321\213\321\205_\321\204\320\276\321\200\320\274\321\213/index.html" +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Отправка данных формы -slug: Learn/HTML/Forms/Отправка_и_Получение_данных_формы -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
- -

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

- - - - - - - - - - - - -
Предварительные знания:Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера.
Задача:Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера.
- -

Куда отправляются данные?

- -

Здесь мы обсудим, что происходит с данными при отправке формы.

- -

О клиенсткой/серверной архитектуре

- -

WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.A basic schema of the Web client/server architecture

- -

На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .

- -
-

Заметка: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».

-
- -

На стороне клиента: определение способа отправки данных

- -

Элемент {{HTMLElement("form")}} определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются  {{htmlattrxref("action","form")}}  и {{htmlattrxref("method","form")}}.

- -

Атрибут {{htmlattrxref("action","form")}}

- -

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

- -

В этом примере данные отправляются на абсолютный URL — http://foo.com:

- -
<form action="http://foo.com">
- -

Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:

- -
<form action="/somewhere_else">
- -

Если атрибуты не указаны, как показано ниже, данные из формы  {{HTMLElement("form")}} отправляются на ту же страницу, на которой размещается данная форма:

- -
<form>
- -

Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут {{htmlattrxref("action", "form")}} был обязательным. Это больше не нужно.

- -
<form action="#">
- -
-

Заметка: Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищенной странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.

-
- -

Атрибут {{htmlattrxref("method","form")}}

- -

Этот атрибут определяет способ отправки данных. Протокол HTTP предоставляет несколько способов выполнить запрос;  Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространенными из которых являются метод GET и метод POST.

- -

Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.

- -

Метод GET

- -

Метод GET - это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.

- -

Рассмотрим следующую форму:

- -
<form action="http://foo.com" method="get">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" id="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

Поскольку используется метод GET, вы увидите URL www.foo.com/?say=Hi&to=Mom, который появится в адресной строке браузера при отправке формы.

- -

Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаем две части данных на сервер:

- - - -

HTTP-запрос имеет следующий вид:

- -
GET /?say=Hi&to=Mom HTTP/2.0
-Host: foo.com
- -
-

Заметка: Вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).

-
- -

Метод POST

- -

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

- -

Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе GET выше, но с атрибутом {{htmlattrxref("method","form")}}, установленным в post.

- -
<form action="http://foo.com" method="post">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" id="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

Когда форма отправляется с использованием метода POST, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:

- -
POST / HTTP/2.0
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

- -
-

Заметка: Вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).

-
- -

Просмотр HTTP-запросов

- -

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, Вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

- -
    -
  1. Нажмите F12
    2. -
  2. Выберите Network
    3. -
  3. Выберите "All"
    4. -
  4. Выберите "foo.com" во вкладке "Name"
    5. -
  5. Выберите "Headers"
    6. -
- -

Затем вы можете получить данные формы, как показано на рисунке ниже.

- -

- -

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

- -
    -
  1. Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод GET, иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.
    2. -
  2. Если необходимо отправить большой объем информации, POST-метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.
    3. -
- -

На стороне сервера: получение данных

- -

Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.

- -

Пример: Чистый PHP

- -

PHP предлагает несколько глобальных объектов для доступа к данным. Например, вы используете POST-метод, в приведенном ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.

- -
<?php
-  // The global $_POST variable allows you to access the data sent with the POST method by name
-  // To access the data sent with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
-?>
- -

Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: php-example.html — который содержит те же данные, которые вы видели раньше:  method : post и action из php-example.php. Когда данные переданы на отправку (submit), они переданы в форму php-example.php, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: Hi Mom.

- -

- -
-

Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

-
- -

Пример: Python

- -

Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется Flask framework для визуализации шаблонов, поддерживающих форму отправки данных (смотри python-example.py).

- -
from flask import Flask, render_template, request
-
-app = Flask(__name__)
-
-@app.route('/', methods=['GET', 'POST'])
-def form():
-    return render_template('form.html')
-
-@app.route('/hello', methods=['GET', 'POST'])
-def hello():
-    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
-
-if __name__ == "__main__":
-    app.run()
- -

Два шаблона из коде выше взаимодействуют так:

- - - -
-

Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask. После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py, потом открыть localhost:5000 в своем браузере.

-
- -

Другие языки и фреймворки

- -

Существует множество других серверных технологий, которые вы можете использовать для работы с формами, включая языки Perl, Java, .Net, Ruby, и прочее. Выбирайте тот, который нравится больше. К тому же, использовать вышеупомянутые технологии непосредственно, без использования фреймворков, может быть сложно. Лучше использовать один из множества высококачественных фреймворков, таких как:

- - - -

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

- -
-

Примечание: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи.  Если хотите узнать больше, ссылки ниже помогут в этом. 

-
- -

Особый случай: отправка файлов

- -

Отправка файлов с помощью форм HTML —  это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.

- -

Атрибут {{htmlattrxref("enctype","form")}} 

- -

Этот атрибут позволяет конкретизировать значение в Content-Type HTTP заголовок, включенный в запрос, при генерировании отпавки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: application/x-www-form-urlencoded. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."

- -

Если хотите отправить файл, нужно сделать следующие три шага:

- - - -

Пример:

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choose a file</label>
-    <input type="file" id="file" name="myFile">
-  </div>
-  <div>
-    <button>Send the file</button>
-  </div>
-</form>
- -
-

Примечание: Некоторые браузеры поддерживают {{htmlattrxref("multiple","input")}} атрибут элемента {{HTMLElement("input")}} , который позволяет выбрать больше одного файла для загрузки, при использовании одного элемента <input> . То, как сервер работает с этими файлами, напрямую зависит от технологий, используемых на сервере. Как упоминалось ранее, использование фреймворков сделает вашу жизнь намного легче. 

-
- -
-

Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.

-
- -

Проблемы безопасности

- -

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

- -

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

- -

XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"

- -

Межсайтовый скриптинг (XSS "Сross Site Request Forgery") и подделка межсайтовых запросов (CSRF "Cross-Site Scripting") - это распространенные типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.

- -

Межсайтовый скриптинг (XSS "Сross Site Request Forgery") позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF "Cross-Site Scripting") может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.

- -

CSRF-атаки аналогичны XSS-атакам в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники CSRF пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадежному пользователю). Атаки XSS используют доверие пользователя к веб-сайту, в то время как атаки CSRF используют доверие веб-сайта к пользователю.

- -

Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML {{HTMLElement ("script")}}, {{HTMLElement ("iframe")}} и {{HTMLElement ("object")}} полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.

- -

SQL - вброс

- -

SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является одним из самых направленных атак на веб-сайты.

- -

Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счет повышения привилегий. Это очень серьезная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения санитизации данных (например, с помощью mysqli_real_escape_string().

- -

Вброс HTTP-заголовка и email

- -

Эти виды атак могут проявляться, когда ваше приложение создает заголовки HTTP или электронные почтовые адреса на основании данных, введенных пользователем в форму. Такие атаки напрямую не повреждают сервер или пользовалей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.

- -

Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в зомби.

- -

Будьте параноиком: никогда не доверяйте вашим пользователям

- -

Как вы боретесь с такими угрозами? Этот вопрос выходит далеко за рамки данной статьи, но есть несколько общих правил, которые следует всегда соблюдать. Самое важное из них - никогда не доверяйте вашим пользователям, в том числе себе; даже проверенный пользователь может быть атакован.

- -

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

- - - -

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

- -
-

Примечание: В статье Безопасность веб-сайта нашего раздела серверного обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.

-
- -

Заключение

- -

Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, мы можем проверить данные на стороне клиента, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.

- -

См. также

- -

Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следущие источники информации:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/forms/\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\275\321\213\320\265_\320\262\320\270\320\264\320\266\320\265\321\202\321\213_\321\204\320\276\321\200\320\274/index.html" "b/files/ru/learn/html/forms/\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\275\321\213\320\265_\320\262\320\270\320\264\320\266\320\265\321\202\321\213_\321\204\320\276\321\200\320\274/index.html" deleted file mode 100644 index eae3fbb32d..0000000000 --- "a/files/ru/learn/html/forms/\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\275\321\213\320\265_\320\262\320\270\320\264\320\266\320\265\321\202\321\213_\321\204\320\276\321\200\320\274/index.html" +++ /dev/null @@ -1,690 +0,0 @@ ---- -title: Стандартные виджеты форм -slug: Learn/HTML/Forms/Стандартные_виджеты_форм -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

Сейчас мы детально изучим возможности различных виджетов форм, посмотрим, какие функции доступны для получения информации в различных представлениях. Это исчерпывающая статья, описывающая все доступные стандартные виджеты форм.

- - - - - - - - - - - - -
Требования:Базовая компьютерная грамотность, базовое понимание HTML.
Цель:Понять, какие типы стандартных виджетов форм доступны в браузерах для сбора информации, как внедрять их, используя HTML.
- -

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

- -
-

Note: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к HTML forms element reference, и в частости к нашей обширной ссылке <input> types.

-
- -

Стандартные атрибуты

- -

Многие элементы, используемые для определения виджетов форм, имеют собственные атрибуты. Однако, существует набор атрибутов, общих для всех элементов формы, которые предоставляют вам контроль над их виджетами. Вот список этих общих атрибутов:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
autofocus(false)Этот атрибут логического типа позволяет вам определить, должен ли элемент автоматически попадать в фокус при загрузке страницы, пока пользователь не изменит это, например, печатая в другом виджете. Этот атрибут может явно определяться только для одного элемента в документе, ассоциированного с формой.
disabled(false)Этот атрибут логического типа определяет, может ли пользователь взаимодействовать с элементом. Если этот атрибут не определён, то элемент наследует его значение от элемента-родителя. Если атрибут не определён, то по умолчанию пользователь может взаимодействовать с элементом.
formЭлемент формы, с которым ассоциирован виджет. Значением данного атрибута должен быть атрибут id элемента {{HTMLElement("form")}}  в том же документе. Теоретически, это позволяет вам помещать определение виджета за рамками элемента {{HTMLElement("form")}}. На практике, однако, не существует браузеров, поддерживающих данную функцию.
nameНазвание элемента; передаётся вместе с данными формы.
valueНачальное значение элемента.
- -

Поля ввода текста

- -

Текстовые поля {{htmlelement("input")}}  являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели нескольк простых примеров.

- -
-

Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

-
- -

Все текстовые поля имеют общие атрибуты:

- - - -
-

Note: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.

-
- -

Однострочные текстовые поля

- -

Однострочные текстовые поля создаются с использованием элемента {{HTMLElement("input")}}  чей атрибут {{htmlattrxref("type","input")}} имеет значение text (если вы не поставите другое значение атрибута {{htmlattrxref("type","input")}}, text является значением по умолчанию). Значение text для этого атрибута является возвратным, если значение которое вы определили для {{htmlattrxref("type","input")}} неизвестно браузеру (например, если вы определили type="date" а браузер не поддерживает выбор даты).

- -
-

Note: Вы можете найти примеры всех типов однострочных текстовых полей на GitHub at single-line-text-fields.html (see it live also).

-
- -

Пример базового одностраничного текстового поля:

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.

- -

Screenshots of single line text fields on several platforms.

- -

HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

- -

E-mail address field

- -

Этот тип поля устонавливается со значеним email для атрибута {{htmlattrxref("type","input")}}:

- -
<input type="email" id="email" name="email" multiple>
- -

Когда используется этот type, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:

- -

An invalid email input showing the message Please enter an email address.

- -

It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.

- -

On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

- -
-

Note: You can find out more about form validation in the article Form data validation.

-
- -

Password field

- -

This type of field is set using the value password for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="password" id="pwd" name="pwd">
- -

It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.

- -

Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.

- -

Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.

- -

Search field

- -

This type of field is set by using the value search for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="search" id="search" name="search">
- -

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

- -

Screenshots of search fields on several platforms.

- -

Phone number field

- -

This type of field is set using tel as the value of the {{htmlattrxref("type","input")}} attribute:

- -
<input type="tel" id="tel" name="tel">
- -

Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.

- -

URL field

- -

This type of field is set using the value url for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="url" id="url" name="url">
- -

It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.

- -
Note: Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
- -
-

Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

-
- -

Multi-line text fields

- -

A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.

- -
<textarea cols="30" rows="10"></textarea>
- -

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

- -

Screenshots of multi-lines text fields on several platforms.

- -
-

Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to none using CSS.

-
- -

{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("textarea")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("cols","textarea")}}20The visible width of the text control, in average character widths.
{{htmlattrxref("rows","textarea")}}The number of visible text lines for the control.
{{htmlattrxref("wrap","textarea")}}softIndicates how the control wraps text. Possible values are: hard or soft
- -

Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.

- -

There are two key related points to note here:

- - - -

Drop-down content

- -

Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the select box, and autocomplete box. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.

- -
-

Note: You can find examples of all the drop-down box types on GitHub at drop-down-content.html (see it live also).

-
- -

Select box

- -

A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.

- -
<select id="simple" name="simple">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:

- -
<select id="groups" name="groups">
-  <optgroup label="fruits">
-    <option>Banana</option>
-    <option selected>Cherry</option>
-    <option>Lemon</option>
-  </optgroup>
-  <optgroup label="vegetables">
-    <option>Carrot</option>
-    <option>Eggplant</option>
-    <option>Potato</option>
-  </optgroup>
-</select>
- -

Screenshots of single line select box on several platforms.

- -

If an {{HTMLElement("option")}} element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.

- -

On the {{HTMLElement("optgroup")}} element, the label attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.

- -

Multiple choice select box

- -

By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down Cmd/Ctrl and clicking multiple values).

- -

Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.

- -
<select multiple id="multi" name="multi">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

Screenshots of multi-lines select box on several platforms.

- -
Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
- -

Autocomplete box

- -

You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.

- -

The data list is then bound to a text field (usually an <input> element) using the {{htmlattrxref("list","input")}} attribute.

- -

Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.

- -
<label for="myFruit">What's your favorite fruit?</label>
-<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
-<datalist id="mySuggestion">
-  <option>Apple</option>
-  <option>Banana</option>
-  <option>Blackberry</option>
-  <option>Blueberry</option>
-  <option>Lemon</option>
-  <option>Lychee</option>
-  <option>Peach</option>
-  <option>Pear</option>
-</datalist>
- -
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
- -
Screenshots of datalist on several platforms.
- -
- -

Datalist support and fallbacks

- -

The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.

- -

To handle this, here is a little trick to provide a nice fallback for those browsers:

- -
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">or pick a fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Apple</option>
-    <option>Banana</option>
-    <option>Blackberry</option>
-    <option>Blueberry</option>
-    <option>Lemon</option>
-    <option>Lychee</option>
-    <option>Peach</option>
-    <option>Pear</option>
-  </select>
-</datalist>
-
- -

Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

Checkable items

- -

Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.

- -

It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.

- -
-

Note: You can find the examples from this section on GitHub as checkable-items.html (see it live also).

-
- -

For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. 

- -

You also need to provide values for these kinds of inputs inside the value attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of on.

- -

Check box

- -

A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value checkbox.

- -
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
-
- -

Including the checked attribute makes the checkbox checked automatically when the page loads.

- -

Screenshots of check boxes on several platforms.

- -

Radio button

- -

A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value radio.

- -
<input type="radio" checked id="soup" name="meal">
- -

Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.

- -
<fieldset>
-  <legend>What is your favorite meal?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soup</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

Screenshots of radio buttons on several platforms.

- -

Buttons

- -

Within HTML forms, there are three kinds of button:

- -
-
Submit
-
Sends the form data to the server.
-
Reset
-
Resets all form widgets to their default values.
-
Anonymous
-
Buttons that have no automatic effect but can be customized using JavaScript code. If you omit the type attribute, this is the default value.
-
- -
-

Note: You can find the examples from this section on GitHub as button-examples.html (see it live also).

-
- -

A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:

- -

submit

- -
<button type="submit">
-    This a <br><strong>submit button</strong>
-</button>
-
-<input type="submit" value="This is a submit button">
- -

reset

- -
<button type="reset">
-    This a <br><strong>reset button</strong>
-</button>
-
-<input type="reset" value="This is a reset button">
- -

anonymous

- -
<button type="button">
-    This an <br><strong>anonymous button</strong>
-</button>
-
-<input type="button" value="This is an anonymous button">
- -

Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:

- - - -

Screenshots of buttons on several platforms.

- -

Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.

- -

Advanced form widgets

- -

In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.

- -
-

Note: You can find the examples from this section on GitHub as advanced-examples.html (see it live also).

-
- -

Numbers

- -

Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value number. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.

- -

It's also possible to:

- - - -

Example

- -
<input type="number" name="age" id="age" min="1" max="10" step="2">
- -

This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.

- -

number inputs are not supported in versions of Internet Explorer below 10.

- -

Sliders

- -

Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.

- -

A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.

- -

Example

- -
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
- -

This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.

- -

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.

- -
<label for="beans">How many beans can you eat?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
- -

This can be implemented using some simple JavaScript:

- -
var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
- -

Here we store references to the range input and the span in two variables, then we immediately set the span's textContent to the current value of the input. Finally, we set up an oninput event handler so that every time the range slider is moved, the span textContent is updated to the new input value.

- -

range inputs are not supported in versions of Internet Explorer below 10.

- -

Date and time picker

- -

Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.

- -

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.

- -

datetime-local

- -

This creates a widget to display and pick a date with time, but without any specific time zone information.

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

month

- -

This creates a widget to display and pick a month with a year.

- -
<input type="month" name="month" id="month">
- -

time

- -

This creates a widget to display and pick a time value.

- -
<input type="time" name="time" id="time">
- -

week

- -

This creates a widget to display and pick a week number and its year.

- -
<input type="week" name="week" id="week">
- -

All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.

- -
<label for="myDate">When are you available this summer?</label>
-<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
- -

Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.

- -

Color picker

- -

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.

- -

A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color.

- -
<input type="color" name="color" id="color">
- -

Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.

- -

Other widgets

- -

There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.

- -
-

Note: You can find the examples from this section on GitHub as other-examples.html (see it live also).

-
- -

File picker

- -

HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

- -

To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

- -

Example

- -

In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

Hidden content

- -

It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value hidden.

- -

If you create such an element, it's required to set its name and value attributes:

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
- -

Image button

- -

The image button control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).

- -

An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value image. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.

- -
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:

- - - -

So for example when you click on the image of this widget, you are sent to a URL like the following:

- -
http://foo.com?pos.x=123&pos.y=456
- -

This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

- -

Meters and progress bars

- -

Meters and progress bars are visual representations of numeric values.

- -

Progress

- -

A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.

- -
<progress max="100" value="75">75/100</progress>
- -

This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

- -

The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

- -

Meter

- -

A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:

- - - -

All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:

- - - -

Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

- -
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- -

The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

- -

Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.

- -

Conclusion

- -

As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.

- -

See also

- -

To dig into the different form widgets, there are some useful external resources you should check out:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..f34fe049f5 --- /dev/null +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,204 @@ +--- +title: Tips for authoring fast-loading HTML pages +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Эти советы основаны на общих знаниях и экспериментах.

+ +

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

+ +

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

+ +

Советы

+ +

Уменьшайте вес страницы

+ +

Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.

+ +

Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.

+ +

Такие инструменты, как HTML Tidy , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии

+ +

Минимизируйте количество файлов

+ +

Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.

+ +

В зависимости от настроек кэша браузера он может отправить запрос с заголовком If-Modified-Since для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.

+ +

Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.

+ +

Используйте сеть доставки (и дистрибуции) содержимого (Content Delivery Network (CDN))

+ +

Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.

+ +

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

+ +

Дальнейшее чтение:

+ + + +

Сократите поиск доменов

+ +

Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.

+ +

Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.

+ +

Кэшируйте повторно использованный контент

+ +

Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.

+ +

В частности, обратите внимание на  заголовок Last-Modified. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок Last-Modified к статическим страницам (напр. .html, .css), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. .php, .aspx), это, конечно, не может быть сделано, и заголовок не отправляется.

+ +

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

+ +

Больше информации:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+ +

Оптимально размещайте компоненты на странице

+ +

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

+ +

Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.

+ +

Уменьшайте количество встроенных скриптов

+ +

Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования document.write() для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы AJAX для управления содержимым страницы, а не устаревшие подходы, которые основаны на  document.write().

+ +

Используйте современный CSS и корректную разметку

+ +

Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.

+ +

Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).

+ +

Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, HTML Tidy может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки

+ +

Разделяйте ваш контент

+ +

Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, или <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a>.

+ +

Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.

+ +

Вместо глубоко вложенных таблиц, как в:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+ +

используйте невложенные таблицы как показано (или div'ы)

+ +
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+ +

Смотри также: CSS3 Multi-column Layout Spec и CSS3 Flexible Box Layout

+ +

Сокращайте и сжимайте активы SVG

+ +

SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG

+ +

Сокращайте и сжимайте ваши изображения

+ +

Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу.  Есть онлайн-инструменты, такие как <a href="https://compressjpeg.com/">Compress Jpeg</a>, <a href="https://tinypng.com">Tiny PNG</a> и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.

+ +

Указывайте размеры для изображений и таблиц 

+ +

Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине height и width  должны быть указаны для изображений всегда, когда это возможно.

+ +

Таблицы должны использовать CSS селектор: комбинация свойств

+ +
  table-layout: fixed;
+
+ +

и должны указывать ширину колонок используя HTML теги COL и COLGROUP

+ +

Мудро выбирайте требования к пользовательскому агенту

+ +

Чтобы добиться наибольших улучшений в дизайне страниц, убедитесь, что для проектов указаны разумные требования к пользовательским агентам. Не требуйте, чтобы ваш контент казался идеальным во всех браузерах, особенно в устаревших.

+ +

В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.

+ +

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

+ +

Используйте async и defer, если это возможно

+ +

Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.

+ +

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

+ +

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

+ +

Пример структуры страницы

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.
+
+
+
+ +
+
+
+
· SCRIPT ...
+ Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы
+
Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.
+
+
+
+ +
+
· BODY
+
· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
+
+ +
+
+
+
· SCRIPT ...
+ Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.
+
Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания
+
Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.
+
+
+
+ + + + + +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html new file mode 100644 index 0000000000..1a780e676b --- /dev/null +++ b/files/ru/learn/html/howto/index.html @@ -0,0 +1,153 @@ +--- +title: Использование HTML для решения общих задач +slug: Learn/HTML/Рецепты +tags: + - CodingScripting + - HTML + - На русском + - Программирование +translation_of: Learn/HTML/Howto +--- +

Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.

+ +
+
+

Основы структурирования

+ +

Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого.

+ + + +

Основы организации гипертекста

+ +

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

+ + +
+ +
+

Гиперссылки

+ +

Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:

+ + + +

Изображения и мультимедиа

+ + + +

Сценарии и стили

+ +

HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).

+ + + +

Встраиваемый контент

+ + +
+
+ +

Необычные или продвинутые проблемы

+ +

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

+ +
+
+

Формы

+ +

Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвященное руководство. Вот где вы должны начать:

+ + + +

Таблицы

+ +

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

+ + + +

Представление данных

+ + + +

Интерактивность

+ + +
+ +
+

Продвинутая организация текста

+ + + +

Продвинутые изображения и мультимедиа images & multimedia

+ + + +

Локализация

+ +

HTML не одноязычен. Он имеет поддержку средств локализации документов.

+ + + +

Производительность

+ + +
+
+ +

     

diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..cef001e25a --- /dev/null +++ b/files/ru/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,129 @@ +--- +title: Использование data-* атрибутов +slug: Web/Guide/HTML/Using_data_attributes +tags: + - Guide + - HTML +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.

+ +

Синтаксис HTML

+ +

Синтаксис прост — любой атрибут, чьё имя начинается с data-, является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data-атрибуты:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Доступ в JavaScript

+ +

Чтение data-атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным "5".

+ +

Доступ в CSS

+ +

Заметим, что data-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:

+ +
article[data-columns='3']{
+  width: 400px;
+}
+article[data-columns='4']{
+  width: 600px;
+}
+ +

Увидеть как это работает можно в примере на JSBin.

+ +

Data-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

+ +

Проблемы

+ +

Не храните данные, которые должны быть видимы и доступны в data-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data-атрибутах.

+ +

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset. Для поддержки IE 10 и более ранних версий получение доступа к data-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, производительность чтения data-атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute().

+ +

Тем не менее, для пользовательских метаданных, связанных с элементами, data-атрибуты являются отличным решением.

+ +

Поддержка в браузерах

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
caniuse
+

IE

+ 		+

Edge

+ 		+

Firefox

+ 		+

Chrome

+ 		+

Safari

+ 		+

Opera

+ 		+

iOS Safari

+ 		+

Opera Mini*

+ 		+

Android Browser

+ 		+

Chrome for Android

+
11+14+52+49+10.1+46+9.3+all4.4+59+
+ +

 

+ +

Тем не менее, для содержимого, которое не надо показывать это является отличным решением.

+ +

См. также

+ + diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..fdebae6e91 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,679 @@ +--- +title: Углубленное форматирование текста +slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting +tags: + - Beginner + - Guide + - HTML + - Начинающий + - Руководство +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

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

+ + + + + + + + + + + + +
Предварительные требования: +

Базовое знакомство с HTML, раскрытое в 
+ Начало работы с HTML. Форматирование текста с помощью HTML, описанное в статье Основы редактирования текста в HTML.

+
Задача:Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.
+ +

Списки описания

+ +

В основах HTML-текста мы рассмотрели, как пометить привычные типы списков в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.

+ +

Давайте рассмотрим пример набора терминов и определений:

+ +
Солилоквий
+Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
+Монолог
+Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
+Ремарка
+В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
+ +

В списках описания используется иная оболочка, чем в других типах списков — {{htmlelement ("dl")}} (от description list); кроме того, каждый термин завёрнут в элемент {{htmlelement ("dt")}} (description term — термин для описания) и каждое определение завёрнуто в элемент {{htmlelement ("dd")}} (description definition — описание определения).

+ +

Закончим разметку нашего примера:

+ +
<dl>
+  <dt>Солилоквий</dt>
+  <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd>
+  <dt>Монолог</dt>
+  <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd>
+  <dt>Ремарка</dt>
+  <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd>
+</dl>
+ +

В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:

+ +
+
Солилоквий
+
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
+
Монолог
+
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
+
Ремарка
+
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
+
+ +

Заметьте, что разрешено давать одному элементу несколько описаний:

+ +
+
Ремарка
+
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
+
В письменности: отметка, примечание (устар.).
+
+ +

Активное обучение: разметка набора определений

+ +

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

+ +

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Цитаты

+ +

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

+ +

Блочные цитаты

+ +

Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть ее внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.

+ +

Например, следующая разметка берется из страницы элемента MDN <blockquote>:

+ +
<p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
+Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
+ +

Чтобы превратить её в блочную цитату, мы просто делаем следующее:

+ +
<blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
+  <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
+</blockquote>
+ +

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

+ +
+

HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нём текст является развёрнутой цитатой.

+
+ +

Строчные цитаты

+ +

Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <q> MDN:

+ +
<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
+для коротких цитат, не требующих прерывания абзаца</q>.</p>
+ +

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

+ +

Элемент цитирования — <q> — предназначен для коротких цитат, не требующих прерывания абзаца.

+ +

Цитирование

+ +

Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <cite> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <cite> с источником цитаты:

+ +
<p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
+<cite>блочных цитатах</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
+  Quotation Element</em>) указывает на то, что заключённый в нем текст является развёрнутой цитатой.</p>
+</blockquote>
+
+<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
+для коротких цитат, не требующих прерывания абзаца</q>. -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>Строчные цитаты</cite></a>.</p>
+ +

По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html

+ +

Активное обучение: кто это сказал?

+ +

Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:

+ +
    +
  1. Преобразуйте средний абзац в блочную цитату (<blockquote>), который включает атрибут cite.
    2. +
  2. Заверните часть третьего абзаца в строчную цитату, которая включает атрибут cite.
    3. +
  3. Включите элемент <cite> для каждой ссылки.
    4. +
+ +

Источники цитирования, которые вам потребуются:

+ + + +

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

Аббревиатуры

+ +

Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это {{htmlelement ("abbr")}}, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута {{htmlattrxref("title")}}.)

+ +

Давайте рассмотрим несколько примеров:

+ +
<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p>
+
+<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>
+
+ +

Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):

+ +

Мы используем HTML для структурирования наших веб-документов.

+ +

Я думаю, Почт. Грин сделал это на кухне с бензопилой.

+ +
+

Примечание: Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревитатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.

+
+ +

Активное обучение: выделение аббревиатуры

+ +

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

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Разметка контактных данных

+ +

HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:

+ +
<address>
+  <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p>
+</address>
+ +

Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не любого адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдет:

+ +
<address>
+  <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p>
+</address>
+ +

Верхний и нижний индекс

+ +

Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.

+ +

Приведем пример:

+ +
<p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>
+<p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>
+ +

Результат этого кода выглядит следующим образом:

+ +

Я просыпаюсь в 635 часов утра.

+ +

Химическая формула кофеина: C8H10N4O2.

+ +

Если x2 равно 9, x должен равняться 3 или -3.

+ +

Представление компьютерного кода

+ +

Существует несколько элементов для маркировки компьютерного кода с использованием HTML:

+ + + +

Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

Вышеприведенный код будет выглядеть так:

+ +

{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}

+ +

Разметка времени и даты

+ +

HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:

+ +
<time datetime="2020-01-20">20 Января 2020</time>
+ +

Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:

+ + + +

Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.

+ +

В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:

+ +
<!-- Стандартная дата -->
+<time datetime="2020-01-20">20 Января 2020</time>
+<!-- Только год и месяц -->
+<time datetime="2020-01">Январь 2020</time>
+<!-- Только месяц и день -->
+<time datetime="01-20">20 Января</time>
+<!-- Только время, часы и минуты -->
+<time datetime="19:30">19:30</time>
+<!-- Также вы можете отобразить секунды и миллисекунды! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Дата и время -->
+<time datetime="2020-01-20T19:30">7.30pm, 20 Января 2020</time>
+<!-- Дата и время со смещением по часовому поясу -->
+<time datetime="2020-01-20T19:30+01:00">7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time>
+<!-- Вызов номера недели -->
+<time datetime="2020-W04">Четвертая неделя 2020</time>
+ +

Заключение

+ +

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

+ +

{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..fcee7272e4 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,435 @@ +--- +title: Создание гиперссылок +slug: Learn/HTML/Введение_в_HTML/Создание_гиперссылок +tags: + - Абсолютные + - Гиперссылки + - Единый указатель ресурса + - Заголовок + - Начинающий + - Обучение + - Относительные + - Руководство + - Ссылки + - Язык гипертекстовой разметки +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

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

+ + + + + + + + + + + + +
Предварительные требования:Базовое знакомство с HTML, описаное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.
+ +

Что такое гиперссылка?

+ +

Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}.)

+ +
+

Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

+
+ +

Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

Анатомия ссылки

+ +

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  {{anch("Ссылки-блоки")}}), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

+ +
<p>Я создал ссылку на
+  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
+</p>
+ +

Это дало нам следующий результат:

+ +

Я создал ссылку на домашнюю страницу Mozilla.

+ +

Добавляем инфомацию через атрибут title

+ +

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

+ +
<p>Я создал ссылку на
+  <a href="https://www.mozilla.org/ru/"
+     title="Лучшее место для поиска дополнительной информации
+     о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
+  </a>.
+</p>
+ +

Вот что получилось (описание появится, если навести курсор на ссылку):

+ +

Я создал ссылку на домашнюю страницу Mozilla.

+ +
+

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

+
+ +

Активное изучение: создаём собственную ссылку

+ +

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

+ + + +

Ссылки-блоки

+ +

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.

+ +
<a href="https://www.mozilla.org/ru/">
+  <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
+</a>
+ +
+

Примечание: Вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

+
+ +

Краткое руководство по URL-адресам и путям

+ +

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

+ +

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/.

+ +

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

+ +

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

+ +

Корень структуры — каталог  creating-hyperlinks. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).

+ +

В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответсвенно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

+ + + +
+

Примечание: Вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: 
+ ../../../сложный/путь/к/моему/файлу.html.

+
+ +

Фрагменты документа

+ +

Можно ссылаться на определенную часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

+ +
<h2 id="Почтовый_адрес">Почтовый адрес</h2>
+ +

Затем, чтобы связаться с  этим конкретным  id, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

+ +
<p>Хотите написать мне письмо? Используйте наш
+  <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
+</p>
+ +

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

+ +
<p>
+  <a href="#Почтовый_адрес">Почтовый адрес кампании</a>
+  можно найти в нижней части этой страницы.
+</p>
+ +

Абсолютные и относительные URL-адреса

+ +

Два понятия, с которыми вы столкнетесь в Интернете, — это абсолютный URL и относительный URL:

+ +
+
Абсолютный URL
+
Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая {{glossary("protocol","протокол")}} и {{glossary("domain name","доменное имя")}}. Например, если страница index.html загружается в каталог, называемый projects, который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com, страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как index.html, для загрузки, если он не указан в URL-адресе.).
+
+ +

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

+ +
+
Относительный URL
+
Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддериктории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).
+
+ +

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Советуем вам основательно разобраться в этой теме!

+ +

Практика написания хороших ссылок

+ +

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

+ + + +

Используйте четкие формулировки описания ссылок

+ +

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

+ + + +

Взгляните на этот пример:

+ +

Хороший текст ссылки: Скачать Firefox

+ +
<p><a href="https://firefox.com/">
+  Скачать Firefox
+</a></p>
+ +

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

+ +
<p><a href="https://firefox.com/">
+  Нажми сюда
+</a>
+чтобы скачать Firefox</p>
+
+ +

Советы:

+ + + +

Используйте относительные ссылки, где это возможно

+ +

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта  (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

+ + + +

Создавая ссылки на не HTML ресурсы — добавляйте описание

+ +

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсуствие описания может раздражать пользователя. Приведем пример:

+ + + +

Посмотрите на примеры, чтобы увидеть, как добавить описание:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Скачать отчет о продажах (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Посмотреть видео (видео откроется в отдельном окне, HD качество)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Играть в гонки (необходим Flash)
+</a></p>
+ +

Используйте атрибут download, когда создаете ссылку

+ +

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведем пример ссылки для загрузки браузера Firefox 39:

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
+  Скачать Firefox 39 для Windows
+</a>
+ +

Активное изучение: создание меню навигации

+ +

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

+ +

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

+ + + +

Что делать:

+ +
    +
  1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
    2. +
  2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
    3. +
  3. Скопируйте созданное меню в каждую страницу.
    4. +
  4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
    5. +
+ +

Когда закончите задание, посмотрите, как это должно выглядеть:

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

Если не удается сделать, или вы неуверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

+
+ +

Ссылки электронной почты

+ +

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент {{HTMLElement("a")}} и mailto: — адрес почты.

+ +

Самыми простыми и часто используемыми формами mailto: являются  subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

+ +
<a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>
+
+ +

В результате полчим ссылку вида: Отправить письмо для nowhere.

+ +

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".

+ +

Особенности и детали

+ +

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

+ +

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
+  Send mail with cc, bcc, subject and body
+</a>
+ +
+

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

+
+ +

Вот несколько примеров использования mailto URLs:

+ + + +

Заключение

+ +

Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + + +
+ + + + + +
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..1f3e03e508 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,181 @@ +--- +title: Отладка HTML +slug: Learn/HTML/Введение_в_HTML/Debugging_HTML +tags: + - Debugging + - Guide + - HTML + - Валидация + - Отладка +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Написать HTML — здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.

+ + + + + + + + + + + + +
Что нужно знать:Базовые знания HTML на уровне Начало работы с HTML, Основы редактирования текста в HTML, и Создание гиперссылок.
Чему вы научитесь:Искать проблемы в HTML с помощю инструментов отладки.
+ +

Отладка — это не страшно

+ +

Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке Rust, компилятор укажет на ошибку:

+ +

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на println!(Hello, world!"); , то заметите, что здесь отсутсвует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.

+ +

Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.

+ +

HTML и отладка

+ +

HTML не так сложен к пониманию, как Rust. HTML не компилируется в какую-либо другую форму перед тем, как браузер проанализирует это и покажет результат (он является интерпретируемым, а не компилируемым). Синтаксис HTML элементов  намного понятнее, чем у "настоящих языков программирования", таких как Rust, {{glossary("JavaScript")}}, или {{glossary("Python")}}. Способ, которым браузеры читают HTML более толерантен, чем у языков программирования, интерпретирующих свой код строже. Это одновременно и плохо, и хорошо.

+ +

Толерантный код

+ +

Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:

+ + + +

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

+ +
+

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

+
+ +

Активное обучение: Знакомство с толерантным кодом

+ +

Время изучить природу толерантного кода в HTML.

+ +
    +
  1. Для начала, скачайте наш пример отладки и сохраните локально. Эта демонстрация намеренно написана с ошибками, которые нам предстоит обнаружить.
    2. +
  2. Далее, откройте её в браузере. Вы увидите нечто вроде этого :A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Рассмотрим проблемы: +
      +
    • У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.
      • +
    • Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.
      • +
    • Следующая часть нарушает правила вложенности: <strong>strong <em>strong emphasised?</strong> what is this?</em>. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.
      • +
    • В атрибуте {{htmlattrxref("href","a")}} отсутсвует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
      • +
    +
    5. +
  5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на Обзор инструментов разработки в браузерах.
    6. +
  6. В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): +
      +
    • Параграфы и элементы списка получены с закрывающими тегами.
      • +
    • Было неочевидно, где элемент <strong> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причем до самого низа документа!
      • +
    • Некорректная вложенность была исправлена браузером следующим образом: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • Ссылка с отсутсвующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Валидация HTML

+ +

Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?

+ +

Лучше всего проверить страницу в  сервисе валидации разметки. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчет по ошибкам в нем.

+ +

The HTML validator homepage

+ +

HTML можно проверить по адресу, загрузив файл или напрямую ввести код HTML.

+ +

Активное обучение: Валидируем HTML-документ

+ +

Попробуем проверить документ-пример.

+ +
    +
  1. Откройте сервис валидации разметки в браузере.
    2. +
  2. Перейдите в режим Validate by Direct Input.
    3. +
  3. Скопируйте весь код документа (не только body) и вставьте в место для ввода.
    4. +
  4. Нажмите на Check (проверить).
    5. +
+ +

Вы увидите список ошибок и другую информацию.

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

Работа с сообщениями об ошибках

+ +

Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдемся по всем ошибкам и разберем, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.

+ + + +

Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ еще раз. Иногда одна ошибка ломает большую часть документа.

+ +

Когда вы увидите эту надпись, в вашем документе больше нет ошибок:

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Заключение

+ +

Теперь вы умеете отлаживать HTML. С новыми знаниями вам будет проще разобраться и в отладке более сложных языков — например, CSS и JavaScript. На этом мы заканчиваем вводный модуль курса HTML — время попробовать свои силы в упражнениях.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..13f4f458d1 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,291 @@ +--- +title: Структура документа и веб-сайта +slug: Learn/HTML/Введение_в_HTML/Структура_документа_и_веб-сайта +tags: + - Guide + - HTML + - Базовая разметка + - Гайд + - Для новичков + - С чего начать + - Структура сайта +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), {{glossary("HTML")}} также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.

+ + + + + + + + + + + + +
Необходимые знания:Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.
+ +

Основные составляющие документа

+ +

Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:

+ +
+
Заголовок (колонтитул)
+
Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
+
Навигационное меню
+
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
+
Основное содержимое
+
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
+
Боковая панель
+
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
+
Нижний колонтитул (футер)
+
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.
+
+ +

"Типичный веб-сайт" может быть структурирован примерно так:

+ +

+ +

HTML для структурирования содержимого

+ +

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы. 

+ +

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?

+ +
+

Заметка: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

+
+ +

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

+ +

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

+ + + +

Активное обучение: исследование кода для нашего примера

+ +

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы Вы взгянули на приведенный выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Заголовок моей страницы</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
+
+    <header>
+      <h1>Заголовок</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Домашняя страница</a></li>
+        <li><a href="#">Наша команда</a></li>
+        <li><a href="#">Проекты</a></li>
+        <li><a href="#">Контакты</a></li>
+      </ul>
+
+       <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Здесь основное содержимое нашей страницы -->
+    <main>
+
+      <!-- Она содержит статью -->
+      <article>
+        <h2>Заголовок статьи</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Подраздел</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Ещё один подраздел</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- Дополнительный контент также может быть вложен в основной контент -->
+      <aside>
+        <h2>Связанные темы</h2>
+
+        <ul>
+          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
+          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
+          <li><a href="#">Даже на севере Англии</a></li>
+          <li><a href="#">Здесь не перестаёт дождь</a></li>
+          <li><a href="#">Лаааадно...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
+
+    <footer>
+      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.

+ +

Подробнее об элементах HTML макета

+ +

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

+ + + +

Несемантические обертки

+ +

Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.

+ +

{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

+ +
<p>Пьяный Король возвратился в свою комнату в 01:00
+и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент
+свет на сцене должен быть приглушён]</span>.</p>
+ +

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

+ +

{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если Вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который Вы можете открыть в любой момент нахождения на сайте:

+ +
<div class="shopping-cart">
+  <h2>Корзина</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Итого: $237.89</p>
+</div>
+ +

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и  <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

+ +
+

Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают Ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе Вам будет трудно обновлять и поддерживать Ваши документы.

+
+ +

Перенос строки и горизонтальный разделитель

+ +

Два элемента, которые Вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:

+ +

<br> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

+ +
<p>Жила-была девчушка Нелл,<br>
+Любившая писать HTML:<br>
+Её семантика ужасна была — <br>
+Она и сама прочитать ничего не могла.</p>
+ +

Без элемента <br> абзац  разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

+ +

Жила-была девчушка Нелл,
+ Любившая писать HTML:
+ Её семантика ужасна была —
+ Она и сама прочитать ничего не могла.

+ +

<hr> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

+ +
<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
+<hr>
+<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>
+ +

Будет выглядеть примерно так:

+ +

Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.

+ +
+

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".

+ +

Планирование простого веб-сайта

+ +

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется {{glossary("Information architecture")}}. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

+ +
    +
  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
    6. +
+ +

A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

+ +

Самостоятельная работа: создайте свою собственную карту сайта

+ +

Приментие наш метод к своему сайту. О чем он будет?

+ +
+

Примечание: Сохраните свой код, он Вам ещё понадобится.

+
+ +

Заключение

+ +

Вы стали лучше понимаеть, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.

+ +

Дополнительные материалы

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..48904b9e17 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,772 @@ +--- +title: Начало работы с HTML +slug: Learn/HTML/Введение_в_HTML/Начало_работы +tags: + - Guide + - HTML + - Аттрибуты + - Для начинающих + - Комментарии + - Пробелы + - Программирование + - Руководство + - Урок + - элементы +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
+ +

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

+ + + + + + + + + + + + +
Необходимые знания:Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:Познакомиться с языком HTML и научиться описывать некоторые его элементы.
+ +

Что такое HTML?

+ +

{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

+ +
Мой кот очень сердитый
+ +

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф"  ({{htmlelement("p")}}), например:

+ +
<p>Мой кот очень сердитый</p>
+ +
+

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <title>, <TITLE>, <Title>, <TiTlE>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

+
+ +

Структура HTML элементов

+ +

Давайте рассмотрим элемент "параграф" чуть подробнее:

+ +

+ +

Основными частями элемента являются:

+ +
    +
  1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
    2. +
  2. Закрывающий тег: выглядит как и открывающий, но содержит слэш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
    3. +
  3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
    4. +
  4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.
    5. +
+ +

Активное изучение: создание вашего первого HTML элемента

+ +

Отредактируйте строку текста ниже в поле Ввод, обернув ее тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после нее, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

+ +

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Вложенные элементы

+ + + +

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:

+ +
<p>Мой кот <strong>очень</strong>  сердитый.</p>
+ +

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее писать неправильно:

+ +
<p>Мой кот <strong>очень сердитый.</p></strong>
+ +

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

+ +

Блочные и строчные элементы

+ + + +

Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.

+ + + +

Посмотрите на следующий пример:

+ +
<em>Первый</em><em>второй</em><em>третий</em>
+
+<p>четвертый</p><p>пятый</p><p>шестой</p>
+
+ +

{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).

+ +

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

+ +
+

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

+
+ +
+

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

+
+ +
+

Примечание: Вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

+
+ +

Пустые элементы

+ + + +

Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Это выведет на вашу страницу следующее:

+ +

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Примечание: Пустые элементы иногда называют void-элементами.

+
+ +

Атрибуты

+ +

У элементов также могут быть атрибуты, которые выглядят так:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.

+ +

Атрибут должен иметь:

+ +
    +
  1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
    2. +
  2. Имя атрибута и следующий за ним знак равенства.
    3. +
  3. Значение атрибута, заключенное в кавычки.
    4. +
+ +

Активное изучение: Добавление атрибутов в элемент

+ + + +

Возьмём для примера элемент {{htmlelement("a")}} — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

+ + + +

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

+ +

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Булевые атрибуты

+ + + +

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

+ +
<input type="text" disabled="disabled">
+ +

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

На выходе оба варианта будут выглядеть следующим образом:

+ +

{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Опускание кавычек вокруг значений атрибутов

+ + + +

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

+ +
<a href=https://www.mozilla.org/>любимый веб-сайт</a>
+ +

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
+ +

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

+ +

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.

+ +

Одинарные или двойные кавычки?

+ + + +

В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:

+ +
<a href="http://www.example.com">Ссылка к моему примеру.</a>
+
+<a href='http://www.example.com'>Ссылка к моему примеру.</a>
+ +

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

+ +
<a href="http://www.example.com'>Ссылка к моему примеру.</a>
+ +

Если вы используете один тип кавычек в своем HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

+ +
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

Поэтому вам нужно сделать так:

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

Структура HTML документа

+ +

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

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Тестовая страница</title>
+  </head>
+  <body>
+    <p>Это — моя страница</p>
+  </body>
+</html>
+ +

Вот что мы имеем:

+ +
    +
  1. <!DOCTYPE html>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
    2. +
  2. <html></html>: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент". 
    3. +
  3. <head></head>: Элемент {{htmlelement("head")}}. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
    4. +
  4. <meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
    5. +
  5. <title></title>: Элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
    6. +
  6. <body></body>: Элемент {{htmlelement("body")}}. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.
    7. +
+ +

Активное изучение: Добавление элементов в ваш HTML-документ

+ + + +

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

+ +
    +
  1. Скопировать пример HTML-страницы, расположенный выше.
    2. +
  2. Создать новый файл в текстовом редакторе.
    3. +
  3. Вставить код в ваш новый текстовый файл.
    4. +
  4. Сохранить файл как index.html.
    5. +
+ +
+

Примечание: Вы также можете найти этот базовый пример HTML на  MDN Learning Area Github repo.

+
+ +

Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:

+ +

Скриншот примера тестовой страницы
+ Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента {{htmlelement("body")}}. Попробуйте сделать следующее:

+ + + +

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Пробелы в HTML

+ + + +

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

+ +
<p>Собаки глупы.</p>
+
+<p>Собаки
+         глупы.</p>
+ +

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

+ +

Ссылки на сущности: Включение специальных символов в HTML

+ + + +

В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

+ +

Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с ампресанда (&) и завершается точкой с запятой (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Буквенный символСимвольный эквивалент
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

В  следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

+ +
<p>В HTML вы определяете параграф элементом <p>.</p>
+
+<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p>
+ +

В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент  <p> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.

+ +

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Примечание: Таблица всех доступных в  HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.

+
+ +

HTML комментарии

+ + + +

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

+ +

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!-- и -->, например:

+ +
<p> Меня нет в комментариях( </p>
+
+<!-- <p>А теперь есть!</p> -->
+ +

Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.

+ +

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Подведение итогов

+ +

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

+ +
+

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.

+
+ +

Смотрите также

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
+ +
+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..711c0bfdf3 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,994 @@ +--- +title: Основы редактирования текста в HTML +slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals +tags: + - Guide + - HTML + - Абзацы + - Введение в HTML + - Изучение + - Начинающий + - Параграфы + - Руководство + - Семантика + - Текст +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
+
 {{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+
+ +

Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

+ + + + + + + + + + + + +
Предварительные требования:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..
+ +

Основы: Заголовки и абзацы / параграфы

+ +

Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Упорядоченный контент делает чтение более легким и приятным.

+ +

В HTML каждый абзац заключен в элемент {{htmlelement("p")}}, подобно:

+ +
<p>Я параграф, да, это я.</p>
+ +

Каждый заголовок заключен в элемент заголовка {{htmlelement("h1")}}:

+ +
<h1>Я заголовок истории.</h1>
+ +

Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <h1> представляет главный заголовок, <h2> представляет подзаголовки, <h3> представляет под-подзаголовки и так далее.

+ +

Создание иерархической структуры

+ +

Например, в рассказе <h1> будет представлять заглавие рассказа, <h2> обозначит название каждой главы, <h3>  будет обозначать подзаголовки в каждой главе и так далее.

+ +
<h1> Сокрушительная скука </ h1>
+
+<p> Крис Миллс </ p>
+
+<h2> Глава 1: Темная ночь </ h2>
+
+<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p>
+
+<h2> Глава 2: Вечное молчание </ h2>
+
+<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p>
+
+<h3> Призрак говорит </ h3>
+
+<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>
+
+ +

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

+ + + +

Зачем нам необходима структура?

+ +

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).

+ +

Однако, когда вы откроете документ в своем браузере, вы увидите, что текст выглядит как один большой кусок!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

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

+ + + +

Поэтому нужно дать структурную разметку нашему контенту.

+ +

Активное изучение: создание структуры для нашего контента

+ +

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

+ +

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Почему мы нуждаемся в семантике?

+ +

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметoв; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

+ +

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».

+ +
<h1>Это заголовок верхнего уровня</h1>
+ +

По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).

+ +

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

+ +
<span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span>
+ +

Это элемент {{htmlelement ("span")}}. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.

+ +

Списки

+ +

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

+ +

Неупорядоченные

+ +

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:

+ +
молоко
+яйца
+хлеб
+хумус
+ +

Каждый неупорядоченный список начинается с элемента {{htmlelement ("ul")}} (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.

+ +

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):

+ +
<ul>
+  <li>молоко</li>
+  <li>яйца</li>
+  <li>хлеб</li>
+  <li>хумус</li>
+</ul>
+ +

Активное изучение: разметка неупорядоченного списка

+ +

Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Упорядоченные

+ +

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:

+ +
Доедьте до конца дороги
+Поверните направо
+Едьте прямо через первые два перекрестка с круговым движением
+Поверните налево на третьем перекрестке
+Школа справа от вас, 300 метров вверх по дороге
+ +

Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:

+ +
<ol>
+   <li>Доедьте до конца дороги</li>
+   <li>Поверните направо</li>
+   <li>Едьте прямо через первые два перекрестка с круговым движением</li>
+   <li>Поверните налево на третьем перекрестке</li>
+   <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
+</ol>
+ +

Активное изучение: разметка упорядоченного списка

+ +

Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Активное изучение: разметка собственной страницы рецептов

+ +

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

+ +

Вложенные списки

+ +

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

+ +
<ol>
+  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
+  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
+  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
+  <li>Измельчите все ингридиенты до состояния пасты.</li>
+  <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
+  <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
+</ol>
+ +
+
Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:
+
+ +
<ol>
+  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
+  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
+  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
+  <li>Измельчите все ингридиенты до состояния пасты.
+    <ul>
+      <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
+      <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
+    </ul>
+  </li>
+</ol>
+ +

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

+ +

Акцент и важность

+ +
+
В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.
+ +
+
+ +

Акцент

+ +

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

+ +

Я рад, что ты не опоздал.

+ +

Я рад, что ты не опоздал.

+ +

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

+ +

В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).

+ +
<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>
+ +

Важное значение

+ +

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

+ +

Эта жидкость очень токсична.
+
+ Я рассчитываю на вас. Не опаздывай!

+ +

В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение). Помимо того, что документ становится более полезным,  они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (смотрите ниже).

+ +
<p>Эта жидкость <strong>очень токсична</strong>.</p>
+
+<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>
+ +

При желании вы можете вложить важные и акцентированные слова друг в друга:

+ +
<p>Эта жидкость <strong>очень токсична</strong> —
+если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>
+ +

Активное изучение: Давайте будем важны!

+ +

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

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Курсив, жирный шрифт, подчеркивание...

+ +
+
Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике. Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее. Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчеркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.
+ +
+
+ +

HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.

+ +

Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.

+ + + +
+

Предупреждение о подчеркивании: люди сильно ассоциируют подчеркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчеркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.

+
+ +
<!-- Научные наименования -->
+<p>
+  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
+наиболее часто встречающийся вид колибри в северо-восточной Америке.
+</p>
+
+<!-- Иностранные слова -->
+<p>
+  Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- Явно неправильное произношение или написание -->
+<p>
+  Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок.
+</p>
+
+<!-- Выделение ключевых слов в инструкциях -->
+<ol>
+  <li>
+    <b>Отрежьте</b> два ломтика хлеба.
+  </li>
+  <li>
+    <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба.
+  </li>
+</ol>
+ +

Заключение

+ +

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете. 

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..1ecf1eb84a --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/index.html @@ -0,0 +1,67 @@ +--- +title: Введение в HTML +slug: Learn/HTML/Введение_в_HTML +tags: + - HTML + - Введение + - Для чайников + - Заголовок + - Начинающим + - Новичкам + - Основы HTML + - Семантика + - Ссылки + - Структура + - Текст +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

По сути, {{glossary("HTML")}} довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у документа шапка? три столбца с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Этот модуль расскажет Вам о первых двух возможностях HTML и научит фундаментальным концепциям и синтаксису, которые вам нужно знать, чтобы понять HTML.

+ +

Необходимые условия

+ +

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

+ +
+

Примечание: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как JSBin или Thimble.

+
+ +

Руководства

+ +

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

+ +
+
Начало работы с HTML
+
Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!
+
Что такое заголовок? Метаданные в HTML
+
Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).
+
Основы редактирования текста в HTML
+
Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье расматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
+
Создание гиперссылок
+
Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.
+
Углубленное форматирование текста
+
Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье Основы редактирования текста в HTML. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.
+
Структура документа и веб-сайта
+
Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации",  "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.
+
Отладка HTML
+
Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.
+
+ +

Оценка

+ +

Следующие задания проверят ваше понимание основ HTML, описанных в приведенных выше руководствах.

+ +
+
Разметка письма
+
Все мы рано или поздно учимся писать письма; также это полезеный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.
+
Структурируем страницу
+
Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.
+
+ +

Смотрите также

+ +
+
Основы интернет-грамотности
+
Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле Введение в HTML. Учащиееся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.
+
diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..c9ede9d116 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,101 @@ +--- +title: Разметка письма +slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter +tags: + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента <head>.

+ + + + + + + + + + + + +
Знания: +

Перед выполнением этого задания вы должны пройти Начало работы с HTML, Что такое заголовок? Метаданные в HTML, Основы редактирования текста в HTML, Создание гиперссылок, и Углубленное форматирование текста.

+
Цель: +

Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега <head>.

+
+ +

Отправная точка

+ +

Для начала задания, вы должны скачать текст, который вам надо отформатировать, и CSS стиль, который вы должны подключить к вашему HTML. Создайте .html файл используюя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редактороми, таким как JSBin или Thimble).

+ +

Описание проекта

+ +

В этом проекте, ваша задача - отформатировать письмо, которое должно быть размещено во внутренней сети университета. Это письмо - ответ исследователя будущему PhD студенту о его заявлении на работу в университете.

+ +

Блочные элементы / структура:

+ + + +

Строчные элементы:

+ + + +

Заголовок документа:

+ + + +

Советы и подсказки

+ + + +

Пример

+ +

Это скриншот размеченного письма:

+ +

Example

+ +

Оценка

+ +

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, в тему этого задания, или по тегу #mdn в нашем IRC-канале (Mozilla IRC). Сделайте это задание сами — вам некого обманывать, кроме себя самого.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..b5bb7fa235 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,101 @@ +--- +title: Структурируем страницу +slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content +tags: + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

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

+ + + + + + + + + + + + +
Что нужно знать:Вам пондобятся навыки из всего курса. Особое внимание уделите разделу Структура документа и веб-сайта.
Цель: +

Проверить знания структуры веб-страницы и ее перевода в разметку.

+
+ +

Отправная точка

+ +

Чтобы начать это, вы должны перейти и скачать архив содержаший все начальные активы. Архив содержит:

+ + + +

Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например JSBin или Thimble для исследования.

+ +

Краткое описание проекта

+ +

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

+ + + +

Вам необходимо добавить подходящую обертку для:

+ + + +

Вы также должны:

+ + + +

Советы и подсказки

+ + + +

Пример

+ +

Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Оценивание

+ +

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla, или в IRC-канале #mdn в IRC Mozilla. Попробуйте выполнить задание сами, ведь Вам некого обманывать, кроме себя самого!

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..dfb2840569 --- /dev/null +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,300 @@ +--- +title: Что внутри "head"? Метаданные в HTML +slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML +tags: + - HTML + - Meta + - favicon + - head + - lang + - metadata + - Для начинающих + - Заголовок + - Руководство + - иконка + - метаданные + - язык +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

Элемент {{glossary("Head", "head")}} HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

+ + + +

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

+ + + + + + + + + + + + +
Предварительные требования:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.
+ +

Что такое <head>?

+ +

Давайте снова посмотрим на HTML-документ из прошлой статьи:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Моя тестовая страница</title>
+  </head>
+  <body>
+    <p>Это — моя страница</p>
+  </body>
+</html>
+ +

Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведенном выше примере <head> совсем небольшой:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Моя тестовая страница</title>
+</head>
+ +

Однако на больших страницах блок <head> может быть довольно объемным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.

+ +

Название страницы (title)

+ +

Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда назвают заголовком страницы. Но это разные вещи!

+ + + +

Активное изучение: разбор простого примера

+ +
    +
  1. Чтобы приступить к активному изучению,  скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами: + +
      +
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
      2. +
    2. Нажмите на странице кнопку "Raw", нажмите Файл > Сохранить Как... в меню браузера и выберите папку для сохранения.
      3. +
    +
    2. +
  2. Откройте файл в браузере. Вы увидите что-то вроде этого: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Теперь должно стать совершенно ясно, в чём разница между <h1> и <title>!

    +
    3. +
  3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!
    4. +
+ +

Содержимое элемента <title> используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из <title> предлагается в качестве названия закладки.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Текст из <title> также появляется в результатах поиска, как мы скоро увидим.

+ +

Метаданные: Элемент <meta>

+ +

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент {{htmlelement("meta")}}. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

+ +

Указываем кодировку текста документа

+ +

В заголовке примера выше есть следующая строка:

+ +
<meta charset="utf-8">
+ +

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницов, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +
+

Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

+
+ +

Активное изучение: экспериментируем с символьными кодировками

+ +

Чтобы проверить это, вернитесь к HTML из примера <title> (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

+ +
<p>Пример на японском: ご飯が熱い。</p>
+ +

Указываем автора и описание

+ +

У элементов <meta> часто есть атрибуты name и content:

+ + + +

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

+ +
<meta name="author" content="Крис Миллс">
+<meta name="description" content="Задача MDN — в том, чтобы обучить
+новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">
+ +

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

+ +

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или {{glossary("SEO")}}.

+ +

Активное изучение: как поисковые системы используют описание

+ +

Описание из <meta name="description"> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

+ +
    +
  1. Перейдите на главную страницу Mozilla Developer Network.
    2. +
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
    3. +
  3. Найдите тег meta с описанием. Он выглядит так: + 
    <meta name="description" content="Веб-документация на MDN
+предоставляет собой информацию об открытых веб-технологиях,
+включая HTML, CSS и различные API для веб-сайтов и
+прогрессивных веб-приложений. Также на сайте содержатся материалы
+для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
    +
    4. +
  4. Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <meta> и <title> используется в результатах поиска, — мы не зря указали их!
    5. +
+ +

Результат поиска в Google

+ +
+

Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

+
+ +
+

Примечание: Многие типы <meta> больше не используются. Так, поисковые системы больше не используют данные из элемента <meta type="keywords" content="ваши, ключевые, слова, введите, здесь">, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

+
+ +

Другие виды метаданных

+ +

В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

+ +

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метеданных. В исходном коде MDN Web Docs вы можете найти строки:

+ +
<meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png">
+<meta property="og:description" content="Веб-документация на MDN предоставляет
+собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
+и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
+продуктах Mozilla, как Инструменты разработчика Firefox.">
+<meta property="og:title" content="MDN Web Docs">
+ +

Один из результатов добавления этих метеданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.У Twitter также есть собственный формат метаданных, с помощью которого  создается аналогичный эффект, при отображении URL сайта на twitter.com:

+ +
<meta name="twitter:title" content="MDN Web Docs">
+ +

Добавление иконок

+ +

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

+ +

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Чтобы добавить на страницу favicon:

+ +
    +
  1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
    2. +
  2. Добавьте ссылку на иконку в <head> документа: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

+ +
<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- Для iPhone с Retina-экраном высокого разрешения: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- Для iPad первого и второго поколения: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- Для других случаев - обычный favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

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

+ +

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

+ +

Подключение CSS и JavaScript

+ +

Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связянные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .

+ + + +

Активное изучение: добавляем на страницу CSS и JavaScript

+ +
    +
  1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
    2. +
  2. Откройте HTML в браузере и текстовом редакторе.
    3. +
  3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов {{htmlelement("link")}} и {{htmlelement("script")}}.
    4. +
+ +

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

+
+ +

Основной язык HTML страницы

+ +

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

+ +
<html lang="en-US">
+ +
<html lang="ru">
+
+ +

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

+ +

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

+ +
<p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

+ +

Заключение

+ +

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

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..a3a445dfc7 --- /dev/null +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,351 @@ +--- +title: Добавление векторной графики в веб-документ +slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

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

+
+ + + + + + + + + + + + +
Навыки:Знание основ HTML и умение добавлять изображение в веб-документ.
Цель:Изучить как встроить SVG (векторное) изображение на вебстраницу.
+ +
+

Примечание: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.

+
+ +

Что такое векторная графика?

+ +

В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:

+ + + +

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.

+ +

Различия становятся заметны, когда Вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним. 

+ +

Two star images

+ +

Two star images zoomed in, one crisp and the other blurry

+ +
+

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: vector-versus-raster.html !

+
+ +

Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.

+ +

Что такое SVG?

+ +

SVG это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (примение маски к изображению.)

+ +

В качестве простого примера, следующий код создает круг и прямоугольник:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

В результате получается следующее:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

+ +

Дополнительные преимущества SVG:

+ + + +

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

+ + + +

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

+ +
+

Примечание: В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на статью, описывающую как подготовить SVG изображение для веб-документа.

+
+ +

Добавление SVG на страницы

+ +

В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.

+ +

Быстрый путь: {{htmlelement("img")}}

+ +

Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите Изображения в HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87px"
+    width="100px" />
+ +

Плюсы

+ + + +

Минусы

+ + + +

Устранение неполадок и кросс-браузерная поддержка

+ +

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

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

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Подобно методу <img>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.

+ +

Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.

+ +

Как включить SVG в ваш HTML код

+ +

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Плюсы

+ + + +

Минусы

+ + + + + +

Как встраивать SVG при помощи {{htmlelement("iframe")}}

+ +

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe> выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.

+ +

Вот краткий обзор:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Это - определенно не самый лучший метод для выбора:

+ +

Минусы

+ + + +

Активное изучение: поиграйте с SVG

+ +

В этом разделе ативного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в областе Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.

+ +

Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку Reset.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Заключение

+ +

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

+ +

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

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..d96558e3da --- /dev/null +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,364 @@ +--- +title: Изображения в HTML +slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного {{htmlelement("img")}}  элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя  {{htmlelement("figure")}}, и разберём, как это относится к фоновым изображениям {{glossary("CSS")}}. 

+ + + + + + + + + + + + +
Необходимы:Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML).
Цель:Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.
+ +

Как разместить картинку на странице?

+ +

Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, source). Атрибут src содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута href для элемента {{htmlelement("a")}}.

+ +
+

Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адресса.

+
+ +

Например, если ваше изображение называется dinosaur.jpg, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:

+ +
<img src="dinosaur.jpg">
+ +

Если изображение было в поддиректории images , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:

+ +
<img src="images/dinosaur.jpg">
+ +

И так далее.

+ +
+

Примечание: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: dinosaur.jpg лучше, чем img835.png.

+
+ +

Вы можете встроить изображение используя абсолютный URL, например:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера.  Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.

+ +
+

Внимание: Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:

+ + + +

Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте src ссылку на изображение, размещенное на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.

+
+ +

Наш код выше даст нам следующий результат:

+ +

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

+ +
+

Примечание: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

+
+ +
+

Примечание: Вы можете найти готовый пример этого раздела, размещённый на Github (смотрите также исходный код).

+
+ +

Альтернативный текст

+ +

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

+ +
<img src="images/dinosaur.jpg"
+     alt="Голова и туловище скелета динозавра;
+         у него большая голова с длинными острыми зубами">
+ +

Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведем несколько примеров:

+ + + +

Что именно вы должны писать в атрибут alt? В первую очередь, это зависит от того, зачем изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:

+ + + +

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

+ +
+

Примечание: Более подробную информацию, смотрите здесь: Альтернативный текст.

+
+ +

Ширина и высота

+ +

Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать  Cmd + I  чтобы  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341">
+ +

Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

Это хорошая практика, в результате страница загрузится быстрее и более гладко.

+ +

Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.

+ +
+

Примечание: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.

+
+ +

Заголовок изображения

+ +

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

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum">
+ +

Это дает нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

Однако это не рекомендуется - title имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.

+ +

Активное обучение: встраивание изображения

+ +

Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

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

+ +

Мы также хотели бы, чтобы вы:

+ + + +

Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку Reset. Если вы реально не будете понимать как сделать, нажмите кнопку Show solution, чтобы увидеть ответ:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Придание изображению структуры и установка заголовка

+ +

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

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?

+ +

Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

Элемент {{htmlelement("figcaption")}} говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента {{htmlelement("figure")}}.

+ +
+

Замечание: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} обеспечивает замену функционала отсутствующего изображения. Таким образом, заголовки и alt не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.

+
+ +

Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: 

+ + + +

Тег <figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.

+ +

Активное изучение: создание <figure>

+ +

В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:

+ + + +

В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку Reset. Если вы застряли, нажмите кнопку Show solution, чтобы увидеть ответ:

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Фоновые изображения CSS

+ +

Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие background-* применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!

+ +

Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.

+ +
+

Замечание: Вы можете узнать больше о фоновых изображениях CSS в нашей теме о CSS.

+
+ +

Проверьте свои навыки!

+ +

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше. Смотрите Проверьте знания по изображениям в HTML.

+ +

Резюме

+ +

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

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html new file mode 100644 index 0000000000..e00777dabe --- /dev/null +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html @@ -0,0 +1,74 @@ +--- +title: 'Проверьте свои знания: Изображения в HTML' +slug: >- + Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML/Проверьте_свои_знания:_Изображения_в_HTML +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images +--- +
{{learnsidebar}}
+ +

Цель этого теста навыков - оценить, поняли ли вы нашу статью Изображения в HTML.

+ +
+

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch для работы с задачами.

+
+ +

Изображения в HTML №1

+ +

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

+ + + +

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}

+ +
+

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

+
+ +

Изображения в HTML №2

+ +

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

+ +

Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}

+ +
+

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

+
+ +

Изображения в HTML №3

+ +

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

+ +

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}

+ +
+

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

+
+ +

Оценка или дополнительная помощь

+ +

Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.

+ +

Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:

+ +
    +
  1. Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.
    2. +
  2. Напишите сообщение с просьбой об оценке и / или помощи в MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
      • +
    • Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
      • +
    • Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
      • +
    • Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.
      • +
    +
    3. +
diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..4171780730 --- /dev/null +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,106 @@ +--- +title: Заставка Mozilla +slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!

+ + + + + + + + + + + + +
Предпосылки:Прежде чем приступить к этому заданию, вы должны проработать остальную часть модуля мультимедиа и встраивания.
Задача:Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML.
+ +

Отправная точка

+ +

Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(mdn-splash-page-start). Сохраните содержимое index.html в файле с именем index.html на вашем диске в новой папке. Затем сохраните pattern.png в той же папке (правый клик на изображении для выбора опции сохранения).

+ +

Сохраните изображения из папки originals тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.

+ +
+

Note: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.

+
+ +

Описание проекта

+ +

В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:

+ +

Подготовка изображений

+ +

Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:

+ + + +

Назовите их как-нибудь разумно, например firefoxlogo400.pngи firefoxlogo120.png.

+ +

Вместе с mdn.svg, эти изображения будут иконками для ссылок на другие ресурсы внутри секции further-info. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и index.html.

+ +

Затем создайте фоновую версию  red-panda.jpg шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и index.html.

+ +
+

Note: Следует  обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.

+
+ +

Добавление логотипа в шапку

+ +

Добавьте внутрь элемента {{htmlelement("header")}} элемент {{htmlelement("img")}}, который вставит уменьшенную версию логотипа Firefox в шапку.

+ +

Добавление видео к основному содержанию статьи

+ +

Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.

+ +

Добавление отзывчивых изображений к ссылкам с доп. информацей

+ +

Внутри {{htmlelement("div")}} с классом further-info вы найдёте четыре элемента {{htmlelement("a")}}  — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.

+ +

В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.

+ +

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

+ +
+

Note: Для проверки правильности работы srcset/sizes , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем  вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.

+
+ +

Искусственно измененная красная панда

+ +

Внутри элемента {{htmlelement("div")}} с классом red-panda, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.

+ +

Пример

+ +

Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Заключение

+ +

Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку в ветке форума этого упражнения, либо в IRC канале #mdn на Mozilla IRC. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться! 

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

В этом модуле

+ + diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html" deleted file mode 100644 index a3a445dfc7..0000000000 --- "a/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html" +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Добавление векторной графики в веб-документ -slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

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

-
- - - - - - - - - - - - -
Навыки:Знание основ HTML и умение добавлять изображение в веб-документ.
Цель:Изучить как встроить SVG (векторное) изображение на вебстраницу.
- -
-

Примечание: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.

-
- -

Что такое векторная графика?

- -

В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:

- - - -

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.

- -

Различия становятся заметны, когда Вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним. 

- -

Two star images

- -

Two star images zoomed in, one crisp and the other blurry

- -
-

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: vector-versus-raster.html !

-
- -

Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.

- -

Что такое SVG?

- -

SVG это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (примение маски к изображению.)

- -

В качестве простого примера, следующий код создает круг и прямоугольник:

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="black" />
-  <circle cx="150" cy="100" r="90" fill="blue" />
-</svg>
- -

В результате получается следующее:

- -

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

- -

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

- -

Дополнительные преимущества SVG:

- - - -

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

- - - -

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

- -
-

Примечание: В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на статью, описывающую как подготовить SVG изображение для веб-документа.

-
- -

Добавление SVG на страницы

- -

В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.

- -

Быстрый путь: {{htmlelement("img")}}

- -

Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите Изображения в HTML.

- -
<img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87px"
-    width="100px" />
- -

Плюсы

- - - -

Минусы

- - - -

Устранение неполадок и кросс-браузерная поддержка

- -

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:

- -
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
- -

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

- -
background: url("fallback.png") no-repeat center;
-background-image: url("image.svg");
-background-size: contain;
- -

Подобно методу <img>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.

- -

Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.

- -

Как включить SVG в ваш HTML код

- -

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

Плюсы

- - - -

Минусы

- - - - - -

Как встраивать SVG при помощи {{htmlelement("iframe")}}

- -

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe> выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.

- -

Вот краткий обзор:

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Triangle with three unequal sides" />
-</iframe>
- -

Это - определенно не самый лучший метод для выбора:

- -

Минусы

- - - -

Активное изучение: поиграйте с SVG

- -

В этом разделе ативного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в областе Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.

- -

Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку Reset.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Заключение

- -

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

- -

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

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\267\320\260\321\201\321\202\320\260\320\262\320\272\320\260_mozilla/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\267\320\260\321\201\321\202\320\260\320\262\320\272\320\260_mozilla/index.html" deleted file mode 100644 index 4171780730..0000000000 --- "a/files/ru/learn/html/multimedia_and_embedding/\320\267\320\260\321\201\321\202\320\260\320\262\320\272\320\260_mozilla/index.html" +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Заставка Mozilla -slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla -translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -

В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!

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

Отправная точка

- -

Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(mdn-splash-page-start). Сохраните содержимое index.html в файле с именем index.html на вашем диске в новой папке. Затем сохраните pattern.png в той же папке (правый клик на изображении для выбора опции сохранения).

- -

Сохраните изображения из папки originals тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.

- -
-

Note: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.

-
- -

Описание проекта

- -

В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:

- -

Подготовка изображений

- -

Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:

- - - -

Назовите их как-нибудь разумно, например firefoxlogo400.pngи firefoxlogo120.png.

- -

Вместе с mdn.svg, эти изображения будут иконками для ссылок на другие ресурсы внутри секции further-info. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и index.html.

- -

Затем создайте фоновую версию  red-panda.jpg шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и index.html.

- -
-

Note: Следует  обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.

-
- -

Добавление логотипа в шапку

- -

Добавьте внутрь элемента {{htmlelement("header")}} элемент {{htmlelement("img")}}, который вставит уменьшенную версию логотипа Firefox в шапку.

- -

Добавление видео к основному содержанию статьи

- -

Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.

- -

Добавление отзывчивых изображений к ссылкам с доп. информацей

- -

Внутри {{htmlelement("div")}} с классом further-info вы найдёте четыре элемента {{htmlelement("a")}}  — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.

- -

В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.

- -

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

- -
-

Note: Для проверки правильности работы srcset/sizes , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем  вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.

-
- -

Искусственно измененная красная панда

- -

Внутри элемента {{htmlelement("div")}} с классом red-panda, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.

- -

Пример

- -

Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.

- -

A wide shot of our example splash page

- -

A narrow shot of our example splash page

- -

Заключение

- -

Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку в ветке форума этого упражнения, либо в IRC канале #mdn на Mozilla IRC. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться! 

- -

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" deleted file mode 100644 index d96558e3da..0000000000 --- "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" +++ /dev/null @@ -1,364 +0,0 @@ ---- -title: Изображения в HTML -slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
- -

В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного {{htmlelement("img")}}  элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя  {{htmlelement("figure")}}, и разберём, как это относится к фоновым изображениям {{glossary("CSS")}}. 

- - - - - - - - - - - - -
Необходимы:Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML).
Цель:Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.
- -

Как разместить картинку на странице?

- -

Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, source). Атрибут src содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута href для элемента {{htmlelement("a")}}.

- -
-

Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адресса.

-
- -

Например, если ваше изображение называется dinosaur.jpg, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:

- -
<img src="dinosaur.jpg">
- -

Если изображение было в поддиректории images , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:

- -
<img src="images/dinosaur.jpg">
- -

И так далее.

- -
-

Примечание: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: dinosaur.jpg лучше, чем img835.png.

-
- -

Вы можете встроить изображение используя абсолютный URL, например:

- -
<img src="https://www.example.com/images/dinosaur.jpg">
- -

Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера.  Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.

- -
-

Внимание: Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:

- - - -

Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте src ссылку на изображение, размещенное на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.

-
- -

Наш код выше даст нам следующий результат:

- -

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

- -
-

Примечание: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

-
- -
-

Примечание: Вы можете найти готовый пример этого раздела, размещённый на Github (смотрите также исходный код).

-
- -

Альтернативный текст

- -

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

- -
<img src="images/dinosaur.jpg"
-     alt="Голова и туловище скелета динозавра;
-         у него большая голова с длинными острыми зубами">
- -

Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:

- -

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведем несколько примеров:

- - - -

Что именно вы должны писать в атрибут alt? В первую очередь, это зависит от того, зачем изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:

- - - -

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

- -
-

Примечание: Более подробную информацию, смотрите здесь: Альтернативный текст.

-
- -

Ширина и высота

- -

Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать  Cmd + I  чтобы  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341">
- -

Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:

- -

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

- -

Это хорошая практика, в результате страница загрузится быстрее и более гладко.

- -

Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.

- -
-

Примечание: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.

-
- -

Заголовок изображения

- -

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

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341"
-     title="A T-Rex on display in the Manchester University Museum">
- -

Это дает нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

- -

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

- -

Однако это не рекомендуется - title имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.

- -

Активное обучение: встраивание изображения

- -

Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

- -

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

- -

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

- -

Мы также хотели бы, чтобы вы:

- - - -

Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку Reset. Если вы реально не будете понимать как сделать, нажмите кнопку Show solution, чтобы увидеть ответ:

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Придание изображению структуры и установка заголовка

- -

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

- -
<div class="figure">
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <p>A T-Rex on display in the Manchester University Museum.</p>
-</div>
- -

Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?

- -

Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:

- -
<figure>
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
-</figure>
- -

Элемент {{htmlelement("figcaption")}} говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента {{htmlelement("figure")}}.

- -
-

Замечание: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} обеспечивает замену функционала отсутствующего изображения. Таким образом, заголовки и alt не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.

-
- -

Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: 

- - - -

Тег <figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.

- -

Активное изучение: создание <figure>

- -

В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:

- - - -

В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку Reset. Если вы застряли, нажмите кнопку Show solution, чтобы увидеть ответ:

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

Фоновые изображения CSS

- -

Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие background-* применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

- -
p {
-  background-image: url("images/dinosaur.jpg");
-}
- -

Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!

- -

Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.

- -
-

Замечание: Вы можете узнать больше о фоновых изображениях CSS в нашей теме о CSS.

-
- -

Проверьте свои навыки!

- -

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше. Смотрите Проверьте знания по изображениям в HTML.

- -

Резюме

- -

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

- -

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" deleted file mode 100644 index e00777dabe..0000000000 --- "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/\320\277\321\200\320\276\320\262\320\265\321\200\321\214\321\202\320\265_\321\201\320\262\320\276\320\270_\320\267\320\275\320\260\320\275\320\270\321\217_colon__\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 'Проверьте свои знания: Изображения в HTML' -slug: >- - Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML/Проверьте_свои_знания:_Изображения_в_HTML -translation_of: >- - Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images ---- -
{{learnsidebar}}
- -

Цель этого теста навыков - оценить, поняли ли вы нашу статью Изображения в HTML.

- -
-

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch для работы с задачами.

-
- -

Изображения в HTML №1

- -

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

- - - -

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}

- -
-

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

-
- -

Изображения в HTML №2

- -

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

- -

Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}

- -
-

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

-
- -

Изображения в HTML №3

- -

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

- -

Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}

- -
-

Загрузите файл для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.

-
- -

Оценка или дополнительная помощь

- -

Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.

- -

Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:

- -
    -
  1. Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.
    2. -
  2. Напишите сообщение с просьбой об оценке и / или помощи в MDN Discourse forum Learning category. Ваш пост должен включать: -
      -
    • Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
      • -
    • Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
      • -
    • Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
      • -
    • Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.
      • -
    -
    3. -
diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/advanced_text_formatting/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/advanced_text_formatting/index.html" deleted file mode 100644 index fdebae6e91..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/advanced_text_formatting/index.html" +++ /dev/null @@ -1,679 +0,0 @@ ---- -title: Углубленное форматирование текста -slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting -tags: - - Beginner - - Guide - - HTML - - Начинающий - - Руководство -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
- -

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

- - - - - - - - - - - - -
Предварительные требования: -

Базовое знакомство с HTML, раскрытое в 
- Начало работы с HTML. Форматирование текста с помощью HTML, описанное в статье Основы редактирования текста в HTML.

-
Задача:Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.
- -

Списки описания

- -

В основах HTML-текста мы рассмотрели, как пометить привычные типы списков в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.

- -

Давайте рассмотрим пример набора терминов и определений:

- -
Солилоквий
-Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
-Монолог
-Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
-Ремарка
-В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
- -

В списках описания используется иная оболочка, чем в других типах списков — {{htmlelement ("dl")}} (от description list); кроме того, каждый термин завёрнут в элемент {{htmlelement ("dt")}} (description term — термин для описания) и каждое определение завёрнуто в элемент {{htmlelement ("dd")}} (description definition — описание определения).

- -

Закончим разметку нашего примера:

- -
<dl>
-  <dt>Солилоквий</dt>
-  <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd>
-  <dt>Монолог</dt>
-  <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd>
-  <dt>Ремарка</dt>
-  <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd>
-</dl>
- -

В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:

- -
-
Солилоквий
-
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
-
Монолог
-
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
-
Ремарка
-
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
-
- -

Заметьте, что разрешено давать одному элементу несколько описаний:

- -
-
Ремарка
-
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
-
В письменности: отметка, примечание (устар.).
-
- -

Активное обучение: разметка набора определений

- -

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

- -

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Цитаты

- -

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

- -

Блочные цитаты

- -

Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть ее внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.

- -

Например, следующая разметка берется из страницы элемента MDN <blockquote>:

- -
<p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
-Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
- -

Чтобы превратить её в блочную цитату, мы просто делаем следующее:

- -
<blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
-  <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
-</blockquote>
- -

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

- -
-

HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нём текст является развёрнутой цитатой.

-
- -

Строчные цитаты

- -

Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <q> MDN:

- -
<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
-для коротких цитат, не требующих прерывания абзаца</q>.</p>
- -

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

- -

Элемент цитирования — <q> — предназначен для коротких цитат, не требующих прерывания абзаца.

- -

Цитирование

- -

Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <cite> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <cite> с источником цитаты:

- -
<p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
-<cite>блочных цитатах</cite></a>:
-</p>
-
-<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-  <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
-  Quotation Element</em>) указывает на то, что заключённый в нем текст является развёрнутой цитатой.</p>
-</blockquote>
-
-<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
-для коротких цитат, не требующих прерывания абзаца</q>. -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
-<cite>Строчные цитаты</cite></a>.</p>
- -

По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html

- -

Активное обучение: кто это сказал?

- -

Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:

- -
    -
  1. Преобразуйте средний абзац в блочную цитату (<blockquote>), который включает атрибут cite.
    2. -
  2. Заверните часть третьего абзаца в строчную цитату, которая включает атрибут cite.
    3. -
  3. Включите элемент <cite> для каждой ссылки.
    4. -
- -

Источники цитирования, которые вам потребуются:

- - - -

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

- -

Аббревиатуры

- -

Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это {{htmlelement ("abbr")}}, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута {{htmlattrxref("title")}}.)

- -

Давайте рассмотрим несколько примеров:

- -
<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p>
-
-<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>
-
- -

Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):

- -

Мы используем HTML для структурирования наших веб-документов.

- -

Я думаю, Почт. Грин сделал это на кухне с бензопилой.

- -
-

Примечание: Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревитатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.

-
- -

Активное обучение: выделение аббревиатуры

- -

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

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -

Разметка контактных данных

- -

HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:

- -
<address>
-  <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p>
-</address>
- -

Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не любого адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдет:

- -
<address>
-  <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p>
-</address>
- -

Верхний и нижний индекс

- -

Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.

- -

Приведем пример:

- -
<p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>
-<p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>
- -

Результат этого кода выглядит следующим образом:

- -

Я просыпаюсь в 635 часов утра.

- -

Химическая формула кофеина: C8H10N4O2.

- -

Если x2 равно 9, x должен равняться 3 или -3.

- -

Представление компьютерного кода

- -

Существует несколько элементов для маркировки компьютерного кода с использованием HTML:

- - - -

Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла other-semantics.html):

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Owww, stop poking me!');
-}</code></pre>
-
-<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
-
-<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
-
-
-<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
- -

Вышеприведенный код будет выглядеть так:

- -

{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}

- -

Разметка времени и даты

- -

HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:

- -
<time datetime="2020-01-20">20 Января 2020</time>
- -

Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:

- - - -

Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.

- -

В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:

- -
<!-- Стандартная дата -->
-<time datetime="2020-01-20">20 Января 2020</time>
-<!-- Только год и месяц -->
-<time datetime="2020-01">Январь 2020</time>
-<!-- Только месяц и день -->
-<time datetime="01-20">20 Января</time>
-<!-- Только время, часы и минуты -->
-<time datetime="19:30">19:30</time>
-<!-- Также вы можете отобразить секунды и миллисекунды! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
-<!-- Дата и время -->
-<time datetime="2020-01-20T19:30">7.30pm, 20 Января 2020</time>
-<!-- Дата и время со смещением по часовому поясу -->
-<time datetime="2020-01-20T19:30+01:00">7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time>
-<!-- Вызов номера недели -->
-<time datetime="2020-W04">Четвертая неделя 2020</time>
- -

Заключение

- -

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

- -

{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/debugging_html/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/debugging_html/index.html" deleted file mode 100644 index 1f3e03e508..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/debugging_html/index.html" +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Отладка HTML -slug: Learn/HTML/Введение_в_HTML/Debugging_HTML -tags: - - Debugging - - Guide - - HTML - - Валидация - - Отладка -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Написать HTML — здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.

- - - - - - - - - - - - -
Что нужно знать:Базовые знания HTML на уровне Начало работы с HTML, Основы редактирования текста в HTML, и Создание гиперссылок.
Чему вы научитесь:Искать проблемы в HTML с помощю инструментов отладки.
- -

Отладка — это не страшно

- -

Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке Rust, компилятор укажет на ошибку:

- -

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на println!(Hello, world!"); , то заметите, что здесь отсутсвует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.

- -

Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.

- -

HTML и отладка

- -

HTML не так сложен к пониманию, как Rust. HTML не компилируется в какую-либо другую форму перед тем, как браузер проанализирует это и покажет результат (он является интерпретируемым, а не компилируемым). Синтаксис HTML элементов  намного понятнее, чем у "настоящих языков программирования", таких как Rust, {{glossary("JavaScript")}}, или {{glossary("Python")}}. Способ, которым браузеры читают HTML более толерантен, чем у языков программирования, интерпретирующих свой код строже. Это одновременно и плохо, и хорошо.

- -

Толерантный код

- -

Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:

- - - -

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

- -
-

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

-
- -

Активное обучение: Знакомство с толерантным кодом

- -

Время изучить природу толерантного кода в HTML.

- -
    -
  1. Для начала, скачайте наш пример отладки и сохраните локально. Эта демонстрация намеренно написана с ошибками, которые нам предстоит обнаружить.
    2. -
  2. Далее, откройте её в браузере. Вы увидите нечто вроде этого :A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. -
  3. Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа): - 
    <h1>HTML debugging examples</h1>
-
-<p>What causes errors in HTML?
-
-<ul>
-  <li>Unclosed elements: If an element is <strong>not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  <li>Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-      what is this?</em>
-
-  <li>Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-      homepage</a>
-</ul>
    -
    4. -
  4. Рассмотрим проблемы: -
      -
    • У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.
      • -
    • Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.
      • -
    • Следующая часть нарушает правила вложенности: <strong>strong <em>strong emphasised?</strong> what is this?</em>. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.
      • -
    • В атрибуте {{htmlattrxref("href","a")}} отсутсвует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
      • -
    -
    5. -
  5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на Обзор инструментов разработки в браузерах.
    6. -
  6. В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. -
  7. Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): -
      -
    • Параграфы и элементы списка получены с закрывающими тегами.
      • -
    • Было неочевидно, где элемент <strong> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причем до самого низа документа!
      • -
    • Некорректная вложенность была исправлена браузером следующим образом: - 
      <strong>strong
-  <em>strong emphasised?</em>
-</strong>
-<em> what is this?</em>
      -
      • -
    • Ссылка с отсутсвующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: - 
      <li>
-  <strong>Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: </strong>
-</li>
      -
      • -
    -
    8. -
- -

Валидация HTML

- -

Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?

- -

Лучше всего проверить страницу в  сервисе валидации разметки. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчет по ошибкам в нем.

- -

The HTML validator homepage

- -

HTML можно проверить по адресу, загрузив файл или напрямую ввести код HTML.

- -

Активное обучение: Валидируем HTML-документ

- -

Попробуем проверить документ-пример.

- -
    -
  1. Откройте сервис валидации разметки в браузере.
    2. -
  2. Перейдите в режим Validate by Direct Input.
    3. -
  3. Скопируйте весь код документа (не только body) и вставьте в место для ввода.
    4. -
  4. Нажмите на Check (проверить).
    5. -
- -

Вы увидите список ошибок и другую информацию.

- -

A list of of HTML validation results from the W3C markup validation service

- -

Работа с сообщениями об ошибках

- -

Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдемся по всем ошибкам и разберем, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.

- - - -

Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ еще раз. Иногда одна ошибка ломает большую часть документа.

- -

Когда вы увидите эту надпись, в вашем документе больше нет ошибок:

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Заключение

- -

Теперь вы умеете отлаживать HTML. С новыми знаниями вам будет проще разобраться и в отладке более сложных языков — например, CSS и JavaScript. На этом мы заканчиваем вводный модуль курса HTML — время попробовать свои силы в упражнениях.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/html_text_fundamentals/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/html_text_fundamentals/index.html" deleted file mode 100644 index 711c0bfdf3..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/html_text_fundamentals/index.html" +++ /dev/null @@ -1,994 +0,0 @@ ---- -title: Основы редактирования текста в HTML -slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals -tags: - - Guide - - HTML - - Абзацы - - Введение в HTML - - Изучение - - Начинающий - - Параграфы - - Руководство - - Семантика - - Текст -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
-
 {{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
-
- -

Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

- - - - - - - - - - - - -
Предварительные требования:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..
- -

Основы: Заголовки и абзацы / параграфы

- -

Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Упорядоченный контент делает чтение более легким и приятным.

- -

В HTML каждый абзац заключен в элемент {{htmlelement("p")}}, подобно:

- -
<p>Я параграф, да, это я.</p>
- -

Каждый заголовок заключен в элемент заголовка {{htmlelement("h1")}}:

- -
<h1>Я заголовок истории.</h1>
- -

Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <h1> представляет главный заголовок, <h2> представляет подзаголовки, <h3> представляет под-подзаголовки и так далее.

- -

Создание иерархической структуры

- -

Например, в рассказе <h1> будет представлять заглавие рассказа, <h2> обозначит название каждой главы, <h3>  будет обозначать подзаголовки в каждой главе и так далее.

- -
<h1> Сокрушительная скука </ h1>
-
-<p> Крис Миллс </ p>
-
-<h2> Глава 1: Темная ночь </ h2>
-
-<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p>
-
-<h2> Глава 2: Вечное молчание </ h2>
-
-<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p>
-
-<h3> Призрак говорит </ h3>
-
-<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>
-
- -

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

- - - -

Зачем нам необходима структура?

- -

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).

- -

Однако, когда вы откроете документ в своем браузере, вы увидите, что текст выглядит как один большой кусок!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

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

- - - -

Поэтому нужно дать структурную разметку нашему контенту.

- -

Активное изучение: создание структуры для нашего контента

- -

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

- -

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Почему мы нуждаемся в семантике?

- -

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметoв; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

- -

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».

- -
<h1>Это заголовок верхнего уровня</h1>
- -

По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).

- -

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

- -
<span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span>
- -

Это элемент {{htmlelement ("span")}}. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.

- -

Списки

- -

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

- -

Неупорядоченные

- -

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:

- -
молоко
-яйца
-хлеб
-хумус
- -

Каждый неупорядоченный список начинается с элемента {{htmlelement ("ul")}} (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.

- -

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):

- -
<ul>
-  <li>молоко</li>
-  <li>яйца</li>
-  <li>хлеб</li>
-  <li>хумус</li>
-</ul>
- -

Активное изучение: разметка неупорядоченного списка

- -

Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

- -

Упорядоченные

- -

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:

- -
Доедьте до конца дороги
-Поверните направо
-Едьте прямо через первые два перекрестка с круговым движением
-Поверните налево на третьем перекрестке
-Школа справа от вас, 300 метров вверх по дороге
- -

Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:

- -
<ol>
-   <li>Доедьте до конца дороги</li>
-   <li>Поверните направо</li>
-   <li>Едьте прямо через первые два перекрестка с круговым движением</li>
-   <li>Поверните налево на третьем перекрестке</li>
-   <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
-</ol>
- -

Активное изучение: разметка упорядоченного списка

- -

Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

- -

Активное изучение: разметка собственной страницы рецептов

- -

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

- - - -

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

- -

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

- -

Вложенные списки

- -

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

- -
<ol>
-  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
-  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
-  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
-  <li>Измельчите все ингридиенты до состояния пасты.</li>
-  <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
-  <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
-</ol>
- -
-
Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:
-
- -
<ol>
-  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
-  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
-  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
-  <li>Измельчите все ингридиенты до состояния пасты.
-    <ul>
-      <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
-      <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
-    </ul>
-  </li>
-</ol>
- -

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

- -

Акцент и важность

- -
-
В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.
- -
-
- -

Акцент

- -

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

- -

Я рад, что ты не опоздал.

- -

Я рад, что ты не опоздал.

- -

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

- -

В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).

- -
<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>
- -

Важное значение

- -

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

- -

Эта жидкость очень токсична.
-
- Я рассчитываю на вас. Не опаздывай!

- -

В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение). Помимо того, что документ становится более полезным,  они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (смотрите ниже).

- -
<p>Эта жидкость <strong>очень токсична</strong>.</p>
-
-<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>
- -

При желании вы можете вложить важные и акцентированные слова друг в друга:

- -
<p>Эта жидкость <strong>очень токсична</strong> —
-если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>
- -

Активное изучение: Давайте будем важны!

- -

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

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

- -

Курсив, жирный шрифт, подчеркивание...

- -
-
Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике. Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее. Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчеркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.
- -
-
- -

HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.

- -

Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.

- - - -
-

Предупреждение о подчеркивании: люди сильно ассоциируют подчеркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчеркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.

-
- -
<!-- Научные наименования -->
-<p>
-  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
-наиболее часто встречающийся вид колибри в северо-восточной Америке.
-</p>
-
-<!-- Иностранные слова -->
-<p>
-  Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- Явно неправильное произношение или написание -->
-<p>
-  Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок.
-</p>
-
-<!-- Выделение ключевых слов в инструкциях -->
-<ol>
-  <li>
-    <b>Отрежьте</b> два ломтика хлеба.
-  </li>
-  <li>
-    <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба.
-  </li>
-</ol>
- -

Заключение

- -

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете. 

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/index.html" deleted file mode 100644 index 1ecf1eb84a..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Введение в HTML -slug: Learn/HTML/Введение_в_HTML -tags: - - HTML - - Введение - - Для чайников - - Заголовок - - Начинающим - - Новичкам - - Основы HTML - - Семантика - - Ссылки - - Структура - - Текст -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

По сути, {{glossary("HTML")}} довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у документа шапка? три столбца с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Этот модуль расскажет Вам о первых двух возможностях HTML и научит фундаментальным концепциям и синтаксису, которые вам нужно знать, чтобы понять HTML.

- -

Необходимые условия

- -

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

- -
-

Примечание: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как JSBin или Thimble.

-
- -

Руководства

- -

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

- -
-
Начало работы с HTML
-
Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!
-
Что такое заголовок? Метаданные в HTML
-
Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).
-
Основы редактирования текста в HTML
-
Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье расматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
-
Создание гиперссылок
-
Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.
-
Углубленное форматирование текста
-
Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье Основы редактирования текста в HTML. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.
-
Структура документа и веб-сайта
-
Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации",  "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.
-
Отладка HTML
-
Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.
-
- -

Оценка

- -

Следующие задания проверят ваше понимание основ HTML, описанных в приведенных выше руководствах.

- -
-
Разметка письма
-
Все мы рано или поздно учимся писать письма; также это полезеный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.
-
Структурируем страницу
-
Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.
-
- -

Смотрите также

- -
-
Основы интернет-грамотности
-
Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле Введение в HTML. Учащиееся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.
-
diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/marking_up_a_letter/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/marking_up_a_letter/index.html" deleted file mode 100644 index c9ede9d116..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/marking_up_a_letter/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Разметка письма -slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter -tags: - - HTML -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
- -

Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента <head>.

- - - - - - - - - - - - -
Знания: -

Перед выполнением этого задания вы должны пройти Начало работы с HTML, Что такое заголовок? Метаданные в HTML, Основы редактирования текста в HTML, Создание гиперссылок, и Углубленное форматирование текста.

-
Цель: -

Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега <head>.

-
- -

Отправная точка

- -

Для начала задания, вы должны скачать текст, который вам надо отформатировать, и CSS стиль, который вы должны подключить к вашему HTML. Создайте .html файл используюя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редактороми, таким как JSBin или Thimble).

- -

Описание проекта

- -

В этом проекте, ваша задача - отформатировать письмо, которое должно быть размещено во внутренней сети университета. Это письмо - ответ исследователя будущему PhD студенту о его заявлении на работу в университете.

- -

Блочные элементы / структура:

- - - -

Строчные элементы:

- - - -

Заголовок документа:

- - - -

Советы и подсказки

- - - -

Пример

- -

Это скриншот размеченного письма:

- -

Example

- -

Оценка

- -

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, в тему этого задания, или по тегу #mdn в нашем IRC-канале (Mozilla IRC). Сделайте это задание сами — вам некого обманывать, кроме себя самого.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html" deleted file mode 100644 index b5bb7fa235..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Структурируем страницу -slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content -tags: - - HTML -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

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

- - - - - - - - - - - - -
Что нужно знать:Вам пондобятся навыки из всего курса. Особое внимание уделите разделу Структура документа и веб-сайта.
Цель: -

Проверить знания структуры веб-страницы и ее перевода в разметку.

-
- -

Отправная точка

- -

Чтобы начать это, вы должны перейти и скачать архив содержаший все начальные активы. Архив содержит:

- - - -

Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например JSBin или Thimble для исследования.

- -

Краткое описание проекта

- -

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

- - - -

Вам необходимо добавить подходящую обертку для:

- - - -

Вы также должны:

- - - -

Советы и подсказки

- - - -

Пример

- -

Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Оценивание

- -

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla, или в IRC-канале #mdn в IRC Mozilla. Попробуйте выполнить задание сами, ведь Вам некого обманывать, кроме себя самого!

- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/the_head_metadata_in_html/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/the_head_metadata_in_html/index.html" deleted file mode 100644 index dfb2840569..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/the_head_metadata_in_html/index.html" +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: Что внутри "head"? Метаданные в HTML -slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML -tags: - - HTML - - Meta - - favicon - - head - - lang - - metadata - - Для начинающих - - Заголовок - - Руководство - - иконка - - метаданные - - язык -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

Элемент {{glossary("Head", "head")}} HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

- - - -

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

- - - - - - - - - - - - -
Предварительные требования:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.
- -

Что такое <head>?

- -

Давайте снова посмотрим на HTML-документ из прошлой статьи:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Моя тестовая страница</title>
-  </head>
-  <body>
-    <p>Это — моя страница</p>
-  </body>
-</html>
- -

Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведенном выше примере <head> совсем небольшой:

- -
<head>
-  <meta charset="utf-8">
-  <title>Моя тестовая страница</title>
-</head>
- -

Однако на больших страницах блок <head> может быть довольно объемным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.

- -

Название страницы (title)

- -

Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда назвают заголовком страницы. Но это разные вещи!

- - - -

Активное изучение: разбор простого примера

- -
    -
  1. Чтобы приступить к активному изучению,  скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами: - -
      -
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
      2. -
    2. Нажмите на странице кнопку "Raw", нажмите Файл > Сохранить Как... в меню браузера и выберите папку для сохранения.
      3. -
    -
    2. -
  2. Откройте файл в браузере. Вы увидите что-то вроде этого: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Теперь должно стать совершенно ясно, в чём разница между <h1> и <title>!

    -
    3. -
  3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!
    4. -
- -

Содержимое элемента <title> используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из <title> предлагается в качестве названия закладки.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Текст из <title> также появляется в результатах поиска, как мы скоро увидим.

- -

Метаданные: Элемент <meta>

- -

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент {{htmlelement("meta")}}. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

- -

Указываем кодировку текста документа

- -

В заголовке примера выше есть следующая строка:

- -
<meta charset="utf-8">
- -

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницов, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -
-

Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

-
- -

Активное изучение: экспериментируем с символьными кодировками

- -

Чтобы проверить это, вернитесь к HTML из примера <title> (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

- -
<p>Пример на японском: ご飯が熱い。</p>
- -

Указываем автора и описание

- -

У элементов <meta> часто есть атрибуты name и content:

- - - -

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

- -
<meta name="author" content="Крис Миллс">
-<meta name="description" content="Задача MDN — в том, чтобы обучить
-новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">
- -

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

- -

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или {{glossary("SEO")}}.

- -

Активное изучение: как поисковые системы используют описание

- -

Описание из <meta name="description"> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

- -
    -
  1. Перейдите на главную страницу Mozilla Developer Network.
    2. -
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
    3. -
  3. Найдите тег meta с описанием. Он выглядит так: - 
    <meta name="description" content="Веб-документация на MDN
-предоставляет собой информацию об открытых веб-технологиях,
-включая HTML, CSS и различные API для веб-сайтов и
-прогрессивных веб-приложений. Также на сайте содержатся материалы
-для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
    -
    4. -
  4. Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <meta> и <title> используется в результатах поиска, — мы не зря указали их!
    5. -
- -

Результат поиска в Google

- -
-

Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

-
- -
-

Примечание: Многие типы <meta> больше не используются. Так, поисковые системы больше не используют данные из элемента <meta type="keywords" content="ваши, ключевые, слова, введите, здесь">, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

-
- -

Другие виды метаданных

- -

В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

- -

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метеданных. В исходном коде MDN Web Docs вы можете найти строки:

- -
<meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png">
-<meta property="og:description" content="Веб-документация на MDN предоставляет
-собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
-и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
-продуктах Mozilla, как Инструменты разработчика Firefox.">
-<meta property="og:title" content="MDN Web Docs">
- -

Один из результатов добавления этих метеданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.У Twitter также есть собственный формат метаданных, с помощью которого  создается аналогичный эффект, при отображении URL сайта на twitter.com:

- -
<meta name="twitter:title" content="MDN Web Docs">
- -

Добавление иконок

- -

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

- -

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Чтобы добавить на страницу favicon:

- -
    -
  1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
    2. -
  2. Добавьте ссылку на иконку в <head> документа: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

- -
<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- Для iPhone с Retina-экраном высокого разрешения: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- Для iPad первого и второго поколения: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- Для других случаев - обычный favicon -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

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

- -

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

- -

Подключение CSS и JavaScript

- -

Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связянные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .

- - - -

Активное изучение: добавляем на страницу CSS и JavaScript

- -
    -
  1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
    2. -
  2. Откройте HTML в браузере и текстовом редакторе.
    3. -
  3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов {{htmlelement("link")}} и {{htmlelement("script")}}.
    4. -
- -

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

-
- -

Основной язык HTML страницы

- -

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

- -
<html lang="en-US">
- -
<html lang="ru">
-
- -

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

- -

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

- -
<p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

- -

Заключение

- -

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

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\320\275\320\260\321\207\320\260\320\273\320\276_\321\200\320\260\320\261\320\276\321\202\321\213/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\320\275\320\260\321\207\320\260\320\273\320\276_\321\200\320\260\320\261\320\276\321\202\321\213/index.html" deleted file mode 100644 index 48904b9e17..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\320\275\320\260\321\207\320\260\320\273\320\276_\321\200\320\260\320\261\320\276\321\202\321\213/index.html" +++ /dev/null @@ -1,772 +0,0 @@ ---- -title: Начало работы с HTML -slug: Learn/HTML/Введение_в_HTML/Начало_работы -tags: - - Guide - - HTML - - Аттрибуты - - Для начинающих - - Комментарии - - Пробелы - - Программирование - - Руководство - - Урок - - элементы -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
- -

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

- - - - - - - - - - - - -
Необходимые знания:Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:Познакомиться с языком HTML и научиться описывать некоторые его элементы.
- -

Что такое HTML?

- -

{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

- -
Мой кот очень сердитый
- -

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф"  ({{htmlelement("p")}}), например:

- -
<p>Мой кот очень сердитый</p>
- -
-

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <title>, <TITLE>, <Title>, <TiTlE>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

-
- -

Структура HTML элементов

- -

Давайте рассмотрим элемент "параграф" чуть подробнее:

- -

- -

Основными частями элемента являются:

- -
    -
  1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
    2. -
  2. Закрывающий тег: выглядит как и открывающий, но содержит слэш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
    3. -
  3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
    4. -
  4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.
    5. -
- -

Активное изучение: создание вашего первого HTML элемента

- -

Отредактируйте строку текста ниже в поле Ввод, обернув ее тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после нее, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

- -

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Вложенные элементы

- - - -

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:

- -
<p>Мой кот <strong>очень</strong>  сердитый.</p>
- -

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее писать неправильно:

- -
<p>Мой кот <strong>очень сердитый.</p></strong>
- -

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

- -

Блочные и строчные элементы

- - - -

Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.

- - - -

Посмотрите на следующий пример:

- -
<em>Первый</em><em>второй</em><em>третий</em>
-
-<p>четвертый</p><p>пятый</p><p>шестой</p>
-
- -

{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).

- -

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

- -
-

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

-
- -
-

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

-
- -
-

Примечание: Вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

-
- -

Пустые элементы

- - - -

Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Это выведет на вашу страницу следующее:

- -

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Примечание: Пустые элементы иногда называют void-элементами.

-
- -

Атрибуты

- -

У элементов также могут быть атрибуты, которые выглядят так:

- -

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

- -

Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.

- -

Атрибут должен иметь:

- -
    -
  1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
    2. -
  2. Имя атрибута и следующий за ним знак равенства.
    3. -
  3. Значение атрибута, заключенное в кавычки.
    4. -
- -

Активное изучение: Добавление атрибутов в элемент

- - - -

Возьмём для примера элемент {{htmlelement("a")}} — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

- - - -

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

- -

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.

- - - -

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Булевые атрибуты

- - - -

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

- -
<input type="text" disabled="disabled">
- -

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

На выходе оба варианта будут выглядеть следующим образом:

- -

{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Опускание кавычек вокруг значений атрибутов

- - - -

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

- -
<a href=https://www.mozilla.org/>любимый веб-сайт</a>
- -

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

- -
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
- -

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

- -

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.

- -

Одинарные или двойные кавычки?

- - - -

В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:

- -
<a href="http://www.example.com">Ссылка к моему примеру.</a>
-
-<a href='http://www.example.com'>Ссылка к моему примеру.</a>
- -

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

- -
<a href="http://www.example.com'>Ссылка к моему примеру.</a>
- -

Если вы используете один тип кавычек в своем HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:

- -
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
- -

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

- -
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
- -

Поэтому вам нужно сделать так:

- -
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
- -

Структура HTML документа

- -

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

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Тестовая страница</title>
-  </head>
-  <body>
-    <p>Это — моя страница</p>
-  </body>
-</html>
- -

Вот что мы имеем:

- -
    -
  1. <!DOCTYPE html>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
    2. -
  2. <html></html>: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент". 
    3. -
  3. <head></head>: Элемент {{htmlelement("head")}}. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
    4. -
  4. <meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
    5. -
  5. <title></title>: Элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
    6. -
  6. <body></body>: Элемент {{htmlelement("body")}}. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.
    7. -
- -

Активное изучение: Добавление элементов в ваш HTML-документ

- - - -

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

- -
    -
  1. Скопировать пример HTML-страницы, расположенный выше.
    2. -
  2. Создать новый файл в текстовом редакторе.
    3. -
  3. Вставить код в ваш новый текстовый файл.
    4. -
  4. Сохранить файл как index.html.
    5. -
- -
-

Примечание: Вы также можете найти этот базовый пример HTML на  MDN Learning Area Github repo.

-
- -

Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:

- -

Скриншот примера тестовой страницы
- Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента {{htmlelement("body")}}. Попробуйте сделать следующее:

- - - -

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Пробелы в HTML

- - - -

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

- -
<p>Собаки глупы.</p>
-
-<p>Собаки
-         глупы.</p>
- -

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

- -

Ссылки на сущности: Включение специальных символов в HTML

- - - -

В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

- -

Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с ампресанда (&) и завершается точкой с запятой (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Буквенный символСимвольный эквивалент
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

В  следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

- -
<p>В HTML вы определяете параграф элементом <p>.</p>
-
-<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p>
- -

В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент  <p> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.

- -

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

- -
-

Примечание: Таблица всех доступных в  HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.

-
- -

HTML комментарии

- - - -

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

- -

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!-- и -->, например:

- -
<p> Меня нет в комментариях( </p>
-
-<!-- <p>А теперь есть!</p> -->
- -

Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.

- -

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Подведение итогов

- -

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

- -
-

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.

-
- -

Смотрите также

- - - -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
- -
- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\320\263\320\270\320\277\320\265\321\200\321\201\321\201\321\213\320\273\320\276\320\272/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\320\263\320\270\320\277\320\265\321\200\321\201\321\201\321\213\320\273\320\276\320\272/index.html" deleted file mode 100644 index fcee7272e4..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\320\263\320\270\320\277\320\265\321\200\321\201\321\201\321\213\320\273\320\276\320\272/index.html" +++ /dev/null @@ -1,435 +0,0 @@ ---- -title: Создание гиперссылок -slug: Learn/HTML/Введение_в_HTML/Создание_гиперссылок -tags: - - Абсолютные - - Гиперссылки - - Единый указатель ресурса - - Заголовок - - Начинающий - - Обучение - - Относительные - - Руководство - - Ссылки - - Язык гипертекстовой разметки -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
- -

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

- - - - - - - - - - - - -
Предварительные требования:Базовое знакомство с HTML, описаное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.
- -

Что такое гиперссылка?

- -

Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}.)

- -
-

Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

-
- -

Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- -

Анатомия ссылки

- -

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  {{anch("Ссылки-блоки")}}), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

- -
<p>Я создал ссылку на
-  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
-</p>
- -

Это дало нам следующий результат:

- -

Я создал ссылку на домашнюю страницу Mozilla.

- -

Добавляем инфомацию через атрибут title

- -

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

- -
<p>Я создал ссылку на
-  <a href="https://www.mozilla.org/ru/"
-     title="Лучшее место для поиска дополнительной информации
-     о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
-  </a>.
-</p>
- -

Вот что получилось (описание появится, если навести курсор на ссылку):

- -

Я создал ссылку на домашнюю страницу Mozilla.

- -
-

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

-
- -

Активное изучение: создаём собственную ссылку

- -

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

- - - -

Ссылки-блоки

- -

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.

- -
<a href="https://www.mozilla.org/ru/">
-  <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
-</a>
- -
-

Примечание: Вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

-
- -

Краткое руководство по URL-адресам и путям

- -

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

- -

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/.

- -

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

- -

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

- -

Корень структуры — каталог  creating-hyperlinks. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).

- -

В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответсвенно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

- - - -
-

Примечание: Вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: 
- ../../../сложный/путь/к/моему/файлу.html.

-
- -

Фрагменты документа

- -

Можно ссылаться на определенную часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

- -
<h2 id="Почтовый_адрес">Почтовый адрес</h2>
- -

Затем, чтобы связаться с  этим конкретным  id, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

- -
<p>Хотите написать мне письмо? Используйте наш
-  <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
-</p>
- -

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

- -
<p>
-  <a href="#Почтовый_адрес">Почтовый адрес кампании</a>
-  можно найти в нижней части этой страницы.
-</p>
- -

Абсолютные и относительные URL-адреса

- -

Два понятия, с которыми вы столкнетесь в Интернете, — это абсолютный URL и относительный URL:

- -
-
Абсолютный URL
-
Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая {{glossary("protocol","протокол")}} и {{glossary("domain name","доменное имя")}}. Например, если страница index.html загружается в каталог, называемый projects, который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com, страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как index.html, для загрузки, если он не указан в URL-адресе.).
-
- -

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

- -
-
Относительный URL
-
Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддериктории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).
-
- -

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Советуем вам основательно разобраться в этой теме!

- -

Практика написания хороших ссылок

- -

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

- - - -

Используйте четкие формулировки описания ссылок

- -

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

- - - -

Взгляните на этот пример:

- -

Хороший текст ссылки: Скачать Firefox

- -
<p><a href="https://firefox.com/">
-  Скачать Firefox
-</a></p>
- -

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

- -
<p><a href="https://firefox.com/">
-  Нажми сюда
-</a>
-чтобы скачать Firefox</p>
-
- -

Советы:

- - - -

Используйте относительные ссылки, где это возможно

- -

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта  (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

- - - -

Создавая ссылки на не HTML ресурсы — добавляйте описание

- -

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсуствие описания может раздражать пользователя. Приведем пример:

- - - -

Посмотрите на примеры, чтобы увидеть, как добавить описание:

- -
<p><a href="http://www.example.com/large-report.pdf">
-  Скачать отчет о продажах (PDF, 10MB)
-</a></p>
-
-<p><a href="http://www.example.com/video-stream/">
-  Посмотреть видео (видео откроется в отдельном окне, HD качество)
-</a></p>
-
-<p><a href="http://www.example.com/car-game">
-  Играть в гонки (необходим Flash)
-</a></p>
- -

Используйте атрибут download, когда создаете ссылку

- -

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведем пример ссылки для загрузки браузера Firefox 39:

- -
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
-   download="firefox-39-installer.exe">
-  Скачать Firefox 39 для Windows
-</a>
- -

Активное изучение: создание меню навигации

- -

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

- -

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

- - - -

Что делать:

- -
    -
  1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
    2. -
  2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
    3. -
  3. Скопируйте созданное меню в каждую страницу.
    4. -
  4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
    5. -
- -

Когда закончите задание, посмотрите, как это должно выглядеть:

- -

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

- -
-

Если не удается сделать, или вы неуверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

-
- -

Ссылки электронной почты

- -

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент {{HTMLElement("a")}} и mailto: — адрес почты.

- -

Самыми простыми и часто используемыми формами mailto: являются  subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

- -
<a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>
-
- -

В результате полчим ссылку вида: Отправить письмо для nowhere.

- -

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".

- -

Особенности и детали

- -

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

- -

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

- -
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
-  Send mail with cc, bcc, subject and body
-</a>
- -
-

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

-
- -

Вот несколько примеров использования mailto URLs:

- - - -

Заключение

- -

Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - - -
- - - - - -
diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\320\260_\320\270_\320\262\320\265\320\261-\321\201\320\260\320\271\321\202\320\260/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\320\260_\320\270_\320\262\320\265\320\261-\321\201\320\260\320\271\321\202\320\260/index.html" deleted file mode 100644 index 13f4f458d1..0000000000 --- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\320\260_\320\270_\320\262\320\265\320\261-\321\201\320\260\320\271\321\202\320\260/index.html" +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Структура документа и веб-сайта -slug: Learn/HTML/Введение_в_HTML/Структура_документа_и_веб-сайта -tags: - - Guide - - HTML - - Базовая разметка - - Гайд - - Для новичков - - С чего начать - - Структура сайта -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), {{glossary("HTML")}} также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.

- - - - - - - - - - - - -
Необходимые знания:Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.
- -

Основные составляющие документа

- -

Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:

- -
-
Заголовок (колонтитул)
-
Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
-
Навигационное меню
-
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
-
Основное содержимое
-
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
-
Боковая панель
-
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
-
Нижний колонтитул (футер)
-
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.
-
- -

"Типичный веб-сайт" может быть структурирован примерно так:

- -

- -

HTML для структурирования содержимого

- -

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы. 

- -

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?

- -
-

Заметка: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

-
- -

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

- -

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

- - - -

Активное обучение: исследование кода для нашего примера

- -

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы Вы взгянули на приведенный выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Заголовок моей страницы</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
-
-    <header>
-      <h1>Заголовок</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Домашняя страница</a></li>
-        <li><a href="#">Наша команда</a></li>
-        <li><a href="#">Проекты</a></li>
-        <li><a href="#">Контакты</a></li>
-      </ul>
-
-       <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Здесь основное содержимое нашей страницы -->
-    <main>
-
-      <!-- Она содержит статью -->
-      <article>
-        <h2>Заголовок статьи</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>Подраздел</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Ещё один подраздел</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- Дополнительный контент также может быть вложен в основной контент -->
-      <aside>
-        <h2>Связанные темы</h2>
-
-        <ul>
-          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
-          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
-          <li><a href="#">Даже на севере Англии</a></li>
-          <li><a href="#">Здесь не перестаёт дождь</a></li>
-          <li><a href="#">Лаааадно...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
-
-    <footer>
-      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
-    </footer>
-
-  </body>
-</html>
- -

Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.

- -

Подробнее об элементах HTML макета

- -

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

- - - -

Несемантические обертки

- -

Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.

- -

{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

- -
<p>Пьяный Король возвратился в свою комнату в 01:00
-и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент
-свет на сцене должен быть приглушён]</span>.</p>
- -

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

- -

{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если Вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который Вы можете открыть в любой момент нахождения на сайте:

- -
<div class="shopping-cart">
-  <h2>Корзина</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Итого: $237.89</p>
-</div>
- -

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и  <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

- -
-

Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают Ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе Вам будет трудно обновлять и поддерживать Ваши документы.

-
- -

Перенос строки и горизонтальный разделитель

- -

Два элемента, которые Вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:

- -

<br> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

- -
<p>Жила-была девчушка Нелл,<br>
-Любившая писать HTML:<br>
-Её семантика ужасна была — <br>
-Она и сама прочитать ничего не могла.</p>
- -

Без элемента <br> абзац  разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

- -

Жила-была девчушка Нелл,
- Любившая писать HTML:
- Её семантика ужасна была —
- Она и сама прочитать ничего не могла.

- -

<hr> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

- -
<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
-<hr>
-<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>
- -

Будет выглядеть примерно так:

- -

Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.

- -
-

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".

- -

Планирование простого веб-сайта

- -

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется {{glossary("Information architecture")}}. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

- -
    -
  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. -
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. -
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. -
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. -
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
    6. -
- -

A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

- -

Самостоятельная работа: создайте свою собственную карту сайта

- -

Приментие наш метод к своему сайту. О чем он будет?

- -
-

Примечание: Сохраните свой код, он Вам ещё понадобится.

-
- -

Заключение

- -

Вы стали лучше понимаеть, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.

- -

Дополнительные материалы

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/html/\321\200\320\265\321\206\320\265\320\277\321\202\321\213/index.html" "b/files/ru/learn/html/\321\200\320\265\321\206\320\265\320\277\321\202\321\213/index.html" deleted file mode 100644 index 1a780e676b..0000000000 --- "a/files/ru/learn/html/\321\200\320\265\321\206\320\265\320\277\321\202\321\213/index.html" +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Использование HTML для решения общих задач -slug: Learn/HTML/Рецепты -tags: - - CodingScripting - - HTML - - На русском - - Программирование -translation_of: Learn/HTML/Howto ---- -

Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.

- -
-
-

Основы структурирования

- -

Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого.

- - - -

Основы организации гипертекста

- -

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

- - -
- -
-

Гиперссылки

- -

Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:

- - - -

Изображения и мультимедиа

- - - -

Сценарии и стили

- -

HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).

- - - -

Встраиваемый контент

- - -
-
- -

Необычные или продвинутые проблемы

- -

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

- -
-
-

Формы

- -

Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвященное руководство. Вот где вы должны начать:

- - - -

Таблицы

- -

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

- - - -

Представление данных

- - - -

Интерактивность

- - -
- -
-

Продвинутая организация текста

- - - -

Продвинутые изображения и мультимедиа images & multimedia

- - - -

Локализация

- -

HTML не одноязычен. Он имеет поддержку средств локализации документов.

- - - -

Производительность

- - -
-
- -

     

-- cgit v1.2.3-54-g00ecf