1.index.htmlのソースを見よう!
とりあえずは、ホームページが出来てよかったですね!
まだまだ全然かっこよくないけど最初はこんなもんです。
だんだんかっこよくしていきましょう!!
そしてせっかく自分で作ったホームページです。その構造を少し理解してみましょう。
大丈夫!そんなに難しい話は出てきません!
まずはホームページのソースを見てみましょう。
先ほどの「index.html-メモ帳」を消してしまった人は、インターネットの画面(勿論ご自分で作ったホームページが表示されている画面ですよ!)の空白部分にカーソルを持っていき、
右クリック→「ソースの表示」
こういうやり方でもHTMLのテキストエディターは表示できます。
便利ですね!
2.htmlファイルの全体的な構造
2-1.一番上の部分<!DOCTYPE HTML〜>の部分を見てみましょう。
この部分は特別で、タグではないそうです。意味は、「このHTMLファイルはHTMLの4.01バージョンの規則に沿って作られてます。」という宣言文でこれが無くても、ホームページは表示されますが、形が崩れてしまったりするので、必ず入れておきましょう。
2-2.<html>タグに注目です。一番下にも</html>とありますね。
ほとんどのタグは、このように二つが一対になり対象とする文字や文章又は、範囲をはさむようになっています。
<html>は囲まれた範囲がHTMLですよという意味です。
htmlファイルは<html>で始まって</html>で終わります。
HTMLファイルは、
<head>〜</head>にかこまれた「head部」と
<body>〜</body>にかこまれた「body部」で出来ています。
<html>
<head>
head部→HTMLファイルの様々な宣言やタイトル、ページ全体にわたること
</head>
<body>
body部→画面(ブラウザ)に表示させる文章や画像、段落付け、文章の重要度の決定
</body>
</html>
タグはそのホームページ全体の色々なことを宣言したり、表示する文字や文章の重要度を示したり、又、画像を表示させたり、他の部分や他のページ へリンクしたりします。
それでは、具体的に先ほど作った「index.html」に沿って見ていきましょう。
3.head部の各タグを理解しよう!
特にhead部は 前ページ の赤い文字部分だけ変えれば、今後作っていく他のいろいろなHTMLファイルにもそのまま使えるので、綴りまで覚える必要はまったくありません!
どんなことが書いてあるのかだけ覚えておけば充分です。
文字コードを指定しているタグです。WINDOWSを使っている場合は、このままでOKです。
これを入れておかないと文字化けする場合がありますので、入れておきましょう。
このHTMLファイルはCSSを使いますよという宣言文です。これもこのまま入れておきましょう。
CSSのことはもうちょっと待ってくださいね。すぐに分かります。
赤字の部分にそのページの内容を要約して記入します。これは、人間向けではなく検索ロボット向けのタグです。100字以内程度で書くようにしましょう。
赤字の部分にそのページのキーワードを記入します。これは、人間向けではなく検索ロボット向けのタグです。10個程度で書くようにしましょう。
赤字の部分にそのページのタイトルを記入します。このタグは大事なタグで、本で言えば、表紙のようなものです。簡潔な言葉で、具体的にあなたのホームページの内容が分かる言葉を選んでください。又、タイトルの内容は、ホームページを開いた画面(ブラウザ)で左上に表示されます。あなたのホームページのタイトルも表示されていますか?
このHTMLページは「style」というCSSファイルを使用しますよ。という意味です。
今回は003ページで「style」というCSSファイルを作りました(覚えてますよねぇ・・・)のでここでも「style」です。
もし「gohan」というCSSファイルを作ったらここでも赤い字のところは「gohan」となります。
head部は基本的に赤い字を作っていくホームページに合わせて変えていけば、大丈夫!
もちろんもっと深く掘り下げてもいいんでしょうが、それじゃいつまでたってもホームページができませんっ!
そんなに難しく考えなくてもいいんではないかい?と私は思います。ハイッ
赤い字の部分は一所懸命考えて!
4.ちょっとだけbody部のタグ!
body部は、実際にホームページの画面(ブラウザ)に表示させる文章を書き込んだり、その文章の重要度や段落を指定したりします。
又、画像の表示やリンクなども行います。
繰り返しになりますが、ほとんどのタグは例えば<h1>見出し</h1>のように二つのタグで、対象範囲をはさんで使います。
<○○>を開始タグ、</○○>を終了タグと呼びます。
開始タグと終了タグの間は、○○です。という意味になります。
又、改行をする<br>タグや画像を表示させる<img src>タグなど終了タグがないものもあります。改行にも画像表示にも「ここから、ここまで」という発想がないので、当たり前といえば当たり前ですね!「ここで、改行」とは言うけど、「ここからここまでで改行」とは言いはしませんもんね!
それではbody部のタグを先ほど作った「index.html」に沿って見ていきましょう。
<h>タグは「見出し」ですよという意味です。
<h1>〜<h6>まで6段階あり重要度は<h1>が一番高いんです。
なので、<h1>はそのページの内容に合った一番大事なことを見出しとして書いてください。
又、<h1>は1つのページに1つだけ使うようにして下さい。
文字の大きさも大きいですね!・・・でもちょっと大きすぎかなぁという場合にCSSファイルで変更していくことになります。
このホームページもそうしてま〜す!
意外と簡単で面白そうである。</p>
<p>は段落を指定するタグです。<br>は改行するタグです。
ただ、ずらずらと文章を書いていったのでは、窮屈でしょうがありません。段落ごとに<p>タグで区切るようにしていきましょう。
<p>タグは使わない人も多いみたいですが、段落わけをきちっとしていれば、検索エンジンにも理解してもらいやすくなるってもんですよ!
<p>をきっちり使って分かりやすい文章にしましょう。
<br>には、終了タグはありません。文章を改行させたい時に使います。
<div algin="center">〜</div>は、文字等のコンテンツを中央に寄せる設定です。




