Сучасний веб-дизайн може бути складним, але за допомогою HTML та CSS ви можете створити стильний і функціональний сайт навіть без глибоких знань програмування. У цій статті ми розглянемо основи створення веб-сторінок і надамо покрокове керівництво для новачків.
Що таке HTML та CSS?
HTML (HyperText Markup Language) — це стандартна мова розмітки для створення веб-сторінок. Вона використовується для структурування контенту на веб-сторінці, створення заголовків, абзаців, посилань, зображень та інших елементів.
CSS (Cascading Style Sheets) — це мова стилізації, яка використовується для визначення вигляду HTML-елементів. CSS дозволяє налаштовувати кольори, шрифти, відступи, розміри і розташування елементів на сторінці.
Перші кроки: створення HTML-структури
Для початку вам потрібно створити базову HTML-структуру. Відкрийте будь-який текстовий редактор (наприклад, Notepad++) та створіть новий файл з розширенням .html. Додайте до нього наступний код:
<!DOCTYPE html>n<html lang=uk>n<head>n <meta charset=UTF-8>n <meta name=viewport content=width=device-width, initial-scale=1.0>n <title>Мій стильний сайт</title>n</head>n<body>n <h1>Ласкаво просимо на мій сайт</h1>n <p>Це мій перший веб-сайт, створений за допомогою HTML та CSS.</p>n</body>n</html>n Цей код створює базову структуру HTML-документа з заголовком та абзацом тексту.
Додавання стилів за допомогою CSS
Тепер, коли у нас є основна HTML-структура, ми можемо додати стилі за допомогою CSS. Додайте наступний код між тегами <head> вашого HTML-документа:
<style>n body {n font-family: Arial, sans-serif;n background-color: #f0f0f0;n color: #333;n margin: 0;n padding: 0;n }n h1 {n background-color: #4CAF50;n color: white;n padding: 20px;n text-align: center;n }n p {n padding: 20px;n }n</style>n Цей CSS-код задає стиль для тіла сторінки (body), заголовка (h1) та абзацу (p). Ми визначили шрифт, кольори, відступи і вирівнювання елементів.
Додавання більше елементів
Давайте додамо більше елементів на нашу сторінку, щоб зробити її більш цікавою. Ми додамо зображення, посилання та список:
<body>n <h1>Ласкаво просимо на мій сайт</h1>n <p>Це мій перший веб-сайт, створений за допомогою HTML та CSS.</p>n <img src=example.jpg alt=Приклад зображення style=width:100%;>n <ul>n <li>Перший пункт</li>n <li>Другий пункт</li>n <li>Третій пункт</li>n </ul>n <a href=https://example.com>Відвідайте мій улюблений сайт</a>n</body>n Ми додали зображення з шириною 100%, список з трьох пунктів і посилання. Тепер наша сторінка виглядає більш насиченою.
Оптимізація для мобільних пристроїв
Однією з важливих частин створення сучасного сайту є його оптимізація для мобільних пристроїв. Ми можемо використовувати медіа-запити в CSS для цього:
<style>n @media (max-width: 600px) {n body {n background-color: #fff;n }n h1 {n font-size: 24px;n }n p {n font-size: 18px;n }n }n</style>n Цей код змінює фон сторінки на білий і зменшує розмір шрифту для заголовка та абзаців на екранах шириною менше 600 пікселів.
Заключення
Створення стильного сайту за допомогою HTML та CSS є досить простим процесом, якщо слідувати покроковим інструкціям. Використовуючи ці основи, ви можете розвивати свої навички та створювати більш складні і професійні веб-сайти.
Не бійтесь експериментувати з різними стилями та елементами. Практика робить досконалість, і з часом ви зможете створювати дивовижні веб-сайти, які будуть привертати увагу відвідувачів.