ＨｏｍｅＰａｇｅを作ろう

Ｉｎｄｅｘ: とりあえず作ってみる; 文字の配置や大きさを変える; スペースの作り方～２バイトスペース
関連ページ: 基本的なｈｔｍｌの書き方
参考文献: インターネットホームページデザイン; インターネットホームページデザイン　エクステンション

２１０でホームページを作る時は、 public_html というディレクトリを carib のホームディレクトリの下に作ります。
%mkdir public_html
そのディレクトリの中に移動し
%cd public_html
エディタを使って index.html の中に文章や命令を書き込みます。
%emacs index.html
書き方は一番簡単に書くと、以下のようになります。
```
<html> 
<body> 
地球惑星物理学科のページへようこそ
地物の分野
○惑星進化系
○大気・海洋系
○固体系
○太陽地球系

</body> 
</html> 
```

このサンプルを見てみると、文字の配置が元のファイル（ソース）とは違うことに気づきます。これはソースでのスペースがブラウザー上では無視されるからです。

このようにソースの記述にはいくらか決まりがあり、又これらをうまく利用すると見栄えの良いホームページが出来ます。上の例でも出てきましたがソースでは<>（タグ）の中に命令を書き込んで、様々なことを実行します。次の節からはホームページを作る上でのいろいろな方法を説明します。

文字の配置や大きさを変える

<>の命令を利用してホームページのレイアウトを変えていきます。

<br>: 文章を改行します。
<p>: 文章を改行して、さらに１行分のスペースをあけます。
<h1>～</h1>: <h1></h1>ではさまれた部分を大きな文字に変えます。
１から数字が増えていくと、サイズは小さくなっていきます。
<p align="center">～</p>: 文字を行の中央にセンタリングします。
"center"の他に"right"や"left"も指定できます。上の<h1>～</h1>と一緒に使うことも出来ます。
<spacer size"50" type="vertical">: 縦方向に５０ピクセルスペースを作ります。
"vertical"（垂直）の他に"horizontal"（水平）も指定できます。
<ul><li>リスト１<li>リスト２</ul>: <ul></ul>ではさまれた区間で自動的にリストを作ってくれます。
<li>で項目を一つ増やします。

では、これらを使ったサンプルを見てみましょう。

<html> 
<body> 
<spacer size="30" type="vertical">
<h1 align="center">地球惑星物理学科のページへようこそ</h1>
<spacer size="50" type="vertical">
ここでは地球惑星物理学科が何をやっているかを紹介します。
<p>
地物の分野
<ul>
<li>惑星進化系</li>
<li>大気・海洋系</li>
<li>固体系</li>
<li>太陽地球系</li>
</ul>
</p>
</body> 
</html>

では、これがどう表示されるか見てみましょう。
どうですか？少しは整ったページになったでしょう。

スペースの作り方～２バイトスペース

前にも述べましたが、ｈｔｍｌではスペースがそのままは表示されません。スペースの作り方は"spacer"を紹介しましたが、数文字分のスペースを作る時は、もっと気軽にできた方が嬉しいです。そこで、スペースを入れる方法を紹介します。
やり方は簡単で２バイトスペースを記述すれば良く、入力の仕方はｅｍａｃｓの日本語入力で "Z space"です。

その他のタグ→HTMLタグ集

Back