×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> HTMLファイルの構造

ホームページ作成編 05.HTMLファイルの構造

HTMLファイルには大きく分けてhead部分とbody部分があります。
head部分は、そのページ全体のことを書き込みます。
まずはその作業から・・・

HTMLファイルの構造を理解しよう!

私たちが、誰かとおしゃべりをする時、「今から日本語を使います。声はこのくらいの大きさを基準とします。」なんて宣言をすることはありませんよね。
でも「これからホームページの作り方の話をします。」「時間は1時間くらいしゃべります。」くらいのことは言うかもしれませんね。
ホームページを作る時は、HTMLファイルに色々書き込んでいくのですが、やはりコンピュータというのはなかなか融通が利かないもので色々な宣言をしなくてはなりません・・・

1.index.htmlのソースを見よう!

とりあえずは、ホームページが出来てよかったですね!
まだまだ全然かっこよくないけど最初はこんなもんです。
だんだんかっこよくしていきましょう!!

そしてせっかく自分で作ったホームページです。その構造を少し理解してみましょう。
大丈夫!そんなに難しい話は出てきません!
まずはホームページのソースを見てみましょう。

先ほどの「index.html-メモ帳」を消してしまった人は、インターネットの画面(勿論ご自分で作ったホームページが表示されている画面ですよ!)の空白部分にカーソルを持っていき、

右クリック→「ソースの表示」

こういうやり方でもHTMLのテキストエディターは表示できます。
便利ですね!

index.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部」で出来ています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
head部→HTMLファイルの様々な宣言やタイトル、ページ全体にわたること
</head>
<body>
body部→画面(ブラウザ)に表示させる文章や画像、段落付け、文章の重要度の決定
</body>
</html>

タグはそのホームページ全体の色々なことを宣言したり、表示する文字や文章の重要度を示したり、又、画像を表示させたり、他の部分や他のページ へリンクしたりします。

それでは、具体的に先ほど作った「index.html」に沿って見ていきましょう。

3.head部の各タグを理解しよう!

特にhead部は 前ページ の赤い文字部分だけ変えれば、今後作っていく他のいろいろなHTMLファイルにもそのまま使えるので、綴りまで覚える必要はまったくありません!
どんなことが書いてあるのかだけ覚えておけば充分です。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

文字コードを指定しているタグです。WINDOWSを使っている場合は、このままでOKです。
これを入れておかないと文字化けする場合がありますので、入れておきましょう。

<meta http-equiv="Content-Style-Type" content="text/css">

このHTMLファイルはCSSを使いますよという宣言文です。これもこのまま入れておきましょう。
CSSのことはもうちょっと待ってくださいね。すぐに分かります。

<meta name="description" content="初めてホームページを作ってみました。見てね。">

赤字の部分にそのページの内容を要約して記入します。これは、人間向けではなく検索ロボット向けのタグです。100字以内程度で書くようにしましょう。

<meta name="keywords" content="ホームページ,初心者,作成,簡単,入門">

赤字の部分にそのページのキーワードを記入します。これは、人間向けではなく検索ロボット向けのタグです。10個程度で書くようにしましょう。

<title>初めてのホームページ</title>

赤字の部分にそのページのタイトルを記入します。このタグは大事なタグで、本で言えば、表紙のようなものです。簡潔な言葉で、具体的にあなたのホームページの内容が分かる言葉を選んでください。又、タイトルの内容は、ホームページを開いた画面(ブラウザ)で左上に表示されます。あなたのホームページのタイトルも表示されていますか?

<link rel=stylesheet href="style.css" type="text/css">

このHTMLページは「style」というCSSファイルを使用しますよ。という意味です。
今回は2種類のファイルのページで「style」というCSSファイルを作りました(覚えてますよねぇ・・・)のでここでも「style」です。
もし「gohan」というCSSファイルを作ったらここでも赤い字のところは「gohan」となります。

head部は基本的に赤い字を作っていくホームページに合わせて変えていけば、大丈夫!
もちろんもっと深く掘り下げてもいいんでしょうが、それじゃいつまでたってもホームページができませんっ!
そんなに難しく考えなくてもいいんではないかい?と私は思います。ハイッ
赤い字の部分は一所懸命考えて!

4.ちょっとだけbody部のタグ!

body部は、実際にホームページの画面(ブラウザ)に表示させる文章を書き込んだり、その文章の重要度や段落を指定したりします。
又、画像の表示やリンクなども行います。

繰り返しになりますが、ほとんどのタグは例えば<h1>見出し</h1>のように二つのタグで、対象範囲をはさんで使います。
<○○>を開始タグ、</○○>を終了タグと呼びます。
開始タグと終了タグの間は、○○です。という意味になります。

又、改行をする<br>タグや画像を表示させる<img src>タグなど終了タグがないものもあります。改行にも画像表示にも「ここから、ここまで」という発想がないので、当たり前といえば当たり前ですね!「ここで、改行」とは言うけど、「ここからここまでで改行」とは言いはしませんもんね!

それではbody部のタグを先ほど作った「index.html」に沿って見ていきましょう。

<h1>Wellcome to my Homepage!!</h1>

<h>タグは「見出し」ですよという意味です。

<h1>〜<h6>まで6段階あり重要度は<h1>が一番高いんです。
なので、<h1>はそのページの内容に合った一番大事なことを見出しとして書いてください。
又、<h1>は1つのページに1つだけ使うようにして下さい。

文字の大きさも大きいですね!・・・でもちょっと大きすぎかなぁという場合にCSSファイルで変更していくことになります。
このホームページもそうしてま〜す!

<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>

<p>は段落を指定するタグです。<br>は改行するタグです。

ただ、ずらずらと文章を書いていったのでは、窮屈でしょうがありません。段落ごとに<p>タグで区切るようにしていきましょう。
<p>タグは使わない人も多いみたいですが、段落わけをきちっとしていれば、検索エンジンにも理解してもらいやすくなるってもんですよ!
<p>をきっちり使って分かりやすい文章にしましょう。

<br>には、終了タグはありません。文章を改行させたい時に使います。
<div algin="center">〜</div>は、文字等のコンテンツを中央に寄せる設定です。

マグカップS ■ハッピーコイン■  ホワイト/ブラック

サイズ:約
 口径84o×高さ77o
重 量:約220g
全容量:約220t
材 質:磁器


<送料>
ゆうパック 一律500円
沖縄県1000円

せっかくホームページを作ったら、「人に見てもらいたい」と思うのは人情ってもんです。ホームページを作っても誰も見に来てくれなかったらやっぱりサビシイですよね!
ところで、もし「美味しいケーキの焼き方」をインターネットで調べようとしたらあなたならどうしますか?
私はYaHoo! やGoogleのホームページの検索窓に「美味しいケーキの焼き方」と打ち込んで検索します。
この時、YaHoo! やGoogleは今打ち込んだ、「美味しいケーキの焼き方」というキーワードにマッチしたたくさんのホームページを教えてくれますね。
こういう検索をしてくれるのを「検索エンジン」といいます。検索エンジンは「巡回ロボット」(別に歩いたり走ったりするわけじゃないけどこう呼ばれてます。)を使い常日頃から、あっちゃこっちゃのホームページを見て回って、データとして溜め込んでいます。
あなたの作っていくホームページもこの巡回ロボットに見てもらってデータとして溜め込んでもらえば、検索結果に載れる、そうするといろんな人に見てもらえるということになります。
その時に例えば、このホームページの内容はホームページの作り方なのですが、<title>や<h1>に囲まれた部分が「美味しいケーキの作り方」だったとすると検索エンジンは、「馬鹿にすんじゃねぇ!」とおこりはしませんが、私がほんとに見て欲しい「ホームページの作り方」というキーワードに対して、マッチしなくなってしまいます。検索エンジンに自分の思うようなキーワードに対して、上位に載せてもらうように努力することをSEO対策といいます。
SEO対策は、奥が深くこれが100%という答えはなかなかないようですが、htmlファイルを正しく作って検索エンジンにも人にも理解されやすいようなホームページにしていくことが求められているんですねぇ!
ちょっと長くなりすぎた・・・


 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索