Студия продвижения сайтов / Справочник HTML /

Создание пустой HTML 5 страницы

HTML (HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц. Мы познакомимся с основными компонентами HTML-документа и научимся создавать свой первый веб-документ.

Основы структуры HTML-документа

HTML-документ состоит из нескольких основных частей:

DOCTYPE html — Объявление типа документа. Указывает, что документ написан на HTML5.
html — Корневой элемент HTML-страницы.
head — Содержит метаинформацию о документе (например, заголовок, подключение стилей и скриптов).
body — Содержит видимое содержимое веб-страницы (текст, изображения и другие элементы).

Создание базового HTML-документа

Откройте текстовый редактор (например, Notepad, Sublime Text или VS Code) и создайте новый файл с расширением .html (например, index.html). Вставьте следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый HTML-документ</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
    <p>HTML позволяет создавать веб-страницы.</p>
</body>
</html>

Объяснение кода

DOCTYPE html — указывает браузеру, что документ написан в HTML5.
html lang="ru" — корневой элемент. Атрибут lang указывает язык документа (в данном случае русский).
head - содержит метаинформацию.
meta charset="UTF-8" - устанавливает кодировку документа, чтобы поддерживать различные символы.
meta name="viewport" content="width=device-width, initial-scale=1.0" - делает страницу удобной для просмотра на мобильных устройствах.
title - устанавливает заголовок страницы, который отображается на вкладке браузера.
body — содержит видимое содержание страницы.
h1 — основной заголовок.
p — абзац.

Сохранение и просмотр

1) Сохраните файл с расширением .html.

2) Откройте сохранённый файл в веб-браузере (двойной щелчок по файлу или через команду "Открыть файл" в браузере).

Вы увидите веб-страницу с заголовком "Привет, мир!" и двумя параграфами текста.

В нашей студии вы можете заказать доработку вашего кода с последующим SEO продвижением сайта в топ в поисковых системах. Также на нашем сайте можно почитать статьи о комплексном продвижении в разделе сео-блога.