L12. Створюємо й відкриваємо сайт

Створимо сторінку, яку можна відкрити на комп’ютері; орієнтовний час — 40 хвилин. Потрібні brief.txt, Блокнот і браузер. Можна отримати код від ШІ або взяти готові файли з Examples_UA.zip, що додається до книги. Обидва маршрути використовують папку Documents\AI-practice\personal-site.

Для готового прикладу почніть із кроку 4; для власної генерації — з кроку 1.

На занятті

Викладач збереже один HTML-файл і покаже різницю між його відкриттям у Блокноті та браузері. Разом перевіримо назви двох файлів і перехід до розділу «Проєкти».

Створіть два файли

Для редагування відкриваємо файл у Блокноті, який показує текст HTML. Для перегляду використовуємо браузер: він читає розмітку й показує сторінку. Не потрібно встановлювати сервер або вводити команди.

• У розмові з ШІ, де вже є бриф, надішліть наступний запит. Якщо починаєте нову розмову, спершу вставте вміст brief.txt.

> [PROMPT]

> Створи повний односторінковий сайт за погодженим брифом. Дай рівно два повні файли в окремих блоках: index.html і styles.css. Мова сторінки українська, lang="uk", кодування UTF-8. Меню: «Про мене», «Проєкти», «Контакт»; відповідні id: about, projects, contact. Один головний заголовок «Олена», вступ із class="intro", початковим font-size: 21px і max-width: 620px, три проєкти зі статусом у тексті. Контакт mailto:[email protected] явно познач як навчальний. Біле тло, темно-зелений текст, сині підкреслені посилання, помітний фокус клавіатури. На вузькому екрані текст має переноситися. Підключи styles.css відносним шляхом. Без JavaScript, бібліотек, зовнішніх шрифтів і зображень. Сторінка повинна відкриватися подвійним клацанням index.html. Не скорочуй код і не пиши «решта без змін».

• У відповіді знайдіть блок index.html. Скопіюйте лише його код, без потрійних зворотних лапок. У Блокноті виберіть Файл → Зберегти як. Відкрийте Documents\AI-practice\personal-site. У полі назви введіть index.html; для типу файлу виберіть Усі файли, а для кодування — UTF-8. Натисніть Зберегти.
• Створіть новий документ Блокнота. Так само збережіть другий блок як styles.css у тій самій папці. CSS не слід вставляти після HTML в один файл: у нашому проєкті це окремі документи. Тепер перейдіть до кроку 5, пропустивши альтернативний крок 4.
• Альтернативний шлях: у Провіднику клацніть правою кнопкою Examples_UA.zip → Видобути все. Усередині знайдіть personal-site. Скопіюйте index.html і styles.css у свою папку. Якщо замінюєте власний варіант, спершу скопіюйте його в папку personal-site-backup. Якщо вона вже є, використайте нову назву, наприклад personal-site-backup-2.
• Двічі клацніть index.html. Якщо файл відкрився не в браузері, виберіть правою кнопкою Відкрити за допомогою → Microsoft Edge або Chrome. Має з’явитися ім’я Олени, вступ, три проєкти й контактний розділ. Натисніть «Проєкти»: сторінка перейде до цього розділу, а адреса закінчуватиметься на #projects. Натискайте Tab, щоб виділити посилання рамкою, а Enter — щоб відкрити виділене посилання.

[[VIS:b5_site_files]]

Розберіть маленький фрагмент

У Блокноті відкрийте index.html. Знайдіть контактне посилання. Його основа має такий вигляд; це фрагмент HTML, а не команда:

<a href="mailto:[email protected]">
  Написати Олені
</a>

<a> починає посилання, href задає його адресу, а </a> закінчує. Видимим текстом буде «Написати Олені». Частина mailto: просить відкрити поштову програму. Саме натискання нічого не надсилає. Якщо пошта не налаштована, браузер може запропонувати вибрати програму; для перевірки достатньо звірити адресу в коді.

У верхній частині HTML знайдіть href="styles.css". Браузер шукає цей файл поруч із index.html. Це відносний шлях: він зберігає зв’язок файлів і після перенесення папки на інший комп’ютер.

Адреса в браузері починається з file:, бо він читає файл вашого комп’ютера. Інша людина не зможе відкрити ваш сайт за цією локальною адресою. Вебадресу отримаємо після публікації в уроці 14.

> [FIX]

> Замість оформленої сторінки бачите звичайний текст? У Провіднику увімкніть Вигляд → Показати → Розширення імен файлів. Перевірте, чи не названо файл index.html.txt. Приберіть лише зайве .txt. Якщо сторінка відкрилася, але без кольорів, перевірте назву styles.css і його розташування поруч.

>

> Якщо після Tab немає рамки, вставте вміст styles.css у повідомлення ШІ: «Поверни видимий фокус посилань, не змінюючи іншого оформлення». Збережіть виправлений CSS за кроком 3, оновіть сторінку й повторіть перевірку.

Нижче — верх готового прикладу у широкому й вузькому вікнах. Порівняйте перенесення вступу та видимість меню зі своєю сторінкою.

[[VIS:b5_site_browser]]

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

• У Провіднику скопіюйте папку personal-site поруч і назвіть копію personal-site-home. Якщо назва зайнята, додайте вільний номер.
• Відкрийте обидва файли копії в Блокноті. Знайдіть назву підключеного CSS і текст контактного посилання, нічого не змінюючи.
• У Documents\AI-practice\site-files-home.txt запишіть, який файл треба відкрити для перегляду сторінки, а який — для зміни кольору. Додайте знайдену адресу контакту. Перевірте відповіді за файлами; листа надсилати не потрібно.

Самотест

• Після натискання «Проєкти» що має змінитися на сторінці та в адресі браузера?
• Слова видно, але кольори зникли. Які дві речі, пов’язані зі styles.css, перевірите спочатку?
• Що означає рамка навколо посилання після натискання Tab і як відкрити це посилання без миші?

Терміни

• Тег — позначка HTML, наприклад <a>, що визначає частину документа.
• Відносний шлях — адреса файлу від поточної папки.
• Фокус — елемент, на який зараз діятиме клавіатура.