| HOME>ＨＰ作成講座 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
テキストエディタ等（メモ帳など）で次のように打ち込んで下さい。または、コピーして張り付けて、保存して下さい。ファイルの保存名は、半角の英字で、 index.html で保存しましょう。 <html> 上の文(タグ)をテキストエディタ(メモ帳など)で打ち込むか、コピーして、分かる場所にファイル名 index.html で、保存して下さい。この「タグ」は半角英数で入力しないとダメです。「ブラウザの左上に表示される文字」と「本文の内容」は全角文字で良いです。ファイルを保存する時に、どこに保存するかを、きちんと確認しておきましょう。ＨＰという名前のフォルダを作って、その中に index.html というファイル名で保存しておきましょう。 文章を 改行したい場合は<br>と入力してください。 <p align=left>左寄せ・レフト</p>または<left>xxx</left> <p align=center>真ん中寄せ・センター</p>または<center>xxx</center> <p align=right>右寄せ・ライト</p>または<right>xxx</rihgt> また区切り線は<hr>と入力します。 タグには、２種類あって、<font></font>の様に、ペアで使用するタイプと、 <br>や<P>や<hr>の様に単独で使うタイプが有ります。
ここではリンク先を link.html として解説いたします。 <html> 次に最初に作った、index.html の「ホーム・ページ本文の内容」の場所に以下の様に、記述して下さい。 そして、ブラウザで確認してみると、「リンクページへのリンク」が青くなってアンダーラインが引かれているはずです。リンクページに行くと、こうなります。 アンダーラインを消す場合には、以下の様に書きます。 <a href="link.html" STYLE="text-decoration:none">リンクページへのリンク</a> 次はリンクカラーを変えてみます。今度は <a href="link.html"><font color="red">リンクページへのリンク</font></a> と記述してください。文字が 赤色 になりましたね。"red"の部分は自由に変更できます。使える色については、こちらを参照して下さい。 <a href="ファイル名またはURL"><img src"画像ファイル名"></a>です。 しかし、この場合、枠として青い線が回りにつきます。この線を消すには以下のように記述してください。 <a href="ファイル名またはURL"><img src="qa1.gif" border="0"></a>です。
ここでは画像の張り方等についてご説明いたします。 この画像上にマウスのポインタを持っていって右クリック。「名前をつけて画像を保存」を選らんで <img src="tana_s02.gif" alt="ネットｄｅたなぼた！" height="31" width="88"> このタグにはタグ閉じ（/）はいりません。ちなみにheightは高さを表し、widthは横幅を示しています。なぜこんなことをするのかというと、読み込みのときに少し早くなるからです。 altというのは代替テキストといって目に障害のある人も音声でネットサーフィンを楽しんでいるので画像の意味をお知らせするためのもです。具体的に見るにはずっと画像の上にマウスのポインタをて置けば、表示されます。試しに「画像」の上にマウスのポインタを置いて３秒くらい停止させて見てください。すると、代替テキストに「ネットｄｅたなぼた！」と出てくるのがわかります。 ホーム・ページに画像をリンクする(張り付ける)場合は、○○○.html(htmlファイル)と○○○.gif(画像ファイル)や○○○.jpg(写真などのファイル)なども、一緒にサーバー(ＨＰスぺース)にアップ・ロードして下さい。 画像に縁取り（額縁風）を付けるには、 <table border="6" cellpadding="0" bgcolor="yellow"> 上の様に書くと、下の様に表示されます。テーブルを使っての画像の縁取りです。
他のホーム・ページの画像を自分のホーム・ページに、リンク表示する場合には、 という様にファイル名だけで無く、ＨＰアドレスからファイル名までを指定します。 「.jpg」はＪＰＥＧというファイルの形式です。拡張子が「.gif」のＧＩＦと言うファイル形式です。ＪＰＥＧは圧縮の自由度が高く、解像度も高いです。その点ＧＩＦは圧縮してない状態ではＪＰＥＧより軽いですが、ＪＰＥＧより画像の質は落ちます。この２種類が多く使われてますが、「.png」という形式のファイルも使われてます。 次に画像をリンクボタンにする方法を説明します。 <a href="リンク先URL"><img src="画像のURL" border="0"></a> ここでborder="0"が出てきますが、これはリンクしたときの枠線を消すために入れています。
ここでは、文字の飾りのタグの説明です。 文字の強調(太字)はボールドと言って <b>ボールド</b> <i>イタリック</i> 文字に線を表示させるものに、 <u>下線</u> でできる下線もあります。リンクの文字に似てるので、注意して下さい。 ほかにも <s>打消し線</s>などもあります。 次に「文字のサイズを変える」です。これを使えば文字の大きさを通常サイズ以外の６サイズに変えることができます。 <font size="*">〜</font> 「*」には１〜７の数字が入ります。数字が大きいほど文字が大きくなります。また通常のフォントのサイズは３になっております。(数字は半角数字で打ち込んで下さい) ７あああ ６あああ ５あああ ４あああ ３あああ ←文字サイズを指定しない場合は、このサイズで表示されます。 ２あああ １あああ こんな感じになります。 文字に、色をつけるときは <font color="#??????">ABCDEFG</font> 「#??????」についてですが、000000〜FFFFFFまでの１６進数で表します。左から二つづつ組でRGB（赤、緑、青）となっています。「#000000」は赤、緑、青どれも０なので黒になります。逆に「#FFFFFF」にすると全部の色がついているということで、光の三原色に基づいて白になります。また、数字ではなく色の名前で色を指定することも可能です。 次は箇条書きの作り方です。
これが箇条書きの タグ です。<UL>ではじまって<LI>で箇条書きの「●」(丸い点)が出せます。<LI>が終わったら</UL>でタグ閉じしてください。( <LI>タグは単独使用で、閉じなくて良いです。) また、<UL>を<OL>に変えますと番号付きリストになります。 次は文字を左右に動かす方法です。（IE専用）これはネットスケープナビゲーターでは見ることができません。 <marquee>こんにちわー</marquee> こういう風に記述します。 もっと動きの幅を広げたい時はいろいろ属性をつけます。 <marquee behavior=alternate loop=10 scrolldelay=50 scrollamount=20 bgcolor=#00ffff>こんにちわです</marquee> behaviorはどうやってスクロールしてるかを設定するもので、 loopはスクロール回数 bgcolorは文字がスクロールするところの背景の色を決めることができます。 次は文字を点滅させる方法です。（NN専用）これはインターネットエクスプローラーでは見れません。 <blink>こんにちわ</blink> これでネットスケープからみると点滅します。
MIDI(音楽ファイル)をならすにはいくつか方法があります。ここでは、インターネットエクスプローラー、ネットスケープナビゲーター両方に対応したタグを紹介いたします。<bgsound>タグはインターネットエクスプローラー専用ですので、使わない方がよろしいと思います。 <embed src="MIDIのファイル名またはMIDIがあるURL"> これが基本になります。 ここにオプションをつけてみましょう。 <embed src="MIDIのファイル名またはMIDIがあるURL" autostart="true"
repeat="false" width="0" height="0"> autostartというのは自動演奏の設定です。trueで自動的に演奏されます。 また、このタグを書き込む場所なのですが、タグが画面上に表示されないと演奏が始まらないという特徴があります。 また、このタグはFLASHやMOVIEを表示させるときにも使えるので覚えておくとよろしいです。
ここではテーブル機能という機能を使って、表組について解説いたします。 <TABLE align="left" width="383"
border="1" cellspacing="2" bgcolor="#ff0000" height="570"> こういうソースになるのですが、これはここからさきがテーブル、ということを <table〜><font color="#〜">ｘｘｘｘｘ</font></table> で表の中の文字の色も変えることができます。
ソース <TABLE width="500" border="5"
cellspacing="2" bgcolor="yellow"> これはもう少し複雑な表の場合です。下にソースを書いておきます。
ソース <TABLE BORDER="1" WIDTH="400" HEIGHT="150"> 次にテーブル内でのテキストの位置を指定する方法を説明します。
上のテーブルのソースは、以下の様になります。 <table width=250 height=250 border=1>
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
