Первая веб-страница и первые команды JavaScript

Мини-лекция · 10 минут

HTML описывает содержимое страницы

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

HTML · справочный экран 1 из 2

Из каких частей состоит HTML-документ

Элементы располагаются один внутри другого. Такой порядок называется вложенностью: весь документ находится внутри <html>, а служебная и видимая части — внутри него.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Название вкладки</title>
  </head>

  <body>
    Видимая часть страницы
  </body>
</html>

HTML · справочный экран 2 из 2

Теги, которые создают содержимое страницы

<h1>Привет!</h1>
  ↑      ↑       ↑
начало  текст   конец

HTML-тренажёр · уровень 1 из 3

Соедините тег и его назначение

Сначала выберите тег слева, затем подходящее объяснение справа. Одинаковые номера обозначают созданную пару.

HTML-тренажёр · уровень 2 из 3

Соберите разметку из готовых тегов

Перетащите карточку в пропуск. Можно также выбрать карточку щелчком, а затем нажать на нужный пропуск. Щелчок по заполненному пропуску освобождает его.

HTML-тренажёр · уровень 3 из 3

Введите теги самостоятельно

Теперь карточек нет. Не забудьте угловые скобки и символ / в закрывающих тегах.

Самостоятельная работа · 20 минут

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

Работайте по порядку. После каждого действия вернитесь к инструкции и отметьте выполненный шаг. Код лучше набрать самостоятельно.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>

</body>
</html>

<h1>Привет! Это моя страница</h1>
<p>Меня зовут ...</p>
<p>Я хочу создать ...</p>

<button>Запустить</button>

Контрольная точка · затем перерыв 10 минут

HTML-страница готова

Мини-лекция · 12 минут

JavaScript заставляет страницу реагировать

<h1 id="title">Привет!</h1>

<button onclick="changePage()">
  Запустить JavaScript
</button>

<script>
  function changePage() {
    document.body.style.backgroundColor = "orange";
    document.getElementById("title").textContent =
      "JavaScript работает!";
  }
</script>

JavaScript · справочный экран 1 из 2

Как кнопка связывается с функцией

JavaScript-код выполняется не сам по себе: браузеру нужно знать, когда запускать нужные команды. В нашем примере момент запуска — щелчок по кнопке.

<button onclick="changePage()">
  Запустить
</button>

<script>
  function changePage() {
    // Здесь будут команды
  }
</script>

JavaScript · справочный экран 2 из 2

Как прочитать команды, даже если они длинные

Длинную строку кода не нужно воспринимать как одно непонятное слово. Она состоит из последовательных частей, каждая из которых уточняет, что найти и что изменить.

document.body.style.backgroundColor = "orange";

document.getElementById("title").textContent =
  "JavaScript работает!";

JavaScript-тренажёр · уровень 1 из 3

Соедините фрагмент кода и его действие

JavaScript-тренажёр · уровень 2 из 3

Вставьте команды в подходящие места

Каждая карточка используется один раз. Ориентируйтесь на то, что должно произойти после нажатия.

JavaScript-тренажёр · уровень 3 из 3

Допишите важные части команд

Введите текст без подсказок-карточек. Регистр букв имеет значение.

Самостоятельная работа · 21 минута

Добавьте JavaScript в свой файл

Продолжайте работу с тем же index.html. После каждого шага сохраняйте файл и при необходимости обновляйте страницу.

<h1 id="title">Привет! Это моя страница</h1>

<button onclick="changePage()">Запустить JavaScript</button>

<script>
  function changePage() {

  }
</script>

document.body.style.backgroundColor = "orange";
document.getElementById("title").textContent =
  "JavaScript работает!";

document.getElementById("message").textContent =
  "Я изменил страницу с помощью JavaScript!";

Финал · 5 минут

От текстового файла до интерактивной страницы