since2003/02/18

ちちんぷいぷい!

[ なっちゃん語録 | なっちゃんについて | TOP | おとうさん | 掲示板 | LINK | アルバム]

じゅもん番号

(タグって、呪文みたい!)


「痛いの痛いの飛んでけ〜!」と、いったら、何かしら痛みが和らいだ子供の頃・・・・
タグってそんな、呪文みたいな感じなんです!
あの動く文字、きれいな文字の色に、魅せられて、HPを作ってしまいました!
超初心者の私ですが、皆さんと、一緒に「タグ」で、遊んでみましょう!
(すでにご存知の方、いろいろ、教えてくださいね!)
じゅもん 1
太い文字にな〜〜〜〜れ!
<B>
そうです!この「タグ」を、太字にしたい文、文字の前につけるだけ!
使用例:<B>こんにちは!</B>こんにちは!
タグを書くときは、半角文字で、書きましょう!
最後に /(スラッシュ)を、入れてくださいね!
あと、大文字でも、小文字でもどちらでもOKです。
じゅもん 2
斜めになーれ!そして、まちがえたら消しちゃおっと! <I> <S>
使用例:<I>おはよう!</I>おはよう!
あっ、まちがえた! <S>おはよう!</S>おはよう!

見やすくするために、さきほどの<B>を,使っています!
それでは、ここで少し休憩!掲示板やYahooのプロフィールなどで、試してみてね!
じゅもん 3
文字の色や大きさが、変えれますように! <FONT> 大きさを指定するSIZE=" "を、fontの後に半角あけて書いて、大きさを指定します!
フォントの大きさは1〜7まで、指定でき、指定しない時は[3]の大きさになります! <FONT SIZE="5">こんばんは!</FONT> こんばんは!

今度は、色を、指定してみましょう!
色を指定するCOLOR=" "を、サイズと、同じように書きましょう!
色の指定は「色の名前」か、 「色記号」で、して下さい!
ここでは、緑(green)を、指定してみます! <FONT COLOR="GREEN">こんばんは!</FONT> こんばんは!

もちろん!サイズと色を同時に指定もできますよ! <FONT SIZE="5" COLOR="GREEN">こんばんは!</FONT> こんばんは!
*サイズの指定は"+2"とか、今までのサイズに対して二つ大きいフォントとか
ひとつ小さい"-1"とか、指定する方法もあります!
*終了タグ</FONT>を、指定しないと、以下、同じ色、サイズになってしまいます!
ちょっと、ここで休憩!
練習するのも、オンラインでは、気になりますよね、電話代など!
そこで、次回は、皆さんのブラウザで、オフラインで、遊べるように、ご案内しま〜す!
じゅもん番号

じゅもん 4
私のブラウザでも、表示できますように!
それでは、何も考えずに以下の<HTML>から</HTML>までを、コピーして見てください! <html><head><title>わ〜い!出来た!</title></head> <body bgcolor="ffcc33"><h1>すご〜い!すご〜い!できちゃった!</h1> <b><font size="4" color="blue">いろいろ、試してみてね!</B><br><br> <font size="+3"><marquee>この、動く文字はIEでしか、反映されません!</marquee> <br><br><br> <font size="4" color="green"><blink>この点滅する文字は、NN(ネットスケープ)でしか、 反映されません!</blink> <br><br><i><font color="red">いろいろ、TEXTを、変えてみてね!</font> </body></html> コピーできたら、次ぎに「メモ帳」を、起動して、今のHTML文章を
貼りつけてください!(他のエディター、一太郎、WORDでもOK)
次ぎに、「名前をつけて保存」するのですが、ファイル名.htmとし、
ファイルの種類は、「すべてのファイル」を、選んでください!
保存先は、どこでもいいのですが、とりあえず「デスクトップ」に、して見てください
さあ、完了です!デスクトップを、見てください!
早速!開いてみてください!
今回、新しく出てきた「タグ」は・・・・
<HTML>これから、HTML文書を、作成しますよ〜〜〜(宣言)
<HEAD> この文章の情報を、書きこみますよ〜〜〜(宣言)
<TITLE> ウィンドウの左上に、タイトルを、表示します!
<H1>  見出しを、表示します(H1〜H6まで指定可)!!
  <marquee> 文字をスクロールします。方向、速度も指定可
<blink> 文字を点滅します!IEでは、反映されません!!
<br> 改行する時につかいます!終了タグは、不要です!
ブラウザのバージョン、種類などに、よって、反映がことなります!
今回、MACや、ネットスケープでの反映テストは、行なっておりません!
結果を、いろいろ、教えてくださいね!
さて、次回は、画像を貼り付けて見ましょう!
じゅもん番号

じゅもん 5
画像が、貼りつけられますように!
画像を、貼りつける前に、皆さんの集められた素敵な画像は
どこに保存されてますか?画像のある場所を確認して見てくださいね!
<BODY BACKGROUND="***************"> 背景イメージの指定 <IMG SRC="***********"> 画像をページに貼りこむ

簡単でしょう?*******の、部分に、貼りつけたい画像のある場所と、ファイル名を
指定するだけです!どこに、ありますか?貼りたい画像!
HTML文書と、同じホルダーに、保存してある場合は、ファイル名を、
書くだけでいいのですが、違うフォルダに保存してある画像ファイルは
絶対パス(C:\My Documents\画像.gifの様に・・)で、表示しなくてはなりません!
面倒ですね!それでは、新しいフォルダ(A)を、作って、前回作成したHTML文書と
画像ファイルをフォルダ(A)の中へ、ドラッグしましょう!
どんどん、HTML文書や、画像ファイルが増えてくると,
わかりづらくなるので、画像だけを格納するフォルダ(IMAGE)を
作り先程のフォルダ(A)に入れましょう!
つまり、フォルダ(A)----HTML文書
と画像フォルダ(IMAGE)----画像ファイル(@@@.gif又は.jpg)
<IMG SRC="IMAGE/@@@.gifまたはjpg">・・・これで、OK!

ネット上にある画像も
<IMG SRC="http://www・・・・/・・・/@@@.gif">で指定できます。
ま、こんな、面倒なことをせずに、右クリックで、画像を先ほどの
IMAGEフォルダに、保存した方が早いかな?

<IMG SRC="画像ファイル" ALIGN="LEFT" WIDTH="150" HEIGHT="100">
上記の様に、画像の貼りつけ位置や大きさ(横幅、高さ)等を指定できます!
背景の画像は、同じ画像を連ねて全面に表示されます!
なんだか、だんだん難しくなってきたみたい!と、言うよりは
私の説明の仕方が悪いんだな、ごめんなさい!
じゅもん番号

ちょっと、ひとやすみ!
みなさんの色は、どんな色?
<font color="@@@@@@@">で、表示される色のことなのですが、
色の名前以外を記入して見てください!
おもしろいでしょう!あなたのブラウザが、がんばって
色を、探して表示してくれます! たとえば、<font color="suchan">私の色なのだ!</font> 私の色なのだ!

もちろん、読み取れない文字は、黒で表示されます!
色の名前風にanとかenなどのついた文字?なら、表示されるかな?
いろいろ、ためして見てね!
実を言うと、このHPのトップのページのフォントの色は Buleなんです!
BLUE(青)で、表示しようと思ったのですがスペルミス!
意外と良い色だったので、そのまま使っています!(^^ゞ
ここまで、タグについて、長々と書いてきましたが
HP作成ツールが、搭載されているんですね!
WORDや、一太郎には、HP作成ツールが、付属していたのは、知っていましたが
Windows95/98には、Front page exchangeという、簡単にHPが、作れるツールが
ついているのを、今日、はじめて知りました!
IE5では、編集のボタンを、クリックするだけ! WIN95では、エクスプローラーで、
プログラムフォルダの中のMS FrontPageExpressのなかのBINの中の
Fpxpress.exeファイルをWクリックで、起動します!
でも、細かい設定や、掲示板等での、書きこみに、使ってくださいね![タグ]!

さあ、気分をかえて、がんばりましょう!
じゅもん番号

じゅもん 6
音が聞こえます様に!
いろいろなホームページを、見ていると、突然、声がしたり
綺麗な音色が聞こえてくるページがありますよね!
<BGSOUND SRC="******.@@@" LOOP="5"> または <EMBED SRC="******.@@@" REPEAT="true"> ******の部分に音声ファイルを指定してください!
@@@は、以下の拡張子です
WAVE(.wav),AIFF(.aiff),MIDI(.mid)などのファイルを再生します。
ただし、<BGSOUND>では、IEでしか、再生できません。
<EMBED>を、お勧めしますが、読みこみ反映に時間がかかるようです。
LOOP、REPEATは、再生回数を、指定しますが、エンドレスにするには、それぞれ
INFINITE,TRUEを指定します!指定がない場合は、1回のみの再生になります!
実はこの<EMBED>タグは、ビデオデータなどの再生にも使用します!
最近では、<OBJECT>タグが、登場し、すべての、データ(音声、ビデオ,画像等)を
反映できるみたいです!(すみません、勉強中!)
じゅもん番号


じゅもん 7
どこにでも、とんでいきたい!
ほとんどのHPで、使用されていますね、ハイパーリンク!
いろんな所にジャンプしてみましょう! <A HREF="******">〜〜</A> ******のなかに、ジャンプ先のファイル名(URL)を、指示します。
〜〜には、表示したい、テキスト、画像(IMG SRC)などを、指示します。
<A HREF="mailto:*****">〜〜</A> メーラーを、立ち上げて、アドレスも自動的に入ります!
(*****には、メールアドレスを、いれてね!) <A HREF="ファイル名#@@@>〜〜</A> <A NAME="@@@>〜〜</A> (@@@には、好きなキーワードを、入れてね!)
NAMEで、指定した場所に、ジャンプします!
たとえば、このページで、使用しているじゅもん番号は、NAMEを
使用しています(^^ゞ・・・・ソースを、見てね(^_-)
<A NAME=” ”>は、ジャンプさせたい所に記述してくださいね!
じゅもん番号


じゅもん 8
表や枠ができますように!
表や枠が、かけると、何かと便利ですよ!
たとえば、写真に額をつけたり、画像などを、並べてみたり、
普段、何気なく見ているHPにも、結構使われています。 <table > <tr> <td> 実際、表をつくってみましょう!
見本
<table border="4" cellspacing="2"><caption>見本</caption> <tr><td bgcolor="red">赤</td> <td bgcolor="blue">青</td> <td bgcolor="yellow">黄</td></tr> <tr><td><img src="stamp1/h_13.gif "></td> <td><img src="stamp1/h_12.gif "></td> <td><img src="stamp1/h_14.gif "></td></tr></table>
<table>表を、つくりますよ〜〜
<border>外枠の太さを指定します。
<cellspacing>表内の仕切り線の太さの指定!
<caption>表のタイトル!表の横幅に対してセンタリングされます。
<tr>横1行を、指定!<tr>〜</tr>が、1行になります。
<td>横1行の間仕切り?(縦の仕切り)
<th>ここには出て来ませんが、見だし扱いで、太字になり、<td>不用。
この説明も<table>を、使ってみました(^^ゞ
この外にも、<table><td>などのタグは、色々な属性(表現)が、あります!
じゅもん番号


やっぱり、マーキー!
以前にも、少しだけ、ふれたけど、画面上を左右にスクロールさせる、<marquee>!
IEでしか、反映されないけど、やっぱり魅力的な、タグですね!今回も遊びましょう!
(Java Scriptを、使用すれば、スクロールが、IE以外でもできるけど・・・・)

おもしろいでしょ!ソースは、以下の通りです!
もちろん、タグの間にテキストも指定できます! <marquee bgcolor="brown" width=80%> <img src="image/train.gif"></marquee> タグ属性は、まとめて、後で説明しますね!次は・・・・・ <marquee behavior="alternate" scrollamount="3" width="75%"> <img src="christmas/sori1.gif"></marquee>
bgcolorスクロールさせる、背景の色
widthスクロールさせる範囲の指定:画面の何%か又は、ピクセル数を指定
direction="right"右にスクロールさせます。指定ない場合、左へ
direction="up"上にスクロールさせます。下にスクロールはdownですよ!
behavior="青色"パターンを、指定します
alternate左右に行ったり来たり・・・behaviorの後に記述
slide指定した方向にスクロールして、画面の端で、止まる
scrollamount移動距離間隔を、指定!デフォルテは6、大きければ早いスピード


そして、変り種!本来IEでは、反映できない、<blink>(点滅)も・・・・
****使いすぎに注意**
ときどき、ずれるね、ごめん!

上のブリンクもどきは、テキストを、動かす時間や、移動距離を、調整しますが、
テキストの長さ等により、反映がことなります! 興味のある方は、ソースをご覧ください!
それでは、次回更新時にお会いしましょう!(^O^)/~~


じゅもん番号


じゅもん 9
ほかに役立つタグ、でてこ〜〜い!
色々な「タグ」を、紹介してきましたが、ほかに、もっと役に立つタグを勉強してみましょう!
<center> このタグは、画像や、テキストなどを、画面の中央に反映させる(センターリング)タグです
<center>から</center>にはさまれた部分を、すべて反映します!
<p> テキスト(文字や文章など)などを、段落として、認識させるタグです。
そのため前後が1行空きになります。次のように使うと、テキストを張りつける位置が変えられます。

わ〜〜〜、右端に来てしまった(^_^;)
誰か助けて〜〜〜〜                  

<p align="right">わ〜〜〜、右端に来てしまった(^_^;)<br> 誰か助けて〜〜〜〜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> align=につづけて、right(右)、left(左)、center(中央)と、
張りつける位置を指定してみてください!!
ん?なんだ&nbsp;って?
この変なおまじないは、半角スペースを、画面上に反映する文字です!
ブラウザは、空欄(スペース)を、認知できません!このような特殊フォントを、使えば可能です!
<div> このタグも<p>と、同じ役割のタグですが、前後に1行の空きは、できません!
用途にあわせて、使い分けをしてみましょう!
<xmp>    <pre> 上の二つのタグは、整形タグと呼ばれ、ちょっと変わった使い方をします!
<xmp>は、通常表示されない「タグ」などを を、表示するタグです。
このちちんぷいぷいでも多用しています。
<pre>は、元の原稿のまま、表示するやり方です。 ただし多少の
制限があるみたいです!試してみてね!
だらだらと、書いてきてしまいましたが、このほかにも、フレームの設定をしたり、
事前にスタイルの指定をしておいてそのつど、呼び出すスタイルシートという考え方や
JavaScriptを利用して、よりアクティブなページを作る方法などたくさんあります。
また、機会があれば、一緒にお勉強しましょう!!

【ご注意】いままで出てきた、画像や音声ファイルの添付は、みなさんの
サーバーなどにFTPなどで、アップされていないと、ネット上では、反映されません!

このページの背景は【LITTLE HOUSE】さんから、いただきました