Карта сайта

Урок 2: Настройка рабочего пространства для HTML

/Уроки по HTML/CSS/Урок 2: Настройка рабочего пространства для HTML
Урок 2: Настройка рабочего пространства для HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

Приветствую вас на втором уроке курса по HTML и CSS для начинающих. В прошлом уроке мы разобрались, что такое HTML и зачем он нужен, сегодня перейдем к практике. Подготовим рабочее пространство, установим инструменты и напишем первую HTML-страницу. Это важный этап, ведь удобная среда разработки ускоряет обучение и делает процесс комфортным.

Установка среды разработки (PhpStorm)

Первым делом нам понадобится IDE (Integrated Development Environment это интегрированная среда разработки). Это программа, которая объединяет редактор кода, инструменты отладки и другие полезные функции. Я рекомендую PhpStorm, мощную и бесплатную IDE для веб-разработки. Не пугайтесь названия, хотя она ориентирована на PHP, отлично подходит и для HTML/CSS.

Шаг 1: Скачивание PhpStorm

  1. Перейдите на официальный сайт JetBrains.
  2. Нажмите Download. Выберите версию для своей ОС (Windows, macOS, Linux).
  3. Дождитесь загрузки установочного файла.

Шаг 2: Установка

  • Windows:
    • Запустите файл .exe и следуйте инструкциям.
    • На этапе выбора компонентов оставьте галочки по умолчанию.
  • macOS:
    • Перетащите PhpStorm в папку Applications.
  • Linux:
    • Распакуйте архив и запустите скрипт phpstorm.sh из папки bin.

Шаг 3: Первый запуск и настройка

  1. При первом запуске PhpStorm предложит выбрать тему (Dark/Light) и настроить плагины.
    • Отключите ненужные плагины (например, PHP, если пока не планируете его изучать).
  2. Создайте новый проект:
    • File → New Project → Empty Project.
    • Укажите имя папки (например, MyFirstSite) и путь к ней.

Совет: Настройте шрифт редактора для удобства:

  • File → Settings → Editor → Font. Я использую JetBrains Mono размером 16px.

Настройка браузера для разработчиков

Для тестирования HTML-страниц подойдет любой браузер, но я рекомендую Google Chrome или Microsoft Edge — их инструменты разработчика удобны и функциональны.

Инструменты разработчика

  1. Откройте браузер и нажмите F12 (или Ctrl+Shift+I).
  2. Изучите вкладки:
    • Elements — просмотр и редактирование HTML/CSS в реальном времени.
    • Console — вывод ошибок и выполнение JavaScript.
    • Sources — отладка кода.

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

  • Откройте любой сайт.
  • Нажмите F12, перейдите во вкладку Elements и попробуйте изменить текст на странице (двойной клик по элементу).

Создание первой HTML-страницы

Теперь приступим к написанию кода!

Шаг 1: Создание файла

  1. В PhpStorm кликните правой кнопкой по папке проекта → New → File.
  2. Назовите файл index.html.

Шаг 2: Базовая структура HTML

Введите следующий код:

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

Пояснение:

  • <!DOCTYPE html> — объявление типа документа.
  • <html lang="ru"> — корневой элемент с указанием языка.
  • <head> — секция с метаданными (название, кодировка).
  • <body> — тело страницы (отображается в браузере).

Шаг 3: Сохранение и просмотр

  1. Сохраните файл (Ctrl+S).
  2. Откройте его в браузере:
    • Правой кнопкой по файлу в PhpStorm → Open in → Browser.

Вы увидите заголовок «Привет, мир!» и абзац с текстом.

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

  1. Задача 1:
    • Добавьте новый заголовок <h2> и список <ul> с тремя пунктами.
  2. Задача 2:
    • Измените цвет текста заголовка через инструменты разработчика в браузере.
  3. Задача 3:
    • Создайте файл about.html и свяжите его с index.html через тег <a>.

Пример решения для задачи 1:

<body>
    <h1>Привет, мир!</h1>
    <h2>Мои увлечения:</h2>
    <ul>
        <li>Программирование</li>
        <li>Спорт</li>
        <li>Музыка</li>
    </ul>
</body>

Советы

  • Сохраняйте файлы часто (Ctrl+S).
  • Используйте автодополнение в PhpStorm: например, начните вводить h1, и IDE предложит завершить тег.
  • Экспериментируйте с инструментами разработчика: это поможет быстрее находить ошибки.

Готовы двигаться дальше? Полный курс с уроками по HTML и CSS для начинающих доступен по ссылке — HTML/CSS для начинающих

В следующем уроке мы углубимся в основы HTML-тегов и структуры веб-страницы.