【HTML】ＨＴＭＬファイルについて
2021-01-11
はい、氷翠です。
そうですね、ＷＥＢサイトを構築するにあたって、どんなファイルが必要なのか？どんなファイルを作ったらいいのか？どうやって作るのか？
予備知識として知っておくといいです。
まず、ファイルは厳密に、「プロトコル」＋「パス」＋「ファイル名」＋「拡張子」で成り立っています。表示するときはおおよそ「プロトコル」は省略されることがほとんど。しかし、その後ろは必ず存在しています。
そして、それぞれ「セパレータ」と呼ばれる文字によって区切られています。通常、この文字はＯＳによって変わってきますが、Windowsは「￥」、MacやUNIX系は「/」となります。それ以外はないと思うけど、氷翠が知らないだけかもしれませんが。
Windowsの方はここで注意が必要です。Windowsの中では「￥」かもしれませんが、ＷＥＢサーバーのほとんどがUNIX系で動作しているので、「/」として考えていく必要があります。もちろん、このサーバーがWindowsであるなら「￥」のままでもいいでしょうが。
プログラム言語のASP.NETframeworkなどWindows上で動作するものを利用するのであれば、適したサーバーを探した方がいいでしょう。
テスト
ではテストしていきましょう。
なんでも自分でテストしてみないと、どんな結果がでるのかわかりませんから。
まずは適当に。。。
デスクトップにテキストファイルを作成しましょう。
WIndowsであれば、デスクトップの適当なところで右クリック。メニューの中に「新規作成」というのがあるので、選択します。するとその場所にテキストファイルが作成され、ファイル名を変更できる状態になっているはず。ファイル名を適当につけてください。
Macであれば、先にアプリケーションからテキストエディットを選択してください。後ほどデスクトップに保存する感じで。
それでは編集していきましょう。
今回は超簡単に。
<html>
<head>
</head>
<body>
<p>あいうえお</p>
</body>
</html>とりあえずここまで。
上記で分かる通り、HTMLとは「<html>」〜「</html>」の中にいろいろと記述していく方式。これらの「<○○>」のような形になっているものを「タグ」と呼びます。いろんな種類のタグが用意されているので、これらをうまく組み合わせることでサイトが出来上がっていくわけです。
まずはこれを保存します。
次に拡張子を変更しなくてはいけません。現在は「.txt」になっているはずです。これを「.html」もしくは「.htm」に変更しましょう。変更したら、ファイルのアイコンが変化するかもしれませんが、焦っていけませんｗ
次にブラウザを開きます。いつも検索するところ、今ではURLを入力するところに先程のファイルをドラッグ＆ドロップして見てください。すると、真っ白いページの左上に「あいうえお」と表示されたかと思います。これがサイト制作の一歩です。
他のファイル
HTMLの他にもサイト制作で重要なファイルがあります。HTMLは表示させる重要なファイルであることは間違いないのですが、先程のフィアルもそうですが、真っ白のキャンバスに文字がポツンとあるだけでは面白くないですよね。
そう、色とか動きとかがほしいところです。
ということで、表示に関するフィアル、動きに関するファイルというのがあります。
いずれもテキストファイルなので、拡張子を変更するだけで簡単に用意することができます。
まずは表示に関するファイル。
「CSS」と呼ばれるファイルです。「Cascading Style Sheets」の略ですが、このファイルではデザインに関する設定を行います。
文字の色、大きさ、太さ、装飾といったものです。
p {
color: #333333;
}といった感じで設定していくわけです。上記では単純に「p」タグの文字の色を「#333333」にして表示してほしいといったところです。
次に動きに関するファイル。
「Javascript」。氷翠が苦手とするファイルです。主に、ブラウザの中で文字を移動させる、文字を自動で入力・表示させるといった感じで制御することができます。
現在ではこれを使って、立体的なパズルゲームを作った人もいますし、いわゆる「ネトゲ」ネットワークゲームを開発することもできます。頑張れば、３Ｄ表示も可能なのです。
このサイト「解放区在住氷翠」でも、これらのファイルをいろいろと組み合わせて作ってあります。ごちゃごちゃになっているのかもしれませんが、参考にしてみてください。
コメントを残す