Форматирование текста в HTML
Здесь мы рассмотрим, как форматировать текст в HTML: изменение толщины шрифта, направления, наклона и размера текста, выделение текста, как вставить, удалить или, выделить как цитату, и многое другое. Наглядным примером тому служат сами названия отдельных видов форматов.
Жирный текст
Устанавливается парой тегов <b> и </b> . Тот же самый эффект имеет и использование <strong> и </strong>:
<b>Жирный</b> текст
<strong>Жирный</strong> текст
Курсивный текст
Устанавливается тегами <i> и </i>. Альтернативно, можно использовать теги <em> и </em>:
<i>Курсивный</i> текст
<em>Курсивный</em> текст.
Подчеркнутый текст
Может быть установлен тегами <u> и </u>:
<u>Подчеркнутый</u> текст
Теперь, однако использование <u> и </u> не рекомендуется. Вместо этого, используйте стили.
Увеличенный текст
Вы можете выделить определенный текст, как выше, тегами <big> и </big>:
<big>Увеличенный</big> текст
Уменьшенный текст
Если вы заключите фразу тегами <small> и </small>, эта фраза будет отображаться меньшего размера, чем остальной текст:
<small>Уменьшенный</small> текст
Верхний индекс
Обозначается тегами <sup> и </sup>:
<sup>Верхний</sup> индекс.
Нижний индекс
В свою очередь нижний индекс устанавливается тегами <sub> и </sub>:
<sub>Нижний</sub>индекс
Вводный текст
Чтобы выделить определенный текст, поставьте перед ним и после него теги <ins> и </ins>:
<ins>Вводный</ins> текст
Обратите внимание, что браузер будет представлять подобный текст, как подчеркнутый. Перечеркнутый текст
Перечеркнутый текст
Если вы хотите подчеркнуть, что данный текст был удален (очень распространенный способ для акции, чтобы сосредоточиться на том, насколько высокой является старая цена), используйте <del> и </del>:<del>Перечеркнутый</del> текст
Цитируемый текст
Короткие цитаты оборачивайте в <q> и </q>:
<q>Цитируемый</q> текст
Вряд ли вам придется использовать подобное форматирование, только если вы пишете текст на иврите или арабском, но на всякий случай вот как определяет направление текста справа-налево:
Смена <bdo dir=»rtl»>направления</bdo> текста.
Читайте далее: HTML уроки продолжение
Post Views:
5 616
Настройка капчи
Чтобы в форме появилась капча:
Добавьте в шаблон формы следующий код:
<? if ($arResult === true): ?> <?=$arResult?><br> Введите код с картинки: <?=$arResult?> <? endif; ?>
В настройках формы включите показ капчи.
На этом капча уже будет работать.
Обновление капчи пользователем.
Бывает такое, что код с картинки не читается и пользователь не может отправить форму. Поможем пользователю.
Вместо кода
<?=$arResult?>
Сделаем
<img src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult?>" onclick="this.src = '/bitrix/tools/captcha.php?captcha_sid=<?=$arResult?>&r='+Math.random()" style="cursor:pointer" width="180" height="40" > Нажмите на картинку, чтобы обновить
Теперь, если пользователь не может прочитать код, он может обновить картинку.
Выбор данных с помощью PDO (+ подготовленные операторы)
В следующем примере используются подготовленные операторы.
Он выбирает столбцы ID, имя и фамилия из таблицы мигуестс и отображает их в таблице HTML:
Пример (PDO)
<?phpecho «<table style=’border: solid 1px black;’>»;
echo «<tr><th>Id</th><th>Firstname</th><th>Lastname</th></tr>»;class TableRows extends RecursiveIteratorIterator {
function __construct($it) { parent::__construct($it, self::LEAVES_ONLY); } function current() { return «<td style=’width:150px;border:1px solid black;’>» . parent::current(). «</td>»; } function beginChildren() { echo «<tr>»; } function endChildren() { echo «</tr>» . «\n»; } } $servername = «localhost»;
$username = «username»;$password = «password»;$dbname = «myDBPDO»;
try { $conn = new PDO(«mysql:host=$servername;dbname=$dbname», $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $conn->prepare(«SELECT id, firstname, lastname FROM MyGuests»); $stmt->execute(); // set the resulting array to associative $result = $stmt->setFetchMode(PDO::FETCH_ASSOC); foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) { echo $v; }}catch(PDOException $e) { echo «Error: » . $e->getMessage();}$conn = null;echo «</table>»;?>
❮ Назад
Дальше ❯
Получить имена всех полей таблицы persons базы данных book
- <?php$fld = mysql_list_fields(«»book»», «»persons»»);$n = mysql_num_fields($fld);for($i=0;$i<$n; $i++){ $name_f = mysql_field_name ($i); echo «»<br>Имя поля: «». $name_f;}?>
-
(Правильный ответ)
<?php$conn = mysql_connect(«»localhost»», «»nina»», «»123″»);$fld = mysql_list_fields(«»book»», «»persons»», $conn);$n = mysql_num_fields($fld);for($i=0;$i<$n; $i++){ $name_f = mysql_field_name ($fld, $i); echo «»<br>Имя поля: «». $name_f;}?> - <?php$conn = mysql_connect(«»localhost»», «»nina»», «»123″»);$fld = mysql_list_fields(«»book»», «»persons»», $conn);for($i=0;$i<count($fld); $i++){ echo «»<br>Имя поля: «». $fld;}?>
Функция mysql_connect, устанавливающая соединение с базой данных MySQL, имеет следующий синтаксис:
mysql_connect ( server, username, password, new_link, client_flags)
Какие значения будут установлены для параметров server, username, password, если они не были заданы при вызове функции mysql_connect?
-
(Правильный ответ)
server = ‘localhost:3306’username = имя пользователя владельца процесса сервераpassword = пустой пароль - эти параметры обязательны для функции mysql_connect
- server = ‘localhost:8080’username = имя пользователя владельца процесса сервераpassword = пароль пользователя владельца процесса сервера
Простая пагинация на PHP/Javascript. Создаем постраничную навигацию
Разрабатывая любой проект часто приходиться сталкиваться с необходимостью создания постраничной навигации или как еще называют — пагинация. Будь-то список статей, пользователей или любые другие выборки с базы данных, где большое количество записей требуют лимитированного вывода. Такой вывод можно реализовать двумя способами:
1. Выгружать все данные и показывать пользователю только часть. 2. Выгружать только часть данных, которые непосредственно показывать.
Каждый из способов имеет свои плюсы и минусы, очевидно, если записей в базе очень много, то выгружая все, мы очень сильно нагружаем компьютер пользователя. Просто представьте, что при открытии страницы у вас подгружается 100.000 записей, с другой стороны, если выгрузка имеет только 100 элементов, то такой способ будет работать быстрее, так как не нужно постоянно обращаться к серверу.
В статье мы разберем второй способ, а именно выгрузку только тех данных, которые отдаются пользователю на текущей странице.
1. Функция pagePrint(), печатает ссылку на заданую страницу
$page — номер страницы; $title — анкор ссылки (например, «1», «2», «10», «следующая»); $show — показывать ссылку или текст, используется, чтобы вывести текущую страницу, или же неактивные ссылки «назад», «вперед»; $active_class — класс CSS для активной страницы.
3. Пример выборки данных из базы
Для выборки используется LIMIT, где старт вычисляется по формуле (page-1)*limit, то есть для первой страницы start = 0.
4. Подсчет кол-ва страниц и проверка основных условий.
С подсчетом количества страниц иногда возникают проблемы, так как страниц может быть только целое число, а при делении (кол-во записей)/(лимит записей на странице) может получится дробное. Данный результат необходимо округлить в больную строну, потому что, обычное округление round(), выдаст ошибочный результат.
Пример, всего записей 31, на странице публикуем по 10, таким образом по формуле получается 3.1 страница, при округлении round(3.1) = 3, что неправильно, так как теряется одна запись. Поэтому используется функция ceil(), ceil(3.1) = 4.
Вложенные списки
Особенность, которая делает списки очень мощными — это возможность вложения. Каждый список может быть помещён в другой список и они могут быть вложены неоднократно. Но возможность вкладывать списки бесконечно не даёт свободу делать это. Списки должны быть зарезервированы специально там, где они сохраняют наиболее семантическое значение.
Трюк с вложением списков заключается в том, что следует знать, где начинается и заканчивается каждый список и пункт списка. Говоря конкретно о маркированных и нумерованных списках, единственным элементом, который может находиться непосредственно внутри <ul> и <ol> является элемент <li>. Повторим — единственным элементом, который мы можем поставить как прямой потомок элементов <ul> и <ol>, является <li>.
Тем не менее, внутри элемента <li> может быть добавлен стандартный набор элементов, включая любые элементы <ul> или <ol>.
Чтобы вложить список — перед закрытием пункта списка начните новый список. После того, как вложенный список завершён и закрыт, закройте обрамляющий пункт списка и продолжите с первоначального списка.
Демонстрация вложенных списков
Поскольку вложенные списки могут немного запутать и отобразить нежелательные стили, если они сделаны неправильно — давайте быстро их просмотрим. Элементы <ul> и <ol> могут содержать только элементы <li>. Элемент <li> может содержать любой обычный элемент, какой пожелаете. Однако элемент <li> должен быть прямым потомком либо элемента <ul>, либо <ol>.
Стоит также отметить, что когда списки вложены внутрь других списков, их маркеры будут меняться в зависимости от глубины вложения. В предыдущем примере маркированный список, вложенный в нумерованный, использует в качестве маркеров кружок вместо точки. Это изменение происходит потому, что маркированный список вложен на один уровень в нумерованном списке.
К счастью, мы можем управлять, как маркеры пунктов списка выглядят на любом уровне, что мы и рассмотрим дальше.
Перенаправление содержания страницы на новый URL адрес
RewriteRule ^article/?$ http://www.novyi-domen.kz/article/ # Временно перемещённая страница
С помощью флага «R» мы изменяем работу дерективы RewriteRule. Вместо внутреннего изменения URL, сервер Apache возвращает в HTTP заголовок сообщение о том, что страница перемещена временно на новый URL адрес, указанный в параметре замены, независимо от того какая была указана URL ссылка, обсолютная или относительная. Заголовок отсыдается обратно включая код 302, который указывает на временное перемещение контента страницы.
RewriteRule ^article/?$ http://www.novyi-domen.kz/article/ # Навсегда перемещён на новый URL адрес
Если нужно переместить навсегда, то к флагу «R» добавляем строку «=301», тогда сервер Апаче отправит заголовок, указывающий на постоянное перемещение данного контента. В отличие от значения по умолчанию флага «R», «R=301» укажет браузеру показать новую URL ссылку в адресной строке. Перенаправление контента является самым распространённым способом настройки URL адресов.
В завершение
Хотя структура URL-ов может показаться не столь важной с точки зрения SEO, она влияет на ранжирование страниц. Чтобы нравиться пользователям и поисковикам, URL-адреса должны быть логически структурированными, удобными, короткими и оптимизированными для распространения
Для создания ЧПУ нужно учитывать много факторов, но как только вы научитесь создавать чистые URL-ы, вряд ли вы когда-нибудь утратите этот навык. Кроме того, оптимизировать URL-адреса быстро и легко вам помогут специальные инструменты: существует множество сервисов для генерации чистых URL-ов, а также SEO-платформы, с помощью которых вы сможете узнать о существующих проблемах с вашими URL-ами и быстро их решить.
5 352
Мария Ефименко
Редактор
Мария – копирайтер и редактор блога SE Ranking. Большую часть своей карьеры она занимается контент маркетингом и написанием статей для блогов. Имея достаточно разносторонний опыт, она успела поработать в разных нишах, включая SEO, блокчейн, финтех, и технологических стартапах.
Как проверить мета теги страниц: ошибки в Title, H1 и Description
Несложно вручную проверить корректность заполнения метатегов, если работаете с одностраничником. Но если страниц сайта много, проще использовать автоматические инструменты.
К примеру, так выглядит часть результатов проверки внутренних страниц сервисом «Анализ сайта». Он позволяет найти ссылки на страницы, в которых допущены ошибки: к примеру, дублируется Title или не заполнен заголовок H1:
Фрагмент проверки внутренних страниц
Есть настраиваемый фильтр, чтобы смотреть только нужные результаты из списка:
Фильтр результатов и настройка колонок
Анализ сайта— сервис для автоматического аудита главной и внутренних страниц. Краулер для проверки внутренних страниц ищет ошибки, проверяет коды ответов сервера, контент и техническое состояние.
2: Стандартное отображение записей MySQL
Теперь мы создадим сценарий PHP, который подключается к базе данных MySQL и отображает строки в веб-браузере. Пока что код PHP будет стандартным, без пагинации – так вы посмотрите, как записи отображаются на одной странице, и позже сможете сравнить результаты. Хотя для тестирования у нас есть всего десять записей, что не так уж много, этого будет достаточно, чтобы вы смогли оценить преимущества пагинации (улучшение работы пользователей и снижение нагрузки на сервер).
Создайте файл для сценария PHP в корневом каталоге приложения с помощью следующей команды:
Затем добавьте следующее содержимое в файл, заменив PASSWORD тем паролем, который вы выбрали для test_user:
Сохраните и закройте файл.
Этот скрипт подключается к базе данных MySQL с помощью ее учетных данных, используя библиотеку PDO (PHP Data Object).
PDO – это легкий интерфейс для подключения к базам данных. Уровень доступа к данным является более гибким и может работать с различными базами данных при незначительных изменениях кода. PDO обладает большей безопасностью, поскольку поддерживает подготовленные операторы, что позволяет выполнять запросы быстрее и надежнее.
Затем API-интерфейс PDO выполняет оператор select * from products и выводит продукты в таблице HTML без разбивки на страницы. Строка
выводит типы данных в том виде, в каком они появляются в базе. Это означает, что PDO вернет product_id как целое число, а product_name как строку. Строка
позволяет PDO выдавать исключение, если обнаружена ошибка. Для простоты отладки ошибка захватывается внутри PHP-блока try {} … catch {}.
Чтобы выполнить созданный вами сценарий PHP /var/www/html/pagination_test.php, перейдите по следующему URL-адресу, заменив your-server-IP внешним IP-адресом вашего сервера:
Вы увидите страницу с таблицей продуктов.
Итак, PHP скрипт работает как положено, он выводит список всех продуктов на одной странице. Когда продуктов 10, это нормально, но если на вашем сайте размещены тысячи продуктов, это будет неудобно и долго (так как продукты выбираются из базы данных и отображаются на странице PHP).
Давайте перепишем PHP-скрипт и включим в него блок с оператором LIMIT, а внизу таблицы разместим навигационные ссылки, чтобы добавить пагинацию.
PHP класс Paging для постраничной разбивки
Теперь я приведу пример как организуется постраничная навигация с использованием PHP-класса Paging.
<?php
require('paging.inc.php');
$_DB = new mysqli($host,$user,$passwd,$db_name);
$_PAGING = new Paging($_DB);
$r = $_PAGING->get_page( 'SELECT * FROM table1' );
while($row = $r->fetch_assoc())
{
}
echo $_PAGING->get_result_text().' объявлений';
echo 'Страницы: '.$_PAGING->get_prev_page_link().' '.$_PAGING->get_next_page_link().'<br /><br />';
echo $_PAGING->get_page_links();
?>
Единственное чем данный скрипт отличается от обычного скрипта без постраничной разбивки, так это тем, что запрос выборки данных которые нужно разделить на части производится не через , а через метод реализованный в классе Paging, а так же тремя последними строками которые отображают ярлыки и строку отчет о выборке.
Как написать оптимизированный заголовок H1
Как правильно заполнить заголовок H1 в 2019-2020: отличия от Title, советы по упоминанию ключей и использованию символов.
H1 — заголовок первого уровня, пользователь видит его, когда заходит на страницу. На одной странице должен быть один заголовок первого уровня, H2-H5 может быть несколько.
Различия Title и H1
Можно ли сделать одинаковыми Title и H1
Текст в Title и H1 может быть идентичным, поисковики не пессимизируют страницу за совпадение этих мета тегов. В в перечне условий создания быстрых ссылок есть пункт:
«содержимое элемента title совпадает с ее заголовком (выделен элементом h1) и с текстами внутренних ссылок, которые ведут на эту страницу».
Оптимизаторы обычно советуют по-разному формулировать Title и H1, потому что у них разные задачи:
Но эти заголовки должны быть об одном и том же, чтобы не было смыслового конфликта. Если в Title о выборе горных велосипедов, то и в H1 о них с теми же ключами.
Наполнение тегов прокомментировал Андрей Прудко, директор студии интернет-маркетинга и веб-брендинга «Большая Буква»:
Исследование факторов ранжирования: H1
В исследовании факторов ранжирования 2019 сотрудники Лаборатории поисковой аналитики компании «Ашманов и партнеры» не обнаружили корреляции позиций в Яндексе с вхождением в заголовок H1.
Есть корреляция точного запроса с попаданием в топ-30 Google:
Возможно, это повторение корреляции, которую обнаружили у ключей в Title — на части сайтов Title и H1 одинаковые.
Советы по оптимизации такие же, как для Title, за исключением тех, что направлены на увеличение кликабельности — H1 в сниппет все равно не попадет.
Как сделать на сайте удобную пагинацию страниц
Пагинация страниц — важнейшая составляющая навигации на любом сайте или в приложении. Однако при создании некоторых сайтов этому элементу не уделяют должного внимания, в результате чего получается не всегда корректная пагинация.
Определять оптимальную форму пагинации и решать, нужна ли она в принципе, следует в контексте конкретного сайта, а потому всегда надо отталкиваться от стремления сделать удобную юзабилити для пользователей.
Создать качественную пагинацию нетрудно. Главное — соблюдать нижеприведенные рекомендации.
Удобный размер страницы
Ваша страница не должна быть очень маленькой. Сайт или приложение — не печатное издание, где размер страниц ограничен его собственным объемом и величиной его листов. Габариты сайта ограничены только вычислительной мощностью гаджета и выдержкой пользователя. Оптимальным считают отображение от 20 до 80 записей на странице. Но это лишь примерное значение. Реальное зависит от категории сайта. На одних этот показатель равен 10, на других — 100
Самое важное — сделать сайт удобным для посетителя
Удобный размер ссылок
Элементы пагинации страниц (как и любой другой части навигации) нужно делать крупными. Прежде всего это требуется мобильным пользователям, чтобы они не промахивались при нажатии кнопки на сенсорном экране своего устройства. Попасть на кнопку на экране мобильного гаджета, конечно, труднее, чем навести курсор на необходимый элемент с ПК или с помощью стилуса.
Визуальное выделение номера страницы
Пользователь должен четко понимать, в какой части сайта он сейчас. Именно поэтому в пагинации необходимо визуально выделять номер страницы, на которой находится посетитель. При этом лучше, если вы сделаете это не только с помощью цвета, поскольку некоторые пользователи могут просматривать сайт на одноцветных экранах.
Оптимальное пространство вокруг элементов
Ставьте не больше 10 ссылок. Кроме того, ваша задача — убедиться и в том, что размера ссылок и свободного места между ними хватает для того, чтобы посетитель нажимал на ту ссылку, на которую действительно хотел нажать.
Рекомендуемые статьи по данной теме:
- Разработка веб-сайтов: способы, инструменты и проблемы
- Внутренняя оптимизация сайта: пошаговый разбор
- Разработка дизайна сайта: от выбора стиля до получения макета
Возможность перейти на предыдущую и следующую страницу
Для посетителей очень удобны ссылки на предшествующую и следующую страницы. Их нужно зрительно оградить от других. Дополнительно (или вместо текста) в ссылке может содержаться иконка стрелки.
Возможность перейти на первую и последнюю страницу
Нередко встречается пагинация, включающая в себя ссылки на первую и последнюю страницы. Они не очень распространены, однако необходимы посетителям, желающим начать изучение сайта с самых первых публикаций (если последние расположены на первой странице, что характерно для новостных сайтов). Эти ссылки визуально напоминают ссылки, ведущие на предшествующую и следующую страницы (к примеру, двойная стрелка), что запутывает посетителей: они не понимают, какая ссылка что означает. Решить проблему, добавив текст, — не выход. Нужно обозначать первую и последнюю страницу цифрами, как и другие ссылки.
Оптимизация под мобильную версию
Габариты экрана у мобильных устройств ограничены, а потому следует разумно сократить количество элементов и увеличить их размеры.
Для мобильных гаджетов можно оставить номер текущей страницы вместе с базовыми элементами (первой, предыдущей, следующей и последней страницей).
Оптимизация под клавиатуру
Сделайте так, чтобы пользователи могли применять клавиатуру для навигации, переходя с помощью клавиши «Вправо» на следующую страницу, клавиши «Влево» — на предыдущую
Важно лишь рассказать пользователю о такой возможности. Чтобы его предупредить, просто напишите под пагинацией: «Используйте клавиши ← влево и вправо → для навигации по страницам»
Кроме того, можно дать человеку возможность переходить по ссылкам клавишей Tab. При выделенной ссылке нажатие Enter должно вызывать переход на следующую страницу.
Проставление нумерации страниц
Чем пользоваться — пейджингом или навигацией «Далее/Назад»? На малостраничном сайте вероятность того, что пользователь пройдется по всем страницам, возрастает. Если же у человека нет возможности оценить количество записей, его терпение может иссякнуть раньше, чем он перейдет на следующую страницу.
Как закрыть страницы пагинации в WordPress от индексации
Для чего закрывать пагинацию от индексации? Прежде всего, чтобы беспроблемно продвигать сайт. Это основное и единственное объяснение. Надо сказать, что URL-адрес всех подстраниц отсылает к основной странице, где как раз и начинается пагинация. То есть названия этих страниц в теге <title> будут дублироваться. Поисковикам не очень нравится такая ситуация. В связи с этим владельцу сайта будут поступать соответствующие оповещения, а позиции веб-ресурса в рейтинге поисковых систем могут снизиться. Поэтому если на вашем сайте все же будет пагинация, позаботьтесь о том, чтобы она корректно отображалась для поисковых роботов.
Решить задачу, связанную с закрытием от индексации, можно несколькими способами. Отличие между ними состоит лишь в схеме реализации. Остановимся на самых простых и известных методах, используемых пользователями WordPress.
- При использовании плагина Clearfy Pro необходимо помнить, что он уже оснащен инструментами, предназначенными для закрытия от индексации страниц пагинации сайта. Нужно зайти в панель администратора и перейти в раздел Clearfy Pro. Далее на вкладке «Дубли» сдвинуть ползунок вправо, напротив опции «Удалить дубли пагинации постов», и сохранить изменения.
- Для закрытия от индексации страниц пагинации в SEO-плагине All in One SEO Pack необходимо, установив и активировав его, зайти в панель администратора, перейти в All in One SEO -> Общие настройки, отметить пункт «Запретить пагинацию для канонических URL», после чего нажать «Обновить настройки».
При помощи файла functions.php.
Необходимо добавить специальный PHP-код в файл вашей темы functions.php и вставить в конец указанного файла следующие строчки:
function wpschool_noindex_paged() {
if ( is_paged() ){
?>
<meta name=»robots» content=»noindex,nofollow»>
<?php
}
}
add_action( ‘wp_head’, ‘wpschool_noindex_paged’, 2 );
При помощи файла robots.txt. В этом случае необходимо редактировать конфигурационный файл robots.txt, предназначенный исключительно для поисковых роботов. Чтобы закрыть страницы пагинации в robots.txt от индексации, в самый конец файла добавляем строчку:
Disallow: */page/
Надо сказать, что здесь не указывают адрес сайта, поскольку он уже известен для robots.txt. Такой метод имеет один недостаток: не все поисковики могут соблюдать заданные в нем правила.
