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

Тег

Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:

Это полужирный шрифт.

Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)

Тег

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

Выделение курсивом

Тег

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

Это моноширинный шрифт.

Тег

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

Пример подчеркивания текста.

Теги и

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

Пример зачеркнутого текста.

В настоящее время тег поддерживается не всеми браузерами, поэтому пока рекомендуется использовать в сочетании с тегом . А именно, внутрь тега-контейнера можно вложить пару тегов

....

Тег

Тег выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать или теги заголовков, например,

Шрифт большего размера.

Тег

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

Шрифт меньшего размера.

Тег

Тег _{сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:}

Пример шрифта для _{нижнего} индекса.

Тег

Тег ^{сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:}

Пример шрифта для ^{верхнего} индекса.

Тег

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

Тег

Тег-контейнер является аналогом тега уровня блока

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

Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.

Рис. 1.3. Использование вложенных тегов форматирования текста

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

Это полужирный шрифт.

Это курсив.

А здесь текст полужирный и курсивный

Тег

Тег указывает параметры шрифта. Он относится к тегам физического форматирования уровня текста.

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

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

Тег относится к последовательным элементам, поэтому не может включать в себя элементы уровня блока, например,

Или

.

Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.

Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию.

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

Приведем пример использования параметра FACE:

Пример задания названия шрифта.

На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д.

Рис. 1.4. Отображение примера браузером Netscape

Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3.

Настройки размеров шрифта, используемых по умолчанию, а также величины абсолютного изменения размеров шрифта, зависят от браузеров. На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты, используемые по умолчанию.

Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега .

Примечание

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

Приведем пример, в котором использованы различные способы назначения размеров шрифтов. Отображение примера показано на рис. 1.6.

Рис. 1.5. Окно настройки параметров шрифтов браузера Netscape

Рис. 1.6. Назначение размеров шрифтов

Шрифт размера 1

Шрифт размера 2

Шрифт размера 3

Шрифт размера 4

Шрифт размера 5

Шрифт размера 6

Шрифт размера 7

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

Текст зеленого цвета


Текст красного цвета

Тег

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

Примечание

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

Заметим, что для тега не существует закрывающего тега.

В качестве параметров могут использоваться точно такие же параметры, что и для тега , а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны.

Примечание

Браузер Netscape не допускает применение параметра FACE тега .

Приведем пример использования тега .

Текст, записанный шрифтом по умолчанию.

Шрифт размера 2.

Шрифт размера 4.

Текст после таблицы

В приведенном примере дважды переопределяется размер шрифта, используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается равным 2, далее - 4. Обратите внимание на отображение данного примера (рис. 1.7). Видно, что для таблиц назначение тега не действует. Это характерно для многих браузеров, хотя формально нарушает идею применения тега.

Рис. 1.7. Отображение примера с тегом (браузером Netscape)

Текст внутри ячейки таблицы

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Html-теги для текста – это теги, которые меняют оформление заключенного в них контента.

Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список.

Так же и теги. Они указывают, какой стиль должен быть у элемента.

Теги и элементы

Каждый тег имеет вид:

<Название тега>

Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега:

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

• Header

• Блок
• курсив

Некоторые элементы не требуют закрытия

• 

• ---

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

Знает, для чего предназначен каждый тег и как поведет себя «обернутое» в элемент содержимое.

Парадигма оформления современных сайтов

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

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

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

Валидация страницы

При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа:

1. Strict. Не включает теги font, и пр. Это «строгий» набор правил для верстки на HTML 4.
2. Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги.
3. HTML. Поддержка последнего стандарта.

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

Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты.

Теги форматирования текста html

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

Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта.

• - Жирное выделение.
  

• - Установка цвета и шрифта по умолчанию для страницы. Не рекомендуется к использованию.
• - Увеличивает размер шрифта на одну условную единицу. Всего их семь. Стандартный не оформленный символ имеет размер 3. Вложение тегов будет увеличить на дополнительную единицу на каждом уровне. В CSS аналогом является свойство font-size.

• - Логическая метка текста как цитаты или сноски. Символы оформляются курсивом, но это можно изменить в таблице стилей.

• - Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).

• - Необходимо заключать в этот тег первое упоминание термина в статье. Отображается курсивом во всех браузерах.

• - Используется для привлечения внимания к фрагменту контента. Выделяется курсивом. Аналог CSS font-style.
• - Самый запрещенный тег для текста в современной разметке. Браузеры его еще поддерживают, так как многие встроенные редакторы используют его для указания размера и шрифта. Но при ручной верстке не рекомендуем применять такой способ форматирования. Лучше пользоваться свойствами CSS font-size и color – аналоги написания.

• -

  - Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок H1 имеет самый большой шрифт, h6 - самый маленький.

• - Курсив. Не осуждается последним стандартом, но рекомендуется использовать font-style.
• - Обозначает моноширинным шрифтом имитацию напечатанного на клавиатуре текста.

• - Логическое выделение контента. Дополнительно Chrome и FireFox подсвечивают его желтым фоном.

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

• Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>

• - Выделение цитат, текст отображается в кавычках.

• - Отображает символы как на результат выполнения программы на экран. Используется моноширинный шрифт.

• - Выполняет действия, обратные элементу big, уменьшая размер символов на условную единицу.

• - Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.

• - Жирное начертание. Логически акцентирует текст.
• _{- Показывает символ в нижнем индексе. Размещается ниже стандартной базовой линии, на которой располагаются символы, и имеет уменьшенный размер. В CSS используется vertical-align.}

• - При выводе кода компьютерной программы все переменные заключаются в этот тег. Выделяет их курсивом.

• - Показывает текст так, как он записан в коде страницы. Аналогично pre.</li> </ul><h2>Специальные символы</h2> <p>Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице.</p> <p>Также в HTML 5 появились деньги, карточные масти и знаки гороскопа.</p> <p>Используйте в разметке Html текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS.</p> <p>В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем.</p> <p>Здравствуйте, уважаемые друзья! Ну, что вы готовы продолжать изучение нелегкого с первого взгляда языка HTML. Думаю, что «да».</p> <p>Потому что в итоге, после нескольких уроков по изучению основ построения сайта своими руками, вы начинаете ориентироваться в этом непростом лабиринте знаков, тегов, атрибутов и так далее.</p> <p>Материал сегодняшней темы я посвятил очень важному элементу оформлению текстов — html теги форматирования текста.</p> <p>Совсем недавно мы познакомились с тем, как при создании сайта необходимо использовать . Cегодня мы подробно рассмотрим, каким образом нужно проводить форматирование и редактирование текста в html.</p> <p>HTML форматирование текста, нам обязательно понадобится, именно тогда, когда вы на собственном сайте, постараетесь обратить внимание своих пользователей на какие-либо важные моменты.</p> <p>Что-то подчеркнуть, выделить, исправить, в конце концов. То есть, вариантов использования html тегов форматирования текстов масса, и в любом случае они вам будут нужны. Вернее, умение пользоваться тегами html.</p> <p>Напомню вам о том, что такое HTML теги. Теги - это специальные пометки в html разметке документа, которыми обозначается начало и конец элементов html документа.</p> <p>Элементы html документа могут не содержать никакого текста, в этом случае применяется, например, тег перевода строк <br>, без указания закрывающего тега. Либо элементы html документа, могут содержать атрибуты, которые указывают на какое-либо свойство текста, например, теги html font, указывают на размеры шрифта.</p> <p>Сегодня мы с вами рассмотрим основные html теги форматирования текста, при помощи которых производится создание и редактирование текста в html.</p> <h2>Теги форматирования текста в html документе: классификация</h2> <h3>HTML теги разделения на абзац и переноса строк</h3> <p><a href="/routers-and-modems/html-osnovnye-tegi-osnovnye-html-tegi/">HTML теги</a> абзаца в тексте парные , но закрывающий тег не является обязательным. Для того, чтобы сделать в <a href="/mobile-operators/otkryvat-novye-html-stranicy-v-kak-sdelat-chtoby-ssylki-otkryvalis/">html новый</a> абзац, достаточно поместить перед началом абзаца <p>В этом случае абзацы текста будут разделены между собой пустой строкой.</p> <p>Тег принудительного перевода строк <br>. После него текст начинается с <a href="/game/prozrachnye-znaki-v-instagram-kak-v-instagrame-pisat-s/">новой строки</a>.</p> <p>Посмотрим <a href="/social-network/vse-tegi-html-s-opisaniem-i-primerami-osnovnye-tegi-html/">пример html</a> кода форматирования текста по абзацам и выравнивания по сторонам.</p> <p><b><br><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355179979_1-1formatirovanie-html.jpg' width="100%" loading=lazy></b></p> <p>А вот так, этот html документ будет выглядеть в браузере</p> <p><img src='https://i2.wp.com/delaydengi.com/uploads/posts/2012-12/1355180026_1-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>HTML теги для выделения текста курсивом</h3> <p>Эта группа тегов является парной.</p> <p>Теги <cite></cite> применяются при логическом выделении названий: книги, статьи, цитирование.</p> <p>Тегами <dfn></dfn> выделяются какие-либо определения. Тегами <em></em> и <i></i>, как правило, выделяются наиболее важные фрагменты в тексте.</p> <p>Пример <a href="/windows/v-vorde-sdelat-probel-bez-razryva-ispolzovanie-probelnyh/">html кода</a> для выделения текстов курсивом</p> <p><img src='https://i2.wp.com/delaydengi.com/uploads/posts/2012-12/1355180019_2-1formatirovanie-html.jpg' height="492" width="450" loading=lazy></p> <p>В браузере наш текст будет выглядеть следующим образом.</p> <p><img src='https://i0.wp.com/delaydengi.com/uploads/posts/2012-12/1355179958_2-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>Теги, отвечающие за жирный шрифт html</h3> <p>Теги и <strong></strong>, также являются парными тегами. Оба тега используются одинаково, но специалисты рекомендуют применять тег <strong>.</p> <p>В html документе это будет выглядеть следующим образом</p> <p><img src='https://i2.wp.com/delaydengi.com/uploads/posts/2012-12/1355179989_3-1formatirovanie-html.jpg' width="100%" loading=lazy></p> <p>И, соответственно, в браузере вы увидите текст, выделенный жирным шрифтом.</p> <p><img src='https://i2.wp.com/delaydengi.com/uploads/posts/2012-12/1355180027_3-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>Теги, отвечающие за подчеркивание текста html</h3> <p>Они как и теги жирного шрифта, являются парными. Теги <ins></ins> и <u></u>, и вновь специалисты рекомендуют для подчеркивания текста использовать один из тегов, а именно: <u></p> <p>Пример html кода для подчеркнутого текста</p> <p><img src='https://i2.wp.com/delaydengi.com/uploads/posts/2012-12/1355180015_4-1formatirovanie-html.jpg' width="100%" loading=lazy></p> <p>Вот, как выглядит конечный результат в браузере.</p> <p><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355179991_4-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>HTML теги для создания моноширного шрифта</h3> <p>Напомню вам, что моноширный шрифт - это вид шрифта, у которого все знаки одинаковой ширины.</p> <p>Для форматирования в html документе моноширного шрифта применяются парные теги: <kbd></kbd>; <samp></samp> и <tt></tt></p> <p>Рассмотрим форматирование моноширного текста на примере:</p> <p><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355180001_5-1formatirovanie-html.jpg' height="471" width="450" loading=lazy></p> <p>И, соответственно в вашем браузере будет наблюдаться следующая картинка</p> <p><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355179996_5-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>Теги для вывода индексов (верхних и нижних) в тексте</h3> <p>Для вывода различных математических, физических или химических значений и формул, очень часто мы сталкиваемся с необходимостью указания индекса, например, формула воды H 2 O. И, если в <a href="/pendrive-and-hdd/tekstovyi-redaktor-word-dlya-android-podborka-tekstovyh-redaktorov-na/">редакторе Word</a> нам в помощь панель инструментов, то при составлении <a href="/problems/kak-tekstovyi-dokument-perevesti-html/">текстового html</a> документа потребуются теги форматирования.</p> <p>Тегами  мы выведем индекс шрифтом меньшего размера и ниже уровня строки. Тегами  мы выведем индекс шрифтом меньшего размера, наоборот, выше уровня строки.</p> <p>Например, код:</p> <p><img src='https://i2.wp.com/delaydengi.com/uploads/posts/2012-12/1355179975_6-1formatirovanie-html.jpg' width="100%" loading=lazy></p> <p>Вывод на экране браузера</p> <p><img src='https://i0.wp.com/delaydengi.com/uploads/posts/2012-12/1355179972_6-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>Тег html font и его основные параметры</h3> <p>Теги <font></font> являются парными и в них заключаются основные <a href="/windows/1s-pole-html-dokumenta-peredat-parametry-upravlyaemye-formy-pole-html-dokumenta-i/">параметры html</a> шрифта текста:</p> <p><b>Название шрифта: </b> face. Названий может применяться, через запятую, несколько. При этом, если указанный по порядку шрифт не найден на ПК пользователя, браузер осуществляет поиск следующего.</p> <p><b>Размер шрифта </b>: size. Указывается от одного до 7-ми в условных единицах. <a href="/android/kirillicheskie-shrifty-ttf-nestandartnye-shrifty-sredstvami-html-i-css-v-internet/">HTML шрифт</a> текста по умолчанию равен 3.</p> <p><b>Цвет шрифта в </b><b>html </b>: color. По умолчанию всегда чёрный. Для ввода цвета шрифта в html документ, существует два варианта:</p> <ul><li>По имени (названию) цвета. Например: color=»blaсk» - черный цвет.</li> <li>По коду (<a href="/monitors/shestnadcaterichnyi-kod-shestnadcaterichnaya-numeraciya-i/">шестнадцатеричный код</a> цвета). Код начинается с символа «#» и включает в себя шесть цифр, например<b>: </b><b>#000000 - черный цвет. </b></li> </ul><p>Таблица <a href="/internet/222-cvet-html-cvetovye-kody-v-minecraft/">цветов html</a> и кодов, как пример, вот здесь: goo.gl/1i4vZ. Вы можете набрать в поисковике запрос «таблицы цветов html» и выбрать таблицу, которая вам понравится.</p> <p>Пример применения тега html font</p> <p><img src='https://i0.wp.com/delaydengi.com/uploads/posts/2012-12/1355179963_7-1formatirovanie-html.jpg' width="100%" loading=lazy></p> <p>Следующий текст мы видим в окне браузера, и радуемся тому, что у нас всё получилось.</p> <p><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355180028_7-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <h3>Как совместно использовать html теги форматирования текста</h3> <p>Ну, вот, например, понадобилось вам создать текст <b>жирным </b> <b>красным <i>курсивом </i> </b>. Для этой операции мы должны попробовать применить теги форматирования: strong, font и em.</p> <p>А как это сделать? Первое важное условие <a href="/photo-and-video/kak-privyazat-aifon-k-aifonu-sovety-i-rekomendacii-vse-o-sovmestnom/">совместного использования</a> тегов форматирования - соблюдение порядка вложенности html тегов. <a href="/mobile-internet/v-kakom-godu-otkryli-radiosvyaz-kto-pervym-izobrel-radio/">Открытый первым</a> тег, закрывается последним.</p> <p>Пример последовательности:</p> <ul><li>Текст выделяем красным</li> <li>Помещаем текст в тег html курсива</li> <li>И, наконец, всё заключаем в теги жирного шрифта</li> </ul><p><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355179981_8-1formatirovanie-html.jpg' width="100%" loading=lazy></p> <p>В итоге, в окне браузера мы видим то, что сделали</p> <p><img src='https://i1.wp.com/delaydengi.com/uploads/posts/2012-12/1355180028_8-2formatirovanie-html.jpg' width="100%" loading=lazy></p> <p>На этом, пожалуй, и закончим работу с основными html тегами форматирования текста <a href="/android/html-tegi-v-tablichnom-dokumente-1-spravochnik-tegov-html/">html документов</a>. Надеюсь, что вам теперь понятен метод работы с тегами html и этот материал не окажется лишним, при создании вами своего сайта.</p> <p>Если Вы пользуйтесь <a href="/problems/cp-avtomatizirovannye-sistemy-upravleniya-i-promyshlennaya-bezopasnost/">текстовым редактором</a>, например, таким как <a href="/different/kak-polzovatsya-programmoi-word-video-uroki-microsoft-word-dlya/">Microsoft Word</a> или <a href="/pendrive-and-hdd/gde-skachat-microsoft-excel-ustanovka-programmy-microsoft-excel-na-kompyuter/">Microsoft Excel</a>, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.</p> <h2>Полужирный или жирный текст</h2> <p>Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b><b>...</b> </b> и <b><strong>...</strong> </b>. Все, что находится в тегах <b>...</b> и <strong>...</strong> отображается в HTML жирным текстом (полужирным), как показано ниже:</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример выделения <a href="/audio-device/kak-sdelat-v-html-kursivnyi-shrift-u-teksta-zhirnyi-tekst-css-kak-ubrat/">жирным текста</a> и шрифта в HTML</title> </head> <body> <p>С помощью тега b делаем <b>жирный шрифт</b>.</p> <p>С помощью <a href="/monitors/teg-strong-v-tekstah-chto-nuzhno-znat-kopiraiteru-o-poluzhirnom/">тега strong</a> делаем <strong>текст жирным</strong>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Курсив - наклонный текст или шрифт</h2> <p>Сделать в HTML курсивом текст можно с помощь двух тегов <b><i>...</i> </b> и <b><em>...</em> </b>. Все, что находится в тегах курсива <i>...</i> и <em>...</em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример выделения курсивом текста и шрифта в HTML</title> </head> <body> <p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p> <p>С помощью тега em делаем <em>текст курсивом</em>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Подчеркнутый текст</h2> <p>Подчеркнуть текст в HTML можно с помощь тега <b><u>...</u> </b> <u>...</u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример подчеркивания текста в HTML</title> </head> <body> <p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Зачеркнутый текст</h2> <p>Зачеркнуть текст в HTML можно с помощь тега <b><strike>...</strike> </b>. Все, что находится внутри тега <strike>...</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример зачеркивания текста в HTML</title> </head> <body> <p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Моноширинный шрифт</h2> <p>Содержимое элемента <b><tt>...</tt> </b> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что <a href="/application/nik-oreo-krasivymi-bukvami-znaki-valyuty-raznyh-stran-masti-igralnyh-kart/">разные буквы</a> имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример моноширинного шрифта в HTML</title> </head> <body> <p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Верхний индекс</h2> <p>Содержимое тега <b>^... </b> отображается в HTML в верхнем индексе. Тег верхнего индекса <sup> в HTML имеет тот же <a href="/monitors/izmenit-shrift-v-kontakte-kak-izmenit-razmer-shrifta-v-kontakte/">размер шрифта</a>, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа.</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример верхнего индекса в HTML</title> </head> <body> <p>С помощью тега sup делаем верхний^индекс или степень числа, например, 2³.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Нижний индекс</h2> <p>Содержимое тега <b>_... </b> отображается в HTML в нижнем индексе. Тег нижнего индекса <sub> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример нижнего индекса в HTML</title> </head> <body> <p>С помощью тега sub делаем нижний_индекс.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Вставленный текст</h2> <p>Содержимое внутри тега <b><ins>...</ins> </b> отображается в HTML как вставленный текст.</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример вставленного текста в HTML</title> </head> <body> <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Удаленный текст</h2> <p>Содержимое внутри тега <b><del>...</del> </b> отображается в HTML как удаленный текст.</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример удаленного текста в HTML</title> </head> <body> <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Большой текст</h2> <p>Содержимое тега <b><big>...</big> </b> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример большого текста в HTML</title> </head> <body> <p>С помощью тега big делаем <big>текст больше</big>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Маленький текст</h2> <p>Содержимое внутри тега <b><small>...</small> </b> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:</p> <h3>Пример</h3> <!DOCTYPE html> <html> <head> <title>Пример маленького текста в HTML</title> </head> <body> <p>С помощью тега small делаем <small>текст меньше</small>.</p> </body> </html> <p>Получим следующий результат:</p> <h2>Группировка элементов и содержимого страницы в HTML</h2> <p>Элементы <b><div> </b> и <b><span> </b> позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.</p> <p>Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).</p> <h3>Пример с тегом <div></h3> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="menu" style="text-align: center;"> ГЛАВНАЯ / О НАС / КОНТАКТЫ </div> <div id="content" style="text-align: left; color: #fff; background-color: #00BCD4;"> <h1>Название статьи</h1> <p>Содержимое страницы...</p> </div> </body> </html> <p>Получим следующий результат:</p> <br><img src='https://i2.wp.com/proglang.su/assets/img/html/formatting-grouping-content-div.png' width="100%" loading=lazy><p>С другой стороны, элемент <span> может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент <span> следующим образом:</p> <h3>Пример с тегом <span></h3> <!DOCTYPE html> <html> <head> <title>Пример группировки элементов и текста в HTML</title> </head> <body> <p>Группировки элементов с помощью <span style="color: blue;">тега span</span>.</p> </body> </html> <p>Получим следующий результат:</p> <p>Эти теги обычно используются с CSS , чтобы Вы могли задать стиль к секции страницы.</p> <p>Доброго времени суток, уважаемые подписчики.</p> <p>Этот урок мы посветим <b>форматированию текста в html </b>. Рассмотрим, какие <b>теги </b> для этого применяются.</p> <p>Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css).</p> <p>Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в <a href="/audio-device/osnovnye-tegi-yazyka-html-osnovnye-html-tegi/">языке HTML</a> присутствуют.</p> <p>Итак, начнем.</p> <p>Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: </p> <p>Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью <a href="/social-network/kak-sdelat-krasivye-ramki-v-word-delaem-ramku-dlya-dokumenta-v-programme/">программы word</a>. Там две сказки известных авторов Братья Гримм.</p> <p>Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.</p> <p>Верю, что да.</p> <p>Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами <b><body> </body> </b> нашей заготовки.</p> <p>Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).</p> <p>Мы видим, что текст идет без заголовков, без абзацев, без отступов.</p> <p>Вот теперь и займемся непосредственным форматированием текста в языке HTML.</p> <p>Для выделения заголовков используются теги <b><H1> </b>текст<b></H1> </b>, <b><H2> </b>текст<b></H2> </b> и т.д. до <b><H6> </b>текcт<b></H6> </b>.</p> <p>Цифры после буквы H в теге применяются от 1 до 6.</p> <p>1 – самый крупный заголовок, 6 – самый маленький заголовок.</p> <p>Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <b><H1> </b>…<b><H1> </b>.</p> <p>XHTML </p> <p><H1>Лис и лошадь</H1> <H1>Лис и кошка</H1></p> <p>У тега <b><H1> </b> есть параметр <b>align </b> со значением <b>Left </b> — по левому краю, <b>right </b> — по правому и <b>center </b> — по центру.</p> <p>Давайте выровняем заголовок по центру. Для этого пропишем:</p> <p>XHTML </p> <p><H1 align="center"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><H1 align = "center" > </p> </td> </tr></table><p>Аналогично и второй заголовок.</p> <p>Сохраняем и смотрим в браузер.</p> <p>Заголовки стали по центру.</p> <p>Для упрощения работы можно одновременно держать <a href="/problems/sotnya-luchshih-poleznyh-programm-s-otkrytym-ishodnym-kodom-svobodnoe-i/">открытыми код</a> страницы в блокноте и браузере.</p> <p>А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).</p> <p>Самостоятельно попробуйте <a href="/windows/indikatory-byvayut-raznye---belye-sinie-krasnye-znachenie-nekotoryh/">разные значения</a> тега <b><H> </b>текст<b></H> </b>. И разные значения <b>align </b>. Выберите любой Вам понравившейся.</p> <p>Теперь разобьем наш текст на абзацы.</p> <p>Тег, который это делает — <b><p> </b>текст абзаца<b></p> </b>.</p> <p>Для этого находим начало абзацев и ставим там тег <b><p> </b>, а в конце абзаца закрываем его <b></p> </b>.</p> <p>Сохраняем <a href="/monitors/chto-takoe-netflix-v-tv-transkodirovanie-iz-ishodnogo-faila-v-nuzhnyi/">исходный файл</a> с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось.</p> <p>У тега <b><p> </b> есть параметр <b>align </b> с такими же значениями, что и у тегов <b><H> </b> — <b>left, right, center </b>. Его работа абсолютно такая же как и у тега <b><H> </b>.</p> <p>На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.</p> <p>Текст можно сделать жирным. При помощи тега <b>или <b><strong> </b> (кстати, это закрывающиеся теги. Рекомендуется <b><strong> </b>).</p> <p>Курсив — <b><i> </b> или <b><em> </b>, подчеркнутый <b><u> </b>, моноширинный <b><tt> </b> или <b><kbd> </b>.</p> <p>Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.</p> <p>Например:</p> <p>XHTML </p> <p><b> любой текст из сказки</b> <i>…………………………..</i> <u>………………………….</u> <kbd>……………………..</kbd></p> <p>Для изменения размера, цвета и шрифта <a href="/social-network/kak-zamenit-cvet-obekta-na-drugoi-v-fotoshope-na-otdelnom-uchastke-i-na-vsei/">отдельного участка</a> текста используйте тег <b><font> </b>, его параметры:</p> <p><b>fаce="arial" </b> – указывает названия шрифта.</p> <p><b>size="3" </b> — размер (значения от 1 до 7).</p> <p><b>color="******" </b> – цвет шрифта.</p> <p>****** — определенный код шрифта (например, 000000 – это черный).</p> <p>Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:</p> <p>XHTML </p> <p><font face="arial" size="6" color="red"> фрагмент текста сказки </font></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><font face = "arial" size = "6" color = "red"> <span> фрагмент текста сказки </span></font> </p> </td> </tr></table><p>Еще один немаловажный тег <b><br> </b> применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.</p> <p>Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в <a href="/photo-and-video/programmy-dlya-sistematizacii-fotografii-vash-otchet-po-dannomu-uroku/">данный урок</a>, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют.</p> <p>Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас <a href="/photo-and-video/chto-takoe-skorochtenie-poleznye-sovety-i-uprazhneniya-dlya-razvitiya-skorosti/">полезное упражнение</a>.</p> <p>Итак, теги:</p> <p><b><sub> </b> — подиндексы (H 2 O)</p> <p><b><sup> </b> — надиндекс (4 5)</p> <p><b><big> </b> — увеличивает шрифт на 1</p> <p><b><small> </b> — уменьшает шрифт на 1</p> <p><b><cite> </b> — цитаты, отображаются курсивом</p> <p><b><code> </b> — <a href="/application/dobavit-parametr-v-metod-sobytiya-delfi-sobytiya-delphi-obrabotchik-s/">программный код</a> отображается моноширинным шрифтом</p> <p><b><em> </b> — выделенный текст отображается курсивом</p> <p><b><strong> </b> — выделенный текст отображается жирным шрифтом, рекомендуется вместо <b></p> <p><b><hr> </b> — <a href="/audio-device/kakoi-html-risuet-gorizontalnuyu-liniyu-blok-div-i-gorizontalnaya-liniya-hr/">горизонтальная линия</a>. У этого тэга есть такие параметры, как:</p> <p><b>align=center(left, right) </b>-выравнивание, с этим параметром мы знакомы из других тегов</p> <p><b>width="число" </b> — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана</p> <p><b>size"число" </b> — толщина линии (меньше 100 пикселей, т.е. если задать параметр <b>size=99 </b>, a параметр <b>width=1 </b>, то получим вертикальную линию, только с ограниченной высотой)</p> <p><b>color="цвет" </b>-цвет линии</p> <p><b>noshade </b> — отменяет рельефность</p> <p>Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:</p> <p>XHTML </p> <p><hr width="100%" color="red" ></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><hr width = "100%" color = "red" > </p> </td> </tr></table><p>Поэкспериментируйте с набором и значениями параметров этого тега.</p> <p>Есть еще один интересный тег, но поддерживается он только <a href="/monitors/skachat-obnovlenie-internet-explorer-10-obnovlyaem-brauzer-internet-explorer-do/">браузером Internet</a> Explorer. Честно говоря мне его на практике использовать не приходилось.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </div> </div> <div class="grid_4"> <ul id="sidebar"> <div class="widget cat-lists"> <div class="outer"> <div class="menu-sidebar-container"> <ul id="menu-sidebar" class="menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/internet/">Интернет</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/programs/">Программы</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/games/">Игры</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/problems/">Проблемы</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows/">Windows</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/social-networks/">Социальные сети</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/android/">Android</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/ios/">Ios</a></li> </ul> </div> </div> <script> function fd() { var menu = document.querySelector('.menu-wrapper') // Using a class instead, see note below. menu.classList.toggle('active'); } function fds(e) { var menu = document.querySelector('.' + e) // Using a class instead, see note below. menu.classList.toggle('active'); } </script> </div> <li id="text-46" class="widget widget_text"> <div class="textwidget"> </div> </li> <li id="text-9" class="widget widget_text"> <div class="textwidget"> <div class="subscription" id="sidebar-sub"> <div class="gradient-sub"></div> <p class="head-sub">Присоединяйтесь!</p> <p class="description-sub"> Уже подписаны более 6 000 человек.<br> Получайте самые свежие статьи. </p> <form action="/" method="post" target="_blank" id="subscr-form-6292" onsubmit="return jc_chkscrfrm(this, false, false, false, false)"> <input type="text" name="lead_email" class="sr-required" placeholder="Введите ваш e-mail" maxlength="100"> <button type="submit" name="lead_subscribe" value="Подписаться">ПОДПИСАТЬСЯ</button> </form> <div class="ribbon"></div> </div> </div> </li> <li id="text-36" class="widget widget_text"> <div class="textwidget"> </div> </li> <div id="sticky-anchor"></div> <div id="sticky"> <div id="owl-demo2" class="owl-carousel owl-theme"> <div class="item"> </div> </div> </div> <script> var stk = true; </script> <style> #owl-demo2 .item { background: #3fbf79; margin: 10px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation { text-align: center; } //use styles below to disable ugly selection .customNavigation a { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style> <link href='/assets/owl.theme.css' rel='stylesheet' type='text/css'> <link href='/assets/owl.carousel.css' rel='stylesheet' type='text/css'> <link href='/assets/owl.transitions.css' rel='stylesheet' type='text/css'> </ul> </div> <div class="clear"></div> <a class="btn-floating btn-large red" href="#"></a> <footer> <script type="text/javascript"> function GoTo(link) { window.open(link.replace("_", "http://")); } </script> <div class="grid_12"> <p id="footer"><a href="/">Интернет, компьютеры, гаджеты</a> - Копирование материалов строго запрещено. <br><a href="" target="_blank">О проекте</a> <br><a href="" target="_blank">Реклама на сайте</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="/assets/modernizr.min.js"></script> <script type="text/javascript" src="/assets/jquery.slicknav.js"></script> <script type="text/javascript" src="/assets/main.js"></script> <script type="text/javascript" src="/assets/include.js"></script> <script type="text/javascript" src="/assets/jquery.fancybox.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); }); </script> <script type="text/javascript"> window.___gcfg = { lang: 'ru' }; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </div> <div class="clear"></div> </footer> </div> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/postviews-cache.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <script type='text/javascript' src='/assets/form.js'></script> <script type='text/javascript' src='/assets/jquery.fancybox-1.3.8.min.js'></script> <script type='text/javascript' src='/assets/jquery.easing.min.js'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> </body> <script>// <![CDATA[ $(".closed").toggleClass("show"); $(".title").click(function(){ $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium"); if ($(this).parent().hasClass("show")) $(this).children(".title_h3").css("background","#bbbbbb"); else $(this).children(".title_h3").css("background","#dddddd"); } ); // ]]></script> <script> $(".single-post .post a:has(img), .single-post .entry-content a:has(img)").fancybox(); $('.sub-menu').parent().addClass('after'); $('.mobile_menu .ya-site-form__input-text').attr('id', 'unstapble-transparent'); $('.sub-menu').parent().children('a').attr("onclick", "$(this).parent().toggleClass('active');return false;"); // $('.nav-list-mobile li a').click(function() { // $(this).parent().toggleClass('active'); // return false; // } ); function tg_menu () { $('.mobile_menu').toggleClass('active'); $('.google_search_mob').toggleClass('active'); } ; if (stk) { $(document).ready(function() { $(window).scroll(sticky_relocate); sticky_relocate(); function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); } else { $('#sticky').removeClass('stick'); } } } ); } if (carusel) { } </script> <script src="/assets/owl.carousel.min.js"></script> <script> var owl2 = $("#owl-demo2"); owl2.owlCarousel({ items : 1, //10 items above 1000px browser width lazyLoad : true, itemsDesktop : [1000,1], //5 items between 1000px and 901px itemsDesktopSmall : [900,1], // betweem 900px and 601px itemsTablet: [600,1], //2 items between 600 and 0 itemsMobile : [479,1] // itemsMobile disabled - inherit from itemsTablet option } ); // Custom Navigation Events // $(".next").click(function(){ // owl.trigger('owl.next'); // } ) // $(".prev").click(function(){ // owl.trigger('owl.prev'); // } ) owl2.trigger('owl.play',5000); //owl.play event accept autoPlay speed as second parameter // $(".stop").click(function(){ // owl.trigger('owl.stop'); // } ) </script> </html>