Как устроен сайт

Микроразметка

ifmobile

Подсветка

Оформление статей

<figure class="figure1 mt5" itemscope itemtype="http://schema.org/ImageObject"> <picture> <source media="(max-width: 600px)" type="image/webp" srcset="/latex/img/symbols9--small.webp"> <source media="(min-width: 601px)" type="image/webp" srcset="/latex/img/symbols9--big.webp"> <source media="(max-width: 600px)" type="image/jpeg" srcset="/latex/img/symbols9--small.jpg"> <source media="(min-width: 601px)" type="image/jpeg" srcset="/latex/img/symbols9--big.jpg"> <img class="w100" src="/latex/img/symbols9--small.jpg" itemprop="contentUrl" alt="изображение с сайта www.andreyolegovich.ru"> </picture> <figcaption> &#169; источник </figcaption> </figure>

PNG

<figure class="figure1 mt5" itemscope itemtype="http://schema.org/ImageObject"> <picture> <source media="(max-width: 600px)" type="image/webp" srcset="img/symbols9--small.webp"> <source media="(min-width: 601px)" type="image/webp" srcset="img/symbols9.webp"> <source media="(max-width: 600px)" type="image/png" srcset="img/symbols9--small.png"> <source media="(min-width: 601px)" type="image/png" srcset="img/symbols9.png"> <img class="w100" src="img/symbols9--small.png" itemprop="contentUrl" alt="символы LaTeX изображение с сайта www.andreyolegovich.ru"> </picture> <figcaption> Символы LaTeX &#169; источник </figcaption> </figure>

Тег picture позволяет отавать браузеру несколько размеров фото на выбор

<figure class="figure1 mt8"> <picture itemscope itemtype="http://schema.org/ImageObject"> <source media="(max-width: 600px)" type="image/jpeg" srcset=" photo--small-lr.jpg 600w, photo--small-hd.jpg 866w" sizes="(max-width: 600px) 480px, 800px"> <source media="(min-width: 601px)" type="image/jpeg" srcset="photo--large.jpg"> <img class="w100" src="photo--small-lr.jpg" alt="изображение с сайта heihei.ru" itemprop="contentUrl"/> </picture> <figcaption> Фото: HeiHei.ru </figcaption> </figure>

Делаем карту сайта

find . -path "./i/*" -name "*.php" -not -name "*list_of_articles*" -not -name "*top_path*" -not -name "*_inc.php*" -not -name "*menu*" -not -name "*Related*"

На мобильной версии

if($mobile){echo'Вы зашли с мобильного устройства';}

if($mobile){echo' <div class="p5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- ao_php_horiz --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7881721879502382" data-ad-slot="4804696083" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> ';};

Страница строится на классе BasePage (ao/.php/BasePage.php).

use Aredel\Ao\Php\BasePage;
$root = $_SERVER['DOCUMENT_ROOT'];
require_once($root . '/ao/.php/BasePage.php');
$page = new BasePage(lang: 'ru', title: '...', description: '...', keywords: '...');
echo $page->createHeader();
echo'<main class="wrapper-base-page mt5">';
... контент страницы ...
echo'</main>';
echo $page->createFooter();

title, description и keywords задаются в конструкторе — для каждой страницы свои.

createHeader() отдаёт head и шапку, createFooter() — счётчики, поиск, подвал и закрытие html.

Затем начинается собственно сам контент страницы

<p class="p11">
Какой-то текст - так объявляется обычный параграф во всю ширину страницы
</p>



Вставлять внутрь тега p изображения и списки не рекомендуется.

Рисунок справа от текста

Нужно сперва создать <div class="p11"> а потом в него поместить картинку (или несколько) внутри дива <div class="rightdiv50"> а текст, который будет слева писать в теге p но класс у него не p11 а noind

Пример

<div class="p11">
<div class="rightdiv50">
<img class="w100" src="/img/chigurh.jpg"
alt="chigurh">
</div>
<p class="noind">
Текст
</p>
</div>

Результат

Здесь много текста не просто так а потому что нужно показать, что рано или поздно текст начнёт обтекать картинку справа.

Также видно, что стили подобраны неидеально.

Во-первых есть разница по размеру шрифта.

Также с отступами не всё гладко.

Хотелось бы разработать стили, которые учтут все эти недостатки

Но руки пока не дошли.

А вот текст вот-вот обойдёт картинку

Я гарантирую это

Ну, что я говорил. Теперь пошёл почти как обычный абзац во всю ширину. Главное не забывать, что noind нужно заключать в div class p11

Обычные изображения

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

<img class="imgfull" src="/img/chigurh.jpg" alt="chigurh">

<img class="imgbig" src="/img/chigurh.jpg" alt="chigurh">

<img class="imgmedium" src="/img/chigurh.jpg" alt="chigurh">

<img class="imgsmall" src="/img/chigurh.jpg" alt="chigurh">

У изображений всегда должен быть заполнен тег alt. Если изображение наше, то в alt должна быть вставлена фраза «изображение с сайта www.heihei.ru» - без кавычек.

Не нужно объявлять ширину через width напрямую, это устарело. Ширину мы задаём через классы. Об этом - в следующем разделе.

Ширина через классы

Так как ширину напрямую уже не задают, я сделал классы, которые её определяют

<img class="w100" src="/img/chigurh.jpg" alt="chigurh">

<img class="width60" src="/img/chigurh.jpg" alt="chigurh">

<img class="w30" src="/img/chigurh.jpg" alt="chigurh">

<img class="w10" src="/img/chigurh.jpg" alt="chigurh">

<img class="width5" src="/img/chigurh.jpg" alt="chigurh">

Если написать widthXX и это не заработало, значит нужно этот стиль добавить в style.css

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

1.) Обернуть картинку в специальный div.

2.) Добавить в тег img itemprop="contentUrl"


Заголовок и подпись это необязательные поля, но если они есть, то нужно добавлять в них соответствующий itemprop

Подробнее на сайте яндекса

Пример 1

<figure class="figure1" itemtype="http://schema.org/ImageObject">
<img class="s40с" src="/img/chigurh.jpg" alt="Chigurh" itemprop="contentUrl" >
<figcaption itemprop="description">Anton</figcaption>
</figure>

Результат

Пример 2

<div itemscope itemtype="http://schema.org/ImageObject">
<h2 itemprop="name">Антон Чигур</h2>
<img class="imgmedium" src="/img/chigurh.jpg" alt="chigurh" itemprop="contentUrl" >
<span itemprop="description"> Антон Чигур нарисован на стене </span>
</div>

Результат

Антон Чигур

Антон Чигур нарисован на стене

Пример 3

<div itemscope itemtype="http://schema.org/ImageObject">
<figure class="figure1">
<img class="s40с" src="/img/chigurh.jpg" alt="Chigurh" itemprop="contentUrl" >
<figcaption itemprop="description">Anton</figcaption>
</figure>
</div>

Результат

Цитаты

Цитаты делятся на две группы: те, что во всю ширину страницы. Названия стилей заканчиваются на fw50. И те, что во всю ширину блока.

<blockquote class="pathfw50"> - Зелёного цвета по ширине страницы</blockquote>

<blockquote class="pathfw50"> - Зелёного цвета по ширине сайта</blockquote>

<blockquote class="pathfw50"> - Голубого цвета по ширине страницы</blockquote>

<blockquote class="pathfw50"> - Голубого цвета по ширине сайта</blockquote>

<blockquote class="errfw50"> - Красного цвета по ширине страницы</blockquote>

<blockquote class="errfw50"> - Красного цвета по ширине сайта</blockquote>

<blockquote class="questionfw50"> - по ширине страницы</blockquote>

<blockquote class="questionfw50"> - по ширине сайта</blockquote>

<blockquote class="answerfw50"> - по ширине страницы</blockquote>

<blockquote class="answerfw50"> - по ширине сайта</blockquote>

Таблицы

Основной тип таблицы это tab11

Пример

<table class=="tab11=">
<caption>tab11 Заголовок писать в caption </caption>
<tr><th>1</th><th>2</th><th>3</th><th>4</th> </tr>
<tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td> </tr>
<tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td> </tr>
</table>

Результат

tab11 Заголовок писать в caption

1	2	3	4
A1	A2	A3	A4
A1	A2	A3	A4

Можно сделать таблицу p11

Пример

<table class=="p11=">
<caption>p11 Заголовок писать в caption </caption>
<tr><th>1</th><th>2</th><th>3</th><th>4</th> </tr>
<tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td> </tr>
<tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td> </tr>
</table>

Результат

p11 Заголовок писать в caption

1	2	3	4
A1	A2	A3	A4
A1	A2	A3	A4

Для оглавлений обычно используется tcont

Пример

<table class="tcont">
<caption>p11 Заголовок писать в caption </caption>
<tr><th>1</th><th>2</th><th>3</th><th>4</th> </tr>
<tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td> </tr>
<tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td> </tr>
</table>

Результат

tcont Заголовок писать в caption

1	2	3	4
A1	A2	A3	A4
A1	A2	A3	A4

Списки

Основной стиль для списков - ul11

Пример

<ul class="ul11">
<li>Первый</li>
<li>Второй</li>
<li>Gucci
<ul>
<li>Эшкере</li>

<li>Антихайп</li>
</ul>
</li>
</ul>

Результат

• Первый
• Второй
• Gucci
  • Эшкере
  • Антихайп

Советы по вёрстке

Если хочешь подпись к картинке - используй тег figure и в нем тег figcaption

<figure class="figure1">
<img class="imgfull" src="http://www.heihei.ru/Finland/fin_img/hanka-1.jpg"
alt="План природной тропы Hanikka Ханка. изображение с сайта www.heihei.ru">
<figcaption>Инфостенд с планом природной тропы Ханка</figcaption>
</figure>

Результат

- не используй тег <center> он устарел

- не вкладывай списки и картинки в абзацы <p><img src=""></p> - неправильно. У img свои стили им не нужно быть в p У ul тоже. Р - только для текста.

Специальные символы

Просто так писать спецсимволы в текст нельзя. Нужно заменять их HTML кодом

Все необходимые символы перечислены здесь

Примеры:

" - &quot;
« - &laquo;
» - &raquo;

Валидация

Все страницы нужно после выкладывания на сайт проверять на валидаторе ЗДЕСЬ

Подсвечиваение тегов

Здесь всё дело в том как сформирован документ. Если он внутри php целиком - то будет синим всё кроме некоторых команд php.

Если php только вначале и в конце, а внутри обычный html то он будет подсвечиваться как HTML

ВАЖНО помнить, что - Для лучшего быстродействия сайта чистый PHP предпочтительнее чем вставки.

BasePage

<?php
use Aredel\Ao\Php\BasePage;
$root = $_SERVER['DOCUMENT_ROOT'];
require_once($root . '/ao/.php/BasePage.php');
$page = new BasePage(
    lang: 'ru',
    title: 'Название статьи',
    description: 'Описание статьи',
    keywords: 'ключевое слово, другое ключевое слово',
);
echo $page->createHeader();
echo'<main class="wrapper-base-page mt5">';
Текст статьи, картинки и так далее
echo'</main>';
echo $page->createFooter();
?>


Весь контент страницы находится между createHeader() и createFooter().

Если посередине нужна PHP-вставка, разрываем echo-блок:

';
... PHP-код ...
echo'

Оформление статей

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

Пример

Можно кликнуть на источник и попасть именно на ту странцу откуда скачана фотография