作成:2001年2月22日 改版着手:2013年8月4日 
表紙目次情報・コンピュータ・・・HTMLガイドWebページの作成 1・2・3

Webページの作成 最初の一歩 ( link.html )

舞子の浜
  ↑
  ここをクリックすると
  舞子の浜を表示する

  左のようなリンク集のページ ( link.html  例ではリンク先は一つだけですが ) を作ります。
  リンクは他のページやサイトに移動する基本です。


【 HTML文書の説明 1-1 】
  リンクを貼るには a タグ を使います。a は anchor(錨 = 頼みの綱を象徴する)の頭文字をとっています。

  メモ帳を開いて以下の文字を打ち込み、「link.html」と名前を付けて保存して下さい。説明は後ほど行います。

<html>
<head>
<title>最初の一歩</title>
</head>
<body>
<a href="http://maikonohama.la.coocan.jp/">舞子の浜</a>
</body>
</html>

《手順》

  1. メモ帳を開く
      「スタート」 → 「プログラム」 → 「アクセサリ」 → 「メモ帳」をクリック
  2. 上の文字を打ち込む
      キーボードから一文字ずつ打ち込んで行くのですが、つぎのような便法があります
      《便法》 画面上の <html> にマウスカーソルを移動させ、左のボタンを押しながら最下行の </html> までドラッグ → (文字が反転する) → 「Ctrlキー」を押しながら「c」キーを押す(選択した範囲がクリップボードにコピーされる) → メモ帳をアクティブにする(メモ帳にマウスを移動させる) → 「Ctrlキー」を押しながら「v」キーを押す(クリップボードの内容を貼り付ける)
  3. 名前を付けて保存する
      メモ帳の「ファイル」 → 「名前を付けて保存」をクリック → ダイアログが表示される → 保存する場所(フォルダー)を指定 → ファイル名を「link.html」とする → 「保存」ボタンをクリック

《動作確認》

  1. デスクトップにある「マイドキュメント」をダブルクリック → (マイドキュメントが開く) → 保存した場所(フォルダー)を指定 → ( フォルダーが開く) → link.html をダブルクリック
  2. ブラウザーが開いて「舞子の浜」の文字に下線が付いているはず → 下線の付いている文字をクリック → 「舞子の浜」のトップページが開けばOK!
  3. 【うまく表示されない場合】
      (1) 打ち込んだ文字に間違いがないか点検 → 間違いがあれば修正
      (2) (メモ帳の)ファイル → 「上書き保存」を指定
      (3) (ブラウザーの)更新ボタンをクリック
      (4) 「舞子の浜」のトップページが開くか確認をする

【 HTML文書の説明 1-2 】

  1. <title>最初の一歩</title> によって「最初の一歩」という文字をタイトルバーに表示させます。ブラウザーの画面には現れないので head部 に書きます
  2. リンク先のURLは aタグ内で href="・・・・・"とし、「・・・・・」の個所にURLを書きます
    リンク先はこの例のようにインターネット上のサイトでも、自分のフォルダー内にあるファイルでもかまいません
  3. 「舞子の浜」の文字は画面に表示させるので body部 に書きます

直前のページに戻る    


作成 : 小田桐 一良

Valid HTML 4.01 Transitional   正当なCSSです!