情報スキル活用 第３週 基礎技術ー３ : 学部・学科紹介のページ作成
基礎技術-３（文章表現：学部・学科紹介のページ作成） 学部・学科の特徴などを紹介するWebページを作ることにします。 紹介する文章は、講義用Webページの［講義資料］欄に掲載してあります（大学案内文：Gakubu_Shoukai.zip） ファイルはzip形式で圧縮してあります。ダウンロードしたのち、解凍しなさい。
学部紹介のWebページを制作 ① テキストファイルを htmlファイル形式で保存します。 文章ををﾃｷｽﾄｴﾃﾞｨﾀｰでﾀｲﾌﾟし、 文章ををﾃｷｽﾄｴﾃﾞｨﾀｰでﾀｲﾌﾟし、 「名前を付けて保存」 ⇒ 所属学部ｺｰﾄﾞ.html（ 現代教育学部の場合 P.html ② このファイルに基本要素を次のように入力します。 ファイルの前に次の４行追加 <!DOCTYPE html> <html> <head><title>｛自分の所属｝学部紹介</title></head> <body> ここに所属学部の内容をタイプした文が入ります。 ファイルの最後尾に次の行を追加 </body> </html> ③ 「所属ｺｰﾄﾞ」.htmlを閲覧ソフトに取り出し、テキストエディター画面と並べて表示します。
タグと画面表示の関係 先週の講義で解説したように、データを画面上に表示するには、表示目的に応じて要素を用います。 要素は、表示する内容や範囲を示すために［タグ］と呼ぶ表現を使います。 タグは次の形をしています。 ＜要素名＞要素名に従って表示される内容＜／要素名＞ ↑ ↑ 開始タグ 終了タグ テキストエディターで作成した内容のうち、［Enter]キーや［Space]キーは、閲覧ソフトでは無視されます。 このため、基本要素の追加だけでは、連続した文章になってしまいます。
P.html に赤色で示したタグを追加 現代教育学部紹介の文章をﾀｲﾌﾟ <!DOCTYPE html> ← 閲覧ｿﾌﾄに「html」ﾌｧｲﾙであることを知らせるﾀｸﾞ <html> 常に１行目に記載する。 <head><title>現代学部紹介</title></head> <body> </body> </html> 現代教育学部紹介の文章をﾀｲﾌﾟ
h要素 ： 見出し（タイトル） h は、headerの略 h要素は、そのﾍﾟｰｼﾞのﾀｲﾄﾙなどｷｰとなる用語に使う。 開始ﾀｸﾞと終了ﾀｸﾞの間の文章をﾀｲﾄﾙとして表示します。 例 <h1>ﾍﾟｰｼﾞのﾀｲﾄﾙとなる用語</h1> hに続く数値は、表示する文字の大きさの指定に使用 １が最も大きく、２，３，４，５と順に小さくなる。 そのﾍﾟｰｼﾞの内容を表すｷｰﾜｰﾄﾞとしても扱われる。 6
ｂｒ要素 ： 改行（つぎの行の先頭） br は break line の略で「つぎの行の先頭」の意味し、エディターでテキスト入力中の「Enter」キーの役割をします。これは、閲覧ソフトがキーボードの文字以外の記号は無視するためです。また、半角のスペースも無視するので を使用します。 br要素のように、処理対処となるデータを持たない場合の要素のタグは、開始タグだけとなります。 br要素のタグ ： <br /> 行間に空白行を表示したいときは、その行数＋１だけ使用 例：空白行２行の場合 <br /><br /><br /> 7
ｐ要素 ： 段落（ひと纏まりの文） 例 <p> ： </p> p は、paragraphの略 開始タグと終了タグの間の文章を段落（ひと纏まり）として表示します。 例 <p> ： 開始タグと終了タグの間の文章が段落として扱われます。 </p> この部分 8
学部紹介の文にﾀｸﾞを追加 <h1>現代教育学部</h1> <!DOCTYPE html> <html> <head><title>現代教育学部紹介</title></head> <body> <h1>現代教育学部</h1> <h4>Contenporary Education</h4> <br /> <h2> 子どもに寄りそいながら、ロマンを<br /> 共に紡ぐことができる教育の専門家を養成 </h2> <h3>子どもたちの心のよりどころになれるような魅力ある先生に</h3> <p> 20 世紀の教育は ・・・～～・・・ </p> <h3>実践に強く、特別支援学校や保育に強い教育者を養成</h3> 小学校や幼稚園の教師、保育所の保育士に今最も必要な力は、・・・～～・・・ </body> </html>
同じ要領で 学科紹介のページを 制作しなさい。 <!DOCTYPE html> <html> <head><title>児童教育学科</title></head> <body> </body></html>
学科紹介のページ <h1>児童教育学科</h1> <!DOCTYPE html> <html> <head><title>児童教育学科紹介</title></head> <body> <h1>児童教育学科</h1> <h4>Childhood Education</h4> <br /> <h3> 時代のニースを敏感に捉え、確かな教育力と<br /> 行動力を発揮できる教師の育成 </h3> <p> 教師に求められるさまざまな能力には ・・・～～・・・ </p> 「小学校の教師になる！」という夢を<br /> 効果的なカリキュラムを通して前面サポート 児童教育の現場で求められているのは・・・～～・・・ </body> </html>
来週（第４週）の予定 宿題 学部紹介と学科紹介のページを完成しておきなさい。 また、同様に大学紹介のページも作っておきなさい。 次回：基礎技術－４では 作成した上の二つのページに対してスタイルシートを適用して 色彩と形状を考えたデザインを施します。