準備と設定

htmlとは?

html(Hypertext Markup Language) は、ホームページを作成するために使用されるマークアップ言語です。ホームページの骨組みと書式を整えることが出来ます。htmlは、プログラマーやエンジニアになるためのまず最初のスキルだと考えていいと思います。

近年このhtmlは、ソフト(アドビ・ドリームウィバー)を使ったり、ワードプレスというひな形を使ったりすることで、直接打ち込んで作る以外の方法も出てきましたが、しくみを知り直接打ち込めるようになることで、ソフトやひな形内でもカスタマイズが利くようになり立派なスキルとなります。

<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>中身</p>
</body>
</html>

これが一番シンプルな、基本の形(骨組み)です。大きく分けるとheadセクション、bodyセクションに別れています。

このコードをhtmlファイルとして保存し、ウェブブラウザで開くと、見出しを含む超シンプルなホームページが表示されます。このコードに、様々な要素(htmlの他のタグ、css、或いはjavaやPHP)を付け足して、色や大きさを出したり、動きを出したり、フォームを作ったりしつつ、コーディングしそれらしくデザインしていきます。

世の中にあるホームページは、どれも左クリック「ソースコードを見る」で、どのようなコードが書かれているのか見ることが出来ます。または表示→ソースでもOK。色んなホームページでコードを開いて、headセクション、bodyセクションを確認してみましょう。

環境を設定しよう

「rensyuu」ファイルを作る→メモ帳を開きその名前をindexとして作ったrensyuuファイルに保存し、拡張子が何になっているか確認しよう。きっと、拡張子のないindexになっていると思います。あるいは、index.txtになっているか。(メモ帳のマーク)

この拡張子を.htmlに変更しindex.htmlとしたいのですが(.htmでもOK)ますその前にパソコン側の設定をしておきましょう。どう設定するのかといえば、「拡張子を常に表示する」にしておかなければなりません。

「拡張子を常に表示する」設定

windowsを押しながらEボタンを押す→エクスプローラーの起動→表示ボタン→右上のオプション→「登録されている拡張子は表示しない」のチェックを外す。全ての拡張子がきちんと表示され分かりやすくなります。

そこで、index.txtやindex.html.txtを、index.htmlに変更しましょう。メモ帳のマークも、きっとインターネットエクスプローラーなどブラウザのマークに変わったはずです。

なぜindex.htmlなの?

トップページが「index.html」になる理由は、ウェブの初期にサーバーが自動的に「index」という名前のファイルを探して表示するように設定されていたからです。indexは「目次」や「最初のページ」という意味があり、ウェブサイトの最初のページとして自然に使われるようになりました。

そのため、今でも多くのウェブサーバーやブラウザが、URLを入力すると「index.html」を最初に表示する設定になっています。

今でも、ウェブサーバーはデフォルトで「index.html」を表示する設定になっています。たとえば、http://example.com/と入力すると、サーバーは自動的にそのディレクトリの中から「index.html」を探して表示します。

ただし、現在は動的なページ(例えばPHPやWordPressなど)を使う場合も多く、その場合は「index.php」や「index.html」ではなく、サーバーサイドのスクリプト(PHP、ASP、Node.jsなど)がトップページを生成することが一般的です。

とはいえ、基本的に**index**という名前は、未だにトップページやデフォルトページを指す標準的な名前として使われています。

予備知識

コメント