Download presentation
Presentation is loading. Please wait.
1
情報スキル活用 第５週 基礎技術－５ その２ ： 他のページへのリンク
2
［テーマ］ 本日（第５週）の予定 他のページへリンクするａ要素について 画像を表示するｉｍｇ要素について ［作 業］
［テーマ］ 他のページへリンクするａ要素について 画像を表示するｉｍｇ要素について ［作 業］ まず、トップページ（index.html）を作成し そのページから 大学紹介・学部紹介・学科紹介へリンク 大学紹介のページで画像を表示
3
トップページについて トップページとは あるWebサイトへの入り口となるWebページのことで、ホームページともいいます。
トップページに関する情報として 配布した「授業用ホームページサービス登録承認書」には ページ URL ： defaultページ ： index.html と記載された項目があります。 URLで示した場所にindex.htmlと名前が付けられたファイルがあれば、 ファイル名を指定しなくても、そのファイルをトップページとして 取り扱うことを意味しています。
4
トップページの制作 各自のURL内にファイルindex.htmlを制作します。
（ このページをトップページとし、ページ見出し、通学風景、他のページ へリンクの順で表示するものとすれば、ＨＴＭＬ文書は次のような構造 になります。 ＜！DOCTYPE html> <html> <head> <title>学部学科紹介</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> <link > </head> <body> <h1>わたしの大学、そして学部と学科を紹介</h1> <大学紹介のページへリンク> <学部紹介のページへリンク> <学科紹介のページへリンク> </body> </html>
5
ａ（アンカー）要素による他のページへのリンク
<a href="ﾘﾝｸ先のURL"> ﾘﾝｸﾎﾞﾀﾝ </a> ① ② ③ ④ ⑤ ① a ancor ② href hyper reference ③ ﾘﾝｸ先のURL 取り出すﾌｧｲﾙの所在 ④ ﾘﾝｸﾎﾞﾀﾝ 画面上に表示する内容 文字列や画像を使用 ⑤ /a ancor終了タグ
6
トップページから他のページへのリンク すでに作った学部紹介と学科紹介のページにリンクさせます。
同じフォルダ内に各ファイルがあるものとします。 そうすれば、トップページのHTML文書は次のような構造になります。 <!DOCTYPE html> <html> <head> <title>My Top Page</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> </head> <body> <h1>わたしの大学、そして学部と学科を紹介</h1> <p><a href="CU.html">中部大学紹介</a></p> <p><a href="P.html">現代教育学部紹介</a></p> <p><a href="PJ.html">児童教育学科紹介</a></p> </body> </html>
Similar presentations
