Комментарии и якоря
Комментарии в HTML коде используются для временного отключения кода (как правило, просто удалить код неудобно по той причине, что возможно его придется восстанавливать) и в качестве подсказки для себя, либо для лиц, которые будут разбираться в Вашем коде. Текст внутри комментария не отображается браузером на странице.
Комментарии можно использовать в любом месте страницы, кроме тега <title>, который обеспечивает название для документа.
Ниже представлен пример использования тега комментария внутри HTML страницы:
<!DOCTYPE html> <html> <head> <title>Пример использования тега комментария</title> </head> <body> Видимое содержимое страницы. <!-- Ваш комментарий, текст внутри которого не отображается браузером на странице. --> </body> </html>
Условные комментарии
Условные комментарии, используются для написания специального кода, предназначенного для конкретного браузера (Internet Explorer). Остальные браузеры этот код игнорируют как обычный комментарий.
Например:
<!--[if IE 7]> Код HTML <![endif]-->
Код выполняется только тогда, когда совпадает заданное условие. В данном случае если браузер Internet Explorer 7, то необходимо выполнить код, который мы поместим внутри тега.
Другие примеры:<!--[if IE]> Инструкции для всех Internet Explorer <![endif]--> <!--[if lte IE 6]> Инструкции для всех IE меньше или равно 6<![endif]--> <!--[if gte IE 7]> Инструкции для всех IE старше или равно 7<![endif]-->
Значение операторов:
| Оператор | Значение |
|---|---|
| lt | Меньше чем. |
| lte | Меньше или равно. |
| gt | Больше чем. |
| gte | Больше или равно. |
| & | Логическое И. Предназначено для объединения нескольких условий. Возвращает true (истину), если все условия выполняются. |
| ! | Логическое НЕ. Условие истинно, если условие следующее за ! не выполняется. |
| | | Логическое ИЛИ. Возвращает true (истину), если хотя бы одно из условий выполняется. |
| ( ) | Группировка дополнительных условий (создание сложных запросов с логическими операторами). |
HTML5 Shiv
Хочу обратить Ваше внимание на то, что в Internet Explorer 8 и более ранних версиях поддержка элементов HTML 5 отсутствует. Несмотря на то, что доля Internet Explorer этих версий смело приближается к 0.1% к концу 2016 года, некоторые заказчики требуют проводить разработку с учётом поддержки данных браузеров.
Для того, чтобы ранние версии Internet Explorer распознавали теги HTML 5, был написан плагин HTML5 Shiv (скрипт на языке программирования Javascript). Чтобы обеспечить поддержку этих браузеров, разместите перед закрывающим тегом </head> на каждой странице Вашего сайта следующий код*:
<!DOCTYPE html> <html> <head> <title>Пример подключения HTML5 Shiv для IE</title> <!--[if lt IE 9]> <script src = "//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script> <![endif]--> </head> <body> Видимое содержимое страницы. </body> </html>
В этом примере мы создали условный комментарий, который предназначен для браузеров Internet Explorer, чья версия меньше чем девятая (if lt IE 9). Внутри комментария мы разместили скрипт, который подключается со стороннего ресурса (абсолютная ссылка).
Тег <script> используется для определения скрипта на стороне клиента (как правило на языке JavaScript). Элемент содержит текст скрипта, либо он указывает на внешний файл скрипта через атрибут src (по аналогии с элементом <img>). Если элемент ссылается на внешний скрипт, то в этом случае элемент должен быть пустым. Тег <script> обязательно должен иметь закрывающий тег </script> незавимсимо от того где скрипт содержится (внутри тега, или указан как URL адрес для внешнего скрипта).
* - В рамках изучения HTML и CSS, мы не будем рассматривать методы подключения скриптов к HTML документам. Пример носит образовательный характер с целью расширения вашего кругозора и понимания из чего состоит практически любая страница в сети.
HTML создание закладки (якоря)
HTML закладка или более распространенное их название якорь (англ. anchor) используются, чтобы позволить посетителям при клике на определенную ссылку перейти на заданную часть веб-страницы. Использование закладок уместно на тех сайтах, которые имеют длинные страницы для построения понятной навигации.
Давайте по порядку рассмотрим, что требуется для того, чтобы создать якорь:
- Для начала нам необходимо определиться куда мы хотим, чтобы наш пользователь перешёл, допустим это заголовочный элемент первого уровня (<h1>) в начале страницы.
- С использованием глобального атрибута id задаем уникальный идентификатор для элемента <h1>.
<h1 id = "totop">Комментарии и якоря</h1>
Обратите внимание на некоторые правила использования глобального атрибута id:
- Используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
- Идентификатор не должен содержать каких-либо пробелов.
- Идентификатор на странице используется только к одному элементу.
- Идентификаторы чувствительны к регистру (vottakvot и VotTakVot разные идентификаторы).
Глобальный атрибут id будет более подробно рассмотрен при изучении CSS 3 в статье "Селекторы. Часть 1.".
- И нам осталось только добавить в адрес ссылки наименование нашего идентификатора, перед идентификатором обязательно необходимо указать символ решетки #:
<a href = "#totop">Перейти наверх страницы</a>
В результате чего при клике на ссылку посетитель автоматически перейдёт к той части страницы, которую мы задали, в браузере это будет выглядеть следующим образом:
Перейти наверх страницыНо и это еще не всё, ссылку с якорем можно сделать как на другую страницу Вашего сайта, так и совершенно стороннего сайта (абсолютный адрес), при условии, что у элемента задан идентификатор (id). Пример перехода к заголовку первого уровня предыдущей статьи:
<a href = "tablici.php#totop">К началу предыдущей статьи</a> <!-- страница находится в той же папке, что и эта статья -->
В результате чего при клике на ссылку посетитель автоматически перейдёт к началу предыдущей статьи:
К началу предыдущей статьиВопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
- Используя полученные знания составьте HTML страницу (index.html в архиве), которая содержит три якорные ссылки:
- Первая ссылка перемещает к первому абзацу на той же странице.
- Вторая ссылка перемещает ко второму абзацу на той же странице.
- Третяя ссылка перемещает к третьему абзацу, который находится на отдельной странице (practice_17_2.html в архиве).
- Результат примера вы можете скачать после выполнения задачи для самопроверки: