HTML Цвета

Таблица HTML цветов

HTML Имя Цвета HEX RGB
Красные тона:
IndianRed #CD5C5C 205, 92, 92
LightCoral #F08080 240, 128, 128
Salmon #FA8072 250, 128, 114
DarkSalmon #E9967A 233, 150, 122
LightSalmon #FFA07A 255, 160, 122
Crimson #DC143C 220, 20, 60
Red #FF0000 255, 0, 0
FireBrick #B22222 178, 34, 34
DarkRed #8B0000 139, 0, 0
Розовые тона:
Pink #FFC0CB 255, 192, 203
LightPink #FFB6C1 255, 182, 193
HotPink #FF69B4 255, 105, 180
DeepPink #FF1493 255, 20, 147
MediumVioletRed #C71585 199, 21, 133
PaleVioletRed #DB7093 219, 112, 147
Оранжевые тона:
LightSalmon #FFA07A 255, 160, 122
Coral #FF7F50 255, 127, 80
Tomato #FF6347 255, 99, 71
OrangeRed #FF4500 255, 69, 0
DarkOrange #FF8C00 255, 140, 0
Orange #FFA500 255, 165, 0
Жёлтые тона:
Gold #FFD700 255, 215, 0
Yellow #FFFF00 255, 255, 0
LightYellow #FFFFE0 255, 255, 224
LemonChiffon #FFFACD 255, 250, 205
LightGoldenrodYellow #FAFAD2 250, 250, 210
PapayaWhip #FFEFD5 255, 239, 213
Moccasin #FFE4B5 255, 228, 181
PeachPuff #FFDAB9 255, 218, 185
PaleGoldenrod #EEE8AA 238, 232, 170
Khaki #F0E68C 240, 230, 140
DarkKhaki #BDB76B 189, 183, 107
Фиолетовые тона:
Lavender #E6E6FA 230, 230, 250
Thistle #D8BFD8 216, 191, 216
Plum #DDA0DD 221, 160, 221
Violet #EE82EE 238, 130, 238
Orchid #DA70D6 218, 112, 214
Fuchsia #FF00FF 255, 0, 255
Magenta #FF00FF 255, 0, 255
MediumOrchid #BA55D3 186, 85, 211
MediumPurple #9370DB 147, 112, 219
BlueViolet #8A2BE2 138, 43, 226
DarkViolet #9400D3 148, 0, 211
DarkOrchid #9932CC 153, 50, 204
DarkMagenta #8B008B 139, 0, 139
Purple #800080 128, 0, 128
Indigo #4B0082 75, 0, 130
SlateBlue #6A5ACD 106, 90, 205
DarkSlateBlue #483D8B 72, 61, 139
Коричневые тона:
Cornsilk #FFF8DC 255, 248, 220
BlanchedAlmond #FFEBCD 255, 235, 205
Bisque #FFE4C4 255, 228, 196
NavajoWhite #FFDEAD 255, 222, 173
Wheat #F5DEB3 245, 222, 179
BurlyWood #DEB887 222, 184, 135
Tan #D2B48C 210, 180, 140
RosyBrown #BC8F8F 188, 143, 143
SandyBrown #F4A460 244, 164, 96
Goldenrod #DAA520 218, 165, 32
DarkGoldenRod #B8860B 184, 134, 11
Peru #CD853F 205, 133, 63
Chocolate #D2691E 210, 105, 30
SaddleBrown #8B4513 139, 69, 19
Sienna #A0522D 160, 82, 45
Brown #A52A2A 165, 42, 42
Maroon #800000 128, 0, 0
Основные цвета:
Black #000000 0, 0, 0
Gray #808080 128, 128, 128
Silver #C0C0C0 192, 192, 192
White #FFFFFF 255, 255, 255
Fuchsia #FF00FF 255, 0, 255
Purple #800080 128, 0, 128
Red #FF0000 255, 0, 0
Maroon #800000 128, 0, 0
Yellow #FFFF00 255, 255, 0
Olive #808000 128, 128, 0
Lime #00FF00 0, 255, 0
Green #008000 0, 128, 0
Aqua #00FFFF 0, 255, 255
Teal #008080 0, 128, 128
Blue #0000FF 0, 0, 255
Navy #000080 0, 0, 128
Зелёные тона:
GreenYellow #ADFF2F 173, 255, 47
Chartreuse #7FFF00 127, 255, 0
LawnGreen #7CFC00 124, 252, 0
Lime #00FF00 0, 255, 0
LimeGreen #32CD32 50, 205, 50
PaleGreen #98FB98 152, 251, 152
LightGreen #90EE90 144, 238, 144
MediumSpringGreen #00FA9A 0, 250, 154
SpringGreen #00FF7F 0, 255, 127
MediumSeaGreen #3CB371 60, 179, 113
SeaGreen #2E8B57 46, 139, 87
ForestGreen #228B22 34, 139, 34
Green #008000 0, 128, 0
DarkGreen #006400 0, 100, 0
YellowGreen #9ACD32 154, 205, 50
OliveDrab #6B8E23 107, 142, 35
Olive #808000 128, 128, 0
DarkOliveGreen #556B2F 85, 107, 47
MediumAquamarine #66CDAA 102, 205, 170
DarkSeaGreen #8FBC8F 143, 188, 143
LightSeaGreen #20B2AA 32, 178, 170
DarkCyan #008B8B 0, 139, 139
Teal #008080 0, 128, 128
Синие тона:
Aqua #00FFFF 0, 255, 255
Cyan #00FFFF 0, 255, 255
LightCyan #E0FFFF 224, 255, 255
PaleTurquoise #AFEEEE 175, 238, 238
Aquamarine #7FFFD4 127, 255, 212
Turquoise #40E0D0 64, 224, 208
MediumTurquoise #48D1CC 72, 209, 204
DarkTurquoise #00CED1 0, 206, 209
CadetBlue #5F9EA0 95, 158, 160
SteelBlue #4682B4 70, 130, 180
LightSteelBlue #B0C4DE 176, 196, 222
PowderBlue #B0E0E6 176, 224, 230
LightBlue #ADD8E6 173, 216, 230
SkyBlue #87CEEB 135, 206, 235
LightSkyBlue #87CEFA 135, 206, 250
DeepSkyBlue #00BFFF 0, 191, 255
DodgerBlue #1E90FF 30, 144, 255
CornflowerBlue #6495ED 100, 149, 237
MediumSlateBlue #7B68EE 123, 104, 238
RoyalBlue #4169E1 65, 105, 225
Blue #0000FF 0, 0, 255
MediumBlue #0000CD 0, 0, 205
DarkBlue #00008B 0, 0, 139
Navy #000080 0, 0, 128
MidnightBlue #191970 25, 25, 112
Белые тона:
White #FFFFFF 255, 255, 255
Snow #FFFAFA 255, 250, 250
Honeydew #F0FFF0 240, 255, 240
MintCream #F5FFFA 245, 255, 250
Azure #F0FFFF 240, 255, 255
AliceBlue #F0F8FF 240, 248, 255
GhostWhite #F8F8FF 248, 248, 255
WhiteSmoke #F5F5F5 245, 245, 245
Seashell #FFF5EE 255, 245, 238
Beige #F5F5DC 245, 245, 220
OldLace #FDF5E6 253, 245, 230
FloralWhite #FFFAF0 255, 250, 240
Ivory #FFFFF0 255, 255, 240
AntiqueWhite #FAEBD7 250, 235, 215
Linen #FAF0E6 250, 240, 230
LavenderBlush #FFF0F5 255, 240, 245
MistyRose #FFE4E1 255, 228, 225
Серые тона:
Gainsboro #DCDCDC 220, 220, 220
LightGrey #D3D3D3 211, 211, 211
LightGray #D3D3D3 211, 211, 211
Silver #C0C0C0 192, 192, 192
DarkGray #A9A9A9 169, 169, 169
DarkGrey #A9A9A9 169, 169, 169
Gray #808080 128, 128, 128
Grey #808080 128, 128, 128
DimGray #696969 105, 105, 105
DimGrey #696969 105, 105, 105
LightSlateGray #778899 119, 136, 153
LightSlateGrey #778899 119, 136, 153
SlateGray #708090 112, 128, 144
SlateGrey #708090 112, 128, 144
DarkSlateGray #2F4F4F 47, 79, 79
DarkSlateGrey #2F4F4F 47, 79, 79
Black #000000 0, 0, 0

Как создать и правильно настроить Robots.txt

Файл Robots.txt– это обычный текстовый файл в формате .txt, содержащий инструкции и директивы для поисковых роботов, запрещающие индексировать определенные файлы сайта, его документы и папки. То есть, данный файл ограничивает ботам поисковых систем доступ к содержимому сайта.
Robots.txt является стандартом исключений для роботов, принятым консорциумом W3C 30 января 1994 года. Его использует большая часть современных поисковиков, как рекомендацию к индексированию проекта.

Зачем Robots.txt нужен для SEO?

Robots играет одну из важнейших ролей для поисковой оптимизации.


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


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


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


Где находится и как создать?

Файл robots.txt располагается в корневой директории сайта. К примеру, на сайте https://webmasterie.ruпуть к файлу robots будет таким: https://webmasterie.ru/robots.txt.


Ручное создание robots.txt

Для самостоятельного создания файла достаточно воспользоваться любым текстовым редактором:

  • Блокнот;
  • Microsoft Word;
  • NotePad++;
  • SublimeText и т.д.


В документе прописываете инструкции в зависимости от ваших целей и сохраняете файл в формате .txt, назвав его “robots”.


Затем загружаете файл в корневой каталог сайта – папку с названием вашего ресурса, где также располагаются индексный файл index.html и файлы движка, на базе которого сделан сайт. Для загрузки robots.txt на сервер используют:

  • панель управления сервером, к примеру, Cpanel или ISPmanager;
  • консоль, админку в CMS;
  • FTP-клиент, например, TotalCommander или FileZilla.


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


Вообще нет разницы, каким из вышеперечисленных методов создавать данный текстовый файл.


Онлайн генераторы

Вариант для ленивых – онлайн сервисы, генерирующие роботс автоматически. В интернете можно найти множество подобных инструментов, к примеру, на сайте CY-PR.


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


Автоматически сгенерированные файлы robots.txt могут потребовать самостоятельной корректировки, поэтому иметь базовые знания синтаксиса и правил написания файла все равно нужно.


Готовые шаблоны

В Сети нет проблем отыскать шаблоны готового robots.txt для популярных движков по типу WordPress, Joomla, Drupal и так далее. В шаблон лишь избавляет от многократного написания стандартных директив и учитывает нюансы определенного движка сайта. Но и тут нужны знания, потому что сам по себе шаблон не предоставит корректно настроенный файл и каждый проект может быть индивидуален.


Как редактировать?

После создания файла Robots вы можете его редактировать в ходе оптимизации ресурса. Делается это непосредственно в текстовом файле robots.txt с соблюдением правил и синтаксиса файла. После редактирования robots.txt выгружайте на сайт обновленную версию файла. Так же для определенных CMS существуют плагины и дополнения, которые позволяют редактировать данный файл прям в админ панели.


Директивы Robots.txt

В Robots.txt прописываются директивы для роботов поисковых систем, тем самым помогая им понять, какие страницы/разделы индексировать, а какие – нет. Рассмотрим, какие директивы что означают:


User-Agent. Это обязательная директива, определяющая, к какому роботу будут применяться прописанные ниже правила. По сути, это обращение к конкретному роботу или всем поисковым ботам. Все файлы начинаются именно с этой строчки.


Disallow. Самая распространенная директива, запрещающая индексировать отдельные страницы или целые разделы веб-сайта. Здесь зачастую указывают:

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


В ней можно применять специальные символы * и $.


Allow. Противоположная Disallow директива, разрешающая поисковому роботу обход конкретных страниц или разделов сайта. Здесь, как и в Disallow, допускается применение спецсимволов.


Sitemap. Данная директива сообщает ботам расположение XML карты сайта. Нужно указывать полный URL. Она важна для поисковых машин Google и Яндекс, так как при обходе сайта в первую очередь они обращаются именно к Sitemap, где показана структура ресурса со внутренними ссылками, приоритетами индексации страниц и датами их создания или изменения.


Clean-param. Запрещает ботам обходить страницы с динамическими параметрами, которые полностью дублируют контент основных страниц. В основном проблема динамических параметров встречается на сайтах интернет-магазинов, а именно в URL-адресах для передачи данных по источникам сессий, персональных идентификаторов посетителей.


Crawl-delay (уже не поддерживается Яндекс и Google). Инструкция ограничивает частоту посещений одного бота в интервал времени. То есть, он задает в секундах минимальный промежуток времени между окончанием загрузки одного документа и началом загрузки следующего. Благодаря данной директиве снижается нагрузка на сервер, чтобы роботы не посещали сайт слишком часто. Проблема актуальна на крупных сайтах с большим количеством страниц.


Важно! Яндекс отказался от Crawl-delay:

Host (уже не поддерживается Яндекс). Раньше это была межсекционная инструкция чисто для Яндекса, никакие другие поисковики ее не понимали. Она служила для указания главному роботу Яндекса главного зеркала сайта, если есть доступ к сайту по нескольким доменам. Но с марта месяца 2018 года Яндекс больше не использует директиву Host. Ее функции взял на себя раздел “Переезд сайта в Вебмастере” и 301 редирект.


Что нужно исключать из индекса

1.В первую очередь роботам следует запретить включать в индекс любые дубли страниц.Доступ к странице должен осуществляться только по одному URL. Обращаясь к сайту, поисковый бот по каждому УРЛу должен получать в ответ страницу с уникальным содержанием. Дубли часто появляются у CMS в процессе создания страниц. Так, один и тот же документ можно найти по техническому УРЛ http://site.ru/?p=391&preview=true и ЧПУ http://site.ru/chto-takoe-seo. Нередко дубли появляются и из-за динамических ссылок. Нужно их всех скрывать от индекса с помощью масок:

Disallow: /?
Disallow: /*%
Disallow: /index.php
Disallow: /*?page=
Disallow: /*&page=


2. Все страницы с неуникальным контентом.Такие документы рекомендуется скрыть от поисковых машин до того, как они попадут в индекс.


3. Все страницы, применяемые при работе сценариев.К таким страницам относят такие, где есть подобные сообщения: “Спасибо за ваш отзыв!”.


4. Страницы, включающие индикаторы сессий.Для подобных страниц тоже рекомендуется использовать директиву Disallow:

Disallow: *PHPSESSID=
Disallow: *session_id=


5. Все файлы движка управления сайтом.К ним относятся файлы шаблонов, администраторской панели, тем, баз и прочие:

Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /trackback


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

Держите файл robots.txt в чистоте, и тогда ваш сайт будет индексироваться быстрее и лучше, а ранжироваться выше.


Структура Robots.txt

Так выглядит стандартный шаблон структуры файла robots обычного веб-сайта:

User-agent: Yandex
Disallow: /admin
Disallow: *?s=
Disallow: *?p=
User-agent: Googlebot
Disallow: /admin
Disallow: *?s=
Disallow: *?p=
User-agent: *
Disallow: /admin
Disallow: *?s=
Disallow: *?p=
Sitemap: https://site.ru/sitemap.xml

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


Вот несколько примеров директив User-agent для роботов разных поисковиков:

# Для всех поисковых ботов
User-agent: *

# Для всех роботов Яндекса
User-agent: Yandex

# Для основного индексирующего робота Google
User-agent: Googlebot

Оптимизаторы в robots.txt эти три директивы используют чаще всего. Это общие роботы поисковиков, но есть также и инструкции, описываемые для ботов, индексирующих, например, только новостные разделы:

YandexNews;
Googlebot-News.

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

Таким образом мы разрешаем обходить сайт только роботам Яндекса и Google:

#Разрешаем роботу Яндекса индексацию всего сайта
User-agent: Yandex
Allow: /

#Разрешаем роботу Google индексацию всего сайта
User-agent: Googlebot
Allow: /

#Запрещаем индексацию сайта всем остальным роботам
User-agent: *
Disallow: /

После каждого правила User-agent следуют инструкции для робота, указанного в данной строке. Чаще всего применяются команды Disallow. Allow прописываются редко, так как отсутствие противоположной директории равносильно разрешению на индексацию.


Кириллица в файле Robots

Писать кириллические символы в директориях robots.txt, а также HTTP-заголовках сервера запрещено.

Чтобы указывать названия кириллических доменов, воспользуйтесь Punycode. URL-адреса указывайте в кодировке, которая соответствует структуре ресурса.


Пример:

#Неправильно:

User-agent: Yandex
Disallow: /корзина
Sitemap: сайт.рф/sitemap.xml

# Правильно:

User-agent: Yandex
Disallow: /%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D0%B0
Sitemap: http://xn--80aswg.xn--p1ai/sitemap.xml

Основные правила, характеристики файла и синтаксис

При создании файла robots.txt необходимо соблюдать синтаксические правила и следовать характеристикам файла, от которых зависит корректность его работы. Рассмотрим их подробнее:
Файл должен называться “robots.txt”.Никаких заглавных букв или кириллицы.
Для одного сайта должен быть создан только один файл.Не допускается использование более одного файла robots для веб-ресурса.
Robots.txt необходимо разместить в корневой папке ресурса.Для контроля сканирования всех страниц веб-сайта http://site.ru/, разместите файл по адресу http://site.ru/robots.txt. Ни в коем случае не размещайте его в подкаталоге, например, по адресу типа http://site.ru/pages/robots.txt. Если вы не можете получить доступ к корневой папке, свяжитесь с хостинг-провайдером. Если доступ к корневому каталогу отсутствует, воспользуйтесь альтернативным способом – мета-тегами.Robots.txt допускается размещать по УРЛам с субдоменами или нестандартными портами.Например, http://website.site.ru/robots.txt либо http://site.ru:8181/robots.txt соответственно.Любой текст, идущий после символа #, трактуется как комментарий.Инструкции можно комментировать, чтобы оптимизаторы могли оставлять заметки, напоминающие им, зачем они закрыли от индексации либо открыли доступ к конкретным страницам/разделам.
Файл robots нужно создавать в формате текстового документа в кодировке UTF-8, включающей коды символов ASCII.Иные символы применять запрещено.
Robots содержит группы.В любой группе допускается написание нескольких директив. Каждая директива пишется в отдельной строке.
В группе содержится информация:для какого User-agent прописываются директивы группы; к каким файлам или каталогам у агента есть доступ, а к каким – нет.
Инструкции в группах считываются сверху вниз.Поисковый бот будет следовать директивам лишь одной группы, агент пользователя которой соответствует ему больше остальных.
По умолчанию robots разрешает индексировать все страницы либо каталоги:если они не запрещены директивой Disallow; если директива пустая; размер файла превышает 32 КБ; файл недоступен – выдает 404 ошибку или любой другой ответ на запрос робота, отличающийся от HTTP-кода со статусом 200 OK (проверить ответ сервера можно здесь); robots.txt отсутствует.
Инструкции сильно зависят от регистра.Например, директива Disallow: /file.asp влияет на URL-адрес http://www.site.ru/file.asp, но не применима к http://www.site.ru/File.asp.
Пробел никак не влияет на инструкции в файле.Нет разницы, сколько пробелов вы проставите в robots.txt, но лучше, чтобы они использовались только в соответствующих местах, облегчая читабельность и ориентирование в файле.
В директивах нет закрывающих символов.В конце каждого правила нет необходимости проставлять точку и прочие закрывающие символы.
Названия правил указываются с заглавной буквы на латинице.Корректное написание – “Allow”, а не “ALLOW”.
Пустой перенос строки применяется только для User-Agent.В конце данной директивы пустой перенос строки считается окончанием инструкций по определенному User-Agent. Написание нового User-agent без переноса строки может не учитываться.
Символ «/» применяется для статических страниц.К примеру, Disallow: /wp-includes запрещает индексировать одну из папок ядра WordPress.
Порядок следования директив.Роботам поисковых систем не важна последовательность директив. Если директивы Allow и Disallow конфликтуют и противоречат друг другу, приоритетной будет Allow.
Не нужно прописывать в robots инструкции для каждой отдельной страницы.Так делать можно, но в исключительных случаях. В целом же старайтесь указывать общие директивы, применимые для всех типовых URL-адресов вашего веб-ресурса. Эффективный robots.txt – это краткий в объеме и одновременно обширный по смыслу файл.


Как проверить Robots.txt?

После загрузки файла на сервер нужно обязательно проверить, доступен ли он, корректно ли написан и нет ли ошибок.


Проверка на сайте

Сделав все верно и загрузив файл в корневой каталог сайта, он станет доступным по ссылке типа site.ru/robots.txt (вместо site.ru указывается URL вашего ресурса).


Это общедоступный файл и его можно посмотреть и изучить у любого сайта.


Проверка на ошибки

Сделать это можно двумя способами:

  • Панель вебмастера Google Search Console.
  • Вебмастерская панель Яндекса.


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


Robots.txt в Яндекс и Google

Многие оптимизаторы, делая первые шаги в работе с robots.txt, задаются логичным вопросом о том, почему нельзя указать общий User-agent: * и не указывать для робота каждой поисковой системы одни и те же инструкции. Дело в том, что поисковик Google более позитивно воспринимает директиву User-agent: Googlebot в файле robots, как и Яндекс отдельную директиву User-agent: Yandex.


Прописывая правила отдельно для Google и Яндекс, вы сможете управлять индексацией страниц и разделов веб-ресурса посредством Robots. Более того, применяя персональные User-agent можно запретить индексацию некоторых файлов Google, при этом оставить их доступными для роботов Яндекса, и наоборот.


Максимально допустимый размер текстового документа robots в 32 КБ предоставляет возможность почти любому сайту указать все важнейшие для индексирования инструкции в отдельных юзер-агентах для разных поисковиков. Поэтому не вижу смысла проводить рискованные эксперименты.


Заключение

Файл Robots – это один из ключевых инструментов для успешного SEO-продвижения сайта. С его помощью вы можете непосредственно влиять на включение в индекс различных страниц и разделов веб-ресурса.


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

Способы встраивания PDF-документов на сайт: обзор методов

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

Зачем это нужно? Встроенный документ воспринимается как часть контента страницы. Это улучшает пользовательский опыт и повышает вовлеченность аудитории, так как позволяет просматривать, печатать и сохранять файлы без лишних кликов. Однако стоит учитывать главный минус — отсутствие универсальной кроссбраузерной поддержки: одни методы требуют установки плагинов (например, Adobe Reader), а другие могут не работать вовсе.

1. Тег <embed>

Самый простой способ вставить медиаконтент с помощью одного HTML-тега.

  • Код: <embed src="example.pdf" type="application/pdf" width="600" height="800">
  • Особенности: Атрибут type со значением "application/pdf" указывает браузеру тип содержимого. Внешний вид настраивается через стандартные атрибуты (style, class, id).
  • Минусы: Устаревающий метод. Не поддерживается всеми современными браузерами одинаково, может требовать внешних плагинов для отображения.

2. Тег <object> (рекомендуемый стандартный подход)

Более гибкий аналог тега <embed>. Он лучше распознается большинством браузеров и считается более семантически верным стандартом.

Код:

<object data="/pdf/example.pdf" type="application/pdf" width="600" height="800">
    <p>Ваш браузер не поддерживает просмотр PDF. Вы можете <a href="example.pdf">скачать</a> файл.</p>
</object>

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

3. Тег <iframe>

Позволяет встроить другую веб-страницу (в данном случае — сам PDF-файл) в виде фрейма.

Код: <iframe src="https://example.com/document.pdf" width="600" height="800"></iframe>

Недостатки:

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

4. Google Docs Viewer (через iframe)

Бесплатный сервис от Google, который рендерит PDF внутри своего интерфейса. Отлично подходит для обеспечения единообразного вида документа во всех браузерах.

Код: <iframe src="https://docs.google.com/viewer?url=ЗАКОДИРОВАННАЯ_ССЫЛКА_НА_PDF&embedded=true" width="700" height="500" style="border: none;"></iframe>

Как работает: Ссылка на ваш PDF должна быть предварительно закодирована в ASCII (URL Encoding). Например, адрес https://web-revenue.ru/wp-content/uploads/2023/11/advantages.pdf превращается в https%3A%2F%2Fweb-revenue.ru%2F....

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

Минусы: Добавляет лишний сетевой запрос к серверам Google, что может незначительно увеличить время загрузки.

5. Сторонние сервисы публикации (Issuu, Scribd, Calameo)

Специализированные платформы для хостинга документов. Они преобразуют PDF в интерактивную флеш- или html-версию с эффектом перелистывания страниц.

Процесс: Загрузка файла на платформу → получение готового кода для вставки (обычно <iframe>).

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

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

6. JavaScript-библиотека PDFObject

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

Принцип работы: В разметке создается пустой контейнер (например, <div id="my-pdf"></div>). После подключения библиотеки JS-код находит этот блок и вставляет туда PDF, автоматически выбирая лучший доступный тег (<embed>, <object> или <iframe>).

Пример:

<div id="my-pdf"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.12/pdfobject.min.js"></script>
<script>PDFObject.embed("ссылка-на-файл.pdf", "#my-pdf");</script>

Преимущества: Максимальная гибкость, резервирование (fallback) и динамическое управление документом через скрипты. Для быстрой настройки доступен официальный генератор кода на сайте pdfobject.com.

Заключение

Выбор метода зависит от ваших целей. Для быстрого решения подойдет <object> или Google Docs Viewer. Если важен брендированный интерактивный журнал — используйте Issuu или Scribd. Для технически сложных проектов с необходимостью программного контроля лучшим выбором станет библиотека PDFObject.

PDF

Термины и понятия

ПАТЕРН

Шаблон проектирования или паттерн (англ. design pattern) в разработке программного обеспечения — повторимая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста.
Обычно шаблон не является законченным образцом, который может быть прямо преобразован в код; это лишь пример решения задачи, который можно использовать в различных ситуациях. Объектно-ориентированные шаблоны показывают отношения и взаимодействия между классами или объектами, без определения того, какие конечные классы или объекты приложения будут использоваться.

Что такое mod_rewrite?

mod_rewrite - это модуль сервера Apache для манипуляции (изменения) URL. Часто это означает получение запроса URL от посетителя и посылка ему содержания с другого URL. Например, посетитель вводит следующий URL в адресной строке браузера:
 http://www.example.com/page.html
Обычно Apache отправляет обратно пользователю содержание файла page.html. Однако с помощью mod_rewrite можно отправить содержание с другого URL, например такого:
http://www.example.com/another_page.html
Важно понимать, что изменение адреса происходит внутри сервера Apache. Адресная строка браузера по прежнему будет показывать http://www.example.com/page.html, но сервер Apache отправит содержание страницы http://www.example.com/another_page.html. В этом заключается отличие от перенаправления HTTP, которое указывает браузеру посетить другой URL.
Хотя с помощью модуля mod_rewrite можно выполнять и перенаправление HTTP и еще много других функций, таких как возвращение кодов  ошибки HTTP.
Что можно делать с помощью mod_rewrite.
Модуль mod_rewrite позволяет создавать правила манипулирования адресами URL. Например, вы можете вставить значение полученное из запрашиваемого URL в новый URL, организуя динамическое перенаправление URL. Или можно проверить переменные сервера, например, HTTP_USER_AGENT (тип браузера), и изменять URL только если используется браузер, например, Safari, запущенный на iPhone.
Вот несколько обычных функций, которые выполняет mod_rewrite:
  1. Создание "дружественных" адресов URL, которые маскируют "корявые" адреса URL. Например, вы можете маскировать с помощью отлично выглядящего адреса URL www.example.com/articles/my-article/ реальный адрес URL www.example.com/display_article.php?articleId=my-article. И каждый сможет использовать "дружественный" адрес URL вместо реального.
  2. Блокировать использование ссылок на изображения на вашем сайте. Чтобы остановить использование другими ресурсами изображений, размещенных на вашем сайте, можно использовать mod_rewrite для отправки ошибки "Forbidden", если ссылающийся URL не принадлежит вашему сайту.
  3. Перенаправление канонических адресов URL. Многие страницы доступны через несколько адресов URL — например, www.example.com/mypage.html и example.com/mypage.html. Вы можете использовать mod_rewrite постоянного перенаправления браузера  на "правильный" URL, например www.example.com/mypage.html. Помимо прочего такое использование mod_rewrite гарантирует отображение правильного URL в результатат поиска.
  4. Исключение ошибки 404 в момент реорганизации вашего сайта. Например, вы переделываете сайт и переместили страницу www.example.com/myarticle.html по новому адресу www.example.com/articles/myarticle.html. С помощью mod_rewrite вы можете перенаправить www.example.com/myarticle.html на www.example.com/articles/myarticle.html , так что  посетитель не получит ошибку 404 "не найдена" при посещении старого адреса URL. Благодаря гибкости mod_rewrite, можно легко создать правило, которое будет перенаправлять запросы на старые адреса URL на новые адреса.

Как использовать mod_rewrite

Для использования mod_rewrite, нужно создать директивы Apache для указания модулю, что нужно делать. Директивы - это простые конфигурационные установки. Часто директивы размещаются в файле .htaccess в корневой папке вашего веб сайта. Директивы применяются для всего сайта.
Две самых важных директивы mod_rewrite:
RewriteEngine: Включает/выключает механизм mod_rewrite для текущего запроса.
RewriteRule: Описывает правило изменения адреса URL.
Вот простой пример. Создайте файл .htaccess со следующим содержанием и разместите его на вашем сайте:
    RewriteEngine on
    RewriteRule ^dummy\.html$ http://www.google.com/ [R=301]
В данном файле задаются следующие установки:
RewriteEngine on - включаем механизм mod_rewrite
RewriteRule ^dummy\.html$ http://www.google.com/ [R=301] - перенаправялем запросы к странице dummy.html на сайт Google, используя перенаправление 301.
Если теперь открыть веб-браузер и посетить страницу dummy.html на вашем сайте (например, введя в адресной строке http://www.example.com/dummy.html), то , если все было сделано без ошибок, произойдет перенаправление на сайт http:// www.google.com.
Если вы получаете ошибку 404, то вероятно на вашем хостинге  не используется mod_rewrite. В данном случае надо обратиться к администратору хостинга.

Как работает RewriteRule

Вы можете использовать директиву RewriteRule для создания правил перенаправления. Обобщенный синтаксис директивы имеет вид:
RewriteRule Pattern Substitution [Optional Flags]
Pattern - регулярное выражение шаблона. Если URL соответствует шаблону, то правило выполняется. Иначе правило пропускается.
Substitution - новый URL, который будет использоваться вместо соответствующего шаблону адреса.
[Optional Flags] - один или несколько флагов, которые определяют поведение правила.
Вы можете добавить в файл .htaccess столько правил RewriteRule, сколько нужно. Модуль mod_rewrite проходит все правила каждый раз при запросе, обрабатывая соответствующие адресу URL.
Если правило изменяет запрашиваемый URL на новый адрес, то новый URL используется дальше при проходе по файлу .htaccess, и может соответствовать другому правилу RewriteRule, размещающемуся далее в файле. (Если нужно изменить такое поведение, то надо использовать флаг L ("последнее правило").)
Несколько примеров использования mod_rewrite
Самый простой способ объяснить mod_rewrite - показать его использование при решении практических задач.

Пример 1: исключение ошибки 404

Иногда происходит изменение URL страницы на вашем сайте. Такое может произойти в момент реорганизации содержания. Если поисковый механизм или другие сайты ссылаются на старый адрес URL, то пользователь получит ошибку "404 Not Found", когда он попробует воспользоваться ссылкой.
Для решения данной проблемы вы можете использовать модуль mod_rewrite для перенаправления 301. Таким образом заголовок HTTP отсылается любому браузеру, запросившему старый адрес URL, сообщая ему о том, что страница перемещена по новому адресу. Также поисковые механизмы информируются о том, что надо обновить индексы с новым адресом URL.
Следующий файл .htaccess перенаправит запросы на новый адрес URL:
RewriteEngine on
RewriteRule ^my-old-url\.html$ /my-new-url.html [R=301,L]
Правило RewriteRule работает так:
^my-old-url\.html$ - регулярное выражение, которому соответствует адрес URL для изменения. Шаблон означает: "соответствует началу адреса URL (^), за которым следует текст 'my-old-url.html', за которым следует символ окончания URL  ($)." В регулярном выражении символ точки (.) означает соответствие любому символу, поэтому нужно использовать обратный слэш, чтобы указать, что нам нужна именно точка (\.).
/my-new-url.html - вторая часть правила RewriteRule, которая описывает  на что нужно менять. В данном случае это просто /my-new-url.html.
[R=301,L] - третья часть правила, которая содержит один или несколько флагов, помещенных в квадратные скобки. Флаги позволяют добавлять определенные опции или действия к правилу. В данном примере используется 2 флага: R=301 означает "использовать перенаправление 301 на новый адрес URL"; а L означает "последнее правило", или другими словами "остановить процесс обработки URL, если он соответствует правилу ".

Пример 2: создание дружественных адресов URL

Допустим, вы  написали PHP скрипт display_article.php для вывода статей на вашем сайте. Вы можете ссылаться на статью с помощью следующего адреса URL:
http://www.example.com/display_article.php?articleId=my-article
Данный адрес выглядит уродливо и запрос внутри него (?articleId=my-article) может смущать некоторые поисковые механизмы. Гораздо лучше использовать адрес  URL  такого вида:
http://www.example.com/articles/my-article/
Вы можете задействовать mod_rewrite для преобразования ссылок первого формата во второй, что даст возможность использовать дружественные ссылки на страницах сайта, а обращение будет выполняться к реальным адресам, не видимым никому. Для этого файл .htaccess, расположенный в корневой директории вашего сайта, должен содержать следующие строки:
RewriteEngine on
RewriteRule ^articles/([^/]+)/?$ display_article.php?articleId=$1 [L]

Описание правила RewriteRule:

^articles/([^/]+)/?$ - регулярное выражение, соответствующее любому URL в формате articles/(article ID)/. Оно гласит:"соответствует началу URL (^) , за которым следует текст articles/, за которым следует один или более символов, не являющиеся слэшем ([^/]+), за которыми может следовать слэш (/?), за которым следует символ окончания URL ($)". Обратите внимание на круглые скобки вокруг части шаблона [^/]+. Таким образом текст, соответствующей данной части, например, "my-article", сохраняется для дальнейшего использования.
display_article.php?articleId=$1 - данная часть правила указывает серверу Apache использовать скрипт display_article.php , которому передается текст, соответствующий подшаблону [^/]+ из регулярного выражения первой части (например, "my-article"), в качестве параметра articleId. $1 называется обратной связью и хранит текст соответствующий подшаблону. Если регулярное выражение содержит еще один подшаблон в круглых скобках, то соответствующий ему текст будет храниться в переменной $2, и так далее.
[L] - как и в предыдущем примере мы используем флаг для остановки дальнейшей обработки URL, чтобы не произошло изменение адреса другими правилами RewriteRule.
Выше приведенное правило RewriteRule берет запрашиваемый URL в формате http://www.example.com/articles/my-article/ и преобразует его в URL вида  http://www.example.com/display_article.php?articleId=my-article.

Пример 3: предотвращаем использование ссылок на изображения на вашем сайте

Еще одной типовой задачей, которую решает использование модуля mod_rewrite, является предотвращение использования  ссылок на изображения на вашем сайте другими веб проектами. Допустим, на вашем сайте есть страница  http://www.example.com/mypage.html, которая содержит следующий тег img:
<img src="myphoto.jpg" alt="Моя фотография" />
Другой сайт может ссылаться на своих страницах прямо на вашу фотографию следующим образом:
<img src="http://www.example.com/myphoto.jpg" alt="Моя фотография" />
Это означает, что чужой сайт не только "заимствует" ваше изображение, но использует часть трафика вашего сервера для отображения изображения на своих страницах. И если чужой сайт имеет большой поток посетителей, то такое положение станет проблемой!
Вы можете использовать следующие директивы mod_rewrite для того, чтобы прекратить использование ссылок на изображения всеми другими сайтами, кроме вашего собственного.  Разместите ниже приведенный код в файле .htaccess в корневом каталоге вашего сайта или в папке с изображениями, которые надо защитить. Измените example.com на имя вашего домена.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$ [NC]
RewriteRule .+\.(gif|jpg|png)$ - [F]
Как только вы закончите выполнять все операции копирования любой браузер , запрашивающий изображения с вашего сайта использующий при запросе URL, начинающийся с имени домена, отличного от  www.example.com или example.com , будет получать ошибку "403 Forbidden". что остановит использование ссылок на ваши изображения на других сайтах.
Вот как работает данный набор правил:
RewriteEngine on - включаем механизм mod_rewrite
RewriteCond %{HTTP_REFERER} !^$ - RewriteCond является еще одной директивой mod_rewrite. Она позволяет устанавливать условие, которое должно выполняться для обработки URL следующим за ним правилом RewriteRule . В данном случае условием является наличие значения в переменной HTTP_REFERER.
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$ [NC] - вторая директива RewriteCond  требует, чтобы значение переменной HTTP_REFERER не начиналось с http://www.example.com/ или http://example.com/ . Флаг [NC] устанавливает чувствительность к регистру символов.
RewriteRule .+\.(gif|jpg|png)$ - [F] - если два выше предыдущих условия RewriteCond не выполняются, то правило пропускается. Само же правило возвращает ошибку "403 Forbidden" (используется флаг [F]), если URL содержит имя файла изображения (строка заканчивается на .gif, .jpg или .png), Тире в параметре подстановки означает "не надо заменять URL другим адресом".
То есть весь набор правил в файле .htaccess гласит, если переменная HTTP_REFERER содержит значение, и оно не начинается на http://example.com/ или http://www.example.com/, и запрашиваемый URL содержит имя файла изображения, то надо отказать запросу с ошибкой "403 Forbidden".