Разметка письма

Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента <head>.

Знания: Перед выполнением этого задания вы должны пройти Начало работы с HTML, Что такое заголовок? Метаданные в HTML, Основы редактирования текста в HTML, Создание гиперссылок, и Углублённое форматирование текста.
Цель: Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега <head>.

Отправная точка

Для начала задания, вы должны скачать текст, который вам надо отформатировать, и CSS стиль, который вы должны подключить к вашему HTML. Создайте .html файл используя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редакторами, такими как CodePen, JSFiddle или Glitch).

Описание проекта

В этом проекте, ваша задача - отформатировать письмо, которое должно быть размещено во внутренней сети университета. Это письмо - ответ исследователя будущему PhD студенту о его заявлении на работу в университете.

Блочные элементы / структура:

  • Вы должны корректно структурировать весь документ, включив в него элементы doctype, и <html>, <head> и <body>.
  • Письмо в целом должно быть размечено используя параграфы и заголовки, за исключением следующих пунктов - один заголовок верхнего уровня (начинается на "Re:") и три заголовка второго уровня.
  • Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответствующие типы списков.
  • Два адреса должны быть помещены внутри элементов <address>. Каждая строка адреса должна находиться на новой строке, но не быть новым параграфом.

Строчные элементы:

  • Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.
  • Четырём датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.
  • Первый адрес и первая дата в письме должны иметь атрибут class со значением "sender-column"; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.
  • Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.
  • Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 103 и 104 (степень числа должна быть над числом).
  • Для разметки символов градуса и умножения воспользуйтесь справкой.
  • Постарайтесь выделить как минимум два нужных по смыслу слова в тексте жирным.
  • Есть два места, где следует разместить гиперссылки; добавьте нужные ссылки с заголовками. В качестве адреса для ссылок используйте http://example.com.
  • Девиз университета и цитата должны быть размечены соответствующими элементами.

Заголовок документа:

  • Кодировка документа должна быть указана как utf-8 с использованием соответствующего мета-тега.
  • Автор письма должен быть указан в соответствующем мета-теге.
  • Предоставленный CSS должен быть включён в соответствующий тег.

Советы и подсказки

  • Проверяйте свой HTML в валидаторе W3C — писать валидный код здорово!
  • Для задания не нужно знать CSS — просто укажите CSS из задания в документе.

Пример

Это скриншот размеченного письма:

Example

Оценка

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, в тему этого задания, или по тегу #mdn в нашем IRC-канале (Mozilla IRC). Сделайте это задание сами — вам некого обманывать, кроме себя самого.