В языке XML все имена должны начинаться с буквы, символа нижнего подчеркивания (_) или двоеточия (:) и продолжаться только допустимыми для имен символами, а именно они могут содержать только буквы, входящие в секцию букв кодировки Unicode, арабские цифры, дефисы, знаки подчеркивания, точки и двоеточия. Однако имена не могут начинаться со строки xml в любом регистре. Имена, начинающиеся с этих символов, зарезервированы для использования консорциумом W3C . Нужно помнить что так как буквы не ограничены исключительно символами ASCII , то в именах можно использовать слова из родного языка.
Структура XML- документа.Любой XML -документ состоит из следующих частей:
Рассмотрим каждую из частей более подробно.
Пролог XML- документа.Документ XML начинается с пролога. В прологе содержатся некоторые указания, предназначенные для анализатора XML и приложений.
Пролог состоит из нескольких частей:
Все это вместе может выглядеть следующим образом:
.
Важно отметить, что в объявлении XML только атрибут version является обязательным, все остальные атрибуты могут быть опущены и, следовательно, принимать значения по умолчанию. Так же нужно помнить, что все эти атрибуты следует указывать только в приведенном выше порядке.
После объявление типа документа так же могут следовать комментарии, команды обработки и символы пустых пространств.
Поскольку все эти части необязательны, пролог может быть опущен.
Тело XML-документа.Тело документа состоит из одного или больше элементов. В правильно оформленном XML документе элементы формируют простое иерархическое дерево , в котором обязательно присутствует корневой элемент ( root element ) в который вложены все остальные элементы документа. Язык XML налагает на элементы чрезвычайно важное ограничение - они должны быть правильно вложены. Это позволяет достаточно легко вложить один XML - документ в другой не нарушая структуру документа, при этом корневой элемент вложенного документа станет просто одним из элементов документа, в который он вложен. В связи с этим мы сталкиваемся с еще одним ограничением, а именно с тем, что имена элементов должны быть уникальны в пределах документа, поскольку во включенном документе такие же имена, что и во включающем могут иметь совершенно иной смысл. Для решения проблемы совпадающих имен введено понятие пространства имен.
Имя корневого элемента считается именем всего документа и указывается во второй части пролога после слова Doctype . Если определение DTD находится внутри XML - документа, то оно помещается в квадратных скобках после имени корневого элемента:
Но обычно определение DTD составляется сразу для нескольких XML -документов. В таком случае его удобно записать отдельно от документа и тогда вместо квадратных скобок записывается одно из слов System или Public после которого идет адрес в форме URI ( Uniform Resource Identifier ) файла с определением DTD . Для всех практических целей URI считается эквивалентом адреса URL , хотя в принципе это может быть любое уникальное имя. Определение DTD , например, может выглядеть следующим образом:
Пространства имен XMLПоскольку в разных XML -документах могут встретится одни и те же имена тегов и их атрибутов, имеющие совершенно разный смысл, надо иметь возможность их как-то различать. Для этого имена тегов и атрибутов снабжают кратким префиксом, который отделяется от имени двоеточием. Префикс имени связывается с идентификатором, определяющим пространство имен (namespace ). Все имена тегов и атрибутов, префиксы которых связаны с одним и тем же идентификатором, образуют одно пространство имен , в котором имена должны быть уникальны. Префикс и идентификатор пространства имен определяются атрибутом xmlns следующим образом:
В дальнейшем имена тегов и атрибутов, которые мы хотим отнести к пространству имен "http://URI_namespace" , снабжаются префиксом ns, например:
Новосибирск.
Атрибут xmlns может появиться в любом элементе XML , а не только в корневом. Определенный им префикс можно применять в том элементе, в котором записан атрибут xmlns , и во всех вложенных в него элементах. Более того, в одном элементе можно определить несколько пространств имен. Во вложенных элементах пространство имен можно переопределить, связав префикс с другим идентификатором. Появление имени тега без префикса в документе, использующем пространство имен , означает, что имя принадлежит пространству имен по умолчанию. Префиксы, начинающиеся с символов xml с любым регистром букв, зарезервированы за самим языком XML .
Имя вместе с префиксом называется расширенным или уточненным именем. Часть имени, записанная после двоеточия, называется локальной частью имени.
Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом.
Что такое HTML-тег, виды HTML-тегов, примеры написанияHTML-тег — в переводе с английского tag — помечать -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на английском языке (весь интернет на нем построен). Тег имеет видЭто тег выделения текста жирным шрифтом. Теги имеют три вида:
Вся конструкция, включая текст, будет выглядеть следующим образом:
Этот текст будет выделен жирным
А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:Этот текст будет выделен жирным. Существует еще такое понятие, как контейнерные теги , но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.
В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.
Что такое атрибуты,правила написания и зачем они нужны Помимо тегов существуют еще и так называемые атрибуты . Точнее не помимо, а в тегах. С помощью атрибутов можно задать дополнительные параметры для какого-либо тега. Атрибуты для каждого тега свои, а в данной теме мы будем экспериментировать над тегом , который без атрибутов, собственно, ничего толкового не делает.Font — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.
Текст
Теперь немного про правила написания атрибутов. Атрибуты всегда пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:
Текст
Данный атрибут в теге font изменяет размер заключенного в теги Текста.
Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид
Текста
Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.
Что такое валидатор (validator) W3C, правила написания и список тегов Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует валидатор W3C W3C - World Wide Web Consorcium, а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе).Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах):
А сразу после легенды идет таблица самих тегов:
Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.
Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.
Создание файла в формате html — HTML-документПрежде всего, разберемся что такое HTML-документ . А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).
Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать Notepad++ , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде
Итак, нам нужно просто открыть Notepad++ и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений «HyperText Markup Language file (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»
Тег - это специальное зарезервированное слово, заключённое в угловые скобки (например, ). Тег - основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не , а .
Какими бывают теги?Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/ ) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым .
Содержимое Помещённый внутри этих тегов текст становится жирным
Бывают и непарные (одиночные) теги, которые называются метками
. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега -
. Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги - это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) - это знаки препинания (восклицательный, вопросительный или точка).
Любой тег состоит из:
Так как теги - основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
, , , и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML» .
или блок . Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег .
, и |
) и другие теги? Простейший способ — текстовый редактор с подсветкой синтаксиса. Скачайте notepad++ поддерживающий десятки языков программирования. Нужные для веб-кодинга HTML, JavsScript, PHP и другие языки он подсвечивает.
Проверить обычные HTML элементы не сложно, и если незакрытые теги вставки гиперссылки «
» теги форматирования «
» / «
» или «
» можно определить визуально, то с блочными элементами вроде дивов и таблиц это не сработает. Код большой, один див является оберткой другого, при большой вложенности можно перепутать и случайно удалить один элемент и верстка поедет. Что бы определить незакрытый тег (html элемент страницы) включаем подсветку в notepad++ Проверка заключается в закрытии одного дива за другим нажатием на плюсики «+», если тег не закрывается, значит, закрывающегося тега нет. Исследуем код и прописываем недостающий в нужно месте. Определить к какому закрывающемуся тегу относится элемент можно нажатием в редакторе на этот тег. Редактор подсветит открывающейся и относящийся к нему закрывающейся тег. Можно определить ошибку при просмотре, когда закрывающегося элемента не обнаруживается, или он относится к другому элементу, который рушит логику кода. Это простейший способ проверки, требующий ручной работы. Автоматизированных систем нет, только программист может понять, где нужно прописать закрытие дива или таблицы, не нарушив визуального оформления страницы. Используйте встроенные отладчики FireBug (FireFox) и инспекторы-исследователи встроенные в браузер. Открыть отладчик (редактор) кода в Opera можно нажатием комбинации «Ctrl-Shift-C» или как показано на рисунке. Правой кнопкой мыши жмем на исследуемом объекте и в контекстом меню жмем «Просмотреть код элемента».Валидатор HTML: Общий анализ и поиск ошибок в коде Проверить код на ошибки можно валидатором HTML — W3C. Markup Validation Service (MVS) — Этот валидатор проверяет правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д. Если вы хотите проверить конкретный контент, такой как RSS / Atom-каналы или таблицы стилей CSS, содержимое MobileOK или найти неработающие ссылки, есть другие валидаторы и доступные инструменты. В качестве альтернативы можете попробовать наш валидатор на основе не DTD. Сервис позволяет проверить CSS, HTML, XHTML, JS… после анализа сайта сервис выдаст ошибки и метод устранения проблемного участка кода.. Можно исправить, но не обязательно прислушиваться к сервису если ваш сайт нормально отображается и индексируется. Каждый 2 крупный сайт не до конца соблюдает стандарты HTML, проверьте сами. Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем. В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями. И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид: А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе. Функции тега Итак, тег является контейнерным (). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно. Даже учитывая то, что функция данного тега лишь в обозначении границ содержимого , он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию. Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом: А вот что вы увидите, наведя курсор на документ с данным содержимым: Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее. Функция тега И следующим на очереди идет тег . В нем содержится вся техническая информация о странице, которая служит для помощи браузеру и поисковым системам. Тег является контейнерным и следует сразу после , только в отличии от последнего, закрывающий тег стоит не в конце документа, а перед открывающим тегом .Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров . Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример: Текст после иконки и есть содержание тега . А теперь рассмотрим содержание , которое мы увидеть не можем, но которое является очень важной частью создания и продвижения сайта. В первую очередь это строка
Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега . Он указывает на связь с внешним документом. Например, строка
указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей . Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack , поэтому они и присутствуют в пределах . |