<基礎タグ教室>

MENU1
基本の基本
文字修飾
改行
罫線を引く
便利な小窓
MENU2
彩りを添える
画像を貼る
リンクのいろいろ
MIDIを鳴らす
表を作る
MENU3
リストを作る
お気に入りに追加
フォーム関連1
フォーム関連2
JavaScript
中文HP用
中国語HP作成法
〜タダで作ろう!〜
中文主頁制作
中文タグ教室(中文)


タグを書く時の注意


基本の基本

テキストエディタ等で以下のタグをコピーして(打ち込んで)みてください。

<html>
<head>
<title>左上に表示される文字</title>
</head>
<body>
本文の内容
</body>
</html>

ここまでです。ちなみにこの「タグ」は半角英数で入力しないと働きません。
「ブラウザの左上に表示される文字」と「本文の内容」は自由に書き換えてみてください。
そして、ファイルメニューのところの名前をつけて保存を選んで、任意のファイル名で保存してください。
パソコンに詳しい方はお分かりかと思いますが、拡張子といわれる、ファイルの種類をあらわす
ものが.htmに書き換えられていますね。これはHPの文書、適切にいえばHTML文書だということをパソコンに判別させるためのものです。
そのファイルを開いてみます。するとこうなります
見えているのは本文の内容の文字だけのように見えますが、画面左上の隅にブラウザの左上に表示される文字があると思います。
できた方は本文の内容をいろいろ書き込んだりして遊んでなれるといいと思います。
ちなみに、<html>はここから</html>の範囲はHTML文章だということを示しています。
<title>〜</title>の意味は、この範囲は左上に表示されるタイトルだということを表しています。
ここのページの場合は<title>基礎タグ教室</title>と入力されているはずです。
理解するまで練習することをおすすめします。
<body>〜</body>ここに表示したい本文の内容を入れます。

文章を改行したい場合は<br>と入力してください。(「改行」参照)
改行してさらにもう一行開けたい場合には<P>タグを入力してください。
文字位置には左寄りや、真ん中より、右寄りなどがあります。
上から順に左、中、右の順番で説明していきます。

<p align=left>左寄り</p>または<left>xxx</left>

<p align=center>真ん中より</p>または<center>xxx</center>

<p align=right>右寄り</p>または<right>xxx</rihgt>

また区切り線は<hr>と入力します。

上へ戻る

文字修飾

実 行 例

タ グ・解 説

赤い色青い色 <font color="red">赤い色</font><font color="#0000ff">青い色</font>

指定できる主な色は、
  • 色名で指定する場合 "black""gray""white""red""yellow" "lime""aqua""blue""fuchsia"など
  • カラーコードで指定する場合 "#ff0000""#00ff00""#0000ff"など
カラーネーム一覧参照
大きな文字小さな文字 <font size="6">大きな文字</font><font size="2">小さな文字</font>

  • 文字のサイズを1(小)〜7(大)で指定します。
属性を組み合わせて赤色の大きな文字! 属性をを組み合わせて
<font size="5" color="red">赤色の大きな文字!</font>
太い字斜めの字。 そして太い斜体文字 <b>太い字</b>と<i>斜めの字</i>。そして<b><i>太い斜体文字</i></b>
アンダーラインにしてみる <u>アンダーライン</u>にしてみる
打ち消し線にしてみる <s>打ち消し線</s>にしてみる
上付きの前の文字上付き文字 上付きの前の文字<sup>上付き文字</sup>
下付きの前の文字下付き文字 下付きの前の文字<sub>下付き文字</sub>
左に移動 右に移動 左右に移動    <marquee behavior="scroll">左に移動</marquee>
<marquee behavior="scroll" direction="right">右に移動</marquee>
<marquee behavior="alternate">左右に移動</marquee>
  • このタグは、自動的に改行されます。
  • 注意・・・このタグは、インターネットエクスプローラでは有効ですが、ネットスケープでは、無効です。
上へ戻る

改行

実 行 例

タ グ・解 説





あ<br>い<br>う<br>え<br>お
  • このタグには、閉じる部分(</br>という記述)は、有りません。
  • 掲示板(BBS)への投稿の場合、このタグは必要有りません
    (Enterキーを押すと自動的に挿入されます) 。
上へ戻る

罫線を引く

タ グ

実 行 例

解 説

<HR>
横罫線(区切り線)を引きます。
<HR SIZE=1 WIDTH=80%>
横罫線(区切り線)を引きます。
SIZE…線の太さ
WIDTH…線の長さ
<HR SIZE=3 WIDTH=70% ALIGN=CENTER NOSHADE>
横罫線(区切り線)を引きます。
ALIGN…揃えの指定(LEFT、CENTER、RIGHT)
NOSHADE…影なし指定
<HR SIZE="5" WIDTH="80%" COLOR="#00BFFF">
横罫線(区切り線)を引きます。
COLOR…色の指定
カラーネーム一覧参照
上へ戻る

便利な小窓

実 行 例

タ グ・解 説

便利な小窓は、

こうなってます。
便利な小窓は、
<TEXTAREA rows=3 cols=20 name="comment">ここに書いて下さい。</TEXTAREA>
こうなってます。

  • rows=3 cols=20タグの数値を変えることで、大きさを調節できます。
  • <TEXTAREA rows=3 cols=20 name="comment"
    style="color: red; background-color: pink">タグを入れれば、色を変えることも出来ます。
  • HP更新記録や、お知らせ掲示板等に幅広くご利用下さい。
上へ戻る

彩りを添える

実 行 例

タ グ・解 説

ボタンはデフォルトでは、
このようになります。
ボタンはデフォルトでは、
<FORM><INPUT name=test type=button value=test></FORM>このようになります。

  • ここでは、リンクはありません。
このように、
色を変えられます。
このように、
<FORM><INPUT class=ist3 name=test type=button value=test
style="color: white;background-color: red"></FORM>色を変えられます。

  • 但し、ネスケでは変わりません。
プルダウンメニューは、
こうなってます。
プルダウンメニューは、
<FORM><SELECT class=ist5 name=menu>
<OPTION selected> ◇WHAT'S NEW !!◇</OPTION><OPTION>\(◎o◎)/!
</OPTION><OPTION>( ^-^)_且~~~</OPTION><OPTION>(_ _)。。o ○zzz</OPTION>
<OPTION>(`´)ノ☆(((*;・)</OPTION><OPTION>(^o^)/~~~</OPTION></SELECT></FORM>
こうなってます。

  • ここでは、リンクはありません。
プルダウンメニューの
色を変えられます。
プルダウンメニューの
<FORM><SELECT class=ist5 name=menu style="color: red; background-color: pink">
<OPTION selected> ◇WHAT'S NEW !!◇</OPTION><OPTION>(o⌒○⌒o)
</OPTION><OPTION>σ(TεT;)</OPTION><OPTION>(^。^)y-。o0○</OPTION>
<OPTION>(/^-^(T_T )/</OPTION><OPTION>(*^3(*^o^*)</OPTION></SELECT></FORM>
色を変えられます。

  • いろいろ書き換えて、更新情報やお知らせ等にご利用下さい。
  • 上記を利用して、リンクすることも出来ます。JavaScriptで紹介します。
  • <OPTION selected><OPTION>の間には、最初に表示される文字等が入ります。
  • 内容は<OPTION></OPTION>タグで挟んで下さい。
背景色手動入力変更
<FORM>
<INPUT name="BGC" size="14">
<INPUT type="button" value="背景色を変えて見る" onClick="document.bgColor=document.forms[0].BGC.value">
</FORM>

  • いろいろ書き換えて、更新情報やお知らせ等にご利用下さい。
  • 上記を利用して、リンクすることも出来ます。JavaScriptで紹介します。
上へ戻る

画像を貼る

実 行 例

タ グ・解 説

画像表示は、
このように貼ります。
画像表示は、(Enterキー)
<img src="http://xxx.xxxx.ne.jp/~xxx/xxxx/xxxx.gif">このように貼ります。

  • タグの "〜" は、画像ファイル(xxx.gifまたはxxx.jpg)までのURLを記入します。
上へ戻る

リンクのいろいろ

実 行 例

タ グ・解 説

私のホームページです。ここをクリック! 私のホームページです。
<a href="http://www.xxxx.ne.jp/~xxx/>ここ</A>をクリック!
  • タグの "〜" は、リンク先ファイルまでのURLを記入します。
  • リンク先を新しいウィンドウで開くには、
    <a href="http://www.xxxx.ne.jp/~xxx/" TARGET="_blank">ここ</A>のように TARGET="_blank" と入れます。
画像でリンクを貼ると
こうなります。
画像でリンクを貼ると(Enterキー)
<a href="http://www.xxxx.ne.jp/~xxx/" TARGET="_blank">
<img src="http://xxx.xxxx.ne.jp/~xxx/xxxx/xxxx.gif" border="0"></a>
こうなります。
ボタンリンクは、
このように貼ります。
ボタンリンクは、(Enterキー)
<FORM>
<input type="button" value=" マイホーム "
onClick="parent.location = 'http://www.h3.dion.ne.jp/~yhiromi/'">
</FORM>
このように貼ります。

  • <FORM></FORM>で挟むことをお忘れなく。
クリックするとこんな音が出ます。 クリックすると<a href="http://www.xxxx.ne.jp/~xxx/xxxx/xxxx.mid">こんな音</a>が出ます。

  • タグの "〜" は、MIDIファイル(xxx.mid)までのURLを記入します。
  • プラグインがあれば、最高の音質で鳴らせます。
  • 著作権に注意しましょう。
上へ戻る

MIDIを鳴らす

実 行 例

タ グ・解 説

MIDIを鳴らすタグは

こうなります。
MIDIを鳴らすタグは
<EMBED SRC="http://www.xxxx.ne.jp/~xxx/xxxx/xxxx.mid" TYPE="audio/midi" PLUGINSPAGE="http://www.yamaha.co.jp/xg/midplug/top.html" WIDTH="150" HEIGHT="40" AUTOSTART="false" REPEAT="false" SAVE="false" >
こうなります。

  • autostartというのは自動演奏の設定です。falseでボタンを押して再生、trueで自動的に演奏されます。
  • repeatは演奏回数を設定しています。falseで1回、trueで無限になります。
  • width、heightは表示される演奏パネルの大きさを表していて、未表示にする場合は0にします。
上へ戻る

表を作る

タ グ

実 行 例

解 説

<TABLE BORDER="1">
<TR>
<TD>AAAAA</TD>
<TD>BBBBB</TD>
</TR>
<TR>
<TD>CCCCC</TD>
<TD>DDDDD</TD>
</TR>
</TABLE>
AAAAA BBBBB
CCCCC DDDDD
表を作ります。
<TR>は縦方向に表中の枠数を増やします。
<TD>は横方向に表中の枠数を増やします。

また、BORDER="1"を指定すると表に枠が付きます。
大きい数字に成る程高くなります。

表はまだまだいろんな指定が出来ます。

<TABLE BORDER="1" borderColor="#0000FF">
<TR>
<TD bgcolor="#FED0E0">AAAAA</TD>
<TD bgcolor="#D8F3FE">BBBBB</TD>
</TR>
<TR>
<TD bgcolor="#00FF7F">CCCCC</TD>
<TD bgcolor="#BFBFDF">DDDDD</TD>
</TR>
</TABLE>
AAAAA BBBBB
CCCCC DDDDD
枠内の色を変えます。
<TD bgcolor="色名">と書いて下さい。

また、<TABLE borderColor="色名">を指定すると
枠に色が付きます。

表はまだまだいろんな指定が出来ます。

上へ戻る

リストを作る

タ グ

実 行 例

解 説

<UL TYPE="DISK">
<LI>AAAAA
<LI>BBBBB
<LI>CCCCC
</UL>
  • AAAAA
  • BBBBB
  • CCCCC
リストを作ります。
DISK…●(黒丸)
CIRCLE…○(白丸)
SQUARE…□(四角)

<OL TYPE="A">
<LI>AAAAA
<LI>BBBBB
<LI>CCCCC
</OL>
  1. AAAAA
  2. BBBBB
  3. CCCCC
番号順リストを作ります。
A…大文字英字
a…小文字英字
I…大文字ローマ数字
i…小文字ローマ数字
1…数字

上へ戻る


お気に入りに追加
JavaScrip使用

実 行 例

タ グ・解 説

お気に入りに追加を押すと、

お気に入りに追加されます。
お気に入りに追加を押すと、
<SCRIPT language="JScript">
<!--

addURL = "http://www.h3.dion.ne.jp/~yhiromi/";
addName = "マイ ホーム";

document.write('<INPUT type="button" value="お気に入りに追加"
onClick="window.external.AddFavorite(addURL,addName)">');

//-->
</SCRIPT>
お気に入りに追加されます。

  • 彩りを添えるのタグを使って、ボタンの色を変えることも出来ます。
  • ご使用になる際には、addURL = "http://www.h3.dion.ne.jp/~yhiromi/"; のアドレスをご自分のアドレスに変更しましょう。
  • addName = "マイ ホーム";の変更もお忘れなく。
  • タグは、表示させたい部分に貼って下さい。
上へ戻る


フォーム関連1

ここではメールを送信するフォームを例に挙げてフォームを説明いたします。
またこのフォームはメインやメニュー以外の書き込みでお使いになりますとバグって記事が削除できなくなりますので、ご注意ください。

お名前:
Eメールアドレス 
ホームページURL
メールの件名(タイトル)
pass:

ねこ

いぬ

さる

ぶた

かっぱ

からす

とら

うま

いのしし

かめ

かえる

 送信ボタンを押していただきますとyhiromi@d9.dion.ne.jp(マイホーム管理人)にメールが届くようになっております。
何かメッセージを記入して下さった方には、必ず返信致しますが、未記入の場合は、返信は致しません。
フォーム関連1のメール送信フォームのソースはでご覧下さい。
上へ戻る


フォーム関連2
このページのご感想をお聞かせください

お名前:
E mail:
HP URL:

このページはいかがでしたか?

なんでもコメントをお願い致します


HTML文書を、以下のようにして下さい。 Source
<CENTER>
<FORM action="mailto:yhiromi@d9.dion.ne.jp" method="POST" ENCTYPE="text/plain">

<STRONG>このページのご感想をお聞かせください<STRONG><BR><BR>

<b>お名前:</b><input name="NAME" size="30"><BR>
<b>E mail:</b><input name="ADRESS" value=" " size="40"><BR>
<b>HP URL:</b><input name="URL" value=" http://" size="40"><BR>

<p>

<b>このページはいかがでしたか?</b><BR>

<SELECT NAME="CONTENTS">
<OPTION value="面白い">面白い
<OPTION value="まあまあ">まあまあ
<OPTION value="ふつうだ">ふつうだ
<OPTION value="つまらない">つまらない
<OPTION value="その他">その他
</SELECT>

<p>

<b>なんでもコメントをお願い致します</b><BR>
<TEXTAREA name="COMMENT"rows=4 cols=50></TEXTAREA><p>

<INPUT type=submit value="送信">
<INPUT type=reset value="リセット"><BR>
</FORM>
</CENTER>
上へ戻る



[★高収入が可能!WEBデザインのプロになってみない?! Click Here! 自宅で仕事がしたい人必見! Click Here!]
[ CGIレンタルサービス | 100MBの無料HPスペース | 検索エンジン登録代行サービス ]
[ 初心者でも安心なレンタルサーバー。50MBで250円から。CGI・SSI・PHPが使えます。 ]


FC2 キャッシング 出会い 無料アクセス解析