Головна HTML Як правильно верстати на HTML
Як правильно верстати на HTML

Будь-яка робота, а тим більше верстка, повинна бути виконана акуратно, тому що переробляти верстку надалі буде важче, тим більше, якщо створюється вона для популярного і корпаративного сайту. Що значить правильно верстати на html і css? І що необхідно робити, щоб стати професійним верстальщиком?

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

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

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

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

Щоб ваш код сторінки виглядав гідно, акуратно, вам було легко в ньому орієнтуватися, то уважно вивчіть нижчеприведені пункти і дотримуватися їх при написанні HTML:

* Писати html теги великими прописними літерами є неправильним (TABLE, BODY, IMG) - це перша ознака неручной роботи і в такому коді важко орієнтуватися, так як більшість коду в Інтернеті все-таки написано малими літерами (table, body, img) це є стандартом і весь html код, написаний малими літерами визнається html-валідатори невалідним!

* Атрибути завжди записуйте в лапках (напр., align = "right"), що додасть вашому коду акуратність і сумісність з мовою XML.

* Присвоюючи яке-небудь значення (ширини, висоти) в пікселях, не забувайте це вказати, тобто width = "5px". Наприклад, height = 23 буде помилкою, пріавльно писати height = "23%";

* Є теги, в яких немає закриваючого тегу (img, hr, br). У таких випадках треба закривати одиночний тег слешер, напр. <br />

* Зайві коментарі, якими програми засмічують код, не підуть на користь вашого сайту, а от ваші власні коментарі допоможуть розібратися через деякий час набагато швидше. Тим більше, якщо сайтом стане займатися інша людина;

* Намагайтеся не залишати стилі і JavaScript код в сторінці. Виводьте їх в окремі файли - так простіше що-небудь поміняти і код сторінки зменшиться (іноді дуже помітно);

* У будь-якого символу є своя заміна. У кожному довіднику по HTML є список цих підстановок. Бажано використовувати їх, що б не було проблем з переглядом в деяких браузерах.

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

Як бачите, скупий (або ледачий) платить двічі, а то й тричі! Через таке ставлення, в інтернеті безліч сайтів з чудовим зовнішнім дизайном мають жахливий код, зроблений на швидку руку в WYSIWYG - програмі, осовоєнній не повністю. Не повторюйте помилок таких розробників, верстайте акуратно і красиво, виділяйте структуру коду, і завжди пам'ятайте, що мова HTML - основа сайту.

 
© 2008-2013 PHPist