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>
《手順》
- メモ帳を開く
「スタート」 → 「プログラム」 → 「アクセサリ」 → 「メモ帳」をクリック
- 上の文字を打ち込む
キーボードから一文字ずつ打ち込んで行くのですが、つぎのような便法があります
《便法》 画面上の <html> にマウスカーソルを移動させ、左のボタンを押しながら最下行の </html> までドラッグ → (文字が反転する) → 「Ctrlキー」を押しながら「c」キーを押す(選択した範囲がクリップボードにコピーされる) → メモ帳をアクティブにする(メモ帳にマウスを移動させる) → 「Ctrlキー」を押しながら「v」キーを押す(クリップボードの内容を貼り付ける)
- 名前を付けて保存する
メモ帳の「ファイル」 → 「名前を付けて保存」をクリック → ダイアログが表示される → 保存する場所(フォルダー)を指定 → ファイル名を「link.html」とする → 「保存」ボタンをクリック
《動作確認》
- デスクトップにある「マイドキュメント」をダブルクリック → (マイドキュメントが開く) → 保存した場所(フォルダー)を指定 → ( フォルダーが開く) → link.html をダブルクリック
- ブラウザーが開いて「舞子の浜」の文字に下線が付いているはず → 下線の付いている文字をクリック → 「舞子の浜」のトップページが開けばOK!
- 【うまく表示されない場合】
(1) 打ち込んだ文字に間違いがないか点検 → 間違いがあれば修正
(2) (メモ帳の)ファイル → 「上書き保存」を指定
(3) (ブラウザーの)更新ボタンをクリック
(4) 「舞子の浜」のトップページが開くか確認をする
【 HTML文書の説明 1-2 】
- <title>最初の一歩</title> によって「最初の一歩」という文字をタイトルバーに表示させます。ブラウザーの画面には現れないので head部 に書きます
- リンク先のURLは aタグ内で href="・・・・・"とし、「・・・・・」の個所にURLを書きます
リンク先はこの例のようにインターネット上のサイトでも、自分のフォルダー内にあるファイルでもかまいません
- 「舞子の浜」の文字は画面に表示させるので body部 に書きます
直前のページに戻る