Как определить незакрытые теги. HTML-теги html, head, body

Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.

В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега

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

Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.

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

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

А вот что вы увидите, наведя курсор на документ с данным содержимым:

Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.

Функция тега

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

Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров . Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:</p> <p><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy></p> <p>Текст после иконки и есть содержание тега <title>. А теперь рассмотрим содержание <head>, которое мы увидеть не можем, но которое является очень важной частью <b>создания и продвижения сайта. </b>В первую очередь это строка</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Это мета-тег отвечающий за <b>тип содержимого страницы </b> (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать <b>каскадные таблицы стилей </b>.</p> <p>Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, ключевых слов и canonical. Я использую <b>плагин All in One SEO Pack </b>, поэтому они и присутствуют в пределах <head>.</p> XML предназначен для широкого использования, символы не ограничены 7-битным набором символов ASCII . К числу символов, допустимых в языке XML , относятся три управляющих символа СО стандарта ASCII , все обычные символы этого стандарта и почти все остальные символы Unicode <h3>Имена.</h3><p>В языке XML все имена должны начинаться с буквы, символа нижнего подчеркивания (_) или двоеточия (:) и продолжаться только допустимыми для имен символами, а именно они могут содержать только буквы, входящие в секцию букв кодировки Unicode, арабские цифры, дефисы, знаки подчеркивания, точки и двоеточия. Однако имена не могут начинаться со строки xml в любом регистре. Имена, начинающиеся с этих символов, зарезервированы для использования консорциумом W3C . Нужно помнить что так как буквы не ограничены исключительно символами ASCII , то в именах можно использовать слова из родного языка.</p> <h3>Структура XML- документа.</h3><p>Любой XML -документ состоит из следующих частей:</p><ul><li>Необязательный пролог.</li> <li>Тело документа.</li> <li>Необязательный эпилог, следующего за деревом элементов.</li> </ul><p>Рассмотрим каждую из частей более подробно.</p> <h3>Пролог XML- документа.</h3><p>Документ XML начинается с пролога. В прологе содержатся некоторые указания, предназначенные для анализатора XML и приложений.</p><p>Пролог состоит из нескольких частей:</p><ol><li>необязательное объявление XML (XML Declaration) которое заключено между символами <?...?>. Объявление содержит:<ul><li>пометку xml и номер версии (version) спецификации XML;</li> <li>указание на кодировку символов (encoding), в которой написан документ (по умолчанию encoding="UTF-8" );</li> <li>параметр standalone который может принимать значения "yes" или "no" (по умолчанию standalone="yes" ). Значение "yes" показывает, что в документе содержатся все требуемые декларации элементов, a "no" - что нужны внешние определения DTD .</li> </ul><p>Все это вместе может выглядеть следующим образом:</p> <p><?xml version ="1.0" encoding="windows-1251" standalone="yes"?>.</p> <p>Важно отметить, что в объявлении XML только атрибут version является обязательным, все остальные атрибуты могут быть опущены и, следовательно, принимать значения по умолчанию. Так же нужно помнить, что все эти атрибуты следует указывать только в приведенном выше порядке.</p> </li> <li>комментарии.</li> <li>команды обработки.</li> <li>символы пустых пространств.</li> <li>необязательное <span>объявление типа документа </span>, DTD (Document Type Declaration ) которое заключено между символами <!DOCTYPE...> и может занимать несколько строк. В этой части объявляются теги, использованные в документе, или приводится ссылка на файл, в котором записаны такие объявления.</li> </ol><p>После <span>объявление типа документа </span> так же могут следовать комментарии, команды обработки и символы пустых пространств.</p><p>Поскольку все эти части необязательны, пролог может быть опущен.</p> <h3>Тело XML-документа.</h3><p>Тело документа состоит из одного или больше элементов. В правильно оформленном XML документе элементы формируют простое иерархическое дерево , в котором обязательно присутствует <span>корневой элемент </span> ( root element ) в который вложены все остальные элементы документа. Язык XML налагает на элементы чрезвычайно важное ограничение - они должны быть правильно вложены. Это позволяет достаточно легко вложить один XML - документ в другой не нарушая структуру документа, при этом <span>корневой элемент </span> вложенного документа станет просто одним из элементов документа, в который он вложен. В связи с этим мы сталкиваемся с еще одним ограничением, а именно с тем, что имена элементов должны быть уникальны в пределах документа, поскольку во включенном документе такие же имена, что и во включающем могут иметь совершенно иной смысл. Для решения проблемы совпадающих имен введено понятие пространства имен.</p><p>Имя корневого элемента считается именем всего документа и указывается во второй части пролога после слова Doctype . Если определение DTD находится внутри XML - документа, то оно помещается в квадратных скобках после имени корневого элемента:</p><p><!DOCTYPE имя_корневого_элемента [описание DTD ]></p><p>Но обычно определение DTD составляется сразу для нескольких XML -документов. В таком случае его удобно записать отдельно от документа и тогда вместо квадратных скобок записывается одно из слов System или Public после которого идет адрес в форме URI ( Uniform Resource Identifier ) файла с определением DTD . Для всех практических целей URI считается эквивалентом адреса URL , хотя в принципе это может быть любое уникальное имя. Определение DTD , например, может выглядеть следующим образом:</p><p><!DOCTYPE root_element_name SYSTEM "DTD.dtd"></p> <h3>Пространства имен XML</h3><p>Поскольку в разных XML -документах могут встретится одни и те же имена тегов и их атрибутов, имеющие совершенно разный смысл, надо иметь возможность их как-то различать. Для этого имена тегов и атрибутов снабжают кратким префиксом, который отделяется от имени двоеточием. Префикс имени связывается с идентификатором, определяющим <span>пространство имен </span> (namespace ). Все имена тегов и атрибутов, префиксы которых связаны с одним и тем же идентификатором, образуют одно <span>пространство имен </span>, в котором имена должны быть уникальны. Префикс и идентификатор пространства имен определяются атрибутом xmlns следующим образом:</p><p><ns:root_element_name xmlns:ns = "http://URI_namespace"></p><p>В дальнейшем имена тегов и атрибутов, которые мы хотим отнести к пространству имен "http://URI_namespace" , снабжаются префиксом ns, например:</p><p><ns:city ns:type="город">Новосибирск</ns:city>.</p><p>Атрибут xmlns может появиться в любом элементе XML , а не только в корневом. Определенный им префикс можно применять в том элементе, в котором записан атрибут xmlns , и во всех вложенных в него элементах. Более того, в одном элементе можно определить несколько пространств имен. Во вложенных элементах <span>пространство имен </span> можно переопределить, связав префикс с другим идентификатором. Появление имени тега без префикса в документе, использующем <span>пространство имен </span>, означает, что имя принадлежит пространству имен по умолчанию. Префиксы, начинающиеся с символов xml с любым регистром букв, зарезервированы за самим языком XML .</p><p>Имя вместе с префиксом называется расширенным или уточненным именем. Часть имени, записанная после двоеточия, называется локальной частью имени.</p> <p>Содержимое html-документа или веб-страницы определяется содержимым html элементов.</p> <h3>HTML элементы</h3> <p>HTML-элемент это все, что находится между стартовым(открывающим) и конечным(закрывающим) тегами.</p> <h3>Синтаксис элементов html</h3> <ul><li>HTML элемент начинается с <b>открывающего/стартового тега </b>.</li> <li>HTML элемент заканчивается <b>закрывающим/конечным тегом </b>.</li> <li><b>Содержимое элемента </b> это все, что находится между открывающим и закрывающим тегами.</li> <li>Некоторые элементы могут быть <b>пустыми </b>.</li> <li>Пустые элементы состоят только из <b>открывающего </b>тега.</li> <li>Большая часть html элементов может иметь <b>атрибуты. </b></li> </ul><p>(Вы узнаете больше об атрибутах в следующих главах учебника.)</p> <h3>Вложенные элементы</h3> <p>Большая часть html элементов может быть вложена друг в друга. HTML документ состоит из вложенных элементов.</p> <h3>Пример</h3> <html><p> <body><br> <p>Это мой первый параграф.</p><br> </body></p> <p>Приведенный пример состоит из трех элементов:</p> <p><b>1. </b> Элемент <b><p> </b> используется для вставки параграфа в веб-страницу. Имеет открывающий и закрывающий теги. Содержимое этого элемента в нашем примере - надпись «Это мой первый параграф».</p> <p><b>2. </b> Элемент <b><body> </b> описывает видимую часть содержимого веб-страницы. Имеет открывающий и закрывающий теги. В него вложен элемент <p>Со своим содержимым.</p> <p><b>3. </b> Элемент <b><html> </b> описывает весь html документ. Имеет открывающий и закрывающий теги. В него вложены уже два элемента <body> и <h3>Не забывайте закрывающий тег</h3> <p>Большинство браузеров корректно отобразят ваш код html, даже если вы забудете поставить закрывающий тег. Однако, это может привести к ошибкам и непредсказуемым результатам.</p> <p>Внимание! Будущие версии HTML не позволяют забывать закрывающие теги.</p> <h3>Пустые HTML элементы</h3> <p>HTML элементы без содержимого называются пустыми элементами. Пустые элементы состоят из одного тега.</p> <p><b><br> </b> это пустой элемент, не имеющий закрывающего тега (он используется для отображения горизонтальной черты).</p> <p>В XHTML, XML и будущих версиях HTML все элементы должны быть закрыты. Чтобы сделать это, вам достаточно добавить наклонную черту через пробел после названия тега <b><br /> </b>. Это хорошая привычка, которая пригодится в будущем.</p> <p>Как я уже говорил, теги HTML - это специальные инструкции, указывающие браузерам как отображать ту или иную часть страницы. Сейчас мы поговорим о них подробнее, но не старайтесь сразу все запоминать - у вас не получится, да и не нужно это, так как в остальных главах вы будете на каждом шагу сталкиваться с тегами - постепенно все само запомнится. Просто прочитайте и постарайтесь понять.</p> <h2>Открывающие и закрывающие теги, теги-контейнеры</h2> <p>Теги могут быть <i>открывающими </i> (начальными) и <i>закрывающими </i> (конечными). Открывающие теги состоят из знаков «<» и «>» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).</p> <p>Большинство HTML-тегов являются парными - имеют обязательные открывающий и закрывающий теги, например: <STRONG> и </STRONG> . Некоторые имеют только открывающий тег, например <BR> , и называются <b>пустыми </b>. Другие же могут иметь открывающий тег, а закрывающий можно указывать, а можно и нет, тогда браузер сам определит, где заканчивается действие тега.</p> <p>Теги, которые имеют обязательный или необязательный закрывающий тег принято называть <b>теги-контейнеры </b> или <b>элементы-контейнеры </b>.</p> <p>Все теги HTML не чувствительны к регистру, то есть можно указывать <STRONG> и <strong> или вообще <sTRonG> .</p> <p>Теперь совет. Рекомендую вам всегда писать теги в нижнем регистре (строчными буквами) и ставить необязательные закрывающие теги. Во-первых, это является признаком профессионализма и хорошего тона, а во-вторых, в HTML-коде со всеми закрывающими тегами гораздо проще ориентироваться и править его. Ну да я вам об этом еще не раз напомню.</p> <p>Пример использования тегов</p><p> <b>Жирный шрифт</b> <i>Курсивный шрифт</i> </p><p>Результат в браузере</p> <h2>И все таки, как будет правильно - «теги» или «элементы»?</h2> <p>Вообще, в большинстве случаев правильно будет говорить - «элементы». Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B и I . Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.</p> <p>Так уж сложилось, что на сегодняшний день слово «тег» прочно вошло в русский язык (да и не только в русский) в качестве синонима слову «элемент». Я думаю из-за того, что при использовании обоих слов не теряется смысл повествования. Поэтому в данном учебнике я тоже буду использовать оба этих слова, чтобы вы привыкли к ним и научились подсознательно определять, о чем идет речь в каждом конкретном случае. И сильно на этом не заморачивайтесь, знаете, чем отличается тег от элемента - вот и хорошо.</p> <h2>Теги можно указывать в одну строку, а можно в несколько</h2> <p>Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов - все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:</p> <p> <b>Жирный шрифт</b> <i> Курсивный шрифт </i> </p><p>Результат в браузере</p> <h2>Правильная вложенность тегов</h2> <p>Многие теги можно вкладывать друг в друга, чтобы они вместе воздействовали на один и тот же элемент страницы. Но при этом важно соблюдать правильную вложенность - тег, появляющийся раньше, должен закрываться позже. Кстати, ошибка вложенности является одной из самой распространенной среди новичков.</p> <p><тег1><тег2><тег3> ...<span></тег3></тег2></тег1> </span> - правильно</p> <p><тег1><тег2><тег3> ...<span></тег1></тег3></тег2> </span> - неправильно</p> <p>Пример использования вложенных тегов</p><p> <b><i>Жирный курсивный шрифт</i></b> </p><p>Результат в браузере</p> <h2>Родительские и дочерние теги, потомки и предки</h2> <p>Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p><b>Родительские теги </b> - тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере <ТЕГ1> является родительским для <ТЕГ2> и <ТЕГ3> , но не является для тега <ТЕГ4> . А вот <ТЕГ3> родитель <ТЕГ4> .</p> <p><b>Дочерние теги </b> - обратно родительским. <ТЕГ2> и <ТЕГ3> дочерние для <ТЕГ1> , а <ТЕГ4> для тега <ТЕГ3> .</p> <p><b>Предки </b> - тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности. <ТЕГ1> предок для всех тегов, а <ТЕГ3> предок <ТЕГ4> .</p> <p><b>Потомки </b> - обратно предкам. Все теги - потомки тега <ТЕГ1> , но <ТЕГ4> еще и потомок тега <ТЕГ3> .</p> <p>Ну что, не запутались? Чтобы проще запомнить, проведите аналогию со своим семейным древом и сразу все встанет на свои места.</p> <h2>Что значит «один тег содержит другой»?</h2> <p>Как вы уже знаете, теги можно вкладывать друг в друга и, соответственно, одни могут содержать другие. Но тут есть один небольшой, но очень важный момент, которому новички часто не уделяют должного внимания. Давайте возьмем уже знакомый нам пример:</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p>Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй - дочерним и никак иначе. то есть в нашем примере <ТЕГ1> содержит <ТЕГ2> и <ТЕГ3> , но не содержит <ТЕГ4> . А вот <ТЕГ3> как раз и содержит <ТЕГ4> . Немного необычно, правда? Но своя логика в этом есть, согласитесь.</p> <p>Каждый HTML-элемент может содержать только определенный набор тегов, а некоторые вообще не могут содержать ничего кроме текста. Все это зависит от типа, к которому относится тег, поэтому, перед тем как вкладывать теги, проверьте - может ли один из них содержать другой.</p> <h2>Типы тегов</h2> <p>В HTML, теги делятся на несколько типов или моделей:</p> <p><b>Inline (встроенные, уровня строки) </b> - все, что выводят эти теги на страницу, всегда отображается браузером на одной сроке. И только если доступной ширины (например, ширины окна браузера) не хватает, то происходит перенос строки на следующую и т.д.</p> <p>Пример использования встроенных тегов</p><p> <b>Жирный шрифт</b> <i>Курсивный шрифт</i> </p><p>Результат в браузере</p> <p><b>Block (блочные, уровня блока) </b> - все, что выводит каждый из таких тегов на страницу, отображается браузером с новой строки, После себя такие элементы также создают переносы строк.</p> <p>Пример использования блочных тегов</p><p> <p>Параграф 1</p> <p>Параграф 2</p> </p><p>Результат в браузере</p> <p>Параграф 1</p> <p>Параграф 2</p> <p>Есть еще теги других типов, но о них мы с вами поговорим в дальнейших уроках, а эти два типа самые распространенные в HTML.</p> <p>Ну что, надеюсь пока все понятно? Тогда пошли дальше.</p> <table id="step"><tr><td></td></tr></table> <p>Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом. </p> <h3>Что такое HTML-тег, виды HTML-тегов, примеры написания</h3><b>HTML-тег </b>— в переводе с английского <b>tag — помечать </b> -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на английском языке (весь интернет на нем построен). Тег имеет вид <strong></strong> <p>Это тег выделения текста жирным шрифтом. Теги имеют три вида:</p> <ul><li><b>Открывающий тег </b> - тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.</li> <li><b>Закрывающий тег </b> - тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным</li> <li><b>Одиночные теги </b> — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:</li> </ul> <strong></strong> <p>Вся конструкция, включая текст, будет выглядеть следующим образом:</p><p> <strong>Этот текст будет выделен жирным</strong> </p><p>А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:<b>Этот текст будет выделен жирным. </b> Существует еще такое понятие, как<b> контейнерные теги </b>, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.</p><p>В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.</p> <h3>Что такое атрибуты,правила написания и зачем они нужны</h3> Помимо тегов существуют еще и так называемые <b>атрибуты </b>. Точнее не помимо, а в тегах. С помощью атрибутов можно задать дополнительные параметры для какого-либо тега. <b>Атрибуты </b> для каждого тега свои, а в данной теме мы будем экспериментировать над тегом <font>, который без атрибутов, собственно, ничего толкового не делает. <p><b>Font </b> — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.</p><p> <font> Текст </font> </p><p>Теперь немного про правила написания атрибутов. Атрибуты<b> всегда </b> пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:</p><p> <font size="5"> Текст</font> </p><p>Данный атрибут в теге font изменяет размер заключенного в теги Текста.<br> Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид</p><p> <font size="5"> Текста </font> </p><p>Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.</p> <h3>Что такое валидатор (validator) W3C, правила написания и список тегов</h3> Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует <b>валидатор W3C </b> W3C -<b> World Wide Web Consorcium, </b>а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе). <p>Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): <br><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Legenda-validatora-W3C.png' align="center" width="100%" loading=lazy></p> <p>А сразу после легенды идет таблица самих тегов:</p> <p><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Tablitsa-tegov-na-sayte-W3C.png' align="center" width="100%" loading=lazy></p> <ul><li>В первом столбце — <b>Name </b> — само название тега — то что должно стоять в угловых скобках (< и >).</li> <li>Второй столбец — <b>Start Tag </b> — наличие открывающего тега. В данном столбце вы можете увидеть букву «O», что значит «Optional», а в переводе с английского - Опционально. Данная буква присутствует только напротив тегов <html>, <head>, <body> и <tbody> и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.</li> <li>Третий столбец — <b>End Tag </b> — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега </img>, ибо нечего в нем закрывать.</li> <li>Четвертый -<b> Empty </b> — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег <img>.</li> <li>Пятый столбец — <b>Depr. </b> или <b>Deprecated </b> — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста (<font> и <Center> являются примером)</li> <li>Шестой столбец — <b>DTD </b> — может содержать либо букву <b>«L» </b>, либо <b>«F» </b>. Первая — <b>«L» </b> - <b>Loose DTD </b> — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — <b>«F» </b> — <b>Frameset DTD </b> — означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.</li> <li>И последний, седьмой столбец - <b>Description </b> — краткое описание тега, опять же на английском</li> </ul><p>Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.</p> <ul><li>Первая колонка — <b>Name </b> — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.</li> <li>Вторая колонка — <b>Related Elements </b> — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.</li> <li>Третья колонка — <b>Type </b> — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты</li> <li>Четвертая колонка — <b>Default </b> — означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.</li> <li>6, 7, и 8 колонки означают то же самое, что и в случае с тегами.</li> </ul><p>Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.</p> <h3>Создание файла в формате html — HTML-документ</h3> <p>Прежде всего, разберемся что такое <b>HTML-документ </b>. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).</p> <p>Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать <b>Notepad++ </b> , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде</p> <p>Итак, нам нужно просто открыть <b>Notepad++ </b> и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений <b>«HyperText Markup Language file </b> (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <nav class="gridlove-prev-next-nav"> <div class="gridlove-prev-link"> <a href="/kak-udalit-polnostyu-google-chrome-s-kompyutera-kak-polnostyu-udalit.html"> <span class="gridlove-pn-ico"><i class="fa fa fa-chevron-left"></i></span> <span class="gridlove-pn-link">Как полностью удалить Google Chrome с компьютера Как удалить гугл хром и установить новый</span> </a>  </div> <div class="gridlove-next-link"> <a href="/kak-udalit-nenuzhnye-faily-s-diska-s-kak-udalyat-faily-s-diska-dvd-rw-instrukciya.html"> <span class="gridlove-pn-ico"><i class="fa fa fa-chevron-right"></i></span> <span class="gridlove-pn-link">Как удалять файлы с диска DVD-RW: инструкция Удалить файлы с cd диска</span> </a>  </div> </nav> </div> </article> <div id="post-ratings-759-loading" class="post-ratings-loading"> <img src="https://sonyps4.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy> Загрузка...</div> <div class="gridlove-related"> <div class="gridlove-module"> <div class="module-header"><div class="module-title"><h4 class="h2">Возможно вам будет интересно:</h2></div></div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <article class="gridlove-post gridlove-post-b gridlove-box post-994478 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/sohranyaem-gotovoe-video-v-sony-vegas-bazovye-elementy-montazha-v-vegas-pro.html" title="Базовые элементы монтажа в Vegas Pro Вставка шаблонных титров"><img width="385" height="300" src="/uploads/9237b97746654f28a3eee980bc48ad42.jpg" class="attachment-gridlove-b8 size-gridlove-b8 wp-post-image" alt="Базовые элементы монтажа в Vegas Pro Вставка шаблонных титров" / loading=lazy></a> </div> <div class="box-inner-ptbr box-col-b entry-sm-overlay"> <div class="box-inner-ellipsis"> <div class="entry-category"> <a href="/category/question/" class="gridlove-cat gridlove-cat-28">Вопрос</a> </div> <h2 class="entry-title h3"><a href="/sohranyaem-gotovoe-video-v-sony-vegas-bazovye-elementy-montazha-v-vegas-pro.html">Базовые элементы монтажа в Vegas Pro Вставка шаблонных титров</a></h2> <div class="entry-content"> <p>Всем привет! Сегодня мы перейдем с вами к видеомонтажу. И первым делом мне хотелось бы дать вам подробную инструкцию, как пользоваться сони вегас про 13, даже если вы начинающий пользователь. На сегодняшний день эта программа является одной из лучших. Ко</p> </div> </div> <div class="entry-meta"> <div class="meta-item meta-author"><span class="vcard author"><span class="fn"> </span></span> </div> </div> </div> </article> </div> <div class="col-lg-12 col-md-12 col-sm-12"> <article class="gridlove-post gridlove-post-b gridlove-box post-994477 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/launcher-na-androide-chto-eto-takoe-kak-skachat-i-ustanovit-launcher-na-android.html" title="Как создать, установить и поменять тему на андроид Как создать лаунчер на все телефоны"><img width="385" height="300" src="/uploads/69c48aab164775811783ecd2295c819c.jpg" class="attachment-gridlove-b8 size-gridlove-b8 wp-post-image" alt="Как создать, установить и поменять тему на андроид Как создать лаунчер на все телефоны" / loading=lazy></a> </div> <div class="box-inner-ptbr box-col-b entry-sm-overlay"> <div class="box-inner-ellipsis"> <div class="entry-category"> <a href="/category/question/" class="gridlove-cat gridlove-cat-28">Вопрос</a> </div> <h2 class="entry-title h3"><a href="/launcher-na-androide-chto-eto-takoe-kak-skachat-i-ustanovit-launcher-na-android.html">Как создать, установить и поменять тему на андроид Как создать лаунчер на все телефоны</a></h2> <div class="entry-content"> <p>Для организации и взаимодействия с приложениями на Android используются лаунчеры. Которые обычно состоят из серии домашних экранов, где мы можем организовать ярлыки приложений, виджеты и так далее. Каждый телефон поставляется с лаунчером, но не все лаунче</p> </div> </div> <div class="entry-meta"> <div class="meta-item meta-author"><span class="vcard author"><span class="fn"> </span></span> </div> </div> </div> </article> </div> <div class="col-lg-12 col-md-12 col-sm-12"> <article class="gridlove-post gridlove-post-b gridlove-box post-994475 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/kakom-vide-hranyatsya-dannye-gde-i-v-kakom-vide-hranitsya-informaciya.html" title="Где и в каком виде хранится информация"><img width="385" height="300" src="/uploads/9c4bb5062f02199984af4fca5692ab83.jpg" class="attachment-gridlove-b8 size-gridlove-b8 wp-post-image" alt="Где и в каком виде хранится информация" / loading=lazy></a> </div> <div class="box-inner-ptbr box-col-b entry-sm-overlay"> <div class="box-inner-ellipsis"> <div class="entry-category"> <a href="/category/question/" class="gridlove-cat gridlove-cat-28">Вопрос</a> </div> <h2 class="entry-title h3"><a href="/kakom-vide-hranyatsya-dannye-gde-i-v-kakom-vide-hranitsya-informaciya.html">Где и в каком виде хранится информация</a></h2> <div class="entry-content"> <p>Откройте окно с задачей "Мой компьютер ". Если значки в окне мелкие, то измените их на крупные. Конечно, с помощью Правила Внешнего вида!Окно задачи будет выглядеть приблизительно так, как на рисунке:В данном примере значки (C:), (D:) и (E:) обозначают ло</p> </div> </div> <div class="entry-meta"> <div class="meta-item meta-author"><span class="vcard author"><span class="fn"> </span></span> </div> </div> </div> </article> </div> </div> </div> </div> </div> <div class="gridlove-sidebar"> <div class="gridlove-sticky-sidebar"> <div id="gridlove_category_widget-1" class="widget gridlove-box gridlove_category_widget"><h4 class="widget-title">Категории</h4> <ul class="gridlove-count-color"> <li><a href="/category/new-items/" class="gridlove-cat-col-3"><span class="category-text">Новинки</span></a></li> <li><a href="/category/question/" class="gridlove-cat-col-3"><span class="category-text">Вопрос</span></a></li> <li><a href="/category/help/" class="gridlove-cat-col-3"><span class="category-text">Помощь</span></a></li> <li><a href="/category/article/" class="gridlove-cat-col-3"><span class="category-text">Статья</span></a></li> <li><a href="/category/news/" class="gridlove-cat-col-3"><span class="category-text">Новости</span></a></li> <li><a href="/category/application/" class="gridlove-cat-col-3"><span class="category-text">Приложения</span></a></li> <li><a href="/category/comparison/" class="gridlove-cat-col-3"><span class="category-text">Сравнения</span></a></li> </ul> </div><div id="gridlove_posts_widget-1" class="widget gridlove-box gridlove_posts_widget"><h4 class="widget-title">Последние статьи<span class="gridlove-slider-controls"></span></h4> <div class="gridlove-posts-widget gridlove-widget-slider"> <div class="gridlove-posts-widget-item-wrapper"> <article class="post-983546 post type-post status-publish format-standard has-post-thumbnail hentry category-reviews"> <div class="entry-image"> <a href="/kak-sdelat-vremya-v-telefone-kak-nastroit-ili-pomenyat-datu-i-vremya-na-android.html" title="Как настроить или поменять дату и время на Android: установка вручную или автосинхронизация"> <img width="80" height="60" src="/uploads/7e86f460e3514916a184ba55ca15edab.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Как настроить или поменять дату и время на Android: установка вручную или автосинхронизация" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/kak-sdelat-vremya-v-telefone-kak-nastroit-ili-pomenyat-datu-i-vremya-na-android.html">Как настроить или поменять дату и время на Android: установка вручную или автосинхронизация</a></h6> </div> </article> <article class="post-983545 post type-post status-publish format-standard has-post-thumbnail hentry category-reviews"> <div class="entry-image"> <a href="/kak-obnovit-vremya-na-telefone-kak-nastroit-datu-i-vremya-na-android-kak-vybrat.html" title="Как настроить дату и время на Android"> <img width="80" height="60" src="/uploads/382b99bd2347bdbfdfec6bfe55d0dfd2.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Как настроить дату и время на Android" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/kak-obnovit-vremya-na-telefone-kak-nastroit-datu-i-vremya-na-android-kak-vybrat.html">Как настроить дату и время на Android</a></h6> </div> </article> <article class="post-983544 post type-post status-publish format-standard has-post-thumbnail hentry category-reviews"> <div class="entry-image"> <a href="/net-dostupa-papke-vindovs-10-kak-vosstanovit-dostup-k-papke-sposoby-resheniya.html" title="Как восстановить доступ к папке"> <img width="80" height="60" src="/uploads/4a2b38dc67574866fb299ee4efe169ed.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Как восстановить доступ к папке" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/net-dostupa-papke-vindovs-10-kak-vosstanovit-dostup-k-papke-sposoby-resheniya.html">Как восстановить доступ к папке</a></h6> </div> </article> <article class="post-983543 post type-post status-publish format-standard has-post-thumbnail hentry category-reviews"> <div class="entry-image"> <a href="/osnovnyi-komandy-serverov-komandy-minecraft-servera-mainkraft-bez.html" title="Команды Minecraft Сервера Майнкрафт без регистрации"> <img width="80" height="60" src="/uploads/5d4f43860bee1123ca72f718a441547f.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Команды Minecraft Сервера Майнкрафт без регистрации" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/osnovnyi-komandy-serverov-komandy-minecraft-servera-mainkraft-bez.html">Команды Minecraft Сервера Майнкрафт без регистрации</a></h6> </div> </article> <article class="post-983541 post type-post status-publish format-standard has-post-thumbnail hentry category-reviews"> <div class="entry-image"> <a href="/kak-skachat-vkontakte-na-telefon-vkontakte-dlya-android-poslednyaya.html" title="Вконтакте для андроид Последняя версия vk для андроид"> <img width="80" height="60" src="/uploads/53a5a8f1c134b329d30e29f09b28cff4.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Вконтакте для андроид Последняя версия vk для андроид" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/kak-skachat-vkontakte-na-telefon-vkontakte-dlya-android-poslednyaya.html">Вконтакте для андроид Последняя версия vk для андроид</a></h6> </div> </article> </div> <div class="gridlove-posts-widget-item-wrapper"> <article class="post-983540 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/lozhnyi-vyzov---shutochnaya-programma-dlya-android-skachat-lozhnyi-vyzov.html" title="Скачать Ложный вызов на андроид v"> <img width="80" height="60" src="/uploads/e51718a0aa1d902ddb8d09f325276cf7.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Скачать Ложный вызов на андроид v" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/lozhnyi-vyzov---shutochnaya-programma-dlya-android-skachat-lozhnyi-vyzov.html">Скачать Ложный вызов на андроид v</a></h6> </div> </article> <article class="post-983536 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/kak-perezagruzit-samsung-galaxy-esli-on-zavis-kak-vyklyuchit-samsung-on-zavis-kak.html" title="Как выключить самсунг он завис"> <img width="80" height="60" src="/uploads/68ddb89e70e9875665251c1549fe0801.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Как выключить самсунг он завис" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/kak-perezagruzit-samsung-galaxy-esli-on-zavis-kak-vyklyuchit-samsung-on-zavis-kak.html">Как выключить самсунг он завис</a></h6> </div> </article> <article class="post-983535 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/podrobnyi-obzor-mobilnogo-telefona-samsung-s8500-wave-podrobnyi-obzor.html" title="Подробный обзор мобильного телефона Samsung S8500 Wave Самсунг wave s8500 cdma поддерживает"> <img width="80" height="60" src="/uploads/4d65de05088487c7d7bfcdd5e8479055.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Подробный обзор мобильного телефона Samsung S8500 Wave Самсунг wave s8500 cdma поддерживает" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/podrobnyi-obzor-mobilnogo-telefona-samsung-s8500-wave-podrobnyi-obzor.html">Подробный обзор мобильного телефона Samsung S8500 Wave Самсунг wave s8500 cdma поддерживает</a></h6> </div> </article> <article class="post-983534 post type-post status-publish format-standard has-post-thumbnail hentry category-sistema"> <div class="entry-image"> <a href="/v-roznice-otmechaetsya-spros-na-novye-smartfony-prodazhi-galaxy-s8-v-rossii.html" title="Продажи Galaxy S8 в России вдвое выше, чем у предыдущего флагмана Samsung Телефон начинается с дизайна"> <img width="80" height="60" src="/uploads/b4105ca23891ce36a5fc75973817eba9.jpg" class="attachment-gridlove-thumbnail size-gridlove-thumbnail wp-post-image" alt="Продажи Galaxy S8 в России вдвое выше, чем у предыдущего флагмана Samsung Телефон начинается с дизайна" / loading=lazy> </a> </div> <div class="entry-header"> <h6><a href="/v-roznice-otmechaetsya-spros-na-novye-smartfony-prodazhi-galaxy-s8-v-rossii.html">Продажи Galaxy S8 в России вдвое выше, чем у предыдущего флагмана Samsung Телефон начинается с дизайна</a></h6> </div> </article> </div> </div> </div><div id="text-10" class="widget gridlove-box widget_text"> <h4 class="widget-title">Реклама</h4> <div class="textwidget"> </div> </div> </div> </div> </div> </div> <div id="footer" class="gridlove-footer"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <div id="text-6" class="widget widget_text"> <div class="textwidget"> <p> </p> </div> </div> </div> </div> </div> <div class="gridlove-copyright"> <div class="container"> <p style="text-align: center">Copyright © 2024 </div> </div> </div> <div class="gridlove-sidebar-action-wrapper"> <span class="gridlove-action-close"><i class="fa fa-times" aria-hidden="true"></i></span> <div class="gridlove-sidebar-action-inside"> <div class="hidden-lg-up widget gridlove-box widget_nav_menu"> <ul id="menu-glavnoe-2" class="gridlove-mobile-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-"><a href="/category/new-items/">Новинки</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-"><a href="/category/question/">Вопрос</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-"><a href="/category/help/">Помощь</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-"><a href="/category/article/">Статья</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-"><a href="/category/news/">Новости</a></li> </ul> </div> </div> </div> <div class="gridlove-sidebar-action-overlay"></div> <script type='text/javascript' src='https://sonyps4.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://sonyps4.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.7.8'></script> <script type='text/javascript'> /* <![CDATA[ */ var gridlove_js_settings = { "rtl_mode": "", "header_sticky": "1", "header_sticky_offset": "100", "header_sticky_up": "", "logo": "/logo/logo.png", "logo_retina": "/logo/logo.png", "logo_mini": "/logo/logo.png", "logo_mini_retina": "/logo/logo.png" }; /* ]]> */ </script> <script type='text/javascript' src='https://sonyps4.ru/wp-content/themes/gridlove/assets/js/min.js?ver=1.1'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "gridlove_default_sticky_sidebar", "margin_top" : 99, "margin_bottom" : 0, "stop_id" : "", "screen_max_width" : 1000, "screen_max_height" : 1280, "width_inherit" : true, "refresh_interval" : 12, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-10'] } ; </script> <script type='text/javascript' src='https://sonyps4.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.8'></script> </body> </html>