Презентацию подготовила Курина Ксения, гр. 950 б XHTML (англ. Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста) — язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. Вариант XHTML 1. 1 одобрен в качестве Рекомендации Консорциума Всемирной паутины (W 3 C) 31 мая 2001 года.
Основы XHTML Преимущества : Для XHTML можно применять множество технологий, разработанных для XML. Например, XSLT и XPath. Анализ XHTML проще и быстрее, чем HTML. Поскольку синтаксис XML строже, чем SGML, обработка XHTML возможна даже на мобильных телефонах с малыми ресурсами. Развитие HTML в определенном смысле зашло в тупик : новые теги уже не нужны, поскольку хватает существующих, к тому же акцент разработки веб-страниц сместился на стили, которые расширяют возможности по оформлению документов. Естественно, CSS никак не подменяет HTML, но зато позволяет использовать ограниченный набор тегов, а вид элементов, их положение и различные параметры задавать через стили. Определенным ограничением HTML является и то, что он относится к формальным языкам, в том смысле, что теги и их иерархическая структура жестко описаны в спецификации. Поэтому популярность набирает XML, с помощью которого можно создавать собственные теги и формировать их структуру. Разница между HTML и XML состоит не только в тегах, но и правилах написания кода. Браузер при работе с HTML “закрывает глаза” на разные мелкие огрехи и недочеты в структуре или тому, что не корректно указан параметр. С XML такие фокусы не проходят, поэтому браузер выдаст ошибку о том, что документ неверно сформирован. Чтобы научить разработчиков “правильному” мышлению, изменить их стиль написания кода, а также сократить разрыв между HTML и XML, и был разработан XHTML, как промежуточный этап между ними.
Основы XHTML (EXtensible Hyper. Text Markup Language, Расширенный язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Вообще, W 3 C определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит. Так ли это будет обстоять на самом деле, покажет только время. Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить с программой, которая не будет скомпилирована до тех пор, пока все ошибки не исправлены. Браузер выступает в роли компилятора и не отображает документ, если он не соответствует спецификации. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к ? идеальному? коду. Это позволяет делать сайты независимыми от устройства отображения и браузера. Иными словами, сайт будет корректно показываться во всех современных браузерах и платформах вроде компьютеров, смартфонов и т. д. На деле все обстоит не так прозаично. Разработчики браузеров не могут позволить себе, чтобы их детище работало только с “правильным” кодом. А все из-за того, что большая часть сайтов в мире просто не будет отображаться в таком браузере. Виноваты в таком положении вещей и разработчики и пользователи. Первые не обеспечили должную поддержку спецификации в своих браузерах, а вторые не потрудились ей следовать. По этим причинам XHTML 1. x является всего лишь подобием HTML, но с более строгим синтаксисом, а не тем перспективным языком разметки, на который обязательно стоит переходить из-за его уникальных возможностей.
Основы XHTML Рассмотрим пример: HTML: <html> <head> </head> <body> </html> </body> <title> Welcome To My Page!</title> Оба д о сохра кумента н расш яются с ирен и. html ем <h 1>HTML</h 1> XHTML: <? xml version=“ 1. 1”? > <!DOCTYPE html PUBLIC “-//W 3 C//DTD XHTML 1. 0 Transitional//EN” http: //www. w 3 c. org/TR/xhtml 1 -transitional. dtd> <html xmlns=http: //www. w 3 c. org/1999/xhtmlxml: lang=“en”> <head> <title> Welcome To My Page!</title> </head> <body> <h 1>XHTML</h 1> </body> </html> Подробности дальше… ы ер я м ри ютс ом п т ти лича екс Э т о ко т ) ь = ол т
Основы XHTML Элементы и атрибуты DOCTYPE Указывает, что элементом документа является html. Обратите внимание на регистр. Все кроме, собственно DOCTYPE, записывается в нижнем регистре! DTD Далее следует определение типа документа. Браузер с помощью него проверяет наш документ на соответствие определенным стандартам. Для этого используется ссылка на http: //www. w 3 c. org/TR/xhtml 1 transitional. dtd. (На скорости 56 КБит/с загрузка этого документа займет 10 -20 секунд, поэтому иногда целесообразно загружать XHTML DTD с локального компьютера) <html> Является элементом документа, символизирует начало фактического содержимого документа xmlns Определяет пространство имен XML для данного документа xmlns: lang Устанавливает язык документа lang Установка языка документа, трактуемого в виде XTMLкода.
Различия между XHTML и HTML Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или ) должны иметь на конце / (например, ). Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected"> или <td nowrap="nowrap">. Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" />). XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. По рекомендации W 3 C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор. Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859 -1).
Различия между XHTML и HTML Для XHTML страниц рекомендуется задавать MIME-тип — application/xhtml+xml, но это не является обязательным, более того — браузер Internet Explorer 6 и младшие версии, не смогут обрабатывать страницу, поэтому с XHTML 1. 0 традиционно используется MIME-тип для HTML — text/html. Также стандарт рекомендует указание <? xml version="1. 0" encoding="utf 8"? > перед DTD, но это не обязательно, более того — браузер Internet Explorer воспринимает такое указание (как и любой другой текст перед <!DOCTYPE>), как признак того, что данную страницу необходимо отображать в режиме обратной совместимости, а не согласно стандарту. Существует три типа документов XHTML: strict, transitional и frameset. Наиболее употребительной и универсальной из версий XHTML является переходная (англ. transitional), поскольку она позволяет использовать iframe (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Фреймовая версия (англ. frameset) представляет собой расширенный вариант transitional, добавляя к нему, как следует из названия, возможность установки frameset вместо body. DTD строгой версии XHTML (англ. strict) не содержит многих тегов и атрибутов, описанных в DTD transitional, и признанных устаревшими.
Валидация XHTML документов Валидным (т. е. отвечающим всем правилам) XHTML-документом считается документ, удовлетворяющий технической спецификации. В идеале, все браузеры должны следовать веб-стандартам и, в соответствии с ними, валидные документы должны отображаться во всех браузерах на всех платформах. Валидация XHTML-документа рекомендована даже несмотря на то, что она не гарантирует кросс-браузерности. Документ может быть проверен на соответствие спецификации с помощью онлайновой Службы валидации разметки W 3 C. Валидация обнаружит и разъяснит ошибки в XHTML-разметке. Валидный документ должен содержать определение типа документа (DTD). DTD должен быть расположен до всех других элементов документа. Вот наиболее распространённые типы DTD для XHTML: XHTML 1. 0 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 strict. dtd"> XHTML 1. 0 Transitional <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> XHTML 1. 0 Frameset <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 frameset. dtd"> XHTML 1. 1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> Пространство имён тегов xhtml должно быть обозначено в корневом теге как http: //www. w 3. org/1999/xhtml"
Самыми распространёнными ошибками в XHTML-разметке являются q. Незакрытые элементы (XHTML, в отличие от HTML, требует закрытия всех элементов, в том числе не имеющих закрывающего тега, как, например, ). q. Отсутствие альтернативных текстов для изображений (достигающийся применением атрибута alt, который помогает сделать документы доступнее для устройств, которые не в состоянии отображать изображения, или предназначенных для слабовидящих людей). q. Присутствие текста непосредственно в теге <body> документа (должен быть объявлен блочный элемент, внутрь которого следует помещать содержимое). q. Вложение блочных элементов внутрь инлайновых (внутристрочных) (например, блочные элементы <div> или <p> не могут быть вложены внутрь инлайновых элементов <a>, <span>, <em> и так далее). q. Пренебрежение заключением значений атрибутов в кавычки (<a href=http: //www. ru/> вместо <a href="http: //www. ru/">). q. Неправильное вложение элементов (конструкции вида <strong> <em> </strong> </em>). q. Неправильное использование ссылок-мнемоник (например, & вместо & ) q. Написание тегов и/или атрибутов прописными буквами (<DIV STYLE="…"> вместо <div>). q. Задание в теге <!DOCTYPE …> относительного пути к DTD-файлу, скопированного с сайта www. w 3. org ("DTD/xhtml 11. dtd" вместо "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd").
Валидация XHTML документов Это был не полный список, но дающий общее представление о часто допускаемых ошибках при составлении XHTML-документов. иума Консорц ы На сайте й паутин но Всемир айти можно н SS, также для C даторы вали и др. ументов ок HTML-д Версии XHTML Вали можн дный XH TM о сна бжат L-докум е ь подт баннеро специаль нт верж ным дающ м W 3 C, им ва XHTM ли L-раз метк дность и. XHTML 1. 0 Переходный (Transitional): предназначен для лёгкой миграции из HTML 3. 2 и для тех, кто использует инлайн-фрэймы. XHTML 1. 0 Строгий (Strict): полностью отделяет содержание документа от оформления (которое теперь задаётся Говоря о фр как, а только через CSS), многие атрибуты (такие еймнапример, у х, сле bgcolor и align) более не поддерживаются, их что недавно (по стилей. д ет упомянуть, поведение можно задавать только через таблицу мерк необходимо ни XHTML 1. 0 Фрэймовый (Frameset): используется, если ам напсиаразделить окно браузера на несколько я книги) W 3 C разработал фрэймов. рабочий стандар т для новой специфика XHTML 1. 1 Модульный (Module-based): авторы могут импортировать дополнительные свойства в их разметку. ции, XFramesустройств, которые не могут использовать XHTML Основной (Basic): специальная облегчённая версия XHTML для (веб-узел www основном используется в миниатюрных устройствах, таких как мобильные полный набор элементов XHTML — в. w 3. org/TR/xframes/), к оторый призван WML и C-HTML. телефоны. Подразумевается, что он заменитзамен ить HT XHTML Basic, добавляет специфические элементы XHTML мобильного профиля (Mobile Profile): основанный на ML-фреймы для мобильных телефонов. XHTML 2. 0. Пока в разработке. Синтаксис еще больше приближен к синтаксису XML. Также является модульным языком.
Структура XHTML-документа Любой XHTML-файл состоит из трех разделов ? тега <!DOCTYPE>, заголовка (<HEAD>) и тела документа (<BODY>). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника. Тег <!DOCTYPE> сообщает браузеру о типе текущего документа и как его интерпретировать. Различают несколько версий и типов XHTML-документов, они приведены в таблице: Версия XHTML Тип документа Описание Подробнее о типах документов XHTML и версиях XHTML смотри в XHTML 1. 0 Strict книгу или Google! ; ) описание документа, «Строгое» включающее все правила. XHTML 1. 0 Transitional «Переходный» тип, более лояльно относящийся к коду документа. XHTML 1. 0 Frameset Устанавливается при использовании на странице фреймов. XHTML 1. 1 Эта версия основана на XHTML 1. 0 Strict, но понимается браузерами как XML-приложение. В первую очередь предназначено для работы с различными медиа-данными.
Структура XHTML-документа Шаблон документа XHTML Strict Тег <HTML> является корневым для остальных элементов веб-страницы и располагается сразу после определения типа документа <!DOCTYPE>. Поскольку тип документа может быть любым, а не только тем, что приведен в табл. 2. 1, то необходимо дать понять браузеру, что он имеет дело со спецификой XHTML. Для чего в тег <HTML> добавляется параметр xmlns. З заголовка Также в контейнере <HEAD> требуется наличие амечание!<TITLE>. Таким Хотя параметр xm образом, минимальный XHTML-документ с метатегом, устанавливающим lns в теге <HTML> и считается обяза XHTML-документа): кодировку веб-страницы, показан в примере (Шаблон тельным, но валидатор не выд ает ошибки, если xmlns отсутствует. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Новый документ</title> </head> <body> </html> В данном примере используется тип XHTML 1. 0 Strict и кодировка Windows-1251.
Синтаксис XHTML При написании кода XHTML придерживаются того же синтаксиса, который характерен для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных правил. Правила XHTML следующие. v. Все теги и параметры должны быть набраны в нижнем регистре (строчными символами). v. Значения любых параметров необходимо заключать в кавычки. v. Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег. v. Должна соблюдаться правильная вложенность тегов. v. Нельзя использовать сокращенные атрибуты тегов. v. Вместо параметра name необходимо указывать атрибут id. v. Следует определять DTD (document type definition, описание типа документа) с помощью тега <!DOCTYPE>.
Синтаксис XHTML Теги должны быть набраны в нижнем регистре! Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги <HR> и <hr> различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их параметры в нижнем регистре. В примере приводится неверное использование тегов: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <BODY> <P>Lorem ipsum dolor sit amet. . . </P> </BODY> </html> В данном примере теги <body> и <p> набраны прописными символами, что является ошибкой. В следующем примере показан корректный код: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <body> <p>lorem ipsum dolor sit amet. . . </p> </body> </html>
Синтаксис XHTML Значения любых параметров необходимо заключать в кавычки! Хотя в HTML также требуется заключать аргументы в кавычки, но их отсутствие никак не влияет на корректность кода. Так что можно сказать, что в HTML применение кавычек лишь рекомендация. В XHTML же использование кавычек введено в правило и любые значения параметров требуется указывать только в них: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <body> <table width="200" border="1" cellpadding="5" cellspacing="0"> <tr> <th scope="col">Чебурашка</th> <th scope="col">Шапокляк</th> </tr> <td>1</td> <td>5</td> </tr> <td>4</td> <td>13</td> </tr> </table> </body> </html> В данном примере все параметры тега <TABLE>, а также <TH> задаются в кавычках.
Синтаксис XHTML Требуется закрывать все теги! В HTML теги делятся на две категории ? парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить, поскольку браузер добавляет его автоматически. В XHTML закрывающий тег требуется всегда и везде. В примере 3. 4 показан код с ошибкой, из-за того, что отсутствует тег </p>. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <body> Замечание! <p>и лезет, крадучись, в самолёт, Тег <!DOCTYPE> н <p>и бомбу в брюхо ему кладёт, е является частью XHTML-документа <p>и прочь неслышно бежит, как кот; , поэтому для <p>а дальше - не наше дело. него закрывающе </body> го тега не </html> треб уется. Обычно разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В примере показано корректное использование списков: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <body> <ul> <li>Восток</li> <li>Запад</li> <li>Юг</li> <li>Север</li> </ul> </body> </html> В данном примере каждому открывающему тегу соответствует его закрывающий тег.
Синтаксис XHTML Что касается одинарных тегов, то они должны завершаться слэшем перед закрывающей угловой скобкой, как показано в примере: Добавление изображения <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <body> <img src="test. gif" width="873" height="620" alt="тестовая картинка" /> </body> </html> В данном примере обратите внимание на обязательный пробел, который предшествует конструкции /> !
Синтаксис XHTML Сопоставление HTML и XHTML-тегов HTML-тег XHTML-тег <hr> <hr /> <input /> <img /> <meta />
Синтаксис XHTML ет ие! ечан а и выда го Зам од но тор к правиль ри ида п Должнаусоблюдаться правильная вложенность тегов! я вал л чае не аузеры ебот Х с в бр бку в критично ражают гов, XHTMLния те относится к ошибкам Замечание! ши о Параме следующего типа: отоб же т добавл некорректнаянвложенность одногоятегарвxmlns требиется поло равильно ицу. ть к тегудругой у мп тра <HTML> с тем, его это. Вмес расположение тега в несоответствующем сконтейнере. е с от влияет н сут твие никак т н а выдач валидат у резуль е - Правильная вложенность тегов узе ора. Это связано тата бра р ы тега, при этом с тем, чт Каждый тег должен располагаться внутри другого вставляют э недопустимо их о тот пара автомат «пересечение» метр ически. - Иерархия тегов Все теги имеют строгую иерархическую систему в том смысле, что каждый тег должен находиться внутри другого тега и никак иначе. На условной вершине находится корневой элемент <HTML>, а все остальные теги могут содержать внутри себя другие теги, которые называются дочерними. Соответственно дочерние теги располагаются в родительском элементе. Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. - Нельзя использовать сокращенные атрибуты тегов Сокращенным атрибутом называется параметр без присвоенного значения. «Пустое значение» , как еще называется подобная ошибка, легко исправляется, если присвоить параметру значение 1 или аргумент, совпадающий с названием атрибута. (см таблицу на следующем слайде…)
Синтаксис XHTML checked="checked" compact="compact" disabled="disabled" ismap="ismap" multiple="multiple“ nohref="nohref" noresize="noresize" noshade="noshade" nowrap="nowrap" readonly="readonly" selected="selected"
Синтаксис XHTML (продолжение) - Вместо параметра name необходимо указывать атрибут id Параметр name определяется в HTML для тегов <A>, <FRAME>, <IMG> и <MAP> и предназначен для обозначения элемента с целью последующего к нему обращения. В XHTML параметр name вышел из употребления, а вместо него следует использовать id - Следует определять DTD Все XHTML-документы обязательно должны содержать тег <!DOCTYPE>, который задает DTD, а также придерживаться иерархической структуры вложения тегов.
Синтаксис XHTML Вот, собственно и все… Ну или почти все… Вообще, в книжке НУ ОЧЕНЬ много написано… Так что подробности там… КОНЕЦ!!!!!
Скачать презентацию подготовила Курина Ксения гр 950 б XHTML
a384df903d77b6263a03755457ed4199.ppt