Знакомство / Одиночные HTML-теги [5/14]
×

Одиночные HTML-теги [5/14]

С некоторыми парными тегами мы познакомились. А что же за одиночные теги?

Парные теги обычно нужны, чтобы оформить некоторый участок текста. Благодаря паре тегов вы можете указать начало и конец этого участка. Но ведь есть теги, которые не предназначены для оформления фрагментов текста.

Например, тег для вставки изображения или тег для вставки разделительной полосы. Такие теги добавляют на страницу одиночный объект, и им не нужно для этого заключать в себя какой-то текст. Поэтому их называют одиночными.

Примеры таких тегов: <br>, <hr>, <img>.

Кстати, в HTML-редакторе вы увидите такие фрагменты кода: <!-- текст -->. Они называются «комментарии», и браузер не отображает их на странице.

Раньше одиночные теги писались с закрывающим слешом перед закрывающей скобкой. Например: <br/>.
В новом стандарте HTML5 использование закрывающего слеша в одиночных тегах необязательно.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Одиночные HTML-теги</title> </head> <body> <h1>Инструктор Кекс</h1> <p>В последующих курсах вам будет часто помогать с освоением тонкостей HTML и CSS инструктор Кексик. Дадим же ему возможность представиться:</p> <!-- Изображение --> <!-- Разделитель --> <blockquote> <p>Привет! Меня зовут Кекс и я ваш будущий инструктор. Я веб-разработчик и живу в Санкт-Петербурге. Мои самые известные проекты:<!-- Перенос --> блог Cat Energy,<!-- Перенос --> курс про ссылки и изображения в HTML Academy,<!-- Перенос --> курс про 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; }
HTML Academy

Потренируйтесь использовать одиночные теги, чтобы оформить карточку инструктора.

  1. Вместо текста <!-- Изображение --> вставьте тег <img> (сама картинка появится в следующем задании).
  2. Вместо <!-- Разделитель --> вставьте тег <hr>.
  3. Вместо надписей <!-- Перенос --> вставьте теги <br>.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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