苦学楽学塾

HTMLは、Hyper Text Markup Languageの先頭文字を取ったもので、ウェブサイトの内容を記述する言語です。Microsoft-Edge，Google Chromeのようなブラウザは、HTMLの記述を解釈して画面にホームページを表示しています。ホームぺージの記述は、基本的にヘッダ部分と本体部分に分かれます。ヘッダ部分は、<head>～</head>の間に記述し、本体部分は、<body>～</body>の間に記述します。さらに、全体を<html>と</html>ではさみます。つまり、ホームページの記述は、基本的に、

という形をしています。ここに出てくる<html>のように、基本単語を<と>ではさんだものを、HTMLではタグと言います。20年くらい前のHTMLの解説書では、タグは全て大文字で書かれていましたが、今では、タグを小文字で書くことが普通で、ソフトウェア業界では、小文字が推奨されている、とのことです。現状では、大文字でも小文字でも、ブラウザは正しく認識してくれます。

　画面上に、「こんにちは」と表示するだけのページですが、エディタ、または、Windowsのメモ帳、WORD (保存するとき、「書式なし(*.txt)」を選びます)でもよいです。以下のような内容を、hello.htmlというファイル名で作成してください。

上記の<title>は、このファイルのタイトル(ブラウザのタブに表示されます)を指定するタグです。</title>は、タイトルの終わりをしてするタグです。ファイルの保存先はどこでも構いません。例えば、「ドキュメント」というフォルダに格納したとします。エクスプローラを起動して、「ドキュメント」フォルダを開くと、hello.htmlというファイルができていると思いますが、これをダブルクリックすると、ブラウザが開いて、画面に「こんにちは」と表示されます。上記は、HTMLの正規の書き方になっていますが、実は、

とだけ書かれたhello.htmlでも、ダブルクリックすると、ブラウザは、画面に「こんにちは」と表示します。ブラウザは、どうしようもない誤ったHTMLでもない限り、多少の文法的誤りがあろうと、どんな･･････.htmlファイルでも、可能な限り何とか解釈して表示しようとしてくれます。以後、Google Chrome (検索してダウンロードしてください)というブラウザで表示することを前提に話を進めます。ブラウザによって、誤ったHTMLに対する対応が大きく異なります。上記の

となって、「こんにちは！」の後ろで改行しません。改行させたい場合には、「こんにちは！」の後ろに' 'という文字列を挿入します。このときは、改行させて書く必要もありません。

と改行を入れて表示されます。 は、改行せよ、ということをブラウザに伝えるタグです。htmlファイルの中で改行してもブラウザは改行しません。 があって改行するのです。また、色や文字の太さを変えてみたい場合があると思います。20年前頃は、タグに属性をつけて、色や文字の太さを指定していたのですが、今では、CSS (Cascading Style Sheets)という技術を使います。

　.s1{color:red}の最初のピリオドはs1がstyle名であることを意味します。style記述は'{'と'}'で挟んで記述します。文字色はcolorで指定し、':'をつけて文字色黒ならblackとします。文字の太さは、font-wieghtで指定し、太字にするときには、font-weight:boldとします。こうして、黒文字にするs1，赤文字にするs2，太文字にするs3の3種のstyleを記述しました。

　「こんにちは！」の部分を赤文字の太文字、「世界の皆さん！」の部分を黒文字で表示する場合には、以下のように、表示に影響のないspanというタグを用いて、class=に続けてスタイル名を指定します。

ここで、というタグに対して、その有効性が終わる位置にを入れることに注意してください。タグの大部分は、有効性が始まる位置と有効性が終わる位置にタグを置きます。さて、こうしてできたhello.htmlをダブルクリックすると、画面に

と表示されます。Google Chromeの場合、ページを表示しているときに、[F12]キーを押すと、デバグ・モードに移行し、画面右側に、表示しているサイトのHTMLコードや、style sheetの内容を表示してくれます。省略表示で(･･･)となっているところもマウスでクリックすると展開して表示してくれます。この機能を使って、サイトの問題点を調べて修正する作業を行います。この機能については、「Google Chrome デベロッパー・ツール」で検索してみてください。

style sheetは、<body>以降にタグに直接記述することも可能で、ここでもし、上記の<body>が、<body style="background-color:black">になっていたとします。すると、画面が真っ黒になり、黒字の部分が見えなくなります。なので、文字色は背景色がどうなっているかということに注意が必要です。見やすくするためには、<body style="background-color:paleturquoise">くらいにしておきましょう。さらに、画像を表示する場合には、<img>タグを使って、<img src="prism.gif">という具合に、src=に続けて画像ファイル名を指定します。<img>タグには閉じるタグ</img>はありません。こうして、hello.htmlが以下のようになります。

下の図は、光の分散の説明で使った図です。ピンク・フロイドというバンドの「狂気」(dark side of the moon)というアルバムのジャケットの絵と似ています。このアルバムは世界で最も売れたアルバムと言われています。

　ウェブサイトの場合、表示させたいhello.htmlファイルの他に、ウェブサイトの初期画面で、各htmlファイルへのリンクを張っている目次ページindex.htmlを用意する必要があります。作り方は、表示させたいページと同じです。index.htmlは、(3)でドメインを確保すると、そのドメインのURLをブラウザのURL欄に記入するだけで自動的に表示されます。

タイトルの「目次」がブラウザのタブのところに表示されます。s1のstyle sheet記述では、文字色ピンクと文字の太さの設定が両方入っています。1つのスタイルで複数の設定を行う場合は、設定の間を';'で区切ります。d1のstyle sheet記述では、文字列の左側に3文字分(emは1文字分を示します)の余白を作ることを指定しています。その後ろのa:link，a:visitedなどはリンクの文字色に関する指定で、a:linkは文字色がほぼ白の薄黄色(#ffffccはRGB指定の色コードです。#に続いて161バイトで赤の強さ、緑の強さ、青の強さを表します)、a:visitedは一度リンク先にジャンプした場合は文字色が薄黄色(#ffffaaは色コード)、a:hoverはマウスでリンクの上に来たときには文字色が橙色、a:activeはリンクの上でマウスのボタンを押したときに赤色になることを指定しています。

<body>以降では、タグ～タグで一つの段落であることを示します。タグにd1を指定しているので、コンテンツという文字列は左側に3文字分あけて表示されます。この文字列には、s1というスタイル指定がついていて、ピンクの太字で表示されます。なお、タグで改行がおきるので、 と合わせて2行改行します。次の<a href="hello.html>は、hello.htmlへのリンクを表します。リンク位置には<a>～</a>に書かれている文字列が表示されます。index.htmlをダブルクリックすると、

と表示されますが、「皆様にご挨拶します」の上にマウスを持ってくると、文字列の色が橙色に変わります。マウスのボタンを押すと押している間赤色に変わり、ボタンを放すタイミングでリンク先のhello.htmlにジャンプします。一度ジャンプすると、次にindex.htmlを表示したときリンクの文字色はやや黄色っぽい色になります。

　タグ、CSSについて、詳細を網羅的に説明すると分厚い本になってしまいます。HTMLで可能なタグ、また各タグの詳細な機能は、「HTMLタグのレファレンス」で検索してみてください。また、style sheetについては「CSS」で検索してみてください。よく使うタグについては、HTMLのタグで説明しています。CSSの代表的なスタイルについては、CSSで説明しています。

	苦学楽学塾
	－HTML化－