本文を書き込む




さて、先ほどのこの状態ではホームページを訪れた人は、
一目でどんなホームページなのか理解できません。

いよいよ本文を書き込んでいきましょう。


そのまえに・・・・<br> タグについて理解します。



例えばこの文章。

今日は朝起きてから飯食ってウンコして仕事に行きました。 電車でまたウンコしたくなったけど我慢しました。 会社に行ったらウンコしたい気分が消えてました。 でもウンコが体に残っていると考えるだけで気分が最悪です。 女子社員の胸をあいさつのつもり揉んだらミゾオチに蹴りが! 無事にウンコ出ました! みんなの前で・・・



ものすごく読みづらいですね。

こういうホームページは目が疲れるので、読んでくれません。

そこで・・・



今日は朝起きてから飯食ってウンコして仕事に行きました。<br> 電車でまたウンコしたくなったけど我慢しました。<br> 会社に行ったらウンコしたい気分が消えてました。<br> でもウンコが体に残っていると考えるだけで気分が最悪です。<br> 女子社員の胸をあいさつのつもり揉んだらミゾオチに蹴りが!<br> 無事にウンコ出ました! みんなの前で・・・<br>


こんな風に適当な位置に <br> を加えてあげると・・・・



今日は朝起きてから飯食ってウンコして仕事に行きました。
電車でまたウンコしたくなったけど我慢しました。
会社に行ったらウンコしたい気分が消えてました。
でもウンコが体に残っていると考えるだけで気分が最悪です。
女子社員の胸をあいさつのつもり揉んだらミゾオチに蹴りが!
無事にウンコ出ました! みんなの前で・・・


このように改行されるわけです。



<br> タグは 改行 の命令なのです。

ほとんどのタグが <命令開始タグ> と </命令終了タグ> の対で使われますが、
<br> は、単独で使用されます。



では・・・・ index.html のファイルからソースを表示して、
<br>タグを意識して本文を書き込んでいきましょう。

まずは誰かが訪れた時にすぐにわかるように、
題名と説明文を入力。

さらにそこから飛びたい部屋の名前とかも適当に入れときましょう。





こんな感じで入力します。


入力が終わったら、やはり上書き保存をして、
 index.html の窓を開いて更新してみます。





このように、一目でどんな部屋なのかがわかります。

空白が自分の思ったように表示されるように<br>タグを増やしたり削ったりしましょう。







せっかくなので題名をもう少し目立たせたいなぁ。


では新しいタグです。


<font size=△ color=□>○○○</font>


このタグは ○○○ に入力した文字に対して、
サイズを変更させたり、色を変えさせるタグになります。
これはよく使います。


文字サイズは 1 〜 7 まで設定でき △ に入力します。

カラーは、好きなカラーの名前を □ に入力しましょう。



<font size=1 color=yellow>趣味友遊</font>
趣味友遊

<font size=2 color=red>趣味友遊</font>
趣味友遊

<font size=3 color=green>趣味友遊</font>
趣味友遊

<font size=4 color=purple>趣味友遊</font>
趣味友遊

<font size=5 color=blue>趣味友遊</font>
趣味友遊

<font size=6 color=brown>趣味友遊</font>
趣味友遊

<font size=7 color=fuchsia>趣味友遊</font>
趣味友遊





他にも文字に効果を与えるタグをいくつか紹介します。




<i>趣味友遊</i>   趣味友遊を斜めに表示

趣味友遊


<b>趣味友遊</b>   趣味友遊を太字

趣味友遊


<s>趣味友遊</s>   趣味友遊に取り消し線

趣味友遊


<u>趣味友遊</u>   趣味友遊に下線

趣味友遊


<ruby>趣味友遊<rt>しゅみゆうゆう</rt></ruby>   趣味友遊にルビを付ける

趣味友遊しゅみゆうゆう


<center>趣味友遊</center>   趣味友遊を中央に表示

趣味友遊



<marquee direction=left>趣味友遊</marquee>   趣味友遊を右から左に移動

趣味友遊


<font style=background=paleturquoise size=5 color=red>趣味友遊</font>   背景色設定

趣味友遊



<marquee align=left><b><i><s><font style=background=paleturquoise size=6 color=indigo>趣味友遊</font></s></i></b></marquee><br>

このように複合すれば、

趣味友遊

となります。



ちなみにの題名は・・・・・・・

<b><i><font size=5 color=red>趣</font><font size=5 color=green>味</font><font size=5 color=orange>友</font><font size=5 color=blueviolet>遊</font></b></i>

長!






それでは、index.html のソースに書き込んでいきましょう。


<html>
<head>
<title>ひみつのお部屋</title>
</head>
<body bgcolor=paleturquoise text=green>
<br>
<i><font size=6 color=red>ひみつ</font><font size=6>のお部屋</font></i><br>
<br>
<br>
ここは私のひみつのお部屋です。<br>
ひみつの日記やひみつの写真をアップします。<br>
ひみつなので見た人はぶっとばします。<br>
<br>
<br>
自己紹介<br>
日記のお部屋<br>
写真のお部屋<br>
</body>
</html>


思うようにできましたですか?

じゃあ次は、線を引いたり枠組みしたりするタグを覚えましょう。



次へ


趣味友遊的ホームページ講座
五目の部屋
TOP
inserted by FC2 system