Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Краткое описание</a></li>

2 <li><a>Структура документа</a><ul><li><a>Doctype</a></li>

3 <li><a>HTML</a></li>

4 <li><a>Head</a></li>

5 <li><a>Meta</a></li>

6 <li><a>Title</a></li>

7 <li><a>Body</a></li>

8 </ul></li>

9 <li><a>Теги и их виды</a><ul><li><a>Атрибуты</a></li>

10 </ul></li>

11 <li><a>Состав элемента страницы</a></li>

12 <li><a>Работа с текстом</a><ul><li><a>Параграфы</a></li>

13 <li><a>Обтекание</a></li>

14 <li><a>Блоки</a></li>

15 <li><a>Заголовки</a></li>

16 <li><a>Теги форматирования</a></li>

17 </ul></li>

18 </ul><p>Сегодня существует множество языков программирования. Некоторые из них применяются для определенных задач, а какие-то являются универсальными.</p>

19 <p>В статье речь зайдет о том, каким языком является HTML. Предстоит рассмотреть его основные понятия простыми словами, а также состав исходного документа и его особенности. Опубликованная информация рассчитана на широкий круг лиц. Она больше подойдет начинающим разработчикам, заинтересованным в веб-программировании.</p>

20 <h2>Краткое описание</h2>

21 <p>HTML (или HyperText Markup Language - "язык гипертекстовой разметки") - это стандартизированный язык программирования. Он представляет собой гипертекстовую разметку, при обработке которой на экране будут отображаться веб-страницы. HTML-документ будет получен браузером от сервера по протоколам HTTP/HTTPS или открыт прямо с локального диска. Далее программное обеспечение интерпретирует код в интерфейс для дальнейшего отображения на устройстве.</p>

22 <p>Соответствующий формат используется для создания:</p>

23 <ul><li>веб-страниц;</li>

24 <li>интернет-магазинов;</li>

25 <li>приложений для смартфонов и планшетов (Android, iOS, WindowsMobile);</li>

26 <li>некоторых десктопных программ.</li>

27 </ul><p>Язык гипертекста хорошо совместим с языком стилей CSS. С его помощью можно придать странице или веб-приложению более интересный и проработанный вид.</p>

28 <h2>Структура документа</h2>

29 <p>Долго задумываться над тем, для чего нужен HTML, не придется. Разработчики уверяют - этот язык активно используется в веб-программировании. Он рекомендован для изучения всеми, кто планирует создавать сайты и интернет-магазины, а также клиент-серверные модели.</p>

30 <p>Основа кода - это HTML-документ. В нем имеются базовые элементы, которые состоят из тегов. Эти теги и служебные данные необходимы браузерам для того, чтобы корректно отображать имеющиеся сведения на экране.</p>

31 <p>В структуру HTML-документа входят следующие элементы:</p>

32 <ul><li>doctype;</li>

33 <li>тег html;</li>

34 <li>head;</li>

35 <li>meta;</li>

36 <li>заголовок страницы (title);</li>

37 <li>тело документа (body).</li>

38 </ul><p>Файл гипертекстовой разметки состоит из тегов. Они бывают нескольких видов и используется для формирования исходного кода HTML. Далее соответствующие компоненты будут изучены более подробно.</p>

39 <h3>Doctype</h3>

40 <p>Первой строкой в любом файле, написанном на HTML, будет doctype html. Этот элемент не относится к тегам. Он не отображается на веб-странице, но понимается браузером.</p>

41 <p>Doctype используется для того, чтобы указать браузеру, какой стандарт языка разметки используется в исходном коде. Сейчас повсеместно используется HTML5. Выше - пример записи соответствующего элемента.</p>

42 <h3>HTML</h3>

43 <p>HTML - парный тег. Это основа документа. Внутри него располагается вся информация о приложении или веб-странице. При помощи соответствующего тега браузер понимает, где начинается контент, обрабатываемый как HTML.</p>

44 <p>Огромное значение здесь имеет атрибут lang. Он используется для указания языка отображения страницы. С помощью данного параметра браузеры смогут корректно отображать специфичные символы, присутствующие в конкретных языках.</p>

45 <p>Примеры сокращений и значений для Lang: английский - en, русский - ru.</p>

46 <h3>Head</h3>

47 <p>Еще один парный тег. Используется для хранения служебных данных. Здесь допускаются самые разные сочетания тегов, демонстрирующие браузерам:</p>

48 <ul><li>название страницы;</li>

49 <li>описание;</li>

50 <li>ключевые слова;</li>

51 <li>иные метаданные.</li>

52 </ul><p>В head рекомендуется указывать сведения, которые помогут в продвижении веб-сайтов. Поисковые системы считывают данный тег и на основе различных алгоритмов определяют место страницы при тех или иных поисковых запросах. Пользователям элементы, написанные в head, не показываются.</p>

53 <h3>Meta</h3>

54 <p>Элемент, который нужен для обозначения метаданных. Он принимает множество разных атрибутов. Сейчас значимость имеет метатег meta с атрибутом charset. Он отвечает за кодировку всего HTML-документа. Каждый символ в ней обладает уникальным кодом, благодаря чему программы, включая браузеры, смогут одинаково отображать один и тот же текст.</p>

55 <p>Универсальной кодировкой, используемой при веб-разработке, является UTF-8. Именно ее рекомендуется указывать в качестве значения атрибута charset. Выше - наглядный пример написания тега.</p>

56 <h3>Title</h3>

57 <p>Парный тег title используется для того, чтобы указывать заголовки страницы. Внутри конструкции прописывается вся необходимая информация.</p>

58 <p>Выше - наглядный пример реализации в HTML-документе.</p>

59 <h3>Body</h3>

60 <p>Тело задается при помощи еще одного парного тега - body. В нем размещается основная информация, выводимая на странице.</p>

61 <p>Браузер будет обрабатывать все, что написано в body для дальнейшего отображения на сайте. Другого предназначения этот элемент не имеет.</p>

62 <h2>Теги и их виды</h2>

63 <p>Структура HTML-страницы уже понятна. Она базируется на тегах. Это простейшие компоненты, которые формируют элементы кода. Каждый тег начинается с символа "<" и заканчивается ">". Все теги делятся на два вида - одиночные и парные.</p>

64 <p>Парный тег включает в себя:</p>

65 <ul><li>открывающий тег (< >);</li>

66 <li>закрывающий тег (</ >).</li>

67 </ul><p>Если у закрывающего тега не поставить символ "/", он не будет обработан системой должным образом. Вот пример кода с парным тегом:</p>

68 <p>Здесь определяется элемент div. Он имеет открывающий тег < div > и закрывающий тег < / div >. Между ними располагается содержимое указанного компонента. В приведенном примере им выступает простой текст.</p>

69 <p>Парные теги нужны для оформления некоторого участка текста HTML-страницы. С их помощью задается начало и конец "фрагмента".</p>

70 <h3>Атрибуты</h3>

71 <p>Каждый компонент HTML-страницы внутри открывающего tag может обладать атрибутами. Это дополнительная полезная информация для браузера.</p>

72 <p>Здесь определяется элемент div. Он поддерживает атрибут style. После знака равенства в кавычках указывается значение используемого параметра. В приведенном примере "color : red" указывает на то, что цвет текста будет красным.</p>

73 <p>Атрибуты могут быть:</p>

74 <ol><li>Глобальными (или общими). Они задаются для всех элементов HTML-страницы.</li>

75 <li>Специфическими. Применяются к определенным элементам страницы.</li>

76 </ol><p>Ниже можно увидеть пример специфического атрибута:</p>

77 <p>Элемент HTML input включает всего один tag, но имеет два атрибута:</p>

78 <ul><li>type - указывающий на тип элемента;</li>

79 <li>value - определяющий текст кнопки.</li>

80 </ul><p>Помимо обычных атрибутов HTML язык поддерживает булевые (логические) параметры. Они не могут иметь никаких значений. Пример - у кнопки задается характеристика disabled:</p>

81 <p>С ее помощью разработчики указывают, что элемент отключен на HTML-странице. Программисты могут сами определять разнообразные атрибуты при помощи префикса "data-".</p>

82 <h2>Состав элемента страницы</h2>

83 <p>HTML - язык, который достаточно легко освоить. Со структурой его исходного документа уже удалось ознакомиться. Теперь можно обратить внимание на состав компонентов кода.</p>

84 <p>Весь HTML-код состоит из соответствующих составляющих, а они включают в себя несколько частей:</p>

85 <ol><li>Открывающий тег (opening tag). Включает в себя имя компонента, заключенного в угловые скобки. Указывает на начало действия.</li>

86 <li>Закрывающий тег (closing tag). То же самое, что и предыдущий компонент, но в своем составе имеет "/" внутри угловых скобок. Используется для указания конца элемента в HTML файле.</li>

87 <li>Контент (Content). В приведенном ниже примере - это просто текст.</li>

88 </ol><p>Элементы HTML могут быть вложенными. В этом случае необходимо тщательно следить за opening и closing tags.</p>

89 <h2>Работа с текстом</h2>

90 <p>Основные понятия HTML уже изучены. Теперь можно больше внимания уделить особенностям отображения текста на веб-странице. Для группировки и других операций используются специальные tags.</p>

91 <h3>Параграфы</h3>

92 <p>Параграф задается при помощи p (парный tag). Внутри этого HTML компонента указывается то или иное содержимое. Каждый новый параграф должен быть написан на новой строчке.</p>

93 <p>Для переноса текста на другую строчку в рамках одного и того же параграфа в языке HTML используется br. Выравнивание текста осуществляется через атрибут align. Он определяет способ выравнивания:</p>

94 <ul><li>left - по левому краю (устанавливается по умолчанию);</li>

95 <li>right - по правому краю;</li>

96 <li>center - по центру;</li>

97 <li>justify - по ширине.</li>

98 </ul><p>Последний вариант работает только для текста, длина которого в HTML составляет более одной строки. Для вывода предварительно отформатированного текста в HTML-документе используется компонент pre.</p>

99 <h3>Обтекание</h3>

100 <p>Span обтекает текст по всей длине. Используется для стилизации заключенного в него текстового содержимого. Не умеет переносить данные на следующую строку.</p>

101 <h3>Блоки</h3>

102 <p>Div используется в HTML-коде для структуризации контента на веб-сайте. Содержимое будет заключаться в отдельные "смысловые блоки", который по умолчанию растягивается по всей ширине браузера.</p>

103 <p>Элемент, идущий после div, будет перенесен на новую строчку.</p>

104 <h3>Заголовки</h3>

105 <p>В HTML-языке компоненты h1. H2, h3, h4, h5, h6 используются для создания заголовков различного уровня. Они выделяют шрифт жирным по умолчанию. Имеют определенный размер.</p>

106 <p>У заголовков первого уровня он самый большой, у h6 - самый маленький. При определении этих компонентов нужно учитывать, что на странице должен быть всего один h1. Он является главным для всего сайта.</p>

107 <h3>Теги форматирования</h3>

108 <p>HTML является продвинутым средством веб-разработки. У него есть составляющие, которые используются для форматирования текста:</p>

109 <ul><li>b - выделение жирным;</li>

110 <li>del - зачеркивание текста;</li>

111 <li>i - выделение курсивом;</li>

112 <li>em - выделение курсивом логического значения (используется для придания тексту оттенка важности);</li>

113 <li>s - зачеркивание;</li>

114 <li>small - уменьшение текста;</li>

115 <li>strong - выделение жирным логического значения;</li>

116 <li>sub - размещение под строкой;</li>

117 <li>u - подчеркивание;</li>

118 <li>sup - помещение текстовых данных над строкой;</li>

119 <li>ins - определение вставленного или добавленного текста;</li>

120 <li>mark - выделение цветом.</li>

121 </ul><p>HTML - основа веб-разработки. Его ключевые составляющие и структура были изучены. Лучше разобраться в формате HTML помогут дистанционные компьютерные курсы. На них языку гипертекста научат с нуля в срок до года.</p>

122 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>. В частности, вас может заинтересовать<a>курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS</a></em>.</p>

123