第 1 回目のタグ 1. Web ページ ( ホームページ ) の作成メモ帳 ( テキストエディタ ): ウィンドウズに付属しているソフトテキストエディタ メモ帳 を開くには : スタートボタンをクリック プログラムポイント アクセサリ メモ帳を選ぶ ブラウザ (Web ページの閲覧ソフト Internet Explorer): ウィンドウズに付属しているソフトが必要とする homepage.html フォルダ作成 : 個人専用フォルダ (Z:) の下にフォルダの新規作成を行う 授業中に作成した html ファイルはこのフォルダに保存する 2. Web ページの構造 <html> <head> <title> 世界の都市めぐり </title> </head> ヘッダー部 <body> ホームページの内容を記述 </body> </html> ボディ部 HTML 文書 まず 一つ目のファイル, トップページを作成する ファイル名は index.html タイトルは 世界の都市めぐり とし ホームページの内容は次の文章を入力してください <html> <head><title> 世界の都市めぐり </title></head> <body> 世界の都市めぐり 世界の都市めぐり のページへようこそ このページでは 愛すべきニューヨークとヨーロッパの都市をめぐるあれこれをご紹介します ニューヨーク案内 マンハッタンの地理 交通 名所めぐり絵はがき 写真で見るヨーロッパの町並み送信フォーム このページの感想をお寄せください </body> <html> 1
次のように編集を行う 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 2
例 )<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 属性 = 1~7 例 )<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 を入力して保存ボタンをクリックする 検索エンジン google を起動して検索キーワード 自由の女神 を入力する 目的の画像をポイントして右クリックする 名前をつけて保存する コマンドをクリックして保存する 保存先は Z:(Z ドライブ ) の中の homepage フォルダ ファイル名は liberty.jpg にする 3
4
第 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 作成 5
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 数. 18. 画像の周囲の余白を指定するには <img> タグに 上下の余白はvspace= pixel 数 6
左右の余白は 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 丁目までがミッドタウン これより北がアップタウンです を追加入力する 7
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 数 を追加する 例 )<table border= 1 cellspacing= 1 cellpadding= 5 >~</table> 8
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> 9
第 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> : 開始番号が5になる 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>> 10
例 )<dl> <dt> 場所 </dt> <dd> 女神像は マンハッタン島の南にあるリバティ島に建っており ここへはフェリーで渡ることができる </dd> <dt> 大きさ </dt> <dd> 女神の高さは 46.5 メトル 台座と像をあわせると約 93 メトルにもなります </dd> </dl> 11
4 つめのファイル ( アンケートフォーム ):form.html 作成 51. フォームを作成するには <form>~</form> : 送信ボタンを押すと <form>~ </form> の範囲にあるコントロール ( 部品 ) に入力されたデータが 指定した送信先に送信される フォームには テキストボックスやラジオボタンなどの部品の以外に 通常の文字や表 リスト 画像なども入れることができる 52. データの送信ボタンを表示するには <input> タグ終了タグはない <input> タグに type 属性 = submit を指定すると 送信ボタンが表示されるが さらに value 属性は送信ボタンに表示される 文字列 を指定する 例 )<input type= submit value= 送信 > 53. フォームに入力した内容を消去するボタンを表示するには <input> タグに type 属性 12
= 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つ選ぶといった 答えが必ず 1 つに決まる質問に使う <input type= radio > value 属性は ラジオボタンが選択されたときに送信されるデータで 任意の文字列で指定する また checked 属性は あらかじめ選択されているラジオボタンを指定するために記述する 例 )<input type= radio name= コントロール名 value= 送信データ checked> 57. チェックボックスを表示するには <input> タグに type 属性 = checkbox チェックボックスは複数の回答ができる Name 属性はコントロール名前を value 属性はそのチェックボックスが選択されたときに送信されるデータを それぞれ任意の文字列で指定する 例 )<input type= checkbox name= コントロール名 value= 送信データ > 58. 選択済みのチェックボックスを表示するには <input> タグに checked 属性 ( あらか じめ選択されているチェックボックスを表示 ) を指定する 例 )<input type= checkbox checked> 13
59. メニューを表示するには <select> ~ </select> の範囲にメニューの項目を指定することで メニューが表示される Name 属性はコントロールの名前を任意の文字列で指定する また size 属性は表示されるメニューの大きさを行数で指定する Size= 1 のときは プルダウンメニュー の形式で表示される size 属性 = 2 以上の数を指定すると このとき 選択肢の数が 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> : 送信先として指定されるのは 通常 送信データを処理するための作られているプログラムです このプログラムは フォームのデータを受け取って それを別途指定されているメールアドレス宛に電子メールで送信したり データベースに登録するといった処理を行います wwwサーバは ページの読者から送信されたデータをプログラムに渡し プログラムが作成した処理結果を ページの読者に渡す 仲介者の役目を果たします この仕組みを CGI(common gateway interface) といいます また CGI によって呼び出されるプログラムは CGI プログラム と読んでいます 例 )<form action= http://www.nomadworks.co.jp/cgi-bin/mail.cgi method= post > 64. フォームのデータの送信方法を指定するには <form method= post または get >: 14
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= 横幅 1 横幅 2 横幅 3 rows= 高さ1 高さ2 高さ 3 >: 属性値としては 3 種類の指定方法がある 一つは pixel 数 で指定 2つめは % で指定 3つめは 整数 * の形式で指定する方法です 例 )cols= 2* 3* 1* : ウィンドウを縦に2:3:1の割合で3 分割する場合 rows= * * : ウィンドウを上下に2 等分する指定 cols= 26% * という指定は 左のフレームの幅をウィンドウ全体の幅の26% で表示し 右のフレームはその残り という意味です cols= 200 * cols= 66% * cols= * * (1:1) cols= 2* * (2: 1 ), cols= * * * cols= 200 100, * cols= 100 30%, *, 2, cols= 4* * rows= 3* 2* 15
67. フレーム内に表示する HTML ファイルを指定するには 分割したウィンドウの各フレ ームに表示する内容は <frameset>~</frameset> の範囲に書いた <frame> タグを使っ て指定する <frameset> タグで分割したフレームの数だけ <frame> タグを記述するこ とで フレームの表示が完成する仕組みです <frame> タグには 終了タグはない ま た フレーム内に表示する HTML ファイルは <frame> タグに src 属性で指定する 1つの <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 ファイルを指定するタグ 例 )<frame src= 表示ファイルの URL name= フレーム名 > 16
69. <frame> タグに name 属性には フレームの名前を指定する フレームは リンク先のページをどのフレームに表示するかを指定するためなどに使われます 例 ) <frame src= index.html name= contents > 70. リンク先を表示するフレームを指定するには <a> タグに target 属性に指定したフレ ームに表示される仕組み Target 属性の属性値は <frame> タグの name 属性の属性 値であるフレーム名にリンク先のページが表示される 17