05. Первая страница

Ты готов? Сейчас ты создашь свой настоящий сайт — пусть он пока живёт только на твоём компьютере, но это будет твой первый шаг в мир веб-разработки!

Представь, что ты волшебник, и сейчас создашь портал в интернет — он будет начинаться с одной страницы!

Шаг 1. Устанавливаем редактор кода

Редактор кода — это не обычный блокнот, а тетрадка для программиста. Он помогает писать красиво и без ошибок.

Рекомендуем: Visual Studio Code (VS Code) или Notepad++. Оба бесплатные и безопасные.

  • 1. Перейди на сайт https://code.visualstudio.com
  • 2. Нажми Download и установи версию для своей системы (Windows / Mac / Linux).
  • 3. После установки запусти VS Code.
Совет: выбери тёмную тему оформления (Dark Theme) — глаза скажут спасибо

Шаг 2. Создаём папку проекта

Каждый сайт — это набор файлов. Всё должно быть аккуратно разложено по папкам.

Создай папку, например: my-site. Там будут храниться твои страницы, картинки и стили.

  • my-site
  • └── index.html
  • └── images/ (сюда потом добавим картинки)

Шаг 3. Создаём первый файл

В VS Code нажми File → New File, потом Save As → выбери папку my-site → введи имя index.html.

Теперь вставь этот код:


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой первый сайт</title>
</head>
<body>
  <h1>Привет! Это мой сайт!</h1>
  <p>Я сделал эту страницу сам </p>
</body>
</html>

Разбор кода

Давай посмотрим, что здесь происходит:
  • <b><!DOCTYPE html></b> — сообщает браузеру, что это современный HTML5.
  • <b><html></b> — весь сайт начинается отсюда.
  • <b><head></b> — настройки сайта (название, шрифт, язык и т.д.).
  • <b><body></b> — то, что видит пользователь: заголовки, текст, картинки.

Шаг 4. Открываем сайт

Сохрани файл (Ctrl + S или ⌘ + S). Зайди в папку my-site и дважды кликни на index.html.

Поздравляем! Браузер откроет твою страницу! Ты только что создал свой первый сайт!

Да, да, это и есть настоящее волшебство HTML!

Мини-задание

Теперь попробуй сам изменить текст:
  • Замени «Привет!» на своё имя.
  • Добавь ещё один абзац с любимым хобби.
  • Попробуй поменять заголовок страницы внутри `<title>`.

Пример: 


<title>Сайт Артёма</title>
<h1>Привет, я Артём!</h1>
<p>Я люблю рисовать и программировать </p>

Шаг 5. Проверяем результат

После каждого изменения сохраняй файл и обновляй страницу в браузере (кнопка F5). Ты сразу увидишь, как твой сайт оживает!

Шаг 6. Добавляем немного стиля

Хочешь, чтобы фон стал цветным? Добавь внутри тега `<body>` атрибут style: 

<body style="background-color: lightblue;">
  <h1>Мой сайт!</h1>
  <p>Красивый фон, правда?</p>
</body>
Попробуй разные цвета: `lightgreen`, `yellow`, `pink`, `skyblue` — поиграй!

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

Первый сайт в мире до сих пор работает! Его сделал учёный Тим Бернерс-Ли в 1991 году. Он был очень простой — только текст и ссылки. Но именно с него начался Интернет!

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

  • Файл сайта называется index.html — это «главная страница».
  • Сайт состоит из тегов HTML: <html>, <head>, <body>.
  • Редактор кода (VS Code или Notepad++) помогает писать правильно.
  • Ты можешь открыть сайт прямо с компьютера — браузер всё покажет.

Мини-тест

  • Как называется первая страница сайта?
  • Что делает тег <body>?
  • Как изменить цвет фона страницы?
Следующий урок → Картинки и ссылки