Загрузка...

Основы HTML

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

Что такое базовый HTML-документ?

Базовый HTML-документ — текстовый файл с фиксированной внешней структурой. Внутри неё вы размещаете содержимое, которое видят посетители. Почти каждая страница этого курса использует тот же внешний каркас и меняет только то, что внутри body.

Прямой ответ: нужный каркас

Современная базовая страница включает эти части в таком порядке:

<!DOCTYPE html> — объявляет документ HTML5
<html> — корневой элемент, охватывающий всю страницу
<head> — сведения о странице (не основной видимый текст статьи)
<title> внутри head — текст для вкладки браузера и закладок
<body> — содержимое, которое люди видят на странице

Базовый HTML-документ

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>

Читаем пример построчно

Doctype должен быть первым, чтобы браузер использовал современные правила HTML
Всё остальное лежит внутри <html> ... </html>
<head> хранит title; посетители в основном видят его в имени вкладки
<body> хранит заголовок и абзац в области страницы
Большинству элементов нужна парная закрывающая метка со слэшем, например </p>

Head и body

Представьте <head> как закулисные заметки, а <body> как сцену. Поисковики и браузеры используют title и другие данные head. Читатели смотрят на body. Класть основной текст статьи только в head — типичная ошибка новичков.

Вложенность и порядок

Элементы HTML вкладываются: один элемент может быть внутри другого. Держите теги в понятном дереве. Закрывайте внутренние теги раньше внешних. Для базового каркаса сохраняйте порядок: doctype, затем html, затем head (с title), затем body.

Попробуйте сами

Создайте файл basic.html в редакторе
Вставьте пример выше
Измените текст title и заголовка
Сохраните файл и откройте в браузере
После сохранения и обновления убедитесь, что заголовок вкладки и заголовок на странице оба обновились

Небольшие советы, которые сэкономят время позже

Предпочитайте имена тегов в нижнем регистре (<p>, не <P>) для современного стиля HTML
Делайте отступы у вложенных строк, чтобы видеть, какие теги связаны
В ранних примерах держите один ясный <h1> как главный заголовок страницы
Charset, ссылки, изображения и другое добавите позже; сначала освойте этот каркас

Частые ошибки

Забыть <!DOCTYPE html> вверху
Закрывать теги в неверном порядке (например закрыть html раньше body)
Ставить видимый заголовок только внутрь <head>
Сохранять без расширения .html и удивляться странному поведению браузера
Писать открывающий тег без закрывающего, когда элементу нужны оба

Кратко

Базовая HTML-страница использует doctype, html, head, title и body
Title в основном виден во вкладке браузера
Видимое содержимое принадлежит body
Элементы вкладываются; сначала закрывайте внутренние
Практикуйтесь, правя небольшой файл и обновляя браузер
Последующие уроки добавляют больше элементов на тот же каркас

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

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

Язык