book51.ru

Инструменты пользователя

Инструменты сайта

  • Показать страницу
  • История страницы
  • Ссылки сюда
  • Оставить на чай
  • Экспорт в PDF
  • Наверх
    • Вы посетили:
    software:development:web:docs:learn:html:introduction_to_html:document_and_website_structure

    Различия

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

    Ссылка на это сравнение

    Следующая версия    		Предыдущая версия
    software:development:web:docs:learn:html:introduction_to_html:document_and_website_structure [2024/01/29 18:34] – создано vladpolskiysoftware:development:web:docs:learn:html:introduction_to_html:document_and_website_structure [2024/01/29 20:33] (текущий) – [Самостоятельная работа: создайте свою собственную карту сайта] vladpolskiy
    Строка 2: Строка 2:
     В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), [[software:development:web:docs:glossary:HTML|HTML]] также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры. В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), [[software:development:web:docs:glossary:HTML|HTML]] также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.
     {{tablelayout?colwidth="100px"}} {{tablelayout?colwidth="100px"}}
    -| Необходимые знания: | Базовое знакомство с HTML, описано в разделе [[software:development:web:docs:learn:html:introduction_to_html:getting_started|Начало работы с HTML.]] Форматирование текста в HTML, описано в разделе [[software:development:web:docs:learn:html:introduction_to_html:html_text_fundamentals|Основы текста в HTML.]] Как работают гиперссылки, описано в разделе [[software:development:web:docs:learn:html:introduction_to_html:creating_hyperlinks|Создание гиперссылок.]] |+| **Необходимые знания:** | **Базовое знакомство с HTML, описано в разделе [[software:development:web:docs:learn:html:introduction_to_html:getting_started|Начало работы с HTML.]] Форматирование текста в HTML, описано в разделе [[software:development:web:docs:learn:html:introduction_to_html:html_text_fundamentals|Основы текста в HTML.]] Как работают гиперссылки, описано в разделе [[software:development:web:docs:learn:html:introduction_to_html:creating_hyperlinks|Создание гиперссылок.]]** |
     | Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. | | Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. |
      
    Строка 33: Строка 33:
     Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной? Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?
      
     +<WRAP left round box 100%>
     +:!: **Примечание:** Люди с дальтонизмом составляют около [[http://www.color-blindness.com/2006/04/28/colorblind-population |8% мирового населения.]] Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было [[https://en.wikipedia.org/wiki/Visual_impairment |285 миллионов таких людей]], а общая численность населения составляла [[https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg |около 7 миллиардов]]).
     +</WRAP>
      
     +В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [[software:development:web:docs:Learn:HTML:Introduction_to_HTML:HTML_text_fundamentals#why_do_we_need_structure|последствий неиспользования правильной структуры элементов и семантики для правильной работы.]]
      
     +Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
      
     +  * Заголовок: [[software:development:web:docs:Web:HTML:Element:header|<header>]].
     +  * Навигационное меню: [[software:development:web:docs:Web:HTML:Element:nav|<nav>]].
     +  * Основное содержимое: [[software:development:web:docs:Web:HTML:Element:main|<main>]], с различными подразделами содержимого, представленными элементами [[software:development:web:docs:Web:HTML:Element:article|<article>]], [[software:development:web:docs:Web:HTML:Element:section|<section>]] и [[software:development:web:docs:Web:HTML:Element:div|<div>]].
     +  * Боковая панель: [[software:development:web:docs:Web:HTML:Element:aside|<aside>]], обычно располагается внутри [[software:development:web:docs:Web:HTML:Element:main|<main>]].
     +  * Нижний колонтитул: [[software:development:web:docs:Web:HTML:Element:footer|<footer>]].
      
     +=====Активное обучение: исследование кода для нашего примера=====
     +Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
      
      
     +<code html HTML>
     +<!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> 
    -[[software:development:web:docs:Glossary:HTML|HTML]] (язык разметки гипертекста) — это язык разметки , который сообщает веб-браузерам, как структурировать посещаемые вами веб-страницы. Это может быть настолько сложно или просто, насколько того хочет веб-разработчик. HTML состоит из ряда [[software:development:web:docs:Glossary:Element|элементов]], которые вы используете для включения, переноса или разметки различных частей контента, чтобы он выглядел или действовал определенным образом. Заключающие теги могут превращать контент в гиперссылку для перехода на другую страницу, выделять слова курсивом и т. д. Например, рассмотрим следующую строку текста: +    </footer> 
    -<WRAP left round box 100%> +  </body>
    -My cat is very grumpy +
    -</WRAP> +
    -Если бы мы хотели, чтобы текст оставался отдельным, мы могли бы указать, что это абзац, заключив его в [[software:development:web:docs:Web:HTML:Element:p|<p>]]  элемент абзаца ( ): +
    -<code html HTML> +
    -<p>My cat is very grumpy</p> +
    -</code> +
    -<WRAP left round box 100%> +
    -:!: **Примечание.** Теги в HTML не чувствительны к регистру. Это означает, что их можно писать как прописными, так и строчными буквами. Например, [[software:development:web:docs:Web:HTML:Element:title|<title>]] тег можно записать как <title>, <TITLE>, <Title>, <TiTlE>и т. д., и он будет работать. Однако лучше всего писать все теги строчными буквами для обеспечения единообразия и читабельности. +
    -</WRAP> +
    -=====Анатомия HTML-элемента===== +
    -Давайте подробнее изучим наш элемент абзаца из предыдущего раздела: +
    -{{:software:development:web:docs:learn:html:introduction_to_html:anatomy_of_an_html_element_0.svg|}} +
    - +
    -Анатомия нашей элемента такова: +
    - +
    -  * **Открывающий тег:** состоит из имени элемента (в данном примере p для абзаца), заключенного в открывающие и закрывающие угловые скобки. Этот открывающий тег отмечает начало или начало действия элемента. В этом примере он предшествует началу текста абзаца. +
    -  * **Содержимое:** это содержимое элемента. В данном примере это текст абзаца. +
    -  * **Закрывающий тег:** он аналогичен открывающему тегу, за исключением того, что он включает косую черту перед именем элемента. Это отмечает, где заканчивается элемент. Отсутствие закрывающего тега — распространенная ошибка новичков, которая может привести к необычным результатам. +
    -Элемент представляет собой открывающий тег, за которым следует содержимое, а затем закрывающий тег. +
    - +
    -====Создание первого HTML-элемента==== +
    -Отредактируйте строку ниже в области «Редактора кода», обернув ее тегами <em> и </em>.Чтобы открыть элемент, поместите открывающий тег <em> в начало строки. Чтобы закрыть элемент, поместите закрывающий тег </em> в конце строки. Это должно привести к форматированию текста //курсивом//! Просматривайте обновления изменений в режиме реального времени в области «Вывод (правая область редактора). +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_em.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe>+
     </html> </html>
    -Если вы допустили ошибку, вы можете очистить свою работу с помощью кнопки «Reset». 
    -====Вложенные элементы==== 
    -Элементы можно размещать внутри других элементов. Это называется **вложением**. Если бы мы хотели указать, что наш **кот** очень сварливый, мы могли бы обернуть слово «очень» в [[software:development:web:docs:Web:HTML:Element:strong|<strong>]] элемент, что означает, что слово должно иметь строгое форматирование текста: 
    -<code html HTML> 
    -<p>Мой кот <strong>очень</strong> сварливый.</p> 
    -</code> 
    -<html> 
    -Пример: <p>Мой кот <strong>очень</strong> сварливый.</p> 
    -</html> 
    -Есть правильный и неправильный способ вложения. В приведенном выше примере мы сначала открыли элемент тегом **%%<p>%%**, а затем открыли тег **%%<strong>%%**. Для правильной вложенности мы должны сначала закрыть элемент тегом **%%</strong>%%**, а затем закрыть весь элемент **%%</p>%%**. 
      
    -Ниже приведен пример неправильного способа вложения: 
    -<code html HTML> 
    -<p>Мой кот <strong>очень сварливый.</p></strong> 
     </code> </code>
    -<html> 
    -Пример: <p>Мой кот <strong>очень сварливый.</p></strong> 
    -</html> 
    -**Теги должны открываться и закрываться таким образом, чтобы они находились внутри или снаружи друг друга**. Учитывая такое перекрытие, как в приведенном выше примере, браузеру приходится угадывать ваши намерения. Подобные догадки могут привести к неожиданным результатам. 
      
    -====Пустотные элементы==== +Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут вам в этом. Мы не просим вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.
    -Не все элементы следуют шаблону открывающего тега, содержимого и закрывающего тега. Некоторые элементы состоят из одного тега, который обычно используется для вставки/внедрения чего-либо в документ. Такие элементы называются [[software:development:web:docs:Glossary:Void_element|пустыми элементами]]. Например, [[software:development:web:docs:Web:HTML:Element:img|<img>]] элемент встраивает файл изображения на страницу: +
    -<code html HTML> +
    -<img +
    -  src="images/firefox-icon.png" +
    -  alt="Firefox icon" /> +
    -</code> +
    -Это выведет следующее: +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_img_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    -<WRAP left round box 100%> +
    -:!: **Примечание.** В HTML нет необходимости добавлять символ **/** в конце тега элемента void (пустого элемента), например: %%<img src="images/firefox-icon.png" alt="Firefox icon" />%%. Однако это также допустимый синтаксис, и вы можете сделать это, если хотите, чтобы ваш HTML был допустимым XML. +
    -</WRAP> +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_img_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    -=====Атрибуты===== +
    -Элементы также могут иметь атрибуты. Атрибуты выглядят следующим образом: +
    -{{:software:development:web:docs:learn:html:introduction_to_html:anatomy_of_an_html_element_1.svg|}}+
      
    -Атрибуты содержат дополнительную информацию об элементе, которая не будет отображаться в содержимом. В этом примере 'class' атрибут представляет собой идентифицирующее имя, используемое для указания элемента с информацией о стиле. +=====Подробнее об элементах HTML макета=====
    -Атрибут должен иметь:+
      
    -  * Пробел между ним и именем элемента. (Для элемента с более чем одним атрибутом атрибуты также должны быть разделены пробелами.) +Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью [[software:development:web:docs:web:html:element|HTML-элементы.]] Пока что это основные определения, которые вы должны попытаться понять:
    -  * Имя атрибута, за которым следует знак равенства. +
    -  * Значение атрибута, заключенное в открывающие и закрывающие кавычки. +
    -====Добавление атрибутов к элементу==== +
    -Другой пример элемента: [[software:development:web:docs:Web:HTML:Element:a|<a>]]. Это означает якорь . Якорь может превратить заключенный в него текст в гиперссылку. Якоря могут принимать ряд атрибутов, вот некоторые из них: +
    -{{tablelayout?colwidth="100px"}} +
    -| [[software:development:web:docs:web:html:attributes:href|href]] | Значение этого атрибута определяет веб-адрес ссылки. Например: ''href="https://www.mozilla.org/"''. | +
    -| [[software:development:web:docs:web:html:attributes:title|title]] | Атрибут ''title'' указывает дополнительную информацию о ссылке, например описание страницы, на которую имеется ссылка. Например, ''title="The Mozilla homepage"''. Оно появляется в виде всплывающей подсказки при наведении курсора на элемент. | +
    -| [[software:development:web:docs:web:html:attributes:target|target]] | Атрибут ''target'' определяет контекст просмотра, используемый для отображения ссылки. Например, ''target="_blank"'' отобразит ссылку в новой вкладке. Если вы хотите отображать связанный контент на текущей вкладке, просто опустите этот атрибут. | +
    -Отредактируйте строку ниже в области ввода , чтобы превратить ее в ссылку на ваш любимый веб-сайт.+
      
    -  - Добавьте открывающий ''<a>'' и закрывающий ''</a>'' теги в элемент. +  * [[software:development:web:docs:Web:HTML:Element:main|<main>]] предназначен для содержимого, уникального для этой страницы. Используйте [[software:development:web:docs:Web:HTML:Element:main|<main>]] только один раз на странице и размещайте прямо внутри [[software:development:web:docs:Web:HTML:Element:body|<body>]]. В идеале он не должен быть вложен в другие элементы. 
    -  - Добавьте ''href'' атрибут и через знак ''='' в ''кавычках'' ссылку на любой сайт и атрибут ''title'' с присвоением через знак ''='' информации о сайте ''заключенной в кавычки''. +  * [[software:development:web:docs:Web:HTML:Element:article|<article>]] окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге). 
    -  - Укажите ''target'' атрибут, чтобы ссылка открывалась в новой вкладке ''(target="_blank")''. +  * [[software:development:web:docs:Web:HTML:Element:section|<section>]] подобен [[software:development:web:docs:Web:HTML:Element:article|<article>]], но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить [[software:development:web:docs:Web:HTML:Element:article|<article>]] на несколько [[software:development:web:docs:Web:HTML:Element:section|<section>]] или, наоборот, [[software:development:web:docs:Web:HTML:Element:section|<section>]] на несколько [[software:development:web:docs:Web:HTML:Element:article|<article>]]. 
    -Отредактируйте строку ниже в области «Редактора кода», и вы должны увидеть ссылку, которая при наведении курсора мыши отображает значение атрибута ''title'', а при нажатии открывает новую вкладку и переходит к веб-адресу  ''href'' атрибута. Помните, что вам необходимо включать пробел между именем элемента и между каждым атрибутом. Просматривайте обновления изменений в режиме реального времени в области «Вывод (правая область редактора).+  * [[software:development:web:docs:Web:HTML:Element:aside|<aside>]] содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.). 
     +  * [[software:development:web:docs:Web:HTML:Element:header|<header>]] представляет собой группу вводного содержимого. Если он дочерний элемент [[software:development:web:docs:Web:HTML:Element:body|<body>]], то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент [[software:development:web:docs:Web:HTML:Element:article|<article>]] или [[software:development:web:docs:Web:HTML:Element:section|<section>]], то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с [[software:development:web:docs:Learn:HTML:Introduction_to_HTML:The_head_metadata_in_HTML#adding_a_title|titles и headings]]). 
     +  * [[software:development:web:docs:Web:HTML:Element:nav|<nav>]] содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию. 
     +  * [[software:development:web:docs:Web:HTML:Element:footer|<footer>]] представляет собой группу конечного контента для страницы. 
     +====Несемантические обёртки==== 
     +Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, [[software:development:web:docs:Glossary:CSS|CSS]] или [[software:development:web:docs:Glossary:JavaScript|JavaScript]]. Для таких случаев в HTML есть элементы [[software:development:web:docs:Web:HTML:Element:div|<div>]] и [[software:development:web:docs:Web:HTML:Element:span|<span>]]. Вам следует использовать их с подходящим значением атрибута [[software:development:web:docs:Web:HTML:Global_attributes#class|class]] или [[software:development:web:docs:Web:HTML:Global_attributes#id|id]], чтобы можно было легко получить к ним доступ.
      
    -<html> +[[software:development:web:docs:Web:HTML:Element:span|<span>]] — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_a_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    -Если вы допустили ошибку, вы можете очистить свою работу с помощью кнопки «Reset». Смотрите пример ниже:+
      
     <code html HTML> <code html HTML>
    -<a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">Ссылка на сайт</a>+<p> 
     +  Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в 
     +  дверь: хмель мешал 
     +  <span class="editor-note" 
     +    >[Примечание редактора: В этот момент свет на сцене должен быть 
     +    приглушён]</span 
     +  >. 
     +</p>
     </code> </code>
    -====Логические атрибуты==== 
    -Иногда вы увидите атрибуты, написанные без значений. Это вполне приемлемо. Они называются логическими атрибутами. Логические атрибуты могут иметь только одно значение, которое обычно совпадает с именем атрибута. Например, рассмотрим [[software:development:web:docs:Web:HTML:Element:input#disabled|disabled]] атрибут, который можно назначить элементам ввода формы. (Это используется для отключения элементов ввода формы, чтобы пользователь не мог вводить данные. Отключенные элементы обычно отображаются серым цветом.) Например: 
    -<code html HTML> 
    -<!-- использование отключенного атрибута не позволяет конечному пользователю вводить текст в поле ввода --> 
    -<input type="text" disabled="disabled" /> 
    -</code> 
    -Для краткости допустимо записать это следующим образом: 
    -<code html HTML> 
    -<!-- использование отключенного атрибута не позволяет конечному пользователю вводить текст в поле ввода --> 
    -<input type="text" disabled /> 
      
     +В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.
      
    -<!-- ввод текста разрешен, так как он не содержит атрибута отключен --> +[[software:development:web:docs:Web:HTML:Element:div|<div>]] — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:
    -<input type="text" /> +
    -</code> +
    - +
    -Для справки: приведенный выше пример также включает неотключенный элемент ввода формы. HTML из приведенного выше примера дает такой результат: +
    - +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_disabled_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    - +
    -====Пропуск кавычек вокруг значений атрибутов==== +
    -Если вы посмотрите на код многих других сайтов, вы можете встретить ряд странных стилей разметки, включая значения атрибутов без кавычек. Это разрешено при определенных обстоятельствах, но также может привести к нарушению вашей разметки при других обстоятельствах. Например, если мы вернемся к нашему предыдущему примеру со ссылкой, мы могли бы написать базовую версию только с атрибутом ''href'', вот так:+
      
     <code html HTML> <code html HTML>
    -<!-- правильный синтаксис (с кавычками) --> +<div class="shopping-cart"> 
    -<a href="https://www.mozilla.org/">Ссылка на сайт</a>+  <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>
      
    -<!-- не желательный синтаксис без кавычек (разрешено при определенных обстоятельствах) --> 
    -<a href=https://www.mozilla.org/>Ссылка на сайт</a> 
     </code> </code>
    -Однако как только мы добавляем атрибут ''title''таким образом, возникают проблемы: 
    -<code html HTML> 
    -<!-- не правильный синтаксис (без кавычек) при атрибуте title со значением The (вместо The Mozilla homepage) --> 
    -<a href=https://www.mozilla.org/ title=The Mozilla homepage>Ссылка на сайт</a> 
    -</code> 
    -Как написано выше, браузер неправильно интерпретирует разметку, принимая ''title'' атрибут за три атрибута: атрибут ''title'' со значением ''The'' и два логических атрибута ''Mozilla'' и ''homepage''. Очевидно, это не предназначено! Это приведет к ошибкам или неожиданному поведению, как вы можете видеть на живом примере ниже. Попробуйте навести курсор на ссылку, чтобы просмотреть текст заголовка! 
      
    -<html> +Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_title_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html>+
      
    -Всегда включайте кавычки атрибутов. Это позволяет избежать таких проблем и приводит к более читабельному коду. +<WRAP left round box 100%> 
    -=====Одинарные или двойные кавычки?===== +:!: **Предупреждение: Внимание:** div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы. 
    -В этой статье вы также заметите, что атрибуты заключены в двойные кавычки. Однако в некотором HTML-коде вы можете увидеть одинарные кавычки. Это вопрос стиля. Вы можете смело выбирать, какой из них вам больше по душе. Обе эти строки эквивалентны: +</WRAP>
    -<code html HTML> +
    -<!-- правильный синтаксис (с двойными кавычками) --> +
    -<a href="https://www.mozilla.org/" title="The Mozilla homepage">Ссылка на сайт </a>+
      
    -<!-- правильный синтаксис (с одинарными кавычками) --> +====Перенос строки и горизонтальный разделитель====
    -<a href='https://www.mozilla.org/' title='The Mozilla homepage'>Ссылка на сайт#1 </a>+
      
    -<!-- правильный синтаксис (с двойными для атрибута href="" и и одиночными для атрибута title='') --> +Два элемента, которые вы будете периодически использовать или захотите узнать о них: [[software:development:web:docs:Web:HTML:Element:br|<br>]] и [[software:development:web:docs:Web:HTML:Element:hr|<hr>]]:
    -<a href="https://www.mozilla.org/" title='The Mozilla homepage'>Ссылка на сайт#2 </a> +
    -</code> +
    -Убедитесь, что вы не смешиваете одинарные и двойные кавычки для одного атрибута. Этот пример (ниже) показывает своего рода смешение кавычек, которое может пойти не так (вместо ссылки https://www.mozilla.org/ получим <color #ed1c24>https://www.mozilla.org/'title=</color>): +
    -<code html HTML> +
    -<!-- не правильный синтаксис (с разными кавычками) --> +
    -<a href="https://www.mozilla.org/' title="The Mozilla homepage">Ссылка на сайт#3 </a> +
    -</code>+
      
    -<html> +[[software:development:web:docs:Web:HTML:Element:br|<br>]] создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_quotes_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    - +
    -Однако если вы используете один тип кавычек, вы можете включить кавычки другого типа в значения атрибутов:+
      
     <code html HTML> <code html HTML>
    -<!-- одинарная кавычка внутри двойной --> +<p> 
    -<a href="https://www.mozilla.org/" title="Isn't no the Mozilla homepage">Ссылка на сайт#4 </a>+  Жила-была девчушка Нелл,<br /> 
     +  Любившая писать HTML:<br /> 
     +  Её семантика ужасна была — <br /> 
     +  Она и сама прочитать ничего не могла. 
     +</p>
     </code> </code>
      
    -Чтобы использовать кавычки внутри других кавычек того же типа (одинарной или двойной кавычки), используйте сущности HTML (например ''&quot;'' может быть интерпретирован как обрамляющая значение атрибута кавычка): +Без элемента [[software:development:web:docs:Web:HTML:Element:br|<br>]] абзац разместится в одну длинную линию (как было сказано ранее, [[software:development:web:docs:Learn:HTML:Introduction_to_HTML:Getting_started#whitespace_in_html|HTML игнорирует переносы строк]]), а с ним в коде — разметка будет выглядеть следующим образом:
    -<code html HTML> +
    -<!-- использование сущности html &quot;  --> +
    -<a href="https://www.mozilla.org/" title="Isn't &quot;no the&quot; Mozilla homepage">Ссылка на сайт#5 </a> +
    -</code>+
      
    -Пример неправильного использования кавычек внутри других кавычек значения атрибута (отредактируйте строку ниже в области ввода в окне редактора **<color #ed1c24>"</color><color #22b14c>no the</color><color #ed1c24>"</color>** на **<color #ed1c24>&quot;</color><color #22b14c>no the</color><color #ed1c24>&quot;</color>** и вы сможете увидеть свои изменения в режиме реального времени в области «Вывод»). Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset: +Жила-была девчушка Нелл, Любившая писать HTML: Её семантика ужасна была — Она и сама прочитать ничего не могла.
    -<code html HTML> +
    -<!-- использование сущности html &quot;  --> +
    -<a href="https://www.mozilla.org/" title="Isn't "no the" Mozilla homepage">Ссылка на сайт#6 </a> +
    -</code> +
    - +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_quotes_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    -=====Анатомия HTML-документа===== +
    -Отдельные элементы HTML сами по себе бесполезны. Далее давайте рассмотрим, как отдельные элементы объединяются, образуя целую HTML-страницу: +
    -<code html HTML> +
    -<!doctype html> +
    -<html lang="en-US"> +
    -  <head> +
    -    <meta charset="utf-8" /> +
    -    <title>My test page</title> +
    -  </head> +
    -  <body> +
    -    <p>This is my page</p> +
    -  </body> +
    -</html> +
    -</code>+
      
    -Здесь у нас есть:+[[software:development:web:docs:Web:HTML:Element:hr|<hr>]] создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:
      
    -  * ''<!DOCTYPE html>'': Тип документа. Когда HTML был молод (1991-1992), типы документов должны были действовать как ссылки на набор правил, которым должна была следовать HTML-страница, чтобы считаться хорошим HTML. Раньше типы документов выглядели примерно так: 
     <code html HTML> <code html HTML>
    -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">+<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> 
     +<hr> 
     +<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>
     </code> </code>
      
    -В последнее время тип документа стал историческим артефактом, который необходимо включить, чтобы все остальное работало правильно. ''<!DOCTYPE html>''— это кратчайшая строка символов, которая считается допустимым типом документа. Это все, что вам нужно знать! +Будет выглядеть примерно так:
    - +
    -  * ''<html></html>'': [[software:development:web:docs:Web:HTML:Element:html|<html>]] элемент. Этот элемент оборачивает все содержимое страницы. Иногда его называют корневым элементом. +
    -  * ''<head></head>'': [[software:development:web:docs:Web:HTML:Element:head|<head>]] элемент. Этот элемент действует как контейнер для всего, что вы хотите включить в HTML-страницу, **а не для содержимого**, которое страница будет показывать зрителям. Сюда входят ключевые слова и описание страницы, которые будут отображаться в результатах поиска, CSS для стилизации контента, объявления наборов символов и многое другое. Подробнее об этом вы узнаете в следующей статье серии. +
    -  * ''<meta charset="utf-8">'': [[software:development:web:docs:Web:HTML:Element:meta|<meta>]] элемент. Этот элемент представляет метаданные, которые не могут быть представлены другими мета-элементами HTML, такими как [[software:development:web:docs:Web:HTML:Element:base|<base>]],  +
    -[[software:development:web:docs:Web:HTML:Element:script|<script>]],[[software:development:web:docs:Web:HTML:Element:style|<style>]],[[software:development:web:docs:Web:HTML:Element:title|<title>]] или +
    -[[software:development:web:docs:Web:HTML:Element:link|<link>]]. Атрибут [[software:development:web:docs:Web:HTML:Element:meta#charset|charset]] определяет кодировку символов вашего документа как UTF-8, которая включает большинство символов подавляющего большинства письменных языков, написанных человеком. Благодаря этому параметру страница теперь может обрабатывать любой текстовый контент, который она может содержать. Нет причин не устанавливать это значение, и это может помочь избежать некоторых проблем в дальнейшем. +
    -  * ''<title></title>'': [[software:development:web:docs:Web:HTML:Element:title|<title>]] элемент. Это устанавливает заголовок страницы, который отображается на вкладке браузера, в которую загружена страница. Заголовок страницы также используется для описания страницы, когда она добавлена ​​в закладки. +
    -  * ''<body></body>'': [[software:development:web:docs:Web:HTML:Element:body|<body>]] элемент. Он содержит весь контент, отображаемый на странице, включая текст, изображения, видео, игры, воспроизводимые звуковые дорожки и что-либо еще. +
    - +
    -====Добавление функций в HTML-документ==== +
    - +
    -Если вы хотите поэкспериментировать с написанием HTML на локальном компьютере, вы можете: +
    - +
    -  - Скопируйте приведенный выше пример HTML-страницы. +
    -  - Создайте новый файл в текстовом редакторе. +
    -  - Вставьте код в новый текстовый файл. +
    -  - Сохраните файл как ''index.html.'' +
    - +
    -{{:software:development:web:docs:learn:html:introduction_to_html:screenshot_index_1.png?|}} +
    -<WRAP left round box 100%> +
    -**Примечание.** Этот базовый HTML-шаблон также можно найти в {{ :software:development:web:docs:learn:html:introduction_to_html:index.html|репозитарии.}} +
    -</WRAP> +
    -Теперь вы можете открыть этот файл в веб-браузере и посмотреть, как выглядит визуализированный код. Отредактируйте код и обновите браузер, чтобы увидеть результат. Изначально страница выглядит так: +
    -{{:software:development:web:docs:learn:html:introduction_to_html:screenshot_index_2.png?|}} +
    -В этом упражнении вы можете редактировать код локально на своем компьютере, как описано ранее, или редактировать его в окне примера ниже (в данном случае редактируемое окно примера представляет только содержимое элемента [[software:development:web:docs:Web:HTML:Element:body|<body>]]). Оттачивайте свои навыки, выполняя следующие задачи: +
    -  * Чуть ниже открывающего тега элемента [[software:development:web:docs:Web:HTML:Element:body|<body>]] добавьте основной заголовок документа. Это должно быть заключено в [[software:development:web:docs:Web:HTML:Element:h1|<h1>]] открывающий и </h1> закрывающий теги. +
    -  * Отредактируйте содержимое абзаца, включив в него текст по теме, которая вам интересна. +
    -  * Выделите важные слова жирным шрифтом, заключая их в [[software:development:web:docs:Web:HTML:Element:strong|<strong>]] открывающий и </strong> закрывающий теги. +
    -  * Добавьте ссылку в свой абзац, как объяснялось ранее в статье . +
    -  * Добавьте изображение в документ. Разместите его под абзацем, как объяснялось ранее в статье . Заработайте бонусные баллы, если вам удастся создать ссылку на другое изображение (локально на вашем компьютере или где-то еще в Интернете). +
    -Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset.+
      
     <html> <html>
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_index_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/Learn/HTML/Introduction_to_HTML/Document_and_website_structure.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
     </iframe> </iframe>
     </html> </html>
      
    -====Пробелы в HTML==== +=====Планирование простого веб-сайта=====
    -В приведенных выше примерах вы могли заметить, что в коде содержится много пробелов. Это необязательно. Эти два фрагмента кода эквивалентны:+
      
    -<code html HTML> +Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется [[software:development:web:docs:Glossary:Information_architecture|Information architecture]]. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!
    -<p id="noWhitespace">Dogs are silly.</p>+
      
    -<p id="whitespace">Kats+  *  Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. 
     +  
     +{{:software:development:web:docs:learn:html:introduction_to_html:common-features.png?|}}
      
    -    are +  * Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
    -     +
    -        silly.</p> +
    -</code>+
      
    -Независимо от того, сколько пробелов вы используете внутри содержимого HTML-элемента (которое может включать один или несколько пробелов, а также разрывы строк), анализатор HTML уменьшает каждую последовательность пробелов до одного пробела при рендеринге кода. Так зачем использовать так много пробелов? Ответ: читабельность.+{{:software:development:web:docs:learn:html:introduction_to_html:site-structure.png?|}}
      
    -Будет легче понять, что происходит в вашем коде, если он будет правильно отформатирован. В нашем HTML каждый вложенный элемент имеет отступ на два пробела больше, чем тот, который находится внутри. Вы сами можете выбрать стиль форматирования (например, сколько пробелов для каждого уровня отступов), но вам следует подумать о его форматировании.+  * Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
      
    -Давайте посмотрим, как браузер отображает два приведенных выше абзаца с пробелами и без них:+{{:software:development:web:docs:learn:html:introduction_to_html:feature-list.png?|}}
      
    -<html> +  * Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод [[software:development:web:docs:Glossary:Card_sorting|Card_sorting]].
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_whitespace_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html>+
      
    -<WRAP left round box 100%> +{{:software:development:web:docs:learn:html:introduction_to_html:card-sorting.png?|}}
    -:!: **Примечание.** При доступе к [[software:development:web:docs:Web:API:Element:innerHTML|внутреннему коду HTML]] элементов из JavaScript все пробелы останутся нетронутыми. Это может привести к неожиданным результатам, если пробелы обрезаны браузером. +
    -</WRAP>+
      
    -<code javascript JS> +  * Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
    -let a = document.getElementById("noWhitespace").innerHTML; +
    -document.getElementById("demo_a").innerHTML = a; +
    -// "Dogs are silly." +
    -let b = document.getElementById("whitespace").innerHTML; +
    -document.getElementById("demo_b").innerHTML = b; +
    -// "Kats +
    -//    are +
    -//        silly." +
    -</code>+
      
    -<html> +{{:software:development:web:docs:learn:html:introduction_to_html:site-map.png?|}}
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_whitespace_2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html>+
      
    -=====Ссылки на сущности: включение специальных символов в HTML.===== +====Самостоятельная работа: создайте свою собственную карту сайта====
    -В HTML символы ''<'', ''>'', ''"'', ''%%'%%'' и ''&''являются специальными символами. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.+
      
    -Вы делаете это с помощью ссылок на персонажей. Это специальные коды, обозначающие символы, которые следует использовать именно в этих обстоятельствах. Каждая ссылка на символ начинается с амперсанда (&) и заканчивается точкой с запятой (;). +Применить наш метод к своему сайту. О чем он будет?
    - +
    -{{tablelayout?colwidth="100px"}} +
    -|Символ|Эквивалент ссылки на символ| +
    -|<|&lt; | +
    -|>|&gt; | +
    -|"|&quot; | +
    -|'|&apos; | +
    -|&|&amp; | +
    - +
    -Эквивалент ссылки на символ можно легко запомнить, поскольку текст, который он использует, можно рассматривать как меньший, чем для '<', кавычка для ' " ' и то же самое для других. Дополнительные сведения о ссылках на сущности см. в разделе [[https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references|Список ссылок на символьные сущности XML и HTML]] (Википедия). +
    - +
    -В примере ниже есть два абзаца: +
    - +
    -<code html HTML> +
    -<p>In HTML, you define a paragraph using the <p> element.</p> +
    - +
    -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p> +
    -</code> +
    - +
    -На живом выводе ниже вы можете видеть, что первый абзац пошёл не так. Браузер интерпретирует второй экземпляр <p>как начало нового абзаца. Второй абзац выглядит нормально, поскольку в нем есть угловые скобки со ссылками на символы. +
    - +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_essence_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html>+
      
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание.** Вам не нужно использовать ссылки на сущности для каких-либо других символов, поскольку современные браузеры прекрасно обрабатывают фактические символы, если для [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding|кодировки символов вашего HTML установлено значение UTF-8]].+:!: **Примечание:** Сохраните свой код, он вам ещё понадобится.
     </WRAP> </WRAP>
      
    -=====HTML-комментарии=====+=====Заключение===== 
     +Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
      
    -В HTML есть механизм записи комментариев в коде. Браузеры игнорируют комментарии, фактически делая комментарии невидимыми для пользователя. Цель комментариев — позволить вам включать в код примечания для объяснения вашей логики или кода. Это очень полезно, если вы вернетесь к базе кода после того, как отсутствовали достаточно долго и не полностью ее помните. Аналогично, комментарии неоценимы, поскольку разные люди вносят изменения и обновления. +====Дополнительные материалы====
    - +
    -Чтобы написать комментарий HTML, оберните его специальными маркерами ''<!--'' и ''-->''. Например: +
    - +
    -<code html HTML> +
    -<p>I'm not inside a comment</p> +
    - +
    -<!-- <p>I am!</p> --> +
    -</code> +
    - +
    -Как вы можете видеть ниже, в реальном выводе отображается только первый абзац. +
    - +
    -<html> +
    -<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/getting_started/getting_started_comment_1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> +
    -</iframe> +
    -</html> +
    - +
    -=====Заключение===== +
    -Вы дочитали статью до конца! Мы надеемся, что вам понравился экскурс по основам HTML.+
      
    -На этом этапе вы должны понимать, как выглядит HTML и как он работает на базовом уровне. Вы также должны уметь написать несколько элементов и атрибутов. Последующие статьи этого модуля развивают некоторые темы, представленные здесь, а также представляют другие концепции языка.+[[software:development:web:docs:Web:HTML:Element:Heading_Elements|Using HTML sections and outlines (en-US)]]: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
      
    -Когда вы начнете больше изучать HTML, подумайте об изучении основ CSS (каскадных таблиц стилей). [[software:development:web:docs:Learn:CSS|CSS]] — это язык, используемый для стилизации веб-страниц, например изменения шрифтов или цветов или изменения макета страницы. Как вы вскоре обнаружите, HTML и CSS хорошо работают вместе. 
      
    software/development/web/docs/learn/html/introduction_to_html/document_and_website_structure.1706542493.txt.gz · Последнее изменение: 2024/01/29 18:34 — vladpolskiy