ホーム Bfitとは 料金プラン 機能紹介 お申込み マニュアル ログイン ドメイン SSL
クレジット決済などお支払いも簡単・便利!詳細>>お支払方法
トップ > マニュアル > スタートアップ > HP作成A

レンタルサーバーマニュアル スタートアップ


ホームページ作成方法
HP作成A HP作成B HP作成C HP作成D HP作成E HP転送F


0. これからホームページ制作をしようと思っているアナタへ
このページをご覧になったという事はホームページ制作に興味をもたれているはず。
でも「難しいかな…」「ソフト買ったりお金かかるかな…」「諦めようかな…」なんて不安になる必要は全くありません。
このコーナーではお金を一切かけず、流れにそっていくだけで自然とホームページの制作方法が身に付くよう構成されています。きっと「やってみると以外と簡単!」と思って頂ける事と思います。


1. ファイル名に関する注意事項
ホームページを制作する上でまず注意して頂きたいのがファイル名。
HTMLファイル(ホームページを表示するファイル)やGIFファイル(ホームページに表示する画像ファイル)など、様々なファイルがありますが、ファイル名に使ってはいけない文字やルールがあります。
以下の表を見て注意するようにして下さい。

index.html 問題ナシ(ファイル名は半角文字で)
profile-01.html 問題ナシ(ハイフン・アンダーバー・数字はファイル名に使えます)
profile 01.html × アウト!(スペースがファイル名に含まれてはいけません)
diary.html × アウト!(全角文字を使ってはいけません)
趣味ページ.html × アウト!(日本語を使ってはいけません)


2. ホームページ制作の準備をしましょう!
ホームページを制作するにあたって「テキストエディタ」と呼ばれるものが必要になります。
これはWindowsでいう「メモ帳」、Macintoshでいう「SimpleText」がこれにあたります。どちらも最初からパソコンに入っている物なので、そんなの持ってないよと言う方もご自分のパソコンの中をちょっと探してみて下さい。

他に必要なのはホームページを見る為のブラウザ。これはInternetExplorerNetscapeの事です。 これも最初からパソコンに入っていますよね。

Windows Machintosh


3. ホームページの保存場所を作りましょう!
ホームページのファイルを保存する為の場所を用意しておきましょう。

▼Windowsの場合
デスクトップ上で右クリックし、現れたメニューの中の「新規作成」の「フォルダ」を選択して下さい。すると「新しいフォルダ」が出来るので、そのフォルダ名を「html」に変えて下さい。
▼Macintoshの場合
Finder上で「ファイル」メニューの「新規フォルダ」を選択(図1参照)して下さい。するとデスクトップ上に「名前未設定フォルダ」が出来るので、そのフォルダ名を「html」に変えて(図2参照)下さい。

次にその「html」フォルダを開き、その中に同様の手順で「img」という名のフォルダを作成しておいて下さい。

Windows Machintosh
図1

図2 


4.HTMLファイルの基本
ホームページを制作するには、テキストエディタを使い、HTMLを記述していくのですが、その基本となるHTMLをまず書いてみましょう。テキストエディタを起動し、以下のような文章を入力してみて下さい。
※HTMLは全て半角文字で入力しましょう。全角では正確に表示されません。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

これがホームページ制作の第一歩を踏み出す為の基本スタイルです。

では早速これにちょこっと内容を追加し、ブラウザで閲覧してみましょう。 以下のように文章を追加してみて下さい。

<HTML>
<HEAD>
<TITLE>練習</TITLE>
</HEAD>
<BODY>
只今、ホームページ制作の練習中です。
</BODY>
</HTML>

これを「3.ホームページの保存場所を作りましょう!」で作ったHTMLフォルダの中に、ファイル名を「test.html」として保存して下さい。そしてこの「test.html」をブラウザ(InternetExplorer、NetscapeNavigaterなど)で開いてみましょう。

ウィンドウのタイトル部分に「練習」、ホームページが表示される所に「只今、ホームページ制作の練習中です。」と表示されましたよね。
つまり<TITLE>タグで囲った部分がブラウザのタイトル部分に表示され、ホームページの内容は<BODY>タグで囲まれた部分に記述していくという事がわかって頂けたかと思います。

このようにタグ