13 Одна правка, яку можна перевірити

Змінимо заголовок і розмір вступу та перевіримо сторінку після редагування. Орієнтовно потрібно 30 хвилин і два робочі файли попереднього уроку. Спочатку збережемо запасну копію, щоб мати змогу повернути початковий вигляд.

Олена вирішила, що одного імені замало. Заголовок «Олена: прості речі щодня» краще пояснює тему її робіт. Вступ залишиться тим самим, але стане трохи більшим.

На занятті

Викладач покаже зміну заголовка й оновлення сторінки після збереження. Разом порівняємо великий заголовок із назвою вкладки та перевіримо, чи CSS змінив лише вступ.

Збережіть початковий стан

1. Закрийте зайві вкладки зі сторінкою, щоб не редагувати один варіант, а дивитися інший. У Провіднику відкрийте Documents\AI-practice.
2. Виділіть папку personal-site, натисніть Ctrl+C, потім Ctrl+V. Перейменуйте отриману копію на personal-site-backup; якщо така папка вже є, назвіть нову personal-site-backup-2. Не замінюйте попередню копію.
3. В основній папці personal-site відкрийте index.html через Відкрити за допомогою → Блокнот. Натисніть Ctrl+F, знайдіть <h1>. Змінюємо текст між початковим і кінцевим тегами, не видаляючи самих тегів.

Фрагмент HTML у Блокноті до зміни:

<h1>Олена</h1>

Той самий фрагмент після зміни:

<h1>Олена: прості речі щодня</h1>

Натисніть Ctrl+S. Перейдіть до браузера й оновіть сторінку кнопкою біля адреси або Ctrl+R. Новий заголовок має з’явитися відразу. Напис на вкладці може залишитися попереднім: його задає окремий елемент <title>, який ми не змінювали.

Попросіть ШІ про вузьку зміну

Тепер збільшимо вступ. У готовому прикладі він має клас intro: це ім’я, за яким CSS знаходить потрібний абзац. Інші абзаци змінювати не будемо.

1. Відкрийте styles.css у Блокноті. Скопіюйте його в нове повідомлення тієї самої розмови та допишіть запит:

Натисніть кнопку надсилання й дочекайтеся відповіді.

1. Знайдіть у відповіді нове правило й порівняйте зі старим. У перевіреному прикладі результат такий; це CSS, який треба зберегти замість наявного правила .intro:

.intro {
  max-width: 620px;
  font-size: 23px;
}

font-size задає розмір літер; px означає пікселі CSS. max-width обмежує ширину абзацу й залишився без змін. Якщо власна генерація має інший початковий розмір, змініть лише його на 23px, зберігши решту правила.

1. Збережіть CSS і оновіть сторінку. Вступ має стати більшим, а тексти проєктів — залишитися попереднього розміру. Звузьте вікно: довший заголовок може зайняти два чи три рядки, але не повинен виходити за край.

Якщо результат не той

Редагуйте наявне правило .intro: кілька правил для того самого абзацу ускладнять пошук властивості, що задає розмір.

Практика вдома

1. Скопіюйте personal-site у нову папку personal-site-heading-home поруч з основною. Якщо назва зайнята, додайте вільний номер.
2. У копії відкрийте index.html у Блокноті. Придумайте власний заголовок до семи слів і змініть лише текст усередині <h1>. Збережіть файл і відкрийте його в браузері.
3. Перевірте вузьке вікно й посилання «Проєкти». У heading-check.txt усередині копії запишіть старий та новий заголовки й результати. Успіх: увесь заголовок видно, меню працює, основний сайт не змінився.

Самотест

1. Що в цій вправі змінює HTML, а що — CSS?
2. Після правки заголовок займає три рядки на вузькому екрані. За яких умов це нормально?
3. Ви змінили h1, але назва вкладки лишилася попередньою. Чи загубилася правка і який елемент задає назву вкладки?

Терміни

• Клас CSS — ім’я групи елементів, до яких застосовують правило оформлення.
• Відкат — повернення до попереднього робочого варіанта.
• Побічний наслідок — зміна поза тією ділянкою, яку ви хотіли виправити.