softchris
9837770ac1
|
1 month ago | |
|---|---|---|
| .. | ||
| README.md | 1 month ago | |
| assignment.md | 1 month ago | |
README.md
Проект "Террариум", часть 1: Введение в HTML
Скетчноут от Tomomi Imura
HTML, или язык гипертекстовой разметки, является основой каждого веб-сайта, который вы когда-либо посещали. Представьте себе HTML как скелет, который придает структуру веб-страницам – он определяет, где размещается контент, как он организован и что представляет собой каждый элемент. В то время как CSS позже "нарядит" ваш HTML с помощью цветов и макетов, а JavaScript оживит его с помощью интерактивности, HTML предоставляет основную структуру, которая делает все остальное возможным.
В этом уроке вы создадите HTML-структуру для интерфейса виртуального террариума. Этот практический проект поможет вам освоить основные концепции HTML, создавая что-то визуально привлекательное. Вы научитесь организовывать контент с помощью семантических элементов, работать с изображениями и создавать основу для интерактивного веб-приложения.
К концу урока у вас будет рабочая HTML-страница, отображающая изображения растений в организованных колонках, готовая к стилизации в следующем уроке. Не переживайте, если сначала она будет выглядеть просто – именно так должен выглядеть HTML до того, как CSS добавит визуальный блеск.
Предварительный тест
📺 Смотрите и учитесь: Ознакомьтесь с полезным видеообзором
Настройка вашего проекта
Прежде чем мы начнем писать HTML-код, давайте настроим рабочее пространство для вашего проекта террариума. Создание организованной структуры файлов с самого начала – это важная привычка, которая будет полезна вам на протяжении всего пути веб-разработки.
Задание: Создайте структуру проекта
Вы создадите отдельную папку для проекта террариума и добавите ваш первый HTML-файл. Вот два подхода, которые вы можете использовать:
Вариант 1: Использование Visual Studio Code
- Откройте Visual Studio Code
- Нажмите "File" → "Open Folder" или используйте
Ctrl+K, Ctrl+O(Windows/Linux) илиCmd+K, Cmd+O(Mac) - Создайте новую папку с названием
terrariumи выберите её - В панели Explorer нажмите на значок "New File"
- Назовите ваш файл
index.html
Вариант 2: Использование команд терминала
mkdir terrarium
cd terrarium
touch index.html
code index.html
Что делают эти команды:
- Создают новую директорию с названием
terrariumдля вашего проекта - Переходят в директорию 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>. Это создает элемент абзаца, содержащий текст "Привет, мир!".
Задание: Добавьте элемент Body
Обновите ваш 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, вам нужно правильно организовать файлы проекта, создав папку для изображений и добавив графику растений.
Сначала настройте ваши изображения:
- Создайте папку с названием
imagesвнутри папки вашего проекта террариума - Скачайте изображения растений из папки с решениями (всего 14 изображений растений)
- Скопируйте все изображения растений в вашу новую папку
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.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.ru.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.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.ru.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.ru.png" />
</div>
</div>
</div>
Пошагово, что происходит в этом коде:
- Создается основной контейнер страницы с
id="page", чтобы содержать весь контент - Определяются два контейнера для колонок:
left-containerиright-container - Организуются 7 растений в левую колонку и 7 растений в правую колонку
- Обрамляется каждое изображение растения в div с классом
plant-holderдля индивидуального позиционирования - Применяются единообразные имена классов для стилизации с помощью CSS в следующем уроке
- Назначаются уникальные идентификаторы каждому изображению растения для последующего взаимодействия с JavaScript
- Указываются правильные пути к файлам в папке изображений
🤔 Подумайте об этом: Обратите внимание, что у всех изображений сейчас одинаковый текст alt "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>
Понимание структуры террариума:
- Создает основной контейнер террариума с уникальным идентификатором для стилизации
- Определяет отдельные элементы для каждого визуального компонента (верх, стены, земля, дно)
- Включает вложенные элементы для эффектов отражения стекла (глянцевые элементы)
- Использует описательные имена классов, которые четко указывают назначение каждого элемента
- Готовит структуру для стилизации CSS, которая создаст внешний вид стеклянного террариума
🤔 Обратите внимание: Несмотря на то, что вы добавили эту разметку, вы пока не видите ничего нового на странице! Это прекрасно иллюстрирует, как HTML предоставляет структуру, а CSS – внешний вид. Эти элементы
<div>существуют, но пока не имеют визуальной стилизации – это будет сделано в следующем уроке!
Задание от GitHub Copilot Agent
Используйте режим Agent, чтобы выполнить следующее задание:
Описание: Создайте семантическую HTML-структуру для раздела руководства по уходу за растениями, который можно добавить в проект террариума.
Подсказка: Создайте семантический HTML-раздел, включающий главный заголовок "Руководство по уходу за растениями", три подраздела с заголовками "Полив", "Требования к освещению" и "Уход за почвой", каждый из которых содержит абзац информации о уходе за растениями. Используйте правильные семантические HTML-теги, такие как <section>, <h2>, <h3> и <p>, чтобы правильно структурировать контент.
Узнайте больше о режиме агента здесь.
Исследуйте вызов истории HTML
Изучение эволюции веба
HTML значительно эволюционировал с тех пор, как Тим Бернерс-Ли создал первый веб-браузер в CERN в 1990 году. Некоторые старые теги, такие как <marquee>, теперь устарели, поскольку они плохо работают с современными стандартами доступности и принципами адаптивного дизайна.
Попробуйте этот эксперимент:
- Временно оберните ваш заголовок
<h1>в тег<marquee>:<marquee><h1>Мой террариум</h1></marquee> - Откройте вашу страницу в браузере и наблюдайте эффект прокрутки
- Подумайте, почему этот тег был устаревшим (подсказка: подумайте о пользовательском опыте и доступности)
- Удалите тег
<marquee>и вернитесь к семантической разметке
Вопросы для размышления:
- Как прокручивающийся заголовок может повлиять на пользователей с нарушениями зрения или чувствительностью к движению?
- Какие современные CSS-техники могут достичь аналогичных визуальных эффектов более доступным способом?
- Почему важно использовать современные веб-стандарты вместо устаревших элементов?
Узнайте больше о устаревших и удаленных HTML-элементах, чтобы понять, как веб-стандарты развиваются для улучшения пользовательского опыта.
Викторина после лекции
Обзор и самостоятельное изучение
Углубите свои знания HTML
HTML является основой веба уже более 30 лет, эволюционируя от простого языка разметки документов до сложной платформы для создания интерактивных приложений. Понимание этой эволюции помогает ценить современные веб-стандарты и принимать более обоснованные решения при разработке.
Рекомендуемые пути обучения:
-
История и эволюция HTML
- Изучите хронологию от HTML 1.0 до HTML5
- Узнайте, почему некоторые теги были устаревшими (доступность, удобство для мобильных устройств, поддерживаемость)
- Исследуйте новые функции HTML и предложения
-
Углубленное изучение семантического HTML
- Изучите полный список семантических элементов HTML5
- Практикуйтесь в определении, когда использовать
<article>,<section>,<aside>и<main> - Узнайте о атрибутах ARIA для улучшенной доступности
-
Современная веб-разработка
- Изучите создание адаптивных веб-сайтов на Microsoft Learn
- Поймите, как HTML интегрируется с CSS и JavaScript
- Узнайте о лучших практиках веб-производительности и SEO
Вопросы для размышления:
- Какие устаревшие HTML-теги вы обнаружили и почему они были удалены?
- Какие новые функции HTML предлагаются для будущих версий?
- Как семантический HTML способствует доступности веба и SEO?
Задание
Практикуйтесь в HTML: Создайте макет блога
Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.