HTMLのコーディングは、初めた頃はどうしても一気に設計する傾向がありますが、それは逆効果で大混乱のもとです。まずは必要最低限で動作確認してから肉付けするように進め他方が賢明です。というコトで4回（※1）ほどで完結する簡単なHTML（※2）で流れを説明してみます。
※1. 内容は4回ですが、簡単なアレンジが3回で合計7回の予定。
※2. CSSやJavaScriptも組み込んでいます。ネタは色々悩んだ結果「mm値をPixel値に変換」する簡単な計算としました。
pixel = mm × dpi ÷ 25.4
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>mm to pixel Conversion</title>
</head>
<body bgcolor="#f5f5f5">
<!--#f5f5f5はwhitesmoke -->
<p>mm値を入力してください:</p>
<input type="text" id="mmInput">
<!-- mm値を入力 -->
<button onclick="convertMMtoPixel()">変換</button>
<!-- 表示した変換計算をクリックしたら -->
<p id="result"></p>
<!-- JavaScript設定のresultを表示-->
<script>
/* JavaScriptによる変換処理 */
function convertMMtoPixel() {
var mmValue =
parseFloat(document.getElementById("mmInput").value);
/* parseFloat()は
引数を文字列に変換して浮動小数点値を返す。
document.getElementById（）は
入力したmm値を数値に変換。 */
var dpi = 350; /* 印刷原稿のdpi値 */
if (!isNaN(mmValue)) {
var pixelValue = mmValue * dpi / 25.4;
/* isNaN()は
引数が NaN (非数) かどうかを判定
"!"を付けてfalse判定=非数ではない＝数値*/
document.getElementById("result").textContent =
mmValue + " mm は凡そ " + pixelValue + " pixels";
/* resultへ
入力したmm値、「mm は凡そ」、
入力したdpi値、「pixels」を表示*/
} else {
document.getElementById("result").textContent =
"無効な入力です。mmとdpiに有効な数値を入力してください。";
/* 入力エラー処理*/
}
}
</script>
</body>
</html>
<!-- index.html -->
ぶっきらぼうな設計です。解像度は350dpiで固定。pixel値の桁数は未指定。
<script>〜 </script>がHTML内のJavaScript
pixel=(mm×dpi)/25.4
