Loading custom jQuery and HTML in a WordPress page

I would do this in a page template.

In your theme, create a file named page-app.php with the following content:

<?php
/**
 * Template Name: App
 */

function wpdev_137109_enqueue_scripts() {
    $file="/js/myscript.js";
    wp_enqueue_script(
        'myscript',
        get_stylesheet_directory_uri() . $file,
        array( 'jquery' ),
        filemtime( get_stylesheet_directory() . $file ),
        TRUE
    );

    $file="/css/mystyle.css";
    wp_enqueue_style(
        'mystyle',
        get_stylesheet_directory_uri() . $file,
        array(),
        filemtime( get_stylesheet_directory() . $file )
    );
} // function wpdev_137109_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'wpdev_137109_enqueue_scripts' );
?>
<?php get_header(); ?>
<div id="sys-mbox">
    <textarea id="sys-tbox"></textarea>
</div>
<div class="sys-results">
    Total number of words: <span class="words"> </span>
    Total number of chars: <span class="character"> </span>
</div>
<?php get_footer(); ?>

Put your stylesheet and script files in the mentioned locations.

Then create a WordPress page and select the page template App from the Page Attributes meta box. Hit save and you’re done.

// EDIT:
As for jQuery, try it like so:

jQuery(function($) {
    // code...
});