Знакомство / Ищем ошибки [7/14]
×

Ищем ошибки [7/14]

Познакомимся с некоторыми часто встречающимися ошибками, чтобы в дальнейшем их не допускать.

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

<p>Текст <strong>выделен</p> полужирным</strong>

В этом примере тег <p> закрывается раньше, чем тег <strong>, и это ошибка.

Другой тип ошибок случается из-за досадных опечаток и невнимательности, когда забывают пробелы между атрибутами тега или неправильно пишут их названия.

Вот и инструктор Кекс решил обновить своё резюме поздно ночью. Захотелось сделать его лаконичнее, поиграться с оформлением. Но невнимательность его подвела. Зато вы можете потренироваться отыскивать и исправлять ошибки.

Если совсем потеряетесь, то внизу есть подсказка. Только чур сразу не смотреть!

Подсказка

1. Обратите внимание на порядок закрытия тегов.

2. Хватает ли пробелов?

3. Проверьте правильность написания атрибутов. Их там немного.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Ищем ошибки</title> </head> <body> <h1>Инструктор Кекс [v.2]</h1> <!-- В этом блоке затерялась первая ошибка --> <div class="error1"> <p><em>В последующих курсах вам будет часто помогать с освоением тонкостей HTML и CSS</p> инструктор Кексик.</em> </div> <!-- Здесь спрятана вторая ошибка --> <div class="error2"> <imgsrc="/assets/course1/keks-macho.jpg" class="photocard"> </div> <!-- А здесь третья --> <div class="error3"> <blockquote clas="nice-cite"> <p>Привет! Меня зовут Кекс и я ваш будущий инструктор. Я веб-разработчик и живу в Санкт-Петербурге.</p> <p>До встречи в последующих курсах!</p> </blockquote> </div> </body> </html>
CSS
body { font-family: Georgia, serif; } .photocard { display: block; width: 300px; margin: 20px auto; box-shadow: 5px 5px 0 #E7471E; } .nice-cite { margin: 1.5em 0; padding: 0.5em 25px; line-height: 1.5; background: #f5f5f5; border-left: 5px solid #E7471E; }
HTML Academy

Помогите Кексу исправить ошибки в HTML-коде его нового резюме:

  1. Первую ошибку с лишней пустой строкой,
  2. вторую ошибку с отсутствием картинки,
  3. третью ошибку с пропавшим оформлением цитаты.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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