-------------------
Вы знаете, как устроен наш мир?



---Load files---
Совет: если изображения отображаются неправильно, попробуйте очистить кеш браузера!
Поиск на странице - нажмите "Ctrl+F", Поиск на сайте - поле ввода "Яндекс-Найти" на "шапке",
Поиск в интернете - 1) выделите текст, 2) нажмите правую клавишу мыши и 3) выберите поисковик.

С О Д Е Р Ж А Н И Е

------- Тимин В.А. (mail: timinva@yandex.ru) Дата последней загрузки: March 17 2018. -------
Ссылка на этот материал: kak-vstavit'-formulu-na-stranicu-sajta.htm)
Как вставить формулу на страницу сайта

Формулы на странице HTML

Математические и другие формулы на странице HTML появляется не очень часто, но на сайтах, содержащих математические и другие формулы является обычным явлением. В связи с этим возникает вопрос - как отобразить формулу на странице сайта? Сразу же отмечу - вставить код отображения формулы можно во первых, на стороне сервера, и во вторых - на стороне пользователя. И для этого есть много способов, и этот способ определяется изготовителем страницы. Для этого есть стандартные и программные методы. Стандартный метод - это рисунок. Программный - это некоторый ткг или синтаксическая фора с формулой в текстовой форме, обрабатываемые скриптом.

1. Стандартный способ - отобразить формулу как рисунок. Для этого в коде HTML применяется тег <img src="адрес файла рисунка"> с необходимыми параметрами.

2. Применять специально созданные теги с текстовым представлением формулы. На стороне сервера или пользователя этот тег обрабатывается специальной программой и динамически заменяется на стандартный тег <img> со ссылкой на динамически созданный файл рисунка с формулой. Синтаксис представления формулы может быть различным.

Широкое распространение для представления формулы получил язык LaTeX.

1. Формулы LaTeX на странице от CODECOGS.COM

Первый способ вставки формулы на страеницу HTML - это, конечно, вставка рисунка с ее изображением. Рисунок, конечно, придется нарисовать.
Но есть другой способ. Вставить на страницу код формулы LaTeX и затем специальной программой и Ява-скриптом вывести изображение формулы на экран. Скрипт необходим для получения изображения рисунка из кода LaTeX в документе HTML. Ее код следующий:

<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

Ее необходимо поместить в блок <head>...</head>. Если "Формула" существует в виде рисунка, этот скрипт не нужен.
На месте отображения формулы без центрирования на странице HTML необходимо вставить код формулы на LaTeX в конструкциях типа: \ (КодLaTeX\ ) (без пробела между 'слэш' и 'скобками'): \(КодLaTeX\),
Если необходимо формулу поместить на отдельной строке с центрированием - в конструкциях типа \ [ Код LaTeX \ ] (без пробела между 'слэш' и 'скобками'): \[ Код LaTeX \]и/или $ $Код LaTeX $ $ (без пробела между долларами): $$Код LaTeX $$ Сам код формулы на LaTeX либо придется составить самому, либо воспользоваться каким либо сервисом. Например, воспользоваться услугами друга, соседа, или воспользоваться визуальным ONLINE-сервисом визуального редактора LaTeX от CODECOGS.COM.

2. ONLINE Редактор LaTeX от CODECOGS.COM

со ссылкой и открытием отдельного окошка (фрейма) для редактирования. В результате визуального редактирования на ONLINE странице получаем код для вставки в HTML-документ. Тип кода может быть различным - рисунок, ссылка на рисунок с редактированием, LaTeX-код др.

Готовый код надо скопировать и вставить в документ. Если это рисунок - скопировать рисунок как файл в ваш проект и создать <img>-тег на нее, Приведем код рисунка со ссылкой на редактирование:

<p>
<a href="https://www.codecogs.com/latex/eqneditor.php" onclick="window.open(this.href,'targetWindow',
'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=500');
return false;"><center><span>LaTeX</span></center></a>
</p>

Этот код непосредственно вставляется на страницу HTML-кода вашего проекта.
Использование ссылки на этот редактор Латекс:
LaTeX

1. Пример на центрирование через картинку:

Код:

<img src="http://latex.codecogs.com/gif.latex?\sum_{n=1}^{\infty}\frac{n}{2n^{3}&plus;1},&space;\frac{\partial^2&space;}{\partial&space;x^2}(x^4&plus;y^3),&space;\int_{-1}^{3}{(x^3-3x&plus;2)}dx" title="\sum_{n=1}^{\infty}\frac{n}{2n^{3}+1}, \frac{\partial^2 }{\partial x^2}(x^4+y^3), \int_{-1}^{3}{(x^3-3x+2)}dx" />

2.Пример на центрирование через картинку с редактированием:

Код:

<a href="http://www.codecogs.com/eqnedit.php?latex=\sum_{n=1}^{\infty}\frac{n}{2n^{3}&plus;1},&space;\frac{\partial^2&space;}{\partial&space;x^2}(x^4&plus;y^3),&space;\int_{-1}^{3}{(x^3-3x&plus;2)}dx" target="_blank"><img src="http://latex.codecogs.com/gif.latex?\sum_{n=1}^{\infty}\frac{n}{2n^{3}&plus;1},&space;\frac{\partial^2&space;}{\partial&space;x^2}(x^4&plus;y^3),&space;\int_{-1}^{3}{(x^3-3x&plus;2)}dx" title="\sum_{n=1}^{\infty}\frac{n}{2n^{3}+1}, \frac{\partial^2 }{\partial x^2}(x^4+y^3), \int_{-1}^{3}{(x^3-3x+2)}dx" /></a>

Этот код удобен тем, что в ней имеется сразу два адреса - 1) адрес "href" для ссылки на редактирование формулы и 2) адрес "img" для ссылки на рисунок. Можно применить во Word для вставки формулы по ссылке и ее ONLINE  редактирования при необходимости. Правда, после редактирования необходимо удалить прежний рисунок и вставить новый со ссылкой и изменением гиперссылки.

3.Пример на формулу LaTeX:

\[\sum_{n=1}^{\infty}\frac{n}{2n^{3}+1}, \frac{\partial^2 }{\partial x^2}(x^4+y^3), \int_{-1}^{3}{(x^3-3x+2)}dx\]

Код:

\ [\sum_{n=1}^{\infty}\frac{n}{2n^{3}+1}, \frac{\partial^2 }{\partial x^2}(x^4+y^3), \int_{-1}^{3}{(x^3-3x+2)}dx\ ]

4.Пример на вставку картинки с URL

Код:

http://latex.codecogs.com/gif.latex?\inline&space;\sum_{n=1}^{\infty}\frac{n}{2n^{3}&plus;1},&space;\frac{\partial^2&space;}{\partial&space;x^2}(x^4&plus;y^3),&space;\int_{-1}^{3}{(x^3-3x&plus;2)}dx

Тип "URL" пригодится для визуализации формул в документах 'Word-20xx', предназначенных для сохранения в формате HTM (HTML). Этот тип "URL"- это чистый адрес рисунка в интернете. При этом на страницу документа внедряется только ссылка на рисунок с формулой, динамически формируемой на специальном интернет-ресурсе. Этот код записывается в строку адреса рисунка и выбирается тип "Связать с файлом". Если документ Word не используется как редактор HTML-страницы, то можно воспользоваться и другими, встроенными и сторонними способами вставки формул, в частности, MathType-6.x. Недостаток этих возможностей для использован ия Word в качестве визуального редактора HTML-страниц в том, что при преобразовании Word->HTML возможны неконтролируемые изменения в расположении и размере рисунков-формул.

Даже при непосредственном наборе формулы LaTeX на странице Word (что не очень удобно - нет визуального контроля) или копировании с внешних источников не всегда можно получить нужный результат на странице HTML, т.к. при преобразовании Word->HTML может испортиться код LaTeX.

MathType-6.x. можно использовать также и как OFFLINE -редактор математических формул с целью копирования LaTeX-кодов формул.

5. Есть и другие форматы представления формул: doxygen, PRE, TiddlyWiki (tw), phpBB, WordPress и другие.

3. ONLINE Редактор LaTeX в форме ввода на странице

Еще одна ссылка, вызывающая ONLINE форму с записью кода в форму ввода: онлайнового редактора LaTeX на свой сайт или блог.

<script type="text/javascript" src="http://latex.codecogs.com/editor3.js"></script>

Вызов редактора: или текстовой ссылкой

<p><a href="javascript:OpenLatexEditor('testbox','latex','')"> Launch CodeCogs Equation Editor</a></p>

или кнопкой:

<p><a href="javascript:OpenLatexEditor('testbox','latex','ru-ru')">
<input type="button" value=" Editor TeX "></a></p>

Код формы ввода:

<textarea id="testbox" rows="3" cols="40"></textarea><br/>

Использование ссылки на этот редактор Латекс:

текстовой ссылкой: Launch CodeCogs Equation Editor

или Вызов редактора кнопкой:



Параметр 'latex' в коде создает код TEX для вставки на страницу HTML,
Параметр 'html' создает код для вставки картинки формулы на страницу HTML,
Есть и другие значения Параметра: html-edit, doxygen, phpBB, tw, pre и другие.

4. Еще одна ссылка на редактор LaTeX - студенческий

Открывается в отдельном окошке (фрейме).Удобно! Готовый код надо копировать и вставить в документ. Есть недостаток - возможности усечены./p>

Имеется скрипт кнопки, вызывающей форму этого редактора:

&<div id="opros-right" style="width:90px;">
<div id="buttform"><center>
<form>
<a href="javascript://" rel="nofollow" onclick="window.open('http://studlab.com/editor/redaktor.html','upp',
'scrollbars=1,top=0,left=0,resizable=1,width=680,height=500');return false;" style="text-decoration:none;">
<input type="submit" value="Формулы" title="Редактор формул"></a>br> </form></center></div></div>

Есть и другие ONLINE-редакторы: Поиск
Через этот и другие редакторы можно создать ссылку с формулой кода TEX на внедряемую картинку.
Также возможно создание кода и/или картинки для других типов формул.

Совет

Можно вставить ссылку рядом с формой ввода текста с формулой.

5. Примеры

((в формате "формула - код LaTeX - видимое изображение")

Пример на центрирование: a+b → \ [a+b \] → \[a+b\]

еще пример на центрирование (с двойным долларом): a/b → $ $\frac{a}{b}$ $:→ $$\frac{a}{b}$$ Пример без центрирования: a/b →\ (\frac{a}{b}\ )→ \(\frac{a}{b}\);
Вместо пары \ ( *** \  в некоторых редакторах LaTeX может использоваться парв $ *** $. Но это очень неудобно, т.к. знак доллара часто может использоваться самостоятельно, а пара знаков доллара - практически не используется.
еще пример без центрирования: d/du(φ), dφ/du → \ (\frac{\partial } {\partial u}\varphi ,\frac{\partial \varphi }{\partial u},\varphi ',\varphi '',\varphi ''\ ) → \(\frac{\partial } {\partial u}\varphi ,\frac{\partial \varphi }{\partial u},\varphi ',\varphi '',\varphi ''\), ....

(примеры отличаются окружающими код LaTeX двухсимвольными скобками.)

Ссылка на этот материал: kak-vstavit'-formulu-na-stranicu-sajta.htm)

- - - ВЫ МОЖЕТЕ ОСТАВИТЬ ПЕРВЫЙ КОММЕНТАРИЙ! - - -


Введите логин:      Введите эл.адрес:

Введите пароль:    Ваш телефон:        

Введите Ваш комментарий:
Формулы:

(возможно использование BB-кодов для оформления комментария и кодов LaTeX для ввода формул)

Решите пример: 15 возвести в степень 1 =

---Load files---
Сегодня - 24_10_2019
Время переоткрытия сайта 05 ч 32 м по Гр.
Календарь
на ОКТЯБРЬ месяц 2018 г.
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 2 24 25 26 27
28 29 30 31 1 2 3
(10 231)

---Load files---
---Load files---


© Все права защищены 2017-2019 При использовании материалов сайта ссылка на http://lowsofphisics.ru обязательна.

В НАЧАЛО
КОММЕНТ
В КОНЕЦ
U:2 V:3 N:10
Уникальных посетителей за текущие сутки: 2 Просмотров: 3 Этой страницы (всего): 10