На прошлом уроке мы научились создавать структуру страницы и оформлять текст. Теперь добавим списки — для перечислений, ссылки — для перехода на другие страницы и в интернете, а также изображения, аудио и видео.
<ul>, <ol>, <li>.<a href="">.target, title.<img>.<audio> и <video>.ul, ol, liСписки бывают маркированные (буллеты) и нумерованные.
<ul>)<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>ul = unordered list, li = list item.
<ol>)<ol>
<li>Шаг первый</li>
<li>Шаг второй</li>
<li>Шаг третий</li>
</ol>ol = ordered list.
<ul>
<li>Фрукты
<ul>
<li>Яблоко</li>
<li>Банан</li>
</ul>
</li>
<li>Овощи</li>
</ul>a hrefСсылка создаётся тегом <a> с атрибутом href (адрес):
<a href="https://example.com">Перейти на Example</a>
<a href="page2.html">Вторая страница</a>https://example.compage2.html или в подпапке: docs/about.html| Атрибут | Назначение |
|---|---|
href | Адрес страницы или якоря |
target="_blank" | Открыть в новой вкладке |
title="..." | Подсказка при наведении |
<a href="https://google.com" target="_blank" title="Поиск в Google">
Google
</a>Можно создать ссылку на элемент с id на той же странице:
<a href="#section2">Перейти к разделу 2</a>
<h2 id="section2">Раздел 2</h2>imgТег <img> — одиночный, без закрывающего. Обязательные атрибуты: src (путь к картинке) и alt (описание для доступности).
<img src="photo.jpg" alt="Фото автора">
<img src="images/logo.png" alt="Логотип">Атрибут alt показывается, если картинка не загрузилась, и читается скринридерами.
<img src="photo.jpg" alt="Фото" width="300" height="200"><audio controls src="music.mp3">
Ваш браузер не поддерживает аудио.
</audio><video controls src="video.mp4" width="640" height="360">
Ваш браузер не поддерживает видео.
</video>controls — отображает кнопки воспроизведения.
Создай страницу с нумерованным списком «Топ-5 любимых книг/фильмов/игр» и маркированным списком «Что я люблю делать».
Добавь на страницу три ссылки: одну на внешний сайт (с target="_blank"), две — на воображаемые страницы в той же папке.
Создай страницу с одним изображением. Используй alt с осмысленным описанием. Картинку можно взять с бесплатного сервиса (например, placeholder или свои фото).
Объедини всё: страница «О себе» со списком интересов, ссылками на соцсети и фото.
Мы изучили списки (ul, ol, li), ссылки (a href) с атрибутами, изображения (img) и базовое использование аудио и видео. На следующем уроке перейдём к таблицам и формам.
alt у изображений — его наличие важно для доступности.page.html и https://....<a>текст</a> без href — ссылка не будет работать.<a> в <a> — это недопустимо.Создай страницу рецепта с:
<h1> — название блюда<h2>Ингредиенты</h2> и маркированным списком<h2>Приготовление</h2> и нумерованным списком шаговСоздай длинную страницу (3–4 раздела с заголовками и абзацами). В начале добавь список ссылок-якорей на каждый раздел. У каждого <h2> задай уникальный id.
Создай страницу «Полезные ссылки» с:
target="_blank" и осмысленный titleСоздай страницу-заготовку портфолио:
project1.html, project2.html, project3.html (файлы создавать не нужно)mailto:, соцсеть)Сделай список из 3 элементов, где каждый элемент — картинка + подпись. Используй структуру: li → внутри img и абзац с описанием.
Создай страницу о своём хобби. Добавь:
<audio> или <video> (можно использовать тестовый файл или ссылку на образец)Сделай страницу «Оглавление книги»: нумерованный список глав, каждая глава — ссылка на якорь. Ниже — блок с «главами» (заголовки с id и короткий текст). При клике на пункт оглавления — прокрутка к соответствующей главе.