#によるジャンプ表示とfontでh1を拡大、jsのヘッダー配置とbody内自由出力、ブラウザ判定とスタイル特化の可能性。

前回、旧htmlと新htmlの違いにより機能の出来なかったのを、補正します。
name から id になりnameではできませんでした。

書籍の誤植によるとみられるスペル抜けで、新スペルがタイプミスと思われる不全を起こしました。

jsは設置場所によりエラーで止まることがあったのを改善してみました。

ブラウザの検出が出来るようになり、幅が増えたかも知れません。

全体

test6.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
<style>
body {
    margin: 8px;
    padding: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    color: #333333;
}
.h1_main {
	font-family: Arial, sans-serif;
	color: #aaaaff;
	font-size: 60px;
	font-weight: bold;
	text-decoration-line: underline overline;/* 本の植字ミス? */
}
</style>
<script>
var setup = 0;
function statoup(){
	setup = 1;
    var userAgent = window.navigator.userAgent.toLowerCase();
    var dspua;
    if (userAgent == "") {
        userAgent = "サポート外"
        dspua = '不明';//その他のブラウザ向けの記述
    } else if (userAgent.indexOf('opr') != -1) {
        dspua = 'opr';//IE向けの記述
    } else if (userAgent.indexOf('edg') != -1) {
        dspua = 'edge';///旧Edge向けの記述
    } else if (userAgent.indexOf('chrome') != -1) {
        dspua = 'chrome';//Google Chrome向けの記述
    } else if (userAgent.indexOf('safari') != -1) {
        dspua = 'safari';///Safari向けの記述
    } else if (userAgent.indexOf('firefox') != -1) {
        dspua = 'firefox';///FireFox向けの記述
    } else {
        dspua = '不明';//その他のブラウザ向けの記述
    }
    if (dspua == "chrome") {
        this.style.fontFamily = "Noto Sans JP, sans-serif"; //Google Chrome向けの記述
    }
    document.querySelector('#ua').innerHTML = dspua;
}
function disp_js(){
	if (setup == 0){alert('not set');return;}
	document.getElementById('disp_in_html').innerHTML = in_html1;
}
let in_html1 = "test settchi.";
</script>
    <title>Test 6</title>
</head>
<body>
<!-- https://qiita.com/tattyan39/items/324cd94c96089f3d9cd6  back 参照-->
<p id="start" align="center"><font class="h1_main">Welcome <font color="#00f">to</font> Test 6</font></p>
<p>This is a simple HTML document.</p>
<div id="my_js_stato">none running This white.</div>
<script>
disp_in();
function disp_in(){
	document.getElementById('my_js_stato').innerHTML = "it ok.";
}
</script>
<br>
<button type="button" onclick="disp_js();">押してください下に変更が出ます</button>
<br>
<br>
<br>
<br>
<div id="disp_in_html">osarete nai.</div>
<br>
<br>
<br>
<br>
<br><div id="ua"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#start">Back to Start</a>
<a id="end">end</a>

</body>
<script>statoup();</script>
</html>

copilot.txt

// コピロット参照
function applyStyleByBrowser() {
  const ua = navigator.userAgent.toLowerCase();
  let css = "";

  if (ua.indexOf('chrome') !== -1) {
    css = "body { font-family: 'Noto Sans JP', sans-serif; background-color: #e0f7fa; }";
  } else if (ua.indexOf('firefox') !== -1) {
    css = "body { font-family: 'Georgia', serif; background-color: #fff3e0; }";
  } else {
    css = "body { font-family: 'Courier New', monospace; background-color: #eeeeee; }";
  }

  document.getElementById('dynamic-style').innerHTML = css;
}

検証と可能性を考えてのtestです。copilot参照もよかったら。。。