Не пропусти
Главная » Интернет новичку » Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

>

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)

Здравствуйте, уважаемые читатели блога Я хочу продолжить рассказывать об основах работы с Html с самого начала, последовательно и ничего не опуская. Сегодня мы поговорим о специальном теге (декларации) Doctype, узнаем как правильно оформлять комментарии в ХТМЛ коде, как прописывать заголовок веб документа Title и постараемся разобраться в отличиях блочных и строчных элементах.

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

В предыдущей статье из рубрики Html для чайников (в которой в основном рассказывалось про то, что такое язык ХТМЛ, тэги и валидатор W3C) мы закончили на том, что любой документ в интернете должен иметь определенную структуру.

Директива Doctype для Html, Xhtml и ХТМЛ 5

Первым элементом языка разметки, который вы встретите в любом правильном Web документе (странице сайта), будет специальная директива Doctype. Она начинается с угловой скобки и проставленного сразу же за ней восклицательного знака <! . В этой статье кроме нее мы еще рассмотрим декларацию, которая называется комментарий.

Сам по себе элемент Doctype служит для объявления типа данного документа и помогает браузеру понять, на какую версию Html или XHTML (по классификации валидатора W3C) ему следует опираться при разборе кода загружаемой веб страницы.

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



Но давайте на этом остановимся чуть поподробнее. Сейчас мы с вами наблюдаем некий дуализм или же два типа документов в сети — как делали раньше до выделения CSS из лона языка ХТМЛ и как делают сейчас по принятым современным стандартам.

Естественно, что после принятия новых стандартов в сети интернет оставалось все равно огромное множество документов, созданных по старым принципам чистого ХТМЛ (без CSS) и браузеры должны были с ними как то работать. Корпорация Майкрософт в свое время предложила использовать эту самую директиву Doctype из нового языка разметки XML.

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

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

Документ в этом случае будет отображаться таким образом, как будто бы этот браузер очень старый (старинный). Если в этот же документ добавить декларацию, то браузер будет осуществлять разбор кода с учетом всех имеющихся на текущий день стандартов.

Правда, понятие старого браузера очень уж расплывчатое. Все тот же лидер по скорости работы и скорости западания в сердца пользователей Google Chrome (как его установить и настроить описано тут) появился-то только в 2008 году.



У IE (тут можно скачать последнюю версию Эксплорера и не пожалеть) история гораздо более долгая, именно поэтому все браузеры в режиме quirks mode (уловок, т.е. когда декларация не была прописана) будут отображать вебстраницу точно так же, как это бы делал старинный IE версии 5.5 (она считается базовой).

Более подробно и на конкретном примере узнать о том, почему обязательно нужно прописывать Doctype в начале любого веб документа, вы сможете из этой статьи про CSS свойства height, width и overflow. На самом деле поучительно.

Хотя, если вы создаете свой проект на базе какого-либо движка или другими словами CMS, то за правильность формирования этой декларации будет отвечать используемый вами движок, но знать назначение Doctype и варианты его написания все равно лишним, на мой взгляд, не будет.

Выглядеть это дело может, например, так:

Если вы читали мою предыдущую статью, то, наверное, поняли, что данная директива в этом случае указывает браузеру на то, что код данного документа нужно будет разбирать, опираясь на стандарты языка HTML 4.01. Для поиска нужного вам варианта вы можете обратиться к описанному в предыдущей статье валидатору W3C, но чтобы там найти что нибудь, нужно точно знать где это лежит, иначе.

Сайт валидатора W3C не обладает дружественным интерфейсом и интуитивно понятной навигацией. Там вы запросто можете найти вариант директивы с относительной ссылкой на страницу с описанием нужного вам стандарта ХТМЛ или XHTML и, вставив такой вариант к себе на сайт, ничего хорошего не получите:



При таком варианте Doctype браузер будет искать документ с описанием стандарта на вашем собственном сайте, добавив к относительной ссылке «TR/html4/strict.dtd» доменное имя вашего ресурса: «http://ktonanovenkogo.ru/TR/html4/strict.dtd».

В общем, такая директива работать не будет и в будущем следует обращать особое внимание на наличие «http://www.w3.org/» в ее коде, чтобы не наступить на подобные грабли.

В общем-то существует всего лишь несколько вариантов DOCTYPE для Html и еще несколько для XHTML. Все эти варианты вы сможете посмотреть на соответствующей странице валидатора W3C.

Давайте начнем со стандарта языка гипертекстовой разметки 4.01 (ХТМЛ 5 пока что еще только разрабатывается). Для этого случая существует три варианта Doctype: строгий, переходный и с поддержкой фреймов:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Чаще всего используют второй вариант (Transitional), т.к. он допускает больше вольностей в написании кода документа, ну, а вариант с фреймами вам вряд ли пригодится, в силу неактуальности их использования на сегодняшний день.

Собственно, имеются такие же три варианта Doctype для XHTML — строгий, переходный и с поддержкой фреймов:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Но давайте посмотрим откуда берутся эти варианты правильного написания декларации. Помните, мы в первой статье рассматривали таблицу допустимых Html тэгов:



Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

И отдельную таблицу возможных Html атрибутов:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Как вы можете видеть, в обеих этих таблицах присутствует столбец «Depr», в котором буквой «D» помечены устаревшие и не рекомендуемые к применению теги и атрибуты языка ХТМЛ. Это мы с вами уже рассмотрели. Но обратите внимание, что напротив каждой буквы «D» в соседнем справа столбце «DTD» стоит либо буква «L» (Loose DTD), либо буква «F» (Frameset DTD).

Т.о. все теги и атрибуты, которые не помечены буквами «D» (не рекомендуемые) входят в строгую декорацию Doctype (только рекомендованные элементы и ничего более). Если же вы все-таки будете допускать использование не рекомендованных тегов и атрибутов языка Html (они помечены литерой «D»), то нужно будет объявлять для таких документов декларацию переходную.

Некоторые элементы и атрибуты, помеченные в столбце «DTD» буквой «F» (например, FRAME, FRAMESET), будут входить в декларацию Doctype для фреймовых структур. Она базируется на основе переходной, к которой добавляются теги и атрибуты для создания фреймов, о которых вы можете почитать по приведенной ссылке.

А теперь давайте попробуем разобраться, а из каких частей состоит декларация Doctype?



Сначала идет название — «Doctype». Тут, думаю, все понятно. Дальше идет «Html» — корневой элемент данного языка разметки. Затем идет указание — публичная данная декларация или же системная. Все варианты Doctype являются публичными, что обозначается словом «PUBLIC».

А дальше идут два идентификатора документа. Первый из них называется публичным идентификатором («-//W3C//DTD HTML 4.01//EN»). Минус означает то, что данная декларация не зарегистрирована в стандарте ИСО. Затем следует название консорциума, ее название и язык, на котором она написана. Во втором идентификаторе указывается путь до файла строгого варианта.

Ну, а теперь давайте раскрою вам всю правду про Doctype. Браузерам важно только формально правильное ее написание, но они ни в коем разе не полезут на сайт консорциума, чтобы скачать указанный в ней файл.

Даже если вы выберите вариант строгой декларации и при этом будете использовать не рекомендуемые в современной версии Html теги и атрибуты, то любой браузер все равно вас правильно поймет — это факт проверенный и подтвержденный.

Поэтому, чтобы не мудрствовать лукаво, в Html 5 написание Doctype будет выглядеть уже вот так:

И все. Оставили только «Html». И несмотря на то, что ХТМЛ 5 еще не полностью внедрен, данный вариант поддерживается всеми современными браузерами и вы можете смело им пользоваться. О как, а вы говорите.



Html комментарии в исходном коде страницы и тег Title

В служебной области Web документа (между тэгами Head) обязательно должен быть прописан заголовок этого самого документа (веб страницы), заключенный в элементы Title (см. на приведенном рисунке).

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

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

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

Содержимое метатега Title будет отображаться вверху окна браузера пользователя и в поисковой выдаче Google и Яндекса, поэтому, помимо содержания в нем ключевых слов, он должен стимулировать пользователей перейти именно на ваш сайт из поисковой выдачи. Для каждой страницы вашего ресурса заголовок тайтл должен быть уникальным, иначе будет ухудшение в ранжировании вашего проекта.

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



Особенно актуальны комментарии в Html были во времена господства табличной верстки (читайте про ХТМЛ таблицы), ибо тогда, по сравнению с современной блочной версткой (тут описана Div верстка на примере), очень просто было запутаться, что и в какой ячейке таблицы выводится:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Наверное, из приведенного выше примера вы уже поняли, что все комментарии в языке Html начинаются точно так же, как и любые другие элементы — с угловой скобки, но сразу же после нее, при формировании комментария, нужно будет поставить восклицательный знак (при описании Doctype я упоминал, что комментарии тоже являются декларациями, которые обязательно начинаются с <! ) и два дефиса, а перед закрывающей угловой скобкой комментария нужно будет поставить еще пару дефисов:

Весь текст комментария, который будет находиться между этими двойными дефисами, будет рассматриваться браузерами как служебная информация и никак обрабатываться не будет. Корректность его написания можно наглядно оценить при использовании описанного тут Html редактора notepad с подсветкой кода:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

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



Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Все довольно просто и думаю, что с ними у вас проблем не возникнет. Хотя есть одна тонкость в работе с многострочными комментариями в ХТМЛ. Внутрь одного комментария нельзя помещать другой, иначе часть закомментированной информации может быть отображена браузером на веб странице. Давайте для примера рассмотрим такую конструкцию:

Итак, браузер при разборе кода веб страницы обнаружит открывающие символы декларации комментария и начнет поиск закрывающих. Найдет его после слов «Вложенный коммент», а вот все остальное (в нашем случае это продолжение внешнего коммента—> ) будет обработано браузером и выведено на веб странице.

В принципе, если вы пользуетесь при написании Html кода редактором с подсветкой, то сразу же заметите неладное по изменению цвета вашего комментария:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Понятие блочных и строчных элементов (тегов) в Html

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

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



Самыми яркими и показательными представителями строчных и блочных тэгов являются, соответственно, Div (блочный элемент — отсюда и пошло название блочной верстки) и Span (строчный). Эти теги языка гипертекстовой разметки являются парными, т.е. у них есть открывающий и закрывающий тэг.

Вообще, теги Div и Span не имеют абсолютно никакого предназначения и смысла в чистом Html без использования таблиц каскадных стилей CSS. Они являются контейнерами, позволяющими изменять свойства заключенных в нем элементов через CSS.

Если вы пропишите в исходном коде страницы подряд несколько элементов Div, то на веб странице каждый из них, скорее всего, попытается занять все доступное ему пространство по ширине, и поэтому расположены такие контейнеры будут друг под другом. Контейнеры Div при нормальных условиях рядом друг с другом стоять не будут, если принудительно не заставить их делать это.

Например, такой вот Html код будет отображаться в трех блоках расположенных друг под другом:

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

В браузере Firefox наряду с очень полезным плагином Firebug я еще использую плагин Web developer, который очень помогает при верстке. Среди всего прочего он может показывать блочные элементы, обводя их рамочкой. Именно этот плагин developer создал синие рамочки вокруг контейнеров Div на приведенном скриншоте.

В теги же Span можно заключать куски текста (строки) Html кода для придания им определенных свойств через CSS, и такие элементы могут размещаться в одной строке рядом друг с другом. Например, такой вот код в браузере будет иметь следующий вид:



Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов), создание, продвижение и заработок на сайте

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

хех, спасибо, красиво описано. Я тоже решил уроки сделать ��

Статья хорошая и полезная, в принципе пишете Вы как всегда качественно.

Дмитрий, есть пожелания: если можно побольше примеров, нужных примеров, войдите в положение новичка. Вы сами писали что сложнее найти ответы на простые вопросы.

1.как сделать обтекание картинки текстом слева;

2.как сделать конкретный участок фона другого цвета, под цвет контекстной рекламы;

3.как сделать подписку на e-mail в стиле вашей, прописав «введите Ваш e-mail» внутри окошка ввода?

Если можете, осветите в будущем и конкретно эти вопросы.

Спасибо, давно собиралась разобраться как работать с Html , но было страшно. Вы очень доступно все описываете, оказалось, что ужас, но не ужас-ужас! Спасибо, продолжайте уроки по данной теме, буду ждать следующих.

Спасибо, очень полезная статья. И кстати не движок отвечает за ДОКТАЙПЫ, а шаблон. Однажды выявил, что у меня неправильные ДОКТАЙПЫ, а на некоторых страницах так вообще нет. Во всяком случае так было на одном из шаблонов WordPress, как у других движков не знаю.



Статейка наверняка придется по нутру в первую очередь новичкам)

Вложенный комментарий — удивился если бы такое работало!)

В этом даже логики нет.

Отличная статья, которая кстати пригодится не только новечкам))

Для начинающих, наверное проще всего для верстки страницы использовать лучше всего редактор.

достаточно. Главное что бы этот элемент был. а на остальное браузерам плевать.

PC. так себе статья, много слов о ненужном и очень мало о нужном.

Дмитрий, я хотела бы уточнить: то есть не рекомендуемые теги можно использовать при верстке?

Если просто прописать без всяких html, один и все. Что это будет значить?

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Новый весенний конкурс от AzartCash с невероятным призовым фондом в $35000, создание, продвижение и заработок на сайте

> Новый весенний конкурс от AzartCash с невероятным призовым фондом в $35000! Здравствуйте, уважаемые читатели блога Партнерская программа AzartCash не перестает радовать и удивлять вебмастеров своими обновлениями. Был запущен новый ...

Новый SEMBOOK от Ingate стал бесплатным, создание, продвижение и заработок на сайте

> Новый SEMBOOK от Ingate стал бесплатным Здравствуйте, уважаемые читатели блога Ingate выпустил обновленное издание «Энциклопедии поискового продвижения». Книга дополнена материалами о рекламных системах и веб-аналитике, на сайте проекта её ...

Новая бесплатная книга: digital-стратегия своими руками, создание, продвижение и заработок на сайте

> Новая бесплатная книга: digital-стратегия своими руками Здравствуйте, уважаемые читатели блога Хотите освоить стратегический маркетинг, научиться создавать рекламные кампании в сети или проверить работу подрядчиков? Пошаговый алгоритм разработки и внедрения ...

Новая бесплатная книга: &laquo;SERM: управление репутацией в поисковых системах&raquo;, создание, продвижение и заработок на сайте

> Новая бесплатная книга: «SERM: управление репутацией в поисковых системах» Здравствуйте, уважаемые читатели блога Новое издание электронной библиотеки посвящено технологии управления репутацией в поисковых системах. На страницах книги: как отслеживать ...

Новая бесплатная книга от Ingate и Дмитрия Сатина &laquo;Психология потребителя: кто, что и как покупает в сети&raquo;, создание, продвижение и заработок на сайте

> Новая бесплатная книга от Ingate и Дмитрия Сатина «Психология потребителя: кто, что и как покупает в сети» Здравствуйте, уважаемые читатели блога Чего на самом деле хотят посетители вашего сайта? ...

Новая бесплатная книга Ingate &laquo;Практикум по видеорекламе: настройки, кейсы, продакшн&raquo;, создание, продвижение и заработок на сайте

> Новая бесплатная книга Ingate «Практикум по видеорекламе: настройки, кейсы, продакшн» Здравствуйте, уважаемые читатели блога Как работает видеореклама в сети? Почему ваши фирменные ролики обязательно должны быть на YouTube? Как ...

Новая бесплатная книга &laquo;Как вернуть клиента на сайт&raquo;, создание, продвижение и заработок на сайте

> Новая бесплатная книга «Как вернуть клиента на сайт» Здравствуйте, уважаемые читатели блога Что поможет превратить посетителя сайта в постоянного клиента? Какие методы возвращения пользователей наиболее эффективны? Об этом и ...

Не отправляется почта из WordPress и не работает визуальный редактор

> Не отправляется почта из WordPress и не работает визуальный редактор — решение с помощью плагинов Configure SMTP и Post Editor Buttons Здравствуйте, уважаемые читатели блога Сегодня будет статья по ...

Настройки блога на WordPress, которые вы должны сделать сразу после его установки, создание, продвижение и заработок на сайте

> Настройки блога на WordPress, которые вы должны сделать сразу после его установки Я уже рассказывал об установке WordPress и о том, что такое блог и зачем он нужен. В ...

Настройка ЧПУ в WordPress и плагин RusToLat, создание, продвижение и заработок на сайте

> Настройка ЧПУ в WordPress и плагин RusToLat Здравствуйте, уважаемые читатели блога Сегодня в рамках рубрики Вордпресс для чайников мы поговорим о той настройке для этого блогового движка(cms), которую нужно ...

Настройка регистрации пользователей в VirtueMart и внесение информации об интернет магазине, создание, продвижение и заработок на сайте

> Настройка регистрации пользователей в VirtueMart и внесение информации об интернет магазине Сегодня мы продолжим рассматривать необходимые настройки VM, которые позволят изменить внешний вид и функционал ИМ под ваши конкретные ...

Настройка контекстных объявлений рекламной сети Яндекса для повышения числа кликов (CTR) и дохода, создание, продвижение и заработок на сайте

> Настройка контекстных объявлений рекламной сети Яндекса для повышения числа кликов (CTR) и дохода В этой статье мы продолжим тему того, как заработать денег в интернете, начатую тут (ну, и ...

Настройка интернет магазина на VirtueMart сразу после установки его на Joomla, создание, продвижение и заработок на сайте

> Настройка интернет магазина на VirtueMart сразу после установки его на Joomla В очередной статье из этой рубрики мы поговорим о работе с панелью управления интернет магазина на базе VirtueMart ...

Настройка JFusion для для объединения форума SMF и Джумла-сайта, создание, продвижение и заработок на сайте

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

Моя страница в Контакте

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

Мониторинг обменников

> Мониторинг обменников — онлайн-сервисы для поиска лучшего курса обмена валют, электронных денег и криптовалют Здравствуйте, уважаемые читатели блога В статье про сервисы обмена биткоинов и других криптовалют я упоминал, ...

Мониторинг доступности и UpTime сайта

> Мониторинг доступности и UpTime сайта — 12 сервисов проверки аптайма и оповещений о сбоях в работе сайта Здравствуйте, уважаемые читатели блога Подобными онлайн сервисами, позволяющими запустить мониторинг доступности своего ...

Монетизация сайтов женской и ювелирной тематики в Gold Affiliate, плюс возможность зарабатывать на партнерском интернет-магазине, создание, продвижение и заработок на сайте

> Монетизация сайтов женской и ювелирной тематики в Gold Affiliate, плюс возможность зарабатывать на партнерском интернет-магазине Здравствуйте, уважаемые читатели блога За последние пару лет я описал уже довольно много способов ...

Мой сайт

KtoNaNovenkogo.ru Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте Новые материалы на блоге KtoNaNovenkogo.ru Статьи по тематики вебмастеринга, продвижения и заработка в ...

Мой мир

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

Мои логин и пароль

> Мои логин и пароль — что это такое, как их правильно создать и безопасно хранить Здравствуйте, уважаемые читатели блога Вроде бы простой вопрос, но он все же зачастую возникает ...

Рейтинг@Mail.ru