<applet>タグが廃止になり、その代替案を探しています。

現在数独をWeb上で作成する研修に取り組んでいます。

研修内容は「HTML、CSSの中にJavaを挿入して数独のWebサービスをつくれ」というものです

HTML、CSSで大枠のデザインを完成させ、そこにJavaのコードを挿入していきたいと考えております。

参考書等では「アプレット(applet)」を用いて、それを実現させているのですが、　Oracle　がアプレットタグが廃止された状態となっております。

代替案として、「Java　Web　Start」に関するさいとをいくつかみたのですが、これはGUIアプリケーションとして、作成するものだと感じています。

HTMLで、デザインしていく中で、文中に埋め込む方法はありますでしょうか？

主に行いたいことは下記のとおりです。
・Javaで作成した問題を、HTML上で表示
・その問題の合否をチェックするためのボタン
・終了時解答があっているかの確認
・数字入力をボタンで出来るように
・経過時間を表示
等行いたいと考えています。

ご回答よろしくお願いいたします。
念のため、作成中のコードを記載させていただきます。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>数独問題</title>
6<link rel="stylesheet" href="NewFile.css">
7</head>
8<body>
9	<header>
10		<div class="logo">数独</div>
11		<div class="hlist">
12			<ul>
13				<li>ヘッダー１</li>
14				<li>ヘッダー２</li>
15				<li>ヘッダー３</li>
16			</ul>
17		</div>
18	</header>
19
20	<div class="main">
21		<div class="sudoku">
22			<h2 class="section-title">数独問題自動作成ツール</h2>
23			<div class="btn">
24				<button type="button" class="btn1">1</button>
25				<button type="button" class="btn1">2</button>
26				<button type="button" class="btn1">3</button>
27				<button type="button" class="btn1">4</button>
28				<button type="button" class="btn1">5</button>
29				<button type="button" class="btn1">6</button>
30				<button type="button" class="btn1">7</button>
31				<button type="button" class="btn1">8</button>
32				<button type="button" class="btn1">9</button>
33			</div>
34			<div class="feild">
35				<table border="1" style="border-collapse: collapse">
36					<tbody>
37						<tr>
38							<td>0</td>
39							<td>0</td>
40							<td>0</td>
41							<td>0</td>
42							<td>0</td>
43							<td>0</td>
44							<td>0</td>
45							<td>0</td>
46							<td>0</td>
47						</tr>
48						<tr>
49							<td>0</td>
50							<td>0</td>
51							<td>0</td>
52							<td>0</td>
53							<td>0</td>
54							<td>0</td>
55							<td>0</td>
56							<td>0</td>
57							<td>0</td>
58						</tr>
59						<tr>
60							<td>0</td>
61							<td>0</td>
62							<td>0</td>
63							<td>0</td>
64							<td>0</td>
65							<td>0</td>
66							<td>0</td>
67							<td>0</td>
68							<td>0</td>
69						</tr>
70						<tr>
71							<td>0</td>
72							<td>0</td>
73							<td>0</td>
74							<td>0</td>
75							<td>0</td>
76							<td>0</td>
77							<td>0</td>
78							<td>0</td>
79							<td>0</td>
80						</tr>
81						<tr>
82							<td>0</td>
83							<td>0</td>
84							<td>0</td>
85							<td>0</td>
86							<td>0</td>
87							<td>0</td>
88							<td>0</td>
89							<td>0</td>
90							<td>0</td>
91						</tr>
92						<tr>
93							<td>0</td>
94							<td>0</td>
95							<td>0</td>
96							<td>0</td>
97							<td>0</td>
98							<td>0</td>
99							<td>0</td>
100							<td>0</td>
101							<td>0</td>
102						</tr>
103						<tr>
104							<td>0</td>
105							<td>0</td>
106							<td>0</td>
107							<td>0</td>
108							<td>0</td>
109							<td>0</td>
110							<td>0</td>
111							<td>0</td>
112							<td>0</td>
113						</tr>
114						<tr>
115							<td>0</td>
116							<td>0</td>
117							<td>0</td>
118							<td>0</td>
119							<td>0</td>
120							<td>0</td>
121							<td>0</td>
122							<td>0</td>
123							<td>0</td>
124						</tr>
125						<tr>
126							<td>0</td>
127							<td>0</td>
128							<td>0</td>
129							<td>0</td>
130							<td>0</td>
131							<td>0</td>
132							<td>0</td>
133							<td>0</td>
134							<td>0</td>
135						</tr>
136					</tbody>
137				</table>
138			</div>
139			<div class="btn">
140				<button type="button" class="btn2">1</button>
141				<button type="button" class="btn2">2</button>
142				<button type="button" class="btn2">3</button>
143				<button type="button" class="btn2">4</button>
144				<button type="button" class="btn2">5</button>
145				<button type="button" class="btn2">6</button>
146				<button type="button" class="btn2">7</button>
147				<button type="button" class="btn2">8</button>
148				<button type="button" class="btn2">9</button>
149			</div>
150			<div class="btn">
151				<button type="button" class="btn3">リセット</button>
152				<button type="button" class="btn3">チェック</button>
153			</div>
154		</div>
155	</div>
156
157	<aside>
158		<div class="side">
159			<div class="slist">
160				<h2 class="section-title">難易度選択</h2>
161				<ul>
162					<li><a href="#">簡単</a></li>
163					<li><a href="#">普通</a></li>
164					<li><a href="#">難しい</a></li>
165				</ul>
166			</div>
167		</div>
168	</aside>
169
170	<div class="contact-form">
171		<h2 class="section-title">お問い合わせ</h2>
172		<p>メールアドレス（必須）</p>
173		<input>
174		<p>お問い合わせ内容（必須）</p>
175		<textarea></textarea>
176		<p>※必須項目は必ずご入力ください</p>
177		<input class="contact-submit" type="submit" value="送信">
178	</div>
179	<div class="clear"></div>
180
181
182	<footer>
183		<h2 class="logo">数独</h2>
184		<div class="flist">
185			<ul>
186				<li>フッター１</li>
187				<li>フッター２</li>
188				<li>フッター３</li>
189			</ul>
190		</div>
191	</footer>
192</body>
193</html>

CSS
1@charset "UTF-8";
2
3html, body, ul, li, h1, h2, h3, h4, h5, h6, p, form, input, div {
4	margin: 0;
5	padding: 0;
6}
7
8body {
9	font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
10	background-color: #eedcb3;
11}
12
13li {
14	list-style: none;
15}
16
17header {
18	color: #fff;
19	height: 90px;
20	background-color: #139697
21}
22
23.logo {
24	font-size: 36px;
25	padding: 20px 40px;
26	float: left;
27}
28
29.hlist li {
30	float: left;
31	padding: 33px 20px;
32}
33
34.main {
35	float: left;
36	padding: 20px 50px;
37	margin: 50px 0;
38	font-weight: bold;
39	color: black;
40	background-color: #fff;
41	border: solid 3px #6091d3;
42	border-radius: 10px;
43	padding: 20px 50px;
44	margin: 50px 0;
45	font-weight: bold;
46}
47
48table {
49	text-algin: ceneter;
50}
51
52.section-title {
53	padding-bottom: 5px;
54	border-bottom: double #6091d3;
55	margin: 10px 0 20px;
56}
57
58.btn {
59	text-align: center;
60	color: black;
61}
62
63.btn1 {
64	margin-bottom: 10px;
65	font-size: 20px;
66	height: 41px;
67	width: 41px;
68}
69
70.feild td:nth-child(odd) {
71	background-color: #EAF6FD;
72}
73
74.feild td:nth-child(even) {
75	background-color: #EFEFEF;
76}
77
78table {
79	width: 410px;
80	height: 410px;
81	border: 3px solid black;
82}
83
84td {
85	text-align: center;
86}
87
88.btn2 {
89	margin: 10px 0 20px;
90	font-size: 20px;
91	height: 41px;
92	width: 41px;
93}
94
95.btn3 {
96	width: 200px;
97	height: 40px;
98}
99
100.side {
101	padding: 20px 80px;
102	margin: 50px 100px 10px 0;
103	width: 300px;
104	height: 150px;
105	float: right;
106	font-weight: bold;
107	color: black;
108	background-color: #fff;
109	float: right;
110	border: solid 3px #6091d3;
111	border-radius: 10px;
112}
113
114.slist li {
115	float: left;
116	padding: 15px 20px 33px 20px;
117	font-size: 20px;
118}
119
120.contact-form {
121	padding: 20px 80px;
122	margin: 0 100px 50px 0;
123	width: 300px;
124	height: 440px;
125	float: right;
126	font-weight: bold;
127	color: black;
128	background-color: #fff;
129	border: solid 3px #6091d3;
130	border-radius: 10px;
131}
132
133input, textarea {
134	width: 270px;
135	margin-top: 10px;
136	margin-bottom: 15px;
137	padding: 15px;
138	font-size: 13px;
139	border: 1px solid #dee7ec;
140}
141
142textarea {
143	height: 100px;
144}
145
146.clear {
147	clear: both;
148}
149
150footer {
151	height: 120px;
152	padding: 40px;
153	color: #fff;
154	background-color: #139697
155}
156
157.flogo {
158	font-size: 32px;
159	float: left;
160}
161
162.flist {
163	float: right;
164}
165
166.flist li {
167	padding-top: 20px;
168}