Различия

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

--- software:development:web:docs:learn:html:introduction_to_html:getting_started [2023/09/16 12:06] – [Одинарные или двойные кавычки?] vladpolskiy
+++ software:development:web:docs:learn:html:introduction_to_html:getting_started [2025/02/01 09:41] (текущий) – внешнее изменение 127.0.0.1
@@ Строка 1: / Строка 1: @@
-======Начало работы с HTML======
+=====Начало работы с HTML======
 В этой статье мы рассмотрим абсолютные основы HTML. Для начала в этой статье даны определения элементов, атрибутов и всех других важных терминов, которые вы, возможно, слышали. Также объясняется, где они вписываются в HTML. Вы узнаете, как структурированы элементы HTML, как структурирована типичная страница HTML и другие важные базовые функции языка. Попутно будет возможность поиграть и с HTML!
 =====Что такое HTML?=====
@@ Строка 159: / Строка 160: @@
 <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>):
+Убедитесь, что вы не смешиваете одинарные и двойные кавычки для одного атрибута. Этот пример (ниже) показывает своего рода смешение кавычек, которое может пойти не так (вместо ссылки https://www.mozilla.org/ получим <fc #ed1c24>https://www.mozilla.org/'title=</fc>):
 <code html HTML>
 <!-- не правильный синтаксис (с разными кавычками) -->
@@ Строка 183: / Строка 184: @@
 </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:
+Пример неправильного использования кавычек внутри других кавычек значения атрибута (отредактируйте строку ниже в области ввода в окне редактора **<fc #ed1c24>"</fc><fc #22b14c>no the</fc><fc #ed1c24>"</fc>** на **<fc #ed1c24>&quot;</fc><fc #22b14c>no the</fc><fc #ed1c24>&quot;</fc>** и вы сможете увидеть свои изменения в режиме реального времени в области «Вывод»). Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset:
 <code html HTML>
 <!-- использование сущности html &quot;  -->
@@ Строка 194: / Строка 195: @@
 </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>
+Здесь у нас есть:
+  * ''<!DOCTYPE html>'': Тип документа. Когда HTML был молод (1991-1992), типы документов должны были действовать как ссылки на набор правил, которым должна была следовать 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">
+</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>
+<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>
+</html>
+====Пробелы в HTML====
+В приведенных выше примерах вы могли заметить, что в коде содержится много пробелов. Это необязательно. Эти два фрагмента кода эквивалентны:
+<code html HTML>
+<p id="noWhitespace">Dogs are silly.</p>
+<p id="whitespace">Kats
+    are
+        silly.</p>
+</code>
+Независимо от того, сколько пробелов вы используете внутри содержимого HTML-элемента (которое может включать один или несколько пробелов, а также разрывы строк), анализатор HTML уменьшает каждую последовательность пробелов до одного пробела при рендеринге кода. Так зачем использовать так много пробелов? Ответ: читабельность.
+Будет легче понять, что происходит в вашем коде, если он будет правильно отформатирован. В нашем HTML каждый вложенный элемент имеет отступ на два пробела больше, чем тот, который находится внутри. Вы сами можете выбрать стиль форматирования (например, сколько пробелов для каждого уровня отступов), но вам следует подумать о его форматировании.
+Давайте посмотрим, как браузер отображает два приведенных выше абзаца с пробелами и без них:
+<html>
+<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: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>
+<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%>
+:!: **Примечание.** Вам не нужно использовать ссылки на сущности для каких-либо других символов, поскольку современные браузеры прекрасно обрабатывают фактические символы, если для [[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>
+=====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 и как он работает на базовом уровне. Вы также должны уметь написать несколько элементов и атрибутов. Последующие статьи этого модуля развивают некоторые темы, представленные здесь, а также представляют другие концепции языка.
+Когда вы начнете больше изучать HTML, подумайте об изучении основ CSS (каскадных таблиц стилей). [[software:development:web:docs:Learn:CSS|CSS]] — это язык, используемый для стилизации веб-страниц, например изменения шрифтов или цветов или изменения макета страницы. Как вы вскоре обнаружите, HTML и CSS хорошо работают вместе.