since2003/02/18
ちちんぷいぷい！
[ なっちゃん語録 | なっちゃんについて | TOP | おとうさん | 掲示板 | LINK | アルバム]
じゅもん番号
(タグって、呪文みたい！）
「痛いの痛いの飛んでけ〜！」と、いったら、何かしら痛みが和らいだ子供の頃・・・・
タグってそんな、呪文みたいな感じなんです！
あの動く文字、きれいな文字の色に、魅せられて、ＨＰを作ってしまいました！
超初心者の私ですが、皆さんと、一緒に「タグ」で、遊んでみましょう！
(すでにご存知の方、いろいろ、教えてくださいね！）
-
じゅもん 1
- 太い文字にな〜〜〜〜れ！
<B> - 太い文字にな〜〜〜〜れ！
使用例：
タグを書くときは、半角文字で、書きましょう！
最後に /（スラッシュ）を、入れてくださいね！
あと、大文字でも、小文字でもどちらでもＯＫです。
じゅもん ２
斜めになーれ！そして、まちがえたら消しちゃおっと！
あっ、まちがえた！
見やすくするために、さきほどの＜Ｂ＞を,使っています！
それでは、ここで少し休憩！掲示板やYahooのプロフィールなどで、試してみてね！
じゅもん ３
文字の色や大きさが、変えれますように！
フォントの大きさは１〜７まで、指定でき、指定しない時は[３]の大きさになります！
今度は、色を、指定してみましょう！
色を指定するCOLOR=" "を、サイズと、同じように書きましょう！
色の指定は「色の名前」か、 「色記号」で、して下さい！
ここでは、緑（green)を、指定してみます！
もちろん！サイズと色を同時に指定もできますよ！
*サイズの指定は"+2"とか、今までのサイズに対して二つ大きいフォントとか
ひとつ小さい"-1"とか、指定する方法もあります！
*終了タグ＜/FONT＞を、指定しないと、以下、同じ色、サイズになってしまいます！
ちょっと、ここで休憩！
練習するのも、オンラインでは、気になりますよね、電話代など！
そこで、次回は、皆さんのブラウザで、オフラインで、遊べるように、ご案内しま〜す！
じゅもん番号
じゅもん ４
私のブラウザでも、表示できますように！
それでは、何も考えずに以下の＜HTML＞から＜/HTML＞までを、コピーして見てください！
貼りつけてください！（他のエディター、一太郎、WORDでもOK)
次ぎに、「名前をつけて保存」するのですが、ファイル名.htmとし、
ファイルの種類は、「すべてのファイル」を、選んでください！
保存先は、どこでもいいのですが、とりあえず「デスクトップ」に、して見てください
さあ、完了です！デスクトップを、見てください！
早速！開いてみてください！
今回、新しく出てきた「タグ」は・・・・
＜HTML＞これから、HTML文書を、作成しますよ〜〜〜(宣言）
＜HEAD＞ この文章の情報を、書きこみますよ〜〜〜（宣言）
＜TITLE＞ ウィンドウの左上に、タイトルを、表示します！
＜H1＞ 見出しを、表示します（H１〜H6まで指定可）！！
＜marquee＞ 文字をスクロールします。方向、速度も指定可
＜blink＞ 文字を点滅します！IEでは、反映されません！！
＜ｂｒ＞ 改行する時につかいます！終了タグは、不要です！
ブラウザのバージョン、種類などに、よって、反映がことなります！
今回、MACや、ネットスケープでの反映テストは、行なっておりません！
結果を、いろいろ、教えてくださいね！
さて、次回は、画像を貼り付けて見ましょう！
じゅもん番号
じゅもん ５
画像が、貼りつけられますように！
画像を、貼りつける前に、皆さんの集められた素敵な画像は
どこに保存されてますか？画像のある場所を確認して見てくださいね！
簡単でしょう？*******の、部分に、貼りつけたい画像のある場所と、ファイル名を
指定するだけです！どこに、ありますか？貼りたい画像！
HTML文書と、同じホルダーに、保存してある場合は、ファイル名を、
書くだけでいいのですが、違うフォルダに保存してある画像ファイルは
絶対パス（C:\My Documents\画像.gifの様に・・）で、表示しなくてはなりません！
面倒ですね！それでは、新しいフォルダ(A)を、作って、前回作成したHTML文書と
画像ファイルをフォルダ（A）の中へ、ドラッグしましょう！
どんどん、HTML文書や、画像ファイルが増えてくると,
わかりづらくなるので、画像だけを格納するフォルダ（IMAGE）を
作り先程のフォルダ（A)に入れましょう!
つまり、フォルダ（A)----HTML文書
と画像フォルダ（IMAGE)----画像ファイル（@@@.gif又は.jpg）
＜IMG SRC＝"IMAGE/@@@.gifまたはjpg"＞・・・これで、ＯＫ！
ネット上にある画像も
＜IMG SRC＝"http：//www・・・・/・・・/@@@.gif"＞で指定できます。
ま、こんな、面倒なことをせずに、右クリックで、画像を先ほどの
IMAGEフォルダに、保存した方が早いかな？
＜IMG SRC="画像ファイル" ALIGN="LEFT" WIDTH="150" HEIGHT="100"＞
上記の様に、画像の貼りつけ位置や大きさ（横幅、高さ）等を指定できます！
背景の画像は、同じ画像を連ねて全面に表示されます！
なんだか、だんだん難しくなってきたみたい！と、言うよりは
私の説明の仕方が悪いんだな、ごめんなさい！
じゅもん番号
ちょっと、ひとやすみ！
みなさんの色は、どんな色？
＜font color＝"@@@@@@@"＞で、表示される色のことなのですが、
色の名前以外を記入して見てください！
おもしろいでしょう！あなたのブラウザが、がんばって
色を、探して表示してくれます！ たとえば、
もちろん、読み取れない文字は、黒で表示されます！
色の名前風にanとかenなどのついた文字？なら、表示されるかな？
いろいろ、ためして見てね！
実を言うと、このＨＰのトップのページのフォントの色は Buleなんです！
BLUE(青）で、表示しようと思ったのですがスペルミス！
意外と良い色だったので、そのまま使っています！(^^ゞ
ここまで、タグについて、長々と書いてきましたが
ＨＰ作成ツールが、搭載されているんですね！
WORDや、一太郎には、ＨＰ作成ツールが、付属していたのは、知っていましたが
Windows95/98には、Front page exchangeという、簡単にＨＰが、作れるツールが
ついているのを、今日、はじめて知りました！
IE5では、編集のボタンを、クリックするだけ！ WIN95では、エクスプローラーで、
プログラムフォルダの中のMS FrontPageExpressのなかのBINの中の
Fpxpress.exeファイルをＷクリックで、起動します！
でも、細かい設定や、掲示板等での、書きこみに、使ってくださいね![タグ]！
さあ、気分をかえて、がんばりましょう！
じゅもん番号
じゅもん ６
音が聞こえます様に！
いろいろなホームページを、見ていると、突然、声がしたり
綺麗な音色が聞こえてくるページがありますよね！
@@@は、以下の拡張子です
WAVE(.wav),AIFF(.aiff),MIDI(.mid)などのファイルを再生します。
ただし、＜BGSOUND＞では、IEでしか、再生できません。
＜EMBED＞を、お勧めしますが、読みこみ反映に時間がかかるようです。
LOOP、REPEATは、再生回数を、指定しますが、エンドレスにするには、それぞれ
INFINITE,TRUEを指定します！指定がない場合は、1回のみの再生になります！
実はこの＜EMBED＞タグは、ビデオデータなどの再生にも使用します！
最近では、＜OBJECT＞タグが、登場し、すべての、データ（音声、ビデオ，画像等）を
反映できるみたいです！（すみません、勉強中！）
じゅもん番号
じゅもん ７
どこにでも、とんでいきたい！
ほとんどのＨＰで、使用されていますね、ハイパーリンク！
いろんな所にジャンプしてみましょう！
〜〜には、表示したい、テキスト、画像（IMG SRC）などを、指示します。
（*****には、メールアドレスを、いれてね！）
NAMEで、指定した場所に、ジャンプします！
たとえば、このページで、使用しているじゅもん番号は、NAMEを
使用しています(^^ゞ・・・・ソースを、見てね(^_-)
＜A NAME＝” ”＞は、ジャンプさせたい所に記述してくださいね！
じゅもん番号
じゅもん ８
表や枠ができますように！
表や枠が、かけると、何かと便利ですよ！
たとえば、写真に額をつけたり、画像などを、並べてみたり、
普段、何気なく見ているＨＰにも、結構使われています。
| 赤 | 青 | 黄 |
|
 |
 |
| ＜table＞ | 表を、つくりますよ〜〜 |
| ＜border＞ | 外枠の太さを指定します。 |
| ＜cellspacing＞ | 表内の仕切り線の太さの指定！ |
| ＜caption＞ | 表のタイトル！表の横幅に対してセンタリングされます。 |
| ＜tr＞ | 横1行を、指定！＜tr＞〜＜/tr＞が、1行になります。 |
| ＜td＞ | 横1行の間仕切り？（縦の仕切り） |
| ＜th＞ | ここには出て来ませんが、見だし扱いで、太字になり、＜td＞不用。 |
この外にも、＜table＞＜td＞などのタグは、色々な属性（表現）が、あります！
じゅもん番号
やっぱり、マーキー！
以前にも、少しだけ、ふれたけど、画面上を左右にスクロールさせる、＜marquee＞！
ＩＥでしか、反映されないけど、やっぱり魅力的な、タグですね！今回も遊びましょう！
(Java Scriptを、使用すれば、スクロールが、IE以外でもできるけど・・・・)
おもしろいでしょ！ソースは、以下の通りです！
もちろん、タグの間にテキストも指定できます！
| bgcolor | スクロールさせる、背景の色 |
| width | スクロールさせる範囲の指定：画面の何％か又は、ピクセル数を指定 |
| direction="right" | 右にスクロールさせます。指定ない場合、左へ |
| direction="up" | 上にスクロールさせます。下にスクロールはdownですよ！ |
| behavior="青色" | パターンを、指定します |
| alternate | 左右に行ったり来たり・・・behaviorの後に記述 |
| slide | 指定した方向にスクロールして、画面の端で、止まる |
| scrollamount | 移動距離間隔を、指定！デフォルテは6、大きければ早いスピード |
そして、変り種！本来IEでは、反映できない、＜blink＞（点滅）も・・・・
ときどき、ずれるね、ごめん！
上のブリンクもどきは、テキストを、動かす時間や、移動距離を、調整しますが、
テキストの長さ等により、反映がことなります！ 興味のある方は、ソースをご覧ください！
じゅもん番号
じゅもん ９
ほかに役立つタグ、でてこ〜〜い！
色々な「タグ」を、紹介してきましたが、ほかに、もっと役に立つタグを勉強してみましょう！
＜center＞から＜/center＞にはさまれた部分を、すべて反映します！
そのため前後が1行空きになります。次のように使うと、テキストを張りつける位置が変えられます。
わ〜〜〜、右端に来てしまった(^_^;)
誰か助けて〜〜〜〜
張りつける位置を指定してみてください！！
ん？なんだ
この変なおまじないは、半角スペースを、画面上に反映する文字です！
ブラウザは、空欄（スペース）を、認知できません！このような特殊フォントを、使えば可能です！
用途にあわせて、使い分けをしてみましょう！
＜ｘｍｐ＞は、通常表示されない「タグ」などを を、表示するタグです。
このちちんぷいぷいでも多用しています。
＜pre＞は、元の原稿のまま、表示するやり方です。 ただし多少の
制限があるみたいです！試してみてね！
だらだらと、書いてきてしまいましたが、このほかにも、フレームの設定をしたり、
事前にスタイルの指定をしておいてそのつど、呼び出すスタイルシートという考え方や
JavaScriptを利用して、よりアクティブなページを作る方法などたくさんあります。
また、機会があれば、一緒にお勉強しましょう！！
【ご注意】いままで出てきた、画像や音声ファイルの添付は、みなさんの
サーバーなどにＦＴＰなどで、アップされていないと、ネット上では、反映されません！
このページの背景は【LITTLE HOUSE】さんから、いただきました