Различия

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

--- software:development:web:docs:learn:html:introduction_to_html:getting_started [2023/09/16 16:37] – [Ссылки на сущности: включение специальных символов в HTML.] 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;  -->
@@ Строка 326: / Строка 327: @@
 </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 хорошо работают вместе.