ホームページ作成講座 -入門編-第2講
第2講では実際にホームページを作り始めます。 読者の皆さんも「メモ帳」を立ち上げて、解説通りに作りながら読み進めていく事をオススメします。 第1講をまだお読みでない方は、先に第1講をお読みください。
スポンサーリンク
とりあえず作ってみよう
じゃあまず 「フォルダ」を作ってみよう | |
「フォルダ」? 何それ? ホームページと関係あるのか? | |
ホームページを作るには沢山のファイルが必要になるんだ 何でもかんでも「マイドキュメント」等にまとめて入れちゃうと ごちゃごちゃになって わからなくなってしまうぞ | |
へえ・・・ そうなんだ・・・ 今まで全部「マイドキュメント」に保存しちゃってたぜ |
ホームページを作っていくと、ファイルが沢山できるので、非常に分かり辛くなってしまいます。 従って、ホームページ用の「フォルダ」を新規作成し、そこに保存していく事をオススメします。
それではフォルダの作り方を説明しましょう。 まず、「エクスプローラ」を立ち上げましょう。このリンクをクリックしても開かれない場合は、「スタート」→「すべてのプログラム(P)」→「アクセサリ」→「エクスプローラ」で開きましょう。 どこでも良いですが、ここでは「マイ ドキュメント」というところに「HP」というフォルダを作成します。 「マイ ドキュメント」を開いて、右クリックし「新規作成(W)」→「フォルダ(F)」を選択しましょう。( ) 「新しいフォルダ」という名前のフォルダが追加されるはずです。 「新しいフォルダ」という名前の上でゆっくり2回左クリックをして名前を変更できる状態にし、「HP」に変更してください。 これでホームページ作成用のフォルダが出来ました。作ったファイルは、このフォルダの中に保存していきましょう。
よーし! 出来たぜ 「HP」フォルダ 次は何をするんだ? | |
じゃあ実際に作ってみよう まずは「メモ帳」を立ち上げてくれ | |
よし、開いたぜ | |
まず、基本中の基本を書いてみよう <html><head><title>テストページ</title></head><body>テストです。</body></html> と書いてごらん | |
面倒だからコピペしようっと | |
おいおい それじゃあ上達しないぜ ちゃんと自分の手でキーボードを叩く事で覚えるんだから | |
そうなのか・・・ わかった |
実際にHTMLを書いてみましょう。 「メモ帳」を立ち上げてください。「スタート」→「すべてのプログラム(P)」→「アクセサリ」→「メモ帳」で開けます。 立ち上げたら、まず下の文章を書いてください。
<html><head><title>テストページ</title></head><body>テストです。</body></html>
信じられないかもしれませんが、これだけでもう立派な「HTML文書」です。
よし 一生懸命書いたぜ ホラ 見てくれよ | |
やったなサトシ! 凄いぞ!! ・・・ってこれくらいで喜んでいてはダメだ 次はこれを保存するんだ | |
保存・・・? 保存ってゲームとかにあるセーブみたいなもの? | |
そうだな セーブのことだ | |
それじゃあ まだこのままじゃ セーブされていないって事か どうやってセーブするの? | |
簡単なんだ えーと・・・ |
では、保存してみましょう。「ファイル(F)」→「名前を付けて保存(A)」で、保存ができます。 保存する場所は先ほど作った「HP」フォルダにしましょう。 「ファイル名(N)」は何でも構いませんが、とりあえずこの講座では「test.htm」とすることにします(「」は要りません)。 「ファイルの種類(T)」や「文字コード(E)」はそのままで問題ありません。 「保存(S)」をクリックすれば、保存完了です。( )
「エクスプローラ」で「HP」フォルダを開き、今作った「test.htm」がある事を確認しましょう。 「test.htm」をブラウザで開きます。ブラウザとは、今このページを見るのに使っているソフトウェア(「InternetExplorer」等)の事です。 通常は、拡張子が「htm」「html」のものは自動的にブラウザで開かれますので、普通にダブルクリックで開いて問題ありません。 ブラウザで開かれないという方は「test.htm」の上で右クリックし「プロパティ(R)」を選択し、「プログラム」の「変更(C)」ボタンをクリックしてブラウザを選びましょう。 開いたら、「テストです。」と表示されている事を確認してください。
よし! 保存できたぜ! | |
それじゃあ 今作ったファイルを見てみよう 「エクスプローラ」で「HP」フォルダを開いてごらん | |
うん―――――― あ!今作った「test.htm」がある! | |
成功だな それをダブルクリックして 開いてごらん | |
うぉぉぉぉぉぉぉぉ!!!!すご!!!!!!! ・・・って、「テストです。」って表示されるだけじゃん!! | |
そりゃそうだ | |
これだったら HTMLで書かなくてもいいんじゃないの? | |
でもほら 「タイトルバー」に「テストページ」って表示されてるだろ | |
あ ホントだ | |
<title>〜</title> を <head> と </head> の間に書くとタイトルとして扱われるんだ <body> と </body> の間には本文を書くんだ | |
へえ・・・ でもこれだけ? | |
まあ今回は練習だ | |
ちぇ・・・ 無理して損したぜ | |
おいおい・・・ これからたくさん HTMLで書かないと出来ない事を教えるから 期待して待て! |
まとめ
- ホームページを作る時は、新しい「フォルダ」を作って整理する
- 書いた「HTML文書」は拡張子を「htm」や「html」にして保存する
- 「HTML文書」は最初に <html> 、最後に </html> を書く
- <head><title> と </title></head> の間にはタイトルを書く
- 「HTML文書」の本文は <body> と </body> の間に書く
スポンサーリンク