=====Начало работы с HTML======
В этой статье мы рассмотрим абсолютные основы HTML. Для начала в этой статье даны определения элементов, атрибутов и всех других важных терминов, которые вы, возможно, слышали. Также объясняется, где они вписываются в HTML. Вы узнаете, как структурированы элементы HTML, как структурирована типичная страница HTML и другие важные базовые функции языка. Попутно будет возможность поиграть и с HTML!
=====Что такое HTML?=====
[[software:development:web:docs:Glossary:HTML|HTML]] (язык разметки гипертекста) — это язык разметки , который сообщает веб-браузерам, как структурировать посещаемые вами веб-страницы. Это может быть настолько сложно или просто, насколько того хочет веб-разработчик. HTML состоит из ряда [[software:development:web:docs:Glossary:Element|элементов]], которые вы используете для включения, переноса или разметки различных частей контента, чтобы он выглядел или действовал определенным образом. Заключающие теги могут превращать контент в гиперссылку для перехода на другую страницу, выделять слова курсивом и т. д. Например, рассмотрим следующую строку текста:
My cat is very grumpy
Если бы мы хотели, чтобы текст оставался отдельным, мы могли бы указать, что это абзац, заключив его в [[software:development:web:docs:Web:HTML:Element:p|]] элемент абзаца ( ):
My cat is very grumpy
:!: **Примечание.** Теги в HTML не чувствительны к регистру. Это означает, что их можно писать как прописными, так и строчными буквами. Например, [[software:development:web:docs:Web:HTML:Element: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>
Если вы допустили ошибку, вы можете очистить свою работу с помощью кнопки «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>
<html>
Пример: <p>Мой кот <strong>очень сварливый.</p></strong>
</html>
**Теги должны открываться и закрываться таким образом, чтобы они находились внутри или снаружи друг друга**. Учитывая такое перекрытие, как в приведенном выше примере, браузеру приходится угадывать ваши намерения. Подобные догадки могут привести к неожиданным результатам.
====Пустотные элементы====
Не все элементы следуют шаблону открывающего тега, содержимого и закрывающего тега. Некоторые элементы состоят из одного тега, который обычно используется для вставки/внедрения чего-либо в документ. Такие элементы называются [[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' атрибут представляет собой идентифицирующее имя, используемое для указания элемента с информацией о стиле.
Атрибут должен иметь:
* Пробел между ним и именем элемента. (Для элемента с более чем одним атрибутом атрибуты также должны быть разделены пробелами.)
* Имя атрибута, за которым следует знак равенства.
* Значение атрибута, заключенное в открывающие и закрывающие кавычки.
====Добавление атрибутов к элементу====
Другой пример элемента: [[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>'' теги в элемент.
- Добавьте ''href'' атрибут и через знак ''='' в ''кавычках'' ссылку на любой сайт и атрибут ''title'' с присвоением через знак ''='' информации о сайте ''заключенной в кавычки''.
- Укажите ''target'' атрибут, чтобы ссылка открывалась в новой вкладке ''(target="_blank")''.
Отредактируйте строку ниже в области «Редактора кода», и вы должны увидеть ссылку, которая при наведении курсора мыши отображает значение атрибута ''title'', а при нажатии открывает новую вкладку и переходит к веб-адресу ''href'' атрибута. Помните, что вам необходимо включать пробел между именем элемента и между каждым атрибутом. Просматривайте обновления изменений в режиме реального времени в области «Вывод (правая область редактора).
<html>
<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>
<a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">Ссылка на сайт</a>
</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 />
<!-- ввод текста разрешен, так как он не содержит атрибута отключен -->
<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>
<!-- правильный синтаксис (с кавычками) -->
<a href="https://www.mozilla.org/">Ссылка на сайт</a>
<!-- не желательный синтаксис без кавычек (разрешено при определенных обстоятельствах) -->
<a href=https://www.mozilla.org/>Ссылка на сайт</a>
</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>
<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>
Всегда включайте кавычки атрибутов. Это позволяет избежать таких проблем и приводит к более читабельному коду.
=====Одинарные или двойные кавычки?=====
В этой статье вы также заметите, что атрибуты заключены в двойные кавычки. Однако в некотором HTML-коде вы можете увидеть одинарные кавычки. Это вопрос стиля. Вы можете смело выбирать, какой из них вам больше по душе. Обе эти строки эквивалентны:
<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='') -->
<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>
<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>
<!-- одинарная кавычка внутри двойной -->
<a href="https://www.mozilla.org/" title="Isn't no the Mozilla homepage">Ссылка на сайт#4 </a>
</code>
Чтобы использовать кавычки внутри других кавычек того же типа (одинарной или двойной кавычки), используйте сущности HTML (например ''"'' может быть интерпретирован как обрамляющая значение атрибута кавычка):
<code html HTML>
<!-- использование сущности html " -->
<a href="https://www.mozilla.org/" title="Isn't "no the" Mozilla homepage">Ссылка на сайт#5 </a>
</code>
Пример неправильного использования кавычек внутри других кавычек значения атрибута (отредактируйте строку ниже в области ввода в окне редактора **<color #ed1c24>"</color><color #22b14c>no the</color><color #ed1c24>"</color>** на **<color #ed1c24>"</color><color #22b14c>no the</color><color #ed1c24>"</color>** и вы сможете увидеть свои изменения в режиме реального времени в области «Вывод»). Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки Reset:
<code html HTML>
<!-- использование сущности html " -->
<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
This is my page