Давайте поговорим о написании чистого кода. Под чистым кодом я подразумеваю такой код, который будет работать на максимально
возможном количестве устройств. Для этого нужно немного узнать об объектной модели документа, или DOM. При разработке HTML5 основной движущей силой было стремление
придерживаться стандартов. Любые новые возможности должны
основываться на HTML, CSS, DOM и JavaScript. У вас будет шанс узнать о каждом из этих компонентов. Но я хочу немного рассказать о DOM, поскольку это поможет
вам лучше понять HTML. Мы, люди, увлеченные информатикой
и компьютерами, обожаем деревья. Не те, которые растут на улице
и красиво желтеют осенью. Нам нравятся древовидные структуры данных. Такие структуры, правильность или
неправильность которых мы можем обосновать. Когда мы представляем HTML
в виде дерева, мы вкладываем идею того, что у корней
этого дерева лежит создание HTML-кода. И уже от этих корней, после создания HTML-документа мы делим дерево на две части. Нам нужен элемент head,
вот он здесь, и элемент body. В head мы будем хранить всю информацию, которую пользователь
по большей части не увидит. Единственное исключение — название, title, но в основном будут скрытые штуки,
до которых никому нет дела. В body же мы научимся
размещать все наши теги HTML5. Итак, поговорим о древовидной структуре HTML. В этом случае я подчеркиваю, что в основе каждой HTML-страницы должен
находиться так называемый тег HTML. Именно он сообщает браузеру, как отобразить информацию. Я покажу вам несколько типов тегов
и объясню, как они работают. Даже если мы забудем о картинке, в правильно сформированном документе дерево состоит из трех частей. Doctype — это используемая версия HTML. Head содержит все метаданные
или дополнительную информацию. И body. Body — это отображаемое содержимое. Это то, что получает большинство людей
при выполнении цикла запроса-ответа. Итак, давайте поговорим о doctype. Вам так повезло! Когда я начинала создавать веб-страницы, мы работали с HTML4. Нам приходилось придумывать, как объяснить, соответствовал ли наш код HTML4
строгим стандартам или был промежуточным. В HTML5 с этим все просто: есть только одно — DOCTYPE HTML.
И ничего больше. В заголовке, который находится внутри тега head, мы размещаем всю дополнительную
информацию для браузера. Так, например, вы можете указать,
на каком языке вы создаете страницу. Вы также можете добавить, и лучше это сделать, названия страниц, title. Под title я имею в виду
не большой заголовок на странице, а крохотную надпись,
которую вы видите на вкладке браузера. Позже вы также можете добавить вспомогательные файлы. Вы можете добавить
CSS-файлы для оформления страницы или файлы JavaScript для интерактивности — абсолютно любые расширения,
которые влияют на то, как люди просматривают сайт
и взаимодействуют с ним. Другие метаданные, помимо title,
не отображаются, люди их не увидят. Однако они точно увидят
информацию в теге body. Содержимое тега body —
это основная часть вашей страницы. Поэтому очень важно выстраивать код
тщательно или в форме дерева, чтобы не пропустить закрывающие теги. И не расставить теги в странном порядке. Итак, браузер отображает большую часть
содержимого в теге body, но иногда там тоже попадаются метаданные. В рамках этого урока мы не будем их касаться. Итак, давайте рассмотрим пример. Здесь представлен файл с именем template.html, и я показываю вам код на экране. Сможете ли вы выделить три части
правильно сформированного документа? Прежде всего нужно найти DOCTYPE. Вот здесь. Он указывает на то, что это документ HTML5. Затем тег HTML —
корни нашего схематичного дерева. Я указала, что страница будет
на английском языке. В разделе head у нас находятся метаданные. Здесь нам как бы говорят: «Да, я знаю, что есть много разных раскладок и способов отображения букв. Я хочу использовать UTF-8». Не заморачивайтесь.
Просто все время используйте эту кодировку. Следующая часть метаданных — это title, где мы можем увидеть надпись My First Page. Это все. Это две из трех частей. Последняя часть — это тег body, его содержимое мы хотим увидеть на экране. Итак, давайте посмотрим файл через браузер.
Что у меня тут? Title находится здесь наверху, а отображаемое содержимое — внизу. Так. Я написала код. После этого нужно обязательно его проверить. Да, код написан, он выглядит хорошо, но я знаю, что браузеры
могут отображать содержимое красиво, даже если сам код не слишком хорош. Если вы перейдете на validator.w3.org, вы сможете проверить правильность
кода любого веб-сайта. Есть три варианта. Можно ввести URL-адрес, загрузить файл или скопировать и вставить сам код. В этом случае я указала URL-адрес template.html
и запустила проверку. Ура! Конечно, ожидаемо, потому что я знала, что буду его проверять.
Проверка прошла успешно. Не смотрите на предупреждения. Предупреждения часто излишни. Что, если вы хотите проверить файл, но он еще не загружен в Интернет? Давайте быстро рассмотрим пример,
как это можно сделать. Представим, что у меня есть файл template.html
и его нужно проверить. Обращаю ваше внимание на то,
что я изменила файл и специально добавила опечатку. Я неправильно написала закрывающий тег title. Посмотрим, что произойдет и сможет ли браузер или средство проверки
найти эту ошибку. Я захожу на сайт validator.w3.org. Выбираю третий вариант, «Ввести вручную». Снова открываю файл, нажимаю Command+A
или Ctrl+A, если вы используете ПК, затем Command+C. Я скопировала весь код
и вставляю его в средство проверки. Проверяем. И если прокрутить вниз... Давайте увеличу масштаб. Можно увидеть, что было выявлено две ошибки. Почему у меня две ошибки,
если я добавила одну? Средства проверки несовершенны. Он выявил ошибку, обнаружив конец файла,
чего не должно было быть. Причина кроется во второй ошибке. Она указывает на отсутствие закрывающего тега. Таким образом, одна ошибка может
привести к нескольким сообщениям об ошибках. Так что не переживайте. Я однажды видела 50 или 60 ошибок, но как только я исправила одну строчку кода,
это решило 80% проблем. Теперь я вернусь к коду. Исправлю опечатку и сохраню файл. Снова скопирую, вставлю и запущу проверку. В этот раз проверка не выявила ошибок. Таким образом, если вы хотите получить хорошую страницу,
лучше придерживаться структуры DOM. Это подразумевает использование
открывающих и закрывающих тегов. Кроме того, внутренние теги
необходимо закрывать перед внешними. Это означает, что если вы откроете тег title, его необходимо
закрыть до закрытия тега body. Также стоит использовать правильные атрибуты.
О них мы поговорим немного позже, когда разговор пойдет об изображениях и остальных элементах страницы,
для которых нужна дополнительная информация. Также проблема кроется в том,
что браузеры исправляют неправильный код. Я их называю чрезмерно заботливыми папашами разработчиков. Они как бы знают, что вы хотите показать, поэтому выводят на экран именно это. Но это работает не для всех. Поэтому, даже если сайт выглядит хорошо,
когда вы смотрите на него в браузере, код может быть неправильным. Всегда нужно проверять код
через средство проверки.