サルでもわかる？かんたんHTML トップページ
>>> ＃１．HTMLのキホン
>>> 実際に作ってみよう
「今回は実際にHTMLファイルを作って、
ブラウザで見れるようになるまでの手順を説明するぞぃ。」
「は〜い！」
メモ帳に入力する
「まずメモ帳を起動するのじゃ。やり方は前に説明したのぅ？」
「え〜っと・・・
スタート → すべてのプログラム → アクセサリ → メモ帳
でしたよね？」
「よしよし。それでは、下のタグを参考にしてメモ帳に入力してごらん。」
「赤字の部分は好きな文字を入力したらよいぞ。
タグは必ず 半角英数字 で入力じゃぞ。」
「は〜い。タグはひとつひとつ改行しなきゃいけないんですか？」
「してもしなくても、どちらでもかまわんが、
後で編集する時に、自分が見やすかったらそれでいいぞぃ。」
ファイルに保存する
「入力できたかのぅ？それでは作ったファイルを保存するぞぃ。
ホームページを作っていくとHTMLファイルがどんどん増えていくじゃろうから
専用のフォルダを作っておこうかの。
まず、 スタート → マイドキュメント を開くぞぃ。」
「次に ファイル → 新規作成 → フォルダ をクリック。」
「これで マイドキュメント に 新しいフォルダ というのができたはずじゃ。」
「できました！フォルダの名前は何でもいいですか？」
「そうじゃな。自分の覚えやすい名前でいいぞぃ。
今回は HTML とでもつけておこうかのぅ。]
「わかりました。
このフォルダに、今作ったメモ帳を保存するんですね？
保存の仕方はわかりますよ！
まず ファイル → 名前をつけて保存 で・・・。」
「保存する場所は
マイドキュメント → HTML で・・・。」
「あとは、ファイルの名前を入力して保存するだけですよね？」
「そうじゃ。ファイルの名前じゃが、
今回はこんなふうに index.html とつけておくぞぃ。」
「詳しくはまた後で説明するぞぃ。」
ブラウザで表示する
「次は今作ったファイルをブラウザで見てみるぞぃ。
さっき保存したファイルはどこへいったかのぅ？」
「えっと、マイドキュメントの「HTML」っていうファイルに保存したから・・・
あ、あった！・・・あれれ？？？」
「さっきメモ帳を保存したんですよね？
なのに インターネットエクスプローラ のアイコンになってますよ？？？」
「ほんとうじゃのぅ。
これは、保存するときにつけた ファイルの名前 のせいなんじゃ。」
「ファイルの名前？ index.html ですか？」
「ふむ・・・。正確に言うと、
index の部分がファイルの名前
.html の部分を 拡張子 というんじゃ。」
「かくちょうし？なんか聞いたことあるなぁ・・・。」
「拡張子というのは ファイルの種類 をあらわしているんじゃ。
本来メモ帳を保存するときは .txt という拡張子を使うんじゃが、
このままメモ帳として保存してしまうと、
ブラウザで見ることができないんじゃ。」
「なるほど。ブラウザで見るためには、
さっきの .html っていう拡張子をつけなきゃいけないんですね。」
「そう。ではいま保存したファイルを開いてごらん。」
「ほんとだ。 <BODY>〜</BODY> の間に入力した文字が
ちゃんとブラウザで表示されてますね。」
「うむ。まだ自分のパソコンでしか見れない状態じゃがのぅ。」
「そっか。このファイルをサーバにアップロードしなきゃいけないんでしたね。」
「その通り。アップロードの仕方はまたあとでな。」
ファイルを編集する
「では最後に、保存したファイルの編集の仕方じゃ。」
「保存したファイルを開いたら編集できるんじゃないんですか？」
「うむ。ファイルを開くとブラウザで表示されてしまうじゃろ？
ブラウザに直接入力することはできんからな。
そのブラウザの下書きの部分、つまり ソース を開いて編集するんじゃ。」
「ソース・・・？あっ！一番最初にやりましたよね！たしか
画面左上の表示 → ソース
でしたよね？」
「さっき保存したメモ帳が開きましたね。」
「うむ。このメモ帳がこのブラウザのソースじゃな。
ではこのソースを編集してみようかのぅ。」
「できたかのぅ？
編集したら 上書き保存 をするぞぃ。」
「保存できました！
あれ？でもブラウザは前のまんまですよ？」
「ではブラウザの 更新ボタン をクリックしてみなさい。」
「あ！ちゃんと編集後の文字が表示されてますね！？」
「うむ。こうやって
ソースを編集 → 上書き保存 → 更新ボタン
の作業を繰り返して、HPを作っていくんじゃよ。」
「わ〜♪少しづつわかってきました！
早く作ってみんなに見てもらいたいなぁ♪」
「よしよし、その調子じゃ。
ではいよいよアップロードの仕方を説明するぞぃ。
前に紹介した
FC2WEB
ロリポップ
を使って説明するからのぅ、あらかじめ使いたい方を登録しておくといいぞぃ。
もし、別のサーバを使っていたり、もうアップロードの仕方はわかるというもんは
どんどん次の項目へ進んでいったらよいぞ。」
↑ページのTOPへ
サルでもわかる？かんたんHTML トップページ >>> ＃１．HTMLのキホン >>> 実際に作ってみよう
「今回は実際にHTMLファイルを作って、ブラウザで見れるようになるまでの手順を説明するぞぃ。」
「は〜い！」
メモ帳に入力する
「まずメモ帳を起動するのじゃ。やり方は前に説明したのぅ？」
「え〜っと・・・スタート → すべてのプログラム → アクセサリ → メモ帳
でしたよね？」
「よしよし。それでは、下のタグを参考にしてメモ帳に入力してごらん。」| メモ帳 |
|
<HTML> <HEAD> <TITLE>ここに好きなタイトルを入力</TITLE> </HEAD> <BODY> ここになんでもいいから本文を入力 </BODY> </HTML> |
「赤字の部分は好きな文字を入力したらよいぞ。タグは必ず 半角英数字 で入力じゃぞ。」
「は〜い。タグはひとつひとつ改行しなきゃいけないんですか？」
「してもしなくても、どちらでもかまわんが、後で編集する時に、自分が見やすかったらそれでいいぞぃ。」
ファイルに保存する
「入力できたかのぅ？それでは作ったファイルを保存するぞぃ。ホームページを作っていくとHTMLファイルがどんどん増えていくじゃろうから
専用のフォルダを作っておこうかの。
まず、 スタート → マイドキュメント を開くぞぃ。」
「次に ファイル → 新規作成 → フォルダ をクリック。」
「これで マイドキュメント に 新しいフォルダ というのができたはずじゃ。」
「できました！フォルダの名前は何でもいいですか？」
「そうじゃな。自分の覚えやすい名前でいいぞぃ。今回は HTML とでもつけておこうかのぅ。]
「わかりました。このフォルダに、今作ったメモ帳を保存するんですね？
保存の仕方はわかりますよ！
まず ファイル → 名前をつけて保存 で・・・。」
「保存する場所はマイドキュメント → HTML で・・・。」
「あとは、ファイルの名前を入力して保存するだけですよね？」
「そうじゃ。ファイルの名前じゃが、今回はこんなふうに index.html とつけておくぞぃ。」
「詳しくはまた後で説明するぞぃ。」
ブラウザで表示する
「次は今作ったファイルをブラウザで見てみるぞぃ。さっき保存したファイルはどこへいったかのぅ？」
「えっと、マイドキュメントの「HTML」っていうファイルに保存したから・・・あ、あった！・・・あれれ？？？」
「さっきメモ帳を保存したんですよね？なのに インターネットエクスプローラ のアイコンになってますよ？？？」
「ほんとうじゃのぅ。これは、保存するときにつけた ファイルの名前 のせいなんじゃ。」
「ファイルの名前？ index.html ですか？」
「ふむ・・・。正確に言うと、index の部分がファイルの名前
.html の部分を 拡張子 というんじゃ。」
「かくちょうし？なんか聞いたことあるなぁ・・・。」
「拡張子というのは ファイルの種類 をあらわしているんじゃ。本来メモ帳を保存するときは .txt という拡張子を使うんじゃが、
このままメモ帳として保存してしまうと、
ブラウザで見ることができないんじゃ。」
「なるほど。ブラウザで見るためには、さっきの .html っていう拡張子をつけなきゃいけないんですね。」
「そう。ではいま保存したファイルを開いてごらん。」
「ほんとだ。 <BODY>〜</BODY> の間に入力した文字がちゃんとブラウザで表示されてますね。」
「うむ。まだ自分のパソコンでしか見れない状態じゃがのぅ。」
「そっか。このファイルをサーバにアップロードしなきゃいけないんでしたね。」
「その通り。アップロードの仕方はまたあとでな。」
ファイルを編集する
「では最後に、保存したファイルの編集の仕方じゃ。」
「保存したファイルを開いたら編集できるんじゃないんですか？」
「うむ。ファイルを開くとブラウザで表示されてしまうじゃろ？ブラウザに直接入力することはできんからな。
そのブラウザの下書きの部分、つまり ソース を開いて編集するんじゃ。」
「ソース・・・？あっ！一番最初にやりましたよね！たしか画面左上の表示 → ソース
でしたよね？」
「さっき保存したメモ帳が開きましたね。」
「うむ。このメモ帳がこのブラウザのソースじゃな。ではこのソースを編集してみようかのぅ。」
「できたかのぅ？編集したら 上書き保存 をするぞぃ。」
「保存できました！あれ？でもブラウザは前のまんまですよ？」
「ではブラウザの 更新ボタン をクリックしてみなさい。」
「あ！ちゃんと編集後の文字が表示されてますね！？」
「うむ。こうやってソースを編集 → 上書き保存 → 更新ボタン
の作業を繰り返して、HPを作っていくんじゃよ。」
「わ〜♪少しづつわかってきました！早く作ってみんなに見てもらいたいなぁ♪」
「よしよし、その調子じゃ。ではいよいよアップロードの仕方を説明するぞぃ。
前に紹介した
FC2WEB
ロリポップ
を使って説明するからのぅ、あらかじめ使いたい方を登録しておくといいぞぃ。
もし、別のサーバを使っていたり、もうアップロードの仕方はわかるというもんは
どんどん次の項目へ進んでいったらよいぞ。」
↑ページのTOPへ
|
FC2WEBのアップロード方法 もう登録はすんでおるかのぅ？ログインするのに メールアドレスとパスワードが必要じゃから あらかじめ登録は済ませておいてな。 |
ロリポップのアップロード方法 こっちも登録すると、 アカウント・ドメイン・パスワードがもらえるぞぃ。 あらかじめ用意しておいてくれぃ。 |
|
もっとも基本的なタグ <<< 前のページへ戻る |
見出しを指定する 次のページへ進む >>> |
サルでもわかる？かんたんHTML トップページ >>> ＃１．HTMLのキホン >>> 実際に作ってみよう
