Создание первой HTML-страницы
Напишите свой первый код HTML с помощью простого текстового редактора.
«Создание первой HTML-страницы» — бесплатный урок HTML for Kids на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Настройка первой HTML-страницы
Добро пожаловать в самую увлекательную часть изучения HTML! Сегодня мы с нуля создадим Вашу первую HTML-страницу. Приготовьтесь увидеть, как Ваш код оживает!
Необходимые инструменты
Для создания HTML-страницы нужны всего две вещи:
- Текстовый редактор: например, Блокнот в Windows, TextEdit на Mac или любой другой редактор, например VS Code.
- Веб-браузер: Chrome, Firefox или любой другой браузер для просмотра страницы.
Начнём писать код!
Откройте текстовый редактор
Шаг 1. Откройте текстовый редактор
1. Откройте текстовый редактор, например Блокнот или VS Code.
2. Сохраните новый файл как index.html. Не забудьте добавить расширение .html!
Теперь мы готовы добавить код HTML!
Напишите базовую структуру
Шаг 2. Напишите базовую структуру
Каждой HTML-странице нужна базовая структура. Введите следующий код в свой файл:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>Добавьте заголовок
Шаг 3. Добавьте заголовок
Внутри тега <body> добавьте заголовок на страницу:
<h1>Welcome to My First Web Page!</h1>
Добавьте абзац
Шаг 4. Добавьте абзац
Под заголовком добавьте абзац с описанием страницы:
<p>This is my first web page, and I’m learning HTML. It’s so much fun!</p>
Сохраните и откройте страницу
Шаг 5. Сохраните и откройте страницу
1. Сохраните файл после написания кода.
2. Откройте браузер.
3. Перетащите файл index.html в окно браузера.
Готово! Ваша первая веб-страница опубликована!
Ваша готовая HTML-страница
Вот как должен выглядеть Ваш итоговый код:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is my first web page, and I’m learning HTML. It’s so much fun!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Отличная работа
Поздравляем с созданием первой HTML-страницы! Вы научились задавать базовую структуру, добавлять заголовок и писать абзац. В следующем уроке мы узнаем, как добавлять на страницу более интересные элементы, например изображения и ссылки. Продолжайте в том же духе!
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Создание первой HTML-страницы» бесплатный?
Да — полный текст урока «Создание первой HTML-страницы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Создание первой HTML-страницы»?
Напишите свой первый код HTML с помощью простого текстового редактора. Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Создание первой HTML-страницы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое HTML?
- Структура HTML: строительные блоки
- Теги и элементы HTML
- Создание первой HTML-страницы