HTML та CSS верстка сайтів

16

Від автора: HTML і CSS є найпростішими веб-технологіями, з допомогою яких можна створити свій сайт. Давайте в цій статті детальніше розглянемо, які сайти можна зробити з їх допомогою.

Простий шлях до створення шаблону – плюси і мінуси

Чистий HTML верстка сайтів сильно відрізняється від того коду, який ви побачите, наприклад, php-шаблонах який-небудь CMS. Все тому, що сторінки, створені за допомогою html, є статичними. Що це означає? Опишу детальніше.

Приміром, у вас на сайті має бути 50 сторінок (ви так вирішили). 3 будуть відрізнятися по дизайну (наприклад, головна сторінка, сторінка контактів і записів). Решта 47 це просто корисні статті, які ви вирішили опублікувати на своєму ресурсі.

Якщо ви не хочете ставити свій сайт на CMS, то доведеться спочатку обходитися можливостями html. Це означає, що вам буде потрібно 50 html-документів, щоб зберігати всю інформацію сайту. Зручно? Не зовсім. А якщо вам доведеться робити якісь правки в дизайн, то доведеться робити їх на всіх сторінках.

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

HTML та CSS верстка сайтів

Рис. 1. Так би виглядала структура сайту, якщо б він був на чистому HTML. Просто купа сторінок.

Але все ж верстка сайту з нуля в html має і свої, явні плюси. Це неймовірна швидкість завантаження веб-сторінок. Також зверстати шаблон простіше, ніж потім посадити його на CMS.

Незалежно від того, чи будете ви використовувати CMS чи ні, ми приходимо до висновку. Без html і css не можна уявити собі веб-розробку. Це ті основи, з яких необхідно почати. Без їх хоча б поверхневого вивчення немає сенсу вивчати щось інше. Тому що, «інше» набагато складніше цих основ.

Що потрібно вміти для верстки

Верстка сайту виконується з psd в html. PSD – це спеціальний графічний формат, з яким працюють дизайнери. Вони ті, хто починають розробку сайту. Вони малюють його. Як правило, це відбувається в програмі Adobe Photoshop. Верстальникам теж потрібно вміти працювати з цією програмою (або з його безкоштовним аналогом — GIMP), але від них вимагається набагато менше кваліфікації.

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

Такими мовами як раз і є html і css. За допомогою першого задається базова структура сайту, його окремі елементи. Другий етап являє собою роботу з CSS. Верстка сайту неможлива без елементів стилізації, за що і відповідає ця мова.

Це можна порівняти з роботою художника. Спочатку він робить начерк олівцем, а вже потім розмальовує все. PSD-макети можна безкоштовно скачати в інтернеті. Також ви можете спробувати верстати без нього, просто на ходу придумуючи структуру та оформлення. Для тренування і навчання так теж годиться, хоча навряд чи на виході ви отримаєте щось красиве.

Відповідно, можна визначити обов’язкові навички, якими обов’язково повинен володіти верстальник:

Базові вміння роботи з макетом (на рівні склеювання, вирізання шарів)

Відмінні знання html і css, бажано останніх версій (або хоча б уміння подивитися в довіднику, який тег означає).

Здатність застосовувати ці знання на практиці, тобто при написанні коду. Приклад: не просто знати, що div – це блоковий елемент, але і розбиратися в його поведінці при прописуванні різних властивостей.

Володіння основними інструментами для перевірки верстки і доведення її до остаточного вигляду

Вміння працювати в програмі, в якій виконується робота (не в блокноті ж писати, насправді).

Знання JavaScript, щоб реалізувати також поведінка веб-сторінок (це ми поки розглядати не будемо).

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

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

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

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

Готові шаблони в інтернеті

Зрештою, сьогодні можна знайти багато шаблонів, які безкоштовно викладені в мережі. Вбивши в пошуковик щось в дусі «шаблони html» я відразу знайшов як мінімум 3 сайту, на яких були сотні готових робіт. Можна використовувати їх як є, а можна переробити на свій лад. Це повністю готова верстка сайту на html і css.

HTML та CSS верстка сайтів

Рис. 2. Готові шаблони html

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

Підписуйтесь на наш блог – беріть знання з хорошого джерела!