ＨＰ作成用タグ集〜
ちなみに、これは私が知ってるタグとかだけなのです。
私の知っている範囲でしか教えて差し上げられません。
しかし、ここに書いてある事だけで一般的なホームページは作れます。
私の経験や、理想的なホームページ作りについても
いろいろと書いてありますので・・・
まあ、見たい人だけ見て下さいな。
タグなんて知らなくても、ホームページが作れるソフトは色々あるけど、
やっぱり手作りの方が楽しいってもんですよ。（＾−＾；
そもそも、ホームページというのは、
ＨＴＭＬ(HyperText Markup Language)という形式で書かれたファイルです
タグは半角英数字で表記するんです☆
Ａ、ａなどはダメで、A、a でなくてはいけないんですよ。
で、大文字でも小文字でも同じく扱われるんですね〜
というか、手動タグ入力(笑) だったら普通小文字になるよね(笑)
また、改行も関係ないって事になってるようです。
だから、
@ あ
と
A あ
とかね。
また、タグは基本的にの後、そのタグの効果はここまでと言う事を
示すために、｢ここで終わりです｣というタグを入れておきます。
これを｢タグを閉じる｣といいます。具体的には、というように、
スラッシュを前に含んだタグです。
と
以外の主なタグは全て閉じる事が前提になっています。(たぶん)
タグは閉じなくてもキチンと表示されるのもありますが、
やはり閉じておくべきでしょう。
●次に・・・一番単純な｢何も無いページ｣を作るに挑戦！
まず、
これは、ＨＴＭＬだ・・・ということを表してるの。
これは、・・・なんでしょう？ (ごめん)
これは、のタグの中で使われる。そのページのタイトル。
ブラウザの上のバーに、このタイトルが表示されるんですよ。
この中に、そのページの内容を記述する。
今までの事を簡単に説明すると、こういう事ですね。
そのページのタイトル
ここがホームページの内容
で、エディタ(メモ帳とか)で 以上のように書いたファイルを
HTML形式で保存すれば、ホームページは完成するってワケ。
要するに、だ。
ファイル → 名前をつけて保存 → ｘｘｘ.htm(又は .html) の名前で保存
とすれば、それで完成だ。
もっとも、このままじゃあ 何も書いてないページだけどね。
だから、との間に、いろいろ書くんだ。
で、色々な装飾に、”タグ”が必要なんです。
●それでは、タグ一覧表。
※注意
ここに書いてある意外にもいろいろあったりするんだけど、
わたしが知らない、または、あまり必要が無いものだったりする。
あんまり特殊なのは まだ必要無いだろうし、いいよね☆
★には様々なオプション(※)をつける事が出来る。
・TEXT="" ベースとなる文字の色の指定。色の名前を入れる。
・LINK="" リンクの色を指定。色の名前を入れる。
・VLINK="" いった事のあるリンクの色を指定。色の名前を入れる。
・ALINK="" リンクをクリックした時の色を指定。色の(以下略)
・BGCOLOR="" 背景色を指定。色の(以下略)
・BACKGROUND="" 背景に張る画像ファイル名を指定。
※オプションとは
というように使うものです。
必要の無いオプションは省略してもＯＫ
※これから書く全てのタグに共通する事だけど、
色の指定・・・っていうのは 色の名前を入れる
(例：BLACK・WHITE・RED・BLUE・YELLOW・PURPLE・LIME・NAVY 等)
だけではなく、
十六進法による色の指定が出来るんです。
"#RRGGBB" Ｒは ＲＥＤ(赤)
Ｇは ＧＲＥＥＮ(緑)
Ｂは ＢＬＵＥ(青)
よくゲームの背景色を決める時もこの3色で決めるでしょ？
光の3原色ってやつですよ。
(例：黒 #000000 白 #ffffff 赤 #ff0000 緑 #00ff00 黄 #ffff00 等)
★
文字のサイズ、色の指定をオプションで指定する事が出来る。
・SIZE="" １〜７で文字の大きさを指定する。７が最大。
・COLOR="" 色の名前で文字の色を変える事が出来る。
・FACE="" これはあまりお勧めしない。フォントのタイプを変える。
そのページを見ているパソコンに存在しないフォントは
ＮＧだし。 (例：ゴシック・明朝)
★ 〜(中略)〜
見出しに使用するタグ。見出しの後には自動的に改行が入る。
H1が最大、H6が最小。
オプションは
・ALIGN="" LEFT(左寄せ) CENTER=(真ん中) RIGHT(右寄せ)
※ちなみに、このタグの中ではフォントは変えられません・・・
また、H1 より、FONT タグの サイズ7 の方が大きいです
★文字列の装飾シリーズ
文字を太字(ボールド)にする
文字を斜体(イタリック)にする
文字を等幅(タイプライター)にする
文字を上付けにする
文字を下付けにする
文字を強調する
文字を点滅させる(ネットスケープ専用。エクスプローラでは効果無し)
下線を引く
改行する。これを入れないと無限に横に表示される。最重要。
★罫線
罫線を引く
・SIZE="" ピクセル数で太さの指定をする
・WIDTH="" ピクセル数(％) で長さの指定をする
・ALIGN="" LEFT(左寄せ) CENTER(真ん中) RIGHT(右寄せ)
・COLOR="" 罫線の色を決める(エクスプローラ専用？)
★画像
![]()
画像を表示する時に使う。
・SRC="" 画像ファイル名。もちろん これが無いと表示されない。
・ALT="" 画像を表示される前は、ここに書いた文字が表示される。
転送ミスとかで画像が表示されない時なども、
この文字が表示される。私は あった方が親切だと思う。
・WIDTH="" 幅のピクセル数
・HEIGHT="" 高さのピクセル数
※画像の幅と高さについて
やはり画像はサーバーからの読み込み時間がどうしても多くなるもの。
そこで、幅や高さを指定しないと、画像がキチンと読み込まれるまで、
その画像のデータが完成しない。
キチンと指定してやると、画像を読み込んでいる最中にも、
画像の大きさの情報がわかっているので、
ブラウザがあらかじめ画像の貼るスペースをキチンと空けておいて
構築してくれる。 よって、読者にやさしいページといえるだろう・・・ね。
ちなみに、WIDTHやHEIGHTなどで画像を小さくしても、
画像のデータ量は小さくならないんです。
一度サーバーから画像を読み込んできて、それをブラウザが再構築し直す。
要するに、幅や高さの指定でどんなに小さくしても、どんなに大きくしても、
表示される時間は変わらないということですよ。（＾−＾；
ところで、よくＣＧとかのページで小さいファイルを一杯表示してあって、
クリックすると大きいサイズで表示されるっていうのがあります。
もうおわかりの通り、WIDTHやHEIGHTなどで画像を小さくしてもですね、
意味が無いんですよ。
オリジナルファイル加工し、横幅、縦幅の小さなファイルを作り、別に保存する。
たとえば、 縦100ピクセル、横100ピクセルのファイル。
で、リストのページにはその画像を表示させておき、
クリックした時にオリジナルの画像が表示されるようにする
タグで説明すると・・・(余計わからなくなるかも・・・ ＾＾；)
// クリックするとこれ
// 最初はこれを表示
ってやれば良いのですよ♪
※ブラウザは次の2種類の画像ファイルが対応しています。
・GIF(ジフ) 256色で表現する。色数の少ない画像に適している。
簡単なイラスト、タイトルロゴとかはこれ。
・JPEG(ジェイペグ) 約1670万色表示する事が出来る。
しかし、圧縮率を高くすると画像の質が落ちる。
っていうか、完全復元は無理。
写真画像やカッチョいいＣＧなんかはこれ。
しかし、ホームページの装飾として画像を貼るのはいい事だとは思うけど、
あまりに画像ファイルのデータ量が多いと、表示に果てしない時間を要して、
快適に閲覧する事が出来ません。
なので、一つのページに貼る画像ファイルデータは、なるべく少なくなるよう
勤める事が大事です。
そうですね・・・1つのページにつき、20〜30KB くらいを目安にしましょう。
★リンク
自分の他のページ、他の人のホームページへのリンクを作成する。
・HREF="" リンク先のファイル名を入れる。
例： 次のページへ
佐倉柚季さんのページへ
※で、ホームページの何たるかについてもう一つ。
そもそも、わたしのホームページのアドレスは、
http://eternal.nekoko.client.jp/ なのですけど、
これは、省略形です。
本来は、
http://eternal.nekoko.client.jp/index.htm と書くんですよ。
ファイル名を書かないと、自動的にindexというファイルに飛んでくれるってこと。
要するに・・・だ。
index.htm というファイルを普通、トップページとするわけなんです。
で、次のページが page2.htm だとしたら、
index.htmのページのどこかに、
page2に飛ぶ
というのを作っておけば 良いわけ。
今のような書き方は同じフォルダ内だということで省略できるのです。
index.htm と page2.htm が同じフォルダにある時にだけ使えます。
ちなみに、page2.htm が abc というフォルダの中にあるとすると、
page2に飛ぶ
とすればいいです。
その場合、page2.htm から index.htm に戻る時は、
indexに戻る
とすればいいのですよ。
★表の作成
表を組む時に使う
・BORDER="" 枠の太さ。ピクセル数を指定。
・WIDTH="" 表の幅。ピクセル数。
・HEIGHT="" 表の高さ。ピクセル数。
・CELLSPACING="" セル(表の中身)とセルの間の罫線の太さ。
・CELLPADDING="" セル内の文字や画像の間の幅 の指定。
・BGCOLOR="" 色の指定。
|
TABLEタグの中で使用する。これで囲んだ部分を一行とみなされる。
・ALIGN="" LEFT(左寄せ) CENTER(真ん中) RIGHT(右寄せ)
・BGCOLOR="" 色の指定。
| TABLEタグの中で使用する。これがいわゆる「セル」ってやつ。
・ROWSPAN="" 横にまたがるセル｝※
・COLSPAN="" 縦にまたがるセル｝※
・ALIGN="" LEFT(左寄せ) CENTER(真ん中) RIGHT(右寄せ)
・NOWRAP そのセル内の改行禁止
・BGCOLOR="" 色の指定。
※これは説明しにくいなあ。例を挙げて説明するね。
例１
| このセルは横２つのセルにまたがっている |
| １つ/td> | ２つ |
すると、こうなる。
・・・・・・・・・・・・・・・・・・・・・・
・このセルは横２つのセルにまたがっている ・
・・・・・・・・・・・・・・・・・・・・・・
・ １つ ・ ２つ ・
・・・・・・・・・・・・・・・・・・・・・・
例２
こっちは、こうなる。
・・・・・・・・・・・・・・・・・・・・・・
・ ・ １つ ・
・ ・・・・・・・
・このセルは縦３つのセル ・ ２つ ・
・ ・・・・・・・
・ ・ ３つ ・
・・・・・・・・・・・・・・・・・・・・・・
ま、これはいいとして。
●●以下、私は普段使わなかったり、よくわかんなかったりするタグ●●
説明文なども不十分でよくわかんなかったりするかもしれません。
必要無いと思うけど、興味があったら頑張って理解してください(笑)
★
詳しい事はよくわからないけど、このタグの中に書いた文字は
スクロールするみたい。エクスプローラ限定みたい。
・SCROLLAMOUNT="" 数字を入れる。スクロールのスピード・・・かな？
・BGCOLOR="" 背景の色を指定。
・WIDTH="" 幅をピクセル数で指定。※
・もっとあるかもしれないけど、このタグに関してはよくわからない
※前に書くのを忘れてたかもしれないけど、オプションで
ピクセル数で大きさを指定するタイプの時、
WIDTH="60%"のように、ブラウザの何％の大きさ って指定の仕方もある。
★ 段落を区切る時に使用します。
★ 文字位置を指定する時に使用します。
上の二つのＯＰ
・ALIGN="" LEFT(左寄せ) CENTER(中央) RIGHT(右寄せ)
※世間では、改行をするのにとするという習慣が広まってたりします。
確かに同じような効果を得られる物ですが・・・
これは
タグの意味を真に理解した物ではないといえます。
できればきちんと
タグを使うべきでしょうね。
★
文集の引用をする時に使用します。
このタグで囲まれた部分はほかより一段下がります。
★
説明付きの箇条書きをする時に使用します。
★ DLタグの中で使用します。箇条書きのタイトルの部分に当たります。
★ DLタグの中で使用します。説明の部分に当たります。
★ リストを作成する時に使用します。
★ ULタグの中で使用します。項目となる文字列の前に置きます。
上の二つのＯＰ
・TYPE="" DISC 黒丸 CIRCLE 白丸 SQUARE 四角
属性はブラウザによって、表示が多少異なります。
★
番号付きのリストを表示する時に使用します。
また、STARTやVALUEなどのオプションにより、
任意の番号からリストを始める事も出来ます。
★ OLタグの中で使用します。項目となる文字列の前に置きます。
上の二つのＯＰ
・TYPE="" A:英大文字 a:英小文字 1:アラビア数字
I:ギリシア数字大文字 i:ギリシア数字小文字
・START=""
・VALUE=""
※まあ、訳わからないのは例を挙げてみるのが一番でしょうかね。
- コーヒー
- 紅茶
- ミルク
とか書くと・・・
3 コーヒー
2 紅茶
1 ミルク
って表示されるです・・・(確かそうだったよ。たぶん)
このくらいかな？
後はタグではないんだけど、ホームページを作る上での事。
● これで囲まれた部分はＨＴＭＬ上には表示されない。
要するに、
私のページ
これから私のページを始める！！
見たくない者は土下座してひれ伏せ！！
と書いておくと、
実際のページには・・・
私のページ
これから私のページを始める！！
見たくない者は土下座してひれ伏せ！！
・・・と表示されるって事。
ま、これで勘弁してね。
今日の講習はこれでおわり〜★
// 最初はこれを表示