Знакомство / Атрибуты HTML-тегов [6/14]
×

Атрибуты HTML-тегов [6/14]

В предыдущем задании, как вы заметили, после вставки в код тега <img> ничего не произошло. Почему же так вышло?

Теги могут иметь атрибуты. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки (иначе браузер не сможет загрузить её).

В общем случае тег записывается следующим образом:

<имя-тега атрибут1="значение1" атрибут2="значение2" ...>

Атрибутов может быть несколько, вот примеры:

<p class="important">...</p>
<a class="external" href="https://htmlacademy.ru">...</a>
<img class="avatar" src="keks.png">

В этом задании вы потренируетесь использовать атрибуты тегов.

Не забудьте пробелы между названием тега и атрибутом и между атрибутами

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Атрибуты HTML-тегов</title> </head> <body> <h1>Инструктор Кекс</h1> <p>В последующих курсах вам будет часто помогать с освоением тонкостей HTML и CSS инструктор Кексик. Дадим же ему возможность представиться:</p> <img> <hr> <blockquote> <p>Привет! Меня зовут Кекс и я ваш будущий инструктор. Я веб-разработчик и живу в Санкт-Петербурге. Мои самые известные проекты:<br> блог Cat Energy,<br> курс про ссылки и изображения в HTML Academy,<br> курс про HTML5 там же.</p> <p>До встречи в последующих курсах!</p> </blockquote> </body> </html>
CSS
body { font-family: Georgia, serif; } blockquote { margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background: #f9f9f9; border-left: 2px solid #ccc; } /* Пример оформления фотографии */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666; }
HTML Academy
  1. К тегу img добавьте атрибут src со значением
    /assets/course1/keks.jpg,
  2. а затем ещё один атрибут class со значением photocard.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.