{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-разработка начинается с понимания HTML (HyperText Markup Language), языка разметки, который определяет структуру веб-страниц. Это как создание каркаса дома: HTML указывает, где будут заголовки, текст, изображения, кнопки и другие элементы. Для новичков, далеких от программирования, важно начать с простого, например, вы можете создать страницу с заголовком \"Мой первый сайт\" и добавить текст, как в обычном документе, но с тегами.","type":"unstyled","key":"9204e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте текстовый редактор, например, Блокнот (Windows) или TextEdit (macOS). Создайте новый файл и сохраните его как index.html в удобной папке, например, на рабочем столе. Это будет основа вашей страницы.","type":"unstyled","key":"5kb4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dho3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\t\n\t\t\n\t\tМой первый сайт\n\t\n\t\n\t\t

Мой первый сайт

\n\t\t

Это мой первый текст на сайте.

\n\t","type":"blockquote","key":"bqfrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a9fqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9d32l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь ","type":"unstyled","key":"fvu85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":" указывает, что это HTML5.","type":"unstyled","key":"dhusf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" содержит метаданные.","type":"unstyled","key":"2kpol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":4,"offset":34,"style":"BOLD"},{"length":4,"offset":55,"style":"BOLD"}],"text":" добавлен заголовок с тегом

и текст с тегом
.","type":"unstyled","key":"qg3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Проверка результата","type":"header-three","key":"65cht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните файл и откройте его в браузере, дважды щёлкнув по нему или перетащив в окно браузера. Вы увидите заголовок \"Мой первый сайт\" и текст ниже.","type":"unstyled","key":"2fcb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура HTML","type":"header-three","key":"c3lj4"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":12,"offset":669}],"inlineStyleRanges":[{"length":16,"offset":91,"style":"BOLD"},{"length":6,"offset":229,"style":"BOLD"},{"length":6,"offset":275,"style":"BOLD"},{"length":6,"offset":292,"style":"BOLD"},{"length":7,"offset":363,"style":"BOLD"},{"length":6,"offset":507,"style":"BOLD"},{"length":1,"offset":107,"style":"ITALIC"}],"text":"Основная структура HTML-документа включает несколько ключевых компонентов. Начинается все с , который сообщает браузеру, что это документ HTML5, необходимый для правильного отображения. Затем идет корневой элемент , который обнимает всю страницу. Внутри находится , секция для метаданных, не видимых посетителям. Здесь размещают , который отображается в вкладке браузера, например, \"Мой первый сайт\", и <meta charset=\"utf-8\"> для поддержки символов разных языков. В <body> помещается всё, что видно на сайте: текст, изображения, видео, кнопки. Это базовый скелет, с которым работают все веб-разработчики, и его можно изучить на MDN Web Docs.","type":"unstyled","key":"9t7jf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Со временем мы добавим стили с CSS и интерактивность с JavaScript, но сначала важно освоить структуру. Ниже приведен список с ключевыми элементами структуры HTML :","type":"unstyled","key":"9bai7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"<!DOCTYPE html>","type":"header-three","key":"vre6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Указывает тип документа, версия HTML5.","type":"unordered-list-item","key":"36uqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":32,"style":"BOLD"}],"text":"Должен быть в начале, например, <!DOCTYPE html>.","type":"unordered-list-item","key":"25g1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<html>","type":"header-three","key":"7kios"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Корневой элемент, содержит всю страницу.","type":"unordered-list-item","key":"ffmoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":9,"style":"BOLD"},{"length":6,"offset":18,"style":"BOLD"},{"length":14,"offset":36,"style":"BOLD"}],"text":"Обнимает <head> и <body>, например, <html> </html>.","type":"unordered-list-item","key":"f7opf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<head>","type":"header-three","key":"9p884"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержит метаданные, не видно посетителям.","type":"unordered-list-item","key":"2lnjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":9,"style":"BOLD"},{"length":22,"offset":18,"style":"BOLD"},{"length":14,"offset":51,"style":"BOLD"},{"length":15,"offset":73,"style":"BOLD"}],"text":"Включает <title>, <meta charset=\"utf-8\">, например, <head><title>Мой сайт.","type":"unordered-list-item","key":"cssau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6dojh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заголовок страницы, отображается в вкладке браузера.","type":"unordered-list-item","key":"4he63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":8,"style":"BOLD"},{"length":8,"offset":34,"style":"BOLD"}],"text":"Пример: <title> Тестовая страница .","type":"unordered-list-item","key":"2c26a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6aa8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Описание: Устанавливает кодировку, обычно utf-8 для поддержки всех языков.","type":"unordered-list-item","key":"fvhlr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":8,"style":"BOLD"}],"text":"Пример: .","type":"unordered-list-item","key":"7tbmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"8220l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержит видимый контент: текст, изображения, видео.","type":"unordered-list-item","key":"452ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":9,"style":"BOLD"},{"length":42,"offset":37,"style":"BOLD"}],"text":"Включает

,
, , например,

Мой сайт

Текст

.","type":"unordered-list-item","key":"ekmj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"header-three","key":"8rnpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шапка сайта, например, с названием и логотипом.","type":"unordered-list-item","key":"db59o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":8,"style":"BOLD"},{"length":15,"offset":31,"style":"BOLD"}],"text":"Пример:

Мой сайт

.","type":"unordered-list-item","key":"p9qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"header-three","key":"4fkp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Навигационное меню, например, ссылки на разделы.","type":"unordered-list-item","key":"cor93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":8,"style":"BOLD"},{"length":11,"offset":36,"style":"BOLD"}],"text":" Пример: .","type":"unordered-list-item","key":"eq8i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"header-three","key":"6p64o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основное содержимое, только один на странице.","type":"unordered-list-item","key":"396i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":8,"style":"BOLD"},{"length":12,"offset":37,"style":"BOLD"}],"text":"Пример:

Добро пожаловать!

.","type":"unordered-list-item","key":"5i2lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"header-three","key":"7kjr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Боковые блоки, например, изображения или реклама.","type":"unordered-list-item","key":"a3f1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":7,"style":"BOLD"}],"text":"Пример: .","type":"unordered-list-item","key":"edmeg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Мой первый сайт

, , , например,

Мой сайт

,
, , например,