Я заметил, что многие постоянно жалуются на нашем форуме на ошибки, которые чаще всего связаны с не правильным html/css кодом...
Да бы хоть кто-то что-то понял, и и начинаю разработку данных уроков...
Содержание 1 урока:
1.Введение в языки разметки. Cпецификации языка HTML.
2.Краткий обзор броузеров и их возможностей.
3.Краткий обзор редакторов и их возможностей.
4.Структура HTML-документа.
И так я думаю можно приступить...
Введение в языки разметки. Cпецификации языка HTMLИтак, мы начинаем изучение курса основ web-дизайна или XHTML и CSS, который познакомит вас с основами разметки текста с помощью современной технологии XHTML. Так же мы изучим возможности визуального оформления элементов web-страниц с помощью каскадных стилевых таблиц - CSS.
XHTML — это новая версия очень популярного и широко распространенного языка гипертекстовой разметки (HTML — Hypertext Markup Language), построенная в соответствии с правилами расширяемого языка разметки (XML — Extensible Markup Language). Фактически, XHTML наследует простоту, а также синтаксис и разметку HTML и заставляет его функционировать по правилам XML при описании и обработке разметки.
История развития XHTML
SGML
Начало истории HTML следует отнести к далекому 1969 году, когда Чарльз Гольдфарб, работавший тогда в компании IBM, создал прототип языка для разметки технической документации, впоследствии названного GML, а с приданием ему в 1986 году статуса международного стандарта — SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов. Слово «структурная» означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о форматировании документа, а лишь указывают границы и соподчинение его составных частей, т.е. задают его структуру.
Создатели SGML стремились полностью абстрагироваться от проблем представления текста в разных программах, на разных компьютерных платформах и устройствах вывода. Хотя формально ничто не мешает записать средствами SGML любую информацию об элементах документа - в том числе и параметры его форматирования (к примеру, шрифр, размер, цвет текста заголовка), идеология этого языка требует ограничиться указанием на уровень заголовка и его место в иерархической структуре документа. Все остальное должно быть вынесено в так называемые стилевые спецификации.
Сам по себе SGML есть не готовая система разметки текста, а лишь удобный метаязык, позволяющий строить такие системы для конкретных обстоятельств.
HTML 1.2
Принципы, на которых строится язык SGML, значительны и интересны; несомненно, идеология языка оказала влияние на многие компьютерные разработки. Однако сам по себе SGML не получил сколько-нибудь заметного распространения до тех пор, пока в 1991 г. сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык - самое известное из приложений SGML - был назван HTML (HyperText Markup Language, "язык разметки гипертекста").
Первым (и единственным в те далекие времена) графическим броузером была программа Mosaic, разработанная, как и сам WWW, в научном учреждении - Национальном Центре Суперкомпьютерных Приложений США (NCSA). Так что нет ничего удивительного в том, что в этот "золотой век" никаких противоречий между официальными стандартами и их реализацией в броузерах еще не существовало.
HTML 2.0
HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась подготовка спецификации следующей версии языка — 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium, сокращенно W3C), перенявший от CERN верховную власть и авторитет в мире WWW.
В настоящий момент консорциум, имеющий статус «международного и некоммерческого», объединяет свыше 150 организаций-членов, в том числе фирмы Netscape, Microsoft и множество других. Однако в 1994-1995 гг. его членами были почти исключительно университеты и научные учреждения. Столь академический состав W3C сказывался как на самих документах, публикуемых консорциумом, так и на процедуре (и особенно на сроках) их принятия. Достаточно сказать, что спецификация HTML 2.0, единственным серьезным усовершенствованием в которой был механизм форм для отсылки информации с компьютера пользователя на сервер, была окончательно утверждена лишь в сентябре 1995 г., когда в W3C уже полным ходом шло обсуждение HTML 3, - или, как его называли поначалу, "HTML+".
HTML 3
Пожалуй, проект HTML 3 — самая яркая и неоднозначная страница в истории языка. Работа над ним началась в марте 1995 г., и первоначальный вариант стандарта включал в себя много интересных нововведений. Но самое главное — HTML 3 был попыткой разрешить уже достаточно очевидное к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, заинтересованных в первую очередь в гибких и богатых возможностях визуального представления.
Противоречие это было разрешено опять-таки в полном соответствии с идеологией SGML: W3C ввел в HTML 3 поддержку так называемых иерархических стилевых спецификаций - CSS. Система CSS формально независима от HTML, имеет совершенно иной синтаксис, не наследует никаких идеологических ограничений и позволяет, уже в совершенно иных терминах, задавать параметры графического представления для любого тега HTML. Нет сомнения, что CSS — почти идеальный способ избавить HTML от наследственных дефектов и перевести его развитие на принципиально новые рельсы.
"Война браузеров"
Коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г. группа разработчиков броузера Mosaic основала корпорацию Netscape Communications и вскоре выпустила первую версию коммерческого броузера Netscape (начиная с версии 2.0 — Netscape Navigator, а с версии 4.0 — Netscape Communicator). С этого момента начался экспоненциальный рост WWW, продолжающийся по сей день. Чтобы закрепить лидерство (на которое, впрочем, тогда еще мало кто покушался) и привлечь новых пользователей, Netscape вводила в HTML все новые и новые усовершенствования, — поддерживаемые, разумеется, только броузером Netscape.
Практически все новые теги, без устали изобретаемые Netscape, были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования. Причины понятны: чтобы убедить, скажем, бизнесмена, что ему пора обратить внимание на некую новую технологию, прежде всего нужно показать ему ее в привлекательном, «товарном» виде. В результате тот вариант HTML, который поддерживала выпущенная в начале 1996 г. версия Netscape Navigator 2.0, представлял собой довольно странную смесь старых логических тегов с беззастенчиво вломившимися новыми, ориентированными на графическое экранное представление документа и затрудняющими его воспроизведение на других устройствах вывода.
Такая политика компании, с одной стороны, принесла ей быстрый и впечатляющий успех (одно время версии Netscape Navigator составляли более 90% всех используемых броузеров), а с другой — вызвала ожесточенное сопротивление наиболее сознательной части HTML-сообщества. Энтузиасты неустанно разъясняли и разъясняют каждому, кто согласен их слушать, что HTML по природе своей не имеет права зависеть от какого-то конкретного броузера и что заявления типа «эту страницу лучше всего смотреть в Netscape Navigator» являются просто насмешкой над здравым смыслом.
В конце 1995 г. ситуация в мире HTML была довольно смутной. Популярность броузера Netscape неуклонно росла; программисты этой фирмы готовили к выпуску версию 2.0, которая должна была утвердить господство Netscape на вечные времена благодаря неслыханному набору новшеств (интерфейс подключаемых модулей - plugins, поддержка Java-апплетов, встроенный язык сценариев JavaScript, возможность разбивки окна на фреймы и многое другое). В этот переломный момент в игру вступил новый участник — корпорация Microsoft. Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка, недооценивала перспективы Интернета и не собиралась как-либо участвовать в развитии этой информационной среды. Однако невероятный взлет Netscape заставил Microsoft изменить свое мнение.
И именно на броузерном фронте, где господство Netscape оставляло меньше всего шансов конкурентам, корпорация Microsoft нанесла свой главный удар. Поначалу мало кто верил, что броузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял собой ничего выдающегося, сможет составить конкуренцию Netscape; Тем не менее выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все расширения Netscape, вызвала настоящий бум и очень быстро утвер¬дилась в качестве «второго главного броузера». Сейчас Microsoft и Netscape делят рынок броузеров почти поровну, и окончательный исход их битвы не берется предсказать никто.
HTML 3.2 и 4
Одновременно с разработкой конкурентоспособного броузера Microsoft решила "навести порядок" и в мире HTML. Взяв под свою опеку W3C, она снабдила его денежными и людскими ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации. Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2, который, по сути, всего лишь описывает большинство расширений Netscape (с тем же успехом их можно назвать теперь "расширениями Microsoft"). Пройдя обычный в W3C процесс обсуждения и внесения поправок, спецификация HTML 3.2 была утверждена в январе 1997 года. Расхождения между предписаниями стандарта и реализацией HTML в браузерах вновь были сведены к минимуму.
В декабре того же 1997 г., с принятием стандарта HTML 4.0, маятник, похоже, качнулся уже в обратную сторону - наряду с дальнейшим обогащением репертуара визуальных тегов, эта версия ввела немало пусть и не вполне "логических", но очень важных расширений для поддержки многоязычных документов и обеспечения доступности документа в разных средах. Кроме того, в HTML 4 наконец-то прямо в тексте стандарта четко проведено разделение логических и визуальных тегов (последние объявлены "нерекомендованными", "deprecated").
XML
XML - набор правил и соглашений о синтаксисе, с помощью которого можно создавать собственные наборы элементов разметки. Эти элементы, в свою очередь, можно использовать для описания содержимого. Своим появлением XML обязан невозможности применения HTML для описания данных самого разного рода, которые пользователи желают распространять через Web. Так, HTML практически невозможно использовать для описания финансовых данных, руководств по инсталляции программного обеспечения, математических выражений и множества данных других типов, которыми буквально наполнена сеть Web.
Хотя изначально HTML разрабатывался как язык разметки (описывающий содержимое и не зависящий от внешнего вида), со временем он превратился в язык дескрипторов, используемый разработчиками для настройки внешнего вида и передачи смысла информации Web-страницы. Распространение данных, тем не менее, характеризуется рядом особенностей, которые не вполне успешно учитываются в HTML.
Для достижения гибкости и согласованности, отсутствующей в HTML, и был разработан XML. Этот язык обеспечивает возможность создания собственных наборов элементов разметки, что позволяет при представлении содержимого выйти за пределы ограничений стандартных наборов HTML. Истинное назначение языка разметки - описывать части документа, не касаясь способов его визуализации и отображения. Разметка позволяет структурировать данные, а уже затем эти данные можно использовать по-разному.
XHTML
Язык XHML представляет собой словарь XML. Он построен в соответствии с правилами спецификации XML 1.0, поэтому документы XHTML являются одновременно и документами XML. XHTML - это измененная версия HTML 4.01, переписанная в соответствии с правилами XML.
На сегодняшний день существует несколько спецификаций XHTML:
XHTML 1.0 Transitional - является перезодным вариантом от традиционного HTML к XHTML. Требования к структуре документа и синтаксис не столь строгие как в XHTML
XHTML 1.0 Strict - спецификация для описания обыкновенного XHTML документа, обладающая всей строгостью XML.
XHTML 1.0 Frameset - спецификация XHTML для описания документа с фреймовой структурой (frameset).
XHTML 1.1 - в данной спецификации получили воплощение принципы модульной разметки. Модульный подход к развитию XHTML является ключевым элементом, благодаря которому отдельные пользователи и целые организации смогут применять для своих целей спецификацию XHTML, не тратя время на разработку частной разметки или версий спецификации. Модуляризация XHTML обеспечивает формальный механизм расширения XHTML в существующих рамках синтаксиса и соглашений XML.
За дополнительной информацией по каждой из вышеперечисленных спецификаций посетите сайт W3C: http://www.w3.org
Краткий обзор броузеров и их возможностей.
Браузер (англ. Browser - обозреватель) - программа, позволяющая загружать и просматривать web-страницы. Именно просмотр web-страниц и является основной функцией браузера, и то, как он с ней справляется, определяет его позицию в рейтинге популярности.
Помимо основной функции, ряд браузеров поддерживает дополнительные возможности, позволяющие упростить и сделать более комфортной работу пользоватлей в мировой сети Internet. Среди этих возможностей можно особо выделить поддержку просмотра множества страниц в одном окне (на вкладках), блокирование нежелательной рекламы (банеров и всплывающих окон), быстрый доступ к различного рода опциям загрузки страницы (отключение изображений, анимации и пр. для умеличения скорости загрузки).
Ниже приводится перечень наиболее популярных на сегодняшний день браузеров:
Microsoft Internet Explorer
Mozilla Firefox
Opera
Безусловно, это далеко не полный перечень, однако, мы не будем заострять внимания на остальных браузерах, не вошедших в этот список.
Microsoft Internet Explorer (MSIE)
Данный браузер, безусловно, является лидером в современном первенстве браузеров. Созданный Microsoft Corporation, он приобрел широкую известность, в основном благодаря авторитету и политике компании. MSIE давно поставляется как часть операционной системы Microsoft Windows, и поэтому доступен любому ее пользователю.
Mozilla Firefox
Это совсем молодой браузер, созданный компанией разработчиков браузера Mozilla - прародителя большинства современных браузеров. Год "рождения" Firefox - 2004, так что он по праву может считаться наиболее современным. Из числа наиболее достопримечательных дополнительных возможностей можно выделить:
поддержка вкладок, позволяющих просматривать множество страниц в одном окне программы, не занимая много места на панели задач
быстрый доступ к таким функчиям, как отключение загрузки изображений (экономи траффика и ускорение загрузки документа)
поддержка альтернативнх схем оформления внешнего вида (skins) и дополнительных модулей (plugins), расширяющих его возможности
просмотр и анализ исходного кода страницы на предмет соответствия современным стандартам (только после установки дополненительного модуля)
Кроме всего вышеперечисленного, Firefox имеет встроенный менеджер закачек, с поддержкой докачки файла при обрыве соединения.
Opera
Приятный и удобный интерфейс Opera легко настраивается. Браузер имеет встроенный менеджер закачек с поддержкой докачки файла при обрыве соединения и встроенный почтовый клиент. Просмотр страниц осуществляется на вкладках, что экономит место на панели задач Windows. Для пользователей, требовательных к внешнему виду программ, приятной особенностью будет поддержка схем оформления внешнего вида - skins. Последняя на сегодня версия - 8.0 beta.
Краткий обзор редакторов и их возможностей.
Прежде чем приступать к изучению структуры XHTML документа и набора элементов и правил их записи, необходимо, так же, определиться с выбором инструментов для работы с документом. Основным инструментом, используемым для создания web-страниц, является текстовый редактор. Для этой цели подойдет практически любой редактор (к примеру, "Блокнот" Windows). В профессиональной же деятельности web-мастера, к которой, несомненно, готовятся некоторые из вас, огромное значение играет не только возможность правки текста, а еще и ряд дополнительных характеристик редактора, облегчающих процесс разработки и расширяющих его функциональность:
Поддержка различных кодировок текста. Рекомендуемой кодировкой текста для докуменотов XHTML является "UTF-8", однако, web-страница может быть создана и с использованием другой кодировки (например, KOI8-R или Windows-1251). Таким образом, чем шире спектр поддерживаемых редактором кодировок текста, тем меньше вероятность попасть в тупиковую ситуацию - не имея возможности отредактировать документ, созданный в неизвестной кодировке. Более подробно кодировки будут рассматриваться нами в одном из следующих уроков.
Подсветка синтаксиса. Создавая текстовые XHTML документы высокой сложности, вы скоро придете к выводу, что использование редактора, не делающего различия между элементами разметки и текстовым содержимым страницы (например, "Блокнот" Windows) сильно затрудняет визуальный разбор документа и его правку. Существует ряд редакторов, таких как AceHTML или MS Visual Studio, позволяющих выделить элементы разметки XHTML альтернативным цветом и/или начертанием, и тем самым облегчить разработку и отладку web-страниц.
Возможность запуска встроенного или внешнего браузера для просмотра страницы. Безусловно, любой XHTML документ можно запустить в браузере непосредственно оттуда, где он был сохранен или размещен разработчиком, однако эта процедура требует ряда дополнительных операций, отвлекающих от основной задачи - разработки кода и контента страницы. Знакомые с основами разработки приложений на С++ в среде MS VisualStudio, вы, несомненно, сочтете удобной такую возможность, как запуск документа "на выполнение" нажатием клавиши на клавиатуре, или кнопки на панели инструментов редактора. К примеру, редактор AceHTML при установке сам "найдет" установленные в системе браузеры (IE, Opera, Mozilla и пр.) и свяжет с каждым из них сочетание клавиш для быстрого запуска.
Поддержка шаблонов кода. Использование шаблонов кода позволяет избавить разработчика страниц от не слишком то увлекательного процесса повторного ввода или копирования часто повторяющегося и, к тому же, довольно большого фрагмента страницы. Сохранив один раз такой фрагмент и назначив ему быстрый доступ в виде сочетания клавиш или кнопки на панели инструментов, вы можете в дальнейшем легко вставить его в нужное место на странице. Некоторые редакторы имееют предопределенные разработчиками шаблоны кода.
Поддержка функции "Code Completion". Суть данной фкнкции состоит в подсказке разработчику возможных вариантов продолжения начала вводимой им конструкции. При выборе варианта продолжения, редактор сам "вбивает" недостающие части конструкции, упрощая и ускоряя процесс разработки. Такая функция, к примеру, реализованна в системе разработки MS VisualStudio.NET 2003. Редактор подсказывает разработчику возможные варианты продолжения вводимой конструкции не просто так, а в зависимости от контекста, определяя допустимость данной конструкции в данном месте кода страницы.
Проверка документа на соответствие стандарту. Ряд редакторов позволяет выполнять проверку исходного кода страницы на предмет соответствия выбранной спецификации. Процесс разработки страниц в таком редакторе начинает напоминать процесс разработки приложений на современных языках программирования: набор кода, проверка на наличие ошибок и отладка, тестовый запуск.
Далее представлен ряд редакторов, рекомендуемых для использования и их основные возможности.
VisicomMedia AceHTML 6 Pro
Этот редактор примечателен тем, что при широком спектре поддерживаемых возможностей, занимает немногим более 15 МБ на жестком диске. В числе основных особенностей данного редактора есть
поддержка всевозможных кодировок текста
качественная и легко настраиваемая подсветка синтаксиса
функция Code Completion (работающая, впрочем, не всегда корректно)
поддержка предопределенных и легко настраиваемых пользовательских шаблонов кода
просмотр страниц внутренним или внешним браузером (можно использовать любой установленный в системе браузер, например Opera или Firefox).
настройка атрибутов и стиля элементов с помощью специальной панели Code Inspector.
Проверка соответствия документа выбранной спецификации не поддерживается.
MS VisualStudio.NET 2003
Это один из наиболее мощных рассматриваемых нами инструментов разработки. В нем реализованна наиболее мощная поддержка функции Code Completion, грамотная и легко настраиваемая подсветка синтаксиса и работа с текстом в различных кодировках.
К числу его недостатков можно отнести лишь 1.5 ГБ требуемого для установки пространства на жестком диске, высокие требования к производительности компьютера и отсутствие возможности запуска страницы на просмотр в браузере (как внутреннем, так и внешнем).
CSE HTML Validator
Основное достоинство данного редактора - возможность проверки документа на соответствие выбранной спецификации. Так же поддерживаются различные кодировки текста, предопределенные и пользовательские шаблоны кода (последние, впрочем, довольно сложно настроить) и запуск страницы на просмотр во внешнем браузере (для этого используется системный браузер по умолчанию).
Кроме того, данный редактор обладает довольно простенькой, однако, вполне достаточной, подсветкой синтаксиса. Поддержка функции Code Completion отсутствует. Занимает данный редактор не более 10 МБ на жестком диске.
Мы рекомендуем
Я рекомендую в качестве основного средства разработки использовать AceHTML как один из наиболее удобных и легко настраиваемых. Для проверки страниц на наличие ошибок установите и используйте CSE HTML Validator.
Но лично я для вёрстки использую NotePad++ и Adobe DreamWeaver, это 2 очень удобные среды для работы с html/xhtml/css.
Структура HTML-документа.
Итак, после выбора средств разработки, а именно редактора (для создания страниц) и браузера (для их тестирования), мы с вами приступаем непосредственно к рассмотрению структуры документа XHTML.
Первое, что вы должны узнать об XHTML документах, это то, что они являются обыкновенными текстовыми файлами, содержащими специальные текстовые метки, называемые элементами разметки. Набор этих меток составляет структуру XHTML документа и, в общем то, определяет его внешний вид. Набор символов по умолчанию для XHTML документов - UTF-8, однако, ничто не помешает нам воспользоваться и другой кодировкой (о кодировках и их указании речь пойдет в одном из следующих занятий).
Чтобы создать XHTML документ с помощью программы AceHTML 6, воспользуйтесь командой File \ New.... В списке доступных шаблонов выберите XHTML Document. После нажатия кнопки "Ok" вашему вниманию предстанет примерно такая структура:
Если "выбросить" из приведенного документа все, что располагается между <body> и </body>, то, что останется, и будет "скелетом" любого XHTML документа.
На данном этапе изучения материала рекомендуется принять как должное такую структуру документа и использовать ее, не вникая глубоко в назначение ряда ее элементов. Некоторые из них рассматриваются ниже подробно, остальные будут рассмотренны по мере необходимости далее.
XML декларация
Этот элемент присутствует в любом XML документе, каким так же является и XHTML документ. Декларация XML указывает браузеру на то, что данный документ построен в соответствии с синтаксисом XML разметки версии 1.0 и использует набор символов utf-8. В общем случае, xml декларацию можно не указывать, так как кодировкой символов по умолчанию для документов XHTML является именно utf-8. Однако, при использовании альтернативной кодировки (например windows-1251), указывать xml декларацию необходимо.
Определение Типа Документа (DTD)
DTD, или Определение Типа Документа (Document Type Definition), является еще одной неотъемлимой частью документов XML. Объявление <!DOCTYPE...> указывает браузеру, какой набор элементов разметки может быть использован в данном документе.
Созданный в примере выше XHTML документ соответствует спецификации XHTML 1.1.
Корневой элемент - <html>
В соответствии с синтаксисом XML, любой документ должет иметь единственный элемент верхнего уровня, в который должны быть вложенны остальные элементы. Для XHTML документов роль корневого играет элемент <html> ... </html>. В него вкладываются остальные элементы, такие как <head> - раздел заголовка и <body> - тело, содержательная часть документа.
Раздел заголовка - <head>
В разделе заголовка обычно размещают информацию, характеризующую страницу в целом. Как то:
1.Создание заголовка страницы
2.Указание кодировки страницы
3.Перечисление ключевых слов, помогающих поисковым системам проиндексировать вашу страницу
4.Описание или подключение таблиц стилей и сценариев
Заголовок страницы можно указать при помощи элемента <title>. Например так:
Этот текст используется различными браузерами по разному. MSIE отображает его в заголовке окна браузера, а Firefox и Opera - в виде названия вкладки, на которой загружена страницы.
ъ
Подбор краткого и информативного заголовка обеспечивает более быструю и простую ориентацию пользователя среди большого количества одновременно просматриваемых документов.
С остальными элементами раздела заголовка вы познакомитесь по мере освоения курса.
Тело документа - <body>
Тело документа представляет собой то, ради чего создается документ - его содержательную часть, то, что увидит конечный пользователь на странице. Здесь происходит разбиение текста страницы на структурные блоки (заголовки и абзацы), выполняется вставка изображений, таблиц, списков и прочих элементов содержания.
В приведенном выше примере документ содержит заголовок 1-го уровня ("h1") и абзац ("p").
продолжение следует...
если кому-то что-то не ясно, можете задавать вопросы...
Да бы хоть кто-то что-то понял, и и начинаю разработку данных уроков...
Содержание 1 урока:
1.Введение в языки разметки. Cпецификации языка HTML.
2.Краткий обзор броузеров и их возможностей.
3.Краткий обзор редакторов и их возможностей.
4.Структура HTML-документа.
И так я думаю можно приступить...
Введение в языки разметки. Cпецификации языка HTMLИтак, мы начинаем изучение курса основ web-дизайна или XHTML и CSS, который познакомит вас с основами разметки текста с помощью современной технологии XHTML. Так же мы изучим возможности визуального оформления элементов web-страниц с помощью каскадных стилевых таблиц - CSS.
XHTML — это новая версия очень популярного и широко распространенного языка гипертекстовой разметки (HTML — Hypertext Markup Language), построенная в соответствии с правилами расширяемого языка разметки (XML — Extensible Markup Language). Фактически, XHTML наследует простоту, а также синтаксис и разметку HTML и заставляет его функционировать по правилам XML при описании и обработке разметки.
История развития XHTML
SGML
Начало истории HTML следует отнести к далекому 1969 году, когда Чарльз Гольдфарб, работавший тогда в компании IBM, создал прототип языка для разметки технической документации, впоследствии названного GML, а с приданием ему в 1986 году статуса международного стандарта — SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов. Слово «структурная» означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о форматировании документа, а лишь указывают границы и соподчинение его составных частей, т.е. задают его структуру.
Создатели SGML стремились полностью абстрагироваться от проблем представления текста в разных программах, на разных компьютерных платформах и устройствах вывода. Хотя формально ничто не мешает записать средствами SGML любую информацию об элементах документа - в том числе и параметры его форматирования (к примеру, шрифр, размер, цвет текста заголовка), идеология этого языка требует ограничиться указанием на уровень заголовка и его место в иерархической структуре документа. Все остальное должно быть вынесено в так называемые стилевые спецификации.
Сам по себе SGML есть не готовая система разметки текста, а лишь удобный метаязык, позволяющий строить такие системы для конкретных обстоятельств.
HTML 1.2
Принципы, на которых строится язык SGML, значительны и интересны; несомненно, идеология языка оказала влияние на многие компьютерные разработки. Однако сам по себе SGML не получил сколько-нибудь заметного распространения до тех пор, пока в 1991 г. сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык - самое известное из приложений SGML - был назван HTML (HyperText Markup Language, "язык разметки гипертекста").
Первым (и единственным в те далекие времена) графическим броузером была программа Mosaic, разработанная, как и сам WWW, в научном учреждении - Национальном Центре Суперкомпьютерных Приложений США (NCSA). Так что нет ничего удивительного в том, что в этот "золотой век" никаких противоречий между официальными стандартами и их реализацией в броузерах еще не существовало.
HTML 2.0
HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась подготовка спецификации следующей версии языка — 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium, сокращенно W3C), перенявший от CERN верховную власть и авторитет в мире WWW.
В настоящий момент консорциум, имеющий статус «международного и некоммерческого», объединяет свыше 150 организаций-членов, в том числе фирмы Netscape, Microsoft и множество других. Однако в 1994-1995 гг. его членами были почти исключительно университеты и научные учреждения. Столь академический состав W3C сказывался как на самих документах, публикуемых консорциумом, так и на процедуре (и особенно на сроках) их принятия. Достаточно сказать, что спецификация HTML 2.0, единственным серьезным усовершенствованием в которой был механизм форм для отсылки информации с компьютера пользователя на сервер, была окончательно утверждена лишь в сентябре 1995 г., когда в W3C уже полным ходом шло обсуждение HTML 3, - или, как его называли поначалу, "HTML+".
HTML 3
Пожалуй, проект HTML 3 — самая яркая и неоднозначная страница в истории языка. Работа над ним началась в марте 1995 г., и первоначальный вариант стандарта включал в себя много интересных нововведений. Но самое главное — HTML 3 был попыткой разрешить уже достаточно очевидное к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, заинтересованных в первую очередь в гибких и богатых возможностях визуального представления.
Противоречие это было разрешено опять-таки в полном соответствии с идеологией SGML: W3C ввел в HTML 3 поддержку так называемых иерархических стилевых спецификаций - CSS. Система CSS формально независима от HTML, имеет совершенно иной синтаксис, не наследует никаких идеологических ограничений и позволяет, уже в совершенно иных терминах, задавать параметры графического представления для любого тега HTML. Нет сомнения, что CSS — почти идеальный способ избавить HTML от наследственных дефектов и перевести его развитие на принципиально новые рельсы.
"Война браузеров"
Коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г. группа разработчиков броузера Mosaic основала корпорацию Netscape Communications и вскоре выпустила первую версию коммерческого броузера Netscape (начиная с версии 2.0 — Netscape Navigator, а с версии 4.0 — Netscape Communicator). С этого момента начался экспоненциальный рост WWW, продолжающийся по сей день. Чтобы закрепить лидерство (на которое, впрочем, тогда еще мало кто покушался) и привлечь новых пользователей, Netscape вводила в HTML все новые и новые усовершенствования, — поддерживаемые, разумеется, только броузером Netscape.
Практически все новые теги, без устали изобретаемые Netscape, были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования. Причины понятны: чтобы убедить, скажем, бизнесмена, что ему пора обратить внимание на некую новую технологию, прежде всего нужно показать ему ее в привлекательном, «товарном» виде. В результате тот вариант HTML, который поддерживала выпущенная в начале 1996 г. версия Netscape Navigator 2.0, представлял собой довольно странную смесь старых логических тегов с беззастенчиво вломившимися новыми, ориентированными на графическое экранное представление документа и затрудняющими его воспроизведение на других устройствах вывода.
Такая политика компании, с одной стороны, принесла ей быстрый и впечатляющий успех (одно время версии Netscape Navigator составляли более 90% всех используемых броузеров), а с другой — вызвала ожесточенное сопротивление наиболее сознательной части HTML-сообщества. Энтузиасты неустанно разъясняли и разъясняют каждому, кто согласен их слушать, что HTML по природе своей не имеет права зависеть от какого-то конкретного броузера и что заявления типа «эту страницу лучше всего смотреть в Netscape Navigator» являются просто насмешкой над здравым смыслом.
В конце 1995 г. ситуация в мире HTML была довольно смутной. Популярность броузера Netscape неуклонно росла; программисты этой фирмы готовили к выпуску версию 2.0, которая должна была утвердить господство Netscape на вечные времена благодаря неслыханному набору новшеств (интерфейс подключаемых модулей - plugins, поддержка Java-апплетов, встроенный язык сценариев JavaScript, возможность разбивки окна на фреймы и многое другое). В этот переломный момент в игру вступил новый участник — корпорация Microsoft. Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка, недооценивала перспективы Интернета и не собиралась как-либо участвовать в развитии этой информационной среды. Однако невероятный взлет Netscape заставил Microsoft изменить свое мнение.
И именно на броузерном фронте, где господство Netscape оставляло меньше всего шансов конкурентам, корпорация Microsoft нанесла свой главный удар. Поначалу мало кто верил, что броузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял собой ничего выдающегося, сможет составить конкуренцию Netscape; Тем не менее выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все расширения Netscape, вызвала настоящий бум и очень быстро утвер¬дилась в качестве «второго главного броузера». Сейчас Microsoft и Netscape делят рынок броузеров почти поровну, и окончательный исход их битвы не берется предсказать никто.
HTML 3.2 и 4
Одновременно с разработкой конкурентоспособного броузера Microsoft решила "навести порядок" и в мире HTML. Взяв под свою опеку W3C, она снабдила его денежными и людскими ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации. Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2, который, по сути, всего лишь описывает большинство расширений Netscape (с тем же успехом их можно назвать теперь "расширениями Microsoft"). Пройдя обычный в W3C процесс обсуждения и внесения поправок, спецификация HTML 3.2 была утверждена в январе 1997 года. Расхождения между предписаниями стандарта и реализацией HTML в браузерах вновь были сведены к минимуму.
В декабре того же 1997 г., с принятием стандарта HTML 4.0, маятник, похоже, качнулся уже в обратную сторону - наряду с дальнейшим обогащением репертуара визуальных тегов, эта версия ввела немало пусть и не вполне "логических", но очень важных расширений для поддержки многоязычных документов и обеспечения доступности документа в разных средах. Кроме того, в HTML 4 наконец-то прямо в тексте стандарта четко проведено разделение логических и визуальных тегов (последние объявлены "нерекомендованными", "deprecated").
XML
XML - набор правил и соглашений о синтаксисе, с помощью которого можно создавать собственные наборы элементов разметки. Эти элементы, в свою очередь, можно использовать для описания содержимого. Своим появлением XML обязан невозможности применения HTML для описания данных самого разного рода, которые пользователи желают распространять через Web. Так, HTML практически невозможно использовать для описания финансовых данных, руководств по инсталляции программного обеспечения, математических выражений и множества данных других типов, которыми буквально наполнена сеть Web.
Хотя изначально HTML разрабатывался как язык разметки (описывающий содержимое и не зависящий от внешнего вида), со временем он превратился в язык дескрипторов, используемый разработчиками для настройки внешнего вида и передачи смысла информации Web-страницы. Распространение данных, тем не менее, характеризуется рядом особенностей, которые не вполне успешно учитываются в HTML.
Для достижения гибкости и согласованности, отсутствующей в HTML, и был разработан XML. Этот язык обеспечивает возможность создания собственных наборов элементов разметки, что позволяет при представлении содержимого выйти за пределы ограничений стандартных наборов HTML. Истинное назначение языка разметки - описывать части документа, не касаясь способов его визуализации и отображения. Разметка позволяет структурировать данные, а уже затем эти данные можно использовать по-разному.
XHTML
Язык XHML представляет собой словарь XML. Он построен в соответствии с правилами спецификации XML 1.0, поэтому документы XHTML являются одновременно и документами XML. XHTML - это измененная версия HTML 4.01, переписанная в соответствии с правилами XML.
На сегодняшний день существует несколько спецификаций XHTML:
XHTML 1.0 Transitional - является перезодным вариантом от традиционного HTML к XHTML. Требования к структуре документа и синтаксис не столь строгие как в XHTML
XHTML 1.0 Strict - спецификация для описания обыкновенного XHTML документа, обладающая всей строгостью XML.
XHTML 1.0 Frameset - спецификация XHTML для описания документа с фреймовой структурой (frameset).
XHTML 1.1 - в данной спецификации получили воплощение принципы модульной разметки. Модульный подход к развитию XHTML является ключевым элементом, благодаря которому отдельные пользователи и целые организации смогут применять для своих целей спецификацию XHTML, не тратя время на разработку частной разметки или версий спецификации. Модуляризация XHTML обеспечивает формальный механизм расширения XHTML в существующих рамках синтаксиса и соглашений XML.
За дополнительной информацией по каждой из вышеперечисленных спецификаций посетите сайт W3C: http://www.w3.org
Краткий обзор броузеров и их возможностей.
Браузер (англ. Browser - обозреватель) - программа, позволяющая загружать и просматривать web-страницы. Именно просмотр web-страниц и является основной функцией браузера, и то, как он с ней справляется, определяет его позицию в рейтинге популярности.
Помимо основной функции, ряд браузеров поддерживает дополнительные возможности, позволяющие упростить и сделать более комфортной работу пользоватлей в мировой сети Internet. Среди этих возможностей можно особо выделить поддержку просмотра множества страниц в одном окне (на вкладках), блокирование нежелательной рекламы (банеров и всплывающих окон), быстрый доступ к различного рода опциям загрузки страницы (отключение изображений, анимации и пр. для умеличения скорости загрузки).
Ниже приводится перечень наиболее популярных на сегодняшний день браузеров:
Microsoft Internet Explorer
Mozilla Firefox
Opera
Безусловно, это далеко не полный перечень, однако, мы не будем заострять внимания на остальных браузерах, не вошедших в этот список.
Microsoft Internet Explorer (MSIE)
Данный браузер, безусловно, является лидером в современном первенстве браузеров. Созданный Microsoft Corporation, он приобрел широкую известность, в основном благодаря авторитету и политике компании. MSIE давно поставляется как часть операционной системы Microsoft Windows, и поэтому доступен любому ее пользователю.
Mozilla Firefox
Это совсем молодой браузер, созданный компанией разработчиков браузера Mozilla - прародителя большинства современных браузеров. Год "рождения" Firefox - 2004, так что он по праву может считаться наиболее современным. Из числа наиболее достопримечательных дополнительных возможностей можно выделить:
поддержка вкладок, позволяющих просматривать множество страниц в одном окне программы, не занимая много места на панели задач
быстрый доступ к таким функчиям, как отключение загрузки изображений (экономи траффика и ускорение загрузки документа)
поддержка альтернативнх схем оформления внешнего вида (skins) и дополнительных модулей (plugins), расширяющих его возможности
просмотр и анализ исходного кода страницы на предмет соответствия современным стандартам (только после установки дополненительного модуля)
Кроме всего вышеперечисленного, Firefox имеет встроенный менеджер закачек, с поддержкой докачки файла при обрыве соединения.
Opera
Приятный и удобный интерфейс Opera легко настраивается. Браузер имеет встроенный менеджер закачек с поддержкой докачки файла при обрыве соединения и встроенный почтовый клиент. Просмотр страниц осуществляется на вкладках, что экономит место на панели задач Windows. Для пользователей, требовательных к внешнему виду программ, приятной особенностью будет поддержка схем оформления внешнего вида - skins. Последняя на сегодня версия - 8.0 beta.
Краткий обзор редакторов и их возможностей.
Прежде чем приступать к изучению структуры XHTML документа и набора элементов и правил их записи, необходимо, так же, определиться с выбором инструментов для работы с документом. Основным инструментом, используемым для создания web-страниц, является текстовый редактор. Для этой цели подойдет практически любой редактор (к примеру, "Блокнот" Windows). В профессиональной же деятельности web-мастера, к которой, несомненно, готовятся некоторые из вас, огромное значение играет не только возможность правки текста, а еще и ряд дополнительных характеристик редактора, облегчающих процесс разработки и расширяющих его функциональность:
Поддержка различных кодировок текста. Рекомендуемой кодировкой текста для докуменотов XHTML является "UTF-8", однако, web-страница может быть создана и с использованием другой кодировки (например, KOI8-R или Windows-1251). Таким образом, чем шире спектр поддерживаемых редактором кодировок текста, тем меньше вероятность попасть в тупиковую ситуацию - не имея возможности отредактировать документ, созданный в неизвестной кодировке. Более подробно кодировки будут рассматриваться нами в одном из следующих уроков.
Подсветка синтаксиса. Создавая текстовые XHTML документы высокой сложности, вы скоро придете к выводу, что использование редактора, не делающего различия между элементами разметки и текстовым содержимым страницы (например, "Блокнот" Windows) сильно затрудняет визуальный разбор документа и его правку. Существует ряд редакторов, таких как AceHTML или MS Visual Studio, позволяющих выделить элементы разметки XHTML альтернативным цветом и/или начертанием, и тем самым облегчить разработку и отладку web-страниц.
Возможность запуска встроенного или внешнего браузера для просмотра страницы. Безусловно, любой XHTML документ можно запустить в браузере непосредственно оттуда, где он был сохранен или размещен разработчиком, однако эта процедура требует ряда дополнительных операций, отвлекающих от основной задачи - разработки кода и контента страницы. Знакомые с основами разработки приложений на С++ в среде MS VisualStudio, вы, несомненно, сочтете удобной такую возможность, как запуск документа "на выполнение" нажатием клавиши на клавиатуре, или кнопки на панели инструментов редактора. К примеру, редактор AceHTML при установке сам "найдет" установленные в системе браузеры (IE, Opera, Mozilla и пр.) и свяжет с каждым из них сочетание клавиш для быстрого запуска.
Поддержка шаблонов кода. Использование шаблонов кода позволяет избавить разработчика страниц от не слишком то увлекательного процесса повторного ввода или копирования часто повторяющегося и, к тому же, довольно большого фрагмента страницы. Сохранив один раз такой фрагмент и назначив ему быстрый доступ в виде сочетания клавиш или кнопки на панели инструментов, вы можете в дальнейшем легко вставить его в нужное место на странице. Некоторые редакторы имееют предопределенные разработчиками шаблоны кода.
Поддержка функции "Code Completion". Суть данной фкнкции состоит в подсказке разработчику возможных вариантов продолжения начала вводимой им конструкции. При выборе варианта продолжения, редактор сам "вбивает" недостающие части конструкции, упрощая и ускоряя процесс разработки. Такая функция, к примеру, реализованна в системе разработки MS VisualStudio.NET 2003. Редактор подсказывает разработчику возможные варианты продолжения вводимой конструкции не просто так, а в зависимости от контекста, определяя допустимость данной конструкции в данном месте кода страницы.
Проверка документа на соответствие стандарту. Ряд редакторов позволяет выполнять проверку исходного кода страницы на предмет соответствия выбранной спецификации. Процесс разработки страниц в таком редакторе начинает напоминать процесс разработки приложений на современных языках программирования: набор кода, проверка на наличие ошибок и отладка, тестовый запуск.
Далее представлен ряд редакторов, рекомендуемых для использования и их основные возможности.
VisicomMedia AceHTML 6 Pro
Этот редактор примечателен тем, что при широком спектре поддерживаемых возможностей, занимает немногим более 15 МБ на жестком диске. В числе основных особенностей данного редактора есть
поддержка всевозможных кодировок текста
качественная и легко настраиваемая подсветка синтаксиса
функция Code Completion (работающая, впрочем, не всегда корректно)
поддержка предопределенных и легко настраиваемых пользовательских шаблонов кода
просмотр страниц внутренним или внешним браузером (можно использовать любой установленный в системе браузер, например Opera или Firefox).
настройка атрибутов и стиля элементов с помощью специальной панели Code Inspector.
Проверка соответствия документа выбранной спецификации не поддерживается.
MS VisualStudio.NET 2003
Это один из наиболее мощных рассматриваемых нами инструментов разработки. В нем реализованна наиболее мощная поддержка функции Code Completion, грамотная и легко настраиваемая подсветка синтаксиса и работа с текстом в различных кодировках.
К числу его недостатков можно отнести лишь 1.5 ГБ требуемого для установки пространства на жестком диске, высокие требования к производительности компьютера и отсутствие возможности запуска страницы на просмотр в браузере (как внутреннем, так и внешнем).
CSE HTML Validator
Основное достоинство данного редактора - возможность проверки документа на соответствие выбранной спецификации. Так же поддерживаются различные кодировки текста, предопределенные и пользовательские шаблоны кода (последние, впрочем, довольно сложно настроить) и запуск страницы на просмотр во внешнем браузере (для этого используется системный браузер по умолчанию).
Кроме того, данный редактор обладает довольно простенькой, однако, вполне достаточной, подсветкой синтаксиса. Поддержка функции Code Completion отсутствует. Занимает данный редактор не более 10 МБ на жестком диске.
Мы рекомендуем
Я рекомендую в качестве основного средства разработки использовать AceHTML как один из наиболее удобных и легко настраиваемых. Для проверки страниц на наличие ошибок установите и используйте CSE HTML Validator.
Но лично я для вёрстки использую NotePad++ и Adobe DreamWeaver, это 2 очень удобные среды для работы с html/xhtml/css.
Структура HTML-документа.
Итак, после выбора средств разработки, а именно редактора (для создания страниц) и браузера (для их тестирования), мы с вами приступаем непосредственно к рассмотрению структуры документа XHTML.
Первое, что вы должны узнать об XHTML документах, это то, что они являются обыкновенными текстовыми файлами, содержащими специальные текстовые метки, называемые элементами разметки. Набор этих меток составляет структуру XHTML документа и, в общем то, определяет его внешний вид. Набор символов по умолчанию для XHTML документов - UTF-8, однако, ничто не помешает нам воспользоваться и другой кодировкой (о кодировках и их указании речь пойдет в одном из следующих занятий).
Чтобы создать XHTML документ с помощью программы AceHTML 6, воспользуйтесь командой File \ New.... В списке доступных шаблонов выберите XHTML Document. После нажатия кнопки "Ok" вашему вниманию предстанет примерно такая структура:
Код:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple XHTMl Document</title>
</head>
<body>
<h1>Простой документ</h1>
Документ, который вы видите, представляет собой
простой XHTML документ, содержащий один заголовок и
один абзац текста...
</p>
</body>
</html>На данном этапе изучения материала рекомендуется принять как должное такую структуру документа и использовать ее, не вникая глубоко в назначение ряда ее элементов. Некоторые из них рассматриваются ниже подробно, остальные будут рассмотренны по мере необходимости далее.
XML декларация
Код:
<?xml version="1.0" encoding="utf-8"?>Этот элемент присутствует в любом XML документе, каким так же является и XHTML документ. Декларация XML указывает браузеру на то, что данный документ построен в соответствии с синтаксисом XML разметки версии 1.0 и использует набор символов utf-8. В общем случае, xml декларацию можно не указывать, так как кодировкой символов по умолчанию для документов XHTML является именно utf-8. Однако, при использовании альтернативной кодировки (например windows-1251), указывать xml декларацию необходимо.
Определение Типа Документа (DTD)
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Созданный в примере выше XHTML документ соответствует спецификации XHTML 1.1.
Корневой элемент - <html>
В соответствии с синтаксисом XML, любой документ должет иметь единственный элемент верхнего уровня, в который должны быть вложенны остальные элементы. Для XHTML документов роль корневого играет элемент <html> ... </html>. В него вкладываются остальные элементы, такие как <head> - раздел заголовка и <body> - тело, содержательная часть документа.
Раздел заголовка - <head>
В разделе заголовка обычно размещают информацию, характеризующую страницу в целом. Как то:
1.Создание заголовка страницы
2.Указание кодировки страницы
3.Перечисление ключевых слов, помогающих поисковым системам проиндексировать вашу страницу
4.Описание или подключение таблиц стилей и сценариев
Заголовок страницы можно указать при помощи элемента <title>. Например так:
Код:
<head>
<title>Текст заголовка страницы</title>
...
</head>ъ
Подбор краткого и информативного заголовка обеспечивает более быструю и простую ориентацию пользователя среди большого количества одновременно просматриваемых документов.
С остальными элементами раздела заголовка вы познакомитесь по мере освоения курса.
Тело документа - <body>
Тело документа представляет собой то, ради чего создается документ - его содержательную часть, то, что увидит конечный пользователь на странице. Здесь происходит разбиение текста страницы на структурные блоки (заголовки и абзацы), выполняется вставка изображений, таблиц, списков и прочих элементов содержания.
В приведенном выше примере документ содержит заголовок 1-го уровня ("h1") и абзац ("p").
продолжение следует...
если кому-то что-то не ясно, можете задавать вопросы...
