<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "89f7f9f800ce7c9f149e98baaae8491a",
  "translation_date": "2025-08-28T23:21:50+00:00",
  "source_file": "3-terrarium/1-intro-to-html/README.md",
  "language_code": "ru"
}
-->
# Проект "Террариум", Часть 1: Введение в HTML

![Введение в HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ru.png)
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)

## Викторина перед лекцией

[Викторина перед лекцией](https://ff-quizzes.netlify.app/web/quiz/15)

> Посмотрите видео

> 
> [![Видео о Git и GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)

### Введение

HTML, или язык гипертекстовой разметки, — это "скелет" веба. Если CSS "одевает" ваш HTML, а JavaScript оживляет его, то HTML — это тело вашего веб-приложения. Синтаксис HTML даже отражает эту идею, так как включает теги "head", "body" и "footer".

В этом уроке мы будем использовать HTML, чтобы создать "скелет" интерфейса нашего виртуального террариума. Он будет включать заголовок и три колонки: правую и левую, где будут находиться перетаскиваемые растения, и центральную область, которая будет выглядеть как стеклянный террариум. К концу урока вы сможете увидеть растения в колонках, но интерфейс будет выглядеть немного странно; не переживайте, в следующем разделе вы добавите стили CSS, чтобы улучшить внешний вид интерфейса.

### Задание

На вашем компьютере создайте папку с названием 'terrarium', а внутри нее файл 'index.html'. Вы можете сделать это в Visual Studio Code, открыв новое окно VS Code, нажав 'open folder' и выбрав вашу новую папку. Затем нажмите на маленькую кнопку 'file' в панели проводника и создайте новый файл:

![Проводник в VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ru.png)

Или

Используйте эти команды в 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.

Вторая строка должна быть открывающим тегом `<html>`, за которым сразу следует закрывающий тег `</html>`. Эти теги являются корневыми элементами вашего интерфейса.

### Задание

Добавьте эти строки в начало вашего файла `index.html`:

```HTML
<!DOCTYPE html>
<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>`.

```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>
```

✅ Что произойдет, если вы установите мета-тег viewport следующим образом: `<meta name="viewport" content="width=600">`? Узнайте больше о [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).

---

## 'body' документа

### Теги HTML

В HTML вы добавляете теги в ваш .html файл, чтобы создать элементы веб-страницы. Каждый тег обычно имеет открывающий и закрывающий тег, например: `<p>hello</p>` для обозначения абзаца. Создайте тело вашего интерфейса, добавив набор тегов `<body>` внутри пары тегов `<html>`; теперь ваша разметка выглядит так:

### Задание

```html
<!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>
```

Теперь вы можете начать создавать вашу страницу. Обычно вы используете теги `<div>` для создания отдельных элементов на странице. Мы создадим серию элементов `<div>`, которые будут содержать изображения.

### Изображения

Один из тегов HTML, который не требует закрывающего тега, — это `<img>`, так как он имеет элемент `src`, содержащий всю информацию, необходимую для отображения элемента на странице.

Создайте папку в вашем приложении с названием `images` и добавьте в нее все изображения из [папки исходного кода](../../../../3-terrarium/solution/images); (всего 14 изображений растений).

### Задание

Добавьте эти изображения растений в две колонки между тегами `<body></body>`:

```html
<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
		</div>
	</div>
</div>
```

> Примечание: Spans vs. Divs. Divs считаются 'блочными' элементами, а Spans — 'встроенными'. Что произойдет, если вы преобразуете эти divs в spans?

С этой разметкой растения теперь отображаются на экране. Это выглядит довольно плохо, так как они еще не стилизованы с помощью CSS, и мы займемся этим в следующем уроке.

Каждое изображение имеет альтернативный текст, который будет отображаться, даже если вы не можете увидеть или отобразить изображение. Это важный атрибут для обеспечения доступности. Узнайте больше о доступности в будущих уроках; пока запомните, что атрибут alt предоставляет альтернативную информацию для изображения, если пользователь по какой-либо причине не может его увидеть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует экранный диктор).

✅ Вы заметили, что у каждого изображения одинаковый alt-тег? Это хорошая практика? Почему или почему нет? Можете ли вы улучшить этот код?

---

## Семантическая разметка

В общем, предпочтительно использовать осмысленную 'семантику' при написании HTML. Что это значит? Это значит, что вы используете HTML-теги для представления типа данных или взаимодействия, для которых они были разработаны. Например, основной заголовок текста на странице должен использовать тег `<h1>`.

Добавьте следующую строку сразу под вашим открывающим тегом `<body>`:

```html
<h1>My Terrarium</h1>
```

Использование семантической разметки, такой как заголовки `<h1>` и неупорядоченные списки `<ul>`, помогает экранным дикторам ориентироваться на странице. В общем, кнопки должны быть написаны как `<button>`, а списки — как `<li>`. Хотя _возможно_ использовать специально стилизованные элементы `<span>` с обработчиками кликов для имитации кнопок, лучше для пользователей с ограниченными возможностями использовать технологии, чтобы определить, где на странице находится кнопка, и взаимодействовать с ней, если элемент отображается как кнопка. По этой причине старайтесь использовать семантическую разметку как можно чаще.

✅ Ознакомьтесь с экранным диктором и [тем, как он взаимодействует с веб-страницей](https://www.youtube.com/watch?v=OUDV1gqs9GA). Можете ли вы понять, почему использование несемантической разметки может раздражать пользователя?

## Террариум

Последняя часть этого интерфейса включает создание разметки, которая будет стилизована для создания террариума.

### Задание:

Добавьте эту разметку выше последнего тега `</div>`:

```html
<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, которые все еще можно использовать, хотя не стоит применять устаревшие теги, такие как [эти](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) в вашей разметке. Тем не менее, можете ли вы использовать старый тег `<marquee>`, чтобы заголовок h1 прокручивался горизонтально? (если сделаете это, не забудьте удалить его потом)

## Викторина после лекции

[Викторина после лекции](https://ff-quizzes.netlify.app/web/quiz/16)

## Обзор и самостоятельное изучение

HTML — это "проверенная временем" система строительных блоков, которая помогла создать веб таким, каким мы его знаем сегодня. Узнайте немного о его истории, изучив старые и новые теги. Можете ли вы понять, почему некоторые теги были устаревшими, а другие добавлены? Какие теги могут быть введены в будущем?

Узнайте больше о создании сайтов для веба и мобильных устройств на [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).

## Задание

[Практикуйтесь в HTML: Создайте макет блога](assignment.md)

---

**Отказ от ответственности**:  
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.