Как выглядит красивый HTML код?
Как выглядит красивый HTML код?
Чтобы все дальнейшие описание было Вам более понятным, скачайте этот или просто откройте в новой вкладке Вашего браузера .
Иногда интересно обратить внимание на то, всегда ли в красивом внешне вебсайте использован "красивый" html код, т.е. точный, структурированный, безошибочный. Html код это своеобразное искусство. Он не такой развитый и многообразный, как динамический язык, и тем не менее может быть написан довольно изящно и мастерски.
Вот список тех особенностей с помощью которых можно определить написан ли код с мастерством или нет.
1. DOCTYPE, определенный должным образом. Эта строка позволяет не только определить ваш код, но и "говорит" браузеру о том, как следует отобразить вашу страницу.
2. Опрятный раздел в тегах
Заголовок установлен. Кодировка объявлена. Таблицы стилей подключены. Скрипты подключены, а не написаны полностью.
3. Присвоение ID вашему документу позволяет создавать свойства CSS, которые уникальны для каждой страницы. Например, вы можете захотеть, чтобы Ваш
4. Чистое меню. Вы, наверно, часто встречались с тем, что в качестве меню используются списки. Это очень удобно, т.к. дает вам возможность контролировать его.
5. Заключение всего содержания страницы в главный тег . Этот пункт даст вам возможность все контролировать. То есть вы сможете установить максимальную и минимальную ширину страницы.
6. Важное нужно размещать в начале. Новости и важные события в коде должны следовать первыми, а меню, маловажное содержание следует размещать в конце.
7. "Включение" элементов сайта. Большинство элементов сайта повторяются на каждой странице, значит их нужно включать, с помощью php-команды include.
8. Код должен быть табулирован по разделам. Если каждый раздел кода будет выделен отступом, то структура кода будет намного понятнее. Код, который выровнен по левому краю трудно читать и понять.
9. Правильные заключительные теги. Исключите заключительные теги в непарных тегах, и проверьте, чтобы парные теги были закрыты.
10. Используйте теги заголовков. Использование заголовков необходимо, т.к. они показывают иерархию разделов, и больше упорядочивают их.
11. Содержание, Содержание, Содержание. Не забудьте выделять содержание в параграфы и заключать их в теги . Не переусердствуйте с тегами
, это сырое форматирование.
12. Никаких стилей! Ваш html код должен быть сосредоточен на структуре и содержании, а не на оформлении страницы! Все стили выносите в отдельный файл CSS.
Чтобы все дальнейшие описание было Вам более понятным, скачайте этот или просто откройте в новой вкладке Вашего браузера .
Иногда интересно обратить внимание на то, всегда ли в красивом внешне вебсайте использован "красивый" html код, т.е. точный, структурированный, безошибочный. Html код это своеобразное искусство. Он не такой развитый и многообразный, как динамический язык, и тем не менее может быть написан довольно изящно и мастерски.
Вот список тех особенностей с помощью которых можно определить написан ли код с мастерством или нет.
1. DOCTYPE, определенный должным образом. Эта строка позволяет не только определить ваш код, но и "говорит" браузеру о том, как следует отобразить вашу страницу.
2. Опрятный раздел в тегах
Заголовок установлен. Кодировка объявлена. Таблицы стилей подключены. Скрипты подключены, а не написаны полностью.
3. Присвоение ID вашему документу позволяет создавать свойства CSS, которые уникальны для каждой страницы. Например, вы можете захотеть, чтобы Ваш
<h2 />
тэг выглядел по-особенному, к примеру, на домашней странице. В таблице стилей CSS вы можете написать: #home h2 {}
, чтобы достигнуть этого.4. Чистое меню. Вы, наверно, часто встречались с тем, что в качестве меню используются списки. Это очень удобно, т.к. дает вам возможность контролировать его.
<ul id="menu">
<li>[url=http://index.php]Home[/url]</li>
<li>[url=http://about.php]About[/url]</li>
<li>[url=http://contact.php]Contact[/url]</li>
</ul>
<li>[url=http://index.php]Home[/url]</li>
<li>[url=http://about.php]About[/url]</li>
<li>[url=http://contact.php]Contact[/url]</li>
</ul>
5. Заключение всего содержания страницы в главный тег . Этот пункт даст вам возможность все контролировать. То есть вы сможете установить максимальную и минимальную ширину страницы.
6. Важное нужно размещать в начале. Новости и важные события в коде должны следовать первыми, а меню, маловажное содержание следует размещать в конце.
7. "Включение" элементов сайта. Большинство элементов сайта повторяются на каждой странице, значит их нужно включать, с помощью php-команды include.
8. Код должен быть табулирован по разделам. Если каждый раздел кода будет выделен отступом, то структура кода будет намного понятнее. Код, который выровнен по левому краю трудно читать и понять.
9. Правильные заключительные теги. Исключите заключительные теги в непарных тегах, и проверьте, чтобы парные теги были закрыты.
10. Используйте теги заголовков. Использование заголовков необходимо, т.к. они показывают иерархию разделов, и больше упорядочивают их.
11. Содержание, Содержание, Содержание. Не забудьте выделять содержание в параграфы и заключать их в теги . Не переусердствуйте с тегами
, это сырое форматирование.
12. Никаких стилей! Ваш html код должен быть сосредоточен на структуре и содержании, а не на оформлении страницы! Все стили выносите в отдельный файл CSS.