ホームページ作成 1. HTML 言語によるホームページ作 成 2. ホームページ作成ソフト IBM : ホー ムページビルダー Microsoft FrontPage 1
ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる 文字情報だけが入ったファイルを編集するソフトウェアです Windowsに付属している メモ帳 を使う 2
HTML ファイルの基本的な構成 <HTML> <HEAD> ページの情報 </HEAD> ページのタイトル 表示方法 文字コードなど <BODY> 本文 </BODY> 実際に表示されるホームページの内容 </HTML> 3
HTML 記述のルール 1. タグは大文字 小文字を区別しない 2. 本文中の余分なスペースは無視される 3. 開始タグと終了タグ : <html>~</html>,<br>,<hr> 4. タグは必ず半角文字で記述する 5. タグは正確に入力する : スペルの間違い スラッシュが抜けるなど 6. Hypertext Markup Language 4
HTML のタグ 1. HTML で < と > で囲まれた英数字のことをタグという タグの役割はタグそのものが意味を持っている たとえば 見出し リスト 表 リンクなどを示すことです 2. ブラウザは HTML で書かれた文書を読み込むと その中にあるタグを読み取って文書の各部分が何を表しているかを解釈する そして 見出しなら大きな文字で 段落なら改行して というように文書を見栄えよく表示する 5
属性と属性値 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
タグの記述 1. <font size= 5 color= blue > こんにちは </font> 半角の空白 開始タグ 2. 1 行表示 :<b> 世界の都市めぐり </b> 3. 2 表表示 :<b> 世界の都市めぐり </b> 4. 3 行表示 :<b> 世界の都市めぐり </b> 終了タグ 7
悪い例 1. 全角文字 :<font color= blue ちは </font> 2. 空白が全角 :<font color= blue > こんにちは </font> 3. <font color= blue > こんにちは </font > 8
第 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
見出しの表示位置を指定するタグ 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
改行を指定するタグ 1. <br> タグは終了タグがない 2. 文字列 <br> 3. 名所めぐり <br><br> 4. ヨーロッパの町並み <br><br><br> 11
水平線を区切るタグ 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
段落を指定するタグ 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
太字 斜体 下線など 1. <b> 文字列 </b>: 太字 2. <i> 文字列 </i>: 斜体 3. <u> 文字列 </u>: 下線を指定 4. <strong>~</strong>: 強調 5. <em>~</em>: 強調 6. <sup>~</sup>: 上付き文字km2 7. <sub>~</sub>: 下付き文字 H 2 0 14
文字の色や大きさを変更するには 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
RGB 値 RGBとは 光の3 原色 (Red,Green,Blu のことです コンピュータでは このRGBを組み合わせてさまざまな色を表現している それぞれ2 桁の16 進数で表している タグでRG B 値を指定する場合は 先頭に # をつけて指定する たとえば 0000,#ff 3333,#ffff33,#33f f33, #ff69b4, #a52a2a,#0000ffなど 詳しくは BRG 値表を参照する 16
ページ全体の背景色と文字の色を指 定するには 1. <body> 文字列 </body> 背景色を指定するには bgcolor= カラーネーム または #RGB 値 文字色を指定するには Text= カラーネーム または #RGB 値 2. <body bgcolor= yellow text= red >~</body> 3. <body bgcolor= white text= black >~</body> 17
画像を表示するタグ <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
画像と文字列との位置 <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
画像の大きさを指定 1. <img src= ファイル名 height= 縦の長さ widht= 横の長さ >: 絶対値または相対値で指定 何も指定しない場合は もともとの大きさのまま表示される 2. 絶対値 : ピクセル数で指定 3. 相対値 : ウィンドウサイズに対する割りありを % で指定 3 0% 50% など 4. <img src= ファイル名 height= 200 widht= 70% > 5. ホームページの背景に画像を貼り付けるには <body background= 画像ファイル名 > 20
第 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
第 3 回目 1. リンク先のページとして newyork.html を作成 2. <a href= リンク先のファイル名 > リンクスポット </a> 3. <a href=www.metmuseum.org/home.asp> メトロポリタン美術館 </a> 4. <a href= newyork.html > ニューヨーク案内 </a> 22
リンクとは ホームパージ内の下線を引いてある文字列をクリックすると 関連付けられたページにジャンプする このように 他の情報に関連付けることを リンク と呼ぶ リンク元の文字列をクリックすると 他のページにジャンプする または同じページの別のところにジャンプする 23
同じフォルダ内のページをリンク 1. <a href= リンク先のファイル名 > リンク元の文字列 </a>:anchor の略です 留め金という意味 2. 他のフォルダ内にあるページをリンクするには 相対指定が必要となる 相対指定とは フォルダやファイルの上下関係を指定する方法である <a href= リンク先のファイルの相対指定 > リンク元の文字列 </a> 3. <a href= 別フォルダ名 / リンク先のファイル名 > リンク元の文字列 </a> 24
URL やメールアドレスをリンクする 1. <a href= mailto: メールアドレス > リンク元の文字列 </a> 2. <a href=www.metmuseum.org/home.asp> メトロポリタン美術館 </a> 3. リンク元に画像ファイルを指定する <a href= リンク先 ><img src= 画像ファイル ></a> 4. リンク先には ファイル名 URL, mailto: メールアドレス 25
箇条書きリスト作成 箇条書きリスト : <ul type= 行頭文字の種類 > 箇条書きの項目 <li> 文字列 </li> <li> 文字列 </li> <li> 文字列 </li> </ul> 行頭文字の種類には disc( 黒丸 ) circle( 白丸 ) square( 四角 ) のどれかを指定する type 属性の指定がない場合は circle と指定したときと同じになる 26
番号付きリスト 開始タグ : <ol type= 行頭文字の種類 > 箇条書きの項目 <li> 文字列 </li> <li> 文字列 </li> <li> 文字列 </li> 終了タグ </ol> 番号の種類には 1 A a Ⅰのどれかを指定する Type 属性の指定がない場合は 1を指定したときと同じになる 27
番号つきのリスト作成 <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
箇条書きのリスト作成 <ul> <li> ~ </li> <li> ~ </li> <li> ~ </li> </ul> type 属性 : リスト全体の表示形式を指定する <ul type= square > ~ </ul> 属性の属性値 :square, circle, disc <li> タグに type 属性を追加すると 項目のみの表示形式を指定することになる <li type= circle > ~ </li> 29
定義型リスト 定義型リスト :<dl> 定義したい用語 :<dt> 文字列 </dt> 用語の解説 <dt> 文字列 </dt> <dt> 文字列 </dt> </dl> 30
第 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
テーブルの作成 <table>~</table>: 表の作成 <tr>~</tr>: 行を指定 <td>~</td>: セルの内容 ( 項目 ) を指定 <caption>~</caption>: 表のタイトルを指定 <th>~</th>: 見出しを指定 32
テーブルの罫線を引く 1. <table border= 太さ ></table>: border 属性 = ピクセル数で指定 2. <table border= 太さ bordercolor= 色 ></table> 3. テーブルの見出しをつけるには : 4. <tr><th> 見出し </th></tr> 5. テーブルの表題 : 6. <caption align= 位置 > 文字列 </caption>: 位置には top, bottom がある 33
テーブルの大きさを指定する 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
セルの間隔 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
cellspacing 長所 枠線の太さ cellpadding 36
セルに色を塗る 1. <th bgcolor= カラーネームまたはRG B 値 ></th> 2. <td bgcolor= カラーネームまたはRG B 値 ></td> 3. セルに画像を入れる : <td><img src= 画像ファイル alt= 代替文字 ></td> 37
テーブルの位置を指定する. 中央揃え :<p align= center ><table>~</table></p>. 左揃え :<p align= center ><table>~</table></p>. 右揃え :<p align= center ><table>~</table></p>. <p>~</p> の代わりに <div>~</div> タグで位置を指定できる 38
テーブルの横に文字列を表示する 左にテーブル右に文字列を表示 : <table border= 5 align= left ></table> 左に文字列右にテーブルを表示 : <table border= 5 align= right ></table> 39
複数のセルを結合する 横に並んだセルを結合 : <td colspan= 結合するセルの数 >~</td> 縦に並んだセルを結合 : <td rowspan= 結合するセルの数 >~</td> 40
セル内の文字位置を指定する 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
アンケートのフォーム作成 <html> <head><title>~</title></head> <body> <form> <input> <textarea> ~ </textarea> <select> ~ <option> ~ </option> <option> ~ </option> <option> ~ </option> <option> ~ </option> </select> </form> </body> </html> 42
フォーム 1. Web ページの中でユーザが入力したり選択したりできる一連の項目の集まりをフォームと呼ぶ 2. フォームには 文字を入力するためのテキストボックス 選択肢の中から 1 つを選ぶラジオボタン 該当する項目をいくつでも選択可能なチェックボックス 一覧から選択するメニュー 送信ボタンなど さまざまな部品で構成されている これらの部品を コントロール または フィールド と呼ぶ 3. www では 情報は作者から読者へと 一方向にデータが送られるのが普通ですが フォームを用意することで読者から作者へと データを送ることができる 43
<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
部品の表示 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
部品の表示 2 1. 複数行の文字入力欄 <textarea rows= 入力欄の高さ cols= 入力欄の幅 name= フィールド名 ></textarea> 2. 高さは行数で指定する 幅は半角文字の文字数で指定する 3. <textarea rows= 5 cols= 60 name= kanso ></textarea> と指定すると 高さが 5 行 幅が半角文字で 60 文字分の入力欄が作成される 46
部品の表示 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
プルダウンメニュー作成 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
フォームの送信先 <form action=mailto: メールアドレス >~</form> <form method= get >~</form> 49
フレーム定義のための HTML ファイル <HTML> <HEAD> ~ </HEAD> <FRAMESET> <FRAME src= index.html > </FRAMESET> </HTML> <body>~</body> の代わりに <frameset>~</frameset> 50
フレームの 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
左右の 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
フレームの縦の 2 分割 1. 上下に分割して 各フレームにファイルを表示する 2. <frameset rows= 高さ 1 高さ 2 > <frame src= ファイル名 > <frame src= ファイル名 > </frameset> 3. Rows 属性には 各フレームの高さを一番上のフレームから順番に指定する 高さは pixel 数と % * で指定する 53
上下の 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
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
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
フレーム調整 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