Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Знания:

Перед выполнением этого задания вы должны пройти Начало работы с HTM, What's in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, и Advanced text formatting.

Цель:

Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега <head>.

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

Example

Оценка

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

 

В этом модуле

 

Метки документа и участники

Внесли вклад в эту страницу: Tuman13, thoughtspile, saniaky
Обновлялась последний раз: Tuman13,