Перший сайт, створений на HTML, не буде ані найкрасивішим, ані найфункціональнішим. Проте вам потрібно з чогось починати, і такий проєкт — чудова нагода здобути базові навички або спростити виконання вашого IT-завдання.
Створення HTML-проєкту
Створімо проєкт із нуля — я крок за кроком покажу вам, як зробити простий HTML-сайт. Закликаю вас вивчити цей дизайн від початку до кінця, а потім переробити його самостійно. Завдяки практичному навчанню та доопрацюванню або додаванню більшої кількості аналогічно працюючих модулів вам буде набагато легше справді чогось навчитися.
Що ми робитимемо:
- ми створимо вебсайт повністю з нуля, без використання фреймворків або бібліотек HTML і CSS, таких як Bootstrap,
- він матиме досить суворий, але водночас прозорий вигляд. Я не хочу використовувати забагато кольорів і зображень,
- я також покажу деякі основи CSS, завдяки яким ви принаймні трохи вдосконалите візуальний шар вашого сайту,
- я хочу, щоб усе було просто, тому не заглиблюватимемося в складніші теми. Від самого початку ми не працюватимемо лише в межах одного файлу. Так можна було б зробити, але в довгостроковій перспективі це не дуже вдалий вибір, тож варто уникати цього від самого початку.
Крок 1. Створіть папку з файлами
На самому початку було б непогано впорядкувати структуру. Файли в різних каталогах можуть створювати проблеми з пошуком шляхів під час посилання на них. Не хочу ускладнювати вам завдання, тому постарайтеся помістити всі файли, про які тут ітиметься, в одну папку.
Створимо такі файли:
- index.html
- obomne.html
- style.css
Крок 2. Відкрийте index.html за допомогою Блокнота або будь-якого редактора коду
Редактор коду зовсім не обов’язковий для створення сторінок. Насправді це можна зробити навіть у Блокноті Windows — саме так я й починав. Однак правда в тому, що навряд чи хтось із досвідчених кодерів працює саме так — це марнування нервів і часу. Якщо ви серйозно налаштовані навчитися створювати сторінки, пропоную завантажити безплатний редактор коду, наприклад Visual Studio Code.
Крок 3. Створіть простий каркас сторінки в index.html
Файл index.html
Почнімо з визначення типу документа й мови вашого сайту в тезі <html>. Нижче розташована head, або «шапка» вашого сайту, де можна задати кодування символів (для української рекомендую utf-8), під’єднати додаткові таблиці CSS (вони знадобляться, щоб надати вашому вебсайту цікавішого вигляду) або, наприклад, тег title, який дає змогу вказати заголовок на вкладці браузера.
Крок 4. Додайте заголовок, меню, трохи контенту й нижній колонтитул
Файл index.html
Елементи додаються до розділу body вашого документа. Вони працюватимуть і без обмежувальних тегів <div> і </div>, але я помістив їх туди не випадково. Завдяки їм і заданим вами назвам класів (атрибут class) ви зможете звертатися до цих елементів у CSS, де задасте їм певні параметри для покращення візуального вигляду вебсайту.
У div меню ми також використали теги <a>. Завдяки атрибуту href ви можете перенаправити користувача після натискання на будь-яку іншу сторінку, зокрема на підсторінку вашого сайту. За допомогою цих тегів ви дасте користувачеві змогу легко переміщатися вашим сайтом.
Крок 5. Додайте трохи CSS
Файл style.css
До всього тіла документа звертаємося за назвою «body», а до класів — за їхньою індивідуальною назвою, перед якою ставиться крапка. Класам «menu» і «footer» я задав однакові властивості, тому не розділяв їх на дві фігурні дужки, а вказав через кому. Елементам <a> у нашому HTML-файлі я не задавав спеціальних класів чи ідентифікаторів (id), тож звертаюся безпосередньо до самого тегу. Однак пам’ятайте: у такому разі кожне посилання на вашому сайті матиме саме таке оформлення.
Між фігурними дужками задаю окремі параметри, такі як:
- background — відповідає за тло елемента (або всієї сторінки у випадку body). Його можна визначити, наприклад, за допомогою кольорів RBG або HEX,
- margin — відстань від краю. Завдяки йому я зміг легко трохи звузити сторінку, щоб вона не була такою широкою,
- border — рамка елемента; я задав ширину 3 пікселя, суцільну лінію й сірий колір HEX,
- border-radius — заокруглення рамки,
- padding — відступ, який, на відміну від поля, є простором усередині, а не зовні елемента,
- text-align: center — дав змогу вирівняти по центру рядки в заголовку, меню та нижньому колонтитулі,
- color — задає колір тексту,
- font-size — розмір шрифту,
- font-weight — насиченість шрифту.
Рекомендую погратися з цими значеннями: видалити деякі з них, змінити значення або додати щось іще. Це дуже хороший спосіб навчатися на практиці.
Крок 6. Створіть сторінку «Про мене»
Файл: obomne.html
Фактично ми копіюємо попередній файл і змінюємо значення title та заголовок сторінки (h1). Змінився також контент, до якого я додав маркований список (елементи <li>, вкладені в тег <ul>), і логотип websoveti.ru. Крім шляху до файлу, я також додав клас логотипа в атрибут «src». Цей клас має задане значення поля, тож додайте до таблиці CSS такий код:
- клас логотипа файлу: style.css (після під’єднання зображення матиме трохи інший вигляд, як на знімку екрана нижче)
Щоб переглянути HTML-сторінку, просто відкрийте файл index.html у будь-якому браузері. Якщо ви хочете опублікувати її в мережі, потрібно скористатися якимось сервером або хостингом. Для простих HTML-сторінок навчального призначення підійде будь-який безплатний віртуальний хостинг.
У цьому уроці я показав вам, як створити дуже простий вебсайт, заснований лише на базових можливостях HTML і CSS. Якщо ви новачок у цій справі, можете розвинути проєкт і трохи попрактикуватися. Надалі також рекомендую вивчити, наприклад, основи мови PHP, що дасть змогу зберігати код меню в окремому файлі. Завдяки цьому, якщо ви захочете додати новий елемент, вам не доведеться вручну змінювати меню на кожній підсторінці (це трохи незручно, особливо якщо підсторінок у вас більше двох-трьох). Як варіант, можна відразу навчитися створювати шаблони для готових CMS-систем, наприклад WordPress.
