Файл: Языки гипертекстовой разметки (Особенности языка разметки гипертекста HTML).pdf

Введение

В современном мире, невозможно представить себе web-сайт безликим и простым. Каждый стремится придать своей странице как можно больше изюминок. Будь то анимация, красивый шрифт или изящный дизайн. За всем этим стоят языки разметки гипертекстов.

Технология World Wide Web (WWW), в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, раскрывающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде – гипертекстовыми документами. Имея редактор гипертекстов, можно создать любую структуру рабочей среды, включая документацию, файлы, данные, картины, программное обеспечение и т.д., и это не будет новое программное обеспечение, а просто гипертекст. Для описания этих документов используются специальные языки - HTML (англ. вариант Hyper Text Markup Language), XML (Extensible Markup Language), SGML (Standard Generalized Markup Language).

Данные языки зародились в 90-х годах прошлого века. Однако, за прошедшее время успели активно развиться и получить широкое распространение. Интернет стал неотъемлемой частью нашей жизни, а web-разработка и дизайн престижной и востребованной профессией. А языки разметки гипертекста неотъемлемой частью работы web-разработчиков.

Именно поэтому актуальность данной курсовой работы столь высока.

Целью данной работы является изучить языки разметки гипертекста и понять их особенности и отличия.

Задачи:

• Рассмотреть основные сведения о каждом языке;
• Изучить структуру оформления web-страниц посредством каждого из языков;
• Понять в чем состоит принципиальное отличие каждого языка разметки гипертекста.

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

1. Особенности языка разметки гипертекста HTML

1.1. О языке разметки HTML

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):

• язык означает, что он может быть прочитан как человеком, так и компьютером;

• разметка означает, что написанный вами код помечается с помощью ключевых слов;

• гипертекст означает, что он использует HTTP как часть Интернета.

Как и любой язык, HTML поставляется с набором правил. Эти правила относительно простые и сводятся к определению границ, чтобы знать, где что-то начинается и где заканчивается.

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

* на данном сайте, то есть в папке, содержащей все html-файлы, графику, звук, анимацию, видеофильмы, программы;

* вне сайта в других в папках на данном компьютере;

* в системе World Wide Web, то есть на других Web-серверах;

* в Internet на серверах других типов (FTP, Gopher).

Ранние версии HTML (HTML+ в 1994 году и HTML 2.0 в 1995) были разработаны на основе ранних работ Тима Бернерс-Ли с целью создания жизнеспособной системы управления информацией. Однако когда Всемирная паутина завоевала мир, разработчики браузеров, в первую очередь таких, как Mosaic Netscape и Microsoft Internet Explorer, не стали ждать общих стандартов. Они дали людям то, что те хотели, создав множество элементов, улучшающих внешний вид страниц, но индивидуальных для каждого браузера. Это конкурентное противостояние получило название «Войны браузеров». В результате в конце 1990-х стало обычным делом создавать несколько разных версий сайта — по одной для каждого из популярных браузеров.

В 1996 году только что образованный консорциум Всемирной паутины (W3C) задал ориентир и выпустил первую Рекомендацию — HTML 3.2. Это собрание всех HTML-элементов, использовавшихся в то время. В него вошло множество презентационных расширений HTML, появившихся в результате соперничества браузеров, а также из-за отсутствия альтернативы в виде таблиц стилей. HTML 4.0 (1998) и HTML 4.01 (редакция с небольшими изменениями, которая заменила предшествующий стандарт в 1999) должны были вернуть HTML в нужное русло, подчеркнув разделение структуры и представления, и повысив доступность информации для пользователей с ограниченными возможностями.

Все задачи представления были переложены на новоиспеченные каскадные таблицы стилей (CSS), получавшие полную поддержку браузеров.

Примерно в то же время, когда разрабатывалась версия HTML 4.01, сотрудники консорциума Всемирной паутины осознали, что один язык разметки с ограниченными возможностями не получится использовать для описания всех видов информации (химических формул, математических уравнений, мультимедийных презентаций, финансовой информации и т. д.), которые можно распространять во Всемирной паутине. Их решение — XML (Расширяемый язык разметки), метаязык для создания языков разметки.

XML — это упрощенный вариант SGML (стандартного обобщенного языка разметки), главного метаязыка, который Тим Бернерс-Ли использовал для создания своего оригинального HTML-приложения. Но сам SGML оказался сложнее, чем требовалось для Всемирной паутины.

В консорциуме W3C предполагали, что Всемирная паутина будет развиваться на основе XML, и множество специализированных языков разметки будут использоваться совместно даже в пределах одного документа. Конечно, чтобы претворить это в жизнь, пришлось бы очень внимательно создавать разметку, строго соблюдая синтаксис XML, чтобы исключить потенциальную путаницу.

Их первым шагом было переписать спецификацию HTML в соответствии с правилами XML, чтобы его можно было использовать вместе с другими XML языками. В результате появился XHTML (Расширяемый HTML). Первая версия, XHTML 1.0, почти идентичная спецификации HTML 4.01, содержит те же элементы и атрибуты, но имеет более жесткие требования относительно того, как должна выполняться разметка.

HTML 4.01 и его более строгий коллега XHTML 1.0 на основе XML, стали краеугольным камнем движения по развитию веб-стандартов.

Но консорциум Всемирной паутины не останавливается на достигнутом. Не забывая идею создания Всемирной паутины на основе XML, он начал работу над XHTML 2.0 — еще более смелой, чем HTML 4.01, попыткой заставить все работать «правильно». Проблема в том, что этот язык оказался несовместим со старыми стандартами и поведением браузеров. Процесс написания и утверждения затянулся на годы.

Без реализации в браузерах создание XHTML 2.0 застопорилось.

В 2014 году был запущен HTML 5.

Самая последняя разработка рабочей группы по HTML в W3C - рабочий проект HTML5.2 (2017 год). Основной ее целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется легкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (web browsers, parsers и т. д.). HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML(особенно JavaScript). HTML 5 — также попытка определить единый язык разметки, который мог бы быть написан как и в HTML, так и в XHTML и был бы синтаксически корректен. Включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.

HTML 5 представляет несколько новых элементов и атрибутов, которые часто используются на современных веб-сайтах. Некоторые из них семантически заменены для общего использования базовых блоков <div> и строковых элементов <span>, например, <nav> (блок навигации по сайту), <footer>(обычно обращение к нижней части страницы или последней строке HTML кода ), или <audio> и <video> вместо <object>. Некоторые элементы, которые можно было использовать в HTML 4.01, были исключены, например, представляемые элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью Cascading Style Sheets (Каскадная таблица стилей). Также в поведении веб снова заострено внимание на важности скриптов DOM(например, Javascript).

Синтаксис HTML 5 больше не базируется на SGML несмотря на подобие его разметки. Однако он был разработан как обратный аналогу, с общим анализом более старых версий HTML. Идет новая вводная строка, которая выглядит так же, как и в SGML в описании типа документа, <!DOCTYPE html> , которая запускает соответствующий стандартам предоставленный метод. С 5 января 2009 года HTML 5 также включает в себя Web Forms 2.0, ранее выделенный спецификацией WHATWG.

В дополнении к определению разметки HTML 5 устанавливает скриптовый Интерфейс прикладного программирования(API). Существующий интерфейс DOM расширен и фактически особенности зарегистрированы.

1.2. Основные составляющие HTML-документа

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

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

Каждый из тегов несёт определённый смысл. Для примера: <р> обозначает абзац текста.

Как правило, они идут парами:

открывающий тег <р> определяет начало абзаца;

закрывающий тег </p> определяет его конец.

Единственным различием между открывающим и закрывающим тегами является слэш /, который предшествует имени тега.

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

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

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

Виды тегов:

одиночные (непарные) теги <tag>. Например тег <br>, который используется для перехода на новую строку

теги-контейнеры <tag></tag>. Например тег <b></b>. После открывающего тега весь текст будет полужирным, пока тег не будет закрыт.

Тег может иметь атрибуты. Атрибуты уточняют действие тега. Атрибут всегда ставится в открывающем теге, т.к. браузер считывает информацию слева направо сверху вниз. Для некоторых тегов применение атрибутов обязательно. Так например тег вставки изображения <img> должен иметь атрибут, в котором будет указан путь к файлу изображения, иначе изображение не будет отображаться на странице <img src="путь_к_изображению">. Некоторые теги могут использоваться вообще без атрибутов.

Теги можно писать как в верхнем <TAG>, так и в нижнем <tag> регистре, для браузера это значения не имеет. Также не имеет значения, писать ли весь текст в одну строку или начинать каждый абзац или предложение с новой строки. Для читабельности кода рекомендуется всегда использовать один регистр (например нижний), начинать каждый новый элемент с новой строки и вставлять в код комментарии.

Пробелы:

пробел ставится обязательно между тегом и атрибутом

пробел недопустим между атрибутом и его значением

в тексте html-документа несколько пробелов воспринимаются как один, для того, чтобы поставить несколько пробелов подряд, надо использовать специальные символы

Диапазон элементов достаточно широк, чтобы он подходил и для материалов общего назначения (например, абзацы или списки) и для более конкретного содержимого, вроде <output> (для отображения результата вычисления) или <progress> (для отображения хода выполнения задачи).

Структурные элементы позволяют организовать основные части страницы. Они обычно содержат другие элементы HTML.

Типичная веб-страница может включать:

<header> в качестве первого элемента страницы, который может включать в себя логотип и слоган;

<nav> в качестве списка ссылок, которые ведут на разные страницы сайта;

<h1> в качестве заголовка страницы;

<article> в качестве основного содержимого страницы, вроде статьи блога;

<footer> в качестве последнего элемента страницы, расположенного внизу.

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

В основном используется:

<p> для абзацев;

<ul> для (неупорядоченных) списков;

<ol> для (упорядоченных) списков;