faq - ホームページファイルの作り方

　無料がコンセプトのサイバースペースコミュニティ。携帯メールにも利用できる無料転送メールから、日本初の無料ドメインホスティングまで、様々なサービスを全部無料で提供しています。

ホームページのファイルを作るには、HTML（Hyper Text Markup Languageの略）でホームページに表示する内容を記述する必要があります。

Microsoft Officeに入っているフロントページなど、特に自分でHTMLを書かなくても HPのファイルが作成されるホームページソフトもありますが、基本は知っておく必要があります。
そのソフトの使い方を覚えるのと、HTMLの基本を覚えるのはさほど変わらないと思いますので、まずはHTMLで簡単なページを作れるようにしましょう。

まずは、テキストエディタを用意します。テキストエディタとは、文字を入力して編集できるソフトです。 HTMLを編集するのに、色々便利なエディタもありますが、ここでは初めからPCに入っているエディタで説明します。 Windowsだとメモ帳、Macならシンプルテキストを用意して下さい。

文章で日本語を打つ以外は、全て半角英数字で入力して下さい。
<html>←○半角　＜ｈｔｍｌ＞←×全角
まずは、簡単な内容を表示します。

<html>

<head>
　　<title>MY HOME PAGE</title>
</head>

<body>
ホームページを作りました！ 
 
やってみたら、以外と簡単。 
どうぞ楽しく見てください！ 
</body>

</html>

※赤字の部分はご自由にどうぞ。

タグ名	説明
<html>	HTMLを記述します、という宣言
<head>	ホームページ情報を埋め込む指示
<title>	タイトルを表示する指示（タイトルは画面の一番左上に表示されます）
<body>	ホームページの中身（文章や画像）を表示する指示
<br>	改行する指示

タグを記述したら必ず「おしまい」も記述しなければなりません。
たとえば、<html>は「ここからHTMLです」という記述ですから、一番最後に</html>を書いて「ここまでがHTML」としなければなりません。 <body>についても同様で「ここからがホームページの中身です」と宣言し、</body>で「ここまでがホームページの中身です」と締めます。
タグを記述する時には、はじめと終わりを書いてから（　<body></body>　）その間に内容を書くと良いでしょう。

作成したファイルを、HTMLファイルとして保存します。
そのまま保存するとテキストファイル（.txt）になってしまいますので、保存時に「○○.html」と記述して、HTMLファイルとして保存しましょう。

※ファイル名は半角英数字を小文字で（abc123など）でつけてください。全角文字（日本語や「ＡＢＣ」など）を使用するのはやめましょう。サーバ側にアップした時にトラブルの元となります。

保存されたファイルをダブルクリックすると、作成したHTMLファイルがブラウザ上で確認できます。例で作成したページは、以下のように表示されます。

ホームページを作りました！

やってみたら、以外と簡単。
どうぞ楽しく見てください！

このままでは文字が左に寄っていますので、真中に配置します。
また、背景に色をつけます。そして目立たせたい文字を大きくし、色をつけます。

<html>

<head>
　　<title>MY HOME PAGE</title>
</head>

<body bgcolor="#FFcc99">

<center>
 ホームページを作りました！ 
 
やってみたら、以外と簡単。 
どうぞ楽しく見てください！ 
</center>

</body>

</html>

紺色の部分が、今回新しく追加したものです。実際のページは、以下のように表示されます。

ホームページを作りました！

やってみたら、以外と簡単。
どうぞ楽しく見てください！

ここで使用したタグは、以下の通りです。

タグ名	説明
<center>	文字を真中寄せにする指示
bgcolor="#○○○○○○"	背景色を"#○○○○○○"色にする指示
<font>	文字の設定を指示
color = "#○○○○○○"	文字色を"#○○○○○○"に指定
size = ""	大きさを指示

ホームページに画像を表示し、クリックすると次のページにジャンプするように設定します。

紺色の部分が、今回新しく追加したものです。実際のページは、以下のように表示されます。

ホームページを作りました！

やってみたら、以外と簡単。
どうぞ楽しく見てください！

ここで使用したタグは、以下の通りです。

タグ名	説明
<IMG src="○○○">	○○○という画像を表示する指示
border="0"	縁取りの太さを指示。縁取りをしない場合は数値を「0」とする。
<a href = "○○○">△△</a>	△△という文字又は画像をクリックすると、○○○というページにジャンプする。

テーブルを使用して、表組みを構成します。先ほどのリンク先の「main.html」という新しいHTMLファイルを作成します。

<html>

<head>
　　<title>MY HOME PAGE</title>
</head>

<body bgcolor="#FFcc99">

<center>
<IMG src="image/welcome.gif" border="0">
<table border = "1">
　　<tr align = "center">
　　　　<td width = "60">Profile</td>
　　　　<td width = "60">★</td>
　　　　<td width = "60">information</td>
　　</tr>
　　<tr align = "center">
　　　　<td width = "60">★</td>
　　　　<td width = "60">hobby</td>
　　　　<td width = "60">★</td>
　　</tr>
　　<tr align = "center">
　　　　<td width = "60">BBS</td>
　　　　<td width = "60">★</td>
　　　　<td width = "60">Link</td>
　　</tr>
</table>
</center>

</body>

</html>

実際のページは、以下のように表示されます。

Profile	★	information
★	hobby	★
BBS	★	Link

ここで使用したタグは、以下の通りです。

タグ名	説明
<table>	テーブルを作成する指示
border="0"	縁取りの太さを指示。縁取りをしない場合は数値を「0」とする。
<tr>	行を表す指示。<tr></tr>で囲まれた範囲が1行となる。
align = "center"	文字のセンタリングを行う指示。何も指定しないと左寄せ（left）となる。
<td>	列を表す指示。<td></td>で囲まれた範囲が1列となる。

作成したファイルをFTPでアップロードし、ホームページを公開します。

アップロードにはFTPソフトを入手し、設定する必要があります。
FTPソフトの設定については、FAQに詳しく書いてありますので、そちらを参考にして下さい。

ここで説明しているタグについてのもっと詳しい説明、その他のタグにつきましては、 HTMLについて解説しているサイトが多数ありますので、そちらをご覧下さい。
多数の方が訪問してくれる、素敵なサイトを目指しましょう。頑張って下さい！