Собери полноценную веб-страницу с помощью doctype и тегов html, head, meta и body.
Открыть этот урок в KodokonДо сих пор ты писал фрагменты HTML. Но у настоящей веб-страницы всегда одна и та же полная структура, немного как у официального письма всегда есть шапка, основная часть и подпись. Всё начинается с объявления <!DOCTYPE html>, написанного на самой первой строке: оно сообщает браузеру, что документ использует современный HTML. Это не тег - это простое объявление, и оно никогда не закрывается.
Дальше идёт элемент <html>, корень страницы: всё остальное находится внутри него. Его атрибут lang="en" указывает язык документа. Он содержит ровно двух потомков. Сначала <head>: удостоверение личности страницы, с информацией, невидимой для посетителя. Затем <body>: всё видимое содержимое, то есть твои заголовки, абзацы, списки, ссылки, изображения и таблицы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>Посмотрим на содержимое <head>. Самозакрывающийся тег <meta charset="UTF-8"> задаёт кодировку символов: именно она гарантирует, что символы с диакритикой (é, à, ç) отобразятся правильно. Тег <title> задаёт заголовок страницы, который виден во вкладке браузера и в результатах поиска. Часто добавляют второй тег <meta>, известный как тег viewport, чтобы страница подстраивалась под ширину экранов телефонов.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>Ты можешь попробовать прямо сейчас, ничего не устанавливая. Открой простой текстовый редактор (Блокнот в Windows, TextEdit на Mac в режиме обычного текста), скопируй полный скелет, затем сохрани файл с расширением .html, например index.html. Потом дважды кликни по файлу: он откроется в твоём браузере, и появится твоя первая страница.