Советы по правильному использованию html (11-20)
11. Используйте теги H1 - H6
Лучше всего использовать все 6 тегов. Большинство вебмастеров работают максимум с 2-3-мя. В целях SEO и правильной семантики иногда заставляйте себя вместо тега P использовать заголовки.
<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
12. При запуске блога оставьте тег H1 для названия статьи
С точки зрения SEO это будет наилучшим вариантом. По многим поисковым запросам Ваш блог начнет появляться в выдаче.
13. Загрузите ySlow
В последние несколько лет команда Yahoo очень успешно работает над темой ускорения загрузки сайтов. Совсем недавно они создали дополнение для Firebug с названием ySlow (http://developer.yahoo.com/yslow/). При активации оно анализирует сайт и выдает отчет с рекомендациями по улучшению скорости загрузки. Рекомендую всем.
14. Сделайте навигацию на сайте с помощью неупорядоченного списка
На каждом сайте есть какая-либо навигация. Можно ее создать очень просто:
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
Но я призываю Вас так не делать по причине семантики. Вы должны стремится писать наиболее оптимальный код.
И лучше всего использовать тег UL, так как в нем может находится список элементов.
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
15. Научитесь подстраиваться под IE
Порой Вам захочется очень сильно ругаться на творение Майкрософт. Очень часто именно в этом браузере все отображается неверно.
В таком случае после создания основной таблицы стилей, Вам необходимо также создать уникальную таблицу стилей "ie.css". И скармливать ее посетителям, которые используют IE вот так:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
Этот код сообщает браузеру: "Если у пользователя Internet Explorer 6 или ниже, загрузить этот CSS файл". Если необходимо включить также IE7, тогда замените "lt" на "lte" (при переводе с английского: меньше или равно).
16. Выберите хороший редактор кода
С помощью специальных архиваторов можно существенно (более чем на 25%) уменьшить CSS и javascript файлы. В процессе создания - не думайте об этом. После завершения работы не забывайте про это.
Сервисы по сжатию javascript:
* javascript Compressor (http://javascriptcompressor.com/)
* JS Compressor (http://www.xmlforasp.net/JSCompressor.aspx)
Сервисы по сжатию CSS:
* CSS Optimiser (http://www.cssoptimiser.com/)
* CSS Compressor (http://www.cssdrive.com/index.php/main/csscompressor/)
* Clean CSS (http://www.cleancss.com/)
18. Всем изображениям необходим аттрибут "Alt"
Очень легко его не использовать. Но это очень важно для успешной проверки на валидность и в целях оптимизации сайта.
Плохо:
<IMG SRC="cornImage.jpg" />
Хорошо:
<img src="cornImage.jpg" style="max-width:600px;" alt="A corn field I visited." />
19. Просматривайте исходный код страницы
Лучший способ выучить HTML просматривать исходный код других сайтов. На первых этапах можно копировать интересные идеи. Далее они будут трансформироваться в свои новые наработки. Копируйте у всех, учитесь, все такое делают (но при этом не передирайте дизайн 1 в 1 - экспериментируйте).
Также с помощью исходного кода страницы можно найти интересные javascript эффекты.
20. Выучите каждый тег HTML
Существует десятки тегов, с которыми Вы скорее всего не встретитесь. Но это не означает, что их можно не знать. Вам знаком тег "abbr"? а "cite"? Эти теги заслуживает место в Вашем арсенале.
На сегодня все! Завтра Вас ждет завершающая часть статьи.
Всего наилучшего, уважаемые посетители.
Лучше всего использовать все 6 тегов. Большинство вебмастеров работают максимум с 2-3-мя. В целях SEO и правильной семантики иногда заставляйте себя вместо тега P использовать заголовки.
<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
12. При запуске блога оставьте тег H1 для названия статьи
С точки зрения SEO это будет наилучшим вариантом. По многим поисковым запросам Ваш блог начнет появляться в выдаче.
13. Загрузите ySlow
В последние несколько лет команда Yahoo очень успешно работает над темой ускорения загрузки сайтов. Совсем недавно они создали дополнение для Firebug с названием ySlow (http://developer.yahoo.com/yslow/). При активации оно анализирует сайт и выдает отчет с рекомендациями по улучшению скорости загрузки. Рекомендую всем.
14. Сделайте навигацию на сайте с помощью неупорядоченного списка
На каждом сайте есть какая-либо навигация. Можно ее создать очень просто:
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
Но я призываю Вас так не делать по причине семантики. Вы должны стремится писать наиболее оптимальный код.
И лучше всего использовать тег UL, так как в нем может находится список элементов.
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
15. Научитесь подстраиваться под IE
Порой Вам захочется очень сильно ругаться на творение Майкрософт. Очень часто именно в этом браузере все отображается неверно.
В таком случае после создания основной таблицы стилей, Вам необходимо также создать уникальную таблицу стилей "ie.css". И скармливать ее посетителям, которые используют IE вот так:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
Этот код сообщает браузеру: "Если у пользователя Internet Explorer 6 или ниже, загрузить этот CSS файл". Если необходимо включить также IE7, тогда замените "lt" на "lte" (при переводе с английского: меньше или равно).
16. Выберите хороший редактор кода
С помощью специальных архиваторов можно существенно (более чем на 25%) уменьшить CSS и javascript файлы. В процессе создания - не думайте об этом. После завершения работы не забывайте про это.
Сервисы по сжатию javascript:
* javascript Compressor (http://javascriptcompressor.com/)
* JS Compressor (http://www.xmlforasp.net/JSCompressor.aspx)
Сервисы по сжатию CSS:
* CSS Optimiser (http://www.cssoptimiser.com/)
* CSS Compressor (http://www.cssdrive.com/index.php/main/csscompressor/)
* Clean CSS (http://www.cleancss.com/)
18. Всем изображениям необходим аттрибут "Alt"
Очень легко его не использовать. Но это очень важно для успешной проверки на валидность и в целях оптимизации сайта.
Плохо:
<IMG SRC="cornImage.jpg" />
Хорошо:
<img src="cornImage.jpg" style="max-width:600px;" alt="A corn field I visited." />
19. Просматривайте исходный код страницы
Лучший способ выучить HTML просматривать исходный код других сайтов. На первых этапах можно копировать интересные идеи. Далее они будут трансформироваться в свои новые наработки. Копируйте у всех, учитесь, все такое делают (но при этом не передирайте дизайн 1 в 1 - экспериментируйте).
Также с помощью исходного кода страницы можно найти интересные javascript эффекты.
20. Выучите каждый тег HTML
Существует десятки тегов, с которыми Вы скорее всего не встретитесь. Но это не означает, что их можно не знать. Вам знаком тег "abbr"? а "cite"? Эти теги заслуживает место в Вашем арсенале.
На сегодня все! Завтра Вас ждет завершающая часть статьи.
Всего наилучшего, уважаемые посетители.