*情報教育演習II 第13回 [#vf9c09c5] **前回の復習:HTMLファイルの作成 (2) [#nfe6fdea] :箇条書きのタグ| --ul -- 番号なし箇条書き --ol -- 番号つき箇条書き ---li -- 箇条書きの項目 --dl -- 説明つき箇条書き ---dt -- 箇条書きの項目名 ---dd -- 項目名に対する説明 :色の指定| --光の三原色である、赤(R)緑(G)青(B)の強さを値であらわす --16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)で、RGBそれぞれを00〜FFまでの256段階で設定 ---例:blackは#000000、redは#FF0000、whiteは#FFFFFF(「#」のあとにRGB値を設定) :特定の場所やページ全体の文字色の設定| --font -- 文字の色や大きさの設定 ---color="指定した文字色" ---size="指定した大きさ" (大きさは1〜7の数字を指定) --body -- ページ全体の設定 ---text="指定した文字色" ---bgcolor="指定した背景色" **HTMLファイルの作成 (3) [#a6e29fc1] 前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書(Web)ページを作成しました。 今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 ***他の情報へのリンク [#q86056a4] -<a href="...">...</a> --他のWebページにジャンプするリンクを設定します。 --「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。 --次のようにすると、[[Yahoo! JAPAN:http://www.yahoo.co.jp/]]にジャンプします。 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> --次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。 <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a> 「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a> 箇条書きの項目に、次のようなリンクを設定してください。 -「わたし」について:prefile.htmlへのリンク -「街」について:town.htmlへのリンク -「わたし」と「街」:memory.htmlへのリンク ***画像の配置 [#kacbc47d] 画像データを配置するには、''<img>''要素を使います。 -<img src="画像データの位置" alt="代替テキスト"> --src属性には、画像の位置(ファイルの場所やURL)を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします ***表によるレイアウト [#z16b7341] -<table>...</table> --テーブル(表)を設定します。 -<table border="外枠の太さ"> --border属性で表の外枠の太さを指定します(0にすると枠線が見えなくなる) -<table width="幅"> --widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します -<tr>...</tr> --テーブルのひとつの行を設定します。 -<td>...</td> --テーブルのひとつのマス目(セル)を設定します。 #ref(table_el.png,nolink); <table border="1"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <table> |1|2|3| |4|5|6| -<table cellspacing="セルの間隔"> --セルとセルの間隔を設定します(セルと外枠の間隔も設定されます) -<table cellpadding="セル枠と内容との間隔"> --セルの枠と内容の間隔を設定します <table border="2" cellspacing="1" cellpadding="5"> ''<table>''要素は、本来、表を表示するためのものですが、 この機能を使って、Webページの内容をブロック状にレイアウトすることができます。 |>|CENTER:メインメニュー| |CENTER:サブメニュー|CENTER:コンテンツ(内容)| |>|CENTER:署名| **参考リンク [#z73e9e07] -とほほのWWW入門 --http://tohoho.wakusei.ne.jp/ -Academic HTML --http://www.tg.rim.or.jp/~hexane/ach/ -The Quick Color Table --http://www.kanzaki.com/docs/colortable-t.html -0からHTML --http://www.zerokara.com/html/ |