Как правельно сверстать сайт?

b1aa523abdb6xЧтобы код HTML, который вы пишете на своем сайте, был хорошим, недостаточно одной только его валидности (validation — соответствие стандартам W3C — всемирного интернет-общества). Чтобы сайт выглядел профессионально, код тоже должен быть красиво написан и структурирован, а не “слеплен из того что было”. Рассмотрим главные признаки, которые отличают хороший HTML код.

Правильно прописанный <!DOCTYPE PUBLIC…>. Хоть эта громоздкая конструкция в самом верху страницы и кажется вам странной, она дает браузеру задания — как правильно отображать страницу, а также делает код валидным. Поэтому простым <html> не ограничиться.

Целостная head секция. Здесь также не обойтись одним <title>. CSS-стили и Javascript должны быть в отдельных папках, и вызываться в head как обычная ссылка.
<link rel=”stylesheet” href=”/css/style.css” type=”text/css” media=”screen” />
И стили не просто вызываются, но и задается тип их отображения — или обычный стиль, или же стиль для распечатки страницы (media=”print”). Favicon необязательный, но все же нужный элемент сайта. В блоке head также стоит разместить meta-теги, если вы решили их использовать. И одна из важнейших деталей — если вы ведете статистику RSS с помощью сервиса Feedburner, то в head обязательно нужно прописать адрес вашего RSS, который уже размещен на Feedburner’ом.
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”http://feeds.feedburner.com/feed/” />

Уникальные стили для отдельных элементов. Например, если вы хотите, чтобы тэги <h2> имели разные свойства, то можно сделать так: #home h2 {. То есть для каждой страницы будет создан отдельный стиль.
То же касается ссылок — не обязательно, чтобы они везде были лишь жестко синими с подчеркиванием. Для меню создайте один стиль, для текста — другой, и так далее, для каждого вида ссылок: .menu а {; .footer а {;

Семантичнисть. Семантичнисть — это когда код понятен человеку в первую очередь, а не машине. Именно поэтому следует создавать семантический код, разметка которого будет понятна в первую очередь вам. Ведь вам, как администратору, этим кодом потом управлять. Согласитесь, что намного более легко руководить меню, когда оно имеет следующий вид:

<div id="”menu”">
<ul>
	<li><a href="”index.php”">Home</a></li>
	<li><a href="”about.php”">About</a></li>
	<li><a href="”contact.php”">Contact</a></li>
</ul>
</div>

Общий DIV для всего контента. Вам будет намного легче организовывать на странице, если все блоки помещены внутрь одного общего DIV-тега, его обычно называют <Div id=”wrap”>, <div id=”container”>. Особенно, если ширина сайта фиксирована.
Важнейший контент — в первую очередь. Если ваш сайдбар является лишь навигацией или же еще менее важным контентом, то лучше в кода поместить его ниже. А важнейшую информацию — такую как новости, , события — наверх. Это станет еще одним, хотя и небольшим плюсом к SEO-оптимизации вашего кода.

Контент по частям. Разбить код, что часто повторяется на страницах (header, footer, разные блоки) в отдельные файлы, и потом просто включайте их в виде файлов. <?php include_once (”menu.html”)?>
Именно по такому принципу работает известная CMS WordPress — сама страница index.php состоит из набора функций, которые вызывают определены разделы, такие как header.php, sidebar.php, footer.php, bottom.php, но другие в один конечный файл, который вы видите.

Код с отступлениями. Намного более приятно читать и редактировать код, который разделен иерархически, — с отступлениями, так как в пункте № 4. Код. уровнен align left ужасно читать быстро найти нужную вам строку.

Никаких стилей. Ваш HTML-код должен создаваться для контента, для информации, а не для стиля. о возможности исключайте тэги, которые редактируют стиль, из HTML-документа. Все ваши стили должны находиться в отдельном CSS-файле, который указан в блоке <head>. Забудьте о <font>.

Правильный код — путь к валидности. В конце закрывайте все <Img /> <br/> на конце. Используйте &copy; для значка ©, и аналогичных кодов для других символов. Не забывайте закрывать все тэги на странице, что вы открыли =).

Запись навигация

Top