HTML: Абсолютные и относительные ссылки. Страничные носители

Flector 5

Обновлено:

При установке структуры постоянных ссылок в виде "/%category%/%postname%.html " все ссылки на записи начинают заканчиваться на ".html ". Однако, этот формат ссылок никак не влияет на ссылки страниц. Что немного раздражает – подобной структурой ссылок мы подчеркиваем, что на нашем сайте является страницей, а что нет. Страница это то, что с ".html " в конце, а все остальное это рубрики, метки или еще какие другие таксономии. Ссылки на страницы в данном контексте выбиваются из общей картины – они кажутся ссылками на рубрики, хотя это и не так. Плагин эту неприятную ситуацию исправляет, добавляя ссылкам на страницы окончание ".html ".

1 Распаковываем архив.

2 Копируем файл в папку /wp-content/plugins/ .

3 Заходим в админку блога на вкладку "Плагины " и активируем плагин.

Настроек в плагине нет и сразу после своей активации он начинает работать. Теперь все ссылки на страницы превратятся из таких:

Вот в такие:

Но как быть в том случае, если вам надо изменить ".html " на ".htm " или вообще на ".php "? В плагине совсем нет никаких настроек, поэтому его придется отредактировать вручную. Для этого откройте файл плагина и измените в нем следующие строчки:

$wp_rewrite->

$wp_rewrite->page_structure="%pagename%.html";

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

Я отнес данный плагин к рубрике "SEO ", но формально, конечно, он к этой рубрике не имеет никакого отношения. Поисковикам откровенно наплевать, как выглядят ссылки на ваши записи, страницы или рубрики. Да и вашим посетителям, по большому счету, это тоже неважно. Но с точки зрения эстетичности ссылок данный плагин необходим. В конце концов, вы же изменили структуру постоянных ссылок на более красивую, хотя это и не имеет никакого смысла с точки зрения SEO-оптимизации блога.

Страничные блоки: правило @page

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

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

Примечание. В CSS2 свойства границ и свойства отступов не применяются к страницам; возможно, в будущем они будут применяться.

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

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

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

Например, следующее правило @page устанавливает размеры страничного блока равными 8.5 x 11 дюймам и создает поле размером 2 см со всех сторон между краем страничного блока и областью страницы:

@page { size 8.5in 11in; margin: 2cm }
Свойство "marks" в правиле @page указывает метки выравнивания и обрезки страничных блоков.

Поля страницы

Свойства полей ("margin-top", "margin-right", "margin-bottom", "margin-left" и "margin") используются в контексте описания страницы. На следующем рисунке продемонстрировано взаимное расположение листов, страничных блоков и полей страницы:

Вычисленное значение ширины полей страницы в верхней и нижней частях страницы равно "0".

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

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

Размер страницы: свойство "size"

Значение: <длина>{1,2} | auto | portrait | landscape | наследуемое
Начальное значение: auto
Область применения: содержанию страницы
Наследование: N/A
Процентное задание: N/A
Устройства: визуального форматирования, устройства с постраничной разбивкой

Данное свойство определяет размер и ориентацию страничного блока.

Размер страничного блока может быть "абсолютным" (фиксированный размер) или "относительным" (варьирующим в зависимости от размеров листа). Использование относительных размеров страничных блоков позволяет пользовательским агентам изменять и наиболее оптимально использовать размеры документа.

Три значения свойства "size" позволяют создавать страничный блок относительных размеров:

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

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

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

В следующем примере осуществляется выравнивание внешних краевых линий страничного блока и листа, на котором будет осуществляться вывод. Процентное соотношение, выступающее в качестве значения свойства "margin", задается относительно размеров листа, на котором будет осуществляться вывод. Если последний имеет размеры 21.0 см x 29.7 см (т.е. является листом формата A4), то размер полей будет равен 2.10 см и 2.97 см.

@page {
size: auto; /* auto является начальным значением */
margin: 10%;
}

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

Например:

@page {
size: 8.5in 11in; /* ширина и высота */
}

В этом примере ширина страничного блока устанавливается равной 8.5 дюймам, а высота - равной 11 дюймам. Исходя из этих значений, размеры листа, на котором будет осуществляться вывод, должны быть не менее 8.5"x11".

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

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

• повернуть страничный блок на 90°, если в результате этого страничный блок поместится на листе;
• изменить масштаб страницы, чтобы уместить ее на листе.

Перед выполнением этих процедур агент пользователя должен выдать запрос пользователю.

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

Метки обрезки: свойство "marks"

Значение: [ crop || cross ] | none | наследуемое
Начальное значение: none
Область применения: контекст описания страницы
Наследование: N/A
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

При высоком качестве печати метки зачастую помещаются за пределами страничного блока. Названное свойство определяет, какие метки будут добавлены непосредственно за краевой линией страничного блока: либо метки обрезки, либо метки выравнивания, либо и те, и другие.

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

Метки видны только в страничных блоках абсолютных размеров (см. свойство "size"). Страничные блоки, имеющие относительные размеры, выравниваются относительно листа, на котором будет осуществляться их вывод, а метки при этом помещаются за пределами области печати.

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

Левые, правые и первые страницы

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

Все страницы автоматически подразделяются агентом пользователя на два псевдокласса:left и:right.

@page:left {
margin-left: 4cm;
margin-right: 3cm;
} @page:right {
margin-left: 3cm;
margin-right: 4cm;
}

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

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

@page { margin: 2cm } /* Ширина всех полей - 2 см */ @page:first {
margin-top: 10cm /* Верхнее поле на первой странице - 10 см */
}

Определение того, будет ли первая страница принадлежать классу:left или:right зависит от направления ввода текста, принятого в документе в качестве основного, и находится за пределами рассмотрения данного документа. Тем не менее, у разработчиков существует возможность принудительного назначения первой страницы классу:left или:right посредством вставки разрыва страницы перед первым сгенерированным блоком (например, это можно сделать для элемента BODY языка HTML).

Свойства, определенные в правиле:left (или:right) @page, переназначают те свойства, которые определяются в правиле @page, не имеющем псевдокласса. Свойства, определенные в правиле:first @page, переназначают свойства, которые определяются в правилах:left (или:right) @page.

Примечание. Добавление описаний к псевдоклассам:left и:right не влияет на то, будет ли документ печататься с двух или с одной стороны (последний вопрос находится за рамками рассмотрения данной спецификации).

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

Содержимое за пределами страничного блока

При форматировании содержимого, осуществляемом в рамках модели страницы, некоторая часть содержимого может оказаться за пределами страничного блока. Например, элемент, свойству "white-space" которого было присвоено значение "pre", может породить блок, превосходящий по размерам страничный блок. Наряду с этим может случиться, что при абсолютном позиционировании блоков некоторые из них примут "не очень подходящее" местоположение. Например, графические объекты могут оказаться на краю страничного блока или на 100000 дюймов ниже него.

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

• содержимое желательно позиционировать на некотором расстоянии от страничного блока, чтобы существовала возможность обрезки страниц впритык к полям;
• пользовательским агентам следует избегать генерации большого числа пустых страничных блоков, уделяя больше внимания позиционированию элементов (например, Вы не хотите печатать 100 пустых страниц). Обратите внимание, что генерация небольшого числа пустых страничных блоков необходима для обработки значений "left" и "right" свойств "page-break-before" и "page-break-after";
• не следует размещать элементы в несоответствующих местах во избежание их представления в документе. Вместо этого следует:
• полностью прекратить генерацию блока, присвоив свойству "display" значение "none";
• сделать блок невидимым, используя свойство "visibility".
• агенты пользователей могут по-разному обрабатывать блоки, расположенные за пределами страничного блока, в частности, не обрабатывать их или создавать для них страничные блоки в конце документа.

Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin , а также задать разрывы страниц в указанном месте.

@page { margin: 2in; }

Можно задавать отдельные поля документа внутри правила @page , такие как margin-top , margin-right , margin-bottom , margin-left:

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойств page-break-before , page-break-after и page-break-inside . Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static .

Синтаксис:

@media print { h1 {page-break-before: always;} }

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

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

Green Yellow Black

• Выпадающий список создается с помощью тега ;
  Внутри тега
  определяются варианты для выбора с помощью тега ;
• В теге можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.

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

В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили с помощью CSS / CSS3 и фреймворка Bootstrap .

Пример создания простого выпадающего списка

В этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:

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

5 10 15 20 25

Использование атрибута value

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

В следующем примере мы создадим выпадающий список с атрибутом value :

Для тега используется следующий код:

Maroon Green Yellow Blue Red

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

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

Для option value HTML используется следующий код:

Maroon Green Yellow Blue Red Other

Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта :

var seltheme = document.getElementById(“selcolor”).value;

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

Получение доступа к видимому тексту в JQuery

На этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :

Посмотреть онлайн демо-версию и код

В коде для каждого варианта в теге

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

Maroon Green Yellow Blue Red

Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :

var selectedcolor = $("#jqueryselect option:selected").text();

Также можно получить доступ к значению с помощью JQuery-метода $.val() :

var selectedcolor = $("#jqueryselect").val();

Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.

Пример получения значения в скрипте PHP

В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:

Посмотреть онлайн демо-версию и код

Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:

Select A Color:

Maroon Green Yellow Blue Red