编辑“︁Marauroa Chat Tutorial/HTML5 Client”︁（章节）

== HTML Code ==

我们通过创建一个 HTML 页面来启动我们的 HTML 5 客户端，该页面由一个用于聊天日志的输出区域和一个用于输入文本的小输入字段组成。 我们使用 CSS 规则使页面看起来更漂亮。 我们使用的是 Marauroa 的开发版本，它由几个 JS 文件组成。 最终版本将包含一个文件以减少启动时间。

<source lang="html4strict">
<!doctype html>
<html><head>
    <title>Marautoa Chat Tutoral Client in HTML 5</title>
    <style type="text/css">
        body {font-family: "Arial"}
        #chat {border: 1px solid #000; padding:0.5em; overflow-y: scroll}
        #chat p {margin: 0}
        p.logclient {color: #888}
        p.logerror {color: #F00}
    </style>

    <!-- low level communication -->
    <script src="json.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <!-- Marauroa -->
    <script type="text/javascript" src="marauroa.js"></script>
    <script type="text/javascript" src="client-framework.js"></script>
    <script type="text/javascript" src="message-factory.js"></script>
    <script type="text/javascript" src="perception.js"></script>
    <script type="text/javascript" src="rpfactory.js"></script>
    <!-- Out code -->
    <script type="text/javascript" src="chatclient.js"></script>
</head>

<body>
    <h1>Marautoa Chat Tutoral Client in HTML 5</h1>
    <!-- input field for text -->
    <form id="form" onsubmit="ui.chatBar.send(); return false">
        <input type="text" name="chatbar" id="chatbar" style="width:90%">
        <input type="submit" value="Send">
    </form>
    <!-- Chat history -->
    <div id="chat" style="height:200px">
        <noscript>JavaScript is required by the Web Client.</noscript>
    </div>
</body></html>
</source>