■無料で自分のホームページを作ろう!
「自分のホームページを開設するなんて、難しいし、お金もかかるし・・・」なんて考えていませんか?
実は、インターネットが閲覧できる状態であれば、そのパソコンで簡単に、しかも無料でホームページを作ることができるんです。
お金をかける方法はもちろんありますが、ここでは無料でできるホームページの作り方から公開の方法までご紹介します。
LET'S TRY!
実は、インターネットが閲覧できる状態であれば、そのパソコンで簡単に、しかも無料でホームページを作ることができるんです。
お金をかける方法はもちろんありますが、ここでは無料でできるホームページの作り方から公開の方法までご紹介します。
LET'S TRY!
1. デスクトップに、ホームページのファイルを保存するフォルダを用意する
2. トップページを制作する
3. 簡単なタグを使ってホームページをデザインしてみる
4. 他のページを作ってリンクするように設定する
5. できあがったホームページを公開する
6. 自分のホームページのURLを入力して、ホームページを表示させる
2. トップページを制作する
3. 簡単なタグを使ってホームページをデザインしてみる
4. 他のページを作ってリンクするように設定する
5. できあがったホームページを公開する
6. 自分のホームページのURLを入力して、ホームページを表示させる
▼Windowsの場合
デスクトップ上で右クリックし、出たメニューの「新規作成」の「フォルダ」を選んで下さい。
そうするとデスクトップ上に「新しいフォルダ」が出来ます。
そのフォルダ名を「html」に変えて下さい。
▼Macintoshの場合
Finder上で「ファイル」メニューをクリックし「新規フォルダ」を選んで下さい。
そうするとデスクトップ上に「名前未設定フォルダ」が出来ます。
そのフォルダ名を「html」に変えて下さい。
デスクトップ上で右クリックし、出たメニューの「新規作成」の「フォルダ」を選んで下さい。
そうするとデスクトップ上に「新しいフォルダ」が出来ます。
そのフォルダ名を「html」に変えて下さい。
▼Macintoshの場合
Finder上で「ファイル」メニューをクリックし「新規フォルダ」を選んで下さい。
そうするとデスクトップ上に「名前未設定フォルダ」が出来ます。
そのフォルダ名を「html」に変えて下さい。
|
次にその「html」フォルダを開きます。 htmlフォルダ内で右クリックし、同様の手順で「新しいフォルダ」「名前未設定フォルダ」を作り、フォルダ名を「img」に変えてください。 |
ホームページを制作するには、テキストエディタを使います。
|
▼Windowsの場合 「メモ帳」というテキストエディタが入っています。 |
|
▼Macintoshの場合 「シンプルテキスト」というテキストエディタが入っています。 |
これらのテキストエディタを開き、以下のように記述してください。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<head>
<title></title>
</head>
<body>
</body>
</html>
まずはこの形が基本になります。
このファイルを、先ほど用意した「html」フォルダ内に保存します。
ファイル名は「index.html」。
このファイルを、先ほど用意した「html」フォルダ内に保存します。
ファイル名は「index.html」。
トップページを作るときは、index.htmlというファイル名にします。
「index.html」という名前のファイルには特別な意味があって、トップページだと認識されます。
「index.html」という名前のファイルには特別な意味があって、トップページだと認識されます。
実際に作りたいホームページのタイトルと本文を入力してみる。
<html>
<head>
<title>はじめてのホームページ</title>
</head>
<body>
どんなホームページを作ろうかな。
</body>
</html>
<head>
<title>はじめてのホームページ</title>
</head>
<body>
どんなホームページを作ろうかな。
</body>
</html>
さきほど記述したHTMLに、上記のマーカー部分のように内容を記述してください。
それを上書き保存し、ファイルを「インターネットエクスプローラー」等で開くと以下のように表示されます。
それを上書き保存し、ファイルを「インターネットエクスプローラー」等で開くと以下のように表示されます。
これがホームページ作成の基本です。
気がつきましたでしょうか?タイトルは<title>と</title>にはさまれた部分に、また本文は<body>と</body>にはさまれた部分に記述したものが表示されるんです。 < >ではさまれた一つ一つをタグといいますが、さまざまな種類のタグを組み合わせることで、オリジナリティあふれるいろいろなホームページを作ることができます。
気がつきましたでしょうか?タイトルは<title>と</title>にはさまれた部分に、また本文は<body>と</body>にはさまれた部分に記述したものが表示されるんです。 < >ではさまれた一つ一つをタグといいますが、さまざまな種類のタグを組み合わせることで、オリジナリティあふれるいろいろなホームページを作ることができます。
1. 改行する
2. 背景色を指定する
3. 背景に画像を設定したい
4. リンクを設定したい
5. テキストの色を指定したい
6. 横罫線を表示したい
7. 文字の大きさを変えたい
8. フォントの種類を指定したい
9. 画像を表示したい
2. 背景色を指定する
3. 背景に画像を設定したい
4. リンクを設定したい
5. テキストの色を指定したい
6. 横罫線を表示したい
7. 文字の大きさを変えたい
8. フォントの種類を指定したい
9. 画像を表示したい
index.html以外にも、もう1ページ新たにページを作ってみます。
index.htmlを作ったときと同様に基本的なタグを記述し、保存してからタイトルや本文を入力していきます。
気をつけなければならないのは、ファイルの名前の付け方です。
以下のことに注意してファイルを名づけてください。
index.htmlを作ったときと同様に基本的なタグを記述し、保存してからタイトルや本文を入力していきます。
気をつけなければならないのは、ファイルの名前の付け方です。
以下のことに注意してファイルを名づけてください。
ファイルの名づけ方に注意!
必ず以下のことに注意してください。
・ 必ず半角英数文字(ハイフン(-)、アンダーバー(_)も可能)
・ スペースは絶対に入れない
・ 日本語は絶対に使わない
例えば・・・
必ず以下のことに注意してください。
・ 必ず半角英数文字(ハイフン(-)、アンダーバー(_)も可能)
・ スペースは絶対に入れない
・ 日本語は絶対に使わない
例えば・・・
○ | hajimete_file2.html | (解説) 半角英数文字とハイフン(-)、アンダーバー(_)も使えます。 |
× | hajimete file2.html | (解説) 半角であっても、スペースは絶対に入れてはいけません。 |
○ | 777.html | (解説) 数字だけでも大丈夫です。 |
× | homepage.html | (解説) 全角の文字は使用できません。 |
× | ホームページ.html | (解説) 日本語は使えません。 |
例えば、fun.htmlという名前のファイルを作ったとします。
トップページと新たなページの二つのファイルができたら、それらをお互いのページからリンクできるようにします。 その場合に使用するタグは以下のようなものです。
トップページと新たなページの二つのファイルができたら、それらをお互いのページからリンクできるようにします。 その場合に使用するタグは以下のようなものです。
<a href="ここにリンク先のファイル名を入れる">リンク部分の表示</a>
上記の一行をそのまま作ったファイルの<body>から</body>の間にコピー&ペーストし、マーカーの部分に具体的なものを入力します。
(例1)
「fun.html」からトップページ(index.html)に「トップページに戻る」という文言をクリックしてリンクしたいときは、以下のようになります。
fun.htmlファイルに以下を記述
(例1)
「fun.html」からトップページ(index.html)に「トップページに戻る」という文言をクリックしてリンクしたいときは、以下のようになります。
fun.htmlファイルに以下を記述
<a href="index.html">トップページに戻る</a>
メモ帳は、こんな感じ。
保存して、インターネットエクスプローラーなどのブラウザで開くと以下のように表示される。
(例2)
トップページ(index.html)から新しいぺージ(fun.html)に「おもしろ事項」という文言をクリックしてリンクしたいときは、以下のようになります。
index.htmlファイルに以下を記述
トップページ(index.html)から新しいぺージ(fun.html)に「おもしろ事項」という文言をクリックしてリンクしたいときは、以下のようになります。
index.htmlファイルに以下を記述
<a href="fun.html">おもしろい事項</a>
メモ帳は、こんな感じ。
保存して、インターネットエクスプローラーなどのブラウザで開くと以下のように表示される。
FTPソフトを使ってウイング2のサーバーにアップロードします。これが完了して、初めて世間に自分のホームページが公開されます。
いろんな種類のFTPソフトがありますが、ここではフリーソフトの「FFFTP」を使った説明をします。
いろんな種類のFTPソフトがありますが、ここではフリーソフトの「FFFTP」を使った説明をします。
まだパソコンにFTPソフトがない場合は、以下よりダウンロードを行ってください。
このソフトを無料ダウンロードする |
FTPソフトを開く
まずは、FTPソフトを開きます。すると、以下のように二つウインドウが開きます。
新規ホストの設定をする
「ホスト一覧」という小さなウインドウの「新規ホスト(N)」をクリックします。
すると、以下のような小さなウインドウが開きますので、赤線で囲んだ4箇所に入力してください。
|
「ホストの設定名」は 任意です。 今回はホームページのタイトルと同じにしました。 「ホスト名(アドレス)」は 無料版をお使いの方はwww.wing2.jpと入力してください。 有料版をお使いの方は 1.wing2.jpと入力してください。 Light版をお使いの方は light.wing2.jpと入力してください。 「ユーザー名」は 登録しているWING2 ID(例:muryou)を入力してください。 「パスワード/ パスフレーズ」は 登録しているパスワードを入力してください。 |
入力しOKをクリックすると以下のようなウインドウが開きます。
左側半分が自分のパソコンを表し、右側がウイング2の自分のサーバー内を表しています。
まだ何もファイルをアップロードしていないので、右側半分は真っ白の状態です。


左側半分が自分のパソコンを表し、右側がウイング2の自分のサーバー内を表しています。
まだ何もファイルをアップロードしていないので、右側半分は真っ白の状態です。
左側を自分のパソコンのデスクトップに設定するために、上図のみどりの矢印で指したアイコンをクリックする。
すると、以下のようなウインドウがあらわれるので、また矢印で示した部分をクリックします。
すると、以下のようなウインドウがあらわれるので、また矢印で示した部分をクリックします。
次に出てきたウインドウで、デスクトップを選び、OKをクリックします。

前回表示されたウインドウに・・・\デスクトップと表示されるので、そこでOKをクリックする。(下図)

ファイルなどをアップロードする
そこで、ウインドウの左側に表示される「html」という名前のフォルダを開き、全てのファイルを選択し、
上部のアップロードボタンをクリックすると、アップロードがスタートする。

これが無事に完了すると、自分で作ったオリジナルホームページは全世界から見ることができる公開されたホームページとなります。
これが無事に完了すると、自分で作ったオリジナルホームページは全世界から見ることができる公開されたホームページとなります。
今まで見ていた自分のホームページはただデスクトップ上に保存されたファイルを見ていただけですが、URLを入力して表示されたホームぺージは、ウイング2に保存されているものです。
日本だけでなく、世界中に住む人たちに自分のホームぺージを見てもらえるように、どんどん素敵なものにしていき、情報を発信していきましょう。
ホームページのURLは、http://wing2.jp/~アカウント名となります。
日本だけでなく、世界中に住む人たちに自分のホームぺージを見てもらえるように、どんどん素敵なものにしていき、情報を発信していきましょう。
ホームページのURLは、http://wing2.jp/~アカウント名となります。