Опубликован: 29.08.2012 | Доступ: свободный | Студентов: 2165 / 219 | Длительность: 08:05:00
Лекция 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>
        

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

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