主な HTML プログラミング事例 - HTML プログラミング - Webサーバ構築と、PHPを使ったサーバソフトの開発

第２章 HTML プログラミング

2.5 主な HTML プログラミング事例

フォントサイズは１です。

フォントサイズは 3 です。

フォントサイズは 5 です。

フォントサイズは 7 です。

</CENTER>

フォントサイズは-１です。

フォントサイズは-2 です。

フォントサイズは+1 です。

フォントサイズは+2 です。

</BODY>

</HTML>

＜練習課題＞

フォントサイズを,相対指定により、７から１まで段階的に小さく表示するプログラムを作成してください。（カラーも段階別に任意の色で切り替えてください）

2.5.3 文字列のスクロール描画とリスト表示に関する基本構文です。

リスト表示、及びテロップ表示などを行う Web ページの例です。

 shtml03.html プログラム

<HTML>

<HEAD>

<TITLE>

基本プログラム

</TITLE>

</HEAD>

右方向スクロール形式による文字描画のサンプルプログラムです。

<LI>この文字は番号順のリスト指定がしてあります。

</OL>

</MARQUEE>

ワイパー形式による文字描画のサンプルプログラムです。

<MENUE>

<LI>この文字はメニューリスト指定がしてあります。

</MENUE>

</MARQUEE>

</BODY>

</HTML>

補足：

MARQUEE とは劇場のひさし等の意味があります。

＜練習課題＞

“<MARQUEE>”タグには、文字列の動きを制御するパラメータとして、スクロールの速さを指定する（小さければ早い）scrolldelay=”9999”と、スクロールする時の一回の移動距離をピクセル数で指定する scrollamount=”9999”の構文があります。現在設定されている動きよりも早い動きをするように設定してください。

2.5.4 画像描画に関する基本構文です。

画像、及び動画を扱う Web ページの例です。実行前に、sample01.jpg 画像と、moveimage.swf 動画ファイルを、本プログラムと同じフォルダに登録します。

 shtml04.html プログラム

<HTML>

<HEAD>

<TITLE>

基本プログラム

</TITLE>

</HEAD>

画像描画と文字列表示に関するサンプルプログラムです。

この文字列は、画像の右上に表示されるように設定してあります。

この文字列は、画像の右側中央に表示されるように設定してあります。

音声・動画を描画するプログラムです。

</EMBED>

音声・動画がサポートされていません。

</NOEMBED>

</CENTER>

</BODY>

</HTML>

補足：

音声・動画画像が描画できるかどうかはブラウザの機能に依存します。

＜練習課題＞

全ての画像が横方向の中央に表示され、文字列は各画像の下に表示されるように改良してくだ

さい。（ヒントとしては、文字列を下側に表示する為には、文字列を段落と定義します）

2.5.5 リンク処理に関する基本構文です。

Web ページを切り替えたり、同じページ内で表示を切り替える Web ページ例です。

 shtml05.html プログラム

<HTML>

<HEAD>

<TITLE>

基本プログラム

</TITLE>

</HEAD>

新しいウインドを開いてリンク先のページを表示します。

</A>

リンク指定の無い文字列です。

リンク１から分岐される文字列です。

リンク２から分岐される文字列です。

<A href=mailto:[email protected]>メールウインドを開きます</A>

</BODY>

</HTML>

補足：

別のページの任意の文字列に分岐させたい場合は、URL を併用して設定します。（例：<A href="xxxx.html#link1">リンク１</A>）また、同じページに上書き表示する場合は、Target パラメータを省略するか、_self に切り替えます。

＜練習課題＞

上記プログラムを編集して、画像を持つプログラムを２つ作成し、一方の画像をクリックした場合に別のページに切り替わり、切り替わった画像をクリックすると元のページに戻るプログラムを作成してください。

2.5.6 テーブル描画に関する基本構文です。

表を描画する Web ページの例です。リレーショナルデータベースの基本は表ですので、その内容を表示する場合は、この表作成構文が非常に重要になります。

 shtml06-1.html プログラム

<HTML>

<HEAD>

<TITLE>

基本プログラム

</TITLE>

</HEAD>

テーブル描画のサンプルプログラムです。

</CAPTION>

</TR>

</TR>

</TR>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

補足：

テーブルのセルの大きさは表示しようとする文字の長さに応じて変わります。

＜練習課題＞

表に表示される各項目の内容を右詰め表示としてください。

背景と文字の色を任意の色に変更してください。

 shtml06-2.html プログラム

<HTML>

<HEAD>

<!--

TH { font: 16pt/24px "ＭＳＰゴシック"}

TD { font: 18pt/24px "ＭＳＰゴシック"}

-->

</style>

</HEAD>

<BODY>

<TR>

</TR>

</THEAD>

</TR>

</TR>

</TR>

</TBODY>

<TR>

</TR>

</TFOOT>

</TABLE>

</BODY>

</HTML>

＜練習課題＞

横方向のセル数が５ヶの表を作成してください。

2.5.7 セルの結合を行う構文です。

EXCEL やワードの表描画で使用されるセルの結合と同等の処理が実現できます。

 shtml07.html プログラム

<HTML>

<HEAD>

<!--

TH { font: 16pt/24px "ＭＳＰゴシック";text-align:center;}

TD { font: 18pt/24px "ＭＳＰゴシック";text-align:center;}

-->

</style>

</HEAD>

<BODY>

<TR>

<TH>title-1<TH colspan="2">title-2

<TR>

<TD rowspan="2">item-1

<TD>1<TD>2

<TR>

<TD>10<TD>20

</TABLE>

</BODY>

</HTML>

補足：

colspan、及び rowspan パラメータを使った上記セル結合結果は以下のようになります。

＜練習課題＞

以下のテーブルを作成してください。ヘッド部分の背景色は黒、フォントは白で表示してください。

title-1 title-2 title-3

item-1

1 2 3

10 20 30

100 200 300

2.5.8 フレーム分割に関する基本構文です。

フレーム分割を行った Web ページの例です。プログラム実行前に、frame1.htm、frame2.htm、frame3.htm、

frame4.htm プログラムを作成し、同じディレクトリに登録してください。なお、これらのプログラムは、”

フレームｎです”（ｎは、1,2,3,4 のいぜれか）と表示します。このようなフレーム分割を行った場合、各フレームに別々のページを描画することが可能となります。

 shtml08.html プログラム

<HTML>

<HEAD>

<TITLE>

基本プログラム

</TITLE>

</HEAD>

</FRAMESET>

</BODY>

</HTML>

補足：

実行前に、frame1.htm,frame2.htm,frame3.htm プログラム（文字表示のみ）を作成して登録してください。

フレーム分割を行うタグは、<BODY>タグの前に定義します。

＜練習課題＞

3 番目のフレームを横に２分割し、合計４分割のフレームを作成してください。分割する方向と大きさは任意とします。

2.5.9 内部フレームを使った基本構文です。

HTML ではフレームに中にフレームを宣言（IFRAME）して、その中で独立した Web ページを表示させることが出来ます。

 shtml09.html プログラム

<HTML>

</IFRAME>

</BODY>

</HTML>

＜練習課題＞

内部フレームを横に２つ並べて表示するプログラムを作成してください。大きさは任意とします。

2.5.10 フォームを使ったユーザインターフェースに関する基本構文です。

操作者との対話を行う Web ページの例です。

 shtml10.html プログラム

<HTML>

<HEAD>

ドキュメント内 Webサーバ構築と、PHPを使ったサーバソフトの開発 (ページ 43-55)