Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Лекция 2:

Новые возможности HTML 5

MathML

(http://comp-science.narod.ru/mml/mathml.htm)

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

Корневым элементом MathML является тэг <math>…</math>. Рассмотрим некоторые правила синтаксиса MathML.

  • Идентификаторы обозначаются тегами mi: <mi>x</mi>
  • Числа обозначаются тегами mn: <mn>2012</mn>
  • Операторы обозначаются тегами mo: <mo>+</mo>
  • Текстовая строка: ms: <ms>О сколько нам открытий чудных…</ms>
  • Группировка выражений в строку: mrow:
    <msqrt>
    <mrow>
    <mi>x</mi>
    <mo>-</mo>
    <mi>y</mi>
    </mrow>
    </msqrt>
          

    Результат: \sqrt{x-y}

  • Формирование дроби mfrac:
    <mfrac>
    <mi>x</mi>
    <mi>y</mi>
    </mfrac>
          

    Результат: \frac{x}{y}

  • Формирование скобок mfenced:
    <mfenced>
    <mrow>
    <mi>a</mi>
    <mo> + </mo>
    <mi>b</mi>
    </mrow>
    </mfenced>
          

    Результат: (a+b)

  • Нижний индекс msub:
    <msub>
    <mi>x</mi>
    <mn>0</mn>
    </msub>
          

    Результат: x_0

  • Верхний индекс msup:
    <msup>
    <mi>x</mi>
    <mi>2</mi>
    </msup>
          

    Результат: x^2

Рассмотрим более сложный пример - уравнение сферы (sample_5)

<!DOCTYPE html>
<html>
<head>
<title>MathML in HTML5</title>
</head>
<body>
<math>
<msup>
<mfenced>
<mrow>
<mi>x</mi>
<mo> - </mo>
<msub>
<mi>x</mi>
<mn>0</mn>
</msub>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mfenced>
<mrow>
<mi>y</mi>
<mo> - </mo>
<msub>
<mi>y</mi>
<mn>0</mn>
</msub>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mfenced>
<mrow>
<mi>z</mi>
<mo> - </mo>
<msub>
<mi>z</mi>
<mn>0</mn>
</msub>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>=</mo>
<mrow>
<msup>
<mi>R</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>
    

Результат: (x-x_0)^2+(y-y_0)^2+(z-z_0)^2=R^2

Масштабируемая векторная графика - Scalable Vector Graphics (SVG)

(http://ru.wikipedia.org/wiki/SVG)

Масштабируемая векторная графика позволяет описывать в XML-формате векторную и смешанную векторно-растровую графику. В SVG-документы можно вставлять растровые изображения в форматах PNG, GIF или JPG. SVG-файлы можно читать и редактировать в обычном текстовом редакторе. Технология SVG поддерживает анимацию. Для описания динамических сцен предложен язык SMIL (SynchronizedMultimediaIntegrationLanguage). Сценарии анимации можно писать на языке JavaScript.

Рассмотрим несколько примеров создания графических изображений с помощью SVG.

Пример 1. Круг

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<svgxmlns="http://www.w3.org/2000/svg"version="1.1">
<circlecx="100"cy="100"r="50"stroke="blue"stroke-width="1"fill="orchid"/>
</svg>
</body>
</html>
        

Пример 2. Треугольник

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<svgxmlns="http://www.w3.org/2000/svg"version="1.1">
<polygonpoints="5 5, 30 80, 150 40"
fill="red"stroke="black"/>
</svg>
</body>
</html>
        

Пример 3. Текст

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="800"height="600">
<textx="5"y="25"fill="green"font-family="Comic Sans Ms">Кто просвящен и ремеслу обучен, тот славен, горд, в компании нескучен...</text>
</svg>
</body>
</html>
        

Александр Лобанов
Александр Лобанов

Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново?

Nat Ves
Nat Ves
Израиль
Татьяна Орлова
Татьяна Орлова
Россия, Воронежская область