Компьютерный код

В HTML представлены элементы, которые используются для того, чтобы описать части технических документов, например:


Обращаю Ваше внимание, что элементы <code>, <samp> и <kbd> по умолчанию представлены моноширинным шрифтом (все знаки (кегельные площадки знаков) имеют одинаковую ширину), а переменные величины (тег <var>) браузеры, как правило, отображают курсивом. Данные теги будут полезны при логической разметки документа.


Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример выделения компьютерного кода в HTML</title>
	</head>
	<body>
		<p>Переменная <var>a</var> должна быть равна переменной <var>select</var>, <br>
		тогда выполнится следующий код: <code>Hello world !!!</code> </p>
		<p>Нажмите <kbd>Enter</kbd> чтобы запустить скрипт подсчёта</p>
		<samp>Результат вывода компьютерной программы/скрипта</samp>
	</body>
</html>

Результат нашего примера:

Рис. 29 Компьютерный код в HTML.
Рис. 29 Компьютерный код в HTML.

Валидация HTML кода

Бывают такие ситуации, когда вы допускаете мелкую досадную ошибку в документе и из-за нее "плывет" макет, при этом найти ее у вас не получается. Что делать если не можешь найти ошибку в HTML коде?

Хочу познакомить Вас с онлайн сервисом (HTML валидатор W3C), который позволяет находить ошибки и проводит следующие проверки ваших страниц:

  1. На наличие синтаксических ошибок.
  2. Имеются ли у парных тегов закрывающие теги (все ли используемые теги имеют закрывающий тег).
  3. На корректное название тэгов и атрибутов в соответствии с указанной декларацией.
  4. На возможность вложения тега данного типа внутрь тэгов другого типа.
  5. Наличие посторонних элементов (все элементы страницы, которые не имеют отношения к HTML, включая пользовательские атрибуты и элементы).

Так выглядит основное окно этого сервиса:

Рис. 29a HTML валидатор Консорциума Всемирной паутины.

Рис. 29a HTML валидатор Консорциума Всемирной паутины.

На сайте вам будет предложено три варианта как пройти валидацию:

Справочно информирую Вас о том, что на сайте W3C вы также сможете найти валидатор, предназначенный для валидации CSS кода.



Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 20.
Практическое задание № 20.

После того как вы выполните упражнение пройдите валидацию документа на сайте W3C, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.