Кодировка HTML-страницы
Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно «угадает» кодировку, то вместо текста будут отображаться иероглифы.
Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head>использовать тег:
<meta charset="имя кодировки">
Самая распространённая современная кодировка — utf-8. Используйте её во всех своих проектах.
Ключевые слова
Есть целое семейство тегов <meta>, называемых мета-тегами. Их можно использовать внутри тега <head>.
Мета-теги различаются набором атрибутов и их значений, вот некоторые из атрибутов: content, http-equiv, name и scheme.
Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы. Задаётся он так:
<meta name="keywords" content="разные, ключевые, слова">В атрибуте content через запятую перечисляются самые важные слова из содержания страницы. Раньше этот тег был очень важен для поисковиков. Каково положение дел сейчас — большой секрет Яндекса и Гугла.
HTML-комментарии
Комментарий в HTML-коде задаётся так:
<!-- любой текст -->
Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях:
· Для комментирования кода. Всегда полезно оставить подсказку.
· Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.
Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают. Внутри тега <style> HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете в курсе «Знакомство с CSS».
Подключение внешних стилей
Чаще всего стили подключают из внешнего файла с расширением.css. Для этого используется тег <link>. Например:
<head> <link href="style.css" rel="stylesheet"></head>В атрибуте href задают адрес файла, а атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили, а не что-то другое.
Лучше подключать стили внутри <head>, но это необязательно. Тег <link> будет работать и в другом месте страницы.
Подключение скриптов
В вебе следующее разделение ролей: HTML отвечает за структуру документа, стили — за его внешний вид, а скрипты — за поведение. С помощью скриптов, например, можно «оживлять» страницу, добавляя анимацию и другие эффекты. Скрипты создаются с помощью языка JavaScript.
Скрипты подключаются так же, как и стили: их либо пишут внутри страницы, либо подключают как внешние файлы.
Встроенные скрипты пишут внутри тега <script>. Например:
<script> JavaScript-код</script>Тег <script> можно использовать в любом месте HTML-документа, но лучше вставлять его в самом конце перед закрывающим тегом </body>.
Часть возможностей JavaScript постепенно переходит в CSS, например, возможность задавать плавное изменение значений свойств. Вы увидите это в задании.
Подключение внешних скриптов
Скрипты чаще всего подключают из внешних файлов с расширением.js. Для этого используют тег <script> с атрибутом src, в котором указывается путь к файлу. Например:
<script src="scripts.js"></script>Обратите внимание, что тег <script> парный. Если вы подключаете внешние скрипты, то просто ничего не пишите внутри тега.
Внешние скрипты лучше подключать перед закрывающим тегом </body>.
Неупорядоченный список
Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список».
В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. В последующих заданиях мы будем тренироваться работать с ними.
Неупорядоченные (или маркированные) списки создаются с помощью тега <ul>, который может содержать внутри себя теги <li>, обозначающие «элемент списка».
Упорядоченный список
Упорядоченный список создаётся с помощью тега <ol>, который может содержать внутри себя теги <li>.
Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.
Для упорядоченного списка можно задать атрибут start, который изменяет начало нумерации.
Список определений
Список определений создаётся с помощью трёх тегов:
1. <dl> обозначает сам список определений;
2. <dt> обозначает термин;
3. <dd> обозначает определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl>.
Например:
<dl> <dt>Термин</dt> <dd>Определение</dd> <dt>Второй термин</dt> <dd>И его определение</dd> <dt>Кошка</dt> <dd>Шерстяное изделие развлекательного характера</dd></dl>
Расшифровка тегов списков
Dl - Definition List, сам список определений
Dt - Definition Term, термин
Dd - Definition Description, определение термина
Ul - Unordered List, неупорядоченный список
Li - List Item, элемент списка
Теги
Тег <strong> определяет важность отмеченного текста.
Тег <b> предназначен для выделения текста без придания ему особой важности.
Визуально оба тега одинаковы, они выделяют текст полужирным.
Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>. То же самое касается и тегов <em> и <i>. Тег <em> «говорилка» будет выделять интонацией.
Отметим, что новый смысл тегу <b> придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.
Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Например, если мы хотим подчеркнуть, что Кекс не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:
Инструктор Кекс любит <em>играть</em> с укропом.Тег <i> обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.
Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:
Обычно Кекс пользовался <i>инспектором</i> браузера для поиска ошибок.Визуально оба тега одинаковы, они выделяют текст курсивом.
Новый смысл тегу <i> придали в HTML5. Раньше это был просто тег для выделения текста курсивом.