В сучасному світі Інтернету вміння верстати сайти є необхідною навичкою для веб-розробників. HTML (HyperText Markup Language) та CSS (Cascading Style Sheets) – це дві основні технології, які використовуються для створення та стилізації веб-сторінок. У цій статті ми розглянемо основні принципи верстки сайтів за допомогою HTML та CSS.
Що таке HTML?
HTML (HyperText Markup Language) – це мова розмітки, яка використовується для створення структури веб-сторінок. HTML складається з різних елементів, які використовуються для визначення заголовків, параграфів, зображень, посилань тощо. Ось приклад простого HTML-документа:
<!DOCTYPE html>n<html>n <head>n <title>Заголовок сторінки</title>n </head>n <body>n <h1>Привіт, світе!</h1>n <p>Це мій перший веб-сайт.</p>n </body>n</html>Основні елементи HTML включають:
- <html> – кореневий елемент документа HTML.
- <head> – містить метадані про документ.
- <title> – заголовок документа, який відображається в заголовку вкладки браузера.
- <body> – основний вміст документа.
- <h1> – <h6> – заголовки різних рівнів.
- <p> – параграфи тексту.
- <a> – посилання на інші веб-сторінки.
- <img> – зображення.
Що таке CSS?
CSS (Cascading Style Sheets) – це мова стилів, яка використовується для опису зовнішнього вигляду HTML-документів. CSS дозволяє змінювати кольори, шрифти, розміри, розташування елементів та інші візуальні аспекти веб-сторінки. Приклад CSS-правила:
body {n background-color: #f0f0f0;n font-family: Arial, sans-serif;n}h1 {n color: #333333;n}p {n color: #666666;n line-height: 1.6;n}Основні концепції CSS включають:
- Селектори – визначають, до яких елементів застосовуються стилі. Наприклад, селектор
bodyзастосовує стилі до всього тіла документа. - Властивості – визначають, який аспект елементу буде змінено. Наприклад,
color,font-size,margin. - Значення – конкретні значення властивостей. Наприклад,
#333333для кольору,16pxдля розміру шрифту.
Як працюють HTML та CSS разом?
HTML та CSS працюють разом для створення структурованих та стильних веб-сторінок. HTML надає структуру, а CSS забезпечує стилізацію. Приклад взаємодії HTML та CSS:
<!DOCTYPE html>n<html>n <head>n <title>Приклад HTML та CSS</title>n <style>n body {n background-color: #e0f7fa;n font-family: Helvetica Neue, sans-serif;n }n h1 {n color: #00796b;n }n p {n color: #004d40;n line-height: 1.8;n }n </style>n </head>n <body>n <h1>Привіт, світе!</h1>n <p>Це мій перший веб-сайт з використанням HTML та CSS.</p>n </body>n</html>У наведеному прикладі CSS-стилі вбудовані у HTML-документ за допомогою тегу <style>, що міститься у секції <head>.
Зовнішні стилі
Хоча вбудовані стилі можуть бути корисними для невеликих проєктів, найчастіше стилі зберігаються в окремому CSS-файлі. Це дозволяє легше керувати стилями та підтримувати їх. Приклад підключення зовнішнього CSS-файлу:
<!DOCTYPE html>n<html>n <head>n <title>Приклад із зовнішнім CSS</title>n <link rel=stylesheet href=styles.css>n </head>n <body>n <h1>Привіт, світе!</h1>n <p>Це мій перший веб-сайт з використанням зовнішнього CSS.</p>n </body>n</html>Файл styles.css може містити наступні стилі:
body {n background-color: #ffeb3b;n font-family: Verdana, sans-serif;n}h1 {n color: #f44336;n}p {n color: #9e9e9e;n line-height: 1.8;n}Адаптивний дизайн
Однією з важливих особливостей сучасної верстки є адаптивний дизайн. Адаптивний дизайн дозволяє веб-сторінкам виглядати добре на різних пристроях та екранах різних розмірів. CSS медіа-запити є ключовим інструментом для створення адаптивного дизайну. Приклад медіа-запиту:
@media (max-width: 600px) {n body {n background-color: #ff5722;n }n h1 {n font-size: 24px;n }n p {n font-size: 16px;n }n}У цьому прикладі стилі, що визначені всередині медіа-запиту, застосовуються, коли ширина екрану менша або дорівнює 600 пікселям.
Загальні поради для верстки
- Використовуйте семантичні теги – це покращує читабельність коду та SEO-оптимізацію. Наприклад,
<header>,<footer>,<article>. - Дотримуйтесь принципу KISS (Keep It Simple, Stupid) – пишіть простий і зрозумілий код.
- Використовуйте зовнішні CSS-файли – це спрощує підтримку стилів.
- Тестуйте на різних пристроях та браузерах – це забезпечить кращий користувацький досвід.
- Документуйте свій код – коментарі допомагають зрозуміти структуру та логіку коду.
Знання основ HTML та CSS є першим кроком до створення професійних веб-сайтів. Важливо продовжувати навчання, експериментувати з новими технологіями та підходами, а також слідкувати за сучасними трендами у веб-дизайні та розробці.