演習問題の解答例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめてのHTML</title>
<!-- この講座で使用する -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
/* 必要に応じてここにCSSを記述する */
</style>
</head>
<body>
<!-- ここにHTMLを記述する -->
<h1>（演習１）簡単なチャット</h1>
<div id="menu">
<h2>メニュー</h2>
<button>メッセージの送受信</button><br/>
<button>設定</button><br/>
<button>ログアウト</button><br/>
</div>
<br/>
<hr/>
<div id="message-send">
<h2>メッセージ送信</h2>
<input type="text" /> <button>メッセージ送信</button>
</div>
<br/>
<hr/>
<div id="message">
<h2>メッセージ</h2>
<p>
台風が近づいています。<br/>
台湾方面へ行く予報になっていますね！
</p>
<p>
でも明後日から船は欠航になるみたいですよ
</p>
</div>
<script>
// ここにJavaScriptのプログラムを記述する
</script>
</body>
</html>Bootstrapのボタンの設定を使用とradioボタンを追加した解答例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめてのHTML</title>
<!-- この講座で使用する -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
/* 必要に応じてここにCSSを記述する */
</style>
</head>
<body>
<!-- ここにHTMLを記述する -->
<h1>（演習１）簡単なチャット</h1>
<div id="menu">
<h2>メニュー</h2>
<button class="btn btn-primary">メッセージの送受信</button><br/>
<button class="btn btn-primary">設定</button><br/>
<button class="btn btn-secondary">ログアウト</button><br/>
</div>
<br/>
<hr/>
<div id="message-send">
<h2>メッセージ送信</h2>
<input type="text" /> <button class="btn btn-success " >メッセージ送信</button><br/>
<input type="radio" name="gender" value="女性">女性</input>
<input type="radio" name="gender" value="男性">男性</input>
<input type="radio" name="gender" value="none">答えたくない</input>
</div>
<br/>
<hr/>
<div id="message">
<h2>メッセージ</h2>
<p>
台風が近づいています。<br/>
台湾方面へ行く予報になっていますね！
</p>
<p>
でも明後日から船は欠航になるみたいですよ
</p>
</div>
<script>
// ここにJavaScriptのプログラムを記述する
</script>
</body>
</html>