Html краткое описание: Описание содержания страницы — Структура HTML-документа — HTML Academy

Содержание

Основы HTML - Изучение веб-разработки

HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

  1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
  3. Контент (Content)
    : Это контент элемента, который в данном случае является просто текстом.
  4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

  1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  2. Имя атрибута, за которым следует знак равенства.
  3. Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется

вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:

<p>Моя кошка <strong>очень</strong> раздражена.</p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведённое ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше,  ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём  элемент <img>, который уже имеется в нашем HTML:

<img src="images/firefox-icon.png" alt="Моё тестовое изображение">

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Моё тестовое изображение">
  </body>
</html>

Здесь мы имеем:

  • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
  • <html></html> — элемент <html>.  Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
  • <head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
  • <body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
  • <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
  • <title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Давайте снова обратим наше внимание на элемент изображения:

<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

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

  1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
  2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").

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

В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2> (en-US)–<h6> (en-US), хотя обычно вы будете использовать не более 3-4 :

<h2>Мой главный заголовок</h2>
<h3>Мой заголовок верхнего уровня</h3>
<h4>Мой подзаголовок</h4>
<h5>Мой под-подзаголовок</h5>

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента <img>.

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

<p>Это одиночный абзац</p>

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

  1. Ненумерованные списки
    - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
  2. Нумерованные списки - это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>

Мы могли бы изменить разметку на эту:

<p>Mozilla, мы являемся мировым сообществом</p>

<ul>
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>

<p>работающих вместе . .. </p>

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент —

<a>a это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

  1. Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".
  2. Оберните текст в элемент <a>, например так:
    <a>Манифест Mozilla</a>
  3. Задайте элементу <a> атрибут href, например так:
    <a href="">Манифест Mozilla</a>
  4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
    <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference ("гипертекстовая ссылка").

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

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

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

Справочник тегов и атрибутов HTML

названия тегов краткое описание тегов
<a> Предназначен для создания ссылок (гипертекста).
Атрибуты:
name - Присваивает имя элементу.
href - Присваивает адрес ресурса, к которому ведет ссылка.
для создания ссылки вызова почтовой программы href="mailto:e-mail"
title- Всплывающая подсказка

Синтаксис:
<a href="page.html" title="описание">открыть страницу</a>
<a href="http://www.site.ru" >ссылка на сайт</a>
<a href="mailto:[email protected]">открыть почтовую программу</a>
<a name="razdel">присвоить имя</a>
<a href="#razdel">перейти к закладке</a>

Читать о теге подробно в учебнике HTML

<abbr> Выделяет в тексте аббревиатуру. Обычно подчеркивается пунктирной линией.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<abbr title="Ваше описание">HTML</abbr>

<acronym> Выделяет в тексте акроним. Обычно подчеркивается пунктирной линией.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<acronym title="Ваше описание">Генштаб</acronym>

<address> Указывает автора документа и его адрес. Обычно отображается курсивом.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<address title="Ваше описание">Иванов Иван Иванович</address>

<area> Определяет области карты-изображения которые являются ссылками на тот или иной документ. располагается внутри тега <map>
Атрибуты:
alt - альтернативный текст для области изображения
title- всплывающая подсказка
href - указывает путь к открываемому документу
shape - форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
  • rect - прямоугольная область
  • poly - область представляет собой некий многоугольник
  • circle - область заданная окружностью
coords - координаты области
nohref - область без ссылки на другой документ
target - указывает в каком окне следует открывать документ.
  • _blank - открыть в новом окне
  • _self - открыть в текущем окне (по умолчанию)
  • _parent - открыть документ в фрейме-родителе, если фреймов нет, то работает как _self.
  • _top - отменяет фреймы и загружает документ в полном окне браузера, если фреймов нет, то как _self.
Синтаксис:


   <area href="primer.html" shape="rect" coords="15,15,80,80" alt="описание" title="описание" target="_blank">

не требует закрывающего тега

Читать о теге подробно в учебнике HTML

<b> Делает текст полужирным. Аналогичен тегу <strong>
<base>
в редакции..


Синтаксис:

<basefont> в редакции..


Синтаксис:

<bdo> Определяет направление вывода текста. Основное предназначение работа с текстами языковых групп, где чтение происходит справа - налево.
Атрибуты:
dir - Направление
  • ltr Слева - направо (по умолчанию)
  • rtl справа - налево
title- Всплывающая подсказка

Синтаксис:

<bdo dir="rtl" title="Ваше описание">Упер казак репу</bdo>
<bgsound> Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки.
Атрибуты:
loop - Указывает на количество повторов воспроизведения файла.
  • 1 - Постоянное, непрерывное воспроизведение звукового файла.
  • 0 - Воспроизведение звукового файла только один раз.
  • X - Заданное количество повторов воспроизведения где Х - число повторов.
src - Указывает путь к звуковому файлу

Синтаксис:
<bgsound src="music.wav" loop=3>

Не требует закрывающего тега.

<big> Делает текст крупным.
<body> "Тело" документа указывает содержание видимой части документа.
Атрибуты:
bgcolor - задаёт цвет фона документа.
background - указывает адрес рисунка делая его фоном документа.
text - цвет текста документа.
link - цвет ссылок.
vlink - цвет посещённых ссылок.
alink - цвет нажатой, активной ссылки.
bgproperties="fixed" - делает рисунок фон фиксированным.(фоновое изображение не прокручивается при нажатии PageDown)

Синтаксис:
<body link="#008000" alink="# ff0000 " vlink="# ffff00" text="#484800" bgcolor="#ffffff" background="fon.jpg" bgproperties="fixed">
содержание видимой части документа
</body>

Читать о теге подробно в учебнике HTML

<blockquote> Предназначен для создания цитат.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<blockquote title="подсказка">Данный текст будет являться цитатой, имея отступы с обеих сторон документа и остального текста</blockquote>

<br> Перенос строки.
<button> в редакции..


Синтаксис:

<caption> в редакции..


Синтаксис:

<center> Горизонтальное выравнивание всех элементов по центру документа.
<cite> Выделяет в тексте цитату. Обычно курсивом.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<cite title="Ваше описание">Лед тронулся! господа присяжные заседатели!</cite>

<code> Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.
Атрибуты:
title - всплывающая подсказка

Синтаксис:
<code title="Ваше описание">Некий программный код</code>

<col> в редакции..


Синтаксис:

<colgroup> в редакции. .


Синтаксис:

<dd> Описание списка определений.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<dl>
    <dt>Опрределение
       <dd title="подсказка">Описание определения
</dl>

Закрывающий тег необязателен.

Читать о теге подробно в учебнике HTML

<del> Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<del title="Ваше описание">Старая цена 1000р.</del> - Новая 999 р.!!!

<dfn> Отмечает текст как определение. Обычно отображается курсивом.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<dfn title="Ваше описание">Электроток - это направленное упорядоченное движение заряженных частиц</dfn>

<div> Определяет блок HTML. Преимущественно используется совместно с CSS.
Атрибуты:
align - Выравнивание блока относительно страницы:
  • left - по левому краю документа (по умолчанию)
  • right - по правому краю документа
  • center - по центру
  • justify - по обоим краям документа
title - Всплывающая подсказка.
unselectable - Запрещает или разрешает пользователю выделять текст в блоке.
  • on - запрещает,
  • off - разрешает.
Синтаксис:
<div unselectable="on" align="center" title="подсказка">Текст в этом блоке нельзя выделить</div>

Читать о теге подробно в учебнике HTML

<dl> Создаёт список определений.
<dt> Определение списка определений.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<dl>
    <dt title="подсказка">Опрределение
       <dd>Описание определения
</dl>

Закрывающий тег необязателен.

Читать о теге подробно в учебнике HTML

<em> Выделяет особенно важный фрагмент текста. Обычно браузерами отображается курсивом.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<em title="Ваше описание">этот текст будет наклонным</em>

<embed>
в редакции..


Синтаксис:

<fieldset> в редакции..


Синтаксис:

<font> Шрифт.
Атрибуты:
size - размер шрифта
color - цвет шрифта
face - задаёт шрифт из библиотеки шрифтов

Синтаксис:
<font face="arial" size="+2" color="#ff0000"> этот текст будет напечатан красным цветом с помощью шрифта Аrial размером+2 </font>

Читать о теге подробно в учебнике HTML

<form> в редакции. .


Синтаксис:

<frame> Определяет фрейм в фреймовой структуре документа. Располагается внутри тега <frameset>.
Атрибуты:
srs - Путь к документу. Обязательный атрибут
name - Присваивает имя фрейму.
marginwidth - Отступ в пикселях от левого и правого края фрейма.
marginheight - Отступ в пикселях от верхнего и нижнего края фрейма.
scrolling - Определяет наличие полос прокрутки содержимого фрейма.
  • no- никогда не показывать полосу прокрутки,
  • yes - всегда показывать,
  • auto- показывать в том случае если она необходима.
noresize - Запрещает пользователю изменять размеры фрейма.
frameborder - Определяет наличие рамок у фрейма.
  • 1 - включить рамку
  • 0- выключить рамку
bordercolor - Задаёт цвет бордюра фрейма.

Синтаксис:
<html>
   <head>
      <title>фреймы</title>
   </head>
   <frameset rows="30%,70%">
      <frame src="primer1. html" marginwidth="0" marginheight="0" noresize>
      <frame src="primer2.html" name="osnovnoe" scrolling="no" bordercolor="#ff0000">
   </frameset>
</html>

Не требует закрывающего тега.

Читать о теге подробно в учебнике HTML

<frameset> Определяет фреймовую структуру документа. Используется вместо тега <body>.
Атрибуты:
rows - Определяет количество и размеры горизонтальных фреймов в пикселях процентах или * - использовать всё свободное пространство.
cols - Количество и размеры вертикальных фреймов.
border - Определяет ширину рамок фреймов в пикселях.
frameborder - Определяет наличие рамок у фрейма.
  • 1 - включить рамку
  • 0 - выключить рамку
framespacing - определяет ширину рамок фреймов в пикселях. Альтернатива border и frameborder при нулевом значении.

Синтаксис:
<html>
   <head>
      <title>фреймы</title>
   </head>
   <frameset rows="15%,85%" framespacing="0" frameborder="0" border="0">
          <frame src="logotype.html">
          <frameset cols="20%,80%" framespacing="0" frameborder="0" border="0">
                <frame src="menu.html">
                <frame src="text.html">
          </frameset>
   </frameset>
</html>

Читать о теге подробно в учебнике HTML

<h2> Делает текст заголовоком. Может иметь значение от 1-6.
Атрибуты:
align -выравнивание заголовока по:
  • center - центру
  • left - левому краю
  • right - правому краю
title- Всплывающая подсказка

Синтаксис:
<h4 title="Ваше описание" align="right">заголовок</h4>

Читать о теге подробно в учебнике HTML

<head> "Голова" определяет место в документе не для отображения видимой его части "тела" может располагать в себе теги предназначенные для поисковых машин, а так же название документа.
<hr> Рисует горизонтальную линию.
Атрибуты:
align -выравнивание линии по:
  • center - центру
  • left - левому краю
  • right - правому краю
size - толщина линии
width - ширина линии
color - присваивает цвет линии
noshade - указывает на отсутствие тени линии

Синтаксис:
<hr align="left" size="5" color="#ff0000" noshade>
не требует закрывающего тега

Читать о теге подробно в учебнике HTML

<html> Указывает программам просмотра html страниц начало и конец документа.
<i> Делает текст наклонным.
<iframe> Вводит на страницу не фреймовой структуры плавающий фрейм.
Атрибуты:
src - Путь к вводимому документу (обязательный атрибут)
width - ширина плавающего фрейма в пикселях или процентах
height - высота плавающего фрейма

scrolling - показ полосы прокрутки:

  • no- никогда не показывать полосу прокрутки,
  • yes - всегда показывать,
  • auto- показывать в том случае если она необходима.
align - выравнивание пваюшего фрейма:
  • left - слева
  • right - справа
  • top - выше
  • bottom - ниже
frameborder - наличие рамки вокруг плавающего фрейма:
  • 1 - включить рамку
  • 0- выключить рамку
Синтаксис:
<iframe src="primer.html" align ="left" scrolling="auto" frameborder="1"></iframe>

Читать о теге подробно в учебнике HTML

<img> Выводит графическое изображение (рисунок).
Атрибуты:
src - адрес рисунка. (обязательный атрибут)
align -выравнивание рисунка по:
  • center - центру
  • left - левому краю
  • right - правому краю
  • bottom - нижнему краю
  • top - верхнему краю
  • middle - по середине
alt - Описание рисунка (когда он не загружен), может выполнять роль всплывающей подсказки.
title- Всплывающая подсказка
border - Толщина рамки
bordercolor - Цвет рамки
width - Ширина рисунка
height - Высота рисунка
hspace - Горизонтальный отступ
vspace - Вертикальный отступ
ismap - Изображение является навигационной картой на сервере
usemap - Изображение является навигационной картой на стороне клиента.

Синтаксис:
<img src="foto.jpg" alt="описание" title="описание" align="right" hspace="10" vspace="10" border="2" bordercolor="#ff0000">
Не требует закрывающего тега

Читать о теге подробно в учебнике HTML

<input> в редакции..


Синтаксис:

<ins> Выделяет новый текст в новой версии документа. Выделенный текст станет подчёркнутым. Противоположен по значению тегу <del>.

Атрибуты:
title- всплывающая подсказка

Синтаксис:
<del> Старая цена 1000р. </del> - <ins title="Ваше описание">Новая 999 р.</ins>!!!

<kbd> От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры. Обычно отображается моноширинным шрифтом.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<kbd title="Ваше описание">Текст набранный клавиатурой</kbd>

<label> в редакции..


Синтаксис:

<legend> в редакции..


Синтаксис:

<li> Обозначает элемент списка. Используется в нумерованных и ненумерованных списках.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<ul>
      <li title="главный пункт">Пункт 1
      <li>Пункт 2
      <li>Пункт 3
</ul>

Закрывающий тег необязателен.

Читать о теге подробно в учебнике HTML

<link> Указывает на связь документа с каким либо внешним файлом. Тег <link> является ссылкой, но не для людей а для программ, и ведет к внешнему файлу например иконке или таблице стилей.. Располагается в "голове" документа между тегом <head></head> и не выводится браузерами на экран.

Атрибуты:
href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

  • shortcut icon - Определяет, что подключаемый файл является иконкой.
  • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml - Файл в формате XML для описания ленты новостей.
type - тип данных подключаемого файла.

Синтаксис:
<head>
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="stylesheet" href="style.css" type="text/css">
   <title>link</title>
</head>

Не требует закрывающего тега.

<map> Определяет место в коде документа в котором создаётся описание карты-изображения с помощью тега/тегов <area>
Атрибуты:
name - указывает имя графического изображения которое является картой

Синтаксис:
<img src="karta. jpg" usemap="#panel" border="0">
<map name="panel">
   <area href="primer.html" shape="rect" coords="15,15,80,80" alt="описание" title="описание" target="_blank">
</map>

Читать о теге подробно в учебнике HTML

<marquee> Бегущая строка.
Атрибуты:
behavior - определяет тип скроллинга, может иметь следующие значения:
  • alternate - колебательные движения от края к краю
  • scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
  • slide - прокручивание текста c остановкой.
scrollamount - скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.

direction - направление движения текста. значения:

  • up - вверх,
  • down - вниз,
  • left - влево,
  • right - вправо.
bgcolor - цвет фона бегущей строки,
height - высота строки,
width - ширина строки.
title- Всплывающая подсказка

Синтаксис:
<marquee behavior="alternate" direction="right" scrollamount="8" bgcolor="#b40000" title="описание">этот текст будет являтся бегущей строкой</marquee>

Читать о теге подробно в учебнике HTML

<meta> Определяет мета теги информация в которых предназначена для браузеров и поисковых систем. Мета теги не видны пользователю и располагаются в заголовке HTML документа между тегами <head> </head>

Атрибуты:
http-equiv - указывает браузеру как следует обработать основное содержание документа.
name - информационное имя.
content - информационное содержание(обязательный атрибут).
Атрибуты http-equiv и name могут быть равны любому подходящему идентификатору.

Синтаксис:
<head>
   <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
   <meta name="author" Content="Остап Бендер">
   <meta name="copyright" Content=""Рога и копыта" Остап Бендер">
   <meta name="description" Content="Производим закупку по выгодным ценам рогов и копыт!">
   <meta name="keywords" Content="рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене">

</head>

Не требует закрывающего тега.

Читать о теге подробно в учебнике HTML

<nobr> Запретить перенос строки. Противоположенный по значению тег <br>


Синтаксис:
<nobr>Длинная, длинная, очень длинная строка.. которая не будет переносится на другую строчку так как мы принудительно запретили ей это делать. Из-за неё появится горизонтальная полоса прокрутки, однако, что поделаешь, раз нам так захотелось..</nobr>

<noembed> в редакции..


Синтаксис:

<noframes> Тег <noframes> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках.
<noscript> Тег <noscript> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает скрипты или они принудительно выключены в его настройках.


Синтаксис:
<noscript>Извините, но Ваш браузер не поддерживает скрипты..</noscript>

<object> в редакции..


Синтаксис:

<ol> Определяет нумерованный (упорядоченный) список.
Атрибуты:
type-Тип маркера
  • А - Заглавные буквы
  • а - Строчные буквы
  • I - Заглавные римские цифры
  • i - Строчные римские цифры
  • 1 - Арабские цифры (по умолчанию)
title - Всплывающая подсказка
start - Начальное значение для нумерованного списка

Синтаксис:
<ol type=1 start="24" title="список">
      <li>Пункт 24
      <li>Пункт 25
      <li>Пункт 26
</ol>

Читать о теге подробно в учебнике HTML

<optgroup> в редакции..


Синтаксис:

<option> в редакции..


Синтаксис:

<p> Создаёт параграф.
Атрибуты:
align - Выравнивание параграфа относительно страницы:
  • left - по левому краю документа (по умолчанию)
  • right - по правому краю документа
  • center - по центру
  • justify - по обоим краям документа
title- Всплывающая подсказка

Синтаксис:
<p align="right" title="Ваше описание">Текст</p>

Читать о теге подробно в учебнике HTML

<param> в редакции..


Синтаксис:

<pre> Обрамляет предварительно отформатированный текст. Браузер при выводе текста на экран не удаляет пробелы и переносы строк.
<q> Предназначен для создания цитат. От <blockquote> отличается тем что цитата не имеет отступов. А в отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<q title="подсказка">Данный текст будет являться цитатой.</q>

<s> Делает текст перечёркнутым. Аналогичент тегу <strike>.
<samp> Выделяет текст как образец. Используется для отметки текста являющемся результатом работы программ. Отображается моноширинным шрифтом.

Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<samp title="Ваше описание">Этот текст является результатом действия некой программы</samp>

<script> Внедряет на страницу скрипт.
Атрибуты:
defer - Указывает на то что перед выполнением скрипта следует полностью загрузить документ в который он внедрён.
type - Определяет тип содержимого тега <script>
language - Определяет язык скрипта.
  • JScript
  • javascript
  • VBS
  • VBScript
src - Путь к внешнему файлу содержащему скрипт.

Синтаксис:
<html>
   <head>
      <title>скрипт</title>
   </head>
   <body>
      <script language="vbscript">
         Sub knopka()
          Alert "Привет мир!"
         End Sub
      </script>
      <button>кнопка</button>
   </body>
</html>

<select> в редакции..


Синтаксис:

<small> Делает текст малым.
<span> Определяет контейнер для внутреннего текста. Как правило используется совместно с CSS.
Атрибуты:
title - Всплывающая подсказка.
unselectable - Запрещает или разрешает пользователю выделять текст в блоке.
  • on - запрещает,
  • off - разрешает.
Синтаксис:
<span unselectable="on" title="Описание">Первое</span> слово в параграфе имеет собственыые свойства
<strike> Делает текст перечёркнутым. Аналогичент тегу <s>.
<strong> Выделяет особенно важный фрагмент текста. Обычно браузерами отображается полужирным.
Атрибуты:
title- всплывающая подсказка

Синтаксис:
<strong title="Ваше описание">Этот текст будет полужирным</strong>

<style> Служит для определения стилей элементов страницы. Тег <style> распологается в заголовке страницы между <head></head>.
Атрибуты:
media - Указывает на устройство вывода, для работы с которым предназначена таблица стилей.
  • all -Все устройства.
  • screen - Монитор (по умолчанию).
  • print - Принтер.
  • projection - Проектор.
  • braille - Устройства, основанные на системе Брайля. Предназначены для слепых людей.
  • speech - Речевые синтезаторы.
type - Сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Синтаксис:

   
      Стили
      style type="text/css">
         a:link {
         color: #008000;
         text-decoration: none;
         font-size: 14px;
         }
         a:hover {
         text-decoration: none;
         color: #ff0000;
         font-size: 18px;
         }
      </style>
   
   
      открыть страницу
   

<sub> Нижний индекс.
<sup> Верхний индекс.
<table> Создаёт таблицу.
Атрибуты:
align - Выравнивание таблицы по:
  • left - по левому краю (по умолчанию)
  • right - по правому краю
  • center - по центру
  • justify - по левому и правому краю
bgcolor - Цвет фона таблицы.
border - Толщина бордюра в пикселях.
background - Задает фоновый рисунок в таблице.
bordercolor - Цвет бордюра.
cellspacing - Расстояние между ячейками таблицы.
cellpadding - Расстояние между содержимым ячейки и рамкой.
width - Ширина таблицы в процентах или пикселях.
height - Высота таблицы в процентах или пикселях.
cols - Определяет число колонок в таблице. Позволяет браузерам показывать содержимое таблицы ещё до окончания её полной загрузки.
frame - Определяет в каких местах таблицы следует показывать бордюр.
  • void - Нет бордюра
  • border - Бордюр вокруг всей таблицы. (по умолчанию)
  • above - Бордюр по верхнему краю таблицы.
  • below - Бордюр только снизу таблицы.
  • hsides - Только горизонтальные границы.
  • vsides - Только вертикальные границы.
  • rhs -Бордюр только справа.
  • lhs - Бордюр только слева.
rules - Определяет в каких местах ячеек таблицы следует показывать бордюр.
  • all - Вокруг каждой ячейки.(по умолчанию)
  • groups - Между группами ячеек образованными тегами <thead>, <tbody>, <tfoot>, <colgroup>, <col>.
  • cols - Только между столбцами таблицы.
  • none - Отсутствуют.
  • rows - Только между строк таблицы.
Синтаксис:
    table cols="2" border="5" frame="vsides" align="center" cellpadding="5" cellspacing="2" bgcolor="#ffa0cf">
      
          строка1 ячейка1 строка1 ячейка2
      
      
          строка2 ячейка1 строка2 ячейка2
      
    </table>

Читать о теге подробно в учебнике HTML

<tbody> в редакции..


Синтаксис:

<td> Создаёт отдельную ячейку в таблице.
Атрибуты:
width - Ширина ячейки в процентах или пикселях
height - Высота ячейки в процентах или пикселях

align - Выравнивает текст в ячейке:

  • left - по левому краю (по умолчанию)
  • right - по правому краю
  • center - по центру
  • justify - по левому и правому краю
valign - Выравнивает текст в ячейке по вертикали:
  • top - по верхнему краю
  • middle - по центру
  • bottom - по нижнему краю
  • baseline - по базовой линии.
colspan - количество столбцов занимаемое ячейкой
rowspan - количество рядов занимаемое ячейкой
bgcolor - Цвет фона ячейки
background - Задает фоновый рисунок в ячейке.
bordercolor - Цвет бордюра.
title - Всплывающая подсказка
nowrap - Запрещает перенос строк в ячейке.

Синтаксис:
    <table border="1">
       <tr>
          <td colspan="2" valign="top" align="center" bgcolor="#b2ff80">строка1 ячейка1</td>
       </tr>
       <tr>
          <td bgcolor="#ffa0cf">строка2 ячейка1</td>
          <td title="Описание ячейки" align="center">строка2 ячейка2</td>
       </tr>
    </table>

Читать о теге подробно в учебнике HTML

<textarea> в редакции..


Синтаксис:

<tfoot> в редакции..


Синтаксис:

<th> Создаёт ячейку в таблице которая определяется как заголовок. Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным.

Атрибуты:
width - Ширина ячейки в процентах или пикселях
height - Высота ячейки в процентах или пикселях

align - Выравнивает текст в ячейке:

  • left - по левому краю
  • right - по правому краю
  • center - по центру
  • justify - по левому и правому краю
valign - Выравнивает текст в ячейке по вертикали:
  • top - по верхнему краю
  • middle - по центру
  • bottom - по нижнему краю
  • baseline - по базовой линии.
colspan - количество столбцов занимаемое ячейкой
rowspan - количество рядов занимаемое ячейкой
bgcolor - Цвет фона ячейки
background - Задает фоновый рисунок в ячейке.
bordercolor - Цвет бордюра.
title - Всплывающая подсказка
nowrap - Запрещает перенос строк в ячейке.

Синтаксис:
    <table border="1">
       <tr>
          <th colspan="2" title="Описание заголовка" bgcolor="#b2ff80" bordercolor="#ff0000">Заголовок таблицы</th>
       </tr>
       <tr>
          <td bgcolor="#ffa0cf">строка2 ячейка1</td>
          <td title="Описание ячейки" align="center">строка2 ячейка2</td>
       </tr>
    </table&gt

<thead> в редакции..


Синтаксис:

<title> Заголовок и название документа.
<tr> Создаёт строку в таблице.
Атрибуты:
align - Выравнивает текст в ячейках строки:
  • left - по левому краю (по умолчанию)
  • right - по правому краю
  • center - по центру
  • justify - по левому и правому краю.
valign - Выравнивает текст в ячейках строки по вертикали:
  • top - по верхнему краю
  • middle - по центру
  • bottom - по нижнему краю
  • baseline - по базовой линии.
bordercolor - Цвет бордюра.
bgcolor - Цвет фона ячеек строки

Синтаксис:
    <table border="1">
       <tr valign="middle" align="center" bordercolor="#ff0000">
          <td>строка1 ячейка1</td> <td>строка1 ячейка2</td>
       </tr>
       <tr valign="top" align="left" bgcolor="#ffa0cf">
          <td>строка2 ячейка1</td> <td>строка2 ячейка2</td>
       </tr>
    </table>

Читать о теге подробно в учебнике HTML

<tt> Делает текст моноширинным.
<u> Делает текст подчёркнутым.
<ul> Определяет ненумерованныый (неупорядоченный)список.
Атрибуты:
type-Тип маркера
  • disk - Закрашенный кружок. (по умолчанию)
  • circle - Незакрашенный кружок
  • square - Квадрат
title- Всплывающая подсказка

Синтаксис:
<ul type=circle title="список">
      <li>Пункт 1
      <li>Пункт 2
      <li>Пункт 3
</ul>

Читать о теге подробно в учебнике HTML

<var> Выделяет в тексте переменные. Обычно отображается курсивом.
Атрибуты:
title- Всплывающая подсказка

Синтаксис:
<var title="Ваше описание">переменная</var>

<wbr> Разрешает перенос строки.
Используется внутри тега <nobr>

Синтаксис:
<nobr> Длинная, длинная, очень длинная строка.. которая не будет переносится на другую строчку так как мы принудительно запретили ей это делать. <wbr> Однако именно в этом месте мы все же разрешим перенести текст на следующую строчку </nobr>

Не требует закрывающего тега.

<xmp> Отображает текст в том виде в котором он и был набран. Пробелы, переносы строк не удаляются, кроме того спецсимволы выводятся как обычный текст.

Синтаксис:
<xmp>
Пример:
<html>
      <head>
            <title>Моя первая страничка </title>
      </head>
      <body>
            Привет мир!!!
      </body>
</html>
</xmp>

Настройка метатегов – Prom Ассистент

Данный модуль позволяет изменить автоматически настроенные шаблоны метатегов страниц сайта: заголовки (title), описания (description), ключевые слова (keywords), сквозной текст, а также морфологически адаптировать ключевые слова и автоматически подставлять их для основных SEO-элементов страниц. Если компания использует стандартные настройки, подобранные seo-специалистами портала, то мы можем гарантировать, что у компании все настроено правильно.

Для главной страницы, страниц товаров, групп товаров, производителей вы можете настроить следующие индивидуальные SEO-параметры:

  • Заголовок (title).
  • Описание (description).
  • Ключевые слова (keywords).

Данные SEO-параметры можно настроить в SEO-модуле, который находится в кабинете компании на странице «Инструменты веб-мастера и SEO/ Настройка метатегов». Для товаров и групп товаров сделать это также можно при редактировании товара/группы товаров.

Обратите внимание: раздел отображается, если включено приложение «SEO-настройки». Подробнее смотрите документ «Приложение SEO-настройки».

Возможность работы с настройками SEO доступна компаниям на платных пакетах услуг. Обратите внимание, что SEO-настройки, указанные при редактировании конкретного товара/группы товаров, имеют приоритет перед шаблонными настройками, указанными в SEO-модуле.

Внимание! Меняйте настройки SEO с осторожностью! SEO-настройки страниц вашего сайта по умолчанию уже оптимизированы специалистами Prom.ua. Рекомендуем вам доверять их настройку только профессиональным SEO-специалистам. Неправильно указанные метатеги могут навредить вашему сайту.

Кратко о настройке метатегов

Модуль позволяет сделать настройки для следующих страниц:

  • Главная страница сайта
  • Страницы групп товаров
  • Страницы товаров/услуг
  • Страницы производителей

В модуле возможна настройка таких SEO-параметров:

  • Заголовка (Title)
  • Описания (Description)
  • Ключевых слов (Keywords)
  • Сквозного текста

Зачем нужны метатеги страниц?

Метатеги страниц — Заголовок (title), Описание (description), Ключевые слова (keywords) и сквозной текст помогают «продвигать» страницы вашего сайта в поисковых системах.

Заголовок (Title)

У каждой страницы в Интернет есть тег Title, иначе говоря – заголовок страницы. Именно он отображается в заголовке браузера и в виде ссылки в результатах поиска. Этот тег — один из самых важных для поисковых систем: он отображается в заголовке окна браузера и используется большинством поисковых систем в качестве одного из ключевых факторов для ранжирования результатов поиска.

В теге Title рекомендуем вам использовать:

  1. Название товара с его особенностями, если они существуют
    Например, у товара «Ноутбук Asus K52J» существует множество модификаций, по которым ноутбуки одной «линейки» отличаются друг от друга. Поэтому необходимо писать название товара с учетом этих модификаций — не просто «Asus K52J», а «Asus K52J 165KXD». Так вы сразу дадите точный ответ тем пользователям, которые знают, что они хотят, а значит — они будут более подготовлены к совершению заказа. Обратите внимание на то, что дублирование Title для разных товаров на одном и том же сайте недопустимо. Для поисковых систем несколько товаров с одинаковыми Title — негативный признак.
  2. Дополнительные слова, которые указывают на тип вашей деятельности
    Если вы занимаетесь продажами, необходимо включить слова типа «купить, цена, интернет-магазин» в Title, если вы занимаетесь ремонтом – используйте слова «ремонт, сервис» и т.д. Еще раз отметим, эти слова нужно включать именно в Title, а не в само название товара. Не включайте в Title слова, которые не относятся к нашей деятельности, например «мы не занимаемся ремонтом». При добавлении подобных слов ваш сайт все равно будут находить по запросу «ремонт», однако не найдя нужных товаров — просто уходить с вашего сайта. Кроме этого, учитывайте сам способ формирования Title – иногда он может формироваться некорректно, так, что даже с первого места в результатах поиска ваш сайт не получит посещений. Например:
  3. Название региона
    Мы рекомендуем вам указывать название конкретного региона в Title только в том случае, если вы работаете в данном конкретном регионе.
  4. Ключевые слова
    Вы можете использовать ключевые слова в Title, однако избегайте их простого перечисления через запятую ― это не даст вам SEO-преимуществ. Неправильно: «Купить соковыжималку, соковыжималки, соковыжималка Киев, соковыжималка недорого». Правильно: «Соковыжималки ― купить недорого в Киеве в Интернет-магазине 'Мир бытовой техники'»

В отношении длины Title мы рекомендуем не вводить заголовки длиннее 12-ти слов или 70-ти символов. Разные поисковые системы берут разное количество слов из Title для формирования поисковых результатов.

Описание (Description)

Содержание этого HTML-тега представляет собой краткое описание страницы. Description непосредственно на сайте не отображается (не виден посетителю, можно увидеть только в режиме просмотра исходного кода страницы), однако его видят и используют поисковые роботы, индексирующие ваш сайт. Иногда текст Description формирует так называемый «снипет» в результатах поисковой выдачи — «серый текст» с кратким описанием после ссылки на страницу. Сам Description на результаты поиска не влияет, однако смысл текста Description может повлиять на решение пользователя перейти или не перейти по ссылке на ваш сайт. Описание ни в коем случае не должно просто повторять содержание Title. Идеальный вариант — сделать Description смысловым продолжением Title.

В теге Description рекомендуем вам использовать:

  1. Краткое описание страницы, на которую попадет пользователь
    Текст Description должен отвечать на главный вопрос: «Что увидит пользователь при переходе на данную страницу?»
  2. Основные преимущества покупки у вашей компании
    Укажите в Description основные ваши преимущества — возможность получить подарок с заказом, бесплатная или быстрая доставка и другие преимущества, которые выделяют вас на фоне конкурентов. Эти данные увеличат количество переходов на ваш сайт из поисковых систем.
  3. Контактные данные компании
    Вы можете указывать здесь телефон или ваш адрес ― в этом случае клиентам не нужно будет даже заходить к вам на сайт, чтобы позвонить. Этот способ работает в основном на увеличение количества прямых контактов в основном для сервисных компаний и компаний, которые оказывают срочные услуги (например, вызов эвакуатора или такси).
  4. Специальные символы
    Вы можете добавить в Description спецсимволы, которые помогут вам выделить ваш сайт в поисковой выдаче на фоне конкурентов. Выбрать варианты подходящих символов можно, например, здесь http://unicode-table.com. Старайтесь не перегружать текст описания такими символами — неподходящие по смыслу спецсимволы или их избыток могут оттолкнуть потенциальных клиентов.

Ключевые слова (Keywords)

На текущий момент ключевые слова не используются поисковыми системами для ранжирования сайта. Ключевые слова не выводятся на странице (тег Keywords можно увидеть только в режиме просмотра исходного кода страницы). Слова, добавленные в Keywords практически не влияют на продвижение в поисковых системах, однако все же иногда используются для других целей.

Например, если вы занимаетесь продажей мобильных телефонов в Украине, то ключевые слова в теге Keywords для страницы с вашими товарами будут такими: «мобильные телефоны, Украина, продажа, розница». Одним ключевым словом может быть как одно слово, так и фраза, состоящая из нескольких слов. Тем не менее, в качестве ключевых слов рекомендуется использовать именно отдельные слова.

Сквозной текст

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

Мы рекомендуем использовать этот текст для информирования пользователей о регионах доставки, если вы работаете по всей Украине.

Например, вы можете указать в этом поле: «Товар доставляется в: Киев, Харьков, Днепр, Львов…». В этом случае сквозной текст поможет повысить релевантность страницы поисковому запросу типа «название товара» + регион.

Внимание! Неоптимальный сквозной текст может негативно сказаться на поисковой оптимизации. Любите своего пользователя, выполняйте на своём сайте только полезное и качественное SEO. За дополнительной информацией по использованию данного поля обращайтесь к SEO-специалистам.     

Подробнее о сквозном тексте смотрите документ «Сквозной текст на сайте компании».

Два режима работы модуля

1. Автоматический режим работы — предустановленные шаблоны

Рекомендованным режимом работы модуля является выбор одного из предустановленный нашими SEO-специалистами шаблонов. Для каждого типа страниц вы можете использовать один из нескольких шаблонов, настроенных для страниц именно этого вида:

Пример выбора автоматических предустановленных настроек

2. Использование своих настроек — ручной режим

Чтобы использовать свои настройки для вывода заголовка, описания или ключевых слов, выберите пункт «Использовать свои настройки» и добавьте в текстовое поле свой текст шаблона. Используйте переменные, описанные в этой справке ниже, чтобы получить нужный SEO-текст. Учтите, что SEO-текст должен быть уникальным для всех страниц выбранного вида — каждая группа товаров, каждая страница бренда, страница тега, товар или услуга в итоге должны обладать уникальными Title и Description. Достичь этого можно только при правильном использовании ключевых слов и SEO-переменных.

Обратите внимание: после установки своих настроек можно легко вернуться к использованию предустановленных шаблонов. Для этого нужно нажать «Вернуть стандартные настройки» в заголовке нужного блока (Главная, Группы товаров и услуг, Страницы товаров и услуг, Производители) и сохранить изменения. При этом будут возвращены стандартные настройки для всех измененных SEO-параметров этого блока.
Также можно нажать кнопку «Вернуть стандартные настройки» в заголовке окна для возврата стандартных настроек во всех блоках сразу.

Использование переменных в SEO-шаблонах

Переменные — это названия товаров, производителей (брендов), групп и другие параметры, которые будут добавлены индивидуально в Title, Description и Keywords конкретных страниц сайта компании. Добавляются такие переменные в SEO-модуле, в поле «Использовать свои настройки». Переменные отличаются наличием квадратных скобок «[]».

Пример использования шаблона с переменными

Текст, введенный в поле «Использовать свои настройки» в блоке «Группы товаров и услуг» для описания (Description): «[Группа] купить в [Регионе] — цены в интернет-магазине [Компания]. [Группа] ― описание, характеристики, фото.»

Текст Description, который будет выведен для страницы группы «Игрушки на солнечных батареях» на сайте компании: "Игрушки на солнечных батареях купить в Киеве — цены в интернет-магазине «Техника для Дома». Игрушки на солнечных батареях — описание, характеристики, фото."

Пример вывода описания (Description) для страницы группы «Игрушки на солнечных батареях» (в режиме просмотра исходного кода страницы)

Перечень доступных переменных

Переменные для главной страницы сайта компании:

  • [Компания] – название компании;
  • [Телефон] – номер телефона компании;
  • [Регион] – регион компании.

Переменные для групп товаров и страниц тегов:

  • [Компания] – название компании;
  • [Регион], в [Регионе] – регион компании в предложном падеже;
  • [Группа] – имя группы товаров;
  • [Верхняя группа] – имя корневой группы;
  • [Телефон] – номер телефона компании.

Переменные для страниц товаров и услуг:

  • [Компания] – название компании;
  • [Группа] – имя группы товаров;
  • [Регион], в [Регионе] – регион компании в предложном падеже;
  • [Товар] – имя товара;
  • [Цена] – значение цены товара или цены со скидкой;
  • [Производители] – производитель товара.

Для страниц производителей (брендов) можно использовать только одну переменную:

  • [Производители] – название производителя (бренда).

Подробная справка по использованию переменных в своих настройках

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

Перечень доступных переменных несколько отличается для Title, Description и Keywords, поэтому справка в формате PDF для каждого из этих полей разная.

Скачать эту справку можно по прямым ссылкам:

Настройки SEO для товаров и групп товаров

Настройка SEO доступна также на страницах отдельных товаров и групп товаров.  

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

Настройки SEO для товаров

При создании или при редактировании товара вы можете настроить его SEO-параметры в блоке «SEO». Правильная настройка SEO-параметров поможет вам повысить позицию данного товара в результатах выдачи поисковых систем. Чтобы настроить свои правила вывода текста заголовка, описания и ключевых слов для данного товара, выберите пункт «Использовать свои настройки» и отредактируйте нужный текст.

Настройки SEO для групп товаров

При создании или при редактировании группы товаров вы можете настроить её SEO-параметры. Правильная настройка SEO-параметров поможет вам повысить позицию страницы данной группы в результатах выдачи поисковых систем, а следовательно — привлечь больше клиентов на сайт своей компании. Чтобы настроить свои правила вывода текста заголовка, описания и ключевых слов для данной группы товаров, выберите пункт «Использовать свои настройки» и отредактируйте нужный текст.

Дополнительные замечания

  • Выбор пункта «Значения по умолчанию по шаблонам» означает, что для формирования SEO-параметров будут использованы правила, указанные в SEO-модуле.
  • Внимание! Если вы отредактировали товар, и, например, поменяли его название, а в то же время в блоке «SEO» у вас выбран пункт «Использовать свои настройки», то после такого изменения вам необходимо будет вручную исправить SEO-шаблон. Настройки, указанные в блоках «HTML заголовок», «HTML описание» и «HTML ключевые слова» в блоке «SEO» при выбранном значении «Использовать свои настройки» после редактирования товара автоматически не обновляются!

HTML 5 Справочник всех тегов онлайн и примеры

= Новое в HTML5.

Тег Описание
<!--...--> Определяет комментарий
<!DOCTYPE>  Определяет тип документа
<a> Определяет гиперссылку
<abbr> Определяет аббревиатуру или акроним
<acronym> Не поддерживается в HTML5. Использовать <abbr> Вместо.
Определяет акроним
<address> Определяет контактные данные автора/владельца документа
<applet> Не поддерживается в HTML5. Использовать <embed> or <object> Вместо.
Определяет встроенный апплет
<area> Определяет область внутри изображения-карты
<article> Определяет статью
<aside> Определяет содержание в стороне от содержимого страницы
<audio> Определяет звуковое содержимое
<b> Определяет полужирный текст
<base> Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont> Не поддерживается в HTML5. Вместо этого используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
<blockquote> Определяет раздел, который цитируется из другого источника
<body> Определяет тело документа
<br> Определяет один разрыв строки
<button> Определяет нажатую кнопку
<canvas> Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption> Определяет заголовок таблицы
<center> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<cite> Определяет название работы
<code> Определяет часть кода компьютера
<col> Задает свойства столбца для каждого столбца в <colgroup> element 
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
<data> Связывает данное содержимое с машинно-читаемым переводом
<datalist> Задает список предварительно заданных параметров для элементов управления вводом
<dd> Определяет описание/значение термина в списке описания
<del> Определяет текст, который был удален из документа
<details> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn> Представляет определяющий экземпляр термина
<dialog> Определяет диалоговое окно или окно
<dir> Не поддерживается в HTML5. Использовать <ul> Вместо.
Определяет список каталогов
<div> Определяет раздел в документе
<dl> Определяет список описания
<dt> Определяет термин/имя в списке описания
<em> Определяет подчеркнутый текст 
<embed> Определяет контейнер для внешнего (не HTML) приложения
<fieldset> Группирует связанные элементы в форме
<figcaption> Определяет заголовок для <figure> Элемент
<figure> Указывает автономное содержимое
<font> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<footer> Определяет нижний колонтитул для документа или раздела
<form> Определяет HTML-форму для ввода данных пользователем
<frame> Не поддерживается в HTML5.
Определяет окно (фрейм) в фрейме
<frameset> Не поддерживается в HTML5.
Определяет набор фреймов
<h2> to <h6> Определяет заголовки HTML
<head> Определяет сведения о документе
<header> Определяет заголовок документа или раздела
<hr> Определяет тематическое изменение содержания
<html> Определяет корень HTML-документа
<i> Определяет часть текста в альтернативный голос или настроение
<iframe> Определяет встроенный фрейм
<img> Определяет изображение
<input> Определяет элемент управления вводом
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<label> Определяет метку для <input> Элемент
<legend> Определяет заголовок для <fieldset> Элемент
<li> Определяет элемент списка
<link> Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main> Указывает основное содержимое документа
<map> Определяет изображение на стороне клиента-Map
<mark> Определяет выделенный/выделенный текст
<menu> Определяет список/меню команд
<menuitem> Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta> Определяет метаданные HTML-документа
<meter> Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav> Определяет навигационные ссылки
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript> Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object> Определяет внедренный объект
<ol> Определяет упорядоченный список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<output> Определяет результат вычисления
<p> Определяет абзац
<param> Определяет параметр для объекта
<picture> Определяет контейнер для нескольких ресурсов изображения
<pre> Определяет предварительно отформатированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет краткое предложение
<rp> Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt> Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby> Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s> Определяет текст, который больше не является правильным
<samp> Определяет выборку выходных данных из компьютерной программы
<script> Определяет сценарий на стороне клиента
<section> Определяет раздел в документе
<select> Определяет раскрывающийся список
<small> Определяет меньший текст
<source> Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span> Определяет раздел в документе
<strike> Не поддерживается в HTML5. Использовать <del> или <s> Вместо.
Определяет текст зачеркивания
<strong> Определяет важный текст
<style> Определяет сведения о стиле для документа
<sub> Определяет текст с подстрочным текстом
<summary> Определяет видимый заголовок для <details> Элемента
<sup> Определяет текст с надписью
<svg> Определяет контейнер для графики SVG
<table> Определяет таблицу
<tbody> Группирует содержимое тела в таблице
<td> Определяет ячейку в таблице
<template> Определяет шаблон
<textarea> Определяет многострочный элемент управления вводом (область текста)
<tfoot> Группирует содержимое нижнего колонтитула в таблице
<th> Определяет ячейку заголовка в таблице
<thead> Группирует содержимое заголовка в таблице
<time> Определяет дату и время
<title> Определяет заголовок документа
<tr> Определяет строку в таблице
<track> Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет телетайп текст
<u> Определяет текст, который должен быть стилистически отличается от обычного текста
<ul> Определяет неупорядоченный список
<var> Определяет переменную
<video> Определяет видео или фильм
<wbr> Определяет возможный разрыв строки

Вложенные HTML-списки: краткое описание и применение

Представление данных через списки может быть использовано для систематизации информации, формирования критериев, создания меню и навигации по страницам веб-ресурса. Списочное представление данных актуально и практично для любой области применения. Стандарт HTML предлагает простой и удобный механизм описания списков и коллекций данных.

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

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


Описание списков средствами HTML

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

Стандарт гипертекста предлагает три варианта списка для целей отображения в окне браузера, но как именно будет выполнено отображение определяет разработчик.

Маркированный список – наиболее востребован. Он прост, никаких дополнительных ограничений и может быть использован как угодно и где угодно на HTML-странице. Можно вместо маркера использовать собственную картинку, а изображение маркера можно менять в пределах одного списка.

Вложенные HTML-списки ничем не отличаются от тега списка и остальных тегов. Логика стандарта HTML, не меняется ни при каких обстоятельствах.

На самом деле есть одиночный и парный тег. Есть конструкция select – список с возможностью выбора. Вложенные HTML-списки и конструкция select никоим образом не сочетаются по стандарту и логике HTML. Соединив триаду HTML, CSS и JavaScript, можно получить систему связанных списков в варианте select.

Нумерованный список начинается с тега «ol», а список определений (понятий) с тега «dl». Чаще всего используется популярная парочка: «ul» и «li» – простой маркированный список.

В этом примере показаны вложенные списки и отступы слева. HTML допускает применение стиля непосредственно на элементах «ul» и «li». Хотя на самом деле в контексте вложенности использовать вариант с CSS – практически бесперспективно. На второй уровень вложенности CSS еще можно как-то применить, но чем дальше вглубь, тем меньше шансов проявить разнообразие в дизайне и конструкции.

Списки и меню HTML-страницы

Считается, что изначально верстка была табличной (table), потом стала «дивной» (div). Странно, что про списочную (ul) верстку никто никогда ничего не говорил. Но списки, особенно теги «ul» и «li» так часто используются для создания меню, что можно было бы сделать акцент: не важно, на чем основана верстка на table, div или ul – важно, что страница сделана и она работает.

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

Это та ситуация, когда вложенные HTML-списки показывают свою сущность: они не передают смысл, они просто отображают информацию. Способ отображения информации достаточно громоздок, даже после проведения оптимизации кода.

Так выглядит код, которым был описан, приведенный пример. Здесь:

  • хотелось бы передать логику времени тех или иных событий, но средствами HTML не построить корреляцию между позицией «Продукты» и позицией «История компании»;
  • предложена крайне тривиальная задача, но вложенные HTML-списки могут только отобразить фактическое содержимое, не устанавливая логику и связь внутри данных.

Не столь важно, что такое и как использовать списки, таблицы и блочные элементы. Достоинства и недостатки HTML - очевидны.

В комбинации с CSS и JavaScript на HTML можно вершить чудеса. С этим постулатом трудно поспорить.

Какие бывают META теги и зачем они нужны / Хабр

META-теги


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

META-теги имеют два возможных атрибута




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

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

 Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)

 

Атрибут HTTP-EQUIV


META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.
Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.
 
Значения  поля content  для Аттрибута   HTTP-EQUIV

Значение Описание Пример использования Эффект
Expires Дата устаревания. Управление кэшированием в HTTP/1.0. Если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" интерпретируется как "сейчас". Такое значение заставляет броузер каждый раз при запросе проверять — изменялся ли этот документ. Это, кстати относится и к прокси-агентам. Дата должна быть задана в формате, описываемом в RFC850,
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 2008 08:21:57 GMT">
что эквивалентно HTTP-заголовку
Expires: Wed, 26 Feb 2008 08:21:57 GMT
Поисковые роботы могут либо совсем не индексировать такой документ, либо постоянно "обнюхивать" его.
Pragma Эта директива показывает, что кешированная информация не должна использоваться и вместо этого запросы должны посылаться на сервер. Это директива имеет тоже самое значение что и CACHE-CONTROL:NO-CACHE и представлена для обратной совместимости с HTTP/1.0.

Клиенты должны использовать оба значения PRAGMA:NO-CACHE и CACHE-CONTROL:NO-CACHE когда нужно послать некешируемый запрос к серверу, про который неизвестно – совместим ли он с HTTP/1.1.
Если известно, что сервер совместим с
HTTP/1.1 клиент НЕ должен посылать PRAGMA заголовок.
 HTTP/1.1 кэш должен понимать "PRAGMA:NO-CACHE" точно также, как будто клиент послал "CACHE-CONTROL:NO-CACHE".

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">  
Content-Type Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тега, то некоторые браузеры выводят такую страницу уже в заданном charset. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-2022-JP">  Используют браузеры и поисковые системы
Content-language Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка. <META HTTP-EQUIV="Content-language" CONTENT="en-GB">
что эквивалентно HTTP-заголовку 
Язык описывается парой значений (язык-диалект). В примере: Английский-Великобритания
Для русского языка – ru-RU
Используется некоторыми поисковиками
Refresh Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа. <META HTTP-EQUIV="Refresh" Content="3, URL=http://www.name.com/page.html">
что эквивалентно HTTP-заголовку
Refresh: 3; URL=http://www.name.com/page.html
W3C не рекомендует использовать этот тег.
Google страницы с таким тегом игнорирует. Другие поисковые системы, возможно, тоже.
Cache-Control Определяет действия кэша по отношению к данному документу. Возможные значения:
Public — документ кэшируется в доступных для всех кэшах
Private — только в частном кэше
no-cache — не может быть кэширован
no-store — может быть кэширован, но не сохраняется
<META http-equiv="Cache-Control" content="public"> Используется некоторыми браузерами

Атрибут NAME


Robots
Тег <meta name="Robots" content="..."> управляет индексацией конкретной web-страницы. При этом роботам можно запретить не только индексацию самого документа, но и проход по имеющимся в нем ссылкам.
Инструкции по индексации записываются в поле content. Возможны следующие инструкции:
NOINDEX — запрещает индексирование документа;
NOFOLLOW — запрещает проход по ссылкам, имеющимся в документе;
INDEX — разрешает индексирование документа;
FOLLOW — разрешает проход по ссылкам.
ALL — равносильно INDEX, FOLLOW
NONE — равносильно NOINDEX, NOFOLLOW
Значение по умолчанию: <meta name="Robots" content="INDEX, FOLLOW">.
В следующем примере робот может индексировать документ, но не должен выделять из него ссылки для поиска дальнейших документов:
<META name="ROBOTS" content="index, nofollow">
Имя тега, названия и значения полей нечувствительны к регистру.
В поле content дублирование инструкций, наличие противоречивых инструкций и т.п. не допускается; в частности, значение поле content не может иметь вид "none, nofollow".
Google поддерживает дополнительное значение NOARCHIVE, которое запрещает помещать страницу в архив google
<META NAME="Robots" CONTENT="NOINDEX,FOLLOW"> Используется большинством поисковиков
Description Значение атрибута CONTENT — строка, которая определяет текстовое описание (краткую аннотацию) конкретной страницы Вашего сайта. Не стоит создавать слишком длинное и подробное описание Вашего сайта в данном теге, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов. Этот тег может сильно помочь в случаях, когда в документе мало текста, когда это управляющий фреймами файл (frameset) или в начале документа используются скрипты. <META NAME="description" CONTENT="Данный сайт содержит информацию для любителей старинных автомобилей, на нем Вы можете найти описание с фотографиями редких и эксклюзивных автомобилей"> Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации.
Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот
 тег, а некоторые выводят содержимое этого тега в результатах поиска (Google), поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.
Keywords Значение атрибута CONTENT — список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, в запрос на которые, Вы хотели бы, появления Вашего сайиа в списке результатов поиска. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также Вы можете здесь записать и английские слова, соответствующие содержимому Вашего сайта. Ну, а какие конкретно нужно писать слова — это уже тема отдельной статьи. Некоторые поисковые системы не индексируют сайты, в которых в данном теге повторяется одно и то же слово для увеличения позиции в списке результатов. <META NAME="keywords" CONTENT="реклама, дизайн, полиграфия"> Учитывается большинством поисковых систем. Точно известно, что НЕ учитывает  Google и Rambler
document-state Управление индексацией страницы для поисковых роботов. Определяет частоту индексации — или один раз индексировать (значение Static), или реиндексировать документ регулярно (значение Dynamic). <META NAME="Document-state" CONTENT="Static"> Используется редко
GOOGLEBOT Google поддерживает специальный тег Googlebot с помощью которого вы можете указать Google что он не должен индексировать и архивировать вашу страницу, другие поисковые системы этот тег проигнорируют. <META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">  
Author Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой. <META NAME="AUTHOR" CONTENT="www.neo-systems.ru">  
Revisit Значение этого тега указывает — как часто обновляется информация на вашем сайте, и как часто поисковая система должна на него заходить чтобы увидеть обновления. В силу сложившихся условий — поисковые системы сейчас самостоятельно определяют частоту сканирования сайта, поэтому, возможно, наличие этого тега ничего вам не даст. <meta name="revisit-after" content="15 days">  

 

Источники информации:


http://www.citforum.ru/internet/search/metatags.shtml
http://web-support.ru/adv/ps_meta_2.shtml
http://www.shtogrin.com/library/web/meta/
http://vancouver-webpages.com/META/metatags.detail.html
http://www.mattcutts.com/blog/keywords-meta-tag-in-web-search/
http://www.webotdel.ru/notes/metatags/
Очень хорошо и понятно написано http://www.w3schools.com/tags/tag_meta.asp
Какие мета-теги понимает Google  http://www.google.com/support/webmasters/bin/answer.py?answer=79812
Какие мета-теги понимает Bing
http://www.bing.com/community/blogs/webmaster/archive/2009/07/18/head-s-up-on-lt-head-gt-tag-optimization-sem-101.aspx
Google  не использует мета-тег keywords
http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html
 

Google Workspace – условия использования

Если не указано иное, описанные ниже Сервисы Google Workspace (ранее – G Suite) подпадают под действие Приложения о Сервисах Google Workspace к Основному соглашению о Google Cloud или другого соглашения, в соответствии с которым Google предоставляет такие сервисы (далее – Соглашение об использовании Google Workspace). В отношении ряда сервисов или версий могут действовать Условия использования, приведенные на странице https://workspace.google.com/terms/service-terms/.

Сервисы Google Workspace

Основные сервисы

  • Административные сервисы Cloud Identity – функции, описанные на странице https://cloud.google.com/terms/identity/user-features.html или по другому адресу, указанному компанией Google.
  • Gmail – почтовый веб-сервис, позволяющий организациям реализовывать собственные системы электронной почты на базе Google. С его помощью Конечные пользователи могут работать со своим почтовым ящиком в поддерживаемом браузере: читать, писать и пересылать письма, отвечать на них, выполнять поиск писем и упорядочивать их с помощью ярлыков. Gmail фильтрует спам и вирусы, а также позволяет Администраторам создавать правила для обработки сообщений с определенным содержанием и прикрепленными файлами или для пересылки писем на другие почтовые серверы. Правила можно настраивать для групп и Клиентов (всех доменов).
  • Currents – веб-сервис, позволяющий Конечным пользователям обмениваться ссылками, видео, изображениями и другим контентом с пользователями в том же домене Google Workspace, а также просматривать размещенный такими пользователями контент и взаимодействовать с ним. Конечные пользователи также могут создавать новые и вступать в уже существующие сообщества, чтобы общаться с другими пользователями домена, разделяющими их интересы. В случае использования Currents для размещения контента или общения с пользователями за пределами домена Google Workspace этот сервис исключается из числа Основных сервисов.
  • Google Календарь – веб-сервис, предназначенный для управления личными и корпоративными календарями, а также общими календарями команд. Он позволяет Конечным пользователям работать с личными календарями, просматривать сведения о статусе других Конечных пользователей, планировать встречи, а также бронировать переговорные комнаты и ресурсы.
  • Google Cloud Search – веб-сервис, позволяющий Конечным пользователям искать контент в Основных сервисах Google Workspace и сторонних источниках данных (если применимо), а также получать полезные практические подсказки и рекомендации.
  • Google Контакты – веб-сервис, позволяющий Конечным пользователям импортировать, хранить и просматривать контактную информацию, а также создавать собственные группы контактов, которые можно использовать для почтовых рассылок.
  • Google Документы, Google Таблицы, Google Презентации, Google Формы – веб-сервисы, с помощью которых Конечные пользователи могут создавать, редактировать и экспортировать файлы соответствующих форматов, встраивать в них контент, добавлять рисунки, предоставлять к ним доступ и совместно работать над ними.
  • Google Диск – веб-сервис с набором инструментов для хранения и передачи файлов, предоставления доступа к ним, а также для просмотра видео.
  • Google Группы для бизнеса – веб-сервис, позволяющий Конечным пользователям и владельцам сайтов создавать группы для совместной работы и управлять ими. Конечные пользователи могут вести обсуждения по электронной почте, обмениваться документами, а также предоставлять доступ к календарям, сайтам и папкам другим участникам группы. Они также могут просматривать архивы обсуждений группы и искать в них нужную информацию. Google Группы для бизнеса недоступны в бесплатной версии Google Workspace.
  • Google Hangouts, Google Chat, Google Meet – веб-сервисы, с помощью которых Конечные пользователи могут общаться в режиме реального времени. Google Hangouts позволяет обмениваться текстовыми сообщениями, созваниваться и проводить видеовстречи с одним или несколькими собеседниками. Google Chat – это функциональный мессенджер и платформа для совместной работы с возможностью интеграции контента со сторонними сервисами. Google Meet позволяет проводить видеовстречи с большим числом участников. В версиях Google Workspace Business Standard, Google Workspace Business Plus и Google Workspace Enterprise предусмотрена возможность записывать видеовстречи Google Meet, а также подключаться к ним по телефону (при этом действуют тарифы операторов связи). Общее время записи ограничено. В среднем на каждого пользователя с лицензией Google Workspace Enterprise в домене выделяется по 80 часов. Администраторы Google Workspace могут указывать, какие из сервисов будут доступны в домене. Техническая возможность вызовов в Google Hangouts обеспечивается компанией Google Dialer Inc. Техническая возможность вызовов в Google Meet обеспечивается поставщиками услуг, перечисленными на странице https://workspace.google.com/terms/service-terms/meet-telephony/providers.html. Звонки на номера экстренных служб в Google Hangouts и Google Meet не поддерживаются.
  • Google Jamboard – веб-сервис, позволяющий Конечным пользователям создавать, редактировать и экспортировать контент, добавлять к нему рисунки, предоставлять к нему доступ, совместно работать над ним и встраивать его в документы.
  • Google Keep – веб-сервис, позволяющий Конечным пользователям создавать и редактировать заметки, списки и рисунки, а также предоставлять к ним доступ и совместно работать над ними.
  • Google Сайты – веб-сервис, позволяющий Конечным пользователям создавать сайты, а затем предоставлять к ним доступ группам других Конечных пользователей или всем сотрудникам организации, а также делать их общедоступными. Владелец сайта сам решает, кто имеет право посещать сайт и редактировать его контент.
  • Google Задачи – веб-сервис, позволяющий Конечным пользователям создавать и редактировать задачи, а также управлять ими.
  • Google Сейф – веб-сервис для поиска и экспорта содержимого Google Диска и Gmail. С помощью Google Сейфа Клиенты могут архивировать данные, создавать правила хранения и удаления писем с определенным содержанием в Gmail, а также искать контент во всем домене. Кроме того, функции предоставления электронных документов позволяют создавать дела и хранить данные в юридических целях. Чтобы архивированные данные хранились на серверах Google, Клиентам необходимо приобрести и регулярно продлевать подписку на Google Сейф. Если в аккаунте пользователя включен сервис Gmail, то при включенной функции записи чата его историю переписки в Google Hangouts можно сохранять и экспортировать, а также выполнять по ней поиск.
  • Google Voice – сервис IP-телефонии, управляемый администратором. С помощью этого сервиса Клиенты могут назначать номера телефонов Конечным пользователям в организации, а также управлять этими номерами. Конечные пользователи могут совершать и принимать звонки с помощью назначенных им номеров. Также доступны дополнительные возможности, в том числе набор номеров экстренных служб с использованием функции двусторонней связи. Сервис Google Voice предоставляется Аффилированными лицами Google, как описано в Условиях использования сервиса Google Voice. При использовании Google Voice взимается дополнительная плата.
  • Настройки доступа и размещения Google Workspace позволяют Клиентам разрешить доступ к их данным только специалистам службы поддержки Google, которые находятся в определенном регионе.
  • Дополнения Workspace – общее название для Google Voice и Настроек доступа и размещения Google Workspace.
  • Функции поиска и аналитики обеспечивают расширенные возможности доступа к данным во всех сервисах. Например, нужные файлы можно искать во всех сервисах сразу, а контент автоматически сортируется по категориям.

Другие сервисы

  • В настоящее время отсутствуют.

Версии Google Workspace

G Suite Basic

  • G Suite Basic – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Google Сейфа, Google Cloud Search и Дополнений Workspace. В рамках этой версии Клиенты получают по 30 ГБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.

Google Workspace Business Starter

  • Google Workspace Business Starter – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Google Сейфа, Google Cloud Search и Дополнений Workspace. В рамках этой версии Клиенты получают по 30 ГБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. У Клиента Google Workspace Business Starter может быть не более 300 аккаунтов Конечных пользователей.

G Suite Business

  • G Suite Business – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Дополнений Workspace. В G Suite Business также есть настройки правил в отношении регионов хранения данных, действующие для основных Данных Клиента в некоторых Сервисах. Клиентам с пятью Конечными пользователями и более предоставляется неограниченное пространство на Google Диске. Клиенты, которым предоставлена скидка Google для некоммерческих организаций или у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.

Google Workspace Business Standard

  • Google Workspace Business Standard – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Google Сейфа, Google Cloud Search и Дополнений Workspace. Клиентам с пятью Конечными пользователями и более предоставляется пространство на Google Диске из расчета 2 ТБ на каждого Конечного пользователя. Клиенты, которым предоставлена скидка Google для некоммерческих организаций или у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. У Клиента Google Workspace Business Standard может быть не более 300 аккаунтов Конечных пользователей.

Google Workspace Business Plus

  • Google Workspace Business Plus – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Google Cloud Search и Дополнений Workspace. Клиентам с пятью Конечными пользователями и более предоставляется пространство на Google Диске из расчета 5 ТБ на каждого Конечного пользователя. Клиенты, которым предоставлена скидка Google для некоммерческих организаций или у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. У Клиента Google Workspace Business Plus может быть не более 300 аккаунтов Конечных пользователей.

Google Workspace Enterprise Standard

  • Google Workspace Enterprise Standard – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Google Cloud Search и Дополнений Workspace. В рамках этой версии доступна функция "Защита от потери данных" для Gmail и Google Диска, а также дополнительные средства управления и обеспечения безопасности для Администраторов, за исключением Центра безопасности Google Workspace. Кроме того, в Google Workspace Enterprise Standard поддерживается дополнительная интеграция Gmail с другими продуктами Google, а также с некоторыми средствами архивирования от сторонних разработчиков и сторонними OAuth-приложениями. Клиентам с пятью Конечными пользователями и более предоставляется пространство на Google Диске из расчета 5 ТБ на каждого Конечного пользователя. По усмотрению компании Google на основании обоснованного требования Клиента ему может быть предоставлено дополнительное пространство. Клиенты, которым предоставлена скидка Google для некоммерческих организаций или у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.

Google Workspace Enterprise Plus (ранее – G Suite Enterprise)

  • Google Workspace Enterprise Plus – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Дополнений Workspace. В рамках этой версии доступна функция "Защита от потери данных" для Gmail и Google Диска, настройки правил в отношении регионов хранения данных, действующие для основных Данных Клиента в некоторых Сервисах, дополнительные функции для поиска контента в сторонних источниках данных, а также расширенные средства управления и обеспечения безопасности для Администраторов (в том числе Центр безопасности Google Workspace). Кроме того, в Google Workspace Enterprise Plus поддерживается дополнительная интеграция Gmail с другими продуктами Google, а также с некоторыми средствами архивирования от сторонних разработчиков и сторонними OAuth-приложениями. Клиентам с пятью Конечными пользователями и более предоставляется пространство на Google Диске из расчета 5 ТБ на каждого Конечного пользователя. По усмотрению компании Google на основании обоснованного требования Клиента ему может быть предоставлено дополнительное пространство. Клиенты, которым предоставлена скидка Google для некоммерческих организаций или у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.

Google Workspace for Education

  • Google Workspace for Education Fundamentals (ранее – G Suite for Education) – бесплатная версия Google Workspace, в состав которой входят все Сервисы Google Workspace, кроме Currents, Google Cloud Search и Дополнений Workspace. Клиентам с пятью Конечными пользователями и более предоставляется неограниченное пространство на Google Диске. Клиенты, у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. Кроме того, в состав этой версии в качестве Основных сервисов входят Задания, Класс и функция "Синхронизация Chrome".
    • Задания – приложение для систем управления обучением, с помощью которого Конечные пользователи могут раздавать учащимся работы, а также собирать и оценивать их. Примечание. Приложение "Задания" не сертифицировано по стандартам ISO 27017 и ISO 27018, но будет включено в процесс сертификации Сервисов в следующем аудиторском цикле.
    • Класс – веб-сервис, с помощью которого Конечные пользователи могут создавать учебные группы и вступать в них. Сервис также позволяет учащимся просматривать задания, отправлять домашние работы и получать от преподавателей оценки.
    • Синхронизация Chrome – функция, позволяющая Конечным пользователям синхронизировать закладки, историю, пароли и другие настройки на всех устройствах, на которых они выполнили вход в браузер Chrome.
  • Google Workspace for Education Standard – расширенная версия Google Workspace for Education Fundamentals, предоставляемая за дополнительную плату. Она включает дополнительные функции, такие как настройки правил в отношении регионов хранения данных, действующие для основных Данных Клиента в некоторых Сервисах, расширенные средства управления безопасностью и улучшенную аналитику.
  • Google Workspace for Education Teaching and Learning Upgrade – расширенная версия Google Workspace for Education Fundamentals, предоставляемая за дополнительную плату. Она включает дополнительные функции для коммуникации, совместной работы и управления классами.
  • Google Workspace for Education Plus (ранее – G Suite Enterprise for Education) – расширенная версия Google Workspace for Education Fundamentals, предоставляемая за дополнительную плату. Она включает дополнительные функции, такие как настройки правил в отношении регионов хранения данных, действующие для основных Данных Клиента в некоторых Сервисах, расширенные средства управления безопасностью, улучшенные инструменты аналитики и поиска, а также дополнительные функции для коммуникации, совместной работы и управления классами.

Отправленный в архив аккаунт Google Workspace

  • Отправленный в архив аккаунт G Suite Business – версия G Suite Business, позволяющая организации сохранять аккаунты удаленных или неактивных Конечных пользователей в целях хранения данных Клиентов. В эту версию также входит Google Сейф. В рамках этой версии Клиенты получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.
  • Отправленный в архив аккаунт Google Workspace Business Plus – версия Google Workspace Business Plus, позволяющая организации сохранять аккаунты удаленных или неактивных Конечных пользователей в целях хранения данных Клиентов. В эту версию также входит Google Сейф. В рамках этой версии Клиенты получают по 5 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.
  • Отправленный в архив аккаунт Google Workspace Enterprise Standard – версия Google Workspace Enterprise Standard, позволяющая организации сохранять аккаунты удаленных или неактивных Конечных пользователей в целях хранения данных Клиентов. В эту версию также входит Google Сейф. В рамках этой версии Клиенты получают по 5 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. По усмотрению компании Google на основании обоснованного требования Клиента ему может быть предоставлено дополнительное пространство.
  • Отправленный в архив аккаунт Google Workspace Enterprise Plus (ранее – Отправленный в архив аккаунт G Suite Enterprise) – версия Google Workspace Enterprise Plus, позволяющая организации сохранять аккаунты удаленных или неактивных Конечных пользователей в целях хранения данных Клиентов. В эту версию также входит Google Сейф. В рамках этой версии Клиенты получают по 5 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. По усмотрению компании Google на основании обоснованного требования Клиента ему может быть предоставлено дополнительное пространство.

Google Workspace Essentials (ранее – G Suite Essentials и Drive Enterprise)

  • Google Workspace Essentials – версия Google Workspace, в состав которой входят Google Календарь, Google Chat, Google Диск, Google Jamboard, Google Meet и используемые совместно с ними следующие сервисы: а) Административные сервисы Cloud Identity; б) Google Контакты; в) Google Документы, Google Таблицы, Google Презентации и Google Формы; г) Google Группы для бизнеса; д) Google Keep; е) Google Сайты. Общий объем пространства на Google Диске, доступный Конечным пользователям Клиентов, ограничен. Подробная информация приведена на странице support.google.com/a?p=gse_billing.

Google Workspace Enterprise Essentials

  • Google Workspace Enterprise Essentials – версия Google Workspace, в состав которой входят все сервисы Google Workspace Essentials и в отношении которой действуют следующие правила предоставления хранилища: а) Клиентам с пятью Конечными пользователями и более предоставляется пространство на Google Диске из расчета 1 ТБ на каждого Конечного пользователя; б) Клиенты, которым предоставлена скидка Google для некоммерческих организаций или у которых не более четырех Конечных пользователей, получают по 1 ТБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail.

Google Workspace Frontline

  • Google Workspace Frontline – версия Google Workspace, в состав которой входят все Сервисы Google Workspace, за исключением Google Сейфа, Google Cloud Search и Дополнений Workspace. В рамках этой версии Клиенты получают по 2 ГБ на каждого Конечного пользователя в хранилище, предназначенном для Google Диска, Google Фото и Gmail. Клиенты могут предоставлять доступ к Google Workspace Frontline только Конечным пользователям, которые отвечают требованиям, описанным на странице https://support.google.com/a/answer/10427827.

Cloud Search Platform

  • Cloud Search Platform – версия Google Workspace, в состав которой входят Google Cloud Search и следующие сервисы, используемые совместно с Google Cloud Search: а) Административные сервисы Cloud Identity; б) Google Контакты; в) Google Группы для бизнеса. Также Cloud Search Platform позволяет искать контент в сторонних источниках данных.

Google Voice

  • Voice Starter – версия Google Voice, которая поддерживает до 10 Конечных пользователей в одной стране. Ее можно добавить в любую версию Google Workspace за дополнительную плату.
  • Voice Standard – версия Google Voice, которая поддерживает неограниченное количество Конечных пользователей в одной стране. Ее можно добавить в любую версию Google Workspace за дополнительную плату. В Voice Standard реализована поддержка стационарных телефонов и многоуровневых автосекретарей.
  • Voice Premier – версия Google Voice, которая поддерживает неограниченное количество Конечных пользователей в нескольких странах. Ее можно добавить в любую версию Google Workspace за дополнительную плату. В Voice Premier реализована поддержка стационарных телефонов и многоуровневых автосекретарей, а также доступны расширенные возможности для создания отчетов.

Настройки доступа и размещения Google Workspace

  • Настройки доступа и размещения – отдельный продукт, который можно добавить в Google Workspace Enterprise Plus за дополнительную плату.

Дополнительные продукты (они не относятся к Сервисам Google Workspace, и на них не распространяется Соглашение об использовании Google Workspace)
  • Корпоративный Google Play – платформа, с помощью которой Клиент может настраивать доступ к приложениям для Android на устройствах Конечных пользователей. Одобренные приложения появляются в корпоративном Google Play. Использование платформы регулируется условиями, приведенными на странице www.android.com/enterprise/terms.

Что такое HTML (язык гипертекстовой разметки)?

Обновлено: 01.02.2021, Computer Hope

Впервые разработанный Тимом Бернерсом-Ли в 1990 году, HTML является сокращением от языка гипертекстовой разметки . HTML используется для создания электронных документов (называемых страницами), которые отображаются во всемирной паутине. Каждая страница содержит серию подключений к другим страницам, называемых гиперссылками. Каждая веб-страница, которую вы видите в Интернете, написана с использованием той или иной версии HTML-кода.

Код

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

Как выглядит HTML-тег?

Как показано в примере тега HTML выше, компонентов не так много.Большинство тегов HTML имеют открывающий тег, содержащий имя тега, атрибуты тега, закрывающий тег, содержащий косую черту, и имя закрываемого тега. Для тегов, у которых нет закрывающего тега, такого как , рекомендуется заканчивать тег косой чертой.

Большинство тегов заключены в угловые скобки «меньше» и «больше», и все, что находится между открывающим и закрывающим тегами, отображается или затрагивается этим тегом. В приведенном выше примере тег создает ссылку под названием «Computer Hope», указывающую на надежду.html файл.

Как выглядит HTML?

Ниже приведен пример базовой веб-страницы, написанной в HTML, с описанием каждого раздела и его функций.

 

 
   Пример страницы 
  
 
 
  

Это заголовок

Это пример базовой HTML-страницы.


Поле выше содержит ключевые компоненты базовой веб-страницы. Каждая из строк объясняется ниже более подробно.

  1. Строка DOCTYPE описывает, в какой версии HTML была написана страница, чтобы Интернет-браузер мог интерпретировать следующий текст.
  2. Открывающий тег сообщает браузеру, что он читает HTML-код.
  3. Раздел содержит информацию о странице, такую ​​как ее заголовок, метатеги и расположение файла CSS.
  4. Раздел содержит все, что можно просмотреть в браузере. Например, весь видимый здесь текст содержится в тегах body.
  5. Тег

    - это видимый заголовок страницы.

  6. Тег

    - это абзац текста. Большинство веб-страниц (например, эта) имеют несколько тегов абзацев.

  7. В абзаце содержится тег , выделяющий слово example в абзаце жирным шрифтом.
  8. Наконец, закрывающие теги обертывают каждый из указанных выше тегов.

Что такое HTML5?

HTML5 - это обновление HTML из HTML4 (XHTML следует другой схеме нумерации версий). Он использует те же основные правила, что и HTML4, но добавляет некоторые новые теги и атрибуты, которые позволяют улучшить семантику и для динамических элементов, которые активируются с помощью JavaScript. Новые элементы включают:

,