НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 2: Средства HTML5 для работы с текстом и мультимедиа

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать программу

Создание страницы Text

Добавьте в папку www файл Text.html. Вставьте в этот файл следующий текст разметки:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
      <title>Text</title>
    <style>
      h3 {font-family: Verdana, Arial, Helvetica, sans-serif;}
    </style>
    </head>

  <body>
    <h1>Это главный заголовок</h1>
    <h2>Это подзаголовок</h2> 
    <font color="#FFE4B5">
    <b> Стиль текста тела документа задает выравнивание по левому краю, цвет и шрифт.</b>
    </font>
    <em>Обратите внимание, что фон заголовков простирается вдоль всей ширины страницы.</em>
    <hr color="blue">Также отметим, что благодаря пробелу текст заголовка h2 
получает небольшой отступ и, таким образом, 
не выходит за пределы фона.</hr>
    <h3>Для заголовка h1 это не имеет значения, поскольку он выравнивается по центру.</h3>
  </body>
</html>

Результатом выполнения будет отображение новой страницы с форматированным текстом:

Создание страницы Video

Добавьте в папку www файл Video.html.

Так как в одном контейнере можно использовать несколько тегов <source>, то продемонстрируем работу с несколькими форматами, из которых браузер выбирает наиболее для него предпочтительный. Код разметки файла Video.html:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Video(few br)</title>
    </head>
    <body>
      <video controls="" preload="auto">
        <source src="Simple.mp4"></source>
        </video>
      <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Результатом выполнения будет страница, содержащая кнопку запуска видео-файла: