Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Определение</a></li>

2 <li><a>Основной состав HTML-документа</a></li>

3 <li><a>Элементы форматирования текста</a></li>

4 <li><a>Встраивание компонентов</a></li>

5 <li><a>Таблицы и формы</a></li>

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

7 <p>Основным элементом в HTML выступают теги. Сегодня предстоит изучить их получше. Нужно не только выяснить, что собой представляет тег, но и рассмотреть ключевые особенности данного компонента. А еще требуется ознакомиться с базовыми тегами.</p>

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

9 <h2>Определение</h2>

10 <p>HTML-документ - текстовый файл, который сохраняется на устройстве с расширением .html или /htm. Он считывается браузером и преобразовывается в сайт или онлайн-сервис. Состоит из так называемого набора тегов.</p>

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

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

13 <p>Тег - составной элемент, отвечающий за определение разметки структурных блоков. Он может быть:</p>

14 <ul><li>пустым - не содержащим в себе ничего;</li>

15 <li>открывающим - используемым для обозначения начала элемента;</li>

16 <li>закрывающим - для обозначения конца элемента;</li>

17 <li>парным;</li>

18 <li>одиночным.</li>

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

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

21 <p>HTML-тег - это ключевой элемент рассматриваемого языка гипертекста. Без него не получится написать ни одну страницу.</p>

22 <p>Теги бывают разными. Они отвечают за формирование структуры HTML-файла. В качестве ключевых компонентов для этого используются:</p>

23 <ol><li><!Doctype html> - используется для указания типа документа. Это связано с тем, что браузер может интерпретировать разные HTML-версии различными способами. По умолчанию соответствующий элемент включается в самое начало исходного кода. Он является одиночным.</li>

24 <li><!…> - тег, используемый для добавления комментариев. Относится к одиночным элементам. Все, что написано внутри него, не интерпретируется браузером. Обычно такой элемент в исходном коде помогает сделать проект более читаемым и понятным для сторонних разработчиков.</li>

25 <li><html> </html> - Используется, чтобы сообщить браузеру, с каким HTML-документом планируется дальнейшая работа. Данный тег включает в себя все остальные теги проекта.</li>

26 <li><head> </head> - Рассматривается в качестве контейнера, в котором размещаются метаданные документа, не видимые пользователями, но считываемые роботами и поисковыми системами. В качестве примера можно привести теги HTML: title и style. Позволяет хранить в исходном файле другие элементы.</li>

27 <li><body> </body> - тело документа. В нем будут размещаться все элементы, которые видны пользователям. Все, что указывается внутри соответствующего контейнера, отображается в исходном проекте. Данный тег имеет несколько атрибутов, которые позволяют управлять цветами. О них будет рассказано позже.</li>

28 <li><title> </title> - заголовок веб-сервиса. Именно он грузится браузером в качестве названия. При сохранении ресурса в избранное, соответствующий заголовок будет использовать задействованную фразу в качестве описания закладки.</li>

29 <li><header> </header> - тег HTML, который определяет содержимое блока с вводной информацией сайта или группой ссылок.</li>

30 </ol><p>Все это - основные компоненты HTML-документа. Данная структура позволяет размещать в своем онлайн-проекте другие элементы и теги. С ними предстоит познакомиться далее.</p>

31 <h2>Элементы форматирования текста</h2>

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

33 <p>В качестве HTML-тегов форматирования текста можно выделить следующие составляющие:</p>

34 <ol><li><body bgcolor=?> - используется для задания цвета фона документа. Предусматривает работу с RGB-палитрой.</li>

35 <li><body text=?> - используется для указания цвета текста, который будет напечатан на странице.</li>

36 <li><body vlink=?> - используется для указания цвета гиперссылок, по которым пользователь уже переходил. Данный элемент позволяет понять, какие страницы уже были просмотрены клиентом ранее.</li>

37 <li><body link=?> - цвет обозначения гиперссылок. Подразумевается начальная гамма, используемая для демонстрации элемента на странице.</li>

38 <li><body alink=?> - используется для обозначения цвета гиперссылок при нажатии.</li>

39 <li><h1> </h1> - основной заголовок. На странице обычно такой элемент используется всего лишь один раз.</li>

40 <li><h2> </h2> - заголовок второго уровня. Рассматривается в качестве подзаголовка в тексте. Напоминает обозначение упомянутого элемента в MS Word или любом другом текстовом редакторе.</li>

41 <li><h3…h6> </h3…h6> - заголовки 3-6 уровней. Используются в качестве подразделов в заголовках. Такие элементы могут вовсе отсутствовать в исходном документе.</li>

42 <li><b> </b> - выделение жирным. То, что написано с этим тегом, будет отображаться жирным. Соответствующий элемент позволяет придать важности выделенному фрагменту текста.</li>

43 <li><strong> </strong> - полужирное выделение.</li>

44 <li><i> </i> - выделение текста курсивом. Важность в этом случае написанному тексту не придается.</li>

45 <li><del> </del> - элемент для зачеркивания текста. При использовании данного компонента перечеркнутая запись помечается удаленной.</li>

46 <li><s> </s> - отображение ранее перечеркнутого текста.</li>

47 <li><ins> </ins> - используется для перечеркивания текста. При его использовании визуально выделяются внесенные ранее корректировки.</li>

48 <li><u> - используется для подчеркивания буквы/слова/фразы. Курсив и другие способы выделения в этом случае не задействуется.</li>

49 <li><em> </em> - тег HTML, используемый для выделения акцентов. Данный элемент позволяет выделять текстовые фрагменты курсивом.</li>

50 <li><p> </p> - тег, используемый разработчиками для обозначения абзаца. Позволяет делить текст по смыслу на разнообразные блоки.</li>

51 <li><br> - перенос текста на другую строку. При применении соответствующего элемента система просто переносит данные. Новый абзац не начинается.</li>

52 <li><q> </q> - тег, используемый для оформления цитат. Позволяет вставлять в текст краткие цитаты.</li>

53 <li><dl> </dl> - тег, который используется системой для формирования терминов и их определений.</li>

54 <li><cite> </cite> - оформление цитат.</li>

55 <li><sup> </sup> - тег, который позволяет задать тип начертания символов. В соответствующем случае элементы текста будут написаны надстрочным типом.</li>

56 <li><sub> </sub> - подстрочное начертание символов на экране.</li>

57 <li><small> </small> - тег, дающий возможность отобразить тот или иной текстовый фрагмент с меньшим кеглем шрифта, чем у всего остального текста на экране.</li>

58 <li><tt> </tt> - тег, используемый на практике не слишком часто. Этот элемент позволяет имитировать текст, написанный на печатной машинке.</li>

59 <li><mark> </mark> - элемент верстки, используемый для выделения текста. Он дает возможность использовать "желтый маркер" в качестве выделения. Это своеобразный способ определения значимых компонентов в исходном тексте.</li>

60 <li><address> - не самый распространенный на практике тег, но он может пригодиться в отдельных ситуациях. Позволяет добавить на страницу контакты и подписи автора. При открытии в веб-браузере этот элемент будет выделен курсивом.</li>

61 <li><blockquote> </blockquote> - оформление отступов с обеих сторон. Используется для оформления цитат или врезок.</li>

62 <li><dt> - одиночный тег. Применяется для внедрения нового термина.</li>

63 <li><dd> - еще один одиночный тег. Применяется для добавления определения термина.</li>

64 <li><dfn> - выделение термина курсивом. Текст, который пишется после, должен в полной мере раскрыть используемое понятие.</li>

65 <li><abbr> - одиночный тег, используемый для ссылки на то, что написанный текст представляет собой акроним или аббревиатуру. Чтобы добавить появление, нужно использовать атрибут title.</li>

66 <li><a> </a> - гиперссылка в тексте. Предусматривает в своем составе обязательный атрибут - href. В нем прописывается "якорь" или ссылка. Внутри данного контейнера публикуется текст, при нажатии на который осуществляется переход на другую страницу.</li>

67 <li><code> </code> - выделение фрагмента текста с помощью шрифта monospace.</li>

68 <li><ol> </ol> - нумерованный список.</li>

69 <li><ul> </ul> - маркированный список.</li>

70 <li><li> - отметка каждого элемента списка.</li>

71 </ol><p>Все это - только малая часть элементов, используемых в HTML. Они задействуются для работы с текстовыми данными. Также есть отдельные компоненты кода, позволяющие иметь дело с различными объектами и их встраиванием в исходный код.</p>

72 <h2>Встраивание компонентов</h2>

73 <p>Одних текстовых данных бывает недостаточно для создания проекта на HTML. В этом случае обычно требуется вставлять интерактивные компоненты и мультимедиа. Для реализации подобной затеи можно использовать такие команды как:</p>

74 <ol><li><img> </img> - позволяет разместить на странице то или иное изображение. Обычно используется вместе с атрибутом src. С помощью него задается путь к используемой картинке. При помощи атрибутов width и height предлагается определить ширину и высоту изображения. Параметры задаются в пикселях.</li>

75 <li><img src="name" align=?> - выравнивание по одной из сторон документа. Для перемещения картинки в правый угол используется значение right, в левый - left.</li>

76 <li><img src="name" border=?> - настройка толщины рамки вокруг картинки. Параметр задается в пикселях.</li>

77 <li><picture> </picture> - блок, который позволяет расположить img без source, позволяющий браузеру самостоятельно выбрать подходящее изображение.</li>

78 <li><audio> </audio> - вставка аудио на страницу.</li>

79 <li><video> </video> - размещение видеороликов. Работать можно с форматами WebM, MP4, Ogg.</li>

80 <li><source> </source> - используется для указания местоположения файла для видео, аудио или картинки.</li>

81 <li><track> - применяется для формирования субтитров. Встречается вместе с audio или video.</li>

82 <li><object> </object> - элемент, с помощью которого на сервис встраиваются мультимедийные документы. Чтобы передать тот или иной параметр, нужно задействовать param.</li>

83 <li><hr> - используется для размещения горизонтальной линии. Можно при помощи разных атрибутов задавать высоту (size), ширину (width), цвет (color) компонента. Также предлагается убрать тень за счет параметра noshade.</li>

84 <li><script> </script> - используется для выполнения сценария на клиентской стороне. Может включать в себя сам скрипт или ссылку на внешние источники.</li>

85 <li><noscript> </noscript> - ограничение фрагмента документа. Указывает, где задействованный ранее скрипт не будет работать.</li>

86 </ol><p>Также есть компоненты, которые задействуются при работе с таблицами и формами.</p>

87 <h2>Таблицы и формы</h2>

88 <p>Для лучшего понимания работы с HTML-тегами, рекомендуется запомнить следующие компоненты:</p>

89 <ol><li><form> </form> - создание форм. С помощью HTML получится описать только внешний вид. Для выполнения функций придется запускать скрипты на серверной части модели.</li>

90 <li><button> </button> - интерактивная кнопка. Внутри нее разрешено размещать не только текстовые данные, но и изображения.</li>

91 <li><input> </input> - поле добавления пользовательских данных.</li>

92 <li><output> </output> - результаты расчетов, проведенных по заданному скрипту.</li>

93 <li><label> - оформление пометки для поля, созданного через input.</li>

94 <li><textarea> </textarea> - создание больших полей для ввода текстовой информации.</li>

95 <li><table> </table> - размещение таблицы. Все остальные теги этого компонента размещаются внутри.</li>

96 <li><thead> <thead> - табличный заголовок.</li>

97 <li><tbody> </tbody> - тело таблицы.</li>

98 <li><td> </td> - формирование одной ячейки.</li>

99 <li><th> </th> - создание заголовка ячейки.</li>

100 <li><tr> </tr> - формирование одной строки.</li>

101 </ol><p>Основные компоненты для работы с HTML были изучены. Лучше понять этот язык и научиться писать на нем помогут дистанционные компьютерные курсы.</p>

102 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>

103