HTMLの補完としてのJavaScriptについてのプチ連載です。なお、HTMLは、HTML Living Standard、SSはCSS3/4、JavaScript（※）はES2021（ES12）に準拠します。また、ブラウザは常に執筆時最新です。
連載に当たって、基本的なファイル構造は上の体裁で統一します。今回の画像（alien.png）は950×950pxです。
まず、HTMLだけで上のイメージを作成すると・・・
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぶたさんエイリアン</title>
<meta charset="UTF-8">
</head>
<body bgcolor="lightpink">
<font size="4" color="mediumvioletred">
<center>
<H3>ぶたさんエイリアン</H3>
<img src="pic/alien.png"
width="400" height="400"
alt="ぶたさんエイリアン">
</center>
</font>
</body>
</html>
<!-- index.html -->
"lightpink"は"#ffb6c1"でもOK
"mediumvioletred"は"#c71585"でもOK
というコトで、HTMLとCSS、そしてJavaScriptに分けると・・・
■HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぶたさんエイリアン</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<script src="links/action.js"></script>
<div class="mainbox">
<img src="pic/alien.png" width="400px"
alt="ぶたさんエイリアン">
</div>
</body>
</html>
<!-- index.html -->
※height="400"は指定しなくてもwidthに連動
/* rule.css */
@charset "UTF-8";
body {
background-color: lightpink;
text-align: center;
color: mediumvioletred;
font-size: 130%;
font-weight: bold;
}
.mainbox {
width: 400px;
height: 400px;
margin: 0px auto;
}
/* rule.css */
■JavaScript
/* action.js */
document.write("ぶたさんエイリアン");
/* action.js */
今回のケースではJavaScriptは特に必要ないので無理矢理設定してみました。
ちなみにCSSとJavaScriptを全てHTMLへ強引に入れると以下の様になります。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぶたさんエイリアン</title>
<meta charset="UTF-8">
<style>
body {
background-color: lightpink;
text-align: center;
color: mediumvioletred;
font-size: 130%;
font-weight: bold;
}
</style>
</head>
<body>
<script>document.write("ぶたさんエイリアン");
</script><br>
<img src="pic/alien.png" width="400px" <!-- ※ -->
alt="ぶたさんエイリアン">
</body>
</html>
<!-- index.html -->
HTML（HyperText Markup Language）、
CSS（Cascading Style Sheets）、
JavaScriptをそれぞれ乱暴に言うと・・・
・HTML Webページ記述の基本
・CSS 共通命令の管理
・JavaScript HTMLで表現できない処理
ですね。
