В своей статье я хочу научить начинающих и даже уже со стажем верстальщиков, делать свои страницы правильно и не допускать ошибок.
1. Одна из самых больших ошибок верстальщиков, для того, чтобы документ имел свойство отображаться корректно под любым браузером, мы должны указать тип документа и версию спецификации вёрстки. Самый основной тип на данный момент HTML 4.01 Transitional, поэтому в самом начале документа вставим строку:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//">
2. Если ваш сайт не является межъязыковым порталом, где могут использоваться как Русский так и другие языки стран мира.. Чтобы указать что наш ресурс является Русским, в свойстве тега html укажем язык:
Код
<html lang='ru'>
3. Просто обязательно указать кодировку на сайте, ладно 70% используют Windows и как правило веб-браузеры на этой основе уже умеют различать кодировку, но не забываем о Русских 30% использующих Mac, Linux, Unix и т.п. Поэтому в контейнере <head></head>, установим специализированный мета тег, в котором указанна наша стандартная кодировка windows-1251.
Код
<meta http-equiv='content-type' content='text/html; charset=windows-1251'>
4. Также пожалуйста не забывайте о правильной структуре страницы:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//">
<html>
<head>
<title>Заголовок</title>
<!-- перечень мета тегов -->
</head>
<body>
<!-- Тело документа -->
</body>
</html>
А так же структуру таблиц:
Код
<table>
<tr>
<td></td>
</tr>
</table>
Где tr - строка, а td ячейка но никак не наоборот!
5. Не забывайте что 99,9% тегов в html 4.01 имеют закрывающий тег, если вы забываете закрывать открытые теги, ваша страница может резко исказиться и стать нечитабельной, также при создании вложенных тегов, пользуйтесь форматированием кода, чтобы легче было разобраться в набранном коде, иначе вы просто можете запутаться, в помощь вам приходят современные редакторы с подсветкой синтаксиса в том числе и HTML.
6. У тега <img> существует атрибут alt, некоторые оставляют поле пропущеным, на самом деле это очень грубая ошибка, представьте меню на вашем сайте выполнено графически, а пользователь зашёл на ваш ресурс с GPRS канала с отключенной графикой, как ему быть? Графика отключена.. Меню он не видет.. Поэтому когда в alt стоит какое-то значение, например <img src='main.gif' alt='Главная'>, пользователю будет ясно как пройти в тот или иной раздел. Да и вообще скажу Вам по секрету alt даёт вес при индексировании сайта, по крайней мере в Яндексе точно, при публикации каких-либо изображений в alt пишите либо описание публикации либо адрес вашей страницы, ведь 25% пользователей на Ваш сайт приходят из разделов поиска картинок на Яндексе или Гугле.
7. В настоящий момент атрибут height перекочивал из HTML в CSS, поэтому в среде HTML больше не существует, при вёрстке страниц высота задаётся строго либо через CSS стили, либо таким образом:
Код
<tr style='height:100px'>
Не забывайте указывать единицу в которой устанавливаем размер, в пикселях или в пунктах или вообще в процентах, браузеры не телепаты понять Вас не могут.
8. Неоднократно замечаю что значение атрибута указывается без кавычек, это не правильно! Может привести к логическому а затем физическому искажению кода.
Т.е. писать вот так не правильно!
Код
<img width=1 alt=text src=file.gif>
Правильно так:
Код
<img width='1' alt='text' src='file.gif'>
А лучше вообще указывать и высоту и ширину объекта через стиль тобишь
Код
style='width:1px;height:1px'
Это самые основные ошибки, допускаемые при вёрстке страниц, остальные случае более частные, о которых лучше молчать.
+ В процессе разработки проверяйте страницы вашего сайта на валидность, через интернет-инструмент .
Удачи.
</body></html>
.:: Special for Open Team E-zine ::.
Автор: Мазур Даниила aka Spike Shinizle.
