Условие
В index.html добавьте изображение котика: адрес картинки скопируйте из блока ниже, альтернативный текст - «Котик», ширина - 280, высота - 180. Затем добавьте ссылку с текстом «Перейти на канал» на https://www.youtube.com/@seniorfd - она должна открываться в новой вкладке. CSS уже готов. Ориентир - вкладка «Результат».
Ссылка на картинку - скопируйте её в атрибут
src
изображения:
https://img.magnific.com/free-photo/view-beautiful-persian-domestic-cat_23-2151773821.jpg?semt=ais_hybrid&w=740&q=80
Что нужно сделать
- Добавьте изображение котика: адрес из блока выше, альтернативный текст «Котик», ширина 280, высота 180.
- Добавьте ссылку «Перейти на канал» на https://www.youtube.com/@seniorfd (в новой вкладке). Для безопасности укажите
noopener noreferrer. - Сверьте вид с вкладкой «Результат» и нажмите «Проверить».
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Значение src скопируйте из блока со ссылкой на картинку выше - его же упоминает комментарий в редакторе.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам. Для картинки вставьте src из блока выше.
Вот так должно получиться
изображение + ссылка «Перейти на канал»
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («Котик»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете картинку и ссылку.<img>- изображение. Атрибутsrc- адрес картинки (скопируйте из блока выше),alt- альтернативный текст («Котик»),widthиheight- ширина и высота в пикселях (280 и 180).<a>- ссылка. Текст: «Перейти на канал». Атрибутыhref="https://www.youtube.com/@seniorfd"иtarget="_blank"(открыть в новой вкладке; желательно ещёrel="noopener noreferrer").font-family,margin,background,color,display,max-width,width,height,border,font-weight- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей, картинки и ссылки.
Файл style.css - что уже написано
В стартовом
style.css
три блока правил:
body { ... },
img { ... }
и
a { ... }.
CSS менять не нужно - он уже оформляет изображение и ссылку, которые вы добавите в HTML.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей. -
background: #f0f9ff- цвет фона страницы: светло-голубой (#f0f9ff). -
color: #0f172a- цвет текста по умолчанию: тёмно-синий (#0f172a).
Правило img
-
display: block- картинка становится блоком (ссылка под ней начинается с новой строки). -
max-width: 280px- максимальная ширина изображения: 280 пикселей. -
width: 100%- картинка занимает всю доступную ширину (но не большеmax-width). -
height: auto- высота подстраивается автоматически, чтобы сохранить пропорции. -
margin-bottom: 12px- отступ снизу 12px перед ссылкой. -
border: 1px solid #bae6fd- тонкая рамка вокруг картинки: 1px, сплошная, светло-голубая.
Правило a
-
color: #0369a1- цвет текста ссылки: синий (#0369a1). -
font-weight: 600- полужирное начертание текста ссылки.
Картинка и ссылка - зачем это нужно
Тег
img
показывает изображение, а
a
ведёт пользователя по адресу.
У картинки обязателен
alt
(если картинка не загрузится или для скринридера), у ссылки -
href.
-
src- откуда взять файл картинки (скопируйте из блока в условии). -
alt="Котик"- короткий текст вместо картинки. -
width/height- подсказка браузеру о размере (280 × 180). -
target="_blank"- открыть ссылку в новой вкладке.
Коротко:
в
index.html
добавьте
img
с
src,
alt,
width
и
height,
затем
a
«Перейти на канал» с
href
и
target="_blank".
CSS уже готов:
body
задаёт фон,
img
- размер и рамку,
a
- цвет ссылки. Сверьте вид с вкладкой
«Результат».