0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>До этого момента мы рассматривали отдельные элементы. Теперь давайте посмотрим на целую HTML-страницу.</p>
1
<p>До этого момента мы рассматривали отдельные элементы. Теперь давайте посмотрим на целую HTML-страницу.</p>
2
<p>Создайте у себя на компьютере файл index.html. Вы можете использовать любой текстовый редактор, например, встроенный в Windows блокнот. Но лучше использовать специальный редактор кода, например,<a>VS Code</a>.</p>
2
<p>Создайте у себя на компьютере файл index.html. Вы можете использовать любой текстовый редактор, например, встроенный в Windows блокнот. Но лучше использовать специальный редактор кода, например,<a>VS Code</a>.</p>
3
<p>Впишите в файл такое содержимое:</p>
3
<p>Впишите в файл такое содержимое:</p>
4
<p>Теперь откройте файл в браузере. Вы увидите пустую страницу. Можете заглянуть в исходный код страницы - там будут те же строки кода.</p>
4
<p>Теперь откройте файл в браузере. Вы увидите пустую страницу. Можете заглянуть в исходный код страницы - там будут те же строки кода.</p>
5
<p>Все эти элементы - обязательны.</p>
5
<p>Все эти элементы - обязательны.</p>
6
<p>HTML-документ должен начинаться с указания формата. Раньше там указывали версию HTML, но сегодня достаточно простого указания <!DOCTYPE html>. Мы изучаем современный стандарт HTML и не будем заботиться о поддержке старых форматов и старых браузеров.</p>
6
<p>HTML-документ должен начинаться с указания формата. Раньше там указывали версию HTML, но сегодня достаточно простого указания <!DOCTYPE html>. Мы изучаем современный стандарт HTML и не будем заботиться о поддержке старых форматов и старых браузеров.</p>
7
<p>Всё содержимое документа обёрнуто в теги <html></html>. У этого элемента могут быть атрибуты, например, такой: <html lang="ru">. Так мы можем явно предупредить браузер, что этот документ - на русском языке.</p>
7
<p>Всё содержимое документа обёрнуто в теги <html></html>. У этого элемента могут быть атрибуты, например, такой: <html lang="ru">. Так мы можем явно предупредить браузер, что этот документ - на русском языке.</p>
8
<p>Внутри находятся два элемента: head и body. Голова и тело :). Содержание "головы" не видно на самой странице. А содержание "тела" видно.</p>
8
<p>Внутри находятся два элемента: head и body. Голова и тело :). Содержание "головы" не видно на самой странице. А содержание "тела" видно.</p>
9
<p>Внутри head указываются так называемые метаданные и дополнительные файлы, необходимые для документа. "Мета" означает "над", "уровнем выше". Метаданные - это данные о данных. Например, здесь можно указать заголовок страницы. Он будет выведен в окне или вкладке браузера:</p>
9
<p>Внутри head указываются так называемые метаданные и дополнительные файлы, необходимые для документа. "Мета" означает "над", "уровнем выше". Метаданные - это данные о данных. Например, здесь можно указать заголовок страницы. Он будет выведен в окне или вкладке браузера:</p>
10
<p>А также информацию о кодировке страницы:</p>
10
<p>А также информацию о кодировке страницы:</p>
11
<p>Всё, что мы делали в предыдущих уроках, помещается внутрь body. Это и есть то, что видно посетителю страницы.</p>
11
<p>Всё, что мы делали в предыдущих уроках, помещается внутрь body. Это и есть то, что видно посетителю страницы.</p>
12
<p>Супер! Мы сделали полноценную страницу. Но, честно говоря, она выглядит... не очень. Пока текста мало - все более-менее нормально, но с увеличением текста и других элементов страница будет выглядеть все более неопрятной.</p>
12
<p>Супер! Мы сделали полноценную страницу. Но, честно говоря, она выглядит... не очень. Пока текста мало - все более-менее нормально, но с увеличением текста и других элементов страница будет выглядеть все более неопрятной.</p>
13
<p>Пора научиться задавать стили содержимому.</p>
13
<p>Пора научиться задавать стили содержимому.</p>