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

19

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

Особисто я, Бернацький Андрій, коли перекладав цю статтю посміхався. Поради дуже прості (особисто мені так здалося), але згадавши себе, коли я тільки починав захоплюватися усім цим справою, я усвідомив, що цінність цих рад не так вже й мала.

Я впевнений, що в даній статті правильної верстці сайтів, ви знайдете для себе багато корисної і цікавої інформації.

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

Авторам даної статті є Jeffrey Way. Він же веде англомовний блог: http://net.tutsplus.com

Отже, починаємо…

1.Завжди закривайте теги.

  • Перший пункт списку.
  • Другий пункт списку.
  • Третій пункт списку.

    По-перше, опущені теги ul або ol. По-друге, не закрите також і тег li. За сьогоднішніми стандартами це — просто погана практика і Ви повинні 100 % цього уникати. Завжди, завжди закривайте свої теги. Якщо тег не має парного закриваючого тега (br, img …), то використовуйте наступну конструкцію:
    , 30 рецептів правильної верстки сайту. Тобто перед закриваючим куточком тега ставиться пробіл і слеш. Інакше, Ви зіткнетеся з проблемами валідації, і труднощі будуть з’являтися на кожному кроці.

    Повинно бути так:

    • Перший пункт списку.
    • Другий пункт списку.
    • Третій пункт списку.

    2.Оголосіть правильний DocType.

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

    Коли я був молодший, я брав участь на форумах CSS.

    Завжди, коли у користувача виникала проблема, ми радили їм виконати дві речі, перед тим, як почнемо її розглядати:

    — Зробити валідацію файлу CSS. Усунути будь-які необхідні помилки.

    — Додати Doctype.

    «DOCTYPE» йде перед відкривається тегом вгорі сторінки і каже браузеру, містить сторінка HTML, XHTML, або поєднання обох, так, щоб це могло правильно інтерпретувати розташування.

    Більшість з нас вибирає між чотирма різними doctypes, створюючи нові сайти.

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

    Однак, після деякого дослідження, було зрозуміло, що більшість браузерів повертається назад до регулярного HTML коли інтерпретують Strict версію XHTML. І тому, замість цього, багато хто хотіли використовувати HTML 4.01 strict. Суть полягає в тому, що будь-який з них буде контролювати вашу сторінку. Зробіть якийсь дослідження і вирішите.

    3.Ніколи не використовуйте діючі стилі.

    Коли Ви довго працюєте над своїм проектом, може бути заманливо слідувати легким маршрутом в моделюванні.

    I’m going to make this text red so that it really stands out and makes people take notice!

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

    Хорошим тоном верстки є те, що додавати стилі потрібно тільки після того, як сторінка повністю закодована. Звичайно, для новачків це досить складно, може навіть і не потрібно, так як із-за поганого вибору розмітки сторінки, потім, буває, дуже складно відстежити помилку. На першому етапі можна верстати сторінку по частинах. Але підхід повинен бути саме таким.

    Замість

    I’m going to make this text red so that it really stands out and makes people take notice!

    Повинно бути:

    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 в межах тега .

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

    Однак, специфікація HTML рекомендує, щоб вони були розміщені в межах тега . Первинна вигода — то, що Ваші сторінки завантажуються швидше.

    My Favorites Kinds of Corn

    5.Розгляньте питання про розміщення Javascript файлів у кінці сторінки.

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

    Пам’ятайте — первинна мета полягає в тому, щоб зробити завантаження сторінки як можна швидше для користувача.

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

    Якщо у Вас є файли JS, мета якого полягає в тому, щоб додати функціональні можливості, то їх краще розташувати перед заключним тегом .

    Це — абсолютно кращі методи.

    And now you know my favorite kinds of corn.

    6.Ніколи не використовуйте діючі javascript. Це не 1996!

    Кілька років тому всі команди JS розташовувалися безпосередньо в межах тегів. Це було дуже поширене з простими галереями зображень.

    По суті, «onclick» був прикладений до тегу. Це була звичайна процедура JS. Само собою зрозуміло, Ви ніколи не повинні цього робити. Замість цього, винесіть всі використовувані процедури у зовнішній файл JS і використовуйте «addEventListener./attachEvent». Або, використовуючи структуру як jQuery, тільки використовуйте метод «click».

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

    7.Безперервна валідація.

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

    Я недавно писав про те, як ідея валідації була абсолютно невірно витлумачена тими, хто повністю не розуміє його мета. Оскільки я згадую в статті, «валідація повинна працювати на Вас, а не проти Вас».

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

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

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

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

    Ось посилання: https://addons.mozilla.org/en-US/firefox/addon/1843

    9.Використовуйте Firebug.

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

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

    Джерела:

    — Overview of Firebug

    — Debug Javascript With Firebug — video tutorial

    10.Пишіть теги малими літерами.


    Here’s an interesting fact about corn.


    Будь ласка, не робіть як у вищевказаному прикладі. Це не має ніякого сенсу і ріже мої очі. Більш того, це нагадує мені Microsoft Word!

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

    Here’s an interesting fact about corn.

    11.Використовуйте теги H1-H6.

    Звичайно, будь-який фрагмент тексту можна укласти в теги div або span, з допомогою стилів задати йому будь-який розмір і товщину. Але там де за логікою має бути заголовок, краще укладати його в теги h1-h6. Спробуйте відключити стилі, і Ви переконаєтеся в доцільності цього, плюс до цього, для SEO це буде тільки краще.

    This is a really important corn fact!

    Small, but still significant corn fact goes here.

    12. Якщо Ви ведете свій блог, то укладайте в тег H1 заголовоки статей.

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

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

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

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

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

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

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

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

    Я б радив не використовувати цей варіант по семантичних причин. Ваше завдання полягає в тому, щоб написати найкращий код, до якого Ви здатні.

    Замість цього рекомендую використовувати ненумерованний список.

    Виглядає це приблизно так:

    15. Дізнайтеся, як боротися з IE.

    Ви безсумнівно будете лаятися на IE під час виконання деякого пункту завдання. Коли я читав в блозі, як один з моїх приятелів бореться проти сил IE, я тільки посміхнувся і подумав: «я знаю, що Ви відчуваєте, приятель».

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

    Цей код каже, «Якщо браузер користувача — Internet Explorer 6 або нижче, скопіюйте цей stylesheet. Інакше, нічого не робіть.» Якщо Ви хочете, щоб цей унікальні файл «ie.css» діяв також і на IE7, просто замініть «lt» на «lte» (менше ніж або дорівнює).

    16.Виберіть редактор коду.

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

    Чи працюєте в системі windows або Mac, існує безліч фантастичних кодових редакторів , які будуть самим чудесним чином працювати на Вас. Особисто у мене є Mac і PC і протягом дня я працюю на обох системах. В результаті я отримав багато знань в різних кодових редакторів.

    Для любителів МАС:

    -Coda

    -Espresso

    -TextMate

    -Aptana

    -DreamWeaver CS4

    Для любителів PC:

    -InType

    -E-Text Editor

    -Notepad++

    -Aptana

    -Dreamweaver CS4

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

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

    Зменшіть ваші css і javascript файли. Ви можете зменшити розмір кожного файлу до 25%. Будь ласка, не будьте ласкаві зробити це під час розвитку вашого проекту. Однак, як тільки сайт з більшого готовий, використовуйте програми on-line стиснення.

    Javascript сервіси:

    — Javascript Compressor

    — JS Compressor

    Css сервіси:

    — CSS Optimiser

    — CSS Compressor

    — Clean CSS

    18. Скорочуємо, Скорочуємо, Скорочуємо!

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

    Озираючись назад, на мій перший сайт, у мене, мабуть, був серйозний випадок divitis. Ваш природний інстинкт підказує, що потрібно обернути кожен пункт у div, потім обернути його ще в один div, що є гарним заходом. Це дуже неефективно.

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

    Має сенс кожен UL упаковувати у власний Div? Я думаю, немає.

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

    19.Всі картинки повинні мати атрибут «Alt».

    Дуже легко проігнорувати цю рекомендацію, однак це дуже важливо для валідації.

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

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

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

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

    20.Не лягаєте пізно спати.

    Я дуже сумніваюся, що я єдиний, хто в якийсь момент при навчанні, подивився і зрозумів, що цілу ніч провів у темній кімнаті, а коли, нарешті, щось вийшло, настав ранок. Якщо ви знайшли себе в аналогічній ситуації, будьте впевнені, що ви на правильному шляху.

    Дивовижні «ЕВРИКА» моменти, принаймні для мене, завжди відбуваються пізно вночі.

    21.Переглядайте інші ресурси.

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

    Чи є кращий спосіб вивчати html, копіювання Ваших героїв? На початку шляху ми всі копіювальні пристрої! Пізніше ми починаємо розвивати власний стилі і методи верстки. Тому відвідайте вебсайти тих, кого поважаєте. Подивіться, як вони кодували ту чи іншу секцію. Вчіться і копіюйте у них. Все робили це, і Ви повинні надходити також. (Не крадіть проект, просто вчіться стилю верстки).

    Зауважте, скільки javascript ефектів Ви хотіли б вивчити? Ймовірно, вони використовують плагіни, для досягнення потрібного ефекту. Вивчіть ресурс і шукайте тег , щоб дізнатися ім’я javascript. Потім використовуйте Google для пошуку!

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

    Це дуже гарна практика, особливо при розробці для клієнтів.

    Просто тому, що ви не використовуєте цитати, аж ніяк не означає, що клієнт не буде їх використовувати. Ніколи не використовуєте нумеровані списки? Це не означає, що клієнт не буде їх використовувати! Створіть у себе на сервісі спеціальну сторінку, щоб показати, що ви вмієте робити стилістичну правку кожного елемента: ul, ol, p, h1-h6, blockquotes і т. д.

    23.Використовуйте Twitter.

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

    Twitter — це сервіс мікроблогінгу з можливістю комунікації між учасниками, якась помісь блогу з ICQ. Він дозволяє користувачеві відправляти короткі повідомлення у свою стрічку новин, на яку інші люди можуть підписатися (якщо використовувати термінологію Твіттера, ви можете почати стежити («follow») за цією людиною). Технологія зрозуміла — як тільки хтось з тих, за ким ви стежите, публікує нове повідомлення, воно з’являється в вашій стрічці або клієнт роботи з Twitter.

    24.Вивчайте Photoshop.

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

    Photoshop може стати дуже важливим інструментом для Вас. Як тільки Ви вивчили html і Сѕѕ, приступайте до вивчення програми Photoshop.

    25.Вивчайте кожен html тег.

    Існує безліч html тегів, якими Ви не будете користуватися в повсякденній роботі, але це не означає, що Ви не повинні їх вивчати. Дійсно, чи знайомі Ви з тегом ? Або з тегом ? Вивчайте їх всі.

    До речі кажучи, якщо Ви не знайомі з згаданими двома тегами, то пару слів про них:

    — тег використовується для абревіатур. Вимагає закриваючий тег.

    Атрибути:

    Title – підказка.

    Приклад:

    США — Сполучені Штати Америки.

    — тег використовується для цитат. Вимагає закриваючий тег.

    Атрибути:

    Title – підказка.

    Приклад:

    тут розташовується цитата, звичайно курсивом.

    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, назва, 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.Вибудовуйте в лінію.

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

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

    29.Наріжте PSD.

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

    Добре, припустимо Ви отримали хороші знання з html, css і photoshop. Наступним кроком буде перетворення PSD файлу на Ваш робочий сайт. Не хвилюйтеся, це не так складно, як Ви можете подумати. Якщо ж Вам потрібна допомога, то пошукайте відео програми про те, як це зробити.

    30.Не використовуйте Framework.

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

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

    На цьому, випуск присвячений правильної верстці сайтів, завершено.

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