Создайте свою страницу

Теперь ваша очередь. Редактор пуст, и всю страницу вы напишете сами, включая те части, которые раньше редактор добавлял за вас в фоне.

Задания — это список всего, что должно быть на вашей странице, и проверяются они сверху вниз: при каждом нажатии «Запустить» проверки останавливаются на первом пункте, который ещё не выполнен. Поэтому вы можете запускать код в любой момент, чтобы увидеть, какой пункт следующий. Проверки смотрят только на структуру страницы, а не на текст.

Каркас. Начните с того, что вы знаете по первым урокам:

• объявление типа документа <!DOCTYPE html> в самом начале,
• элемент html с атрибутом lang, который сообщает браузерам, программам чтения с экрана и поисковым системам, на каком языке написана страница,
• элемент head с кодировкой символов <meta charset="utf-8">, благодаря которой правильно отображаются русские буквы, например ё или щ, и с названием страницы (title), которое вы не увидите в окне предпросмотра, но браузер показывает его на вкладке,
• элемент body с видимым содержимым страницы.

Структура. Разделите body на три части: header с главным заголовком, main для основного содержимого и footer внизу, например с именем автора. Не забывайте про отступы: нажимайте Tab, чтобы каждый вложенный элемент был сдвинут на один уровень дальше родительского, и с первого взгляда было видно, что внутри чего находится.

Содержимое. В main напишите, о чём ваша тема, почему она вам нравится или что в ней интересного. Добавьте список и выделите важные слова. Чтобы страницу было легко читать, можно разделить содержимое заголовками второго уровня (h2) или элементами section.

Изображение. Вы можете взять нашу картинку с кошками, /learn/html/cats.webp, или любое изображение из интернета: щёлкните по нему правой кнопкой мыши, скопируйте адрес изображения и вставьте его в атрибут src. Если изображение не появилось, попробуйте другое. И не забудьте про атрибут alt, который описывает изображение тем, кто его не видит.

Ссылка. Пусть она ведёт на сайт, где посетители смогут узнать больше о вашей теме, например на Википедию. Посетители, скорее всего, захотят вернуться на вашу страницу, поэтому пусть ссылка открывается в новой вкладке.

Таблица. Придумайте что-нибудь, что удобно разместить в строках и столбцах: расписание, сравнение или ваши лучшие результаты. В первой строке находятся заголовки столбцов (th), в остальных — данные (td). Не беспокойтесь, если у таблицы нет границ: за внешний вид страницы отвечает CSS.

Форма. Например, вопрос к посетителям или опрос. У каждого поля должно быть описание в элементе label, атрибут for которого имеет то же значение, что и id поля:

<label for="nickname">Ваш ник</label>
<input type="text" name="nickname" id="nickname">

Чтобы что-то сделать с данными из формы, понадобилась бы программа на сервере, а у нашей страницы её нет. Поэтому с данными пока ничего не произойдёт, и на этот раз атрибуты action и method можно не писать.

Совет. Ваш код не сохраняется, когда вы уходите из этого упражнения. Когда все пункты будут выполнены, скопируйте его (Ctrl+A и Ctrl+C, на Mac — Cmd+A и Cmd+C): в следующем упражнении мы покажем, как сохранить страницу на компьютере.