используются при создании таблиц и подробно рассматриваются в отдельной статье .
- тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри
вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий - всё это элементы формы, код которых размещается внутри контейнера
.
- тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами
).
создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер
. Но зачем нам тогда отдельно
, если есть универсальный
?
позволяет создать кнопку с расширенными параметрами. Например, на кнопке можно разместить картинку. На элементе, созданном через
, такого сделать нельзя.
и
- теги создания меню в HTML 5.
- это контейнер, внутри которого помещаются элементы
, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
XML
предназначен для широкого использования, символы не ограничены 7-битным набором символов ASCII
. К числу символов, допустимых в языке XML
, относятся три управляющих символа СО
стандарта ASCII
, все обычные символы этого стандарта и почти все остальные символы Unicode
Имена.В языке XML
все имена должны начинаться с буквы, символа нижнего подчеркивания (_) или двоеточия (:) и продолжаться только допустимыми для имен символами, а именно они могут содержать только буквы, входящие в секцию букв кодировки Unicode, арабские цифры, дефисы, знаки подчеркивания, точки и двоеточия. Однако имена не могут начинаться со строки xml
в любом регистре. Имена, начинающиеся с этих символов, зарезервированы для использования консорциумом W3C
. Нужно помнить что так как буквы не ограничены исключительно символами ASCII
, то в именах можно использовать слова из родного языка.
Структура XML- документа.Любой XML
-документ состоит из следующих частей:
- Необязательный пролог.
- Тело документа.
- Необязательный эпилог, следующего за деревом элементов.
Рассмотрим каждую из частей более подробно.
Пролог XML- документа.Документ XML
начинается с пролога. В прологе содержатся некоторые указания, предназначенные для анализатора XML
и приложений.
Пролог
состоит из нескольких частей:
необязательное объявление XML (XML Declaration) которое заключено между символами . Объявление содержит:- пометку xml и номер версии (version) спецификации XML;
- указание на кодировку символов (encoding), в которой написан документ (по умолчанию encoding="UTF-8"
);
- параметр standalone
который может принимать значения "yes" или "no" (по умолчанию standalone="yes"
). Значение "yes" показывает, что в документе содержатся все требуемые декларации элементов, a "no" - что нужны внешние определения DTD
.
Все это вместе может выглядеть следующим образом:
.
Важно отметить, что в объявлении XML только атрибут version является обязательным, все остальные атрибуты могут быть опущены и, следовательно, принимать значения по умолчанию. Так же нужно помнить, что все эти атрибуты следует указывать только в приведенном выше порядке.
комментарии.
команды обработки.
символы пустых пространств.
необязательное объявление типа документа
, DTD
(Document Type Declaration
) которое заключено между символами
и может занимать несколько строк. В этой части объявляются теги, использованные в документе, или приводится ссылка на файл, в котором записаны такие объявления.
После объявление типа документа
так же могут следовать комментарии, команды обработки и символы пустых пространств.
Поскольку все эти части необязательны, пролог
может быть опущен.
Тело 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-коде со всеми закрывающими тегами гораздо проще ориентироваться и править его. Ну да я вам об этом еще не раз напомню.
Пример использования тегов
Жирный шрифт Курсивный шрифт
Результат в браузере
И все таки, как будет правильно - «теги» или «элементы»?
Вообще, в большинстве случаев правильно будет говорить - «элементы». Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B
и I
. Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.
Так уж сложилось, что на сегодняшний день слово «тег» прочно вошло в русский язык (да и не только в русский) в качестве синонима слову «элемент». Я думаю из-за того, что при использовании обоих слов не теряется смысл повествования. Поэтому в данном учебнике я тоже буду использовать оба этих слова, чтобы вы привыкли к ним и научились подсознательно определять, о чем идет речь в каждом конкретном случае. И сильно на этом не заморачивайтесь, знаете, чем отличается тег от элемента - вот и хорошо.
Теги можно указывать в одну строку, а можно в несколько
Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов - все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:
Жирный шрифт
Курсивный шрифт
Результат в браузере
Правильная вложенность тегов
Многие теги можно вкладывать друг в друга, чтобы они вместе воздействовали на один и тот же элемент страницы. Но при этом важно соблюдать правильную вложенность - тег, появляющийся раньше, должен закрываться позже. Кстати, ошибка вложенности является одной из самой распространенной среди новичков.
...
- правильно
...
- неправильно
Пример использования вложенных тегов
Жирный курсивный шрифт
Результат в браузере
Родительские и дочерние теги, потомки и предки
Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:
...
...
Родительские теги
- тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере
является родительским для
и
, но не является для тега
. А вот
родитель
.
Дочерние теги
- обратно родительским.
и
дочерние для
, а
для тега
.
Предки
- тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности.
предок для всех тегов, а
предок
.
Потомки
- обратно предкам. Все теги - потомки тега
, но
еще и потомок тега
.
Ну что, не запутались? Чтобы проще запомнить, проведите аналогию со своим семейным древом и сразу все встанет на свои места.
Что значит «один тег содержит другой»?
Как вы уже знаете, теги можно вкладывать друг в друга и, соответственно, одни могут содержать другие. Но тут есть один небольшой, но очень важный момент, которому новички часто не уделяют должного внимания. Давайте возьмем уже знакомый нам пример:
...
...
Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй - дочерним и никак иначе. то есть в нашем примере
содержит
и
, но не содержит
. А вот
как раз и содержит
. Немного необычно, правда? Но своя логика в этом есть, согласитесь.
Каждый HTML-элемент может содержать только определенный набор тегов, а некоторые вообще не могут содержать ничего кроме текста. Все это зависит от типа, к которому относится тег, поэтому, перед тем как вкладывать теги, проверьте - может ли один из них содержать другой.
Типы тегов
В HTML, теги делятся на несколько типов или моделей:
Inline (встроенные, уровня строки)
- все, что выводят эти теги на страницу, всегда отображается браузером на одной сроке. И только если доступной ширины (например, ширины окна браузера) не хватает, то происходит перенос строки на следующую и т.д.
Пример использования встроенных тегов
Жирный шрифт Курсивный шрифт
Результат в браузере
Block (блочные, уровня блока)
- все, что выводит каждый из таких тегов на страницу, отображается браузером с новой строки, После себя такие элементы также создают переносы строк.
Пример использования блочных тегов
Параграф 1
Параграф 2
Результат в браузере
Параграф 1
Параграф 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
, поэтому они и присутствуют в пределах .
