30 рецептов правильной верстки сайта

html

В данной статье пойдет речь о простейших 30 принципах html верстки, которые направлена на то, чтобы помочь только-только начинающим верстальщикам и всем тем, кто хочет погрузиться в мир html.

Лично я, Бернацкий Андрей, когда переводил эту статью улыбался. Советы очень просты (лично мне так показалось), но вспомнив себя, когда я только начинал увлекаться всем этим делом, я осознал, что ценность этих советов не так уж и мала.

Я уверен, что в данной статье о правильной верстке сайтов, вы найдете для себя массу полезной и интересной информации.

Заранее прошу прощения за где-то «кривоватый» перевод. Просто некоторые вещи тяжело преподнести для русскоязычного пользователя. Данную статью я старался по-максимуму оптимизировать под Вас, мои уважаемые подписчики и посетители сайта.

Авторам данной статьи является Jeffrey Way. Он же ведет англоязычный блог: http://net.tutsplus.com

Итак, начинаем…

1.Всегда закрывайте теги.

<li>Первый пункт списка.
<li> Второй пункт списка.
<li> Третий пункт списка.

Во-первых, опущены теги ul или ol. Во-вторых, не закрыт также и тег li. По сегодняшним стандартам это — просто плохая практика и Вы должны 100 % этого избегать. Всегда, всегда закрывайте свои теги. Если тег не имеет парного закрывающего тега (br, img …), то используйте следующую конструкцию: <br />, <img />. То есть перед закрывающим уголком тега ставится пробел и слеш. Иначе, Вы столкнетесь с проблемами валидации, и затруднения будут появляться на каждом шагу.

Должно быть так:

<ul>
<li>Первый пункт списка. </li>
<li>Второй пункт списка. </li>
<li>Третий пункт списка. </li>
</ul>

2.Объявите правильный DocType.

html

Когда я был моложе, я участвовал на форумах CSS.

Всегда, когда у пользователя возникала проблема, мы советовали им выполнить две вещи, перед тем, как начнем ее рассматривать:

- Сделать валидацию файла CSS. Устранить любые необходимые ошибки.

- Добавить Doctype.

«DOCTYPE” идет перед открывающимся тегом <html> наверху страницы и говорит браузеру, содержит ли страница HTML, XHTML, или соединение обоих, так, чтобы это могло правильно интерпретировать расположение.

Большинство из нас выбирает между четырьмя различными doctypes, создавая новые вебсайты.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

В настоящее время ведется много разговоров о правильном выборе DOCTYPE . Когда-то, полагали, что лучшим методом, было использование Strict версии XHTML.

Однако, после некоторого исследования, было понятно, что большинство браузеров возвращается назад к регулярному HTML когда интерпретируют Strict версию XHTML. И поэтому, вместо этого, многие хотели использовать HTML 4.01 strict. Суть заключается в том, что любой из них будет контролировать вашу страницу. Сделайте некоторое исследование и решите.

3.Никогда не используйте действующие стили.

Когда Вы долго работаете над своим проектом, может быть заманчиво следовать легким маршрутом в моделировании.

<p style="color: red;"> I'm going to make this text red so that it really stands out and makes people take notice!

Уверен, что это выглядит достаточно безопасным. Однако, это указывает на ошибку в Ваших кодирующих методах.

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

Вместо

<p style="color: red;"> I'm going to make this text red so that it really stands out and makes people take notice!

Должно быть:

<p class="class-name"> I'm going to make this text red so that it really stands out and makes people take notice!

А в файле стилей написать так:

.class-name p {
 color: red;
}

4.Поместите все внешние файлы CSS в пределах тега <head>.

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

Однако, спецификация HTML рекомендует, чтобы они были размещены в пределах тега <head>. Первичная выгода — то, что Ваши страницы загрузятся быстрее.

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5.Рассмотрите вопрос о размещении Javascript файлов в конце страницы.

html

Помните — первичная цель состоит в том, чтобы сделать загрузку страницы как можно быстрее для пользователя.

Браузер загружает страницу сверху в низ (как мы читаем), соответственно, если в части head документа подключаются файлы javascript, браузер не может загружать страницу дальше, пока весь файл не будет загружен. Таким образом, пользователь должен будет ждать, пока загрузятся все файлы, и только потом увидит содержимое страницы.

Если у Вас есть файлы JS, цель которого состоит в том, чтобы добавить функциональные возможности, то их лучше разместить как раз перед заключительным тегом </body>.

Это — абсолютно лучшие методы.

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6.Никогда не используйте действующие javascript. Это не 1996!

Несколько лет назад все команды JS располагались непосредственно в пределах тегов. Это было очень распространено с простыми галереями изображений.

По существу, "onclick" был приложен к тегу. Этого была обычная процедура JS. Само собой разумеется, Вы никогда не должны, делать этого. Вместо этого, вынесите все используемые процедуры во внешний файл JS и используйте "addEventListener/attachEvent". Или, используя структуру как jQuery, только используйте метод "click".

$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});

7.Непрерывная валидация.

html

Я недавно писал о том, как идея валидации была абсолютно неверно истолкована теми, кто полностью не понимает его цель. Поскольку я упоминаю в статье, «валидация должна работать на Вас, а не против Вас».

Я очень рекомендую, особенно тем, кто только начинает, загрузить панель разработчика и использовать «Валидацию HTML» и «Валидацию CSS».

8.Скачайте Firebug.

html

Я не могу сказать, что этого достаточно. Но! firebug — без сомнения, лучший плагин, который Вы будете когда-либо использовать, создавая вебсайты. Мало того, что это обеспечивает невероятную отладку Javascript, но Вы также узнаете, как точно определить, какие элементы наследуют дополнительные отступы, о которых Вы не сознавали. Загрузите его.

Вот ссылка: https://addons.mozilla.org/en-US/firefox/addon/1843

9.Используте Firebug.

html

По моему опыту, много пользователей используют лишь 20% возможностей Firebug. Этим Вы вредите себе. Потратьте пару часов и найдите себе программу, которая Вам поможет изучать предмет.

Источники:

- Overview of Firebug

- Debug Javascript With Firebug — video tutorial

10.Пишите теги строчными буквами.

<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>

Пожалуйста, не делайте как в вышеуказанном примере. Это не имеет никакого смысла и режет мои глаза. Более того, это напоминает мне Microsoft Word!

Вот так правильно:

<div>
<p>Here's an interesting fact about corn. </p>
</div>

11.Используйте теги H1-H6.

Конечно, любой фрагмент текста можно заключить в теги div или span, с помощью стилей задать ему любой размер и толщину. Но там где по логике должен быть заголовок, лучше заключать его в теги h1-h6. Попробуйте отключить стили, и Вы убедитесь в целесообразности этого, плюс к этому, для SEO это будет только лучше.

<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>

12. Если Вы делаете свой блог, то заключайте в тег H1 заголовоки статей.

html

Решите, что лучше для Вашего сайта. Однако, строя свой блог, я б рекомендовал заключать название статей в тег H1. Для SEO – это лучшая практика (по моему мнению).

13.Скачайте ySlow.

html

Последние несколько лет команда Yahoo сделала большую работу в изучаемой нами области. Не так давно они выпустили расширенную версию Firebug, называемое ySlow. Программа проанализирует сайт, и выдаст «табель успеваемости» и покажет какие детали и области требуют усовершенствования. Я Вам рекомендую эту программу.

14.Оберните навигацию в ненумерованный список.

html

У каждого вебсайта есть навигационная панель некоторого вида. Можно, конечно, навигацию сделать примерно так:

<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>

Я бы советовал не использовать этот вариант по семантическим причинам. Ваша задача состоит в том, чтобы написать самый лучший код, к которому Вы способны.

Взамен этому рекомендую использовать ненумерованный список.

Выглядит это примерно так:

<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 во время выполнения некоторого пункта задания. Когда я читал в блоге, как один из моих приятелей борется против сил IE, я только улыбнулся и подумал, «я знаю, что Вы чувствуете, приятель».

Первым шагом, как только Вы закончили свой первичный файл CSS, должно быть создание уникального «ie.css» файла. Вы можете тогда сослаться на это только для IE при использовании следующего кода:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

Этот код говорит, «Если браузер пользователя — Internet Explorer 6 или ниже, импортируйте этот stylesheet. Иначе, ничего не сделайте.» Если Вы хотите, чтобы этот уникальные файл «ie.css» действовал также и на IE7, просто замените «lt» на «lte» (меньше чем или равный).

16.Выберите редактор кода.

html

Работаете ли в системе windows или Mac, существует множество фантастических кодовых редакторов , которые будут самым чудесным образом работать на Вас. Лично у меня есть Mac и PC и в течении дня я работаю на обеих системах. В результате я получил много знаний в различных кодовых редакторов.

Для любителей MAС:

-Coda

-Espresso

-TextMate

-Aptana

-DreamWeaver CS4

Для любителей PC:

-InType

-E-Text Editor

-Notepad++

-Aptana

-Dreamweaver CS4

17.Как только сайт готов, делаем компрессию!

html

Уменьшите ваши css и javascript файлы. Вы можете уменьшить размер каждого файла до 25%. Пожалуйста, не потрудитесь сделать это во время развития вашего проекта. Однако, как только сайт с большего готов, используйте программы on-line сжатия.

Javascript сервисы:

- Javascript Compressor

- JS Compressor

Css сервисы:

- CSS Optimiser

- CSS Compressor

- Clean CSS

18. Сокращаем, Сокращаем, Сокращаем!

html

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

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

Имеет ли смысл каждый UL упаковывать в собственный Div? Я думаю, нет.

Подобно тому, как ключ в успехе к письменной форме заключается в том, чтобы «сократить, сократить, сократить», то же самое относится и к вашей разметки.

19.Все картинки должны иметь атрибут «Alt».

Очень легко проигнорировать эту рекомендацию, однако это очень важно для валидации.

Не ркомендовано:

<IMG SRC="cornImage.jpg" />

Рекомендовано:

<img src="cornImage.jpg" alt="A corn field I visited." />

20.Не ложитесь поздно спать.

Я очень сомневаюсь, что я единственный, кто, в какой-то момент при обучении, посмотрел и понял, что целую ночь провел в темной комнате, а когда, наконец, что-то получилось, настало ранее утро. Если вы нашли себя в аналогичной ситуации, будьте уверены, что вы на правильном пути.

Удивительные «ЭВРИКА» моменты, по крайней мере для меня, всегда происходят поздно ночью.

21.Просматривайте иные ресурсы.

html

Есть ли лучший способ изучать html, чем копировать Ваших героев? В начале пути все мы — копировальные устройства! Позже мы начинаем развивать собственный стили и методы верстки. Поэтому посетите вебсайты тех, кого уважаете. Посмотрите, как они кодировали ту или иную секцию. Учитесь и копируйте у них. Все делали это, и Вы должны поступать также. (Не крадите проект, просто учитесь стилю верстки).

Заметьте, сколько javascript эффектов Вы хотели бы изучить? Вероятно, они используют плагины, для достижения нужного эффекта. Изучите ресурс и ищите тег <head> , чтоб узнать имя javascript. Потом используйте Google для поиска!

22.Стиль всех элементов.

Это очень хорошая практика, особенно при разработке для клиентов.

Просто потому, что вы не используете цитаты, отнюдь не означает, что клиент не будет их использовать. Никогда не используете нумерованные списки? Это не означает, что клиент не будет их использовать! Создайте у себя на сервисе специальную страницу, чтобы показать, что вы умеете делать стилистическую правку каждого элемента: ul, ol, p, h1-h6, blockquotes и т.д.

23.Используйте Twitter.

html

Twitter — это сервис микроблоггинга с возможностью коммуникации между участниками, некая помесь блога с ICQ. Он позволяет пользователю отправлять короткие сообщения в свою ленту новостей, на которую другие люди могут подписаться (если использовать терминологию Твиттера, вы можете начать следить (”follow”) за этим человеком). Технология понятна — как только кто-то из тех, за кем вы следите, публикует новое сообщение, оно появляется в вашей ленте или клиенте работы с Twitter.

24.Изучайте Photoshop.

html

Photoshop может стать очень важным инструментом для Вас. Как только Вы изучили html и Сss, приступайте к изучению программы Photoshop.

25.Изучайте каждый html тег.

Существует множество html тегов, которыми Вы не будите пользоваться в повседневной работе, но это не означает, что Вы не должны их изучать. Действительно, знакомы ли Вы с тегом <abbr>? Или с тегом <cite>? Изучайте их все.

Кстати говоря, если Вы не знакомы с двумя упомянутыми тегами, то пару слов о них:

<abbr> — тег используется для аббревиатур. Требует закрывающий тег.

Атрибуты:

Title – всплывающая подсказка.

Пример:

<abbr>США</abbr> - Соединенные Штаты Америки.

<cite> — тег используется для цитат. Требует закрывающий тег.

Атрибуты:

Title – всплывающая подсказка.

Пример:

<cite>здесь располагается цитата, обычно курсивом.</cite>

26.Учувствуйте в тематических сообществах.

Участие в сообществах способствует развитию знаний для веб-разработчика. Сделайте блог для публикаций. Там всегда будут люди с меньшим опытом чем вы.

27.Используйте CSS reset.

Это другая область, которая очень сильно обсуждалась. CSS Reset: использовать или нет? Если Вы хотите услышать мой личный совет, то я бы на 100% рекомендовал, чтобы Вы создали файла сброса.

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

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

28.Выстраивайте в линию.

html

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

29.Нарежьте PSD.

html

Хорошо, допустим Вы получили хорошие знания по html, css и photoshop. Следующим шагом будет преобразование PSD файла в Ваш рабочий сайт. Не волнуйтесь, это не так сложно как Вы можете подумать. Если же Вам нужна помощь, то поищите видео программы о том, как это сделать.

- «Продвинутые Основы Самостоятельного Сайтостроения»

30.Не используйте Framework.

Frameworks будь то на Javascript или CSS является фантастическим, но, пожалуйста, не используйте их при первом начинании. Хотя можно утверждать, что jQuery и Javascript можно научиться одновременно. Чего не скажешь про CSS.

CSS рамки для опытных разработчиков, которые хотя сократить себе немного времени на разработку, но они не для новичков.

На этом, выпуск посвящённый правильной верстке сайтов, завершен.

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

Автор:Jeffrey Way.

Источник: http://net.tutsplus.com

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки: , , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (10)

  1. Антон

    Довольно полезный материал. Спасибо за перевод статьи. CSS, действительно достаточно сложен. Наблюдаю за одним блогом по CSS, там такие интересные вещи вытворяют. Постепенно пытаюсь во всё это вникнуть.

  2. Анатолий Вивденко

    А где обещанный видео урок?

  3. Кирилл

    Почему мои комментарии не публикуются кто нибудь мне ответит ?????

  4. skforussia

    отличные советы, подойдут не только для начинающих

  5. Владимир

    Здравствуйте, подскажите пожалуйста чем лучше заменить div?

  6. Владимир

    Здравствуйте, подскажите пожалуйста чем лучше заменить div(18 coвет)?

    • Андрей Кудлай

      В 18-ом совете идет речь не о замене, а о сокращении кол-ва div’ов, где это возможно. Т.е. суть в том, что не нужно перегружать верстку ими. К примеру, у Вас в верстке присутствует заголовок первого уровня. Это блочный элемент. Если нет необходимости заключать его в div, то и не нужно этого делать… Вот об этом в статье и идет речь.

      • Владимир

        Спасибо большое, я понял принцип этого совет и уже научился рационально пользоватся div-ами. А так же хочется поблагодарить авторов за полезную статью.

  7. Андрей Зенков

    Я недавно наткнулся на статью о том, что в дримвивере работают неумелые новички, лузеры, в общем прям во всю отчихвостили. Почему так? Что вы думаете

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree