Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>20 фев 2024</li>

3 <li>0</li>

4 </ul><h2>Гипертекст: что это такое и как он связан с интернетом</h2>

5 Как устроена основа Всемирной паутины и вики-систем.

6 Иллюстрация: Оля Ежак для Skillbox Media

7 Филолог и технарь, пишет об IT так, что поймут даже новички. Коммерческий редактор, автор технических статей для vc.ru и "Хабра".

8 Всемирную паутину невозможно представить без гипертекста. Сегодня два этих понятия неотделимы, но гипертекстовые технологии используются не только в вебе.

9 Содержание

10 <ul><li><a>Краткий экскурс в историю термина</a></li>

11 <li><a>Что такое гипертекст и для чего он нужен</a></li>

12 <li><a>Из чего он состоит</a></li>

13 <li><a>Как гипертекст работает</a></li>

14 </ul>Автор термина "гипертекст" -<a>Теодор Нельсон</a>, американский философ, социолог и создатель<a>гипертекстовой системы Xanadu</a>, идейного конкурента Всемирной паутины. Данный термин он впервые использовал в своём докладе на американской национальной конференции Ассоциации вычислительной техники летом 1965 года.

15 Теодор НельсонФото: Thrive GlobalНельсон описал гипертекст как совокупность текстовых и изобразительных материалов, которые связаны между собой сложным образом. Они могут содержать аннотации, цитаты, дополнения, сноски, уточнения и многое другое. Это не просто текст, но нечто большее - гипертекст.

16 В 1967 году Нельсон, Андриес ван Дам и несколько студентов Брауновского университета завершили работу над научно-исследовательским проектом<a>Hypertext Editing System (HES)</a>("Система редактирования гипертекста"). Созданная программа работала на мейнфрейме IBM System/360 Model 50 с подключённым дисплеем IBM 2250, на который выводился текст.

17 Оператор мог создавать в тексте метки - ссылки в документе - и присваивать им имена, по которым можно было вернуться к ранее редактировавшемуся месту. Выбор метки происходил при помощи светочувствительного пера, которое прикладывали к экрану.

18 Экран IBM 2250 со светочувствительным перомФото:<a>Gregory Lloyd</a>/ Wikimedia CommonsБлагодаря этому оператор мог быстро отформатировать или подправить текст перед печатью. Можно сказать, что это была первая реализация идеи гипертекста.

19 Но настоящий расцвет гипертекстовой технологии связан с появлением и развитием Всемирной паутины. В 1991 году физик Тим Бернерс-Ли создал первую спецификацию HTML 1.0, а в сентябре 1994 года появился HTML 2.0. Именно он превратил гипертекст в логическую основу веб-страниц.

20 Гипертекст - это способ организации документов, определяющий то, как они выглядят и как они взаимосвязаны друг с другом.

21 Важно!

22 Гипертекст - это концепция организации информации, а не конкретный инструмент.

23 Один из примеров гипертекста - вики-системы. Например, у известного Linux-дистрибутива Arch есть<a>своя энциклопедия</a>, которая постоянно обновляется и переведена на 30 языков.

24 Благодаря гиперссылкам пользователь, заходя в любой раздел, может найти необходимую информацию как по настройке системы, так и по исправлению ошибок.

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

26 Разберём структуру гипертекста на примере HTML-кода. Он представляет собой наборы символов -тегов, которые не видны пользователю. Они объясняют браузеру - программе, в которой открыта страница, - как расположить текст на странице, как должны выглядеть таблицы, списки и какое у них должно быть наполнение. Также теги используют для вставки в документ ссылок на изображения, видео- и аудиофайлы.

27 Например, вот фрагмент HTML-кода, создающий таблицу с четырьмя ячейками, расположенными горизонтально, в одной из которых есть гиперссылка на книгу:

28 <table> <tr> <td>Название</td> <td>Оригинальное название</td> <td> <a href=”https://clck.ru/38uWRP”>Ссылка на книгу</a> </td> <td>Год</td> </tr> </table>Кроме содержания ячеек мы видим теги - <table>, <tr>, <td> и <a>. Всё это и есть гипертекст.

29 Посмотрим на <a>главную страницу сайта Skillbox</a>:

30 Скриншот: Skillbox / Skillbox MediaНа ней есть текст, изображения, плашки с цифрами и разделы, скрытые под кнопкой Все курсы: "Программирование", "Дизайн", "Аналитика" и другие. Все эти элементы находятся в определённых местах, а не смешаны в кучу, потому что их расположение и функциональность заданы языком разметки - HTML.

31 Увидеть HTML-код можно в инструментах разработчика браузера. В Google Chrome для этого нажмите сочетаниеCtrl + Shift + I в Windows илиCommand + Option + Iв macOS. Для других браузеров комбинация клавиш может отличаться.

32 Например, вот так выглядит часть HTML-кода главной страницы Skillbox:

33 HTML-код главной страницы сайтаСкриншот: Skillbox / Skillbox MediaДлинная строка, выделенная синим цветом, - гипертекст, ответственный за пункт меню "Программирование". При нажатии на него активируется тег <a> с атрибутом href=, содержащим гиперссылку /code/, которая открывает страницу с учебными материалами по разработке. И это только одна строка среди сотен других, определяющих внешний вид и действия элементов.

34 Помимо веб-страниц, существуют и другие реализации гипертекстовых документов. Например файлы, созданные в офисных пакетах типа Microsoft Office и Libre Office. Возьмём привычный документ формата .docx, в котором хранится фрагмент известной поэмы, изображение и гиперссылка.

35 Реализация гипертекста в Microsoft WordСкриншот: Microsoft Word / Skillbox MediaНесмотря на кажущуюся простоту, файл с расширением .docx на самом деле является ZIP-архивом. Внутри него лежат изображения, которые пользователь добавил в текст, файлы отвечающие за стили, настройки и так далее. В этом легко убедиться, если открыть документ с помощью архиватора:

36 Скриншот: 7-Zip / Skillbox MediaОсновной каталог архива - word. В нём находится папка media с изображениями и гипертекстовый документ document.xml, содержащий напечатанный пользователем текст, гиперссылки и теги форматирования XML.

37 Документ Word содержит не только текст, но и XML-разметку с гиперссылкамиСкриншот: Vivaldi / Skillbox MediaЭто ещё одна реализация гипертекста, немного отличающаяся от HTML-документов внутренней структурой файлов.

38 Подведём итоги того, что мы узнали сегодня:

39 <ul><li>Гипертекст - это способ организации документов, связанных между собой ссылками. Термин предложен в 1965 году Теодором Нельсоном.</li>

40 <li>Самым популярным примером реализации гипертекста является Всемирная паутина. Каждая веб-страница - это гипертекстовый документ. Все они написаны на языке гипертекстовой разметки HTML.</li>

41 <li>Помимо HTML, существуют и другие реализации гипертекста. Например, XML, Wiki и справка Windows.</li>

42 </ul><a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>