16. Мини-сайт о себе

Ты уже умеешь создавать страницы, добавлять картинки, стили и даже кнопки. Теперь настало время собрать из этого настоящий сайт!

Сайт — это как твоя цифровая комната, где ты можешь рассказать о себе, показать любимые вещи и даже пригласить друзей в гости (онлайн)!

Что будет в нашем сайте

Ты создашь три страницы, которые будут связаны между собой:

Главная — расскажи, кто ты и чем увлекаешься.
Галерея — покажи, что тебе нравится: фото, рисунки, игры, питомцы.
Контакты — где тебя можно найти (по желанию).

Шаг 1. Создаём структуру

Создай папку проекта, например:


my-site/
 ├── index.html
 ├── gallery.html
 ├── contacts.html
 ├── style.css
 └── images/

В папку images положи свои картинки (кошку, персонажей, хобби и т.д.).

Шаг 2. Главная страница

Открой файл index.html и вставь:


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Обо мне</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Привет! Я Алекс </h1>
    <nav>
      <a href="index.html">Главная</a>
      <a href="gallery.html">Галерея</a>
      <a href="contacts.html">Контакты</a>
    </nav>
  </header><section class="hero">
    <h2>Добро пожаловать на мой сайт!</h2>
    <p>Я учусь делать сайты и программировать. Люблю котов и видеоигры.</p>
  </section>
</body>
</html>

Шаг 3. Галерея

Создай файл gallery.html:


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя галерея</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Моя галерея</h1>
    <nav>
      <a href="index.html">Главная</a>
      <a href="gallery.html">Галерея</a>
      <a href="contacts.html">Контакты</a>
    </nav>
  </header><section>
    <h2>Любимые картинки</h2>
    <img src="images/cat.jpg" alt="Мой котик">
    <img src="images/game.jpg" alt="Любимая игра">
  </section>
</body>
</html>

Шаг 4. Контакты

Теперь сделай файл contacts.html:


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Контакты</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Связаться со мной</h1>
    <nav>
      <a href="index.html">Главная</a>
      <a href="gallery.html">Галерея</a>
      <a href="contacts.html">Контакты</a>
    </nav>
  </header><section>
    <h2>Пиши мне!</h2>
    <p>Мой e-mail: <b>example@mail.com</b></p>
    <p>Или напиши мне на <a href="https://t.me/username">Telegram</a>.</p>
  </section>
</body>
</html>

Шаг 5. Добавляем стиль

Создай файл style.css и оформи всё красиво:


body {
  font-family: 'Comic Sans MS', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  margin: 0;
}header {
  background: linear-gradient(45deg, #4CAF50, #81C784);
  color: white;
  padding: 20px;
  text-align: center;
}
nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  text-decoration: underline;
}
section {
  padding: 30px;
  text-align: center;
}img {
  width: 200px;
  border-radius: 12px;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

Теперь у тебя три красивые страницы, связанные между собой. Это уже твой личный сайт!

Шаг 6. Добавляем немного JavaScript

Хочешь, чтобы сайт приветствовал гостей? Добавь перед закрывающим тегом </body>:


<script>
  alert('Привет! Добро пожаловать на сайт ' + document.title + '!');
</script>

Теперь при заходе на любую страницу сайт здоровается с посетителем

Советы по безопасности

Никогда не публикуй настоящие фамилию, адрес или телефон.
Если используешь фото — выбирай безопасные и без личных данных.
Будь доброжелателен и уважай других в интернете!

Твоё задание

Создай свой мини-сайт из трёх страниц.
Добавь шапку, меню, фон и картинки.
Придумай собственный дизайн — в стиле игры, космоса или мультфильма!

Проверь себя

Как связать страницы между собой?
Как добавить общий стиль для всего сайта?
Что нужно, чтобы сделать меню одинаковым на каждой странице?

Забавный факт

Первый личный сайт был создан в 1991 году физиком Тимом Бернерсом-Ли. Он рассказывал, как работает интернет — и был всего из одной страницы!

Главное запомни

Сайт — это набор связанных страниц.
HTML создаёт структуру, CSS украшает, а JS оживляет.
Даже из трёх простых страниц можно сделать настоящий проект!