| １，はじめに |
| ２，文字 |
| ３，リスト |
| ４，画像 |
| ５，リンク |
| ６，背景 |
| ７，横線 |
ホームページを作るとき、拡張子が「ｈｔｍｌ」というファイルを作る必要があります
（このページのアドレスを見てください。最後がｈｔｍｌとなっていますね！）
では、どのようにして作るのでしょうか？
Windowsをつかっているかたは「メモ帳」を使います。(ただし、ﾜｰﾄﾞﾊﾟｯﾄなどは使えません。)
Macintoshならｸﾗﾘｽﾜｰｸｽ，UNIXならmuleを使って制作します。
では、どのような内容を書けばいいのでしょうか？
みなさんのブラウザには「ソース表示」や「ＨＴＭＬ形式で表示」というメニューが
あるとおもいます。そうすればこのページがどのように書かれているかがわかると思います。
さて、では実際に作ってみましょう
<HTML> <HEAD> <TITLE>***(ここにページのタイトルを)***</TITLE> </HEAD> <BODY> ＊ ＊ (ここに内容を書きます。) ＊ ＊ </BODY> </HTML>
以上のように作ってください。これは、どのページにも必要となります。
<>はタグといいます。
ホームページを作る上で特徴的なことは、ほとんどの機能は
<something>で始まって<／something>で終わるということです。
（somethingにはTITLE,H2などが入ります）では、実際に作ってみましょう。
ブラウザごとによって、利用できない機能があります。
そこで、両方あわせて７０％以上のシェアがある
MSIE3.0とNN3.0について
それぞれの機能が実際に利用できるか載せています。
またNN4.0はNN3.0が、MSIE4.0もMSIE3.0が当てはまると考えていいと思います。
 |
 |
|
○ |
|
○ |
普通に文字を書き込むだけで簡単に表示ができます。
あいうえお
と書くと
あいうえお
と、表示することができます。
ただし改行しても、ブラウザには表示はされません。(改行されないまま)
|
○ |
|
○ |
見出しをつけるときは大きな太文字をよく使います。
そのときに使うのが<Ｈ１><Ｈ２>，，，<Ｈ６>です。<Ｈ１>が
一番大きくて６段階あります。次の例を見てください
<Ｈ１>大きな文字<／Ｈ１>
<Ｈ２>２番目の文字<／Ｈ２>
<Ｈ３>３番目の文字<／Ｈ３>
<Ｈ４>４番目の文字<／Ｈ４>
<Ｈ５>５番目の文字<／Ｈ５>
<Ｈ６>小さな文字<／Ｈ６>
これを書くと
となります。
|
○ |
|
○ |
ｆｏｎｔタグを使って次のようなことができます。
<font color="#ff0000">赤い文字</font> →赤い文字
<font size="5">サイズ５の文字</font>
→サイズ５の文字
<font size="+2">サイズ＋２の文字</font>
→サイズ＋２の文字
font colorのところでFF0000と書きましたが最初のｆｆに
相当するのが赤の色,次が緑，青となっています。（０からＦＦまで）
ｓｉｚｅは７から−７まで指定し、７が最大です。ほかにも
さらに、
<ｆｏｎｔ ｆａｃｅ＝"ＦＡ ぽぽる" size=+2>ぽぽる文字<／ｆｏｎｔ>
とフォント名を指定すると
ぽぽる文字
になります。ほかには、
ＭＳ Ｐゴシック
ＭＳ ゴシック
ＭＳ 明朝
ＦＡ 丸ゴシックＭ
ＦＡ 隷書Ｍ
ＦＡ 教科書Ｍ
などがあります。つまり、クライアントがこのタイプのFontを
もっていれば表示できます。
|
○ |
|
○ |
また、<P>や<BR>を使って強制的に改行ができます。
<ＢＲ>は改行なので単独で用いればいいのですが
<Ｐ>は「段落」を意味するので<／Ｐ>でその段落を
囲むのが望ましいです。
(たいていのブラウザは<／Ｐ>単独で１行あける改行をします。)
|
○ |
|
○ |
今以外のものでも次のような修飾タグがあります。
<Ｂ>太い字<／Ｂ> →太い字
<strong>強調</strong> →強調
<Ｉ>イタリック体<／Ｉ> →イタリック体
<U>下線</U> →下線
<S>訂正</S> →訂正
|
○ |
|
○ |
<ＵＬ>
<ＬＩ>ｆｉｒｓｔ
<ＬＩ>ｓｅｃｏｎｄ
<ＬＩ>ｔｈｉｒｄ
<／ＵＬ>は、
<ＵＬ>でリストが始まることを宣言し、<ＬＩ>に項目を書きます
<ＵＬ>の代わりに<ＯＬ>をつかうと
と、数字で打つことができます。
|
○ |
|
○ ただし、ALT機能はない |
<ｉｍｇ ｓｒｃ＝”bmp.gif”>
とすると、
となります。
align=top,left,rightで表示する位置を決めることができます。
ところで、表示できる絵はGIFやjpegなどでないと使えません。
(bmpはgifなどに変換しないと使えない)
<img src＝"bmp.gif" align=right ALT="絵" width="64" height="64">
alignで絵を表示する位置，ＡＬＴで絵の題名を指定します。
これは、絵を取り込む前や絵を取り込めないと題名が表示されます。
MSIEでは、マウスを近づけるとワンポイントヘルプのように表示されます。
widthで幅,heightで高さを指定します。実際の絵より大きくすると絵が拡大されます。
ここでは、３２×３２の絵を６４×６４にしたため拡大されました。
最近、絵が動くページ（ｱﾆﾒｰｼｮﾝ）があります。
これは、ＨＴＭＬには特別な仕掛けをする必要はなく、GIFに細工がしてあります。
GIFはBMPと違って「透明色」や「アニメーション」といった機能があります。
つまり、そのような機能を持ったGIFファイルを作ればいいわけです。
アニメを作るには、表示する複数のＧＩＦファイルを用意します。
そして、animeGIFを作るソフトでアニメＧＩＦファイルを作ります。
animeGIFを作るソフトは、次のページやフリーソフトを利用してください。
|
○ |
|
○ |
<A
HREF="http://www.airnet.ne.jp">AIRNet</A>
とすると
となりAIRNetにリンクが張られました。
同ﾃﾞｨﾚｸﾄﾘにリンクしたいときは""の中はたとえばindex.htmlのようにします。
また、ひとつ上の"ast"ディレクトリにLinkしたいときは「ast/index.html」
下にLinkしたいときは「../index.html」のようにLinkします。
クリックするとメールソフトを立ち上げるという方法もあります。
<A HREF="mailto:abc@def.ne.jp">abc@def.ne.jp</Ａ>
とすると
このようになります。これをクリックするとメールソフトが立ち上がり
アドレスには「abc@def.ne.jp」をあらかじめ入っています。
|
○ |
|
○ |
ホームページの背景は、何も指定しないと灰色になります。
もし、背景に色を付けたい場合やイラスト，写真を表示したいときや
(Windowsの壁紙のようなもの)、文字の色（テキスト，リンク）を
変えたいときは、ＢＯＤＹを使います。
<HTML> <TITLE>***(ここにページのタイトルを)***</TITLE> <body bgcolor="#ffffff" text="#000000" link="#00aaff" vlink="#ff00ff" alink="#000000"> ・ ・ ***(内容)*** ・ </body> </HTML>
通常、設定はページの一番最初に書き、</body>を一番最後に書きます。
背景はbgcolor、通常の文字はtext、リンク前の色はlink、リンク後の色はvlink
LinkをClickした瞬間の色はalinkで指定するとこのページのようになります。
background="picture.gif"
これを追加すると、picture.gifというファイルのイラストが
背景になります。扱える画像フォーマットはＧＩＦ,ＪＰＥＧです。
|
○ |
|
○ |
<ＨＲ>
と、書くと
となります。
|
○ |
|
○ |
もっと複雑な線を書くときは
<HR ALIGN=right width="70%" size=20 NOSHADE>で
となります。(MSIEでは長方形ですが、NNでは角が丸くなります。)
％を指定すると画面全体に対する横線の長さ、数字を書くとドットになります。
sizeは縦幅、alignはどこに表示するのか(right,left,centerなど)
NOSHADEは「陰なし」ということです。
|
○ |
|
× |
デフォルトの色はブラウザが背景を考慮して、白か黒になります。
しかし、MSIEでは任意に色が付けられます。 <HR
color=#00ff00>で
と、色が付けられます。
Noteに戻る
上へ