HTMLファイルを作って表示させましょう!
ごちゃごちゃと論理的なことばかり考えていてもなかなか先に進まない時ってありますよね。
「百聞は一見にしかず」とも言いますし、まずはHTMLファイルを作ってみましょう。
どんなホームページが現れるのかな?
1.index.htmlを作ろう!
それでは、まず先ほど作った「index.html」を書き込みが出来る状態にしましょう。
「index.html」の上にカーソルをあてて
右クリック→「プログラムから開く」→「Notepad」
これで先ほど出てきたテキストエディタ(メモ帳)が出てきましたね。
左上のところに「index.html」とありますね。
以下のように打ち込んでみてください。
面倒であれば、そのままコピー&ペーストしてもかまいませんです。
字は全部黒くなると思いますが、それでいいのです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="初めてホームページを作ってみました。見てね。">
<meta name="keywords" content="ホームページ,初心者,作成,簡単,入門">
<title>初めてのホームページ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div align="center">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
</body>
</html>
これが、ホームページの元になるもので、「ソース」と呼ばれています。
ホームページを作るということはつまりこのソースを作るということです。
更に”<”と”>”でくくられている部分をタグといいます。
ソースはタグで作っていきます。
ちなみに赤い字の部分は、自由に書き換えてみてもかまいませんよ。
※styleの部分は、CSSファイルと関係していますので、ちょっと待っててくださいね!
「index.html- メモ帳」の「ファイル(F)」→「上書き保存(S)」
これで、「index.html」に書き込みをして保存が出来ました。
立派なHTMLファイルが出来ました。よかったですね!!
後はこのファイルに色々書き足していくことになるんです。
「今編集しているメモ帳」の「ファイル(F)」→「上書き保存(S)」でファイルの更新を行いますので、HTMLファイルもCSSファイルも今後、新しいことを打ち込み終わったら、必ずこの作業をして、上書き保存をしましょう。
2.ホームページを見てみよう!
ソースの中身の意味は分からないけど、まあとりあえず、見てみましょうか!どきどきっ!
「index.html」をダブルクリック!!
どうですか? サンプル004-01 のようになっていますか?
大丈夫ですよね!
(青字で書かれている宣伝はプロバイダーの広告で自動的に挿入されているものなのであなたのホームページでは表示されません。)
よかったよかった!
これでホームページも完成だっ!!
・・・ってこれだけじゃね。
なんだかかっこ悪いし、ソースの中身の意味も分からんし、
CSSファイルはどこ行ったんだぁ〜!
次 行きましょ。次っ!!

