ホームページを作成する際の基本的な注意点

  1. 著作権

    写真、絵、文章等には著作権があります。
    それらのデータを無断で使用すると法により罰せられます。
    しかし、権利所持者が使用を許可している場合には、一定の条件の下で使用することができます。

  2. 個人情報

    ホームページは誰でも見ることができます。個人情報(例えば住所など)の掲載は十分に注意して 下さい。

  3. 画像ファイルのサイズ

    サイズの大きなファイルがホームページに使用されていると、読み込みに時間がかかります。
    色数を減らす等の工夫をして下さい。

  4. 半角カタカナは使用しないで下さい

    多くのブラウザ(ホームページを見るためのソフトウェア)では、半角カタカナは文字化けしてしまいます。 インターネットに流すデータには半角カタカナを使用しないように注意して下さい。

少なくとも以上4点を守って、ホームページを作成するようにしてください。
ネチケットホームページへのリンク

ホームページ作成

ホームページを作成するためには、html(エイチティーエムエル。Hyper Text Markup Language)と言われる言語を使用します。htmlを作成するにはワープロやエディタを使って、htmlの文法に従って文章を入力する必要があります。
それでは、実際に作成してみましょう。
メモ帳を使って次のようなhtml文章を書いてみましょう。

<html>
<head>
<title>
ここにホームページのタイトルを記入します。
</title>
</head>
<body>
ここに本文が入ります。
</body>
</html>

この文章をネットワーク上の自分のフォルダーに保存して下さい。
ファイル名は、index.htmlにして下さい。拡張子が.htmlのファイルはhtml文章であることを示します。
それでは、このホームページを実際に見てみましょう。
今、保存した、index.htmlというファイルをダブルクリックして下さい。Netscapeが起動し、先ほど作ったホームページが表示されるはずです。

このようにhtml文章の特徴は、タグ(たとえば、<tilte></title>)を使って文章の構造を定義するところにあります。
それでは、先ほど作成したhtml文章に使用したタグの意味を掘り下げていきましょう。
まず、一番上と下に、
<html>、</html>と書いてあります。
これは、
<html>と</html> で挟まれている文章はhtml文章ですよ、ということをブラウザに知らせるものです。
また、
<head><title>と</title></head>で挟まれた部分はそのページのタイトルになります。

さて、先ほど作成したホームページを見て下さい。
ネットスケープの左上のツールバーに「ここにホームページのタイトルを記入します。」と表示され、本文にはグレーの背景に黒字で「ここには本文が入ります。」と表示されています。
これだけでは少し寂しいので、華やかにするために背景色を設定してみましょう。
背景色の設定は
<body>タグの中で行います。
具体的には次のようになります。

<body bgcolor="色">

"色"の部分の設定方法には2種類あります。
1つは英語で色を設定する方法です。たとえば、背景を青くしたいときには、

<body bgcolor="blue">

と入力すると、背景は青色になります。
色見本

文字の色も背景色の設定と同じように<body>の中で指定します。
書式は、
<body text="darkslategray">です。 色の設定は背景色と同じです。背景色と同時に文字の色も設定するときには、次のようにして下さい。

<body bgcolor="blue" text="darkslategray">
【注】2行に分けて記入しないで下さい。

<html>
<head>
<title>
ここにホームページのタイトルを記入します。
</title>
</head>
<body bgcolor="plum">
ここに本文が入ります。
</body>
</html>

打ち終わったら上書き保存をし、ネットスケープで「再読込」のボタンを押して下さい。
どうですか? 背景の色は変わりましたか?

それでは、次に文字の大きさを変えてみましょう。
文字の大きさを変えるには、
<font>というタグを使用します。
次のように記述します。

<font size=7>大きな文字</font>

size=の後にくる数字が文字の大きさをあらわします。範囲は1〜7です。
通常の大きさは3で、数字が大きくなれば文字は大きくなります。
それでは、先ほど作ったホームページの文字を大きくしてみましょう。

<html>
<head>
<title>
ここにホームページのタイトルを記入します。
</title>
</head>
<body bgcolor="plum">
<font size=7>ここに本文が入ります。</font>
</body>
</html>

修正し終えたら上書き保存をし、ネットスケープで「再読込」のボタンを押して下さい。
どうですか?文字は大きくなりましたか?

次は文字を2行以上表示させてみましょう。
まずは、次のように修正してみて下さい。

<html>
<head>
<title>
ここにホームページのタイトルを記入します。
</title>
</head>
<body bgcolor="plum">
<font size=7>ここに本文が入ります。</font>
2行目の表示
3行目の表示
</body>
</html>

修正し終えたら上書き保存し、ネットスケープで「再読込」のボタンを押して下さい。
どうですか?改行されずに1行で表示されていますね。
html文章で改行させたいときには改行させるためのタグを入れなければなりません。改行させるためのタグは
<br>です。
では先ほどの文章を改行させて表示させてみましょう。
次のように修正し直して下さい。

<html>
<head>
<title>
ここにホームページのタイトルを記入します。
</title>
</head>
<body bgcolor="plum">
<font size=7>ここに本文が入ります。</font><br>
2行目の表示<br>
3行目の表示<br>
</body>
</html>

上書き保存し、ネットスケープで「再読込」のボタンを押して下さい。
今度はきちんと改行されて表示されたはずです。

次は、段落を指定する方法です。
段落を指定するときには、
<p> </p>というタグを使用します。<p> </p>で囲まれた文章は一段落として扱われます。段落と段落との間は、行間が広がります。
それでは以下のように打って下さい。

<html>
<head>
<title>
ここにホームページのタイトルを記入します。
</title>
</head>
<body bgcolor="plum">
<font size=7>ここに本文が入ります。</font><br>
<p>
2行目の表示<br>
</p>
3行目の表示<br>
</body>
</html>

上書き保存し、ネットスケープで「再読込」のボタンを押して下さい。
「ここには本文が入ります」と「2行目の表示」の間に空白行が入りましたね?

さて、次は、文字の左寄せ、センタリング、右寄せを行います。
まず、センタリングです。
センタリングしたい文字列の先頭に、
<center>最後に</center>を入力して下さい。
右寄せの場合は、
<div align=right></div>
左寄せの場合は、
<div align=left></div>
で文字列を挟んで下さい。
これは各自で試して下さい。

関連するホームページへのリンク

なお,このマニュアルは教育システム室の戸井田氏の作成した講習会用の資料をhtml化したものです.