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

Size: px

Start display at page:

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

いつやしまむね
5 years ago
Views:

1 ホームページ作成 1. HTML 言語によるホームページ作成 2. ホームページ作成ソフト IBM : ホームページビルダー Microsoft FrontPage 1

2 ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる文字情報だけが入ったファイルを編集するソフトウェアです Windowsに付属しているメモ帳を使う 2

3 HTML ファイルの基本的な構成 <HTML> <HEAD> ページの情報 </HEAD> ページのタイトル表示方法文字コードなど <BODY> 本文 </BODY> 実際に表示されるホームページの内容 </HTML> 3

4 HTML 記述のルール 1. タグは大文字小文字を区別しない 2. 本文中の余分なスペースは無視される 3. 開始タグと終了タグ : <html>~</html>,<br>,<hr> 4. タグは必ず半角文字で記述する 5. タグは正確に入力する : スペルの間違いスラッシュが抜けるなど 6. Hypertext Markup Language 4

5 HTML のタグ 1. HTML で < と > で囲まれた英数字のことをタグというタグの役割はタグそのものが意味を持っているたとえば見出しリスト表リンクなどを示すことです 2. ブラウザは HTML で書かれた文書を読み込むとその中にあるタグを読み取って文書の各部分が何を表しているかを解釈するそして見出しなら大きな文字で段落なら改行してというように文書を見栄えよく表示する 5

6 属性と属性値 1. タグの属性は開始タグの中に属性 = 属性値という形式で記述する 2. 1 つのタグに複数の属性を指定する場合は属性同士を半角スペースで区切って書く属性を各順番には特に決まりがなくどの属性から書いても表示結果は同じであるたとえば 3. <p align= center >~</p> 4. <font color= yellow size= 5 >~</font> 5. <body bgcolor= red text= yellow > 6. <hr size= 10 width= 60% align= left noshade> 6

7 タグの記述 1. <font size= 5 color= blue > こんにちは </font> 半角の空白開始タグ 2. 1 行表示 :<b> 世界の都市めぐり </b> 3. 2 表表示 :<b> 世界の都市めぐり </b> 4. 3 行表示 :<b> 世界の都市めぐり </b> 終了タグ 7

8 悪い例 1. 全角文字 :<font color= blue ちは </font> 2. 空白が全角 :<font color= blue > こんにちは </font> 3. <font color= blue > こんにちは </font > 8

9 第 1 回目 1. HTMLファイルについて説明 2. <title> ページタイトル名 </title> 3. <html>~</html> は HTMLファイルを示す <head>~</head> 部にはタイトルを入力する <body>~</body> 部にはホームページの内容を記述する 4. <br> タグ : 改行を指定するタグ 5. <h1>~</h1>: 見出しをつけるタグ h1~6 6. <font size= 文字サイ > 文字列 </font> 7. <p>~</p>: 段落を表示位置を指定するタグ 8. <hr>: 水平線を表示する 9. <b>~</b> は太字,<i>~</i> 斜体,<u>~</u> 下線を指定する文字列の強調 10. トップページのファイル名は Index.html で保存する 9

10 見出しの表示位置を指定するタグ 1. <h>~</h>: 見出しを指定するタグ 2. <h1> から <h6> まである 3. <h6> 文字列 </h6>: 最も小さいサイズ 4. <h1> 文字列 </h1>: 最も大きいサイズ 5. <h1 align= center > 文字列 </h1> align 属性 = left center right 6. <font size= 文字サイズ > 文字列 </font>: 文字サイズを 1~7 の整数で指定何も指定しない場合はサイズ =3 と同じ大きさとなる 10

11 改行を指定するタグ 1. <br> タグは終了タグがない 2. 文字列 <br> 3. 名所めぐり <br><br> 4. ヨーロッパの町並み <br><br><br> 11

12 水平線を区切るタグ 1. <hr>: 終了タグはない 2. <hr size= 太さ >: 太さをPixel 数で指定何も指定しない場合は size= 2 で表示される 3. <hr width= 長さ >: 長さを絶対値または相対値で指定絶対値は Pixel 数で指定相対値はウィンドウの横幅に対する割合 (%) で指定 50% 4. <hr align= center >:align= left, center, right. 何も指定しないと中央揃えになる 5. <hr color= カラーネームまたは #RGB >: 値水平線の色 6. <hr size= pixel 数 width= % またはpixel 数 align= left color= #00ff00 noshade> 12

13 段落を指定するタグ 1. <p>~</p>: 段落を指定する 2. <p align= left >~</p>: 左揃え 3. <p align= center ><img src= liberty.jpg > </p>: 画像を中央揃え 4. <p align= center > 文字列 </p>: 文字を中央揃え 5. <p align= right >~</p>: 右揃え 6. 何も指定しない場合は align= left になる 7. <div align= > 文字列 </div>: 文字列や画像を1つのブロックとして扱うためのタグ align 属性使って文字列を中央揃えにしたり右揃えにしたりできる 13

14 太字斜体下線など 1. <b> 文字列 </b>: 太字 2. <i> 文字列 </i>: 斜体 3. <u> 文字列 </u>: 下線を指定 4. <strong>~</strong>: 強調 5. <em>~</em>: 強調 6. <sup>~</sup>: 上付き文字km2 7. <sub>~</sub>: 下付き文字 H

15 文字の色や大きさを変更するには 1. <font> 文字列 </font> 2. <font size= 文字サイズ > 文字列 </font>: 文字サイズ :1~7 の整数で指定何も指定しない場合はサイズ =3 と同じ大きさとなる 3. <font color= カラーネーム > 文字列 </font> カラーネーム :green, yellow, red, purple, aqua, gray, blue など 4. <font color= #RGB 値 > 文字列 </font> 15

16 RGB 値 RGBとは光の3 原色 (Red,Green,Blu のことですコンピュータではこのRGBを組み合わせてさまざまな色を表現しているそれぞれ2 桁の16 進数で表しているタグでRG B 値を指定する場合は先頭に # をつけて指定するたとえば 0000,#ff 3333,#ffff33,#33f f33, #ff69b4, #a52a2a,#0000ffなど詳しくは BRG 値表を参照する 16

17 ページ全体の背景色と文字の色を指定するには 1. <body> 文字列 </body> 背景色を指定するには bgcolor= カラーネームまたは #RGB 値文字色を指定するには Text= カラーネームまたは #RGB 値 2. <body bgcolor= yellow text= red >~</body> 3. <body bgcolor= white text= black >~</body> 17

18 画像を表示するタグ <img> タグ : 終了タグはない Src 属性 = 画像ファイル名 alt= 代替文字 <img src= 画像ファイル名 > 画像ファイルは拡張子が.jpg.gif.bmp.png <img alt= 自由の女神 >: 画像をポイントすると代替文字が表示される <img src= liberty.jpg alt= 自由の女神 > <p align= center ><img src= liberty.jpg ></p> 画像の中央揃え他にleft, rightがある 18

19 画像と文字列との位置 <p><img src= ファイル名 align= top > 文字列 </p>: 上端に揃える Align 属性 =top, center, middle, bottom. 何も指定しないと align= bottom になる <p>~</p> の代わりに <div>~</div> タグを使っても良い <p><img src= ファイル名 align= left > 文字列 </p>: 左側に画像右側に複数行の文字列 <p><img src= ファイル名 align= right > 文字列 </p>: 右側に画像左側に複数行の文字列 <br clear= all >: 画像の横の文字列の折り返しを解除する 19

20 画像の大きさを指定 1. <img src= ファイル名 height= 縦の長さ widht= 横の長さ >: 絶対値または相対値で指定何も指定しない場合はもともとの大きさのまま表示される 2. 絶対値 : ピクセル数で指定 3. 相対値 : ウィンドウサイズに対する割りありを % で指定 3 0% 50% など 4. <img src= ファイル名 height= 200 widht= 70% > 5. ホームページの背景に画像を貼り付けるには <body background= 画像ファイル名 > 20

21 第 2 回目 1. <img src= 画像ファイル名 >: 画像を表示する 2. <body bgcolor= 色 text= 色コード >~</body> 3. <font color= 色 size= 1~7 >~</font> 4. <b>~</b>: 太字 <i>~</i>: 斜体 5. <u>~</u>: 下線を表示 <em>~</em>: 文字列を強調 6. <strong>~</strong>: 文字列を強調 7. <sup>~</sup>: 上付き文字, <sub>~</sub> 下付き文字 21

22 第 3 回目 1. リンク先のページとして newyork.html を作成 2. <a href= リンク先のファイル名 > リンクスポット </a> 3. <a href= メトロポリタン美術館 </a> 4. <a href= newyork.html > ニューヨーク案内 </a> 22

23 リンクとはホームパージ内の下線を引いてある文字列をクリックすると関連付けられたページにジャンプするこのように他の情報に関連付けることをリンクと呼ぶリンク元の文字列をクリックすると他のページにジャンプするまたは同じページの別のところにジャンプする 23

24 同じフォルダ内のページをリンク 1. <a href= リンク先のファイル名 > リンク元の文字列 </a>:anchor の略です留め金という意味 2. 他のフォルダ内にあるページをリンクするには相対指定が必要となる相対指定とはフォルダやファイルの上下関係を指定する方法である <a href= リンク先のファイルの相対指定 > リンク元の文字列 </a> 3. <a href= 別フォルダ名 / リンク先のファイル名 > リンク元の文字列 </a> 24

25 URL やメールアドレスをリンクする 1. <a href= mailto: メールアドレス > リンク元の文字列 </a> 2. <a href= メトロポリタン美術館 </a> 3. リンク元に画像ファイルを指定する <a href= リンク先 ><img src= 画像ファイル ></a> 4. リンク先にはファイル名 URL, mailto: メールアドレス 25

26 箇条書きリスト作成箇条書きリスト : <ul type= 行頭文字の種類 > 箇条書きの項目 <li> 文字列 </li> <li> 文字列 </li> <li> 文字列 </li> </ul> 行頭文字の種類には disc( 黒丸 ) circle( 白丸 ) square( 四角 ) のどれかを指定する type 属性の指定がない場合は circle と指定したときと同じになる 26

27 番号付きリスト開始タグ : <ol type= 行頭文字の種類 > 箇条書きの項目 <li> 文字列 </li> <li> 文字列 </li> <li> 文字列 </li> 終了タグ </ol> 番号の種類には 1 A a Ⅰのどれかを指定する Type 属性の指定がない場合は 1を指定したときと同じになる 27

28 番号つきのリスト作成 <ol> <li> ~ </li> <li> ~ </li> <li> ~ </li> </ol> type 属性 = a, A, i, I start 属性 = 数字 <ol type= a start= 5 > ~</ol>: リスト全体の表示形式を指定することになる <li type= A > ~ </li>: 項目のみの表示形式を指定することになる 28

29 箇条書きのリスト作成 <ul> <li> ~ </li> <li> ~ </li> <li> ~ </li> </ul> type 属性 : リスト全体の表示形式を指定する <ul type= square > ~ </ul> 属性の属性値 :square, circle, disc <li> タグに type 属性を追加すると項目のみの表示形式を指定することになる <li type= circle > ~ </li> 29

30 定義型リスト定義型リスト :<dl> 定義したい用語 :<dt> 文字列 </dt> 用語の解説 <dt> 文字列 </dt> <dt> 文字列 </dt> </dl> 30

31 第 4 回目 <table> 行目 <tr> <th>~</th> <th>~</th> <th>~</th> </tr> <td>~</td> <td>~</td> <td>~</td> 2 行目 <tr> </tr> 3 行目 <tr> <td>~</td> <td>~</td> <td>~</td> </tr> </table> 31

32 テーブルの作成 <table>~</table>: 表の作成 <tr>~</tr>: 行を指定 <td>~</td>: セルの内容 ( 項目 ) を指定 <caption>~</caption>: 表のタイトルを指定 <th>~</th>: 見出しを指定 32

33 テーブルの罫線を引く 1. <table border= 太さ ></table>: border 属性 = ピクセル数で指定 2. <table border= 太さ bordercolor= 色 ></table> 3. テーブルの見出しをつけるには : 4. <tr><th> 見出し </th></tr> 5. テーブルの表題 : 6. <caption align= 位置 > 文字列 </caption>: 位置には top, bottom がある 33

34 テーブルの大きさを指定する 1. <table width= 幅 height= 高さ >~</table> width= Pixel 数または % ( ウィンドウズに対する割合 height= = Pixel 数または % ( ウィンドウズに対する割合 2. <table width= 800 height= 200 >~</table> 3. <table width= 80% height= 30% >~</table> 4. セルの大きさを指定 : <th width= 幅 height= 高さ >~</th> <td width= 幅 height= 高さ >~</td> 34

35 セルの間隔 1. Cellspacing: セルとセルとの間隔 2. Cellpadding: セル内の文字と罫線との間隔 3. <table cellpadding= pixel 数 cellspacing= pixel 数 >~</table> 4. <table cellpadding= 5 cellspacing= 5 >~</table> 5. 表の枠線の太さ :border= pixel 数枠線の色を指定 :bordercolor= RGB 値またはカラーネーム <table border= 5 bordercolor= red >~</table> 35

36 cellspacing 長所枠線の太さ cellpadding 36

37 セルに色を塗る 1. <th bgcolor= カラーネームまたはRG B 値 ></th> 2. <td bgcolor= カラーネームまたはRG B 値 ></td> 3. セルに画像を入れる : <td><img src= 画像ファイル alt= 代替文字 ></td> 37

38 テーブルの位置を指定する. 中央揃え :<p align= center ><table>~</table></p>. 左揃え :<p align= center ><table>~</table></p>. 右揃え :<p align= center ><table>~</table></p>. <p>~</p> の代わりに <div>~</div> タグで位置を指定できる 38

39 テーブルの横に文字列を表示する左にテーブル右に文字列を表示 : <table border= 5 align= left ></table> 左に文字列右にテーブルを表示 : <table border= 5 align= right ></table> 39

40 複数のセルを結合する横に並んだセルを結合 : <td colspan= 結合するセルの数 >~</td> 縦に並んだセルを結合 : <td rowspan= 結合するセルの数 >~</td> 40

41 セル内の文字位置を指定する 1. 行全体 : <tr align= 横方向での位置 valign= 縦方向での位置 ><td>~</td><td>~</td></tr> 2. 項目のセル : <td align= 横方向での位置 valign= 縦方向での位置 >~</td> 3. Align 属性 = left, center, right, 初期値は left valign 属性 = top, middle, bottom, 初期値は middle になっている 41

42 アンケートのフォーム作成 <html> <head><title>~</title></head> <body> <form> <input> <textarea> ~ </textarea> <select> ~ <option> ~ </option> <option> ~ </option> <option> ~ </option> <option> ~ </option> </select> </form> </body> </html> 42

43 フォーム 1. Web ページの中でユーザが入力したり選択したりできる一連の項目の集まりをフォームと呼ぶ 2. フォームには文字を入力するためのテキストボックス選択肢の中から 1 つを選ぶラジオボタン該当する項目をいくつでも選択可能なチェックボックス一覧から選択するメニュー送信ボタンなどさまざまな部品で構成されているこれらの部品をコントロールまたはフィールドと呼ぶ 3. www では情報は作者から読者へと一方向にデータが送られるのが普通ですがフォームを用意することで読者から作者へとデータを送ることができる 43

44 <input> タグ 1. type 属性の属性値 : submit を指定すると送信ボタンが表示されるがボタン上に文字列を表示するには value= 文字列 ( 属性の属性値 <input type= submit value= 送信 > 2. type 属性の属性値 : reset を指定すると消去ボタンが表示されるがボタン上に文字列を表示するには value= 文字列 ( 属性の属性値 ) <input type= reset value= クリア > 3. type 属性の属性値 : text を指定すると 1 行の文字入力欄が表示されるさらに size 属性は入力欄の表示幅を半角英数字の桁数で指定する <input type= text size= 30 > 44

45 部品の表示 1 1. 入力欄は <input> タグを使って作成するどの種類の入力欄を作るかはtype 属性で指定する 2. 1 行だけの文字入力欄を作成したいときは type= text で指定し入力欄の幅はsize 属性を使って指定する Size= 半角文字の文字数で指定する <input type= text size= 30 name= simei > 3. 入力欄に入力した内容はフィールドと呼ばれるところに格納されるフィールドとはデータを入れるための箱のようなものと考えてください 4. フォーム内の送信ボタンを押すと指定した送信先にフィールドの内容がデータとして送信されるたとえば <input type= text name= syumi size= 30 > と指定すると送信されるデータはフィールド名のデータ =syumi ゴルフとなる 45

46 部品の表示 2 1. 複数行の文字入力欄 <textarea rows= 入力欄の高さ cols= 入力欄の幅 name= フィールド名 ></textarea> 2. 高さは行数で指定する幅は半角文字の文字数で指定する 3. <textarea rows= 5 cols= 60 name= kanso ></textarea> と指定すると高さが 5 行幅が半角文字で 60 文字分の入力欄が作成される 46

47 部品の表示 3 type= radio : ラジオボタンの表示 <input type= radio name= seibetu value= オトコ > 男性 <input type= radio name= seibetu value= オンナ > 女性 : 送信されるデータは seibetu= オトコ seibetu= オンナ type= checkbox : チェックボックスの表示チェックボックスは選択肢の中から複数の項目を選択できる <input type= checkbox name= good value= top > トップページ value 属性はラジオボタンが選択されたときに送信されるデータで任意の文字列 checked はあらかじめ選択されているラジオボタンを指定するために記述する 47

48 プルダウンメニュー作成 1. <select name= フィールド名 size= 1 >~</select>: <select> タグはメニューの範囲を指定する <select>~</select> の範囲にメニューの項目を指定することでメニューが表示される Name 属性は任意の文字列 size= 1 のときプルダウンメニュー形式で表示されて 2 以上を指定すると属性値に応じてメニューの行数が変わるこのとき選択肢の数が size 属性の指定よりも多い場合はスクロールボックスが表示される 2. <option value= 送信データ >~</option>:<option> タグは <select>~</select> の範囲に記述してメニューの各項目を指定する 3. Selected 属性はあらかじめ選択されている項目を指定 <option selected>~</option> 48

49 フォームの送信先 <form action=mailto: メールアドレス >~</form> <form method= get >~</form> 49

50 フレーム定義のための HTML ファイル <HTML> <HEAD> ~ </HEAD> <FRAMESET> <FRAME src= index.html > </FRAMESET> </HTML> <body>~</body> の代わりに <frameset>~</frameset> 50

51 フレームの 2 分割 1. フレームとは画面を分割する枠のことである 1つのウィンドウの中に複数の枠を作りそれぞれに異なるページを表示することができる 2. 左右に2 分割して各フレームにファイルを表示する <frameset cols= 幅 1 幅 2 > <frame src= ファイル名 > <frame src= ファイル名 > </frameset> 3. Cols 属性には各フレームの幅を一番左のフレームから順番を指定する幅はpixel 数 % * で指定する 4. <frame> タグにはフレームに表示するファイル名を一番左のフレームから順番を指定する 5. <frameset>~</frameset> を指定する場合は <body>~</body> は不要となる 51

52 左右の 2 分割 1. <frameset cols= 200 * <frame src= ファイル名 name= フレームの名前 > <frame src= ファイル名 name= フレームの名前 </frameset> 2. <frameset cols= 50% * > <frame src= ファイル名 name= フレームの名前 > <frame src= ファイル名 name= フレームの名前 > </frameset> 3. * は残りという意味 4. リンク先を指定するには target : 属性 target= フレームの名前 5. <a href= ファイル名 target= フレームの名前 > リンク元の文字列 </a> 52

53 フレームの縦の 2 分割 1. 上下に分割して各フレームにファイルを表示する 2. <frameset rows= 高さ 1 高さ 2 > <frame src= ファイル名 > <frame src= ファイル名 > </frameset> 3. Rows 属性には各フレームの高さを一番上のフレームから順番に指定する高さは pixel 数と % * で指定する 53

54 上下の 2 分割 1. <frameset rows= 150,* > <frame src= ファイル名 name= フレームの名前 > <frame src= ファイル名 name= フレームの名前 > </frameset> 2. <frameset rows= 50%,* > <frame src= ファイル名 name= フレームの名前 > <frame src= ファイル名 name= フレームの名前 > </frameset> 3. 分割された各フレームに名前をつけておく Name 属性 = 任意の名前たとえば left と right, ue と shita, top と bottom などというように 4. Cols 属性と rows 属性について混同しないようにする 54

55 3 分割 1. <frameset rows= 100,* > <frame src= ファイル名 name= フレームの名前 > <frameset cols= 150,* > <frame src= ファイル名 name= フレームの名前 > <frame src= ファイル名 name= フレームの名前 > </frameset> </frameset> 2. <frameset><frameset>~</frameset></frameset>: 入れ子 3. まずは上下の 2 分割してから下のフレームをさらに左右に 2 分割する 55

56 3 分割 1. <frameset cols= 150,* > <frame src= ファイル名 name= フレームの名前 > <frameset rows= 150,* > <frame src= ファイル名 name= フレームの名前 > <frame src= ファイル名 name= フレームの名前 > </frameset> </frameset> 2. 左右に 2 分割してから上下に 2 分割する 3. <frameset><frameset>~</frameset></frameset>: 入れ子 56

57 フレーム調整 1. <frame src= ファイル名 frameborder= 0または1 scrolling= all noresize> 2. Frameborder 属性 =1を指定すると境界線表示 0 を指定すると非表示となる初期値は1となっている 3. スクロールバーの表示非表示 scrolling= all は自動 yesは表示 noは非表示になっている 4. フレームの境界線を固定するには noresize : 5. フレームの境界線はマウスでドラッグして移動することにより各フレームの大きさの変更ができる 6. 境界線の色を変えるには :bordercolor= 色名 border= 5 <frameset rows= 30%,* bordercolor= 色名 border= 5 >~</frameset> 57

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

次のように編集を行う 1. 改行を挿入するには <br> タグ例 ) 世界の都市めぐり <br> ~~~あれこれをご紹介します <br> ~~~ 名所めぐり <br> ~~~ヨーロッパの町並み <br> 2. 段落を区切るには <p> ~ </p> タグ例 )<p> 世界の都市めぐり </p> 第 1 回目のタグ 1. Web ページ ( ホームページ ) の作成メモ帳 ( テキストエディタ ): ウィンドウズに付属しているソフトテキストエディタメモ帳を開くには : スタートボタンをクリックプログラムポイントアクセサリメモ帳を選ぶブラウザ (Web ページの閲覧ソフト Internet Explorer): ウィンドウズに付属しているソフトが必要とする homepage.html