次のように編集を行う 1. 改行を挿入するには <br> タグ例 ) 世界の都市めぐり <br> ~あれこれをご紹介します <br> ~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ例 )<p> 世界の都市めぐり </p>

Size: px

Start display at page:

Download "次のように編集を行う 1. 改行を挿入するには <br> タグ例 ) 世界の都市めぐり <br> ~~~あれこれをご紹介します <br> ~~~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ例 )<p> 世界の都市めぐり </p>"

せせらおうじ
5 years ago
Views:

1 第 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

2 次のように編集を行う 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

3 例 )<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, #cc ページ全体の文字の色を指定するには <body> タグに text 属性 = 色名を追加する例 )<body bgcolor= yellow text= red > ~ </body> ファイルメニューから名前をつけて保存をクリック保存先 homepage フォルダファイル名 index.html を入力して保存ボタンをクリックする検索エンジン google を起動して検索キーワード自由の女神を入力する目的の画像をポイントして右クリックする名前をつけて保存するコマンドをクリックして保存する保存先は Z:(Z ドライブ ) の中の homepage フォルダファイル名は liberty.jpg にする 3

4 4

5 第 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= > 作者へのメール </a> <a href= > メトロポリタン美術館 </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.

6 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.

7 左右の余白は hspace= pixel 数 19. 画像の枠線を指定するには <img> タグに border= pixel 数例 )<img border= 5 > 20. 画像の説明を指定するには <img> タグに alt= 代替文字例 )<img alt= シャンゼリゼ大通の写真 > 21. 背景に画像を指定するには <body> タグに background= 画像ファイル 22. 背景色を指定するには bgcolor= 色名または色コードフォント色は text= 色名または色コード例 )<body bgcolor= # 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

8 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

9 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

10 第 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

11 例 )<dl> <dt> 場所 </dt> <dd> 女神像はマンハッタン島の南にあるリバティ島に建っておりここへはフェリーで渡ることができる </dd> <dt> 大きさ </dt> <dd> 女神の高さは 46.5 メトル台座と像をあわせると約 93 メトルにもなります </dd> </dl> 11

12 4 つめのファイル ( アンケートフォーム ):form.html 作成 51. フォームを作成するには <form>~</form> : 送信ボタンを押すと <form>~ </form> の範囲にあるコントロール ( 部品 ) に入力されたデータが指定した送信先に送信されるフォームにはテキストボックスやラジオボタンなどの部品の以外に通常の文字や表リスト画像なども入れることができる 52. データの送信ボタンを表示するには <input> タグ終了タグはない <input> タグに type 属性 = submit を指定すると送信ボタンが表示されるがさらに value 属性は送信ボタンに表示される文字列を指定する例 )<input type= submit value= 送信 > 53. フォームに入力した内容を消去するボタンを表示するには <input> タグに type 属性 12

13 = 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

14 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= method= post > 64. フォームのデータの送信方法を指定するには <form method= post または get >: 14

15 method 属性の属性値は post, get 2 種類だけ Method= get を指定した場合はフォームに入力されたデータは送信先の URL の松尾につながって送信される一方 method= post を指定された場合は送信データは一種の添付ファイルとして指定された送信先に届きます何も指定しなかった場合は method= get を指定したものとして扱われます第 6 回目のタグブラウザのウィンドウを分割してみようフレームによるウィンドウの分割にはブラウザのウィンドウをどのように分割してどの部分にどのページを読み込むかを指定する HTML ファイルが必要になりますつのファイルを作成して 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= , * cols= %, *, 2, cols= 4* * rows= 3* 2* 15

16 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

17 69. <frame> タグに name 属性にはフレームの名前を指定するフレームはリンク先のページをどのフレームに表示するかを指定するためなどに使われます例 ) <frame src= index.html name= contents > 70. リンク先を表示するフレームを指定するには <a> タグに target 属性に指定したフレームに表示される仕組み Target 属性の属性値は <frame> タグの name 属性の属性値であるフレーム名にリンク先のページが表示される 17

ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる文

ホームページ作成 1. HTML 言語によるホームページ作成 2. ホームページ作成ソフト IBM : ホームページビルダー Microsoft FrontPage 1 ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2

次のように編集を行う 1. 改行を挿入するには <br> タグ 例 ) 世界の都市めぐり <br> ~~~あれこれをご紹介します <br> ~~~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ 例 )<p> 世界の都市めぐり </p>

次のように編集を行う 1. 改行を挿入するには <br> タグ例 ) 世界の都市めぐり <br> ~あれこれをご紹介します <br> ~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ例 )<p> 世界の都市めぐり </p>