belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

1.7. Форматирование исходного кода html-документа

Как было показано в примере 1.4 выше, в процессе разметки веб-страницы необходимо соблюдать некоторые правила размещения тегов и элементов, сформированных этими тегами. Это поможет не только избежать ошибок при отображении браузером исходного кода страницы, но и улучшит читабельность кода.

Правильно писать код совсем не трудно, если использовать форматирование кода при помощи пробельных символов: разрывов строк, пробелов, символов табуляции. Дело в том, что по умолчанию браузеры игнорируют большинство пробельных символов в html-коде, заменяя символы табуляции, несколько подряд идущих пробелов, а также разрывы строк, если они не сделаны элементами 'br', одним пробелом. Все это позволяет использовать их в любом количестве и порядке для придания более удобного зрительного восприятия кода, а также облегчает отслеживание уровня вложенности элементов. Взгляните на код нашей первой страницы, но записанный в три строки (см. пример 1.6).

<!DOCTYPE html><html><head><!--Задаем кодировку текста.-->
<meta charset="utf-8"><title>Первая html-страница</title></head>
<body>Всем привет от HTML!</body></html>	

Пример 1.6. Код, к которому практически не применялось форматирование

Результат отображения страницы в браузере совершенно не изменился, в чем вы можете убедиться сами. Но читабельность кода, согласитесь, резко упала. А ведь в коде присутствует всего лишь 11 тегов, тогда как на странице их количество может исчисляться тысячами! Так что недооценивать форматирование кода, также как и применение комментариев, не стоит. Конечно, при использовании пробельных символов несколько увеличивается объем документа, но это мизер, по сравнению с получаемой выгодой. Тем более, что после завершения верстки страницы, можно сохранить отформатированный экземпляр у себя на компьютере, а на сервер выложить вариант без форматирования.

Итак, давате попробуем сформулировать некоторые правила, которых стоит придерживаться при написании кода.

Во-первых, весь код желательно записывать так, чтобы строки полностью помещались на экране монитора. Для этого достаточно использовать разрывы строк при помощи клавиши 'Enter', не забывая о том, что браузер по умолчанию преобразует их в пробелы.

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

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

В-третьих, элементы текстового содержимого обычно применяются к коротким фрагментам текста или изображениям и являются частью общей строки. Поэтому после записи открывающего и закрывающего тегов нет необходимости вставлять между ними разрывы строк. Более того, если закрывающий тег не помещается в видимую область экрана, то разрыв строки желательно применять перед открывающим тегом, чтобы весь элемент поместился на одной строке. Это также улучшит визуальное восприятие кода.

В-четвертых, комментарии желательно писать в отдельной строке перед фрагментом кода, к которому они относятся.

Контрольные вопросы и задания

  1. Перечислите основные рекомендации по форматированию html-кода.

Словарь новых английских слов

hypertext [ˈhʌɪpətɛkst] – гипертекст.
mark [mɑ:k] – отмечать, маркировать, метка.
language [ˈlaŋɡwɪdʒ] – язык.
wide [waɪd] – широкий.
web [web] – паутина, сетка.
width [wɪtθ] – ширина.
height [haɪt] – высота.
head [hed] – заголовок, голова.
body [ˈbɔdɪ] – тело.
footer [ˌfutə] – нижний колонтитул, 'подвал'.
article [ˈɑːtɪk(ə)l] – статья.
navigation [,nævi'gei∫ən] – навигация, передвижение.
charset [ˈtʃɑ:set] – кодировка.
inline [inˈlaɪn] – строчный.
block [blɔk] – блок, блочный.
background [ˈbakɡraʊnd] – фон, задний план.
title ['taitl] – заглавие, название, надпись.
edit ['edit] – редактировать, правка, редактирование.
content [kənˈtɛnt] – содержимое, содержание.
check [tʃɛk] – проверять, проверка, галочка, птичка.
sheet [ʃiːt] – лист, страница, таблица.
span [spæn] – интервал.
window [ˈwɪndəʊ] – окно.
code [kəʊd] – код.
example [ɪɡˈzæmpl] – пример, образец.
aside [ə'said] – в стороне, отдельно, кроме.
color [ˈkʌlər] – цвет, краска.
blue [blu:] – синий, голубой.
yellow ['jeləu] – желтый.
red [red] – красный.
green [gri:n] – зеленый.
grey [grei] – серый.
black [blæk] – черный.
white [wait] – белый.
orange ['ɔrindʒ] – оранжевый.
violet ['vaiəlit] – фиолетовый.
hidden ['hidn] – скрытый, скрывать, прятать.
access [ˈækses] – доступ.
key [ki:] – ключ, клавиша, идентификатор.
translate [transˈleɪt] – переводить.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх