Kefi_Pallhkari WebPage作り講座　タグ（タイトル、水平線、背景をととのえる）

ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）

タイトル、水平線、背景をととのえてみようメモ帳でタグをうつ・・・・・これが一番確実。かも。

〈スタートメニュー〉→〈プログラム〉→〈アクセサリ〉の中のメモ帳。
あるいはワープロで「htmlテキスト」をうって行くのが一番確実かもしれません。

用意するモノ

・・・・・に加えて、更に

・「mypage」のフォルダーの中に「img」というようなフォルダーを作り、そこに背景用の画像を保存しておきましょう。
「薄すぎるかな？」と思うような画像でちょうどいいです。あまり濃いと文字が見にくいです。
私はとりあえず「br_kefi2_gr.jpgの背景用の画像を置きました。

まずうってみましょう。「メモ帳」をテキストエディターとしてタグを打ってみよう。
〈スタートメニュー〉→〈プログラム〉→〈アクセサリ〉→〈メモ帳〉でメモ帳を起動して以下の様にキーインしてみましょう。

１０，タイトルを書き直してみましょう

以下の四角の中の通りに半角アルファベットで打ってみましょう。

<html>

<head>
<title>タイトルをここに書いてみよう。今回はページをととのえます。</title>
</head>

<body>

ここに本文が入ります。
<img src="img/b-kabuto_s.jpg" width="80" height="60"> 
先ほどの画像も入っています。

</body>
</html>

できたでしょうか？

できたらマウスで<ファイル>→<名前をつけて保存>を選び
「あい・えぬ・でぃ・いい・えっくす・はいふん・７・どっと・えいっち・てぃ・えむ・える」index-10.htmlという名前で先ほどのmypageのフォルダーに保存をして下さい。

↑この一連の作業を以下、
↓このようにあらわしていきます。

index-10.html

</body>
</html>

これをインターネットエクスプローラー（Ｉ．Ｅ．）で見るとどうなっているでしょうか。
あなたのコンピュータのフォルダー<mypage>→<index-10.html>をマウスでクリックしてみましょう。

多分このように出てくると思います。

青いタイトルの所を見てみて下さい。かわっていますよね。

少し解説・・・・・ポイントは<head>□□□</head>にはさまれた部分です。
その中の更に<title>□□□</title>ではさまれた部分を書き換えればいいのです。

<head>
<title>タイトルをここに書いてみよう。今回はページをととのえます。</title>
</head>

１１，段落と段落の間に水平線を入れてみましょう。

index-11.html

<html>

<head>
<title>タイトルをここに書いてみよう。今回はページをととのえます。</title>
</head>

<body>

一番最初の段落です。
<img src="img/b-kabuto_s.jpg" width="80" height="60"> 
先ほどの画像も入っています。ここが２番目の段落です。
<hr>
３番目の段落です。

</body>
</html>

これをインターネットエクスプローラー（Ｉ．Ｅ．）で見るとどうなっているでしょうか。
あなたのコンピュータのフォルダー<mypage>→<index-11.html>をマウスでクリックしてみましょう。

多分このように出てくると思います。

少し解説
<p>　ここからここまで　　</p>	「ここからここまで」が一つの段落であることを示していました。
<hr>	段落と段落の間にこれを入れると、水平線になります。

１２，背景画像をはってみましょう。

index-12.html

<html>

<head>
<title>タイトルをここに書いてみよう。今回はページをととのえます。</title>
</head>

<body background="img/br_kefi2_gr.jpg">

ここに本文が入ります。
<img src="img/b-kabuto_s.jpg" width="80" height="60"> 
先ほどの画像も入っています。

</body>
</html>

これをインターネットエクスプローラー（Ｉ．Ｅ．）で見るとどうなっているでしょうか。
あなたのコンピュータのフォルダー<mypage>→<index-12.html>をマウスでクリックしてみましょう。

多分このように出てくると思います。

少し解説

元々ある<body>タグが変わっています。
br_kefi2_gr.jpg　は張り付ける背景画像の名前。
img/br_kefi2_gr.jpg　でそれがimg/というフォルダにあることを示しています。
background="img/br_kefi2_gr.jpg"　でそれをバックグラウンドすなわち背景に使うことを宣言しています。

それが<body>タグの中に入っています。

「動く壁紙素材屋」へのリンク

きれいな壁紙をいただけます。

本文にもどる

Last update Sep.5,2003