msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'eede56ed13'
${ noResults }
Web-Dev-For-Beginners/translations/uk/3-terrarium/1-intro-to-html
History
softchris 2b844a03b0
🌐 Update translations via Co-op Translator 		1 month ago
..
README.md 🌐 Update translations via Co-op Translator 1 month ago
assignment.md 🌐 Update translations via Co-op Translator 1 month ago

README.md
Escape

Проєкт "Тераріум" Частина 1: Вступ до HTML

Вступ до HTML

Скетчнот від Tomomi Imura

HTML, або Мова Розмітки Гіпертексту, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим.

У цьому уроці ви створите HTML-структуру для інтерфейсу віртуального тераріуму. Цей практичний проєкт навчить вас основам HTML, одночасно створюючи щось візуально привабливе. Ви навчитеся організовувати контент за допомогою семантичних елементів, працювати з зображеннями та створювати основу для інтерактивного вебдодатку.

До кінця цього уроку у вас буде готова HTML-сторінка, яка відображає зображення рослин у впорядкованих колонках, готова до стилізації в наступному уроці. Не хвилюйтеся, якщо спочатку вона виглядає просто – саме так має виглядати HTML перед тим, як CSS додасть візуальний блиск.

Тест перед лекцією

Тест перед лекцією

📺 Дивіться та навчайтеся: Перегляньте корисне відео-огляд

Відео Основи HTML

Налаштування вашого проєкту

Перед тим як зануритися в код HTML, давайте налаштуємо правильне робоче середовище для вашого проєкту тераріуму. Створення організованої файлової структури з самого початку – це важлива звичка, яка буде корисною протягом вашого шляху веброзробки.

Завдання: Створіть структуру проєкту

Ви створите спеціальну папку для вашого проєкту тераріуму та додасте ваш перший HTML-файл. Ось два підходи, які ви можете використовувати:

Варіант 1: Використання Visual Studio Code

  1. Відкрийте Visual Studio Code
  2. Натисніть "File" → "Open Folder" або використовуйте Ctrl+K, Ctrl+O (Windows/Linux) або Cmd+K, Cmd+O (Mac)
  3. Створіть нову папку під назвою terrarium і виберіть її
  4. У панелі Explorer натисніть на іконку "New File"
  5. Назвіть ваш файл index.html

VS Code Explorer показує створення нового файлу

Варіант 2: Використання команд терміналу

mkdir terrarium
cd terrarium
touch index.html
code index.html

Що роблять ці команди:

  • Створюють нову директорію під назвою terrarium для вашого проєкту
  • Переходять до директорії тераріуму
  • Створюють порожній файл index.html
  • Відкривають файл у Visual Studio Code для редагування

💡 Порада: Ім'я файлу index.html є особливим у веброзробці. Коли хтось відвідує вебсайт, браузери автоматично шукають index.html як сторінку за замовчуванням для відображення. Це означає, що URL, наприклад, https://mysite.com/projects/, автоматично відобразить файл index.html з папки projects, без необхідності вказувати ім'я файлу в URL.

Розуміння структури HTML-документа

Кожен HTML-документ слідує певній структурі, яку браузери повинні розуміти та правильно відображати. Уявіть цю структуру як формальний лист – він має обов'язкові елементи в певному порядку, які допомагають отримувачу (у цьому випадку браузеру) правильно обробляти контент.

Давайте почнемо з додавання основи, яка потрібна кожному HTML-документу.

Декларація DOCTYPE та кореневий елемент

Перші два рядки будь-якого HTML-файлу служать "вступом" документа для браузера:

<!DOCTYPE html>
<html></html>

Розуміння того, що робить цей код:

  • Оголошує тип документа як HTML5 за допомогою <!DOCTYPE html>
  • Створює кореневий елемент <html>, який міститиме весь контент сторінки
  • Встановлює сучасні вебстандарти для правильного рендерингу браузером
  • Забезпечує послідовне відображення в різних браузерах і на різних пристроях

💡 Порада для VS Code: Наведіть курсор на будь-який HTML-тег у VS Code, щоб побачити корисну інформацію з MDN Web Docs, включаючи приклади використання та деталі сумісності з браузерами.

📚 Дізнайтеся більше: Декларація DOCTYPE запобігає переходу браузерів у "режим сумісності", який використовувався для підтримки дуже старих вебсайтів. Сучасна веброзробка використовує просту декларацію <!DOCTYPE html>, щоб забезпечити рендеринг відповідно до стандартів.

Додавання основних метаданих документа

Секція <head> HTML-документа містить важливу інформацію, яку потребують браузери та пошукові системи, але яку відвідувачі не бачать безпосередньо на сторінці. Уявіть це як "закулісну" інформацію, яка допомагає вашій вебсторінці працювати правильно та виглядати коректно на різних пристроях і платформах.

Ці метадані повідомляють браузерам, як відображати вашу сторінку, яке кодування символів використовувати та як обробляти різні розміри екранів – усе це необхідно для створення професійних, доступних вебсторінок.

Завдання: Додайте заголовок документа

Вставте цю секцію <head> між вашими відкриваючим та закриваючим тегами <html>:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Розбір того, що робить кожен елемент:

  • Встановлює заголовок сторінки, який з'являється на вкладках браузера та в результатах пошуку
  • Вказує кодування символів UTF-8 для правильного відображення тексту по всьому світу
  • Забезпечує сумісність із сучасними версіями Internet Explorer
  • Налаштовує адаптивний дизайн, встановлюючи ширину області перегляду відповідно до ширини пристрою
  • Контролює початковий рівень масштабування для відображення контенту в природному розмірі

🤔 Подумайте про це: Що станеться, якщо ви встановите мета-тег області перегляду, наприклад, так: <meta name="viewport" content="width=600">? Це змусить сторінку завжди бути шириною 600 пікселів, порушуючи адаптивний дизайн! Дізнайтеся більше про правильну конфігурацію області перегляду.

Створення тіла документа

Елемент <body> містить увесь видимий контент вашої вебсторінки – усе, що користувачі побачать і з чим взаємодіятимуть. Хоча секція <head> надавала інструкції браузеру, секція <body> містить фактичний контент: текст, зображення, кнопки та інші елементи, які створюють ваш інтерфейс користувача.

Давайте додамо структуру тіла та зрозуміємо, як HTML-теги працюють разом, щоб створити змістовний контент.

Розуміння структури HTML-тегів

HTML використовує парні теги для визначення елементів. Більшість тегів мають відкриваючий тег, наприклад <p>, і закриваючий тег, наприклад </p>, з контентом між ними: <p>Привіт, світ!</p>. Це створює елемент абзацу, що містить текст "Привіт, світ!".

Завдання: Додайте елемент тіла

Оновіть ваш HTML-файл, щоб включити елемент <body>:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

Ось що забезпечує ця повна структура:

  • Встановлює базову структуру документа HTML5
  • Включає основні метадані для правильного рендерингу браузером
  • Створює порожнє тіло, готове для вашого видимого контенту
  • Слідує сучасним найкращим практикам веброзробки

Тепер ви готові додати видимі елементи вашого тераріуму. Ми використаємо елементи <div> як контейнери для організації різних секцій контенту та елементи <img> для відображення зображень рослин.

Робота з зображеннями та контейнерами макета

Зображення є особливими в HTML, оскільки вони використовують "самозакриваючі" теги. На відміну від елементів, таких як <p></p>, які обгортають контент, тег <img> містить всю необхідну інформацію всередині самого тега, використовуючи атрибути, такі як src для шляху до файлу зображення та alt для доступності.

Перед додаванням зображень до вашого HTML вам потрібно правильно організувати файли вашого проєкту, створивши папку для зображень і додавши графіку рослин.

Спочатку налаштуйте ваші зображення:

  1. Створіть папку під назвою images всередині вашої папки проєкту тераріуму
  2. Завантажте зображення рослин з папки рішення (всього 14 зображень рослин)
  3. Скопіюйте всі зображення рослин у вашу нову папку images

Завдання: Створіть макет відображення рослин

Тепер додайте зображення рослин, організовані в дві колонки, між вашими тегами <body></body>:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.uk.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.uk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.uk.png" />
		</div>
	</div>
</div>

Крок за кроком, ось що відбувається в цьому коді:

  • Створює головний контейнер сторінки з id="page" для утримання всього контенту
  • Встановлює два контейнери колонок: left-container і right-container
  • Організовує 7 рослин у лівій колонці та 7 рослин у правій колонці
  • Обгортає кожне зображення рослини в plant-holder div для індивідуального позиціонування
  • Застосовує послідовні назви класів для стилізації CSS у наступному уроці
  • Присвоює унікальні ID кожному зображенню рослини для взаємодії з JavaScript пізніше
  • Включає правильні шляхи до файлів, що вказують на папку зображень

🤔 Подумайте про це: Зверніть увагу, що всі зображення наразі мають однаковий текст alt "plant". Це не ідеально для доступності. Користувачі екранних читачів чули б "plant" 14 разів, не знаючи, яку конкретну рослину показує кожне зображення. Чи можете ви придумати кращий, більш описовий текст alt для кожного зображення?

📝 Типи HTML-елементів: Елементи <div> є "блоковими" і займають всю ширину, тоді як елементи <span> є "вбудованими" і займають лише необхідну ширину. Як ви думаєте, що станеться, якщо ви зміните всі ці теги <div> на теги <span>?

З доданою розміткою рослини з'являться на екрані, хоча вони ще не виглядають привабливо – для цього потрібен CSS у наступному уроці! На даний момент у вас є міцна HTML-основа, яка правильно організовує ваш контент і слідує найкращим практикам доступності.

Використання семантичного HTML для доступності

Семантичний HTML означає вибір HTML-елементів на основі їх значення та призначення, а не лише їх зовнішнього вигляду. Коли ви використовуєте семантичну розмітку, ви передаєте структуру та значення вашого контенту браузерам, пошуковим системам і допоміжним технологіям, таким як екранні читачі.

Цей підхід робить ваші вебсайти більш доступними для користувачів з обмеженими можливостями та допомагає пошуковим системам краще розуміти ваш контент. Це фундаментальний принцип сучасної веброзробки, який створює кращі враження для всіх.

Додавання семантичного заголовка сторінки

Давайте додамо правильний заголовок до вашої сторінки тераріуму. Вставте цей рядок одразу після вашого відкриваючого тега <body>:

<h1>My Terrarium</h1>

Чому семантична розмітка важлива:

  • Допомагає екранним читачам навігувати та розуміти структуру сторінки
  • Покращує оптимізацію для пошукових систем (SEO), уточнюючи ієрархію контенту
  • Підвищує доступність для користувачів із порушеннями зору або когнітивними відмінностями
  • Створює кращі враження для користувачів на всіх пристроях і платформах
  • Слідує вебстандартам і найкращим практикам для професійної розробки

Приклади семантичних та несемантичних виборів:

Призначення ✅ Семантичний вибір ❌ Несемантичний вибір
Основний заголовок <h1>Заголовок</h1> <div class="big-text">Заголовок</div>
Навігація <nav><ul><li></li></ul></nav> <div class="menu"><div></div></div>
Кнопка <button>Натисніть мене</button> <span onclick="...">Натисніть мене</span>
Контент статті <article><p></p></article> <div class="content"><div></div></div>

🎥 Дивіться це в дії: Перегляньте як екранні читачі взаємодіють із вебсторінками, щоб зрозуміти, чому семантична розмітка є важливою для доступності. Зверніть увагу, як правильна структура HTML допомагає користувачам ефективно навігувати.

Створення контейнера тераріуму

Тепер давайте додамо HTML-структуру для самого тераріуму – скляного контейнера, де рослини будуть розміщені. Цей розділ демонструє важливу концепцію: HTML забезпечує структуру, але без стилізації CSS ці елементи ще не будуть видимими.

Розмітка тераріуму використовує описові назви класів, які зроблять стилізацію CSS інтуїтивною та зручною для підтримки в наступному уроці.

Завдання: Додайте структуру тераріуму

Вставте цю розмітку над останнім тегом </div> (перед закриваючим тегом контейнера сторінки):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

Розуміння цієї структури тераріуму:

  • Створює головний контейнер тераріуму з унікальним Підказка: Створіть семантичний HTML розділ, який включає головний заголовок "Посібник з догляду за рослинами", три підрозділи із заголовками "Полив", "Вимоги до освітлення" та "Догляд за ґрунтом", кожен з яких містить абзац інформації про догляд за рослинами. Використовуйте відповідні семантичні HTML-теги, такі як <section>, <h2>, <h3> та <p>, щоб належним чином структурувати контент.

Дізнайтеся більше про режим агента тут.

Дослідження історії HTML

Вивчення еволюції вебу

HTML значно еволюціонував з моменту створення першого веб-браузера Тімом Бернерс-Лі в CERN у 1990 році. Деякі старі теги, такі як <marquee>, зараз застарілі, оскільки вони не відповідають сучасним стандартам доступності та принципам адаптивного дизайну.

Спробуйте цей експеримент:

  1. Тимчасово обгорніть ваш заголовок <h1> у тег <marquee>: <marquee><h1>Мій тераріум</h1></marquee>
  2. Відкрийте вашу сторінку в браузері та спостерігайте ефект прокручування
  3. Подумайте, чому цей тег був застарілим (підказка: подумайте про досвід користувача та доступність)
  4. Видаліть тег <marquee> і поверніться до семантичної розмітки

Питання для роздумів:

  • Як прокручуваний заголовок може вплинути на користувачів із порушеннями зору або чутливістю до руху?
  • Які сучасні CSS-техніки можуть досягти подібних візуальних ефектів більш доступно?
  • Чому важливо використовувати сучасні веб-стандарти замість застарілих елементів?

Дізнайтеся більше про застарілі та заборонені HTML-елементи, щоб зрозуміти, як веб-стандарти еволюціонують для покращення досвіду користувачів.

Тест після лекції

Тест після лекції

Огляд та самостійне навчання

Поглибте свої знання HTML

HTML є основою вебу вже понад 30 років, еволюціонуючи від простої мови розмітки документів до складної платформи для створення інтерактивних додатків. Розуміння цієї еволюції допомагає оцінити сучасні веб-стандарти та приймати кращі рішення у розробці.

Рекомендовані навчальні шляхи:

  1. Історія та еволюція HTML

    • Досліджуйте хронологію від HTML 1.0 до HTML5
    • Дізнайтеся, чому деякі теги були застарілими (доступність, зручність для мобільних пристроїв, підтримка)
    • Вивчайте нові функції HTML та пропозиції

  2. Глибоке занурення в семантичний HTML

    • Вивчіть повний список семантичних елементів HTML5
    • Практикуйте визначення, коли використовувати <article>, <section>, <aside> та <main>
    • Дізнайтеся про атрибути ARIA для покращеної доступності

  3. Сучасна веб-розробка

Питання для роздумів:

  • Які застарілі HTML-теги ви виявили, і чому вони були видалені?
  • Які нові функції HTML пропонуються для майбутніх версій?
  • Як семантичний HTML сприяє доступності вебу та SEO?

Завдання

Практикуйте HTML: створіть макет блогу

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.