Как можно охарактеризовать взаимосвязь языков sgml html xml

29. Языки гипертекстовой разметки sgml. Xml. Html.

SGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки; произносится [эс-джи-эм-эл]) — метаязык, на котором можно определять язык разметки для документов. SGML — наследник разработанного в 1969 году в IBM языка GML (Generalized Markup Language), который не стоит путать с Geography Markup Language, разрабатываемым Open GIS Consortium.

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

Основные части документа SGML:

SGML-декларация — определяет, какие символы и ограничители могут появляться в приложении;

Document Type Definition — определяет синтаксис конструкций разметки. DTD может включать дополнительные определения, такие, как символьные ссылки-мнемоники;

Спецификация семантики, относится к разметке — также даёт ограничения синтаксиса, которые не могут быть выражены внутри DTD;

Содержимое SGML-документа — по крайней мере, должен быть корневой элемент.

SGML предоставляет множество вариантов синтаксической разметки для использования различными приложениями. Изменяя SGML-декларацию, можно даже отказаться от использования угловых скобок, хотя этот синтаксис считается стандартным, так называемым concrete reference syntax.

Пример синтаксиса SGML:

typically something like <ITALICS>this</ITALICS>

SGML стандартизован ISO: «ISO 8879:1986 Information processing—Text and office systems—Standard Generalized Markup Language (SGML)»

HTML и XML произошли от SGML. HTML — это приложение SGML, а XML — это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. Другими приложениями SGML являются SGML Docbook (документирование) и «Z Format» (типография и документирование).

XML — Extensible Markup Language, то есть Расширяемый Язык Разметки, возник в результате развития языка HTML (HyperText Markup Language, языка разметки гипертекста). Однако было бы грубой ошибкой воспринимать его лишь как некую усовершенствованную версию языка HTML. По сути, язык XML представляет собой новое поколение языков разметки. Здесь следует иметь в виду 3 момента, принципиально отличающих XML от HTML и его предшественников (GML — Generalized Markup Language, SGML — Standard General Markup Language):

XML, в отличие от HTML, НЕ ИМЕЕТ ПРЕДОПРЕДЕЛЕННЫХ ТЭГОВ — точнее, каждый разработчик может создавать СВОИ СОБСТВЕННЫЕ XML-тэги — столько, сколько нужно. Количество таких тэгов практически неограничено. Таким образом, XML является метаязыком, позволяющим создавать другие языки разметки, такие как, например, HTML.

По мере развития языка HTML количество тэгов быстро увеличивалось. В конце концов их число достигло «критического значения» — разработчикам web-документов стало трудно запоминать все новые и новые тэги, но еще в худшем положении оказались разработчики браузеров — им приходится создавать все новые версии браузеров, которые «понимали бы» новые тэги. Более «умные» браузеры становятся и большими по объему, предъявляют все возрастающие требования к компьютерам, на которых они используются. Дело усугубляется тем, что в последнее время все большую популярность приобретают карманные устройства (в частности, они все шире используются в электронной коммерции), с ограниченным объемом памяти и «слабенькими» экранами, а потому, браузеры, используемые на них, имеют лишь очень ограниченные возможности. Язык XML, не имеющий определенной заранее системы тэгов, позволяет решить эту проблему. «Платой» за универсальность является большая строгость оформления web-документов. Правила оформления XML-документов просты:

недопустимы незакрытые контейнеры тэгов (но можно объединять открывающий и закрывающий тэги в одном, например: )

«вложенные» контейнеры не могут «перекрываться»

строчные и прописные буквы воспринимаются как разные символы

в качестве названий тэгов нельзя использовать ключевые слова

в названиях тэгов нельзя использовать пробелы, знаки пунктуации, круглые, квадратные и фигурные скобки

знак подчеркивания (_) и цифры могут встречаться в названиях тэгов, но цифра не может быть перым символом названия тэга

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

Документы, отвечающие этим правилам, называются well-formed documents.

XML служит для ОПИСАНИЯ СТРУКТУРЫ ДАННЫХ, главным образом, ИЕРАРХИЧЕСКИХ СТРУКТУР.

Одной из основных тенденций развития web-технологий является РАЗДЕЛЕНИЕ ДАННЫХ, СТРУКТУРЫ ДОКУМЕНТА И ЕГО СТИЛЕВОГО ОФОРМЛЕНИЯ. Как известно, одним из способов обособления данных от структуры документа является динамическое связывание СУБД с web-документами через интерфейс ODBC (Open DataBase Connectivity). Обособление стилей достигается за счет использования каскадных таблиц стилей. XML позволяет описывать нереляционные базы данных. Поскольку тэги могут создаваться разработчиком, их названия обычно характеризуют смысл данных.

XML, как средство описания структуры данных, обеспечивает ОБМЕН ДАННЫМИ между различными приложениями, выступая, таким образом, в качестве своеобразного «клея».

Значение этой «связующей» функции XML трудно переоценить. Благодаря возможности обмена данными между различными приложениями web-технологии «выходят» на качественно новый уровень.

Hypertext Markup Language (HTML) это простая система для создания гипертекстовых документов, которые переносимы с одной платформы на другую. В сущности, HTML документы это SGML документы с общей семантикой, которая подходит для представления информации в большом количестве приложений. HTML может использоваться для представления:

Гипертекстовых новостей, почты, документации и гипермедиа

Результатов запросов к базам данных

Простых документов с встроенными графическими образами

А также, для гипертекстового просмотра существующих массивов информации

Проект World Wide Web (WWW) объединяет разбросанную по миру информацию. Для этого WWW использует Internet HyperText Transfer Protocol (HTTP) — Протокол Передачи Гипертекста, который позволяет ввести соглашения на способы представления данных при взаимодействии клиента и сервера.

Данные передаются в теле сообщения в соответствии с MIME стандартом. HTML это одно из представлений информации в WWW. Предполагается, что HTML соответствует одному из типов MIME, а именно text/html. Дополнительно, HTML это разработка, соответствующая Международному Стандарту ISO 8879 — Standard Generalized Markup Language (SGML), который является системой для определения структурированных типов документов.

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

HTML документы должны начинаться с тэга <HTML>, стоящего в начале файла, и заканчиваться тэгом </HTML>. Между этими тэгами HTML документ организован как ЗАГОЛОВОК (HEAD) и ТЕЛО (BODY) документа, подобно почтовому сообщению. Внутри HEAD части указывается ЗАГОЛОВОК (TITLE) и другая информация о документе в целом. Внутри BODY части с помощью HTML тэгов текст структурируется в параграфы, списки и пр. с возможностью выделения стилем отдельных слов и целых предложений и создания ссылок на части этого и внешние документы. Технически, открывающий и закрывающий тэги для HTML, HEAD и BODY элементов можно не использовать. Тем не менее, делать это не рекомендуется, так как HEAD/BODY структура позволяет приложениям определять особенности документов (например заголовок), не просматривая весь документ целиком.

Структура HTML элементов

В HTML документе тэги определяют начало и конец заголовков, параграфов, списков, подсветку символов и ссылки. Большинство HTML элементов в документе определены как открывающий тэг, который указывает имя элемента и атрибуты, затем указывается тело элемента, за которым следует закрывающий тэг. Символами-ограничителями для открывающего тэга являются ‘<‘ и ‘>’; для закрывающего — ‘</’ и ‘>’. Например:

Некоторые элементы появляются только как открывающий тэг. Например, для создания линии- разделителя используется тэг . Кроме того, закрывающие тэги для некоторых элементов (P, LI, DT, DD) могут быть опущены. Тело элемента это последовательность символов и вложенных элементов. Некоторые элементы, такие как элементы, определяющие ссылки, не могут быть вложенными друг в друга. При этом элементы, определяющие ссылки и выделения символов могут быть помещены внутрь других конструкций.

Конкретный вид отображения документа может изменяться от клиента к клиенту. HTML тэги определяют только общий стиль отображения документа. Что означает, например, что HTML рассматривает заголовок первого уровня только как заголовок первого уровня, но не определяет, что заголовок первого уровня должен отображаться шрифтом Times размера 24 в центре верхней части страницы. Преимущество такого подхода заключается в том, что если пользователь решит изменить заголовок первого уровня на шрифт Helvetica размера 20 выравненный по левому краю, все, что ему надо сделать, это изменить определение заголовка первого уровня в его WWW просмоторщике. Таким образом, конкретное представление документа на экране монитора определяет пользователь конкретного клиента.

Гипертекстовые ссылки в HTML

Основная сила HTML заключается в его способности связывать области текста (а также картинок) с другими документами. Просмотрщики выделяют эти области (обычно цветом и/или подчеркиванием)для того, чтобы указать, что это гипертекстовые ссылки. Anchor это часть текста, которая отмечает начало и/или конец гипертекстовой ссылки. Текст, находящийся между открывающим и закрывающим тэгом является стартовой точкой или местом назначения гипертекстовой ссылки. Атрибуты данного тэга следующие: HREF

Необязательный. Если присутствует атрибут HREF, Anchor это чувствительный текст: стартовая точка для ссылки. Если читатель выбирает этот текст, ему будет представлен другой документ, чей сетевой адрес был указан в значении атрибута HREF. Формат сетевого адреса аналогичен URL. Это позволяет структуре HREF=»#identifier» ссылаться на другой anchor в текущем документе, или в удаленном документе при указании его адреса перед знаком ‘#’.

Необязательный. Если присутствует, позволяет использовать anchor как место назначения ссылки. Значением атрибута является идентификатор anchor’а. В качестве значения идентификатора может быть использована обычная текстовая строка, за исключением того, что внутри одного документа все подобные идентификаторы должны быть уникальны.

Необязательные. Позволяют указывать взаимосвязи между документом из которого была сделана ссылка, и документом, на который была сделана ссылка.

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

Связь между SGML, HTML и XML

Когда вы смотрите на SGML, HTML и XML, вы можете считать это семейной группировкой. SGML, HTML и XML — все языки разметки. Термин «разметка» получает свой корень от редакторов, редактирующих рукописи писателей. Редактор при просмотре контента «пометит» рукопись, чтобы выделить определенные поля. В компьютерных технологиях язык разметки представляет собой набор слов и символов, которые выделяют текст для его определения для веб-документа. Например, при создании интернет-страницы вы хотите иметь возможность создавать отдельные абзацы и размещать буквы жирным шрифтом. Это достигается с помощью языка разметки. Когда вы поймете роли SGML, HTML и XML в дизайне веб-страниц, вы увидите родство, которое эти разные языки имеют друг для друга. Взаимосвязь между SGML, HTML и XML — это семейная связь, которая помогает сделать работу веб-сайтов и динамичным веб-дизайном.

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

Язык разметки гипертекста (HTML) — это ребенок или приложение SGML. Это HTML, который обычно разрабатывает страницу для интернет-браузера. Используя HTML, вы можете вставлять изображения, создавать разделы страниц, устанавливать шрифты и направлять поток страницы. HTML — это язык разметки, который создает форму и внешний вид веб-страницы. Кроме того, используя HTML, вы можете добавлять другие функции на веб-сайт через языки сценариев, такие как JavaScript. HTML — это преобладающий язык, используемый для дизайна сайта.

Расширяемый язык разметки (XML) является кузеном для HTML и племянником SGML. Хотя XML является языком разметки и, следовательно, является частью семейства, он имеет разные функции, кроме HTML. XML является подмножеством SGML, который дает ему права на то, что приложение, такое как HTML, не имеет. XML может определять собственные приложения. Формат описания ресурсов (RDF) — это приложение XML. HTML ограничен дизайном и не имеет подмножеств или приложений. XML — это сокращенная или легкая версия SGML, предназначенная для работы с ограниченной пропускной способностью. XML унаследовал генетические черты от SGML, но создан для создания собственной семьи. Подмножества XML включают XSL и XSLT.

Организация Объединенных Наций: широкополосная связь является основным правом человека

В докладе Совета по правам человека Генеральной Ассамблеи Организации Объединенных Наций говорится о том, что доступ к Интернету является одним из основных прав человека.

VoIP для сотовых телефонов — Дешевая мобильная связь

VoIP для сотовых телефонов - Дешевая мобильная связь

Если вы хотите снизить стоимость мобильных звонков, вот список услуг VoIP, которые позволяют вам сэкономить до 95% на мобильной связи.

Связь между громкостью и усилием усилителя

Децибелы и ватты — два общих термина, используемых для описания аудиооборудования. Узнайте, что такое децибелы и ватты, и как они относятся к стереосистемам.

Языки гипертекстовой разметки ( HTML, XML, XHTML, SGML )

Совершенствование технических возможностей средств вычислительной техники, развитие коммуникационных средств и технологий управления информационными ресурсами в последние годы привели к появлению более крупных информационных систем. Речь идет о масштабах систем не только относительно объема поддерживаемых информационных ресурсов, но и числа их пользователей. Объем информационных ресурсов Web в настоящие время исчисляется многими миллионами страниц.

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

Цель курсовой работы – изучить теоретический материал по тематике курсовой работы и разработать страницу на HTML которая в достаточной мере отобразит суть и возможности языка.

Для достижения поставленной цели были выделены следующие задачи:

проанализировать литературу по теме курсовой работы;
рассмотреть и изучить понятие: «Язык гипертекстовой разметки»;
охарактеризовать языки: HTML, XML, XHTML, SGML;
обозначить новые тенденции в развитии HTML;
рассмотреть и проанализировать спецификации HTML;
разработать страницу на HTML которая в достаточной мере отобразит суть и возможности языка.

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

Первая глава посвящена изучению истории развития, основных понятий.

Вторая глава изучению спецификаций и разметки HTML.

Третья глава посвящена разработке страницы резюме разработчика на языке HTML.

Глава 1

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

Язык гипертекстовой разметки

Язык гипертекстовой разметки – это набор символов или последовательностей, которые добавляются в текст для определения внешнего вида и строения текста. В текстовом документе, при написании которого используется язык разметки, содержится не только сам текст как последовательность слов и знаков препинания, но и дополнительная информация о строении текста, например, списки, заголовки, выделенный текст, интерактивные элементы, ссылки и т.д. [1]

Языки гипертекстовой разметки используются, если необходим вывод форматированного текста, например в типографии (SGML, TeX, PostScript, PDF), пользовательских интерфейсах компьютеров (Microsoft Word, OpenOffice, troff), Всемирной Сети (HTML, XHTML, XML, WML, VML, PGML, SVG, XBRL).

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

The family Anatidae includes ducks, geese, and swans, but not the closely-related screamers.

Программный код разметочных инструкций (теги) заключен в угловые скобки <тег>. Между тегами находится текст документа. Коды h1, p и em описывают позицию текста, его назначение или значение (h1 означает «это заголовок первого уровня», p значит «это параграф», а em означает «это подчеркнутое слово или фраза»).

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

Языки разметки

Первым языком с четким различием между структурой и видом документа был Scribe, созданный Брайаном Рейдом в 1980 году. Scribe был инновационным языком – в нем были введены стили, отделенные от текста документа и управляющие использованием описательных элементов. Scribe повлиял на разработку GML (позже SGML); кроме того от него произошли языки HTML и LaTeX.

В начале 1980х годов был создан SGML, воплотивший идею о том, что разметка должна быть сфокусирована на структуре документа, а внешнее представление документа должно быть прерогативой интерпретатора.

В SGML был точно определен синтаксис для включения разметки в текст. Кроме того отдельно были описаны, какие теги были разрешены и где. Программист получал возможность создавать и использовать любую желаемую разметку, выбирать теги для использования и самостоятельно давать им имена. SGML, таким образом, может считаться метаязыком. От него произошли многие другие языки разметки, например, TEI и DocBook.

SGML был широко распространен, несмотря на то, что он обладал рядом недостатков (он был слишком громоздким, трудным для изучения и слишком гибким).

SGML (англ. Standard Generalized Markup Language ) — метаязык, который дает возможность определять язык разметки документов. SGML был разработан для совместного использования машинно-читаемых документов в больших правительственных и аэрокосмических проектах.

HTML является приложением SGML

HTML (Hyper Text Markup Language) — язык разметки гипертекста. Он был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы (World Wide Web). [2] HTML предназначен для написания гипертекстовых документов, публикуемых во всемирной сети. Документ на HTML может включать в себя стилизованный и форматированный текст, команды включения графических и звуковых файлов, гиперсвязи с различными ресурсами Internet, скрипты на языке JavaScript и VBScript, различные объекты, например Flash-анимацию. [3]

HTML имел много общего с другими языками разметки, основанными на синтаксисе SGML, однако освоить его было гораздо проще даже для тех специалистов, которые прежде никогда с ним не работали. Многие программисты считали HTML одним из основных факторов развития Web, поскольку этот язык был расширяемым и гибким. [4] В настоящее время HTML является одним из самых широко распространенных языков разметки.

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

Документы HTML являются текстовыми файлами, которые кроме самого текста страницы содержат специальные теги (или управляющие элементы) разметки. [6] Теги разметки указывают браузеру, каким образом следует отобразить страницу.

HTML не является языком программирования. Он предназначен для форматирования и структурирования текстового документа определенным образом. [7] Каждому элементу присваиваются определенные параметры, которые интерпретирует браузер, и таким образом текстовый документ принимает желаемый формат. [8] [9] Параметры могут быть заданы как для отдельного элемента, так и для группы или определенного типа элементов (например, таблицы, ячейки, ссылки, текст и т.д.). [10] [11] Также есть возможность присваивать определенные свойства выбранным элементам персонально. [12]

Характеристики элементов указываются с помощью тегов. [13]

XML (расширяемый язык разметки) – это мета-язык разметки, получивший широкое применение в настоящее время. XML более прост, чем SGML; он используется в основном при работе с документами в интернете. Поскольку XML является мета-языком, он позволяет пользователям создавать любые необходимые теги. [14] XML документы имели много общего с SGML документами, что помогало пользователям SGML легко освоить XML.

XML предназначен в основном для не полностью структурированной среды, например для публикаций и документов. Однако пользователи оценили его, поскольку XML обладает гибкостью при достаточной простоте. XML широко используется для передачи данных между программами. XML (англ. eXtensible Markup Language ) — язык разметки, предназначенный для хранения структурированных данных и обмена информацией между программами и включающий общие синтаксические правила. [15]

XHTML

С начала 2000 годов XML получил более широкое распространение, чем SGML, поэтому был предложен термин XHTML (Extensible HyperText Markup Languge — Расширяемый Гипертекстовый Язык Разметки). [16] XHTML-документы оформляются как XML-документы, что позволяет создавать более четкие и точные документы, используя теги HTML.

XHTML (англ. Extensible Hypertext Markup Language) — язык разметки, созданный на базе XML. [17] Он соответствует спецификации SGML и по возможностям сравним с HTML. При работе с XHTML применимы многие технологии, разработанные для XML (например, XSLT и XPath). Анализ XHTML проще и быстрее, чем HTML. Обработка XHTML возможна даже на устройствах с низкой продуктивностью, поскольку синтаксис XML строже, чем SGML.

Одно из отличий XHTML от HTML заключается в том, что все теги должны быть закрытыми. [18] Другие атрибуты в тегах должны быть в кавычках. Кроме того, все теги и имена атрибутов должны быть написаны в нижнем регистре, чтобы восприниматься правильно; HTML, напротив, невосприимчив к регистру.

Подобно HTML, он может быть охарактеризован как «контейнерный язык».

HTML 5.

С развитием технических возможностей более старые языки разметки, такие как XHTML, устарели, поскольку они не имеют штатных ресурсов для многих задач (например, проигрывание аудио и видеороликов, поддержка геолокации, возможность рисовать непосредственно в браузере, и т.д.). В XHTML подобные задачи возможно решить только с помощью сторонних плагинов. [19] [20]

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

HTML5 не является продолжением XHTML или HTML4, несмотря на похожее название, он является отдельным языком разметки. Разработка HTML5 не полностью завершена, однако с ним уже возможно работать в современных браузерах. [21]

HTML5 имеет следующие возможности:

Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для определения маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
Воспроизведение видеороликов.
Воспроизведение аудиофайлов.
Локальное хранилище данных — позволяет сайтам сохранять информацию на компьютере пользователя и обращаться к ней позднее.
Фоновые вычисления — стандартный способ запуска JavaScript в браузере в фоновом режиме.
Оффлайн приложения — страницы, способные работать при отключении Интернета.
Рисование — внутри тега <canvas> с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты или трансформировать объекты.
Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.

Кроме того, в HTML5 добавлены дополнительные теги для разметки документов, исключены устаревшие теги, некоторые другие теги подверглись модификации. [22]

Тег в языках разметки.

Тег — это элемент языка разметки гипертекста. Текст между начальным и конечным тегом размещается и отображается в зависимости от свойств тега. [23]

Теги имеют следующий синтаксис. Чаще всего используются парные теги – открывающий и закрывающий (или начальный и конечный). Иногда возможно использование одиночного тега. Например, тег , обозначающий отступ абзаца, может использоваться как в виде парного, так и в виде одиночного тега. Тег с пустым текстом: <HR></HR> (обозначает разрыв текста без сохранения отступов) может также иметь одиночную форму (<HR/>). [24]

Основные теги и их интерпретация определены организацией W3C.

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

Теги и элементы

Текст, заключенный между открывающим и закрывающим тегами, включая сами теги, называется элементом. Содержание элемента – это тест между тегами, не включая теги. Содержание элемента может включать в себя текст, а также другие элементы.

Атрибуты

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

Таким образом были рассмотрена история создания языков гипертекстовой разметки, основные виды языков (SGML, HTML, XML, XHTML, HTML5) и основные понятия – тег, элемент, атрибут.

Глава 2.

Во второй главе рассмотрена структуреа HTML документа: синтаксис и назначение основных элементов.

Теги верхнего уровня

Каждая веб-страница имеет общую структуру, которая содержит типичные элементы, общие для сайтов различных типов и направленностей. [25] Рассмотрим типичный код веб-страницы:

Разберем отдельные строки кода более подробно.

Тег <html> указывает на начало HTML-файла, внутри которого хранится заголовок (<head>) и тело документа (<body>). Закрывающий тег </html> всегда завершает HTML код.

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

Тег <title> обозначает заголовок веб-страницы (в Windows текст заголовка показывается в левом верхнем углу браузера). [26] Тег <title> дожжен присутствовать в коде в обязательном порядке.

В теле документа <body> размещаются теги и содержательная часть веб-страницы. [27] Закрывающий тег </body> указывает на завершение тела документа.

Комментарии не отображаются в браузере, они служат для записи скрытых заметок, не влияющих на вид веб-страницы. Комментарий начинается тегом <!— и заканчиваются тегом —>, все, что находится между этими тегами, не отображается на странице. Пользователь может прочитать комментарии, открыв исходный код документа.

<!DOCTYPE>

Элемент <!DOCTYPE> указывает тип текущего документа — DTD (document type definition, описание типа документа). [28] Определение типа документа необходимо для того, чтобы браузер понимал, как именно следует интерпретировать данный код, поскольку в зависимости от используемого языка разметки (различные версии HTML, XHTML, и т.д.) документ интерпретируется по-разному, поскольку различные языки имеют различный синтаксис. Таким образом, с помощью <!DOCTYPE> определяется стандарт, согласно которому отображается веб-страница. Ниже <!DOCTYPE> будет рассмотрен более подробно.

Существует несколько типов <!DOCTYPE> , которые отличаются в зависимости от версии языка разметки, на которую они ориентированы. В таблице 1. приведены основные типы документов с их описанием.

DOCTYPE

Описание

HTML 4.01

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Строгий синтаксис HTML.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Переходный синтаксис HTML.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

В HTML-документе применяются фреймы.

HTML 5

В этой версии HTML только один доктайп.

XHTML 1.0

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Строгий синтаксис XHTML.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

Переходный синтаксис XHTML.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>

Документ написан на XHTML и содержит фреймы.

XHTML 1.1

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML наличие тега <title>, обязательно, а в переходном HTML его использование необязательно. Браузер будет показывать документ вне зависимости от того, соответствует ли он синтаксису или не соответствует. Проверка осуществляется валидатором и используется разработчиками для отслеживания ошибок в документе.

Иногда в коде HTML не указан <!DOCTYPE>, в этом случае документ все равно будет отображаться в браузере, однако есть вероятность, что один и тот же документ будет показан различным образом при использовании <!DOCTYPE> или при его отсутствии. Кроме того, подобные документы могут отображаться с ошибками, не так, как задумывал разработчик. Чтобы избежать подобных ситуаций, следует добавлять <!DOCTYPE> в начало документа в обязательном порядке.

Метатеги <meta>

Тег <meta> — универсальный тег. Он добавляет ряд дополнительных возможностей, например, при помощи метатегов можно изменить кодировку страницы, добавить описание документа, ключевые слова. Более подробно тег рассмотрен ниже.

Метатеги выполняют несколько важных функций:

Влияют на то, как отображается и какую позицию занимает страница в индексе (выдаче). [29]
Помогают продвигать ресурс по наиболее соответствующим Вашей целевой аудитории запросам. Позволяют потенциальному посетителю увидеть в поисковой выдаче нужную информацию, делая описание максимально информативным.
Фиксируют данные о странице, помогают правильно отобразить информацию, настроить индексацию (анализ сайта и внесение его в базу для последующего включения в выдачу).

В настоящее время мета теги не оказывают сильного влияния на продвижение, однако они по-прежнему учитываются при оценке поисковыми системами, и предпочтение отдается ресурсу с грамотно сформированными тегами. [30]

Мета теги для SEO (поисковой) оптимизации

К данной категории тегов относятся три тега: title, description, keywords. Данные атрибуты сообщают поисковому роботу информацию о сайте, которая помогает грамотно определить тематику ресурса и ранжировать (сортировать) в выдаче. Потому составляя метатеги, разработчики обязательно используют ключевые слова (слова и фразы, которые целевой пользователь вводит в строку поиска, чтобы найти нужный ресурс).

Title

Заголовок страницы. В индексе это крупная синяя ссылка на сайт, в браузерных вкладках — название.

Атрибут должен содержать основные ключевые слова и конкурентные преимущества. Важно, чтобы пользователь сразу понял, что сайт ему предлагает, и почему данный ресурс ему подойдет. Основная сложность — вместить нужную информацию в четко заданный поисковыми системами лимит символов. У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов). Пример приведен в таблице 2.

Дано

Неудачный title

Удачный title

Ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»

Купить кресло. Купить удобное кресло, купить кресло недорого

Как купить удобное кресло недорого с доставкой и получить скидку 15%?

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

Description

Description – это краткий «анонс» страницы в результатах поиска, несколько коротких предложений, в которых используются наиболее значимые ключевые слова конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.

Мета теги Title и Description составляются отдельно для каждой страницы сайта, поскольку все разделы должны иметь собственный список ключевых фраз, соответствующий тематике и содержанию.

С помощью meta name description поисковым роботом описание страницы (сниппет) отображается в результатах поиска под title.

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

Дано

Неудачный Description

Удачный Description

Магазин продажи книг; ключевые слова «интересная книга», «купить книгу»

Книги издавна являются одними из самых близких «друзей» человека. Интересная книга помогает скоротать время, дает полезные знания, раскрывает занимательные факты, пробуждает эмоции. Потому стоит задуматься о том, чтобы купить книгу в нашем магазине.

Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.

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

Keywords

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

Сейчас поисковики не придают данному атрибуту такой вес, как раньше. Но грамотное использование его не будет лишним.

Используйте 3-6 ключевых слов/фраз через запятую. Чрезмерное употребление может расцениваться поисковиком как переспам. В список должны включаться только используемые на странице запросы, под которые оптимизирован текст, названия товаров и т.д.!

Мета теги технического характера

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

Наиболее распространенные технические метатеги приведены в таблице 4.

Пример

Описание

Content-type. Включает данные о типе документа и кодировке. Влияет на то, насколько корректно страница будет отражаться в браузере. Особенно актуален при неверной настройке браузера или сервера. В такой ситуации документ будет показан на другой кодировке, и пользователь не сумеет ничего изменить даже попыткой переключить вручную. Для кириллицы используется атрибут windows-1251 или KOI-8R

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

Показывает поисковому роботу, какие страницы следует включать в индекс, а какие — нет. Данный тег предполагает ряд дополнительных атрибутов: index/noindex (можно/нельзя индексировать); follow/nofollow (учитывать/не учитывать гиперссылки); all/none (открыть/закрыть для индексации страницу и гиперссылки).

Позволяет задать время обновления страницы при загрузке либо переадресации пользователя в другой раздел. Тег полезен в случае обновления сайта: вместо страницы ошибки 404 или длительной загрузки перенаправляет пользователя в новый раздел.

Author и Copyright. Этими тегами можно прописать авторство графического и текстового содержимого страницы.

принадлежность авторских прав

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

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

Стили (CSS)

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css. Для связывания документа с этим файлом применяется тег <link>. [31] Данный тег помещается в контейнер <head>, как показано в примере ниже.

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. [32] Важно, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере.

font-family: Arial, Verdana, sans-serif;

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

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. [33] По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае непосредственно на той же странице с помощью контейнера <style>, как показано в примере.

What is the relationship between Xml and Html? [duplicate]

HTML and XML are both descendants of an earlier markup language called SGML (Standard Generalized Markup Language). SGML is a complicated set of rules that define document structures.

XML is a subset of SGML that does the same thing, using fewer rules. Since XML is a less-complicated derivative of SGML, XML is more easily implemented on large networks such as the Internet. The primary role of XML is to define data.