タグ・ＨＴＭＬの書き方

[PR]今日のﾆｭｰｽは
｢Infoseek ﾓﾊﾞｲﾙ｣

		花の素材	季節の素材	キャラクター素材	パッチワーク素材	万華鏡壁紙	初心者講座	リンク集	緑の写真	猫の写真
初　心　者　講　座		タグ・THMLを例題を出しながら説明します ①画像の保存方法　②タグHTML　③たのしいレイアウト

　　　画像をアップするって？

作ったり、もらったりした画像は自分

のファイルに保存します。それだけじ

ゃ、他の人が見ることができません。

で、みんなが集まるサーバーに預け

るのです。閲覧者はサーバーまで見

に行く　といった感じかな。

～普通のＨＰとガイアックスの違い～

普通のＨＰはＦＴＰなどで　画像をサーバーに転送します。画像名は自分の付けたままの名

前でタグに貼りつけます。　　　ガイアックス系のＨＰは「画像アップローダー」で画像をＵＲＬ

（ｈｔｔｐ～始まるやつ）に変えてから、タグに入れて使います。アップロードのしかたは　各サ

イトに必ず説明があります。画像をアップする容量（数？）がだいたい決まっているので注

意して。

～準備・心得～

１　アイコンを集めておく　（ガイアックス＝アップしておく）

　　アイコン（画像、イラスト）や壁紙（ＨＰ背景）は自分で書くか、「素材屋」さんなどから手に

　　入れてね。素材屋さんは検索で「無料素材」とか「無料アイコン」などで調べてみて。

２　画像を使う場合は　キチンとダウンロードしましょう。ダウンロードのしかたはこちら

　　直リンク（そのサイトの画像ＵＲＬを直接使う事）は絶対にしない事。サーバーに負担が

　　かかるからです。

それでは頑張ってトライしてみましょ～

※タグは必ず　半角英数字。ひらがなカタカナは×
※下の青い部分はそのままに！赤文字に指示通りの設定をします。
※半角あけたり、誤字脱字に気をつけてね。
※ペーストして貼りつけて、赤文字部分だけ書きなおすとスペルの間違いは防げるかもね。

壁紙の設定　①
<body background="ここにファイル名">
ＧＡＩＡＸ「コントロールボックス」→「デザイン」→「背景の画像」→「画像無し」に設定「またはＵＲＬ」のところにｈｔｔｐから始まるアップロードした壁紙のＵＲＬ（タグ）を入れる。ＵＲＬとは　http://～（壁紙のURLの続き）
壁紙の設定　② （スクロールしても動かない壁紙）
<body background="ここに壁紙名" bgproperties="fixed"> 例）　壁紙ファイル名が「hana」だとすると　<body background="hana.gif" bgproperties="fixed"> 「hana」の後ろの拡張子「.gif」はgifで保存したからです。その他画像の拡張子として「JPEG」「PNG」「BMP」などがあります。
ＧＡＩＡＸの場合 http://～壁紙のURL □bgproperties=fixed ※　□はURLの後ろに半角あけという意味です。。
画像を表示するアイコン・ライン・写真など
<img src="ここに画像名"> 例）　<img src="neko_01.gif"> ※　ＧＡＩＡＸは　ここに画像名のところに　http://～の画像URL　を入れます。	例画像名：neko_01.gif
画像に代替テキストを入れる画像にマウスをのせると　説明文がでてきます
<img src="ここに画像名" alt="ここにお好きな説明文"> 例）　<img src="neko_01.gif" alt="ねこのひなたぼっこ"> ※　ＧＡＩＡＸは　ここに画像名のところに　http://～の画像URL　を入れます。	例マウスを乗せてみて画像名はneko_01.gif
リンクを貼る　①　文字編文字をクリックすると　他のサイトへ飛びます
<a href="ここにリンクしたいＨＰアドレス">○○のHPへみたいにここに書く</a> 例）　<a href="http://terara.hp.infoseek.co.jp/index.html">素材屋さんへ</a>	例クリックしてみて　素材屋さんへ
リンクを貼る　②　画像編画像をクリックすると　他のサイトへ飛びます。リンクバナーはこのやり方で貼りつけます。
<a href="ここにリンクしたいＨＰアドレス"><img src="ここに画像名"></a> 例）　<a href="http://terara.hp.infoseek.co.jp/index.html"><img src="neko_01.gif"> ※　ＧＡＩＡＸは　ここに画像名のところに　http://～の画像URL　を入れます。	例クリックしてみて
メール　①　文字編自分宛にメールが届くようにする（文字をクリックするとメールが開く）
<a href="mailto:ここに自分のメールアドレス">「メールはこちら」または好きな言葉を</a> 例）　<a href="mailto:nobutami@hotmail.com">メールちょうだいな♪</a>	例メールちょうだいな♪
メール　②　画像編自分宛にメールが届くようにする（画像をクリックすると　メールが開く）
<a href="mailto:ここに自分のメールアドレス"><img src="ここに画像名"></a> 例）　<a href="mailto:nobutami@hotmail.com"><img src="bosuto15.gif"></a> ※　ＧＡＩＡＸは　ここに画像名のところに　http://～の画像URL　を入れます。	例　　　画像名：bosuto15.gif

基本のタグ

タ　　グ

例

普通

例えば・・・
<i>は文字を斜体にします。
<i>　　→斜体の始まり、
</i>　　→斜体の終わり
『/』スラッシュが終わりのしるしになります。

ここに文字

センタリング
中央揃え

<CENTER>ここに文字</CENTER>

ちなみに画像の場合↓
<CENTER><img src="画像名.gif"></CENTER>

ここに文字

斜　体

<I> ここに文字</I>

ここに文字

下　線

<U> ここに文字 </U>

ここに文字

サイズ

<FONT SIZE="5">ここに文字</FONT>

ここに文字

カラー
文字の色

<FONT COLOR="ここに色のタグ、これ→#26d972"> ここに文字</FONT>

～色の見本～
この枠内の英数字が色のタグです。他にもたくさんある。

#FFCCCC	#FF99CC	#FF00CC	#FF0066	#FF0000
#FFFF00	#FFFF66	#FFCC33	#FF9966	#FF9900
#CCFFCC	#00FF99	#33FF33	#00FF66	#00CC66
#99FFFF	#99CCFF	#9999FF	#CC99FF	#0000CC
#000000	#CCCCCC	#990099	#CC6600	#FFFFFF

ここに文字

応　用
タグの組合せ

<U><I><FONT COLOR="#26d972" SIZE="5">ここに文字</FONT></I></U>

～いろんなタグを組み合わせた時の約束事～

気づきましたか？　タグの（終わり方の）順番。
最初に記した<u>の終わりは文字を挟んで最後になってます。
最後に記した<font>の終わりは文字を挟んで最初になってます。
説明づらいけど、真中（文字）を挟んで左右対称ですね。

ここに文字

テーブル（表）実例
いろいろ書くより実例を並べて見ました。

※　<TD>と</TD>の間にある文字や数字が表の中に納まるんだよ。
　　だから、文字や数字は自分の好きな言葉を入れ替えて作ってみてね。

※　<TR>は行だよ。よーくタグを見ると、行の数だけTRが出没してるね。

※　表を中央揃いにする場合タグの一番最初に<CENTER>
　　一番終わりに</CENTER>を入れると真中に表示されます。

テーブル見本

タ　グ

行１列1のテーブル

行1列2のテーブル

行２列2のテーブル

コレが	テーブル
だよ	！！！

行2列5のテーブル

あ	い	う	え	お
か	き	く	け	こ

タイトル1が入ったテーブル

タイトル
１	２	３	４	５
あ	い	う	え	お

応　用　編

表の枠線を太くして、色を付けてみた

色　ピンク＝#ff00ff
黄色＝#FFFF00
すきな色に設定してみてね。
色見本は上を参考に！

a	b	c	d	e	f
g	h	i	j	k	l