扉のページへ｜上へ｜前のページ｜次のページ

復習

練習２ー５

  1. 新しいファイルを用意（ファイルメニューから新規，HTML）し，HTMLの骨格を入力する．
  2. ファイル名を「renshu2.html」として保存．
  3. 宿題で用意した「今週の出来事」を「renshu2.html」に入力する．
  4. 「今週の出来事」全体は <section> と <⁄section> で囲み，見出し（h1など）を付ける． 見出しは，セクションの内側．
  5. １日毎の内容は，それぞれ独立しているはずなので，<article> と <⁄article> で囲み，内容に合った「見出し」（h2）をつける．
  6. それぞれの文章の部分に「段落」等を設定し，読み易くする．

ハイパーリンク

ＨＴＭＬで書かれたファイルの特徴は，ボタンの役割をする部分を設定し，同じファイルや別のファイルのページにジャンプさせることができることです．

単純なハイパーリンク

基本的な書き方は，

<A HREF="URI"> クリックしてもらう文字や画像 </A>

ここで，「URI」とは呼び出すファイルの場所と名前のことです．リンクの行く先によって指定の仕方が変わります．

他のファイルへのリンク

最も単純でよく使うのは， URI として単にファイル名を指定することです．つまり，

<A HREF="ファイル名"> クリックしてもらう文字や画像 </A>

の様にします．こうすると，クリックしたときに「ファイル名」に指定したファイルが呼び出されます．
ただし，この時注意しなければならないのは，呼び出す側のファイルと，呼び出される側のファイルが，コンピューター上で同じフォルダーの中になければなりません．

同じ場所にないファイルを呼び出す場合は，呼び出すファイルから見て呼び出されるファイルの位置がどこにあるかを含めて指定しなければなりません．

呼び出すファイルが別の場所にある場合

練習２ー６

ブラウザにホームページアドレスを入力してwebページを呼び出すと，自動的に「index.html」というファイルが呼び出されるようになっています．従って，「index.html」を必ず作成し，他のページはそこからハイパーリンクで辿れるように作らなければなりません．

ここでは，自分の「index.html」を作成し，ハイパーリンクの練習をしてみます．

  1. VSCode で「HTML」の新規ファイルを作り，「HTMLの骨格」を書き，「index.html」という名前で保存する．
  2. 「index.html」に以前作成した「renshu1.html」へのハイパーリンクを「ホームページの練習」という文をクリックして呼び出せるように作る．
  3. 保存した後，ブラウザで「index.html」を表示させハイパーリンクが動作することを確かめましょう．

より高度なリンク

同じファイルの特定の場所にリンクする

クリックするところに，

<A HREF="#識別名"> クリックしてもらう部分 </A >

呼び出したい先のHTML要素に,「ID属性」を使用して次のように指定しておきます．

<（何らかのHTML要素） ID=" 識別名 "> リンクの行き先 </(何らかの要素)>

この 「識別名」 の部分は自分で分かりやすいキーワードに決めます．

後々の利便性を考えて，全ての見出しにはID属性を付けておくと良いでしょう．

例

例えば，このページの <BODY> に 「 top 」 という「ID属性」を付けておけば，

このページの先頭へ

というようなボタンを作ることが出来ます．

今の場合は，<BODY> のところを

<BODY ID="top">

クリックするところに，

<A HREF="#top"> このページの先頭へ </A>

と書けばよいのです．

別のファイルの特定の場所にリンクする

クリックするところに，

dammy
<A HREF="URI#識別名"> クリックしてもらう部分 </A>

リンク先には次のように指定しておきます．

<(何かの要素) ID="識別名"> リンクの行き先 </(何かの要素)>

例

例えば，前ページ（「jyoho_a1.html」 というファイル）の「インターネット使用法」という見出しに 「usage」 という名前を付けておけば，

dammy インターネットの使用法

というようなリンクを作ることが出来ます．

今の場合は，「jyoho_a1.html」 というファイルの「インターネットの使用法」という見出しのところに

dammy
<H2 ID="usage">インターネットの使用法</H2>

クリックするところに，

<A HREF="jyoho_a1.html#usage">インターネットの使用法</A >

と書けばよいのです．

別のホームページにリンクする

クリックする部分に

<A HREF="http://(homepage-address)"> クリックしてもらう部分 </A>

とすれば，他のホームページにリンクを張れます．

例

例えば，

<A HREF="http://www.kitasato-u.ac.jp"> 北里大学ホームページ </A>

とすれば，次のようになります．

クリックして下さい． 北里大学ホームページ

読み込むウィンドウを指定する

通常リンク先のファイルは,呼び出したファイルと同じ窓に読み込まれますが,「TARGET属性」を指定することによって,これを変更することが可能です.指定できる値は以下のものです.

ウィンドウ名予めウィンドウに名前を付けておきそれを指定
_blank新しい窓を開いて表示
_self元と同じ窓に表示
_parent現在の窓の親に当たる窓に表示
_top最も上位の窓に表示

例

例えば，

<A HREF="http://www.kitasato-u.ac.jp" TARGET="_blank"> 北里大学ホームページ </A>

とすれば，次のようになります．

クリックして下さい． 北里大学ホームページ

練習２ー７

注意：以下で使用しているnav要素とは，以前説明したようにWebページ内を移動するリンクをまとめておくために使用します． こうしておくと，後からレイアウトやデザインを設定するのが容易になります．

  1. 「renshu1.html」，「renshu2.html」それぞれのページに，「ページ内のリンク用」と，「他ページへのリンク用」の nav要素 <nav>と</nav> を用意しておく．レイアウトは後で変更できるので，どこに記述しても良い．ページが増えれば，「他ページへのリンク用」のnav要素は増えていく．
    このとき，各nav要素を区別するために，id属性を付けておく．書き方は，上にあるように（例：<nav id = "renshu1">，<nav id = "renshu2">など）のように，HTML要素の始まる方に付け加える．終わりの方には書かない．要素名とid属性の間は，半角のスペースを開ける．
  2. 「renshu1.html」，「renshu2.html」それぞれに，お互いのページ間を移動するリンクを作り，各ベージの「他ページへのリンク用」の nav要素 <nav>と</nav> の間に書く．
  3. 各ページの各見出しに「id属性」を設定する．
    設定方法は，上にあるように（例：<h1 id="konshu">とか，<h2 id="monday">）のように，HTML要素の始まる方に付け加える．終わりの方には書かない．要素名とid属性の間は，半角のスペースを開ける．
  4. 「renshu1.html」，「renshu2.html」それぞれに，ページ内の各見出しへ移動するリンクを作り，「ページ内のリンク用」の nav要素 の間に書く．
  5. 「renshu1.html」，「renshu2.html」それぞれのページの「他ページへのリンク用」の nav要素 の中に，他のページの各見出しを呼び出すリンクを作り，上で作った，他ページへのリンクの下に，まとめて書いておく．
  6. 保存した後，ハイパーリンクが動作することを確認する．
書き方の例：renshu1.html書き方の例：renshu2.html
(ページ内リンク用)
<nav id = "renshu1">

(見出しへのリンク：見出しが先頭に来る)
<a href="#見出し1のid">ページ内の見出し1</a>
<a href="#見出し2のid">ページ内の見出し2</a>

</nav>


(他ページへのリンク用)
<nav id = "renshu2">

(通常のリンク：ページの先頭へ行く)
<a href="renshu2.html">renshu2.html</a>

(見出しへのリンク：見出しが先頭に来る)
<a href="renshu2.html#見出し1のid">renshu2.htmlの見出し1</a>
<a href="renshu2.html#見出し2のid">renshu2.htmlの見出し2</a>

</nav>


<nav id = "renshu2">

<a href="#見出し1のid">ページ内の見出し1</a>
<a href="#見出し2のid">ページ内の見出し2</a>

</nav>

<nav id = "renshu1">

<a href="renshu1.html">renshu1.html</a>

<a href="renshu1.html#見出し1のid">renshu1.htmlの見出し1</a>
<a href="renshu1.html#見出し2のid">renshu1.htmlの見出し2</a>

</nav>

ホームページの公開

作成したホームページは，インターネットに公開されているコンピューター（WEBサーバー）に送っておかなければ見ることができません．

練習２ー８

今まで作成したHTMLファイルを「stuサーバー」（学生用のWEBサーバー）にある自分のホームディレクトリーの中の「public_html」と言うディレクトリーに送ってみましょう．参照：ホームページを公開する

公開したら，ブラウザに自分のホームページアドレス（参照：ホームページを見る）を入力して表示できることを確認しましょう．

HTML文法チェック

公開したホームページや，作成したHTMLファイルの文法をチェックしてくれるサイトがあります．

代表的なサイト

  1. Another HTML-lint：HTML 文法チェッカー
  2. The W3C Markup Validation Service：HTML 文法チェッカー
  3. (X)HTML5 Validator：HTML 文法チェッカー
  4. W3C CSS 検証サービス ：CSS 文法チェッカー

練習２ー９

自分のホームページをチェックして，エラーがあったら修正しましょう．
注意：Another HTML-lint の場合，HTMLヴァージョンをHTML5にしてチェックして下さい．

宿題

前回同様，今後１週間，毎日の出来事などを１日１００文字以上記述しておく（今週の出来事２），関連する写真なども撮っておくと良い．さらに，「好きな季節」，「行ってみたい場所」の内容で，それぞれ２００字くらいの文章を書いておく．

扉のページへ｜上へ｜前のページ｜次のページ