Практичне завдання: Моя перша веб-сторінка
Практичне завдання: Моя перша веб-сторінка
Мета: Навчитися створювати просту HTML-сторінку та зрозуміти призначення основних HTML-тегів: <html>, <head>, <title>, <body>, <h1>, <p>, <ul>, <li>, <img>, <b>.
Практичне завдання: Моя перша веб-сторінка
Мета:
Навчитисястворювати просту HTML-сторінкута зрозуміти призначення основних HTML-тегів: <html>, <head>, <title>, <body>, <h1>, <p>, <ul>, <li>, <img>, <b>.
✅ Крок 1. Створюємо HTML-файл
1. Відкрий Блокнот на своєму комп’ютері.
Порада: Можна також скористатися зручним безкоштовним редактором Sublime Text (завантажити можна тут: https://www.sublimetext.com/download), який автоматично підсвічує HTML-код, що допомагає швидше орієнтуватися в коді.
Як вибрати підсвічування синтаксису HTML у Sublime Text: Натисни View → Syntax → HTML
2. Напиши код:
🔎 Пояснення:
● <html> — відкриває HTML-документ.
● <head> — частина з налаштуваннями сторінки.
● <title> — назва, що відображається у вкладці браузера.
● <body> — усе, що бачить користувач.
👁 Перевірка:
Збережи файл як index.html, відкрий у браузері — побачиш порожню сторінку з назвою «Моя перша сторінка» у вкладці.
✅ Крок 2. Додаємо заголовок
Усередину тегу <body>, перед закриваючим </body>, встав:
🔎 Пояснення:
● <h1> — найбільший заголовок на сторінці.
👁 Перевірка:
Онови сторінку — з’явиться великий заголовок «Привіт, світ!».
✅ Крок 3. Додаємо абзац Під заголовком <h1> додай:
🔎 Пояснення:
● <p> — абзац тексту, додає відступи згори й знизу.
👁 Перевірка:
Онови сторінку — з’явиться текстовий блок.
✅ Крок 4. Додаємо список Під абзацом додай:
🔎 Пояснення:
● <h2> — заголовок другого рівня.
● <ul> — маркований список.
● <li> — пункт списку.
👁 Перевірка:
Сторінка покаже заголовок і список з кружечками.
✅ Крок 5. Додаємо зображення
Під списком додай:
🔎 Пояснення тега <img>:
● <img> — тег для вставки зображення.
🧩 Атрибути:
1. src="..."
➤ Вказує шлях до зображення (посилання на картинку). ➤ У нашому прикладі:
— це сайт, який автоматично генерує випадкові зображення розміром 300x300 пікселів.
2. alt="..."
➤ Це альтернативний текст.
➤ Якщо зображення не завантажиться, браузер покаже цей текст.
➤ Це також допомагає людям зі слабким зором, які користуються програмами для читання з екрану. Приклад:
3. width="..."
➤ Встановлює ширину зображення у пікселях.
➤ Наприклад:
— означає, що зображення буде шириною 300 пікселів.
👁 Перевірка:
Онови сторінку — має з’явитися прямокутне зображення. Якщо картинка не показується, ти побачиш текст «Фото» замість неї.
При наступних оновленнях сторінки, зображення буде змінюватися, бо кожного разу сервіс picsum.photos повертає нове випадкове зображення
✅ Крок 6. Завершення
У кінець <body> перед </body> додай:
🔎 Пояснення:
● <b> — тег, який робить текст жирним.
👁 Перевірка:
Внизу з’явиться жирний текст «Дякую за увагу!».
✅ Крок 7. Самостійне завдання
Спробуй самостійно розширити свою веб-сторінку, використовуючи нові HTML-теги:
1. Додай горизонтальну лінію перед новим блоком
🔹 Використай тег: <hr>
2. Додай заголовок «Мої улюблені хобі» другого рівня
🔹 Використай тег: <h2>
3. Створи нумерований список із трьома хобі (наприклад: читання, спорт, малювання)
🔹 Використай теги: <ol> та <li>
Підказка: Усі нові елементи додавай перед закриваючим тегом </body>.
👁 Перевірка: Після збереження й оновлення сторінки має з’явитися горизонтальна лінія, заголовок і список хобі.
про публікацію авторської розробки
Додати розробку