Принципы гипертекстовой разметки кратко

Обновлено: 04.07.2024

1 Лекция 1. Принципы гипертекстовой разметки. Структура гипертекстовых документов. Идентификаторы UDI. Коды языков. Отображение содержимого WEB-страницы осуществляется на компьютере пользователя с помощью специальной программы - браузера. В настоящее время самым распространённым браузером является Internet Explorer компании Microsoft. Для того, чтобы браузер отобразил содержимое WEB- страницы в том виде, в каком его задумал веб-дизайнер, необходимо браузеру каким-то образом сообщить: как будет выглядеть отображаемая страница. Для этого был придуман специальный язык разметки текста. В упрощённом представлении, для понимания его действия - это набор инструкций, которые предписывают что и в каком виде в данном месте следует отобразить. Пример: Текст заголовка Текст абзаца и так далее. Таким языком разметки стал HTML который в настоящее время является базовым языком для отображения WEB-страниц в современных браузерах. Другими словами, чтобы отобразить в браузере какой-нибудь документ, необходимо его представить в формате HTML. Начало истории HTML восходит к далёкому 1969 году, когда сотрудник компании IBM Чарльз Гольдфарб, создал прототип языка для разметки технической документации, названного в последствии GML, ставшего международным стандартом и переименованным в SGML(Standart Generalized Markup Language). Этот стандарт устанавливал синтаксис записи элементов разметки, а также правила определения новых элементов и указания структурных соотношений между ними. Для практической же разметки необходимо было придумать приложение SGML - набор определений элементов, представляющих собой формальное описание структуры документа. Принципы, на которых строится язык SGML, оказали влияние на многие компьютерные разработки, однако сам язык SGML не получил заметного распространения до тех пор, пока в 1991 году сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык - самое известное из приложений SGML был назван HTML. Язык HTML (HyperText Markup Language) не является языком программирования в том смысле, в каком мы привыкли представлять себе такие языки программирования, как C, C++, Java, Basic и другие. При помощи HTML невозможно написать полноценное приложение, которое бы работало в системе MS-DOS, Windows или какой-либо другой ОС. HTML предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет, а выполнение программ, написанных на HTML происходит непосредственно в браузере. Написать сайт можно, используя простой текстовый редактор, например Блокнот. Достаточно написать простой текст и сохранить его с расширением.html или. htm. У вас получится WEB-страница, которую вы сможете просмотреть в браузере. Но для того, чтобы текст на странице смотрелся красиво, необходимо применить к нему HTMLформатирование. Язык HTML состоит из так называемых тэгов. Все тэги HTML начинаются с " " (правой угловой скобки). Как правило, существует стартовый тэг и

2 завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа: Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг - о завершении текста заголовка. Некоторые тэги, такие, как (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость. В разных операционных системах имеются различные редакторы, которые можно использовать для создания документов HTML. Если вы используете: Microsoft Windows запустите редактор Notepad; Mac OS запустите редактор SimpleText; OSX запустите редактор TextEdit (обязательно измените настройки "Rich Text" или "Расширенный текст" на "Plain text" или "Простой текст" и отметьте пункт "Ignore rich text commands in HTML files" или "Игнорировать команды расширенного текстового формата в файлах HTML"). Файлы HTML можно создавать и в редакторе Microsoft Word, в котором имеется возможность сохранить документ как Web-страницу (в меню "Файл"), однако использовать эту возможность не рекомендуется. Во-первых, потому что HTML-код, генерируемый MS Word не оптимален и содержит множество ненужных элементов разметки, и, во-вторых, автоматическая генерация кода не будет способствовать изучению и правильному пониманию HTML. Имеется также большое количество специализированных редакторов для создания файлов HTML, таких как FrontPage, Macromedia Dreamweaver или Adobe Web Bundle, которые обладают возможностью WYSIWYG (What You See Is What You Get - что видишь, то и получишь). С их помощью можно легко создавать документы HTML, при помощи кнопок и элементов меню, а не писать самому теги разметки. Однако, как уже отмечалось выше, тем, кто хочет стать технически грамотным разработчиком Web, настоятельно рекомендуется использовать простой текстовый редактор для начального изучения HTML.

HTML является описательным языком разметки документов, в нем используются указатели разметки ( теги ). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами , то есть документ НТМL представляет собой не что иное, как обычный АSСII- файл , с добавленными в него управляющими НТМL -кодами ( тегами ). Поскольку HTML произошел от SGML , в нем разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки . Это облегчает взаимодействие с различными операционными системами.

Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL- тег состоит из имени, за которым может следовать необязательный список атрибутов тега . Текст тега заключается в угловые скобки (" "). Простейший вариант тега — имя, заключенное в угловые скобки, например, или . Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега .

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

Эта запись означает следующее: таблица шириной 570 пикселов, выравнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пикселя, ширина бордюра 16 пикселов.

Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL ( Uniform Resource Locator , унифицированный указатель ресурса) других документов в качестве значения атрибута HREF .

Чаще всего элементы разметки HTML или HTML -контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта ( / ) (например, для тега стиля шрифта — курсив закрывающая пара представляет собой , для тега заголовка закрывающей парой будет ). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.

При использовании вложенных элементов разметки в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с последнего. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения , который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (
), горизонтальная линейка ( ) и теги , содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например, теги и .

В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца . Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются.

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

Для краткости и образности мы будем в ряде случаев вместо словосочетания " элемент разметки " применять термин " контейнер ".

Общая схема построения контейнера в формате HTML может быть записана в следующем виде:

Следует отметить, что в литературе кроме термина " контейнер " еще используется и термин "элемент". Следует быть внимательным, чтобы не путать контейнер (например, BODY ) и тег ( BODY ), используемый при формировании контейнера.

Кроме тегов , элементами HTML являются CER ( Character Entity Reference), они предназначены для представления специальных символов в документе HTML , которые могут быть неверно обработаны браузером. Предположим, создается документ HTML , речь в котором идет об элементах данного языка. Если указать имя тега просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используется CER .

Например, чтобы представить символ " HTML , нужно заменить его на < , а символ ">" — на > . То есть, если указать в тексте HTML строку <BODY> , она будет выглядеть на экране как текст .

Группы тегов НТМL

Все теги НТМL по их назначению и области действия можно разделить на следующие основные группы:

определяющие структуру документа;
оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ.

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка — это адрес другого HTML -документа или информационного ресурса Internet , который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.

Естественно, при таких условиях очень важна схема адресации всех имеющихся информационных ресурсов.

Реальный механизм интерпретации идентификатора ресурса, опирающийся на URI ( Uniform Resource Identifier , универсальный идентификатор ресурса), называется URL , и пользователи WWW имеют дело именно с ним.

Типичным примером использования такой записи можно считать следующий пример:

Выглядеть это будет следующим образом:(открыть)

Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие. Контекстные ссылки вмонтированы в тело документа , как это было продемонстрировано в предыдущем примере, в то время как общие ссылки связаны со всем документом в целом и могут использоваться при просмотре любого фрагмента документа. Оба класса ссылок изначально присутствуют в стандарте языка, однако первое время наибольшей популярностью пользовались контекстные ссылки. Эта популярность привела к тому, что механизм использования общих ссылок практически полностью "атрофировался". В данном примере мы заключили URL в двойные кавычки. На самом деле, это необязательно. Кавычки (двойные или одинарные) применяются только тогда, когда внутри значения URL появляются символы-разделители ( пробел , табуляция, неотображаемые символы). Но такого сорта URL следует всячески избегать.

Структура HTML -документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер , который начинается с тега и заканчивается тегом .

В заключение отметим, что при подготовке документов HTML используется идентификатор текста DTD (Document Type Definition , определение типа документа) в качестве первой строки. Это позволяет браузеру идентифицировать документ как соответствующий стандарту HTML . Обычно (но не обязательно) каждый документ HTML начинается со строки типа:

Здесь содержится информация о том, что документ соответствует версии HTML 4.0 ; разработанной W3C ; используемый язык — английский.

Основы HTML в информатике нужно знать всем веб-мастерам, даже тем, кто использует для создания документов визуальные редакторы или конструкторы сайтов. Проверка орфографии в Word не отменяет необходимость знания русского языка. Так и наличие визуальных инструментов для программирования не отменяет необходимости знать их родной язык разметки html. Без начальной базы знаний невозможно написать документ так, как пользователь считает нужным.

Откуда появился HTML

На основе языка разметки документов SGML в начале 90-х г. Тимом Бернерсом-Ли был создан язык разметки гипертекста HTML. Однако он так и остался бы теорией, но М. Андриссен и группа студентов Иллинойского университета разработали первый браузер — Mosaic и запустили его бесплатное распространение. Во Всемирной паутине браузер демонстрировал гипертекстовые странички. С этого момента началось развитие веб-страниц и веб-серверов.

Благодаря своим достоинствам язык html стал использоваться повсеместно, что требовало создание стандартов для его использования, иначе в дальнейшем возникло бы разночтение. Консорциум W3C создал и принял первую спецификацию hypertext markup language. Со временем в язык вносились изменения и возникали следующие спецификации. Сейчас во всём мире принято использовать HTML5.

Что такое веб-документ

Язык html — специально стандартизированный, служащий для разметки документов в интернете.

В обычном понимании это просто текстовый файл. Он содержит в себе набор команд стандартной гипертекстовой разметки, назначение которых — указать браузерам, как правильно отображать содержимое. Примечательно, что для использования документа в интернете, текста собственно может и не быть, а вот структура должна присутствовать обязательно.

Гипертекстовые файлы имеют 2 расширения — .htm или. html, работать с ними можно в обычном блокноте Windows. Но гораздо удобнее использовать специально предназначенные инструменты. Веб-редакторы, которыми можно оформить содержание страницы, бывают:

Визуальные (принцип WYSIWYG) — WebProject, WYSIWYG Web Builder и т. п.
Не визуальные (только чистый код) — Notepad, Free HTML Editor и пр.
Комбинированные — Adobe Dreamweaver, FrontPage, Word и др.

В каких редакторах лучше работать, зависит от личных предпочтений и навыков владения инструментами веб-дизайнера.

Базовые элементы и команды языка html называются тегами (tag). Они являются регистронезависимыми и всегда находится в угловых скобках.

Структура тега выглядит так: . Параметры также называют атрибутами. Пример: .

Теги делятся на 2 большие группы:

Одиночные (например, ,
).
Контейнерные или парные.(

Формирование структуры

Любая страница, которую пользователи видят в браузере, имеет чёткую структуру — синтез html-элементов и текста.

Заголовок и тело страницы записываются в парный тег , который сообщает браузеру, какое расширение ему нужно обработать. Согласно стандартам W3C, первым должен стоять тег . Он описывает тип документа — DTD и даёт браузеру команду как следует обрабатывать текущую страницу, так как не только есть разные версии HTML, но есть и другие технологии, например, XHTML, XML.

Полностью веб-документ будет иметь следующую структуру:

Язык HTML лежит в основе каждого сайта в сети Интернет. Все, что происходит внутри вашего браузера, также завязано на этот язык гипертекстовой разметки, начиная от структуры страниц и заканчивая внешним видом тех или иных материалов.

Научившись работать с HTML, вы получите массу возможностей: создавать свои собственные сайты и редактировать чужие, определять внешний вид публикуемых материалов, даже обходить некоторые блокировки доступа к закрытому контенту. В общем, грех такими возможностями не воспользоваться. А еще такие услуги высоко оплачиваются.

Особенности языка HTML

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

завернут любой абзац на каждой открываемой вами странице, а в теги … — каждая ссылка, по которой вы когда-либо переходили.

Особенности языка HTML

Говоря простыми словами, это инструмент, предназначенный для разметки гипертекста. Благодаря языку HTML-страницы и приложения в интернете имеют упорядоченный вид с четким расположением заголовков, разделов, параграфов и ссылок. Стоит понимать, что HTML — это не язык программирования, и для создания динамических функций он не предназначен. Его функция – структурировать документы по аналогии с Microsoft Word.

История развития HTML

Интернет-язык HTML был придуман сотрудником швейцарского исследовательского института ЦЕРН физиком Тимом Бернерсом-Ли. Именно ему пришла в голову идея создания в интернете гипертекстовой системы. Под гипертекстом (Hypertext) понимается текст, в котором есть ссылки на другие тексты и возможность мгновенно их открывать. Основа языка HTML – 18 тегов, из которых и состояла его первая версия, опубликованная в 1991 году.

Ваш Путь в IT начинается здесь

Подробнее

С апреля 1994 года разработку стандартной спецификации HTML следующей версии начал специально образованный для этого Консорциум W3C (World Wide Web Consortium). Во избежание путаницы это новую версию обозначили номером 2.0 (предыдущая, по сути, была HTML1.0, но официально ее не существовало). В сентябре 1995 года язык HTML 2.0 утвердили к использованию. В принципе крупным дополнением стал лишь механизм форм, с помощью которого данные с пользовательского компьютера пересылались на сервер.

Параллельно Консорциум W3 уже начал обсуждать подготовку третей версии языка (HTML 3.0), предложенную в марте 1995 г. Планировалось расширить ее возможности, добавить поддержку таблиц, обрамление картинок текстом, воссоздание сложных формул, внесение примечаний. Действующие на том момент браузеры не в состоянии были поддерживать все эти новые элементы языка HTML.

Утверждение четвертой версии состоялось 18 декабря 1997 года. Многие функции в ней опять же поддерживались далеко не всеми браузерами (как это было и с третей версией). Хотя значительная часть элементов, бывших в предыдущих вариантах, из HTML 4.0 была убрана. Какие-то из них разработчики отметили, как устаревшие, и рекомендовали заменять их таблицами стилей CSS.

24 декабря 1999 года Консорциум W3 принял к использованию HTML 4.01, в который, кстати, были внесены довольно серьезные изменения (хотя поначалу они такими не кажутся).

К современным версиям добавлялись теги для оформления графики и мультимедиа, что делало HTML зависимым от платформы. В декабре 2012 года закончилась разработка пятой версии языка, последний релиз которой – HTML 5.3, актуальный по сей день и поддерживаемый большинством браузеров.

Новые варианты языка отличались в основном появлением дополнительных функций, таких как, к примеру, ввод разных типов данных (дата, время, домен сайта, электронная почта). Плюс появлялась возможность с помощью языка HTML добавлять на страницы сайта звук, видеофайлы. А с применением скрипта JavaScript еще и изображать рисунки.

В опубликованном Mozilla Developer Network Справочнике HTML Element Reference перечислено 140 тегов HTML. Впрочем, часть из них современными браузерами не поддерживается и считается устаревшей. На сегодняшний день язык HTML – это официально принятый веб-стандарт, и его популярность постоянно растет. Разработкой и поддержкой спецификаций HTML занимается консорциум World Wide Web (W3C), на сайте которого всегда можно посмотреть, что собой представляет язык на текущий момент времени.

Принципы работы HTML

По сути, HTML-документ – это файл с расширением .html или .htm. на конце, доступный для просмотра через любой браузер, к примеру, через Google Chrome, Safari, Mozilla Firefox и т.п. Браузер визуализирует считанный HTML-файл в формате, удобном для просмотра пользователями.

Читайте также: