3ステップで作るホームページ 2/3

2.ホームページの作り方

3ステップで作るホームページ 2/3

2.ホームページ作り方・作成方法

　『1.ホームページ作り方・作成方法は』で『表示テスト』というタイトルを付けました。

　ここで確認のためにも1度ファイルを保存して、実際にブラウザでどのように表示されるのか確認しておきましょう。

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/TR/REC-html4/loose.dtd">

<html>
<head>

<title>表示テスト</title>

</head>

<body>

表示できるかな？テスト

</body>
</html>

　ちなみに先ほど追加した『◆例題３』を見て何か気づくことはありませんか？

　実は、<html>～</html>の間の構成は大きく

ヘッダ部となる<head>～</head>
ボディ部となる<body>～</body>

となります。

　整理しますと、HTMLファイルは

から成っているのです。(ちなみにこれはHTML4までの話で後継バージョンHTML5ではフッタ部<footer></footer>も登場予定です。)

　またこの中でヘッダ部、つまり<head>～</head>間には記述できる内容がある程度決まっています。

　通常自由に記述したい内容はボディ部に記述するスタイルになっているのです。

　このように『おまじないの一文』『ヘッダ部』『ボディ部』を記述したファイルを保存する際には、任意のファイル名の拡張子に[ .html ]を付けます。

※拡張子は[ .htm ]とする事もできますが[ .html ]の方がより一般的です。

※ファイル名自体は任意で全角も使用できますが無用なトラブル回避も含め慣例としては半角で記述します。

※ファイル名の長さも任意ですが、あまり長いと後で見づらくなりますし、一方慣例としては半角3文字程度を美徳としていた時代もあります。

　でもホームページのページ数が多くなるとファイル名でファイル内容の識別を考えると半角3文字では限界を感じる方も多いでしょう。

　これらを踏まえ、なるべく短めのファイル名にしておくのが賢明でしょう。

　さて「お好きなファイル名.html」を保存する場所(フォルダ)を指定、または覚えておいて保存してみてください。

　次に(Windowsの場合)保存したファイル「お好きなファイル名.html」を開くには、いくつかの方法があります。

　最もわかりやすいのは、保存したフォルダ内にある「お好きなファイル名.html」を選択(ファイル名の上でマウスの左ボタンを1回押して(クリックして)放し、アイコンの色が反転)した状態で右クリックして出てきたメニューから「開く」方法です。

※他に以下の方法もありますので、ここではご自身でわかりやすい開き方で開いてください。

右クリックで長押しする方法
フォルダ内の当該ファイル上でマウスの右ボタンを1回長押しするとアイコンの色が反転してメニューが現れるので、そのメニューから開くを選ぶ
ダブルクリックする方法
フォルダ内の当該ファイルをダブルクリック(マウスの左ボタンを立て続けに2回押す／クリック)する
ドラッグ＆ドロップを利用する方法
ブラウザを開いておいて保存したファイルをドラッグ(ファイルを選択した状態でマウスの左ボタンを押し下げたままマウスを移動)してブラウザの表示部分まで引っ張って持っていき、ドロップする(マウスの左ボタンを離してファイルを落とすイメージ)。
...etc.

　どうですか？ブラウザの1番上に『表示テスト』と表示されましたよね！

※ここではご自身のパソコン内のファイルを表示しますのでURL欄には[ http:// ]で始まるURLではなく、あなたの保存したファイル名のファイルパス(Windowsの場合[ c:¥ ]や[ file:///C:/ ]など)が表示されます。

　見出しには、<hx>～</hx>(hタグ)を使いますが、「h」のあとには「x」ではなく、<h1>～</h1>のようにここには１～６までの数字を付けます。

　さてボディ部にいろいろ書いてみたくなってきましたよね。

　それでは、見出しを付けて、さらに「表示されるかな？テスト」では味気ないので自由に文章を書いてみましょう。

>> 3.ホームページの作り方

1.ホームページの作り方

2.ホームページの作り方

3.ホームページの作り方