Створення першого сайту

Опубліковано: 27 Вересня, 2024

Створення першого сайту — це захоплива пригода, яка допомагає дітям розвивати навички програмування, креативність та самовираження. Навіть якщо тобі лише 8 або 12 років, ти можеш створити свій власний сайт з мінімальними знаннями HTML та CSS. У цій статті ми покажемо, як зробити перші кроки у веброзробці та побудувати простий сайт.

Що таке HTML та CSS?

Перед тим як розпочати, розберімо, що означають ці дивні абревіатури:

HTML (HyperText Markup Language) – це мова розмітки, яка допомагає створювати структуру вебсторінок. Завдяки HTML ми визначаємо, що на сторінці має бути: заголовки, тексти, зображення, посилання тощо.
CSS (Cascading Style Sheets) – це мова стилів, яка допомагає зробити сторінки гарними та зручними для користувачів. З допомогою CSS ми задаємо кольори, шрифти, відступи та інші стилі для елементів HTML.

1. Планування сайту

Перший крок до створення будь-якого сайту — це вирішити, яким він має бути. Уяви, що ти дизайнер свого сайту. Ось кілька запитань, які допоможуть тобі спланувати:
– Про що буде твій сайт? (Хобі, улюблені ігри, домашні тварини?)
– Які сторінки тобі знадобляться? (Головна сторінка, сторінка про тебе, галерея з фотографіями?)
– Які зображення чи тексти ти хотів би додати?

2. Створення HTML файлу

Наступним кроком буде створення першої вебсторінки. Для цього тобі знадобиться простий текстовий редактор, такий як Notepad (Windows) або TextEdit (Mac). Ось як виглядатиме код для найпростішого сайту:
<!DOCTYPE html>
<html lang=”uk”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Мій перший сайт</title>
</head>
<body>
<h1>Привіт! Це мій перший сайт</h1>
<p>Мене звати [Твоє ім’я], і це сторінка про мої улюблені речі.</p>
</body>
</html>

Тег <h1> — це великий заголовок.
Тег <p> — це параграф, де ти можеш писати текст.

Збережи цей файл з назвою index.html і відкрий його у браузері. Ти побачиш свою першу сторінку!

3. Додавання стилів за допомогою CSS

Тепер зробімо сайт красивішим. Для цього додамо стилі з допомогою CSS. У тій самій папці, де лежить твій HTML файл, створимо новий файл і назви його styles.css. Додай туди такий код:

body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
}

h1 {
color: #0073e6;
}

p {
font-size: 18px;
}

Щоб ці стилі працювали, потрібно додати їх у наш HTML файл. Встав у розділ <head> такий рядок:

<link rel=”stylesheet” href=”styles.css”>

Тепер, коли ти оновиш свою сторінку, фон стане світло-блакитним, заголовок — синім, а текст — більш читабельним.

4. Додавання зображень та посилань

Тепер час додати до сторінки щось цікавіше! Наприклад, зображення. Щоб вставити зображення, скористайся тегом <img>:

<img src=”myphoto.jpg” alt=”Це я!” width=”300″>

Не забудь замінити myphoto.jpg на назву твого файлу з фотографією, а також вказати відповідний розмір у полі width.

Якщо ти хочеш зробити посилання на іншу сторінку або сайт, скористайся тегом <a>:

<a href=”https://go-mother.com”>Відвідай GoMother</a>

5. Публікація сайту

Коли твій сайт готовий, ти можеш поділитися ним зі своїми друзями та родиною. Для цього можна скористатися безплатними платформами для хостингу, такими як GitHub Pages або Netlify. Це дозволить зробити твій сайт доступним для всіх в Інтернеті! Детальну інструкцію як перенести сайт на хостинг читайте у настпуній статті.