応用編

全体の流れ

1. 準備
2. HTMLコードNo1
3. 基本編
4. 応用編
5. 情報編
6. レベルアップ
7. スタイルシート
8. 外部スタイルシート
9. 公開
10. url登録 宣伝

Pickup

• 無料アフィリエイト
• 無料ブログ 比較 宣伝

複数ページ

応用編では、複数ページとリンクの使い方を紹介しています。

Lesson6 リンクの説明と準備

リンクの説明をする前に、わかりやすいように準備をしましょう。

新規フォルダを2つ作成して、フォルダ名を「 Homepage 」「 main 」に名前を変更してください。

◇ 新規フォルダ作成手順

デスクトップでマウス右クリック ⇒ 新規作成 ⇒ フォルダ

◇ 下の手順で、完成図と同じように作成してみてください。

1. mainフォルダにindex.html（No1）を入れます。
2. 新たにHTMLコードNo2をコピー、名前を「 index.html 」にしてください。
3. 2．で作成したindex.html（No2）をHomepageフォルダに入れます。
4. 2．で作成したindex.html（No2）をダブルクリック。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

          ┏━━━━━━━━━┓      ┏━━━━━━━━━┓
　完成図　┃ index.html（No2）┣━━━┫ index.html（No1）┃
　　　　　┗━━━━━━━━━┛      ┗━━━━━━━━━┛
                Homepege                       main

　　　━━━ 前のフォルダの中に入っているという意味です。



〜〜〜〜〜〜〜〜〜〜〜解説〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

                               　┏━━━┓  ┏━━━┓
　　          a) index.html━━━┫      ┣━┫      ┃
http://www.syousai.com/          ┗━━━┛  ┗━━━┛

                               　┏━━━┓  ┏━━━┓
　　          b) index.html━┳━┫  A   ┣━┫  B   ┃
                             ┃　┗━━━┛  ┗━━━┛
　　　　　                   ┃
　　　　                     ┃　┏━━━┓  ┏━━━┓
                             ┗━┫  C   ┣━┫  D   ┃
                               　┗━━━┛  ┗━━━┛

◇ 他のサイトに移動するリンク

<a href="http://www.syousai.com/">〜</a>

<a href="〜">〜</a> 〜部分にアドレス http:// から記載します。

◇ 自分のサイト内を移動するリンク

1. 同じフォルダの場合

<a href="移動ページ名">〜</a>

2. 一階層上に移動する場合　（ 例：B から A

<a href="../移動ページ名">〜</a>

3. 一階層下に移動する場合　（ 例：C から D

<a href="移動するフォルダ名/移動ページ名">〜</a>

リンクを貼るページから見て使い分けます。

Lesson7 画像の説明と準備

次は画像の使い方を覚えておきましょう。画像提供サイトは、牛飼いとアイコンの部屋がオススメです。（無料）

◇ 下の手順で、完成図のように作成してみてください。

1. フォルダを1つ作成し「 images 」に名前変更、画像を中に入れます。
2. imagesフォルダをHomepageフォルダに入れてください。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

　　　    ┏━━━━━━━━━┓      ┏━━━━━━━━━┓
　完成図　┃ index.html（No2）┣━┳━┫ index.html（No1）┃
　　　　　┗━━━━━━━━━┛  ┃  ┗━━━━━━━━━┛
　　　　　　　 Homepege　　       ┃           main
　　　　　　　　　　　　　      　┃　┏━━━━━━━━━┓
　　　　　　　　　　　　　　      ┗━┫       画像       ┃
                                      ┗━━━━━━━━━┛
                                              images

〜〜〜〜〜〜〜〜〜〜〜解説〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

記載方法
<img src="images/画像の名前" width="" height="" border="0" alt="">

画像には、width height altを設定しましょう。画像プロパティで確認します。（画像アイコン上でマウス右クリック）

• width ⇒ 画像の横幅
• height ⇒ 画像の縦幅
• alt ⇒ 画像が表示されなかったとき文字が表示されます。

※ 意味のない画像の時は ⇒ alt="" 空白で問題ありません。

images/〜" ⇒ 〜部分に画像の名前を記入します。

「images」は任意のフォルダ名です。同じフォルダに画像があれば、画像の名前だけになります。

また、上の図のindex.html（No1）でimagesの中の画像を利用する場合は、「 ../images/画像の名前 」となります。

画像にリンクを貼ることもできます。下のリンク画像を試してみましょう。

Lesson8 リンク画像の設定

記載方法
<a href=""><img src="" width="" height="" border="0" alt=""></a>

他のサイトに移動する場合は、「 http:// 」から記入します。

リンク画像はアドレスを先に記載し、その後に画像の場所を記載します。注意点は最後に</a>が記載されます。以上でリンク画像が機能します。

target="_blank" ⇒ 新しいウィンドウでリンク先が開きます。

次は、ホームページに記載しておいた方が良い情報を紹介しています。