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

> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
## Тест перед лекцією
[Тест перед лекцією](https://ff-quizzes.netlify.app/web/quiz/15)
> Перегляньте відео
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
### Вступ
HTML, або HyperText Markup Language, є "скелетом" вебу. Якщо CSS "одягає" ваш HTML, а JavaScript оживляє його, то HTML — це тіло вашого веб-додатку. Синтаксис HTML навіть відображає цю ідею, оскільки включає теги "head", "body" і "footer".
У цьому уроці ми використаємо HTML для створення "скелета" інтерфейсу нашого віртуального тераріуму. Він матиме заголовок і три колонки: праву та ліву, де будуть розташовані перетягувані рослини, і центральну область, яка буде виглядати як скляний тераріум. До кінця цього уроку ви зможете побачити рослини в колонках, але інтерфейс виглядатиме трохи дивно; не хвилюйтеся, у наступному розділі ви додасте стилі CSS, щоб зробити інтерфейс більш привабливим.
### Завдання
На вашому комп'ютері створіть папку під назвою 'terrarium', а всередині неї файл 'index.html'. Ви можете зробити це у Visual Studio Code після створення папки 'terrarium', відкривши нове вікно VS Code, натиснувши 'open folder' і перейшовши до вашої нової папки. Натисніть маленьку кнопку 'file' у панелі Explorer і створіть новий файл:

Або
Використайте ці команди у вашому git bash:
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` або `nano index.html`
> Файли index.html вказують браузеру, що це файл за замовчуванням у папці; URL-адреси, такі як `https://anysite.com/test`, можуть бути побудовані за допомогою структури папок, яка включає папку під назвою `test` з файлом `index.html` всередині; `index.html` не обов'язково має відображатися в URL.
---
## DocType і теги html
Перший рядок HTML-файлу — це його doctype. Це трохи дивно, що цей рядок має бути на самому початку файлу, але він повідомляє старим браузерам, що сторінка повинна відображатися у стандартному режимі, відповідно до поточної специфікації HTML.
> Порада: у VS Code ви можете навести курсор на тег і отримати інформацію про його використання з довідників MDN.
Другий рядок має бути відкриваючим тегом ``, а заразом і його закриваючим тегом ``. Ці теги є кореневими елементами вашого інтерфейсу.
### Завдання
Додайте ці рядки на початку вашого файлу `index.html`:
```HTML
```
✅ Існує кілька різних режимів, які можна визначити, встановивши DocType за допомогою рядка запиту: [Quirks Mode і Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ці режими використовувалися для підтримки дуже старих браузерів, які зараз майже не використовуються (Netscape Navigator 4 і Internet Explorer 5). Ви можете дотримуватися стандартного оголошення doctype.
---
## 'head' документа
Область 'head' HTML-документа включає важливу інформацію про вашу веб-сторінку, також відому як [метадані](https://developer.mozilla.org/docs/Web/HTML/Element/meta). У нашому випадку ми повідомляємо веб-серверу, на якому ця сторінка буде відображатися, про такі чотири речі:
- заголовок сторінки
- метадані сторінки, включаючи:
- 'character set', який повідомляє про те, яке кодування символів використовується на сторінці
- інформацію про браузер, включаючи `x-ua-compatible`, що вказує на підтримку браузера IE=edge
- інформацію про те, як має поводитися viewport при завантаженні. Встановлення viewport з початковим масштабом 1 контролює рівень масштабування при першому завантаженні сторінки.
### Завдання
Додайте блок 'head' до вашого документа між відкриваючим і закриваючим тегами ``.
```html
Welcome to my Virtual Terrarium
```
✅ Що станеться, якщо ви встановите мета-тег viewport таким чином: ``? Дізнайтеся більше про [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
---
## 'body' документа
### HTML-теги
У HTML ви додаєте теги до вашого .html файлу, щоб створити елементи веб-сторінки. Кожен тег зазвичай має відкриваючий і закриваючий тег, наприклад: `
hello
` для позначення абзацу. Створіть тіло вашого інтерфейсу, додавши пару тегів `` всередині пари тегів ``; ваш код тепер виглядає так:
### Завдання
```html
Welcome to my Virtual Terrarium
```
Тепер ви можете почати створювати вашу сторінку. Зазвичай ви використовуєте теги `
` для створення окремих елементів на сторінці. Ми створимо серію елементів `
`, які міститимуть зображення.
### Зображення
Один HTML-тег, який не потребує закриваючого тега, — це ``, оскільки він має елемент `src`, який містить всю інформацію, необхідну для відображення елемента на сторінці.
Створіть папку у вашому додатку під назвою `images` і додайте до неї всі зображення з [папки вихідного коду](../../../../3-terrarium/solution/images); (там є 14 зображень рослин).
### Завдання
Додайте ці зображення рослин у дві колонки між тегами ``:
```html
```
> Примітка: Спани проти Дівів. Діви вважаються елементами 'block', а Спани — 'inline'. Що станеться, якщо ви перетворите ці діви на спани?
З цим кодом рослини тепер з'являються на екрані. Виглядає це досить погано, оскільки вони ще не стилізовані за допомогою CSS, і ми зробимо це у наступному уроці.
Кожне зображення має альтернативний текст, який з'являється, навіть якщо ви не можете побачити або відобразити зображення. Це важливий атрибут для забезпечення доступності. Дізнайтеся більше про доступність у майбутніх уроках; поки що пам'ятайте, що атрибут alt надає альтернативну інформацію для зображення, якщо користувач з якоїсь причини не може його переглянути (через повільне з'єднання, помилку в атрибуті src або якщо користувач використовує екранний рідер).
✅ Ви помітили, що кожне зображення має однаковий alt-тег? Чи є це хорошою практикою? Чому або чому ні? Чи можете ви покращити цей код?
---
## Семантична розмітка
Загалом, краще використовувати осмислену 'семантику' при написанні HTML. Що це означає? Це означає, що ви використовуєте HTML-теги для представлення типу даних або взаємодії, для яких вони були створені. Наприклад, основний текст заголовка на сторінці має використовувати тег `
`.
Додайте наступний рядок прямо під вашим відкриваючим тегом ``:
```html
My Terrarium
```
Використання семантичної розмітки, такої як заголовки `
` і невпорядковані списки `
`, допомагає екранним рідерам орієнтуватися на сторінці. Загалом, кнопки слід писати як `
`:
```html
```
✅ Незважаючи на те, що ви додали цю розмітку на екран, ви абсолютно нічого не бачите. Чому?
---
## 🚀Виклик
Існують деякі цікаві "старі" теги в HTML, які все ще весело використовувати, хоча вам не слід використовувати застарілі теги, такі як [ці теги](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) у вашій розмітці. Все ж, чи можете ви використати старий тег `