cursovaya

HTML Learner - Изучаем HTML легко

Изучаем HTML с нуля

Практические уроки с интерактивными примерами для быстрого освоения HTML

Уроки HTML

Урок 1: Основы HTML

Новичок

Что такое HTML?

HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц. Он определяет структуру и содержание веб-страницы.

Пример базовой HTML-страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая HTML-страница.</p>
</body>
</html>

Попробуйте сами:

Измените текст внутри тега <h1> и нажмите "Запустить":

<!DOCTYPE html>
<html>
<head>
    <title>Моя страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-код.</p>
</body>
</html>

Урок 2: Работа с текстом

Новичок

Основные теги для текста

HTML предоставляет различные теги для форматирования текста:

<p>Это обычный абзац.</p>
<strong>Это жирный текст.</strong>
<em>Это курсив.</em>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<!-- Это комментарий -->

Попробуйте добавить свои текстовые элементы:

<!DOCTYPE html>
<html>
<body>
    <h1>Мой дневник</h1>
    <p>Сегодня я изучаю HTML.</p>
    <p>Это очень интересно!</p>
</body>
</html>

Урок 3: Ссылки и изображения

Новичок

Добавление ссылок и изображений

Тег <a> создает гиперссылки, а <img> добавляет изображения на страницу.

<!-- Ссылка -->
<a href="https://www.example.com">Посетите Example.com</a>

<!-- Изображение -->
<img src="image.jpg" alt="Описание изображения">

<!-- Ссылка с изображением -->
<a href="https://www.example.com">
    <img src="logo.png" alt="Логотип">
</a>

Попробуйте создать свою ссылку:

<!DOCTYPE html>
<html>
<body>
    <h1>Мои любимые сайты</h1>
    <p>Вот сайт, который я часто посещаю:</p>
    <a href="https://www.google.com">Перейти на Google</a>
</body>
</html>

Практическое задание

Создайте свою страницу

Практика

Объедините полученные знания

Создайте HTML-страницу, которая включает:

Заголовок (h1)
Несколько абзацев текста (p)
Жирный и курсивный текст (strong, em)
Ссылку на внешний сайт (a)
Изображение (img)

Редактор кода:

<!DOCTYPE html>
<html>
<head>
    <title>Моя страница</title>
</head>
<body>
    <!-- Ваш код здесь -->
</body>
</html>