情報スキル活用 第６週 基礎技術のまとめ 復習
これまで（第１週～第５週）の内容 第１週 ：ガイダンス ：基礎技術－１ ① Ｗｅｂページの所在 ② Ｗｅｂページの基本構造確認 第１週 ：ガイダンス ：基礎技術－１ ① Ｗｅｂページの所在 ② Ｗｅｂページの基本構造確認 第２週 ：基礎技術－２ ① html文書と閲覧ソフトについて ② html文書について 第３週 ：基礎技術－３ ① Ｗｅｂページの標準規格 ② 学部・学科紹介のページ作成 第４週 ：基礎技術ー４ ① スタイルシートとhtml文書との関連付け ② これまでに制作したﾍﾟｰｼﾞへのｽﾀｲﾙｼｰﾄの適用 第５週 ：基礎技術ー５ ① ページ間連携 と 画像の取り扱い 2
トップページについて（復習） トップページとは あるWebサイトへの入り口となるWebページのことで、ホームページともいいます。 トップページに関する情報として 配布した「授業用ホームページサービス登録承認書（暫定）」には ページ URL ： http:// www2.isc.chubu.ac.jp/jc/学籍番号/ defaultページ ： index.html と記載された項目があります。 URLで示した場所にindex.htmlと名前が付けられたファイルがあれば、 ファイル名を指定しなくても、そのファイルをトップページとして 取り扱うことを意味しています。
トップページの制作（復習） 各自のURL内にファイルindex.htmlを制作します。 （www.isc.chubu.ac.jp/学籍番号/index.html) このページをトップページとし、ページ見出し、通学風景、他のページ へリンクの順で表示するものとすれば、ＨＴＭＬ文書は次のような構造 になります。 <html> <head> <title>大学・学部・学科紹介</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> <link > </head> <body> <h1>わたしの大学・学部・学科紹介</h1> <大学紹介のページへリンク> <学部紹介のページへリンク> <学科紹介のページへリンク> </body> </html> スタイルシートのファイル名 index.css の index部分は任意 例 ： index_style.css であれば href="index_style.css となる
<a href="ﾘﾝｸ先のURL"> ﾘﾝｸﾎﾞﾀﾝ </a> ａ（アンカー）要素 （復習） <a href="ﾘﾝｸ先のURL"> ﾘﾝｸﾎﾞﾀﾝ </a> ① ② ③ ④ ⑤ ① a ancor（ｱﾝｶｰ） ② href hyper reference ③ ﾘﾝｸ先のURL 取り出すﾌｧｲﾙの所在 ④ ﾘﾝｸﾎﾞﾀﾝ 画面上に表示する内容 文字列や画像を使用 ⑤ /a ancor終了タグ
他のページへのリンク（復習） すでに作った大学、学部、学科の各紹介ページにリンクさせます。 同じフォルダ内に各ファイルがあるものとします。 そうすれば、トップページのHTML文書は次のような構造になります。 <html> <head> <title>大学・学部・学科紹介</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> <link > </head> <body> <h1>わたしの大学・学部・学科紹介</h1> <a href="CU.html">大学紹介のページへ</a><br /><br /> <a href=“ P.html">学部紹介のページへ</a><br /><br /> <a href="PJ.html">学科紹介のページへ</a><br /><br /> </body> </html>
ｉｍｇ要素（復習） <img src="表示する画像のファイル名" alt="画像の説明文" align="位置" /> ③ ① ② ④ ⑤ ① img image 画像表示タグ ② src source 画像のﾌｧｲﾙ名 ③ alt alternate 画像ﾌｧｲﾙの説明 表示された画像にマウスポインタを合わせれば、その画像の説明文が表示される。 ④ align 画像の表示位置 画像の右側または左側に文章を表示したいときには、alignを使用する。 ⑤ / img終了
ｉｍｇ要素（追加） <img src="表示する画像のファイル名" alt="画像の説明文" align="位置" 画像のサイズを指定 width= 50% 横幅 height=50% 高さ /> 表示する画像のサイズの単位は px(ﾋﾟｸｾﾙ） pt(ﾎﾟｲﾝﾄ） %（画面との比率 などがあります。
できあがったファイル ① トップページ index.html index.css ② 大学紹介 CU.html CU.css ③ 学部紹介 P.html P.css ④ 学科紹介 PJ.html PJ.css ⑤ 画像ﾌｧｲﾙ これらのファイルをＷｅｂサーバーへアップロードします。 場所は、www2.isc.chubu.ac.jp/jc/学籍番号/kiso/ です。
本日（第６週）の予定 Web技術のまとめ 「Web技術を用いた作品」の提出 なお、一通り完成している人は スタイル（デザイン）をさらにレベルアップ しなさい。