「第
1 回目のタグ」
1. Web ページ（ホームページ）の作成メモ帳（テキストエディタ）：ウィンドウズに付属しているソフト
テキストエディタ「メモ帳」を開くには：スタートボタンをクリック→プログラムポイン ト→アクセサリ→メモ帳を選ぶ。
ブラウザ（Web ページの閲覧ソフト Internet Explorer）：ウィンドウズに付属しているソ フトが必要とする。 homepage.html フォルダ作成：個人専用フォルダ （Ｚ：）の下にフォルダの新規作成を行う。授業中 に作成した html ファイルはこのフォルダに保存す る。 2. Web ページの構造 <html> <head> <title>世界の都市めぐり</title> </head> <body> ホームページの内容を記述 </body> </html> まず、一つ目のファイル, トップページを作成する。 ファイル名は index.html、 タイトルは「世界の都市めぐり」とし、ホームページの内 容は次の文章を入力してください。 <html> <head><title>世界の都市めぐり</title></head> <body> 世界の都市めぐり「世界の都市めぐり」のページへようこそ。このページでは、愛すべき ニューヨークとヨーロッパの都市をめぐるあれこれをご紹介します。ニューヨーク案内● ヘッダー部 ボディ部 ＨＴＭＬ文書
次のように編集を行う。 1. 改行を挿入するには、「<br>タグ」 例）世界の都市めぐり<br> ∼∼∼あれこれをご紹介します。<br> ∼∼∼名所めぐり<br> ∼∼∼ヨーロッパの町並み<br> 2. 段落を区切るには、「<p> ∼ </p>タグ」 例）<p>世界の都市めぐり</p> <p>「世界の都市めぐり」のページへようこそ。∼∼∼をご紹介します。</p> <p align=”center”>ニューヨーク案内∼∼∼このページの感想をお寄せください</p> 段落の表示位置を指定するには、align 属性=”center” または “left” または ”right” （何 も指定しないと、left（左揃え）を指定したものとして扱います。
3. 見出しをつけるには、「<h1> ~ </h1> タグ」
<h1>から<h6>まであるが、<h1>が一番大きな見出し、<h6>は一番小さい見出しです。 align 属性＝”center”, “left”, “right”
例）<h1 align=”center”>世界の都市めぐり</h1>
4. 水平線で区切るには、「<hr>タグ」size 属性＝“pixel 数” width 属性＝“パーセン テージ”または pixel 数を指定する。また、noshade 属性は水平線に影をつけない指 定です。
例）<hr size=”5” width=”50” align=”left” noshade> 世界の都市めぐり<hr> ∼∼∼感想をお寄せください<hr> 5. 文字の色を指定するには、「<font> ∼</font>タグ」 color 属性＝“色名または色コード” 例）<font color=”#ff9933”>●</font> 6. 文字の大きさを指定するには、「<font>∼</font>」size 属性＝“１∼７” 例）<font size=”5”>絵</font> 7. 文字装飾タグ
太字：<b> ∼ </b>、下線：<u> ∼ </u>、斜体：<i> ∼ </i>, 強調<em> ∼ </em>, 強調：<strong> ∼ </strong> 例）<b>ニューヨーク</b>、<u>ヨーロッパ</u>、<i>都市</i>、 <b><u><i>ご紹介</i></u></b> 8. 画像を表示するには、<img src=”画像ファイル”> ∼∼あれこれをご紹介します。</p> <p align=”center”><img src=”liberty.jpg”></p> 9. ページ全体の背景色を指定するには、「<body>タグ」bgcolor 属性=”色名または色コー ド” 色名：red, green, orange, yellow, maroon…….
RGB 色コード：#ff9933, #ff9966, #cc9933……..
10. ページ全体の文字の色を指定するには、<body>タグに text 属性＝“色名”を追加する。 例）<body bgcolor=”yellow” text=”red”> ~ </body>
ファイルメニューから「名前をつけて保存」をクリック→保存先「homepage フォルダ」→ ファイル名index.html を入力して保存ボタンをクリックする。
「第
2 回目のタグ」
11. 画像を表示するには、「<img>タグ」に src 属性＝“画像ファイル”width=”%または pixel 数” height=”％または pixel 数” border=”pixel 数” を追加する。
例）<img src=”liberty.jpg” width=”150” height=”200” border=”5”> さらに段落を指定して中央揃えにする。
<p align=”center”><img src=”liberty.jpg” width=”150” height=”200” border=”5”></p> 12. リンクを張るには、「<a>∼</a>」に href 属性＝“リンク先の URL”または “リン
ク先のファイル名”または “メールアドレス” <a href=”URL”>リンクスポット（文字列）</a> <a href=”リンク先のファイル名”>リンクスポット〔文字列〕</a> <a href=”リンク先のメールアドレス”>リンクスポット〔文字列〕</a> 例）<a href=”index.html”>トップページへ戻る</a> <a href=”mailto:×××＠keyaki.cc.u-tokai.ac.jp”>作者へのメール</a> <a href=”http://www.metmuseum.org/home.asp”>メトロポリタン美術館</a> 13. ページ内の特定の場所に目印をつけるには
<a name=”アンカー名”> ∼ </a> 例）<a name=”place”>名所めぐり</a> 14. ページ内の指定場所へジャンプするには
<a href=”＃place”></a>
15. リンクスポットの色を指定するには、「<body>∼</body>」の中に link 属性=”色” vlink 属性=”色” alink 属性=”色” Link まだ参照したことのないリンクの文字の色を指定する。 Vlink すでに参照したことのあるリンクの文字の色を指定する。 Alink リンクを選択した際の文字の色を指定する。Alink 属性の指定は、リンクをクリ ックした際、リンク先が表示されるまでの間だけ、リンクスポットに適用される。 二つ目のファイル：「newyork.html」 作成
3 つめのファイル（画像の貼り付け）：「postcard.html」 作成 検索エンジンgoogle を使い以下の画像 4 枚を保存する。
検索キーワードは、凱旋門、マルセイユの旧港、アルハンブラ宮殿、マンハッタンの 地 理 。 そ れ ぞ れ の フ ァ イ ル 名 は gaisenmon.jpg maruseiyu.jpg aruhambura.jpg manhattan.jpg で、保存先は html フォルダ。
16. 画像を表示するには、<img src=”画像ファイル”>
例）<img src=” gaisenmon.jpg” width=”200” height=”200”>
17. 画像の大きさを指定するには、<img>タグに 横幅は width=”pixel 数” 縦幅は height=”pixel 数”.
左右の余白はhspace=”pixel 数”。 19. 画像の枠線を指定するには、<img>タグに border=”pixel 数” 例）<img border=”5”> 20. 画像の説明を指定するには、<img>タグに alt=”代替文字” 例）<img alt=”シャンゼリゼ大通の写真”> 21. 背景に画像を指定するには、<body>タグに background=”画像ファイル” 22. 背景色を指定するには、bgcolor=”色名または色コード”、フォント色は text=”色名また は色コード”。
例）<body bgcolor=”#336699” text=”#ffff00” background=”liberty.jpg”>
23. 文書に対する画像の表示位置を指定するには、<img>タグに align=”top” “middle” “top”
例）<img align=”middle”>
24. 画 像 に リ ン ク を 張 る に は 、 <a href=”gaisenmon.jpg”><img src=”gaisenmon.jpg” width=”200” height=”200”></a>
25. 文 章 を 画 像 に 回 り 込 ま せ る に は 、 <img> タ グ に align=”left” ま た は ”right” newyork.html の ∼∼∼に分けられます。<br>
「マンハッタン島の南端から14 丁目までがダウンタウン、59 丁目までがミッドタウン、こ れより北がアップタウンです。」を追加入力する。
26. 文章の回りこみを解除するには、<br clear=”all”> 例）∼∼∼アップタウンです<br clear=”all”>
「第
3 回目のタグ」
27. 表を作るために必要な 3 つのタグ：<table>∼</table>, <tr>∼</tr>, <td>∼</td> 表を定義する <table>∼</table> 表の行を定義する <tr>∼</tr> 表の項目を定義する <td>∼</td> この他に表内の見出しを指定するには、<th>∼</th>太字、中央揃え 28. 表に枠線を表示するには、<table>タグに border 属性＝“pixel 数” <table border=”1 または 5 または 10”>∼</table>29. 表のタイトルを指定するには、<caption>∼</caption> align 属性＝“top または bottom”
例）<caption align=”top”>主な交通手段</caption> 30. 表の表示位置を指定するには、
<table align=”left または right または center”>∼</table>
31. 表の内容の表示位置を指定するには、<td>, <th>, <tr>タグに align 属性を追加する。 例）<td align=”center”>料金が安い</td> 32. 行内の表示位置をまとめて指定するには、<tr>タグに align 属性を追加する。 例）<tr align=”left”> <th>バス</th> <td>料金が安い</td> <td>渋滞に弱い</td> </tr>
33. 表の項目の間隔を指定するには、<table>タグに cellspacing＝“pixel 数”、 cellpadding ＝“pixel 数”を追加する。
34. 表の背景色を指定するには、表全体の背景色は<table>タグ、表の行の背景色は<tr>タ グ、表の項目の背景色は<td>タグ、<th>タグに bgcolor 属性＝“色名または色コード” 例）<tr bgcolor=”#66cc66”>∼</tr>
35. 表の背景に画像を表示するには、<table>タグに background 属性=”画像ファイル” 例）<table background=”liberty.jpg”>∼</table>
36. 表全体の横幅をしてするには、<table>タグに width 属性=”pixel 数または％” 例）<table width=”70%”>∼</table>
37. 表内の折り返しを無効にするには、<td>, <th>タグに nowrap 属性を追加する。 例）<th nowrap>交通手段</th>
38. 項目の幅と高さを指定するには、<td>、<th>タグに width 属性＝“pixel 数”、height 属性＝“pixel 数”を指定する。
例）<th nowrap width=”80” height=”40”>交通手段</th> <th width=”220”>長所</th>
39. 複数の行や列にまたがる項目を作るには、<td>、<th>タグに rowspan 属性＝“行数”、 colspan 属性＝“列数”を指定する。
例）<th rowspan=”2” colspan=”5”>マンハッタンの交通</th> <th colspan=”2”>特徴</th>
「第4 回目のタグ」
40. 箇条書きのリストを作るには、<ul>タグ さらに箇条書きリストの体裁を変更するに は、type 属性=”disc” “square” “circle”
例）<ul type=”square”><li>∼</li><li>∼</li><li>∼</li></ul>
41. リストの項目であることを示すには、<li>∼</li>タグを使う。1 つのリストの中で記号 の種類を個別に指定したい場合には<li>∼</li>タグに type 属性=”disc” “square” “circle”
42. 番号付きのリストを作るには、<ol>∼</ol>タグに type=”1” ”a” ”A” ”ⅰ” ”Ⅰ” Type 属性の指定によって 5 種類の表示形式を選択できる。<ol>タグに type 属性は、 リスト全体の表示形式を指定する。
例）<ol type=”Ⅰ”><li>∼</li><li>∼</li><li>∼</li></ol>
43. リストの項目を示すには、<li>∼</li>タグを使う。1 つのリストの中で記号の種類を個 別に指定したい場合には<li>∼</li>タグに type=”1” ”a” ”A” ”ⅰ” ”Ⅰ”を指定す る。 44. 番号付きリストの番号を変更するには、<ol>∼</ol>タグに start=”番号” 例）<ol start=”5”>∼</ol> : 開始番号が５になる。 45. 番号付きリストの番号を指定するには、<li>∼</li>タグに value=”番号” 例）<li value=”7”>∼</li> 46. リストを階層化するには、第 1 階層の最後の<li>∼</li>の中に<ul></ul>タグが入る。 <ol> <li>∼</li><li>∼</li> <li>∼ <ul> <li>∼</li><li>∼</li> </ul> </li> </ol> 47. 定義リストとは、見出しと、見出しに関する説明とを一組みにした項目を並べたリス トです。ここでは、名所めぐりのコーナーに自由の女神に関する定義リストを作る。 48. 定義リストの範囲を指定するには、<dl>∼</dl> 49. 定義リストの項目の見出しを指定するには、<dt>∼</dt> 50. 定義リストの項目の説明文を指定するには、<dd>∼</dd>>
例）<dl> <dt>場所</dt> <dd>女神像は、マンハッタン島の南にあるリバティ島に建っており、 ここへはフェリーで渡ることができる。</dd> <dt>大きさ</dt> <dd>女神の高さは 46.5 メトル、台座と像をあわせると約 93 メトルに もなります。</dd> </dl>
４つめのファイル（アンケートフォーム）：form.html 作成 51. フォームを作成するには、<form>∼</form> ：送信ボタンを押すと、<form>∼ </form>の範囲にあるコントロール（部品）に入力されたデータが、指定した送信先に 送信される。フォームには、テキストボックスやラジオボタンなどの部品の以外に、 通常の文字や表、リスト、画像なども入れることができる。 52. データの送信ボタンを表示するには、<input>タグ 終了タグはない。<input>タグに type 属性＝“submit”を指定すると、送信ボタンが表示されるが、さらに、value 属 性は送信ボタンに表示される「文字列」を指定する。
例）<input type=”submit” value=”送信”>
＝“reset”(初期状態に戻すボタンを表示)。さらに、value 属性はボタンに表示される 「文字列」を指定する。
例）<input type=”reset” value=”クリア”>
54. 文字の入力欄を表示するには、<input>タグに type 属性＝“text”を指定すると、 1 行の文字入力欄を表示する。また、 size 属性には、入力欄の表示幅を半角英数字の桁 数で指定する。そして、name 属性は、コントロール（部品）につける名前を任意の文 字列で指定する。読者が入力欄に記入したデータは、「name 属性の属性値＝記入デー タ」という形式で送信される。<input type=”text”>タグは、1 行の入力欄を表示する。 「第5 回目のタグ」 55. 複数行の文字入力欄を表示するには、<textarea> ∼ </textarea> 入力欄の大きさ は、cols 属性と rows 属性で指定する。Cols 属性は入力欄の横幅を半角英数字の桁数 で指定し、rows 属性は縦幅を行数で指定する。
例）<textarea cols=”11” rows=”4” name=”コントロール名”> ∼ </textarea>
56. ラジオボタンを表示するには、<input>タグに type 属性=”radio”を指定する。ラジオ ボタンは、複数の選択肢の中から、1 つだけを選ぶ形式のコントロールである。たとえ ば、「はい」「いいえ」で答えたり、「並」「大盛」「特盛」の中から１つ選ぶといった、 答えが必ず1 つに決まる質問に使う。<input type=”radio”> value 属性は、ラジオ ボタンが選択されたときに送信されるデータで、任意の文字列で指定する。また、 checked 属性は、あらかじめ選択されているラジオボタンを指定するために記述する。 例）<input type=”radio” name=”コントロール名” value=”送信データ” checked>
57. チェックボックスを表示するには、<input>タグに type 属性=”checkbox” チェック ボックスは複数の回答ができる。Name 属性はコントロール名前を、value 属性はその チェックボックスが選択されたときに送信されるデータを、それぞれ任意の文字列で 指定する。
例）<input type=”checkbox” name=”コントロール名” value=”送信データ”>
59. メニューを表示するには、<select> ∼ </select> の範囲にメニューの項目を指定す ることで、メニューが表示される。Name 属性はコントロールの名前を任意の文字列 で指定する。また、size 属性は表示されるメニューの大きさを行数で指定する。Size=”1” のときは「プルダウンメニュー」の形式で表示される。size 属性＝“２”以上の数を 指定すると、このとき、選択肢の数が size 属性の指定よりも多い場合は、メニューに 「スクロールボックス」が表示される。
例）<select name=”コントロール名” size=”行数”> ∼ </select>
60. メニューの各項目を指定するには、<option> ∼ </option> ： <option>タグは <select> ∼ </select>の範囲に記述してメニューの各項目を指定する。Value 属性は 項目が指定されたときに送信されるデータを指定する。
例）<option value=”送信データ”> ∼ </option>
61. あらかじめ選択されている項目を指定するには、<option> ∼ </option>タグに selected 属性を指定する。
例）<option value=”engine” selected> ∼ </option>
62. 複数の項目を同時に選択できるメニューを指定するには、<select> ∼ </select>タグ にmultiple 属性を指定すると、メニューの項目を複数選択できるようになります。な お、この場合 <select size=”1”>を指定してもプルダウンメニューにはならず、スクロ ールボックス付のメニューで表示される。これは、プルダウンメニューでは複数の項 目を同時に選択できないためである。
63. フォームのデータの送信先を指定するには、<form action=”送信先の URL”> ~ </form> ：送信先として指定されるのは、通常、送信データを処理するための作られ ているプログラムです。このプログラムは、フォームのデータを受け取って、それを 別途指定されているメールアドレス宛に電子メールで送信したり、データベースに登 録するといった処理を行います。ｗｗｗサーバは、ページの読者から送信されたデー タをプログラムに渡し、プログラムが作成した処理結果を、ページの読者に渡す、仲 介者の役目を果たします。この仕組みを「CGI（common gateway interface）」といい ます。また、CGI によって呼び出されるプログラムは、「CGI プログラム」と読んでい ます。
例）<form action=“http://www.nomadworks.co.jp/cgi-bin/mail.cgi”method=“post”> 64. フォームのデータの送信方法を指定するには、<form method=”post” または”get”>：
method 属性の属性値は、post, get 2 種類だけ。Method=”get”を指定した場合は、フ ォームに入力されたデータは、送信先の URL の松尾につながって送信される。一方、 method=”post”を指定された場合は、送信データは一種の添付ファイルとして指定され た送信先に届きます。何も指定しなかった場合は、method=”get”を指定したものとし て扱われます。 「第6 回目のタグ」 「ブラウザのウィンドウを分割してみよう。」 フレームによるウィンドウの分割には、「ブラウザのウィンドウをどのように分割して、ど の部分にどのページを読み込むか」を指定するHTML ファイルが必要になります。 65. 5 つのファイルを作成して、menu.html で保存する。6 つ目のファイルとして frame.html を作成し保存する。
66. ウィンドウの分割を指定するタグは、<frameset> ~ </frameset>タグに cols 属性＝“縦 分割の指定”（左右の分割）、 rows=“横分割の指定”（上下の分割）また、一般的な HTML ファイルでは、<body> ~ </body>の範囲に、ブラウザに表示する内容を記述す る。一方、フレームを定義する HTML ファイルでは、<body>~</body>に代わって、 <frameset> ~ </frameset>を記述する。
例）<frameset cols=”横幅１、横幅２、横幅 3・・・rows=”高さ１、高さ２、高さ３・・・”>： 属性値としては、3 種類の指定方法がある。一つは、「pixel 数」で指定、２つめは、「％」 で指定、３つめは、「整数＊」の形式で指定する方法です。 例）cols=”2＊、3＊、1＊” ：ウィンドウを縦に２：３：１の割合で 3 分割する場合 rows=”＊、＊” ：ウィンドウを上下に 2 等分する指定 cols=”26％、＊” という指定は、「左のフレームの幅をウィンドウ全体の幅の26％ で表示し、右のフレームはその残り」という意味です。 cols=”200、＊”、cols=”66％、＊”、cols=”＊、＊”（1：1）、cols=”2＊、＊”（２：
67. フレーム内に表示する HTML ファイルを指定するには、分割したウィンドウの各フレ ームに表示する内容は、<frameset>~</frameset>の範囲に書いた<frame>タグを使っ て指定する。<frameset>タグで分割したフレームの数だけ<frame>タグを記述するこ とで、フレームの表示が完成する仕組みです。<frame>タグには、終了タグはない。 ま た、フレーム内に表示するHTML ファイルは、<frame>タグに src 属性で指定する。 １つの<frame>タグで、フレームに HTML ファイル 1 つを割り当てることができる。 割り当ての順序は、まず左から右へ、また、上から下へ、という順になる。
例）<frameset clos=”＊、＊、＊”> <frameset cols=”＊、＊” rows=”＊、＊”> <frame src=”1.html”> <frame src=”1.html”> <frame src=”2.html”> <frame src=”2.html”> <frame src=”3.html”> <frame src=”3.html”> </frameset> <frame src=”4.html”> </frameset> 68. フレーム内に表示する HTML ファイルを指定するタグ、
69. <frame>タグに name 属性には、フレームの名前を指定する。フレームは、リンク先の ページをどのフレームに表示するかを指定するためなどに使われます。
例） <frame src=”index.html” name=”contents”>
70. リンク先を表示するフレームを指定するには、<a>タグに target 属性に指定したフレ ームに表示される仕組み。Target 属性の属性値は、<frame>タグの name 属性の属性 値であるフレーム名にリンク先のページが表示される。
