На некоторых сайтах для размещения различных кодов (счетчиков, информеров, пикеслей ретаргетинга, кодов Google Analytics и Яндекс.Метрики и т.д.) предусмотрены отдельные блоки для вставки.
Данные блоки позволяют буквально в несколько кликов вставить нужный код, без правки шаблонов сайта.
Рассмотрим, как они работают.
Шаг 1
Раскройте меню «Настройки» и перейдите к пункту «Настройки сайта».
Шаг 2
На открывшейся странице в разделе «Блоки сайта» слева вы сможете найти блоки «Блок с кодом head» и «Блок с кодом body».
Обратите внимание!
Шаг 3
Теперь, если вам необходимо вставить какой-либо код в тег head, просто нажмите на данный блок в списке, вставьте в открывшемся окне код и сохраните изменения (аналогично с тегом body).
Примеры:
У меня в «Настройках сайта» нет таких блоков. Что делать?
Не все сайты предусматривают описанные выше блоки. Если у вас в системе управления их нет, то вставить код вы можете следующим образом:
В открывшемся списке шаблонов выберите шаблон «Главная.Верх»;
Раздел «Файлы шаблона» панели администрирования магазина:
В этом разделе вы можете загружать файлы для своих шаблонов. Размещайте файлы соответственно их типам.
Файлы будут доступны через функцию asset в шаблонизаторе
Для функции asset в шаблонизаторе, нужно указывать параметр без пути к шаблону, например:
Вместо /template/4776/63eb43fec8d3766b6bec/css/main.css нужно указывать просто /css/main.css
В HTML-визуальном редакторе
Двойной клик на файле позволит отредактировать его, а также внизу под полем с выводом дерева файлов, вы можете посмотреть прямой путь до загруженных файлов
Встроенный шаблонизатор
Структура шаблонаШаблон layout (слой)
Дочерний шаблон 1, использующий layout
Содержимое блоков title и body в шаблоне layout будет заменено на содержимое блоков в дочернем шаблоне
Дочерний шаблон 2, использующий layout
Содержимое блока body в шаблоне layout будет заменено на содержимое блока в дочернем шаблоне, блок title не будет заменен, его содержимое будет соответствовать содержимому в layout
Комментарии
Оператор SET
Вывод на экран
Условие «если» и «иначе»:
Условие «если», «иначе если» и «иначе»:
Условие «если», множественное «иначе если» и «иначе»:
Цикл ключ-значение
Функции
Функция
Параметры
Описание
array
Создает массив из аргументов функции
Пример:
Результат:
Возвращает массив, заполненный числами по порядку от A до B
Пример:
Результат:
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Возвращает случайное число от A до B
Пример:
Результат:
Возвращает длину аргумента variable
Пример:
Результат:
Возвращает тип аргумента variable
Пример:
Результат:
Пример:
Результат:
Пример:
Результат:
Пример:
Результат:
Пример:
Результат:
Разбивает массив array на несколько массивов. Количество элементов в массивах будет равно числу parts
Пример:
batch([1, 2, 3, 4, 5, 6, 7, 8], 3)
Результат:
Пример:
default(‘hello’, ‘no hello’)
Результат:
Пример:
Результат:
Собирает из массива array строку, соединяя элементы массива строкой glue
Пример:
Результат:
Добавляет значение value в конец массива array
Пример:
push([‘aaa’, ‘bbb’, ‘ccc’], ‘ddd’)
Результат:
Число A в степени B
Пример:
Результат:
Синус числа number
Пример:
Результат:
Косинус числа number
Пример:
Результат:
Тангенс числа number
Пример:
Результат:
Квадратный корень числа number
Пример:
Результат:
Возвращает минимальное значение из массива array
Пример:
Результат:
Возвращает максимальное значение из массива array
Пример:
Результат:
Модуль числа number
Пример:
Результат:
Форматирует дату date в формат format
Пример:
date(‘2013-05-01 23:59:59’, ‘d.m.Y H:i:s’)
Результат:
Возвращает полный сформированный путь до статического файла. В разделе файлов шаблона вам необходимо открыть любой файл из раздела «Файлы». В параметр file вместо полного пути до файла /template/4776/63eb43fec8d3766b6bec/css/main.css нужно указывать просто /css/main.css
Объект system
Метод
Параметры
Описание
dataBlockTkey, itemData
Возвращает относительный путь к статье блога с ключом key
Зависит от настроек «Раздел блога» (по умолчанию «blog») и «Раздел записи блога»(по умолчанию «article»)
Пример:
Результат:
Возвращает относительный путь к начальной странице блога
Зависит от настройки «Раздел блога» (по умолчанию «blog»)
Пример:
Результат:
По переданным параметрам строит соответствующую ссылку на список продуктов.
Параметры указываются следующим образом:
затем сортировка sort
Все параметры необязательны
Пример:
Результат:
По переданным параметрам строит ссылку на страницу продукта.
Все параметры, кроме артикула макета, необязательны
Пример:
Результат:
Возвращает нумерованный список массивов с информацией о баннерах сайта
Баннеры настраиваются на странице настроек «Ротатор»
Массив с информацией имеет вид:
Пример:
Результат:
Возвращает объект блока с ключом blockKey
Для отображения содержимого блока необходимо передать данной функции параметр «raw»
Пример:
Результат:
Выведет на странице блок поиска
Для текущей страницы возвращает массив «хлебных крошек», которые содержат следующие элементы:
Пример:
На странице «/catalog/group/wear_man»:
Результат:
Главная, Одежда, Мужская
На странице группы товаров возвращает ключ текущей группы
Пример:
На странице «catalog/group/wear_woman»:
Результат:
Пример:
Результат:
Возвращает идентификатор корневой страницы каталога
Пример:
Результат:
Пример:
На странице «/catalog/sort/new/justmarried»:
Результат:
На странице списка товаров, в случае фильтрации по определенному типу товаров, выводит идентификатор типа
Пример:
На странице «/catalog/type/hoodie/child»:
Результат:
На странице списка товаров, в случае фильтрации по определенному виду товаров, выводит идентификатор вида
Пример:
На странице «/catalog/view/wear/child»:
Результат:
На странице списка макетов определенной категории, выводит идентификатор категории
Пример:
На странице «/catalog/view/wear/muz»:
Результат:
Возвращает название категории по идентификатору categoryKey
Пример:
Результат:
Возвращает название текущей категории
Если пользователь находится не на странице категории или подкатегории, возвращает пустую строку
Пример:
На странице «/catalog/muz»:
Результат:
Возвращает название текущей группы товаров
Если пользователь находится не на странице, принадлежащей к определенной группе продуктов, возвращает пустую строку
Пример:
На странице «/catalog/group/headwear_caps»:
Результат:
Возвращает название текущего макета
Если пользователь находится не на странице определенного макета, возвращает пустую строку
Пример:
На странице «/product/hat/173229»:
Результат:
Возвращает название типа текущего продукта
Если пользователь находится не на странице, принадлежащей к определенному типу продуктов, возвращает пустую строку
Пример:
На странице «/product/hat/173229»:
На странице «/catalog/type/hat»:
Результат:
Возвращает название текущей подкатегории
Если пользователь находится не на странице подкатегории, возвращает пустую строку
Пример:
На странице «/catalog/child/funny_pictures»:
Результат:
Возвращает URL-адрес текущей страницы
Пример:
На странице «/catalog/stud»:
Результат:
Возвращает название текущего вида товаров
Если пользователь находится не на странице, принадлежащей к определенному виду продуктов, возвращает пустую строку
Е сли в каком-либо месте html-документа нужно отобразить текст, фон или другой элемент иначе, то это нужно прописывать в значениях атрибутов соответствующего тега. Т.е. значения тега BODY являются общими для всех элементов документа. И для изменения оформления какого-то одного достаточно указать это в его атрибутах.
Я пока не рассматриваю каскадные таблицы стилей (CSS), с помощью которых также можно задать отображение html-страницы. Кроме того, в этом разделе я не буду рассказывать об абсолютно всех атрибутах тега BODY. Я расскажу только об основных.
И так, наиболее часто используемые атрибуты тега BODY:
bgcolor — цвет фона html-страницы. По-умолчанию, браузер заполняет фон сплошным цветом (в настройках по дефолту — белым) или в зависимости от настроек пользователя этого браузера. Допустим, если вам нужен html-документ с чёрным фоном, то нужно написать так:
Добрый! Классный сайт у вас.правда я только про тег body прочитала. Надо будет попробовать замутить страничку) Целый день читала про енто дело, а тут еду с работы и натыкаюсь на этот сайт. Очень доступно написано Это я как истинный чайник говорю. Спасибо что создали такое
З десь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами.
С писок цветов из Web-палитры ты найдёшь на странице Приложения. Там же ты найдёшь и шестнадцетиричные (hex) значения этих цветов (при использовании шестнадцетиричных (hex) значений перед числом нужно ставить символ #). В hex-значении цвета используется модель RGB: первые две цифры задают яркость красной (Red), вторые две цифры — зелёной (Green), а последние две цифры — синей (Blue) составляющей цвета.
Д ля того, чтобы использовать цвета, не входящие в Web-палитру, нужно знать их hex-значение. Я для этого использую программу, которую можно взять с моего сайта: ColorT Final.
С представлением цвета в HTML разобрались, теперь продолжим разговор об атрибутах тега BODY.
Е сли html-страница и картинка logo.jpg находятся в одном каталоге (папке), то можно записать так:
Е сли logo.jpg находится в подкаталоге images каталога с html-страницей (т.е. в папке images, которая находится в каталоге с html-страницей), то можно записать так:
О бычно в качестве фона используют небольшой и простой рисунок, так называемую текстуру, который многократно выводится на экран, заполняя всё окно. Поскольку размер такого изображения небольшой, то создание фона происходит очень быстро. Думаю с этим атрибутом всё понятно, перейдём к следующим.
text — устанавливает цвет текста html-документа. Например, сделаем текст зелёным:
С ледующие атрибуты относятся к представлению вида ссылок на странице:
link — цвет ещё неиспользованной (непросмотренной) ссылки (по умолчанию синий).
vlink — цвет уже использованной (просмотренной) ссылки.
alink — цвет гиперссылок при наведении на них курсора мыши.
Д опустим, нам нужно, чтобы цвет ещё неиспользованных ссылок был красным (#FF0000), а уже нажатых — синим (#0000FF). Сделать это можно так:
Д а, я думаю, ты уже заметил, что атрибут в теге (не только BODY, но и в любом другом) может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по-умолчанию. В следующем примере мы создадим html-страницу с чёрным фоном, зелёным текстом, неиспользованные ссылки — красные, а посещённые — синие. Весь этот ужас можно создать так:
Н абери этот html-код в любом текстовом редакторе или визуальном. Набирай весь код вручную. Между тегами и вставь текст, какой захочёшь, сохрани этот файл под любым именем (латинскими буквами или цифрами), но обязательно с расширением html (т. е., например, primer.html). А затем открой его в браузере и наслаждайся открывшейся тебе авангардистской картиной.
Примечание. Не забывай — я ставлю после скобки НЕ НАДО.
П омимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов (их можно употреблять в разных тегах, они общие для них всех). О них ты узнаешь в следующих частях этого раздела. Пока же настоятельно рекомендую поэкспериментировать с полученными знаниями. Только на практике ты увидишь результаты этих знаний и поймёшь, как это работает. И только поняв и запомнив, как атрибуты тега BODY используются при создании html-страницы, переходи к следующей главе, в которой мы поговорим о форматировании текста в HTML.
Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры HTML документа. Для тех, кто НЕ знаком, я покажу правильную (валидную) структуру HTML веб-документа, в том числе для сайта WordPress.
Общая правильная структура HTML документа
В первую очередь, без долгих предисловий – общая структура любого HTML документа должна быть такой:
Структура HTML документа
Если убрать пояснения, которые я показывал после каждого тега, то простая структура HTML документа выглядит так
Тип текущего документа DTD
Тип текущего документа (Document Type Definition, DTD) необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь язык HTML существует в нескольких версиях.
Кроме этого есть другие языки разметки отличные от HTML, например XHTML.
Примечание: XHTML это EXtensible HyperText Markup Language, что переводим, как расширенный язык разметки гипертекста.
Понятие тега в HTML
Вы обратили внимание, что вся структура HTML документа задается определенными тегами – некими словами, заключенными в угловые скобки.
Слово, заключенное в угловые скобки HTML документа называется тегом. Каждый тег имеет свой смысл, определенный правилами разметки.
Теги заголовков и подзаголовков h1-h6
Теги h1—h6 имеют подчиненную зависимость, нижний уровень этой подчинённости абзац.
Важно отметить, что нарушение подчиненной зависимости тегов h1-h6-p не нарушит отображение и валидность документа, а лишь ухудшит его оптимизацию для поисковых систем.
Пример развитой структуры HTML документа
Приведу академический пример более развитой структуры HTML документа:
Структура HTML 5
В версии HTML 5 должна быть такая структура документа:
Это декларация показывает, что этот документ в HTML5 ;
это корневой элемент HTML страницы;
Элемент, с мета-тегами о документе;
Этот элемент определяет заголовок для документа;
Этот элемент содержит видимое содержимое страницы;
Элемент определяет большой заголовок
Элемент определяет абзац.
Работают в html5 теги h2 — h6
Все теги двойные. Начальный тег называется открывающим тегом, а конечный тег — закрывающим тегом.
HTML разметка на сайте WordPress
Несмотря на то, что скрипт WordPress написан на php, все файлы сайта, а вернее все файлы рабочего шаблона сайта, имеют html разметку. Смотрим пример, на файле header.php шаблона Twenty Seventeen:
Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа:
Как посмотреть HTML код страницы сайта WordPress
То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело body страницы.
Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:
Открыть страницу в браузере;
Перейти в английский шрифт клавиатуры;
Нажать следующие кнопки:
Может быть, вы пока не знаете, зачем это нужно. Поверьте, это будет нужно не раз, для анализа своего сайта и возможно сайтов конкурентов.
Вывод
В заключении хотелось сделать вывод, но на ум приходит только мысль, что статья получилось, совсем для начинающих. Между примером кода статьи и примерами из реальных сайтов, на первый, взгляд большая разница. Однако у всех файлов одинаковая структура HTML документа и крайне важно эту структуру не нарушать при работе с сайтом.
В статье использованы инструменты обучения HTML : Tryit Editor v3.5
От автора: разницу между тегами html и body очень легко не заметить. Кажется, что этот момент относится к тривиальным вещам. Должен признаться, что у меня была очень плохая привычка применять все глобальные стили к тегу body, а когда этого было недостаточно, то я, не задумываясь, переключался на тег html.
Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.
Как элементы HTML и body связаны друг с другом
Давайте рассмотрим стандартную структуру базового HTML документа:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В спецификации html определяется как корневой элемент документа, и мы можем это четко видеть из вышеприведенного примера: элемент html находится на самом верхнем уровне по сравнению с другими элементами. Выше подниматься уже некуда, т.е. это самый первый элемент, от которого могут наследоваться стили.
Далее, прямо после тега html, идут только два элемента: head и body. Фактически, в спецификации body прямо противопоставлен элементу head, поскольку имеются всего лишь два элемента, которые требуется различать на данном уровне. Итак, получается, что html – это корневой элемент документа, в котором содержится элемент body, являющийся его потомком. В CSS даже есть селектор :root. Следующие два селектора являются равнозначными:
За исключением того, что селектор :root обладает более высокой специфичностью: (0, 0, 1, 0) против (0, 0, 0, 1).
Поэтому нам следует всегда задавать глобальные стили для html, правильно?
Очень заманчиво предполагать, что любые стили, которые должны быть унаследованы на протяжении всего документа, следует задавать прямо для html, потому что это корневой элемент документа. Элемент html превосходит элемент body по иерархии, поэтому было бы логично, чтобы именно для него задавались все глобальные стили.
Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:
В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство):
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
bgcolor — background, background-color
Учитывая то, что данные CSS свойства произошли из инлайн атрибутов, которые были созданы для элемента body, было бы логично применять их в CSS прямо для body, а не для html.
Поэтому нам следует всегда задавать глобальные стили для body, правильно?
Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций.
Работа с единицами измерения rem
Единица измерения rem является относительной по отношению к корню документа. Например, когда мы пишем что-то наподобие этого:
У Джонатана Снука (Jonathan Snook) есть классическая статья, которая замечательно демонстрируется, как установка значения свойства font-size для html в процентах может быть использована в качестве сброса стилей при работе с единицей измерения rem.
Причудливое свойство background-color
Есть одна странная вещь в CSS, когда заданный фоновый цвет (с помощью свойства background-color) для элемента body заполняет всю область просмотра, даже если размеры самого элемента при этом меньше. Так происходит до тех пор, пока свойство background-color не будет задано для элемента html.
Если нужно, чтобы фоновый цвет заливал всю область просмотра, то лучше всего сразу задать его для элемента html.
Заключение
Я надеюсь, что это пролило немного света на ключевые различия между тегами html и body в CSS. Существуют также различия и в JavaScript. Например, вам не нужен селектор для данных элементов, чтобы найти их, т.к. в JavaScript html – это document.rootElement, а body – document.body.
Мы, конечно, можем описать более технические различия между этими двумя элементами, но цель этой статьи была в том, чтобы повысить наш уровень понимания сути этих элементов для принятия более осознанных решений при написании CSS. Есть ли у вас примеры того, где стоит вместо одного элемента использовать другой? Или, возможно, у вас есть другие критерии выбора элемента для стилизации. Напишите об этом в комментариях!
Автор: Geoff Graham
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
