Google Chromeや、Mozilla Firefox、インターネットエクスプローラー、その他、ブラウザはたくさんあって日常的に便利に使っているのだけれど、内部でどんな処理が動いているかって、よくわかりません。電子工作で作ったものと人との間をつなぐ道具としてブラウザは便利に使えそうなので、基本のHTMLから実験していきたいと思います。
Gコードを直接テキスト編集するような感じ
HTMLを書いてブラウザで見てみる
早速、テキストエディタでGコードを直打ちするようにHTMLを書いてみます。
デスクトップから右クリック → 新規作成 → テキストドキュメント で、拡張子 txt のファイルを作ります。
デスクトップに保存。（もちろんどこに保存してもいいのだけれど、わかりやすいので）
ファイル名の拡張子部分をhtmlに書き換えます。
アイコンが変わりました。テキストエディタはsakuraエディタとか秀丸エディタとか、いろいろあるのだけれど、WEBプログラミングでは「Atom」とか「Brackets」の進化が速そう。どちらも無料です。わたくしは「Brackets」にしましたが、どちらも言語に合わせた支援機能が豊富で、ある意味「自動プロ」的です。
「Brackets」使い始め
Bracketで開くと最初からエンコードはUTF-8、HTMLファイルであることを認識してコード（命令語）を色分けする機能があります。
以下のように書いてみます。
はじめてのhtml
って普通に日本語で書いてるだけだし。
これで保存して、普通にファイルをダブルクリックするとブラウザが開きます。まずはGoogle Chromeで見てみましょう。
改行して保存したはずのところ、改行が無くなっています。
同じファイルを別のブラウザでも確認してみます。以下はMozilla Firefoxです。
同じく改行がなくなって一行で表示されました。続いてマイクロソフトIE11（インターネットエクスプローラー１１）です。
IE11では文字化けしてしまいました。念のためマイクロソフトのEdgeを見てみましょう。（２０１９年３月時点）
同じく文字化けしました。
次に、元のファイルに＜ｂｒ＞を追記して保存します。
はじめてのhtml<br>
って普通に日本語で書いてるだけだし。
再度、Google Chromeでファイルを開いてみます。
今度はきちんと表示されました。 GコードでもM指令とかS指令といった色々な表記があるように、htmlでも文法があって、それらをブラウザが解釈して表示しているらしい。ただ、Gコードにくらべるとルールがやたら多くて、とても全部は覚えきれません。（全部覚える必要もないのですが）
マイクロソフトIE11ではどうでしょうか。
改行はされていますが文字化けはそのままです。
エンコードの指定を追加します。
<meta charset=”UTF-8″>
はじめてのhtml<br>
って普通に日本語で書いてるだけだし。
今度はちゃんと表示されました。
Google ChromeとMozilla Firefoxではエンコードの指定をしなくても表示されました。これはブラウザの初期設定の問題でしょうか。もしくは細かい設定が省略されていてもブラウザが適当に解釈してくれているのでしょうか。 （今後わかったところで追記したいと思います）
型にはまった記述をすると下記のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>test</title>
</head>
<body>
<p>はじめてのhtml<br>って普通に日本語で書いてるだけだし。</p>
</body>
</html>
文法は以下のサイトで調べます。（カタカナ英語が氾濫しているので理解が大変です）
上記サイトのメニューにあるように、HTMLの文法だけでは表現しきれない見た目を整えるスタイルシート言語、変数や関数が使えるようになるJavaScript言語があります。
次はカスケーディングスタイルシート（CSS）を試してみます。
コメント