Технологія створення html сайту

16

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

Технологія створення html сайту

Рис. 1. Такі кроки можна виділити в створенні сайту.

Як створюється сайт

Відразу ж скажу, що сайт можна створити по-різному (з допомогою движків, конструкторів), але я не дарма вже двічі згадав у тексті слово «html». Так-так, саме з нього все починається. HTML – це мова, за допомогою якого вже більше двадцяти років створюються веб-сайти. Це самий головний будівельний матеріал для нашого ресурсу.

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

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

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

Робота з html і css

Я вже трохи описав, як виглядає технологія створення html сайту. Далі вся робота відбувається в цих декількох файлах (в html-файлах і загальній таблиці стилів). Спочатку прописується службова інформація, начебто кодування, метатегів, заголовка і т. д.

Після цього формується тіло сторінки. Що міститься в цьому теге інформація і буде виведена на екран. Спочатку верстальник створює основні блоки. Їх кількість залежить від макета. Стандартний набір: шапка, основна частина з двох-трьох колонок і самий нижній блок. У процесі роботи вертальщик може використовувати будь-який із способів верстки, але найчастіше від нього потрібно створити всі на сучасних технологіях, адаптувавши ще й під старі браузери.

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

Фрейми – зовсім вже старий і невдалий експеримент. Таблиці – все ще можливий шлях створення, але частіше за все з їх допомогою виводять саме табличні дані, а не сайт повністю. Блокова верстка (div + HTML 5 елементи) є самою основною сьогодні.

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

Доопрацювання сайту

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

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

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

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

Звичайно ж, сьогодні мало хто використовує статичні сайти на html, тому що додавати інформацію на такий ресурс дуже незручно. Тому після того, як верстка шаблону повністю завершена, робота аж ніяк не закінчується. Наступний етап багато в чому складніше. Це посадка, інтеграція, натяжка (називайте як хочете) шаблону на одну з популярних CMS. Найчастіше на WordPress або Joomla, так як це найпопулярніші движки.

Технологія створення html сайту

Рис. 2. Це wordpress і на ньому сьогодні робиться переважна більшість сайтів.

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

Підсумок

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

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