Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>HTMLファイル作成の流れ!

HTMLファイル作成の流れ!

最短コース普通コースじっくりコースアイコンの説明最短コース普通コースじっくりコースアイコンの説明

任意の場所にフォルダを作成しよう!

まずは任意の場所(当サイトではマイドキュメントにフォルダを作成しています。)にフォルダを作成しましょう。フォルダ名は自分のわかりやすい名前でいいです。フォルダ作成の詳細は、ファイルとファルダで説明しています!

メモ帳を起動しよう!

メモ帳を起動するには以下の手順で起動しましょう!

  1. 画面右下のスタートを押しましょう。
  2. 「すべてのプログラム」を選択。
  3. アクセサリを選択。
  4. そしてメモ帳を選択しましょう。

これでメモ帳を起動できます!

実際にHTMLを入力してみましょう!

記述例
<html>
<head>
</head>
<body>
</body>
</html>

まずはメモ帳に<html></html>と入力し、HTMLファイルであることを示します。次にその間に本文情報を扱う<head></head>とブラウザに表示される部分の<body></body>入力しましょう!これらのホームページを作成するときの最低限のタグの詳細は、前述してあるこちらで説明しています!右の記述例のように、HTMLの構造をわかりやすくするため、「Enter」キーを押して改行、もしくは「Tab」を押して字下げしましょう。

半角スペースと改行

「space」キーを押しての連続した半角スペース、「Enter」キーを押しての改行、もしくは「Tab」キーを押しての字下げは、ブラウザで表示した場合、反映されません。また、これらは1つの半角スペースとして表示されます。

記述例
<html>
 <head>
   <title>一人暮らしの前向き料理</title>
 </head>
 <body>
  簡単に作れるワンポイント料理
 </body>
</html>

次に、head 要素の中に title 要素を入力して見ましょう!入力しましたか?title 要素は、ホームページのタイトルを記述する要素です。下の図のようにブラウザのタイトルバーに表示されます。簡単ですね!ちなみに、title 要素の内容は「お気に入り」(ブックマーク)の登録名や履歴に表示されます。
タイトルの表示

doby 要素の内容に本文を入力しましょう!ここの部分はブラウザのページ内に表示されます。

HTMLファイルを保存しよう!

HTML文書を入力後HTMLファイルとして保存するには、初めてHTML文書を保存する場合と、一度保存した後に編集して再び同じファイルに上書き保存する場合の二つの保存の仕方があります。

*初めてHTML文書を保存する場合(一度保存した後に編集して元のファイルを残し、別のファイルとして保存する場合もこの手順と同じです。)

HTMLの保存
  1. ツールバーの[ファイル(F)]を選択
  2. 名前を付けて保存(A)を選択(右の図では1)
  3. 名前を付けて保存のダイアログボックス(下の図参照)が表示されたら、保存する場所を指定します。ここでは「homepage」をというフォルダ名を選択しています
  4. ダイアログボックス(下の図参照)にファイル名を入力します
    ここで作ったHTMLファイルはトップページにするとして、ファイル名は「index」、拡張子も合わせると「index.html」と入力します。「index」の部分はサンプルとして使うなら何でもいいですよ。トップページの場合は、基本的にはファイル名は「index」とします。
  5. ダイアログボックス(下の図参照)の保存(S)を選択すると内容が保存されます

*一度保存した後に編集して再び保存する場合

  1. ツールバーの[ファイル(F)]を選択
  2. 上書き保存を選択を選択すると内容が保存されます(右の図では2)

ダイアログボックス

最短コースの方やファイル名、フォルダ名に付けられる文字について分からない方は次のリンク先のページを参照してください。
>>ファイル名、フォルダ名の決まり事!

メモ帳の終了

メモ帳の終了をするには、メモ帳のウィンドウを閉じるか、下の手順でメモ帳の終了を実行します。

*メモ帳の終了の仕方(前項の「HTMLファイルを保存しよう!」の右図参照)

  1. ツールバーの[ファイル(F)]を選択
  2. メモ帳の終了(X)を選択

HTMLファイルをブラウザで表示しよう!

[ブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理

前項で作成したHTMLファイルは右の図のようなアイコンで表示されているはずです。ブラウザで表示させるには、そのアイコンをダブルクリックしましょう!もしくはブラウザを起動し、HTMLファイルを、ブラウザ上に「ドラッグ&ドロップ」する方法などもあります。

一度作ったHTMLファイルを編集しよう!

一度保存したHTMLファイルを編集するには、いくつか方法がありますが、ここでは二つの方法を紹介します。まず一つ目は、前項のようにブラウザで表示し、ソースを表示するとメモ帳が起動します。(ソースでの表示の仕方はこちらを参照してください。) そして二つ目は、保存した時に作成されたアイコンから実行する方法です。アイコンからの編集方法の手順は以下の通りです!

*アイコンからの編集

  1. アイコン上で右クリックします。
  2. プログラムから開く(H)
  3. 「Notepad」をクリックするとメモ帳が起動し、編集できます。

関連情報ページ

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system