Содержание

HTML meta: keywords, description | Указание кодировки

Теги <meta> используются для предоставления информации (метаданных) о веб-странице, метаданные не отображаются на веб-странице, а дают либо какие-то указания браузеру, либо предоставляют дополнительную информацию для поисковых систем: 


<head>
  <meta charset="utf-8">
  <title>Не является мета тегом, но должен присутствовать на каждой веб-странице</title>
  <meta name="keywords" content="ключевые слова">
  <meta name="description" content="Краткое описание">
</head>

В нашем примере мы использовали три элемента <meta>: первый указывает браузеру кодировку HTML-документа, два других мета тега предназначены для предоставления информации о содержимом веб-страницы для поисковых систем. Далее мы рассмотрим каждый из них подробнее.

Примечание: теги <meta> должны располагаться в элементе <head>.

Кодировка

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

Для указания кодировки используется тег <meta> с атрибутом charset, который рекомендуется располагать в качестве первого элемента внутри <head>:


<head>
  <meta charset="utf-8">
</head>

Примечание: UTF-8 является универсальной кодировкой, поддерживающей большинство языков и спецсимволов.

keywords (ключевые слова)

У любого сайта есть набор ключевых слов и словосочетаний, по которым поисковые системы ищут нужные ресурсы в сети. Именно эти слова и должны составлять содержимое keywords.

Самый простой способ подобрать нужные ключевые слова для текущей страницы — это определить по каким словам вы сами стали бы искать материал, представленный на ней? Вот это и будут нужные ключевые слова. Пример:


<meta name="keywords" content="мета тег, meta, метаданные, keywords, description">

Ключевые слова указываются через запятую или пробел и могут быть написаны в любом регистре. Рекомендуется указывать не более 10-15 ключевых слов или словосочетаний.

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

description (краткое описание)

Значение description используется для краткого описания содержимого, расположенного на текущей странице. Рекомендуемая максимальная длина такого описания не должна превышать 180 символов:


<meta name="description" content="Описание содержимого на данной странице">

Краткое описание страницы может быть использовано поисковыми система на странице с результатами поиска под названием страницы и URL-адреса:

Также краткое описание используется на сайтах некоторых соцсетей, при добавлении ссылки:

При составлении краткого описания следует учитывать следующие моменты:

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

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

Тег <title>

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

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

Тег <title> является одним из наиболее важных тегов на странице. Рассмотрим небольшой список рекомендаций, которых нужно придерживаться для написания оптимизированного заголовка для поисковых систем:

  • Длина заголовка не должна превышать 70 символов, включая пробелы.
  • Самые важные ключевые слова нужно располагать первыми в заголовке, т.е. поисковые системы будут определять ценность ключевых слов по их очередности в заголовке: первое будет считаться наиболее важным, последнее — наименее.
  • Для разделения ключевых слов или фраз лучше использовать вертикальную черту «|». Знаки пунктуации, подчеркивания и другие символы разделители желательно не использовать или использовать в тех случаях, когда ключевое слово или фразу без них написать нельзя.
  • Старайтесь исключить из заголовка разные частицы речи (например: и, если, но, потом и т.д.).
  • Можно включить в заголовок название сайта или фирмы, если название является частью ключей фразы, или если это бренд, видя который, пользователи будут заходить именно на ваш сайт.
  • Не дублируйте текст тега <title>, заголовок должен быть уникальным для каждой страницы сайта.
  • Заголовок должен быть актуален для страницы, он должен описывать то, что в данный момент представлено на странице, например его можно написать так:

<title>Тема страницы|Ключевые слова|Название компании или сайта</title>
<!-- или так -->
<title>Ключевые слова|О нас|Название компании или сайта</title>

Справочник тегов и атрибутов 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>

Что внутри «head»? Метаданные в HTML — Изучение веб-разработки

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

  • заголовок (title) страницы
  • ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
  • ссылки на иконки
  • другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

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

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

Давайте снова посмотрим на HTML-документ из прошлой статьи:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Содержимое <head>, в отличие от содержимого элемента <body>, не отображается на странице. Задача <head> — хранить метаданные документа. В приведённом выше примере <head> совсем небольшой:

<head>
  <meta charset="utf-8">
  <title>Моя тестовая страница</title>
</head>

Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.

Мы уже видели, как работает элемент <title>: его используют для добавления заголовка (названия страницы) в документ. Элемент <h2> (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

  • Элемент <h2> (en-US) виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
  • Элемент <title> — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого. 

Активное изучение: разбор простого примера

  1. Чтобы приступить к активному изучению,  скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как… в меню браузера и выберите папку для сохранения.
  2. Откройте файл в браузере. Вы увидите что-то вроде этого:

    Теперь должно стать совершенно ясно, в чём разница между <h2> и <title>!

  3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

Содержимое элемента <title> используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из <title> предлагается в качестве названия закладки.

Текст из <title> также появляется в результатах поиска, как мы скоро увидим.

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент <meta>. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:

<meta charset="utf-8">

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-странице, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

Активное изучение: экспериментируем с символьными кодировками

Чтобы проверить это, вернитесь к HTML из примера <title> (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

<p>Пример на японском: ご飯が熱い。</p>

Указываем автора и описание

У элементов <meta> часто есть атрибуты name и content:

  • name — тип элемента, то есть какие именно метаданные он содержит.
  • content — сами метаданные.

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

<meta name="author" content="Крис Миллс">
<meta name="description" content="Задача MDN — в том, чтобы обучить
новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

Активное изучение: как поисковые системы используют описание

Описание из <meta name="description"> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

  1. Перейдите на главную страницу Mozilla Developer Network.
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
  3. Найдите тег meta с описанием. Он выглядит так: 
    <meta name="description" content="Веб-документация на MDN
предоставляет собой информацию об открытых веб-технологиях,
включая HTML, CSS и различные API для веб-сайтов и
прогрессивных веб-приложений. Также на сайте содержатся материалы
для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
  4. Теперь найдите «Mozilla Developer Network» в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <meta> и <title> используется в результатах поиска, — мы не зря указали их!

Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

Примечание: Многие типы <meta> больше не используются. Так, поисковые системы больше не используют данные из элемента <meta type="keywords" content="ваши, ключевые, слова, введите, здесь">, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

Другие виды метаданных

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

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:

<meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png">
<meta property="og:description" content="Веб-документация на MDN предоставляет
собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
продуктах Mozilla, как Инструменты разработчика Firefox.">
<meta property="og:title" content="MDN Web Docs">

Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).

У Twitter также есть собственный формат метаданных, с помощью которого  создаётся аналогичный эффект, при отображении URL сайта на twitter.com:

<meta name="twitter:title" content="MDN Web Docs">

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.

Чтобы добавить на страницу favicon:

  1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
  2. Добавьте ссылку на иконку в <head> документа: 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:


<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon144.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">

<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

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

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

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент <link>, а скрипты — через элемент <script> .

  • Элемент <link> помещают в заголовок документа. У него есть два атрибута: rel="stylesheet" показывает, что мы указываем стиль документа, а в href указан путь к файлу:

    <link rel="stylesheet" href="my-css-file.css">

  • Элемент <script> не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом </body>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.

    <script src="my-js-file.js"></script>

    Примечание: Элемент <script> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.

Активное изучение: добавляем на страницу CSS и JavaScript

  1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
  2. Откройте HTML в браузере и текстовом редакторе.
  3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов <link> и <script>.

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

  • JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
  • CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

<html lang="en-US">
<html lang="ru">

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

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

<p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p>

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

На этом заканчивается наш беглый обзор по HTML-блоку head  —  с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.

Подробное описание структуры HTML-документа часть 2

Как мы уже поняли с первой части этой статьи (http://q-bit.biz/struktura-html-dokumenta-chast1), тег html – это скелет (контейнер), который определяет начало HTML — страницы и содержит внутри себя тег head (заголовок) и тег body (тело). Заголовок HTML — страницы, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением тега title. Заголовок страницы это тот текст, который отображается во вкладке. Чтобы задать заголовок страницы, нужно использовать тег title внутри тега head. Например, вот так: 


<head>
<title>Заголовок HTML - страницы</title>
</head>
Тег title является обязательным и должен непременно присутствовать в коде документа. Обязательно следует добавлять закрывающий тег /head, чтобы показать, что блок заголовка документа завершен. Ещё один из тегов, который содержит заголовок HTML – страницы – это тег meta (мета-теги). Тег meta предоставляет информацию про HTML- документ (описание страницы, ключевые слова, автор документа и т.д.). Мета-теги могут иметь такие атрибуты как: charset (задает кодировку документа), content (устанавливает значение атрибута, заданного с помощью name или http-equiv.), name (имя метатега), http-equiv (предназначен для конвертирования мета-тега в заголовок HTTP) и scheme (определяет схему, которую необходимо использовать для интерпретации значения атрибута content). С помощью мета-тегов задают кодировку HTML-страницы, для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно применит кодировку, то вместо текста будут отображаться иероглифы. Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега head использовать тег meta: 

<meta charset="имя кодировки">
Самая распространённая современная кодировка — utf-8. В мета-тегах хранится полезная для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы: 

<meta name="keywords" content="ключевые, слова">
Ещё один полезный для поисковых систем мета-тег — краткое описание страницы: 

<meta name="description" content="краткое описание">
А на этом вторая часть статьи о структуре HTML-документа завершается.

Как сделать краткое содержание статьи на сайте

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

Рис.Как сделать краткое содержание статьи на сайте

 

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

 

Как известно скрипты, виджеты, гаджеты и плагины очень грузят сайт, и html страницы открываются медленно. Всего должно быть по минимуму, особенно в самом начале ведения сайта и если ваш сайт на https. Любой сторонний виджет или скрипт может нарушать безопасное соединение.

 

 

 

Как сделать краткое содержание статьи на сайте

 

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

 

Пример подсмотрела у любимого мною блоггера Дмитрия, за что ему огромное спасибо за доступные и хорошие уроки. Его сайт у меня в панели закладок вверху браузера:)

 

К примеру на сайте статья про бегущую строку в html, я знаю как вставить бегущую строку на сайт и какой тег создает бегущую строку, но совсем не ведаю как вставить картинку в бегущую строку. Когда я захожу на такую длинную запись, нет надобности читать весь текст, я зашла по конкретному вопросу. В содержании я нажимаю на тот пункт который меня интересует и получаю быстрый ответ на свой запрос. Безусловно это уменьшает время посещения посетителя на сайте, но поисковики, особенно Яндекс любит, когда запись имеет оглавление к статье с красивыми и понятными ЧПУ.

 

 

Или же мне задали вопрос по конкретному запросу и я могу смело найти статью и кинуть ссылку на нужный раздел в статье.

 

Как делаю я cсылки внутри страницы. Для примера использую статью «Как закрепить запись вверху ленты».

 

Собрала ключевые слова в Яндекс вордстат или в условно платном сервисе Мутаген. Вставила все ключи и хвосты в запись, обязательно в html редакторе как список. Перед публикацией подготавливаю и редактирую статьи в программе Notepad++ или WordPad.

 

Беру список ключей

 

<li>Закрепить запись на WordPress</li>
<li>Как закрепить запись в фейсбук</li>
<li>Как закрепить запись в вк в группе</li>
<li>Как закрепить чужую запись на стене вконтакте</li>
<li>Как закрепить твит вверху ленты в Твиттере</li>
<li>Как закрепить сообщение на главной странице в Blogger (Blogspot)</li>

 

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

 

Заголовки и подзаголовки.

 

<h3>Закрепить запись на WordPress</h3>
<h4>Как закрепить запись в фейсбук</h4>
<h5>Как закрепить запись в вк в группе</h5>
<h5>Как закрепить чужую запись на стене вконтакте</h5>
<h6>Как закрепить твит вверху ленты в Твиттере</h6>

 

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

 

<a href="URL статьи # kлюч латыницей">Название ключа</a>
<h3>Название ключа</h3>

 

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

 

При щелчке по такой ссылке браузер прокрутит окно страницы к нужному месту где находится элемент с атрибутом id, перезагрузка страницы и текста не произойдет.

 

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

 

Вот так должно выглядеть в записи:

 

Содержание статьи:
 

<li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-zapis-na-wordpress">Закрепить запись на WordPress</a></li>
<li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-zapis-v-fejsbuk">Как закрепить запись в фейсбук</a></li>
<li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-zapis-v-gruppe-v-kontakte">Как закрепить запись в вк в группе</a></li>
<li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html#zakrepit-chuzhuyu-zapis-na-stene-vkontakte">Как закрепить чужую запись на стене вконтакте</a></li>
<li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-tvit-vverhu-lenty-v-tvittere">Как закрепить твит вверху ленты в Твиттере</a></li>

 
Заголовки и подзаголовки статьи.
 

<h3>Закрепить запись на WordPress</h3>
<h4>Как закрепить запись в фейсбук</h4>
<h5>Как закрепить запись в вк в группе</h5>
<h5>Как закрепить чужую запись на стене вконтакте</h5>
<h6>Как закрепить твит вверху ленты в Твиттере</h6>

 

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

Как сделать содержание статьи в WordPress

 

Еще очень интересный и быстрый способ создать оглавление статьи на сайте без плагина.

 

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

 

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

 

 

#soderzhanie-stati-vordpress-po-zagolovkam

 

Или запись может быть такая:

 

#1, #2, #3 и так далее.

 

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

 

К примеру основной адрес этой статьи

 

https://yablogger.info/kak-sdelat-soderzhanie-stati-na-sajte.html

 

А если мы добавим после хэш-тега мета тег keywords, что в переводе значат ключевые слова, то ЧПУ будет выглядеть так:

 

Как сделать оглавление к статье на сайте в html

Как сделать оглавление к статье на сайте в html


https://yablogger.info/kak-sdelat-soderzhanie-stati-na-sajte.html#kak-sozdat

 

Или например еще так:

 

https://yablogger.info/belye-tapochki.html#kupit


На мой взгляд — для поисковых роботов это намного привлекательнее и понятнее чем просто циферки в конце.

 

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

 

<a></a>

или так

<a></a>

 

Вот так легко делается краткое содержание публикации внутри статьи в html. Будут вопросы задавайте их в комментариях!

Читайте также:

Сайт и Яндекс Директ бесплатно при заказе 6 месяцев продвижения

Завтра

Наш менеджер знакомит Вас с этапами продвижения, задает вопросы о Вашем бизнесе. Техническая подготовка сайта к продвижению.

Через 2 рабочих дня

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

Через 5 рабочих дней

Напишем продающие тексты с использованием ключевых слов в определенной последовательности на продвигаемые страницы сайта.

Через 7 рабочих дней

  • — Регистрируем организацию в поисковых системах Яндекс и Google.
  • — Настраиваем регионы для продвижения (геопривязка).
  • — Склеиваем зеркала с www на без www.
  • — Ищем и устраняем дубли страниц.
  • — Прописывем все мета-теги на продвигаемые страницы сайта (title, description, keywords).
  • — Присваиваем к графическим файлам атрибуты alt для поиска по картинкам.
  • — Оптимизируем внутренний код сайта для оптимальной индексации поисковыми механизмами.

Через 9 рабочих дней

Редактируем на сайте информацию о продуктах и услугах – делаем структуру сайта четкой и понятной для поисковых систем и человека.

Через 12 рабочих дней

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

Через 15 рабочих дней

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

Через 20 рабочих дней

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

Краткое описание HTML

БАЗИСНЫЕ ЭЛЕМЕНТЫ

Тип документа <HTML></HTML> (начало и конец файла)
Имя документа <TITLE></TITLE> (должно быть в заголовке)
Заголовок <HEAD></HEAD> (описание документа, например его имя)
Тело <BODY></BODY> (содержимое страницы)

ОПРЕДЕЛЕНИЕ СТРУКТУРЫ

Заглавие <H?></H?> (стандарт определяет 6 уровней)
с выравниванием <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Секция <DIV></DIV>
с выравниванием <DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
Цитата <BLOCKQUOTE></BLOCKQUOTE> (обычно выделяется отступом)
Выделение <EM></EM> (обычно изображается курсивом)
Дополнительное выделение <STRONG></STRONG> (обычно изображается жирным шрифтом)
Отсылка, цитата <CITE></CITE> (обычно курсив)
Код <CODE></CODE> (для листингов кода)
Пример вывода <SAMP></SAMP>
Ввод с клавиатуры <KBD></KBD>
Переменная <VAR></VAR>
Определение <DFN></DFN> (часто не поддерживается)
Адрес автора <ADDRESS></ADDRESS>
Большой шрифт <BIG></BIG>
Маленький шрифт <SMALL></SMALL>

ВНЕШНИЙ ВИД

Жирный <B></B>
Курсив <I></I>
N3.0b Подчеркнутый <U></U> (часто не поддерживается)
Перечеркнутый <STRIKE></STRIKE> (часто не поддерживается)
N3.0b Перечеркнутый <S></S> (часто не поддерживается)
Верхний индекс <SUB></SUB>
Нижний индекс <SUP></SUP>
Печатная машинка <TT></TT> (изображается как шрифт фиксированой ширины)
Форматированый <PRE></PRE> (сохранить формат текста как есть)
Ширина <PRE WIDTH=?></PRE> (в символах)
Центрировать <CENTER></CENTER> (как текст, так и графика)
N1.0 Мигающий <BLINK></BLINK> (наиболее осмеянный элемент)
Размер шрифта <FONT SIZE=?></FONT> (от 1 до 7)
Изменить размер шрифта <FONT SIZE=»+|-?»></FONT>
N1.0 Базовый размер шрифта <BASEFONT SIZE=?> (от 1 до 7; по умолчанию 3)
Цвет шрифта <FONT COLOR=»#$$$$$$»></FONT>
N3.0b Выбор шрифта <FONT FACE=»***»></FONT>
N3.0b Многоколоночный текст <MULTICOL COLS=?></MULTICOL>
N3.0b Пробел между колонками <MULTICOL GUTTER=?></MULTICOL> (по умолчанию 10 точек)
N3.0b Ширина колонки <MULTICOL WIDTH=?></MULTICOL>
N3.0b Пустой блок <SPACER>
N3.0b Тип пустого блока <SPACER TYPE=horizontal| vertical|block>
N3.0b Величина пустого блока <SPACER SIZE=?>
N3.0b Размеры пустого блока <SPACER WIDTH=? HEIGHT=?>
N3.0b Выравнивание <SPACER ALIGN=left|right|center>

ССЫЛКИ И ГРАФИКА

Ссылка <A HREF=»URL»></A>
Ссылка на закладку <A HREF=»URL#***»></A> (в другом документе)
<A HREF=»#***»></A> (в том же документе)
N2.0 На другое окно <A HREF=»URL» TARGET=»***| |_blank|_self|_parent|_top»></A>
Определить закладку <A NAME=»***»></A>
Отношение <A REL=»***»></A> (часто не поддерживается)
Обратное отношение <A REV=»***»></A> (часто не поддерживается)
Графика <IMG SRC=»URL»>
Выравнивание <IMG SRC=»URL» ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
N1.0 Выравнивание <IMG SRC=»URL» ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>
Альтернатива <IMG SRC=»URL» ALT=»***»> (выводится если картинка не изображается)
Карта <IMG SRC=»URL» ISMAP> (нужна также программа)
Локальная карта <IMG SRC=»URL» USEMAP=»URL»>
Определение карты <MAP NAME=»***»></MAP>
Области карты <AREA SHAPE=»RECT» COORDS=»,,,» HREF=»URL»|NOHREF>
Размеры <IMG SRC=»URL» WIDTH=? HEIGHT=?> (в точках)
Окантовка <IMG SRC=»URL» BORDER=?> (в точках)
Отступ <IMG SRC=»URL» HSPACE=? VSPACE=?> (в точках)
N1.0 Заменитель в низком разрешении <IMG SRC=»URL» LOWSRC=»URL»>
N1.1 Обновить <META HTTP-EQUIV=»Refresh» CONTENT=»?; URL=URL»>
N2.0 Включить об’ект <EMBED SRC=»URL»> (вставить об’ект в страницу)
N2.0 Размер об’екта <EMBED SRC=»URL» WIDTH=? HEIGHT=?>

РАЗДЕЛИТЕЛИ

Параграф <P></P> (закрывать элемент часто не обязательно)
Выравнивание <P ALIGN=LEFT|CENTER|RIGHT></P>
Новая строка <BR> (одиночный перевод строки)
Убрать выравнивание <BR CLEAR=LEFT|RIGHT|ALL>
Горизонтальный разделитель <HR>
Выравнивание <HR ALIGN=LEFT|RIGHT|CENTER>
Толщина <HR SIZE=?> (в точках)
Ширина <HR WIDTH=?> (в точках)
N1.0 Ширина в процентах <HR> (в процентах от ширины страницы)
Сплошная линия <HR NOSHADE> (без трехмерных эффектов)
N1.0 Нет разбивки <NOBR></NOBR> (запрещает перевод строки)
N1.0 Перенос <WBR> (где разбивать строку для переноса при необходимости)

СПИСКИ

Неупорядоченный <UL><LI></UL> (<LI> перед каждым элементом)
Компактный <UL COMPACT></UL>
Тип метки <UL TYPE=DISC|CIRCLE|SQUARE> (для всего списка)
<LI TYPE=DISC|CIRCLE|SQUARE> (этот и последующие)
Нумерованый <OL><LI></OL> (<LI> перед каждым элементом)
Компактный <OL COMPACT></OL>
Тип нумерации <OL TYPE=A|a|I|i|1> (для всего списка)
<LI TYPE=A|a|I|i|1> (этот и следующие)
Первый номер <OL START=?> (для всего списка)
<LI VALUE=?> (этот и следующие)
Список определений <DL><DT><DD></DL> (<DT>=термин, <DD>=определение)
Компактный <DL COMPACT></DL>
Меню <MENU><LI></MENU> (<LI> перед каждым элементом)
Компактное <MENU COMPACT></MENU>
Каталог <DIR><LI></DIR> (<LI> перед каждым элементом)
Компактный <DIR COMPACT></DIR>

ФОН И ЦВЕТА

Фоновая картинка <BODY BACKGROUND=»URL»>
Цвет фона <BODY BGCOLOR=»#$$$$$$»> (порядок: красный/зеленый/синий)
Цвет текста <BODY TEXT=»#$$$$$$»>
Цвет ссылки <BODY LINK=»#$$$$$$»>
Пройденная ссылка <BODY VLINK=»#$$$$$$»>
Активная ссылка <BODY ALINK=»#$$$$$$»>

СПЕЦИАЛЬНЫЕ СИМВОЛЫ(обязаны быть в нижнем регистре)

Специальный символ &#?; (где ? это код ISO 8859-1)
< &lt;
> &gt;
& &amp;
» &quot;
Торговая марка ТМ &reg;
Copyright &copy;
Неразделяющий пробел &nbsp;

ФОРМЫ

Определить форму <FORM ACTION=»URL» METHOD=GET|POST></FORM>
N2.0 Посылка файла <FORM ENCTYPE=»multipart/form-data»></FORM>
Поле ввода <INPUT TYPE=»TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET»>
Имя поля <INPUT NAME=»***»>
Значение поля <INPUT VALUE=»***»>
Отмечен? <INPUT CHECKED> (checkboxes и radio boxes)
Размер поля <INPUT SIZE=?> (в символах)
Максимальная длина <INPUT MAXLENGTH=?> (в символах)
Список вариантов <SELECT></SELECT>
Имя списка <SELECT NAME=»***»></SELECT>
Число вариантов <SELECT SIZE=?></SELECT>
Маножественний выбор <SELECT MULTIPLE> (можно выбрать больше одного)
Опция <OPTION> (элемент который может быть выбран)
Опция по умолчанию <OPTION SELECTED>
Ввод текста, размер <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Имя текста <TEXTAREA NAME=»***»></TEXTAREA>
N2.0 Разбивка на строки <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

Таблицы

Определить таблицу <TABLE></TABLE>
Окантовка таблицы <table border=?></TABLE>
Расстояние между ячейками <TABLE CELLSPACING=?>
Дополнение ячеек <TABLE CELLPADDING=?>
Желаемая ширина <TABLE WIDTH=?> (в точках)
Ширина в процентах <TABLE> (проценты от ширины страницы)
Строка таблицы <TR></TR>
Выравнивание <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Ячейка таблицы <TD></TD> (должна быть внутри строки)
Выравнивание <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Без перевода строки <TD NOWRAP>
Растягивание по колонке <TD COLSPAN=?>
Растягивание по строке <TD ROWSPAN=?>
N1.1 Желаемая ширина <TD WIDTH=?> (в точках)
N1.1 Ширина в процентах <TD> (проценты от ширины страницы)
N3.0b Цвет ячейки <TD BGCOLOR=»#$$$$$$»>
Заголовок таблицы <TH></TH> (как данные, но жирный шрифт и центровка)
Выравнивание <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Без перевода строки <TH NOWRAP>
Растягивание по колонке <TH COLSPAN=?>
Растягивание по строке <TH ROWSPAN=?>
N1.1 Желаемая ширина <TH WIDTH=?> (в точках)
N1.1 Ширина в процентах <TH> (проценты ширины таблицы)
N3.0b Цвет ячейки <TH BGCOLOR=»#$$$$$$»>
Заглавие таблицы <CAPTION></CAPTION>
Выравнивание <CAPTION ALIGN=TOP|BOTTOM> (сверху/снизу таблицы)

ФРЕЙМЫ

N2.0 Документ с фреймами <FRAMESET></FRAMESET> (вместо <BODY>)
N2.0 Высота строк <FRAMESET ROWS=,,,></FRAMESET> (точки или %)
N2.0 Высота строк <FRAMESET ROWS=*></FRAMESET> (* = относительный размер)
N2.0 Ширина колонок <FRAMESET COLS=,,,></FRAMESET> (точки или %)
N2.0 Ширина колонок <FRAMESET COLS=*></FRAMESET> (* = относительный размер)
N3.0b Ширина окантовки <FRAMESET BORDER=?>
N3.0b Окантовка <FRAMESET FRAMEBORDER=»yes|no»>
N3.0b Цвет окантовки <FRAMESET BORDERCOLOR=»#$$$$$$»>
N2.0 Определить фрейм <FRAME> (содержание отдельного фрейма)
N2.0 Документ <FRAME SRC=»URL»>
N2.0 Имя фрейма <FRAME NAME=»***»|_blank|_self| _parent|_top>
N2.0 Ширина границы <FRAME MARGINWIDTH=?> (правая и левая границы)
N2.0 Высота границы <FRAME MARGINHEIGHT=?> (верхняя и нижняя границы)
N2.0 Скроллинг? <FRAME SCROLLING=»YES|NO|AUTO»>
N2.0 Постоянный размер <FRAME NORESIZE>
N3.0b Окантовка <FRAME FRAMEBORDER=»yes|no»>
N3.0b Цвет окантовки <FRAME BORDERCOLOR=»#$$$$$$»>
N2.0 Содержание без фреймов <NOFRAMES></NOFRAMES> (для просмотрщиков не поддерживающих фреймы)

ЯЗЫК JAVA

Applet <APPLET></APPLET>
Applet — имя файла <APPLET CODE=»***»>
Параметры <APPLET PARAM NAME=»***»>
Applet — адрес <APPLET CODEBASE=»URL»>
Applet — имя <APPLET NAME=»***»> (для ссылок из других частей страницы)
Альтернативный текст <APPLET ALT=»***»> (для программ не поддерживающих Java)
Выравнивание <APPLET ALIGN=»LEFT|RIGHT|CENTER»>
Размеры <APPLET WIDTH=? HEIGHT=?> (в точках)
Отступ <APPLET HSPACE=? VSPACE=?> (в точках)

РАЗНОЕ

Комментарий <!— *** —> (игнорируется просмотрщиком)
Пролог HTML 3.2 <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2//EN»>
Поиск <ISINDEX> (означает начальную точку поиска)
Приглашение <ISINDEX PROMPT=»***»> (текст приглашения для поля ввода)
Запустить поиск <A HREF=»URL?***»></a> (используйте действительно знак вопроса)
URL этого файла <BASE HREF=»URL»> (должно быть в заголовке)
N2.0 Имя базового окна <BASE TARGET=»***»> (должно быть в заголовке)
Отношение <LINK REV=»***» REL=»***» HREF=»URL»> (должно быть в заголовке)
Метаинформация <META> (должно быть в заголовке)
Стили <STYLE></STYLE> )
Программа <SCRIPT></SCRIPT>

Базовых тегов HTML — 10 лучших тегов

Здесь, в CodeBrainer, нас часто спрашивают, какие теги лучше всего знать, когда вы начинаете изучать HTML. Следовательно, это мой краткий список основных основных HTML-тегов , которые я часто использую. Кроме того, все теги имеют краткое описание и пример, так что вы можете сразу увидеть, что они делают. Смотрите также живой пример по ссылке под списком.

Какие HTML-теги используются чаще всего?

Мы проанализировали самые популярные веб-сайты в Интернете, чтобы выяснить, какие теги используются чаще всего. Неудивительно, что тег ссылки является наиболее часто используемым тегом . Фактически, это почти 25% всех тегов в сети.

Это наш список основных HTML-тегов: