0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<ul><li><a>Что это такое</a></li>
1
<ul><li><a>Что это такое</a></li>
2
<li><a>Для чего и кому необходим</a></li>
2
<li><a>Для чего и кому необходим</a></li>
3
<li><a>Где писать коды</a></li>
3
<li><a>Где писать коды</a></li>
4
<li><a>Что получится сделать на HTML</a></li>
4
<li><a>Что получится сделать на HTML</a></li>
5
<li><a>Преимущества и недостатки</a></li>
5
<li><a>Преимущества и недостатки</a></li>
6
<li><a>Теги HTML - это…</a></li>
6
<li><a>Теги HTML - это…</a></li>
7
<li><a>Основная структура HTML-документа</a></li>
7
<li><a>Основная структура HTML-документа</a></li>
8
</ul><p>Веб-разработка немного отличается от программирования приложений. Особенно языками, которые необходимо учить для формирования веб-страниц и онлайн-приложений. Для веб-разработки используются специализированные инструменты.</p>
8
</ul><p>Веб-разработка немного отличается от программирования приложений. Особенно языками, которые необходимо учить для формирования веб-страниц и онлайн-приложений. Для веб-разработки используются специализированные инструменты.</p>
9
<p>Одним из наиболее известных языков для онлайн-сервисов выступает HTML. Далее предстоит выяснить, что это за язык такой, для каких конкретно целей он используется. Также вниманию будут представлены его ключевые особенности и компоненты.</p>
9
<p>Одним из наиболее известных языков для онлайн-сервисов выступает HTML. Далее предстоит выяснить, что это за язык такой, для каких конкретно целей он используется. Также вниманию будут представлены его ключевые особенности и компоненты.</p>
10
<p>Предложенные сведения ориентированы на широкую публику. Они пригодятся и обычным пользователям, которым интересно писать сайты, и IT-специалистам. Особенно веб-разработчикам, только-только начинающим свою карьеру.</p>
10
<p>Предложенные сведения ориентированы на широкую публику. Они пригодятся и обычным пользователям, которым интересно писать сайты, и IT-специалистам. Особенно веб-разработчикам, только-только начинающим свою карьеру.</p>
11
<h2>Что это такое</h2>
11
<h2>Что это такое</h2>
12
<p>HyperText Markup Language (HTML) - это язык гипертекстовой разметки. Он является стандартизированным средством разработки онлайн-проектов. Позволяет просматривать веб-страницы в браузерах.</p>
12
<p>HyperText Markup Language (HTML) - это язык гипертекстовой разметки. Он является стандартизированным средством разработки онлайн-проектов. Позволяет просматривать веб-страницы в браузерах.</p>
13
<p>Интернет-обозреватели получают HTML-документ от сервера по протоколам HTTP/HTTPS или открывают его с локального диска. После этого осуществляется интерпретация исходного кода в интерфейс, отображаемый на экране устройства.</p>
13
<p>Интернет-обозреватели получают HTML-документ от сервера по протоколам HTTP/HTTPS или открывают его с локального диска. После этого осуществляется интерпретация исходного кода в интерфейс, отображаемый на экране устройства.</p>
14
<p>HTML нужен для того, чтобы отображать в браузере специальным образом отформатированный файл со множеством вложенных компонентов:</p>
14
<p>HTML нужен для того, чтобы отображать в браузере специальным образом отформатированный файл со множеством вложенных компонентов:</p>
15
<ul><li>заголовками;</li>
15
<ul><li>заголовками;</li>
16
<li>списками;</li>
16
<li>списками;</li>
17
<li>абзацами;</li>
17
<li>абзацами;</li>
18
<li>источниками мультимедиа;</li>
18
<li>источниками мультимедиа;</li>
19
<li>гиперссылками;</li>
19
<li>гиперссылками;</li>
20
<li>расположением фото/видео/аудио.</li>
20
<li>расположением фото/видео/аудио.</li>
21
</ul><p>Файлы HTML обычно имеют одноименное расширение или выглядят, как .htm. Это стандартные решения для веб-сайтов, написанных при помощи рассматриваемого языка разметки.</p>
21
</ul><p>Файлы HTML обычно имеют одноименное расширение или выглядят, как .htm. Это стандартные решения для веб-сайтов, написанных при помощи рассматриваемого языка разметки.</p>
22
<p>Гипертекстовая разметка онлайн-страниц появилась в 1989 году. Ее концепцию предложил Тим Бернерс-Ли, специалист из Британии. Изначально язык использовался только для обмена научными данными между инженерами CERN. Именно там работал Тим.</p>
22
<p>Гипертекстовая разметка онлайн-страниц появилась в 1989 году. Ее концепцию предложил Тим Бернерс-Ли, специалист из Британии. Изначально язык использовался только для обмена научными данными между инженерами CERN. Именно там работал Тим.</p>
23
<p>Чуть позже HTML получил более широкое распространение. Оно стало настолько "обширным", что язык стал выступать вместе с URL и HTTP основой Всемирной паутины и веб-разработки.</p>
23
<p>Чуть позже HTML получил более широкое распространение. Оно стало настолько "обширным", что язык стал выступать вместе с URL и HTTP основой Всемирной паутины и веб-разработки.</p>
24
<h2>Для чего и кому необходим</h2>
24
<h2>Для чего и кому необходим</h2>
25
<p>HTML - это основное средство веб-разработки. Им пользуются специалисты по информационной безопасности, дизайнеры и веб-программисты. Остальным IT-работникам, не связанным с Интернетом, этот инструмент вряд ли пригодится.</p>
25
<p>HTML - это основное средство веб-разработки. Им пользуются специалисты по информационной безопасности, дизайнеры и веб-программисты. Остальным IT-работникам, не связанным с Интернетом, этот инструмент вряд ли пригодится.</p>
26
<p>Основное направление HTML - создание сайтов и онлайн-сервисов. Каждый раз, когда пользователь открывает ту или иную веб-страницу, браузер "считывает" HTML-файл с данными о структуре и содержании сервиса.</p>
26
<p>Основное направление HTML - создание сайтов и онлайн-сервисов. Каждый раз, когда пользователь открывает ту или иную веб-страницу, браузер "считывает" HTML-файл с данными о структуре и содержании сервиса.</p>
27
<p>Функциональные возможности гипертекстовой разметки заключается в выстраивании внешней базы онлайн-ресурса, его фундамента. А вот непосредственный запуск сайта сюда не включен. HTML лишь указывает на то, где должны размещаться элементы, какой их базовых визуал, где брать стили и скрипты для имеющихся компонентов проекта.</p>
27
<p>Функциональные возможности гипертекстовой разметки заключается в выстраивании внешней базы онлайн-ресурса, его фундамента. А вот непосредственный запуск сайта сюда не включен. HTML лишь указывает на то, где должны размещаться элементы, какой их базовых визуал, где брать стили и скрипты для имеющихся компонентов проекта.</p>
28
<h2>Где писать коды</h2>
28
<h2>Где писать коды</h2>
29
<p>За что отвечает HTML, понятно. Возникает вопрос о том, где писать исходные коды веб-страниц. Формировать HTML-файлы допустимо в любом текстовом редакторе операционной системы - от "Блокнота" в Windows до Pico в Linux. Можно выбрать тот редактор, который кажется разработчику наиболее приемлемым.</p>
29
<p>За что отвечает HTML, понятно. Возникает вопрос о том, где писать исходные коды веб-страниц. Формировать HTML-файлы допустимо в любом текстовом редакторе операционной системы - от "Блокнота" в Windows до Pico в Linux. Можно выбрать тот редактор, который кажется разработчику наиболее приемлемым.</p>
30
<p>Браузер на устройстве не является обязательным компонентом для разработки на HTML. Он является желательным, ведь с помощью данного программного обеспечения программисты смогут оперативно запускать коды и просматривать получившиеся результаты.</p>
30
<p>Браузер на устройстве не является обязательным компонентом для разработки на HTML. Он является желательным, ведь с помощью данного программного обеспечения программисты смогут оперативно запускать коды и просматривать получившиеся результаты.</p>
31
<p>Просматривать получившиеся документы (страницы) у разработчиков получится даже без подключения к Интернету. Для этого достаточно создать в одной папке несколько HTML-документов и расположить в них гиперссылки для перехода по ним от файла к файлу.</p>
31
<p>Просматривать получившиеся документы (страницы) у разработчиков получится даже без подключения к Интернету. Для этого достаточно создать в одной папке несколько HTML-документов и расположить в них гиперссылки для перехода по ним от файла к файлу.</p>
32
<p>Рассматриваемый язык гипертекста - это своеобразная основа внутренней структуры сайта, его базовый каркас. Нужно принять во внимание тот факт, что HTML - это не язык программирования в прямом понимании соответствующего термина. Он значительно отличается от C++ или Python.</p>
32
<p>Рассматриваемый язык гипертекста - это своеобразная основа внутренней структуры сайта, его базовый каркас. Нужно принять во внимание тот факт, что HTML - это не язык программирования в прямом понимании соответствующего термина. Он значительно отличается от C++ или Python.</p>
33
<p>С помощью гипертекстовой разметки браузер сможет отобразить веб-сайт в том виде, который понятен для человека. Сервис будет отрисовываться при помощи CSS, а логика в него добавляется через JavaScript. Все это значит, что на HTML не получится написать полноценную программу. А вот сайт - запросто.</p>
33
<p>С помощью гипертекстовой разметки браузер сможет отобразить веб-сайт в том виде, который понятен для человека. Сервис будет отрисовываться при помощи CSS, а логика в него добавляется через JavaScript. Все это значит, что на HTML не получится написать полноценную программу. А вот сайт - запросто.</p>
34
<p>Данный инструмент разработки оптимален для начинающих разработчиков. Он достаточно легко осваивается и изучается, а полученные в ходе знакомства с ним навыки помогут развиваться в области разработки программного обеспечения далее.</p>
34
<p>Данный инструмент разработки оптимален для начинающих разработчиков. Он достаточно легко осваивается и изучается, а полученные в ходе знакомства с ним навыки помогут развиваться в области разработки программного обеспечения далее.</p>
35
<p>В HTML-документе можно создавать:</p>
35
<p>В HTML-документе можно создавать:</p>
36
<ul><li>разметки страниц;</li>
36
<ul><li>разметки страниц;</li>
37
<li>абзацы;</li>
37
<li>абзацы;</li>
38
<li>заголовки;</li>
38
<li>заголовки;</li>
39
<li>изображения;</li>
39
<li>изображения;</li>
40
<li>видео;</li>
40
<li>видео;</li>
41
<li>списки;</li>
41
<li>списки;</li>
42
<li>гиперссылки;</li>
42
<li>гиперссылки;</li>
43
<li>формы;</li>
43
<li>формы;</li>
44
<li>таблицы.</li>
44
<li>таблицы.</li>
45
</ul><p>Базовый дизайн онлайн-проекта тоже получится сформировать. В качестве примера стоит привести присваивание цвета и шрифта тексту на странице, а также установку фона блоков ресурса.</p>
45
</ul><p>Базовый дизайн онлайн-проекта тоже получится сформировать. В качестве примера стоит привести присваивание цвета и шрифта тексту на странице, а также установку фона блоков ресурса.</p>
46
<p>Использовать для оформления веб-сайтов только HTML не рекомендуется. Это связано с тем, что результат окажется примитивным, однообразным и несовременным. Лучше всего использовать дополнительно CSS. Вместе с ним портал станет более детализированным и красивым. Это связано с тем, что возможности CSS почти не ограничены в плане формирования визуальной составляющей страницы.</p>
46
<p>Использовать для оформления веб-сайтов только HTML не рекомендуется. Это связано с тем, что результат окажется примитивным, однообразным и несовременным. Лучше всего использовать дополнительно CSS. Вместе с ним портал станет более детализированным и красивым. Это связано с тем, что возможности CSS почти не ограничены в плане формирования визуальной составляющей страницы.</p>
47
<h2>Преимущества и недостатки</h2>
47
<h2>Преимущества и недостатки</h2>
48
<p>Рассматриваемый инструмент для создания сайтов имеет сильные и слабые стороны. Их нужно знать еще до того, как пользователь решит более детально изучать HTML.</p>
48
<p>Рассматриваемый инструмент для создания сайтов имеет сильные и слабые стороны. Их нужно знать еще до того, как пользователь решит более детально изучать HTML.</p>
49
<p>К преимуществам гипертекстовой разметки относят:</p>
49
<p>К преимуществам гипертекстовой разметки относят:</p>
50
<ol><li>Широкое распространение. Почти все сайты написаны с помощью рассматриваемого инструмента. Технология его использования не устарела до сих пор.</li>
50
<ol><li>Широкое распространение. Почти все сайты написаны с помощью рассматриваемого инструмента. Технология его использования не устарела до сих пор.</li>
51
<li>Широкий выбор "среды программирования". Писать исходный код проекта получится буквально в любом текстовом редакторе. Окончательный выбор остается за каждым отдельно взятым разработчиком.</li>
51
<li>Широкий выбор "среды программирования". Писать исходный код проекта получится буквально в любом текстовом редакторе. Окончательный выбор остается за каждым отдельно взятым разработчиком.</li>
52
<li>Простой и понятный синтаксис. Буквально за несколько дней даже новичок сможет выучить основы использования гипертекстовой разметки.</li>
52
<li>Простой и понятный синтаксис. Буквально за несколько дней даже новичок сможет выучить основы использования гипертекстовой разметки.</li>
53
<li>Поддержку стандарта консорциумом Всемирной паутины.</li>
53
<li>Поддержку стандарта консорциумом Всемирной паутины.</li>
54
<li>Совместимость почти со всеми существующими браузерами. Рассматриваемый инструмент можно назвать кроссплатформенным и универсальным.</li>
54
<li>Совместимость почти со всеми существующими браузерами. Рассматриваемый инструмент можно назвать кроссплатформенным и универсальным.</li>
55
<li>Простую интеграцию с базовыми языками разработки. В качестве примера можно привести PHP.</li>
55
<li>Простую интеграцию с базовыми языками разработки. В качестве примера можно привести PHP.</li>
56
</ol><p>Недостатки у изучаемого инструмента тоже есть. К ним можно отнести:</p>
56
</ol><p>Недостатки у изучаемого инструмента тоже есть. К ним можно отнести:</p>
57
<ol><li>Несовместимость с созданием динамических страниц. Для реализации поставленной задачи больше подойдут JavaScript или PHP.</li>
57
<ol><li>Несовместимость с созданием динамических страниц. Для реализации поставленной задачи больше подойдут JavaScript или PHP.</li>
58
<li>Медленную работу новых функций гипертекстовой разметки. Этот недостаток наблюдается только в некоторых браузерах, поэтому с ним сталкивается далеко не каждый.</li>
58
<li>Медленную работу новых функций гипертекстовой разметки. Этот недостаток наблюдается только в некоторых браузерах, поэтому с ним сталкивается далеко не каждый.</li>
59
<li>Необходимость изучения дополнительных языков и инструментов для создания красивых страниц. В качестве примеров стоит привести CSS и JavaScript.</li>
59
<li>Необходимость изучения дополнительных языков и инструментов для создания красивых страниц. В качестве примеров стоит привести CSS и JavaScript.</li>
60
<li>Непредсказуемость. Данный "недочет" характерен преимущественно для старых браузеров. Трудно предсказать, как они отреагируют на новые теги.</li>
60
<li>Непредсказуемость. Данный "недочет" характерен преимущественно для старых браузеров. Трудно предсказать, как они отреагируют на новые теги.</li>
61
</ol><p>Несмотря на свои недостатки, гипертекстовая разметка все равно является широко распространенной в вебе. Она изучается каждым специалистом, заинтересованным в создании собственных сайтов.</p>
61
</ol><p>Несмотря на свои недостатки, гипертекстовая разметка все равно является широко распространенной в вебе. Она изучается каждым специалистом, заинтересованным в создании собственных сайтов.</p>
62
<h2>Теги HTML - это…</h2>
62
<h2>Теги HTML - это…</h2>
63
<p>HTML-файл представляет собой документ с расширением .html или .htm. Он состоит из так называемых тегов - символьных наборов, заключенных в угловые скобки. Символы, написанные в них, - это имена тегов. Они используются для описания разнообразных функций.</p>
63
<p>HTML-файл представляет собой документ с расширением .html или .htm. Он состоит из так называемых тегов - символьных наборов, заключенных в угловые скобки. Символы, написанные в них, - это имена тегов. Они используются для описания разнообразных функций.</p>
64
<p>Тег является составным элементом, который определяет разметку структурных блоков. Он:</p>
64
<p>Тег является составным элементом, который определяет разметку структурных блоков. Он:</p>
65
<ul><li>открывается, указывая на начало своего действия;</li>
65
<ul><li>открывается, указывая на начало своего действия;</li>
66
<li>закрывается, обозначая завершение операции/команды.</li>
66
<li>закрывается, обозначая завершение операции/команды.</li>
67
</ul><p>Закрытый тег помечается слешем перед именем, открытый пишется без него. Такие компоненты формируют оболочку, в которой помещается текст.</p>
67
</ul><p>Закрытый тег помечается слешем перед именем, открытый пишется без него. Такие компоненты формируют оболочку, в которой помещается текст.</p>
68
<p>Внутри тегов могут размещаться атрибуты. Так называются их параметры - дополнительная информация, которая должна быть скрыта из основного текста. Атрибуты указываются только в открывающем теге. Между ними и именем тега должен стоять пробел, а после него - знак равенства. Значения атрибутов заключаются в кавычки.</p>
68
<p>Внутри тегов могут размещаться атрибуты. Так называются их параметры - дополнительная информация, которая должна быть скрыта из основного текста. Атрибуты указываются только в открывающем теге. Между ними и именем тега должен стоять пробел, а после него - знак равенства. Значения атрибутов заключаются в кавычки.</p>
69
<p>С помощью параметров можно значительно расширить базовые возможности тегов, а также обратиться к ним для получения более подробной информации.</p>
69
<p>С помощью параметров можно значительно расширить базовые возможности тегов, а также обратиться к ним для получения более подробной информации.</p>
70
<p>HTML-код может включать в себя одиночные теги. Их не нужно открывать и закрывать. Они пишутся "сами по себе". Раньше такие теги писались с закрывающим слешем перед закрывающей скобкой. Начиная со стандарта HTML5, ситуация изменилась. С тех пор слеш в одиночных тегах не используется.</p>
70
<p>HTML-код может включать в себя одиночные теги. Их не нужно открывать и закрывать. Они пишутся "сами по себе". Раньше такие теги писались с закрывающим слешем перед закрывающей скобкой. Начиная со стандарта HTML5, ситуация изменилась. С тех пор слеш в одиночных тегах не используется.</p>
71
<p>У элементов HTML кроме атрибутов могут быть вложения. Они предназначаются для изменения стиля текста. В качестве примера стоит привести выделение жирным того или иного слова/фразы на странице.</p>
71
<p>У элементов HTML кроме атрибутов могут быть вложения. Они предназначаются для изменения стиля текста. В качестве примера стоит привести выделение жирным того или иного слова/фразы на странице.</p>
72
<h2>Основная структура HTML-документа</h2>
72
<h2>Основная структура HTML-документа</h2>
73
<p>В HTML-коде могут быть самые разные теги. Их очень много. Каждый из них отвечает за свои собственные функциональные возможности.</p>
73
<p>В HTML-коде могут быть самые разные теги. Их очень много. Каждый из них отвечает за свои собственные функциональные возможности.</p>
74
<p>Вот пример типичного HTML-документа. Он поможет лучше понять структуру файла гипертекстовой разметки:</p>
74
<p>Вот пример типичного HTML-документа. Он поможет лучше понять структуру файла гипертекстовой разметки:</p>
75
<p>Здесь:</p>
75
<p>Здесь:</p>
76
<ol><li>!DOCTYPE html - тег, который используется для указания типа документа. Он нужен для того, чтобы браузер мог грамотно интерпретировать имеющийся код. По умолчанию соответствующий тег пишется в самом начале документа.</li>
76
<ol><li>!DOCTYPE html - тег, который используется для указания типа документа. Он нужен для того, чтобы браузер мог грамотно интерпретировать имеющийся код. По умолчанию соответствующий тег пишется в самом начале документа.</li>
77
<li>Html - парный тег, указывающий браузеру на то, с каким HTML-документом предстоит иметь дело. В нем содержатся другие теги.</li>
77
<li>Html - парный тег, указывающий браузеру на то, с каким HTML-документом предстоит иметь дело. В нем содержатся другие теги.</li>
78
<li>Head. Еще один парный тег. Позволяет хранить элементы, которые помогают браузеру в работе с данными. В нем поддерживаются метатеги. Они используются для сохранения данных для браузеров и поисковых систем.</li>
78
<li>Head. Еще один парный тег. Позволяет хранить элементы, которые помогают браузеру в работе с данными. В нем поддерживаются метатеги. Они используются для сохранения данных для браузеров и поисковых систем.</li>
79
<li>Body - парный тег, отвечающий за формирование тела документа. В нем будут размещаться все элементы HTML-кода, которые отображаются пользователю на странице.</li>
79
<li>Body - парный тег, отвечающий за формирование тела документа. В нем будут размещаться все элементы HTML-кода, которые отображаются пользователю на странице.</li>
80
<li>Title/ - парный тег, указывающий на заголовок веб-страницы. Именно он отображается в качестве названия сервиса, а при сохранении закладки - в ее имени.</li>
80
<li>Title/ - парный тег, указывающий на заголовок веб-страницы. Именно он отображается в качестве названия сервиса, а при сохранении закладки - в ее имени.</li>
81
<li>Img. Одиночный тег для размещения изображения. Обычно он пишется вместе с атрибутом src, в котором прописывается путь к картинке. Атрибуты width и height помогают определить ширину/высоту изображения в пикселях.</li>
81
<li>Img. Одиночный тег для размещения изображения. Обычно он пишется вместе с атрибутом src, в котором прописывается путь к картинке. Атрибуты width и height помогают определить ширину/высоту изображения в пикселях.</li>
82
</ol><p>Основную структуру HTML-документа формируют заголовки H1…Hn и абзацы - p. Лучше изучить основы написания программ при помощи гипертекстовой разметки помогут дистанционные компьютерные курсы.</p>
82
</ol><p>Основную структуру HTML-документа формируют заголовки H1…Hn и абзацы - p. Лучше изучить основы написания программ при помощи гипертекстовой разметки помогут дистанционные компьютерные курсы.</p>
83
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>
83
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>
84
84