Ссылка, картинка и список

Урок 1.4 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно

Цель урока: Научиться ставить на страницу ссылку, картинку и список — с обязательными атрибутами и понятным смыслом.

Нужно знать заранее: Урок 1.3

Объяснение

Зачем это нужно: Страница почти никогда не состоит из одного заголовка и абзаца. На ней есть ссылки, картинки и списки. Это три «кирпича», из которых собирается навигация, галерея и любая карточка. Если сделать их неправильно, страница будет выглядеть нормально, но станет неудобной: ссылка «здесь» непонятна, картинка без описания не читается скринридером, список без пунктов — просто набор слов.

Как это работает: Ссылка — тег <a> с атрибутом href: <a href="https://example.com">Смотреть проект</a>. href — адрес, куда ведёт ссылка. Если ссылка открывает новый сайт, добавляют target="_blank" и rel="noopener". Текст ссылки должен объяснять, куда она ведёт: «Смотреть проект», а не «здесь». Картинка — тег <img> с двумя обязательными атрибутами: src (откуда взять файл) и alt (текстовое описание). <img src="foto.png" alt="Керамическая кружка" />. Закрывающего тега у картинки нет. alt нужен для тех, кто не видит картинку, и для случая, когда она не загрузилась. Список — <ul> для маркированного, <ol> для нумерованного, внутри — пункты <li>. <ul><li>Вёрстка</li><li>Игровой UI</li></ul>.

Пример с разбором: <h2>Мои работы</h2> <ul> <li>Первая страница</li> <li>Кнопка</li> <li>Карточка</li> </ul> <img src="https://fs.chatium.ru/get/image_msk_zymlBZbltO.1024x1024.png" alt="Мой первый проект" /> <p><a href="https://example.com">Смотреть проект</a></p> Здесь есть заголовок, список из трёх пунктов, картинка с описанием и ссылка с понятным текстом.

Разбор по шагам: 1. Напишите <ul> и внутри три <li>. 2. Добавьте <img> с src и alt. 3. Добавьте <a href="…"> с текстом, который объясняет переход. 4. Проверьте, что у картинки есть alt, а у ссылки — href.

Частая ошибка: Пустой alt или его отсутствие. Ссылка «здесь» или «подробнее» без контекста. Список без <li> — браузер покажет текст, но это уже не список. И ещё одна: <img> без закрывающего тега — это правильно, но новички иногда пишут </img>, чего не нужно.

Важно: alt — не формальность. Если картинка несёт смысл, опишите его словами. Если картинка декоративная, alt="" — пустой, чтобы скринридер её пропустил. Ссылка должна быть понятна без окружающего текста: её читают отдельно.

Проверь себя: Какой атрибут у ссылки задаёт адрес? href. Что такое alt? Текстовое описание картинки. Какой тег у пункта списка? <li>. Чем <ul> отличается от <ol>? <ul> — маркированный, <ol> — нумерованный.

Итог: Ссылка, картинка и список — три кирпича, без которых не собрать ни галерею, ни навигацию, ни карточку. У каждого есть обязательные атрибуты, и их пропуск ломает не внешний вид, а смысл.

Что дальше: В уроке 1.5 — структура страницы: шапка, main и подвал.

<h2>Мои работы</h2>
<ul>
  <li>Первая страница</li>
  <li>Кнопка</li>
  <li>Карточка</li>
</ul>
<img src="https://fs.chatium.ru/get/image_msk_zymlBZbltO.1024x1024.png" alt="Мой первый проект" />
<p><a href="https://example.com">Смотреть проект</a></p>

Уроки модуля 1

• 1.1 Что такое интерфейс и из чего он собран (бесплатно)
• 1.2 Первая страница: заголовок и текст (бесплатно)
• 1.3 Кнопка, на которую хочется нажать (бесплатно)
• 1.4 Ссылка, картинка и список — вы здесь (бесплатно)
• 1.5 Структура страницы: шапка, main и подвал (бесплатно)
• 1.6 Классы и id: как обратиться к элементу (бесплатно)
• 1.7 Мини-проект: страница-визитка (бесплатно)
• 1.8 Разбор первой страницы: что поправить (бесплатно)