Home→Step3・Making

STEP3・ホームページを作る

メモ帳で作ってみる/ソフトウェアで作る/FTPソフトを使ってサーバーに送る

メモ帳で作ってみる

ページを作成する

1.メモ帳を起動します。
2.HTMLの基本要素を半角英数字で打ちます。
3.文字を打ってみます。
続いて次の内容をコピーして、「メモ帳」に貼り付けます。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">←基本要素
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

6.保存します。ファイル→名前を付けて保存
7.完成

ブラウザで確認する

メモ帳を閉じ、マイドキュメント→「ホームページ」フォルダ→保存した「index.html」をダブルクリックで開いてみましょう。

編集する

編集する場合は、

  • メモ帳を起動
  • ファイル
  • 開く
  • マイドキュメント(に保存していれば)の「ホームページ」フォルダ
  • HTML文書(上記例では「index.html」)を選択
  • 「開く」をクリック。

保存したファイルがない?!というときは「ファイルの種類:すべてのファイル」にしてください。あとは文章を加えたりタグを記述してみたり、文字を打つことに変わりありません。編集を終えたら「上書き保存」するのを忘れずに。

ページにタイトルを付ける

続いて、作成したページにタイトルを付けてみます。先ほど貼り付けたソースを見てみると、<TITLE></TITLE>この1行が確認できると思います。ここでは「マイホームページ」というタイトルを付けることにします。上記の部分を次のように記述してください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>←タイトル
</HEAD>
<BODY>
</BODY>
</HTML>

記述し終わったら、「メモ帳」のメニューで「ファイル」→「上書き保存」をクリックします。保存が完了したら、再びブラウザに戻り更新ボタンをクリックします。どうでしょう?変化がありましたか?ページは無地のままですが、ブラウザ上部のバーに「マイホームページ」というタイトルが表示されていると思います。これでタイトルを付ける作業は完了しました。

ページの内容を書き込む

最後にページの内容を書いてみましょう。先ほどのソースをもう一度見てください。<BODY>〜</BODY>という部分がありますが、ページの内容はこの<BODY> 〜 </BODY>の間に書き込んでいくことになります。試しになんか書いてみましょう。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY>

私のホームページへようこそ!

</BODY>
</HTML>

書き込みが完了したら、「メモ帳」のメニューで「ファイル」→「上書き保存」をクリックします。保存が完了したら、再びブラウザに戻り更新ボタンをクリックします。

ソフトウェアで作る

ホームページ作成ソフトを使う場合は、ソフトに使い方が載っていると思いますので、ここでは省略します。ですが、必ずこのようなホームページ作成ソフトには「テンプレート」というものが入ってます。デザインやコンテンツは既に組まれており、内容を自由に変更することができるというものです。

…が!!これ、便利なんですが、これを使っていると全然HTMLやCSSが上達しません!!なので、あまり使うことはオススメしません…。こういうホームページ作成ソフトはHTMLを書き込むと、すぐにプレビューできるので、HTMLやCSSを勉強するにはとても良いと思います。そして、基本要素も最初から記述されているのでとても楽です。

FTPソフトを使ってサーバーに送る

1ページでもできたら、そのHTML文書に「index.html」と名前を付けてサーバーのあなたの部屋に送ってみましょう。画像を使用している際はこれも忘れずに。これを「アップロード」といいます(反対語は「ダウンロード」です)。FFFTPアップロードが完了したらブラウザソフト(インターネット)を起動して、あなたのホームページアドレスを入れてみましょう。作成したページが表示されれば成功です☆

Copyright © How to make HP. All Rights Reserved.

How to make HP

Home
Basic knowledge
Procedure
Step1・Preparation
Step2・Content
Step3・Making
CSS
Mobil
Column
カウンター
Google
WWW
How to make HP
ホームページ作成に欠かせないHTMLはここで! ホームページ初心者のためのサイト ホームページビルダーでのホームページ作成 超初心者のホームページ作成 コピペで飾ろうホームページ ホームページ作成支援サイト ホームページ作成NAVI ホームページ作成講座 カンタンホームページ作成 ホームページ作成ならウェブクオリティ