HTML

戻る
HTML実行テスト（PHPバージョン）→こちら

ここにあるフォーム内にタグを記述して実行ボタンをクリックすると実行されますので、好きなように使ってください。
また、右側のリンクをクリックすると、実行結果（サンプル）が右下のフレーム内に表示されます。
下のサンプルは細かく分けていますので組み合わせるといろいろな事が出来ますので試してください。
【例】<span style="border:dashed pink; text-decoration:underline;">テスト</span>など

はじめに

○<body>内にオプションを付け加える事で
　背景や文字の色を指定する事ができます。右側に
　サンプルがあります。<br><br>

○文を枠で囲む
　borderの種類
　dotted(点線)・double(二重線)・dashed(切取線)
　・ridge(凸枠)・groove(凹枠)・solid(太線)
　・inset(へこみ)・outset(浮出し)
　paddingはそれぞれ文字の配置場所（左・右・上・下）
<span style="border:dashed pink; padding-left:10; padding-right:10; padding-top:10; padding-bottom:10;">文章の表示</span><br><br>

テキスト文字に下線や色・マーカー
　text-decorationの種類
　overline（上の線）・line-through（削除線）
<span style="text-decoration:underline; color:#ff00ff; background-color:#0000ff;">この文に下線</span><br><br>

○マウス操作
<span onmouseover="this.style.color='#ffaaff'"onmouseout="this.style.color='#0000ff'">
ここにマウスを乗せる。
</span><br><br>

○リンクアドレスの部分を
　http://www.torhsi.sytes.net/等に変更すると
　使用する事ができます。右側のリンクにもサンプルが
　あります。ここではリンクの下線を非表示にしています。
<a href="http://www.torhsi.sytes.net/" style="text-decoration:none;">リンク</a><br><br>

○テキストエリアです。行数、横長さにそれぞれ10等の
　数字に変更すると使用する事ができます。
<TEXTAREA rows="行数" cols="横長さ"></TEXTAREA><br><br>

○一行のみのテキストボックスです。そのまま使えます。
　style内で線の太さや表示および色などを設定できます。
<input type="text" style="border-right-width:2pt; border-left-width:2pt; border-top-width:2pt; border-bottom-width:2pt; border-top-style:dotted; border-right-style:dotted; border-bottom-style:dotted; border-left-style:dotted; color='#ff44ff'; background-color='#bbccff';" value="テスト"><br><br>

○そのまま使えますがh1の部分をh2等に変更すると
　文字サイズが変わります。右側のリンクにも
　サンプルがあります。
<h1>テスト</h1><br>

○FONTは書式などを設定するタグです。0000ffの部分を
　変更すると文字の色が変わります。右側のリンクにも
　サンプルがあります。
<font color="#0000ff">テスト</font><br><br>

○文字をスクロールさせるタグです。
　width,heightの数値を変えるとスクロール範囲が
　決められます。Scrollamountの数値を小さくする
　と遅くなります。数値を大きくすると速くなります。
　動きが分かるのはだいたい250位までで1000にすると
　点滅してるだけに見えます。leftの部分をright,up,
　down等に変えると動きが変わります。タグ内に
　bgcolor="#ff99ff"を付け加えると
　スクロール範囲に色がつきます。
<marquee width="100" height="5" Scrollamount="10" direction="left">テスト</marquee><br><br>

○画像貼り付けタグです。右側のリンクにもサンプルが
　あります。
<img src="bara.jpg""bara.jpg"><br><br>

○線を引きます。右側のリンクにもサンプルがあります。
<hr><br>

○ホームページにミュージックなどをながしたい場合
　使用します。ここのホームページは中国語の
　コンテンツ内のみ使用しています。
<embed src="sena.mid" width="350" height="50" autostart="true" repeat="true"><br><br>

○カーソルを変更するタグです。そのまま使うことも
　できますが、move;の部分を以下のサンプルに
　変更すると、カーソルが変わります。
　crosshair;
　text;
　help;
　wait;
　sw-resize;
　se-resize;
　e-resize;
<div style="cursor: move;">ここにカーソル</div><br><br>

上に表示されているタグをコピーペーストで使ってみてください。

<body bgcolor="#000000">
<body style="BACKGROUND:url(gif/night.jpg)">
<body text="#ff0000"link="#00ff00" vlink="#0000ff" alink="ff00ff">
<h1>あ</h1><h2>あ</h2><h3>あ</h3><h4>あ</h4><h5>あ</h5><h6>あ</h6>
<ruby>漢字<rp>(<rt>ふりがな<rp>)</ruby>
< > " &amp
<b></b><i></i><tt></tt><sup></sup><sub></sub><u></u><s></s><strike></strike>
<font face="恋文ペン字">フォントフェイス</font>
<font color="#000000">フォントカラー</font>
<pre>半角文字をそのとおりに表示する</pre>
<p align="行揃え位置"></p><center></center><div align="行揃え位置"></div>
<hr noshade size="20">
<marquee>錯覚</marquee>
<DIV styleの利用></DIV >
<a href="mailto:torhsi@asobo.torhsi.sytes.net"></a>
<ul><li></ul>
<ul><li type="マーク"></ul>
<ol type="記号"><li></ol><ol start="開始"><li value="開始"></ol>
<table border="1">
<img onmouseover="this.src='cat2.jpg'" onmouseout="this.src='cat3.jpg'" src="cat1.jpg">
<img src="url" width="幅" height="高さ" alt="代替文字">
<form></form>の総合
<FRAMESET >

参考にした書籍です。

DynamicHTML	（株）アンク（著）
HTML＆JavaScript辞典	秀和システム（著）
動くホームページの作り方	C&R研究所（著）
HTMLテクニック辞典	佐藤　信正（著）