Пишем вместе: создаём простую веб-страницу
Следуйте пошаговым инструкциям и создайте увлекательную страницу
«Пишем вместе: создаём простую веб-страницу» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 2. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 2 уроков всего.
Создание первой веб-страницы
Пишем вместе: создаём простую веб-страницу
Добро пожаловать в Ваш первый проект по программированию! На этом уроке мы шаг за шагом создадим простую веб-страницу. Следуйте инструкциям и увидите, как элементы HTML, CSS и основы дизайна объединяются в единое целое.
Цель: Создать страницу личного профиля.
Настройка файла
Шаг 1: настройка файла
Сначала создадим папку для проекта и добавим HTML-файл:
- Создайте на компьютере новую папку с названием MyWebPage.
- Внутри папки создайте файл с именем
index.html. - Откройте файл в редакторе кода (например, в Visual Studio Code).
Совет: Имя файла index.html обычно используется для главной страницы веб-сайта.
Добавление базовой структуры
Шаг 2: добавление базовой структуры
Теперь добавьте в файл базовую структуру HTML. Она включает теги <!DOCTYPE html>, <html>, <head> и <body>.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Добавление раздела профиля
Шаг 3: добавление раздела профиля
Добавим раздел, в котором будут отображаться Ваше имя и краткое описание.
Пример:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Добавление изображения
Шаг 4: добавление изображения
Теперь добавим фотографию профиля с помощью тега <img>. Сохраните изображение в папке проекта и свяжите его с HTML-файлом.
Пример:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Добавление списка увлечений
Шаг 5: добавление списка увлечений
Создайте маркированный список своих увлечений с помощью тегов <ul> и <li>.
Пример:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Добавление ссылки
Шаг 6: добавление ссылки
Добавьте ссылку на свой любимый веб-сайт с помощью тега <a>.
Пример:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Добавление встроенных стилей
Шаг 7: добавление встроенных стилей
Добавим базовые стили непосредственно в HTML с помощью атрибута style.
Пример:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Повторение темы проекта веб-страницы
Отличная работа!
Поздравляем! Вы шаг за шагом создали свою первую веб-страницу. В этом проекте Вы научились структурировать HTML, добавлять содержимое и задавать ему стиль с помощью встроенных стилей. Продолжайте экспериментировать и добавлять на страницу новые разделы!
Совет: Попробуйте разместить страницу на GitHub Pages, чтобы поделиться ею с друзьями!
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Пишем вместе: создаём простую веб-страницу» бесплатный?
Да — полный текст урока «Пишем вместе: создаём простую веб-страницу» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 2 уроков всего.
Чему я научусь в уроке «Пишем вместе: создаём простую веб-страницу»?
Следуйте пошаговым инструкциям и создайте увлекательную страницу Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 2.
Сколько времени занимает урок «Пишем вместе: создаём простую веб-страницу»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Пишем вместе: создаём простую веб-страницу
- Поиск сокровищ в HTML