Ｗｅｂページの作成　最初の一歩 （ link.html ）


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

　 左のようなリンク集のページ ( link.html　 例ではリンク先は一つだけですが ) を作ります。リンクは他のページやサイトに移動する基本です。
【 HTML文書の説明 1-1 】
　 リンクを貼るには a タグ を使います。a は anchor（錨 ＝ 頼みの綱を象徴する） の頭文字をとっています。


メモ帳で作成する場合
HeTeMuLu Creator で作成する場合

 
　 メモ帳で作成する場合

　 メモ帳を開いて以下の文字を打ち込んで、先に作った ｗドライブの webxxxxx フォルダーに「link.html」と名前を付けて保存して下さい。説明は後ほど行います。

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

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


 
　 HeTeMuLu Creator で作成する場合
    《手順》
    　 　 説明中、赤い文字は選択するか入力する部分を表しています。
  1. HeTeMuLu Creator を起動する
    　 すでに Ｗドライブにコピーしているはずの HM-creator フォルダー内の hetecre.exe をダブルクリック
    　 → 編集画面が開く（新規作成が出来る状態になっている）
  2. ページタブ をクリック
    　 → コマンドバーにページを設定するためのボタン（アイコン）が現れる
  3. 　「HTMLの骨組みの作成」（左端の黄色いボタン）をクリック → 「HTMLの骨組み」ダイアログが現れる
  4. 　「タイトル」欄に 最初の一歩 と入れる
    （注）　文字や背景の色もこの場面で設定することが出来るが、とりあえずタイトルだけを設定しておきます
  5. 　ＯＫボタンをクリック → ヘッダーの部分が作られ、カーソルは12行目付近に来ているはず
    （注）　カーソルが <body bgcolor="・・・>　と　</body>　の間にあることを確認しなさい
  6. 舞子の浜と入力します
  7. マウスをドラッグして上で書いた文字列を選択する → 文字と背景の色が反転する
  8. カスタムタブ をクリックする → よく使うコマンドボタンが現れる
  9. ハイパーリンクボタン(地球と鎖の絵)をクリック → ハイパーリンク設定のダイアログが現れる
  10. リンク先の欄にhttp://maikonohama.la.coocan.jp/と記入
  11. ［ＯＫ］ボタンをクリック
  12. これで a（アンカー）タグが作成され、先ほどの「舞子の浜」の文字を挟んで
    <a href="http://maikonohama.la.coocan.jp/">舞子の浜</a>
    と表示されているはず
  13. メニューバーの「ファイル」 → 「名前をつけて保存」を指定
  14. 名前を付けて保存ダイアログで「保存する場所」にｗドライブ内の「webxxxxx」フォルダを指定し、ファイル名を link.html として「保存」ボタンをクリック
    （記入終わり）
    ファイル全体はつぎのようになる

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">

    <head>
    <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
    <title>最初の一歩</title>
    </head>

    <body>

    <a href="http://maikonohama.la.coocan.jp/">舞子の浜</a>

    </body>

    </html>

    《動作確認》　（メモ帳で作成した場合と同様にします）
  1. デスクトップにある「マイドコンピュータ」をダブルクリック → 「wドライブ」をダブルクリック → 「webxxxxx」フォルダーをダブルクリック → （ webxxxxxフォルダーが開く） → link.htm をダブルクリック
  2. ブラウザーが開いて「舞子の浜」の文字に下線が付いているはず → 下線部分をクリック → 「舞子の浜」のトップページが開けばＯＫ！
    《修正と確認》　（メモ帳で作成した場合と同様にします）
  1. HeTeLuMu Creator 上で修正を加える
  2. HeTeLuMu Creator のツールバーの 「上書き保存」ボタン（フロッピーの絵） をクリック
  3. ブラウザのツールバーの 「更新（再読込）」 ボタンをクリック
【 HTML文書の説明 1-3 】
メモ帳で作成した場合よりも余分な情報が付け加わっています。
これらの情報はなくてもブラウザーが適当に判断して表示します。しかし、作成者の意図をブラウザーに正確に伝えるためには必要なものです。
  1. <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    　 これから記述するHTML文書がどの規約に従って書かれているかを示します。HTML文書の規約はいろいろと改定されています。
    　 この例では、バージョン 4.01 Transitional に従っていることを示します。

  2. <html lang="ja">
    　この文書は日本語で書くことを示します

  3. <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    　 文書の文字コード（キャラクタセット）を宣言します。これを指定することで文字化けの発生を抑えることができます。
    　 この例では、文字コードに shift_jis を指定しています。



戻る 　　 

作成：小田桐 一良　（舞子の浜）